* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Sarabun', sans-serif;
    background: #fff;
    color: #222;
    overflow-x: hidden;
}

/* ── NAVBAR ── */
.navbar-pet {
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 100;
}

.navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.brand-icon {
    width: 40px;
    height: 40px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.brand-icon:hover { opacity: 0.85; }

.brand-name {
    font-family: 'Kanit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 3rem;
    list-style: none;
}

.nav-links a {
    color: #666;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.nav-links a:hover { color: #222; }

/* ── HERO ── */
.hero-section {
    min-height: calc(100vh - 73px);
    display: flex;
    align-items: center;
    background: url('img/bg.png') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ── HERO INNER (constrained) ── */
.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 5;
}

/* ── LEFT TEXT ── */
.hero-text {
    flex: 1;
}

.hero-title {
    font-family: 'Kanit', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.hero-desc {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.85;
    margin-bottom: 2.5rem;
    max-width: 420px;
}

.btn-cta {
    display: inline-block;
    background: linear-gradient(135deg, #f5a623 0%, #e8891a 100%);
    color: #fff;
    font-family: 'Kanit', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 1rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 25px rgba(245,166,35,0.45);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 35px rgba(245,166,35,0.55);
    color: #fff;
}

/* ── RIGHT IMAGE ── */
.phone-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 48%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* ── INFO SECTION (ภาพมือถืออออออออออออออออออออออออออออออออออออออออออออออออออ) ── */
.phone-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .phone-wrapper { display: none; }
}

@media (max-width: 768px) {
    .hero-title { font-size: 3rem; }
}

/* ── INFO SECTION (Background & Pain Point) ── */
.info-section {
    background: #fff;
    padding: 5rem 0;
}

.info-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.info-text {
    flex: 1;
}

.info-title {
    font-family: 'Kanit', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    color: #f5a623;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.info-title.pain {
    margin-top: 2.5rem;
}

.info-desc {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.9;
}

.pain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pain-list li {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.9;
    padding-left: 1.2rem;
    position: relative;
}

.pain-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #444;
}

/* RIGHT phone */
.info-phone {
    flex: 0 0 auto;
    width: 38%;
    display: flex;
    justify-content: center;
}

.info-phone-img {
    width: 120%;
    max-width: 880px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
}

@media (max-width: 992px) {
    .info-inner { flex-direction: column; }
    .info-phone { width: 70%; }
}

/* ── SECTION: Background + Pain Point ── */
.section-bg-pain {
    background: #fff;
    padding: 5rem 0;
}

.section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.section-text {
    flex: 1;
}

.section-title {
    font-family: 'Kanit', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.section-title.orange { color: #f5a623; }

.section-desc {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.9;
    margin-bottom: 0.5rem;
}

.pain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pain-list li {
    font-size: 1.05rem;
    color: #333;
    line-height: 1.9;
    padding-left: 1.2rem;
    position: relative;
}

.pain-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #333;
}

/* ── SECTION PHONE ── */
.section-phone {
    flex: 0 0 auto;
    width: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-phone-img {
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
}

@media (max-width: 992px) {
    .section-phone { display: none; }
    .section-inner { flex-direction: column; }
}

/* ── SECTION: OBJECTIVE ── */
.objective-section {
    background: #fff;
    padding: 5rem 0;
}

.objective-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.objective-text {
    flex: 1;
}

.objective-title {
    font-family: 'Kanit', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #f5a623;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.objective-desc {
    font-size: 1.25rem;
    font-weight: 500;
    color: #222;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.objective-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.objective-list li {
    font-size: 1.1rem;
    color: #222;
    line-height: 1.9;
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.objective-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #222;
    font-weight: bold;
    font-size: 1.2rem;
}

/* ── OBJECTIVE GRAPHIC (Right Side) ── */
.objective-graphic {
    flex: 0 0 auto;
    width: 45%; 
    display: flex;
    justify-content: flex-end;
}

.objective-img {
    width: 150%;
    max-width: 800px;
    height: auto;
    object-fit: contain;
}

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .objective-inner {
        flex-direction: column;
    }
    .objective-graphic {
        width: 80%;
        justify-content: center;
        margin-top: 2rem;
    }
}
@media (max-width: 768px) {
    .objective-desc {
        font-size: 1.1rem;
    }
    .objective-list li {
        font-size: 1rem;
    }
}
/* ── แก้ไขเพื่อให้เนื้อหาขยายกว้างออกไปด้านข้าง ── */

/* สำหรับ Navbar */
.navbar-inner {
    max-width: 1500px; /* เพิ่มจาก 1200px */
    padding: 0 4rem;    /* ปรับ padding เล็กน้อย */
}

/* สำหรับ Hero Section */
.hero-inner {
    max-width: 1500px; /* เพิ่มจาก 1200px */
    padding: 3rem 4rem;   /* ปรับ padding */
}

/* สำหรับ Info Section (Background & Pain Point) */
.info-inner {
    max-width: 1500px; /* เพิ่มจาก 1200px */
    padding: 0 4rem;    /* ปรับ padding */
}

/* สำหรับ Objective Section (ที่เคยให้ไป) */
.objective-inner {
    max-width: 1500px; /* เพิ่มจาก 1200px */
    padding: 0 4rem;    /* ปรับ padding */
}

/* สำหรับ Feature Section (ที่เคยให้ไป) */
.features-inner {
    max-width: 1500px; /* เพิ่มจาก 1200px */
    padding: 0 4rem;    /* ปรับ padding */
}

/* สำหรับ Section อื่นๆ (ถ้ามี) */
.section-inner {
    max-width: 1500px; /* เพิ่มจาก 1200px */
    padding: 0 4rem;    /* ปรับ padding */
}

/* ── ขยับรูป Objective (ลายตารางด้านล่าง) ไปทางขวา ── */
.objective-graphic {
    transform: translateX(168px); /* ลองปรับตัวเลข 60px ให้มากขึ้นหรือน้อยลงได้ตามความต้องการครับ */
}

/* หากรูปใหญ่ไม่พอ สามารถปลดคอมเมนต์ด้านล่างเพื่อขยายขนาดเพิ่มได้ครับ */
/*
.objective-img {
    max-width: 650px; 
}
*/


/* ── SECTION: WHAT TO COMMUNICATE ── */
.communicate-section {
    background: #fff;
    padding: 6rem 0;
    text-align: center;
}

.communicate-inner {
    max-width: 1500px; /* ใช้ 1500px ตามที่ปรับไว้ล่าสุดครับ */
    margin: 0 auto;
    padding: 0 2rem;
}

.communicate-title {
    font-family: 'Kanit', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #f5a623;
    margin-bottom: 1.2rem;
    line-height: 1.2;
}

.communicate-desc {
    font-family: 'Kanit', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 500;
    color: #222;
    margin: 0;
}

/* Responsive เผื่อหน้าจอมือถือ */
@media (max-width: 768px) {
    .communicate-section {
        padding: 4rem 0;
    }
}

/* ── SECTION: WHAT TO COMMUNICATE (แยกหน้า) ── */
.communicate-section {
    background: #fff;
    /* เปลี่ยนจาก padding เป็น min-height เพื่อให้เต็มจอ และจัดให้อยู่ตรงกลาง */
    min-height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.communicate-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}


/* ── SECTION: LOGO ORIGIN (ที่มาของโลโก้) ── */
.logo-origin-section {
    background: #fff;
    padding: 8rem 0; /* เว้นระยะห่างบน-ล่างให้ดูโปร่ง */
}

.logo-origin-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem; /* ระยะห่างระหว่าง รูปโลโก้ -> ข้อความ -> รูปม็อคอัพ */
}

/* 1. รูปโลโก้หลักด้านบน */
.logo-large-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo-large-img {
    max-width: 1150px; /* ปรับขนาดโลโก้ตามต้องการ */
    height: auto;
    object-fit: contain;
}

/* 2. ข้อความอธิบาย ซ้าย-ขวา */
.logo-desc-container {
    display: flex;
    width: 100%;
    max-width: 1000px; /* บีบให้ข้อความไม่ออกไปกว้างเกินไป จะได้อ่านง่าย */
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.logo-text-left {
    flex: 0 0 auto;
}

.logo-title-sub {
    font-family: 'Kanit', sans-serif;
    font-size: 1.5rem;
    color: #222;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.logo-title-main {
    font-family: 'Kanit', sans-serif;
    font-size: 3rem;
    color: #f5a623;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}

.logo-text-right {
    flex: 1;
    text-align: right; /* จัดข้อความชิดขวาตามแบบ */
}

.logo-desc {
    font-size: 1.15rem;
    color: #333;
    line-height: 1.8;
    margin: 0;
}

/* 3. รูปม็อคอัพพื้นหลังสีน้ำเงินด้านล่าง */
.logo-mockup-wrap {
    width: 100%;
    max-width: 1100px; /* ความกว้างสูงสุดของรูปม็อคอัพ */
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.logo-mockup-img {
    width: 100%;
    height: auto;
    border-radius: 20px; /* ทำมุมโค้งมนตามในภาพ */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* ใส่เงาเบาๆ ให้ดูมีมิติ */
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ/แท็บเล็ต ── */
@media (max-width: 992px) {
    .logo-desc-container {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .logo-text-right {
        text-align: left; /* มือถือให้จัดข้อความชิดซ้ายปกติ */
    }
    .logo-origin-inner {
        padding: 0 2rem;
    }
}


/* ── SECTION: COLOR PALETTE (ชุดสี) ── */
.color-palette-section {
    background: #fff;
    /* เว้นระยะห่างด้านบนเล็กน้อยให้ดูต่อเนื่องจากรูปม็อคอัพ และเว้นด้านล่างเผื่อ Section ถัดไป */
    padding: 2rem 0 8rem 0; 
    display: flex;
    justify-content: center;
}

.color-palette-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-palette-img {
    width: 100%;
    max-width: 1100px; /* กำหนดความกว้างสูงสุดไม่ให้รูปใหญ่จนล้นจอ */
    height: auto;
    object-fit: contain;
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ ── */
@media (max-width: 992px) {
    .color-palette-inner {
        padding: 0 2rem;
    }
}

.color-palette-img {
    width: 100%;
    max-width: 1100px;
    height: auto;
    object-fit: contain;
    border-radius: 20px; /* เพิ่มมุมโค้งมน */
    /* box-shadow: 0 15px 40px rgba(0,0,0,0.1); */ /* (ถ้าต้องการเงาก็ปลดคอมเมนต์บรรทัดนี้ได้เลยครับ) */
}


.color-palette-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    justify-content: center; /* บังคับให้อยู่ตรงกลางเสมอ */
}

.color-palette-img {
    width: 100%; /* สำคัญมาก: บังคับให้รูปยืดเต็มกรอบ */
    max-width: 1100px; /* ล็อกให้เท่ากับรูปบนเป๊ะๆ */
    height: auto;
    display: block;
    border-radius: 20px; /* เผื่ออยากให้มุมโค้งมนเข้ากับรูปบน */
}


/* ── SECTION: TYPOGRAPHY (แบบอักษร) ── */
.typography-section {
    background: #fff;
    /* ระยะห่างด้านบน 2rem เพื่อให้ดูต่อเนื่องจากชุดสี และด้านล่าง 8rem เผื่อจบหน้าหรือขึ้นส่วนใหม่ */
    padding: 2rem 0 8rem 0; 
    display: flex;
    justify-content: center;
}

.typography-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.typography-img {
    width: 100%;
    max-width: 1100px; /* บังคับให้กว้างเท่ากับ 2 รูปด้านบน */
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 20px; /* เพิ่มความโค้งมนที่มุมเผื่อไว้ให้เข้ากับดีไซน์ */
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ ── */
@media (max-width: 992px) {
    .typography-inner {
        padding: 0 2rem;
    }
}


/* ── SECTION: MOCKUPS (ภาพสินค้าประยุกต์) ── */
.mockups-section {
    background: #fff;
    /* ระยะห่างด้านบน 2rem ให้ต่อจากฟอนต์ และด้านล่าง 8rem เผื่อมี Section ถัดไป */
    padding: 2rem 0 8rem 0; 
    display: flex;
    justify-content: center;
}

.mockups-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mockups-img {
    width: 100%;
    max-width: 1100px; /* ล็อกความกว้างให้เท่ากับรูปบนๆ พอดีเป๊ะ */
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 20px; /* ใส่ความโค้งมนเผื่อขอบรูปไว้ให้ครับ */
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ ── */
@media (max-width: 992px) {
    .mockups-inner {
        padding: 0 2rem;
    }
}


/* ── SECTION: SERVICES MENU (ปุ่มเมนูกดได้) ── */
.services-menu-section {
    background: #fff;
    padding: 2rem 0 8rem 0;
    display: flex;
    justify-content: center;
}

.services-menu-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    justify-content: center;
}

/* กรอบคลุมรูปภาพ เพื่อใช้อ้างอิงตำแหน่งปุ่มล่องหน */
.services-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 1100px; /* บังคับกว้างเท่ารูปด้านบนเป๊ะๆ */
    display: flex;
    justify-content: center;
}

.services-main-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* ── ตะแกรงปุ่มล่องหน (ปรับตำแหน่งให้ตรงกับรูป) ── */
.invisible-buttons-grid {
    position: absolute;
    /* กะระยะ % ให้กรอบล่องหนมาอยู่ตรงกลางทับปุ่มสีส้มพอดี */
    top: 20%;    
    bottom: 25%; 
    left: 31.5%;   
    right: 33.5%;  
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* แบ่ง 3 คอลัมน์ */
    grid-template-rows: repeat(2, 1fr);    /* แบ่ง 2 แถว */
    gap: 6%; /* ช่องว่างระหว่างปุ่ม */
    z-index: 10;
}

/* ── ตัวปุ่มล่องหนแต่ละอัน ── */
.hidden-btn {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px; /* ทำให้ขอบมนตามปุ่มสีส้ม */
    cursor: pointer;
    transition: background 0.3s ease;
    
    /* 💡 ทริค: ปลดคอมเมนต์บรรทัดสีแดงด้านล่าง เพื่อดูตำแหน่งว่าปุ่มล่องหนทับปุ่มสีส้มพอดีไหม */
    /* background: rgba(255, 0, 0, 0.4); */ 
}




/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .services-menu-inner {
        padding: 0 2rem;
    }
}

/* ── SECTION: ADOPTION (น้องหมารอรับอุปการะ) ── */
.adoption-section {
    background: #fff;
    padding: 6rem 0; /* เว้นระยะห่างบน-ล่าง */
}

.adoption-inner {
    max-width: 1500px; /* ใช้ความกว้าง 1500px ให้เท่ากับส่วนอื่นๆ */
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

/* ── ฝั่งซ้าย (ข้อความ) ── */
.adoption-text {
    flex: 1;
    max-width: 550px;
}

.adoption-brand {
    font-family: 'Kanit', sans-serif;
    font-size: 3rem;
    color: #f5a623; /* สีส้ม */
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.adoption-title {
    font-family: 'Kanit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: #222;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.adoption-desc {
    font-size: 1.25rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 3rem;
}

/* ไอคอนน้องหมา */
.adoption-icon {
    width: 100%;
    max-width: 150px; /* ปรับขนาดไอคอนตรงนี้ได้ครับ */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(245, 166, 35, 0.25); /* ใส่เงาสีส้มเบาๆ ให้ดูป๊อปขึ้นมา */
    transition: transform 0.3s ease;
}

.adoption-mockup:hover {
    transform: translateY(-10px); /* ลูกเล่นขยับขึ้นตอนเอาเมาส์ชี้ */
}

/* ── ฝั่งขวา (รูปโทรศัพท์) ── */
.adoption-mockup {
    flex: 1.2; /* ให้พื้นที่ฝั่งรูปเยอะกว่าฝั่งข้อความนิดนึงจะได้ดูสมดุล */
    display: flex;
    justify-content: flex-end;
}

.adoption-mockup-img {
    width: 100%;
    max-width: 700px; /* ขนาดสูงสุดของรูปโทรศัพท์คู่ */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1)); /* ใส่เงาให้โทรศัพท์ดูมีมิติ */
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ/แท็บเล็ต ── */
@media (max-width: 992px) {
    .adoption-inner {
        flex-direction: column;
        text-align: center;
    }
    .adoption-text {
        max-width: 100%;
    }
    .adoption-icon-wrap {
        display: flex;
        justify-content: center;
    }
    .adoption-mockup {
        justify-content: center;
        margin-top: 3rem;
    }
}


/* ── SECTION: CAT ADOPTION (ส่วนเสริมสำหรับสลับฝั่งน้องแมว) ── */

/* สั่งให้กล่องหลักสลับฝั่ง (จากซ้ายไปขวา ขวาไปซ้าย) */
.cat-adoption .adoption-inner {
    flex-direction: row-reverse; 
}

/* จัดข้อความและไอคอนให้ชิดขวา */
.cat-adoption .adoption-text {
    text-align: right; 
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
}

/* ดันรูปโทรศัพท์ให้ชิดซ้าย */
.cat-adoption .adoption-mockup {
    justify-content: flex-start;
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ/แท็บเล็ต ── */
@media (max-width: 992px) {
    /* ในมือถือให้กลับมาเรียงแถวจากบนลงล่างตามปกติ */
    .cat-adoption .adoption-inner {
        flex-direction: column; 
    }
    /* ให้ข้อความกลับมาอยู่ตรงกลาง */
    .cat-adoption .adoption-text {
        text-align: center;
        align-items: center;
    }
}

/* ── ลดขนาดรูปโทรศัพท์เฉพาะส่วนน้องแมว ── */
.cat-adoption .adoption-mockup-img {
    max-width: 500px; /* ลดจากเดิม 700px เหลือประมาณ 400px (ปรับลด-เพิ่มเลขนี้ได้ตามชอบครับ) */
}

/* ── จัดตำแหน่งให้อยู่ตรงกลางของพื้นที่ฝั่งซ้าย ── */
.cat-adoption .adoption-mockup {
    justify-content: center; /* ดันรูปให้อยู่ตรงกลาง ไม่ชิดขอบซ้ายเกินไป */
}


/* ── เพิ่มระยะห่างด้านบนของหน้าน้องแมว ให้ห่างจากหน้าน้องหมา ── */
.cat-adoption {
    margin-top: 8rem; /* ปรับตัวเลข 8rem ให้มากขึ้นหรือน้อยลงได้ตามต้องการครับ (เช่น 10rem ถ้าอยากให้ห่างมากๆ) */
}


/* ── SECTION: BOARDING (ภาพเต็มฝากเลี้ยง) ── */
.boarding-full-section {
    background: #fff;
    padding: 6rem 0; /* ระยะห่างบน-ล่าง ให้ดูมีพื้นที่หายใจ */
    display: flex;
    justify-content: center;
}

.boarding-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem; /* ระยะห่างซ้ายขวาเผื่อหน้าจอเล็ก */
    display: flex;
    justify-content: center;
}

.boarding-img {
    width: 100%;
    max-width: 1200px; /* ให้กว้างกว่ารูปทั่วไปนิดนึง จะได้ดูเป็น Banner อลังการ */
    height: auto;
    display: block;
    border-radius: 20px; /* ทำให้มุมโค้งมนนิดๆ เข้ากับสไตล์แอป */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* ใส่เงาให้รูปเด้งออกมาจากพื้นหลัง */
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ/แท็บเล็ต ── */
@media (max-width: 992px) {
    .boarding-inner {
        padding: 0 2rem;
    }
}

/* ── SECTION: APP SCREENS GRID (หน้ารวมแอป 8 หน้า) ── */
.screens-grid-section {
    background: #fff;
    padding: 4rem 0 8rem 0; /* ระยะห่างบนล่าง */
}

.screens-grid-inner {
    max-width: 1500px; /* คุมความกว้างให้เท่ากับส่วนอื่นๆ */
    margin: 0 auto;
    padding: 0 4rem;
}

/* จัดเลย์เอาต์แบบ Grid แถวละ 4 รูป */
.screens-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* แบ่งเป็น 4 คอลัมน์เท่าๆ กัน */
    gap: 2.5rem; /* ระยะห่างระหว่างรูป */
    justify-items: center; /* จัดให้รูปอยู่กึ่งกลางของแต่ละช่อง */
}

.screen-img {
    width: 100%;
    max-width: 280px; /* ล็อกขนาดสูงสุดตามที่คุณต้องการ (280px) */
    height: auto;     /* ความสูงจะปรับสัดส่วนอัตโนมัติ (ได้ประมาณ 577px ตามต้นฉบับ) */
    display: block;
    transition: transform 0.3s ease; /* ใส่ลูกเล่นความสมูทตอนเอาเมาส์ชี้ */
}

/* ลูกเล่นเด้งขึ้นนิดหน่อยเวลาเอาเมาส์ไปชี้แต่ละหน้า */
.screen-img:hover {
    transform: translateY(-10px);
}

/* ── RESPONSIVE เผื่อหน้าจอขนาดเล็กลง ── */
@media (max-width: 1200px) {
    /* หน้าจอไอแพดแนวนอน/แล็ปท็อปเล็ก: ปรับเป็นแถวละ 2 รูป */
    .screens-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    /* หน้าจอมือถือ: ปรับเป็นเรียงแถวละ 1 รูป (เลื่อนลงยาวๆ) */
    .screens-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }
    .screens-grid-inner {
        padding: 0 2rem;
    }
}

.boarding-full-section {
    background: #fff;
    padding: 0; /* เอา padding ออก */
    display: flex;
    justify-content: center;
    min-height: 100vh; /* เต็มจอ */
    align-items: center;
}

.boarding-inner {
    max-width: 100%; /* ขยายเต็มความกว้าง */
    width: 100%;
    margin: 0;
    padding: 0; /* เอา padding ออก */
    display: flex;
    justify-content: center;
}

.boarding-img {
    width: 100%;
    max-width: 100%; /* ขยายเต็มจอ */
    height: 100vh; /* สูงเต็มจอ */
    display: block;
    border-radius: 0; /* เอามุมโค้งออก */
    box-shadow: none; /* เอาเงาออก */
    object-fit: cover; /* ให้รูปครอบคลุมพื้นที่ทั้งหมด */
}


/* ── LIGHTBOX ── */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.lightbox-close {
    position: fixed;
    top: 1.5rem;
    right: 2rem;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.2s;
}

.lightbox-close:hover { opacity: 0.7; }

/* ทำให้รูปใน grid คลิกได้ */
.screen-img {
    cursor: pointer;
}


.lightbox-img {
    max-width: 60vw;   /* เพิ่มจาก 90vw */
    max-height: 95vh;  /* เพิ่มจาก 90vh */
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: popIn 0.3s ease;
}

/* ── SECTION: HOSPITAL (ภาพเต็มหน้าจอ ชิดขอบ 100%) ── */
.hospital-full-section {
    width: 100%;
    padding: 2rem 0; /* เว้นระยะบนล่างนิดหน่อย ถ้าไม่อยากเว้นเลยให้เปลี่ยนเป็น 0 */
    display: block;
}

.hospital-inner {
    max-width: 100% !important; /* บังคับปลดล็อกขีดจำกัดความกว้าง */
    width: 100%;
    margin: 0;
    padding: 0 !important; /* บังคับลบขอบขาวซ้าย-ขวาออก */
}

.hospital-img {
    width: 100%;
    max-width: none !important; /* ยกเลิกการล็อกขนาดรูป */
    height: auto;
    display: block;
    border-radius: 0; /* เอาความโค้งมนออกให้ชิดขอบ */
    box-shadow: none; 
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ/แท็บเล็ต ── */
@media (max-width: 992px) {
    .hospital-inner {
        padding: 0 2rem;
    }
}


/* ── SECTION: HOSPITAL (ภาพเต็มหน้าจอ ชิดขอบ 100%) ── */
.rider-full-section {
    width: 100%;
    padding: 2rem 0; /* เว้นระยะบนล่างนิดหน่อย ถ้าไม่อยากเว้นเลยให้เปลี่ยนเป็น 0 */
    display: block;
}

.rider-inner {
    max-width: 100% !important; /* บังคับปลดล็อกขีดจำกัดความกว้าง */
    width: 100%;
    margin: 0;
    padding: 0 !important; /* บังคับลบขอบขาวซ้าย-ขวาออก */
}

.rider-img {
    width: 100%;
    max-width: none !important; /* ยกเลิกการล็อกขนาดรูป */
    height: auto;
    display: block;
    border-radius: 0; /* เอาความโค้งมนออกให้ชิดขอบ */
    box-shadow: none; 
}

/* ── SECTION: moon (ภาพเต็มหน้าจอ ชิดขอบ 100%) ── */
.moon-full-section {
    width: 100%;
    padding: 2rem 0; /* เว้นระยะบนล่างนิดหน่อย ถ้าไม่อยากเว้นเลยให้เปลี่ยนเป็น 0 */
    display: block;
}

.moon-inner {
    max-width: 100% !important; /* บังคับปลดล็อกขีดจำกัดความกว้าง */
    width: 100%;
    margin: 0;
    padding: 0 !important; /* บังคับลบขอบขาวซ้าย-ขวาออก */
}

.moon-img {
    width: 100%;
    max-width: none !important; /* ยกเลิกการล็อกขนาดรูป */
    height: auto;
    display: block;
    border-radius: 0; /* เอาความโค้งมนออกให้ชิดขอบ */
    box-shadow: none; 
}

/* ── SECTION: seemoon (ภาพเต็มหน้าจอ ชิดขอบ 100%) ── */
.seemoon-full-section {
    width: 100%;
    padding: 2rem 0; /* เว้นระยะบนล่างนิดหน่อย ถ้าไม่อยากเว้นเลยให้เปลี่ยนเป็น 0 */
    display: block;
}

.seemoon-inner {
    max-width: 100% !important; /* บังคับปลดล็อกขีดจำกัดความกว้าง */
    width: 100%;
    margin: 0;
    padding: 0 !important; /* บังคับลบขอบขาวซ้าย-ขวาออก */
}

.seemoon-img {
    width: 100%;
    max-width: none !important; /* ยกเลิกการล็อกขนาดรูป */
    height: auto;
    display: block;
    border-radius: 0; /* เอาความโค้งมนออกให้ชิดขอบ */
    box-shadow: none; 
}

/* ── SECTION: สินค้า (ภาพเต็มหน้าจอ ชิดขอบ 100%) ── */
.pd-full-section {
    width: 100%;
    padding: 2rem 0; /* เว้นระยะบนล่างนิดหน่อย ถ้าไม่อยากเว้นเลยให้เปลี่ยนเป็น 0 */
    display: block;
}

.pd-inner {
    max-width: 100% !important; /* บังคับปลดล็อกขีดจำกัดความกว้าง */
    width: 100%;
    margin: 0;
    padding: 0 !important; /* บังคับลบขอบขาวซ้าย-ขวาออก */
}

.pd-img {
    width: 100%;
    max-width: none !important; /* ยกเลิกการล็อกขนาดรูป */
    height: auto;
    display: block;
    border-radius: 0; /* เอาความโค้งมนออกให้ชิดขอบ */
    box-shadow: none; 
}


/* ── ab ── */
.ab-full-section {
    background: #fff;
    padding: 6rem 0; /* ระยะห่างบน-ล่าง */
    display: flex;
    justify-content: center;
}

.ab-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem; /* ระยะห่างซ้ายขวา */
    display: flex;
    justify-content: center;
}

.ab-img {
    width: 100%;
    max-width: 1200px; /* คุมความกว้างให้เท่ากับแบนเนอร์ตัวบน */
    height: auto;
    display: block;
    border-radius: 20px; /* มุมโค้งมนนิดๆ */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* เงาให้ภาพดูมีมิติเด้งออกมา */
}

/* ── RESPONSIVE เผื่อหน้าจอมือถือ/แท็บเล็ต ── */
@media (max-width: 992px) {
    .ab-inner {
        padding: 0 2rem;
    }
}


/* ── FOOTER ── */
.site-footer {
    background-color: #f27100; /* สีส้มตามภาพตัวอย่าง (สามารถปรับโค้ดสี Hex ได้ตามต้องการ) */
    color: #fff;
    padding: 5rem 0; /* ระยะห่างบนล่าง */
    font-family: 'Kanit', sans-serif;
}

.footer-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    align-items: center; /* จัดให้ทุกคอลัมน์อยู่กึ่งกลางแนวตั้ง */
    justify-content: space-between;
}

.footer-col {
    flex: 1; /* ให้กล่องข้อความขยายตัวเท่าๆ กัน */
    padding-right: 2rem;
}

.footer-col h4 {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-col p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
    opacity: 0.95; /* ลดความสว่างของข้อความลงนิดนึงให้ตัวหัวข้อเด่นขึ้น */
}

/* เส้นกั้นสีขาว */
.footer-divider {
    width: 2px;
    height: 80px;
    background-color: #fff;
    margin: 0 3rem;
}

/* ไอคอนโซเชียล */
.footer-social {
    display: flex;
    gap: 2rem;
}

.footer-social a {
    color: #fff;
    font-size: 2rem; /* ขนาดไอคอน */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
    opacity: 0.7; /* เอาเมาส์ชี้แล้วโปร่งแสงนิดนึง */
    transform: translateY(-3px); /* ลูกเล่นขยับขึ้นตอนเอาเมาส์ชี้ */
}

/* ── RESPONSIVE สำหรับหน้าจอเล็ก/มือถือ ── */
@media (max-width: 992px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 2rem;
        gap: 3rem;
    }
    
    .footer-col {
        padding-right: 0;
    }

    /* เปลี่ยนเส้นกั้นจากแนวตั้งเป็นแนวนอนในมือถือ */
    .footer-divider {
        width: 100%;
        height: 2px;
        margin: 0;
    }
    
    .footer-social {
        width: 100%;
        justify-content: center; /* จัดไอคอนให้อยู่ตรงกลางจอในมือถือ */
    }
}

/* ── ab ── */
.h01-full-section {
    background: #fff;
    padding: 6rem 0; /* ระยะห่างบน-ล่าง */
    display: flex;
    justify-content: center;
}

.h01-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem; /* ระยะห่างซ้ายขวา */
    display: flex;
    justify-content: center;
}

.h01-img {
    width: 100%;
    max-width: 1200px; /* คุมความกว้างให้เท่ากับแบนเนอร์ตัวบน */
    height: auto;
    display: block;
    border-radius: 20px; /* มุมโค้งมนนิดๆ */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* เงาให้ภาพดูมีมิติเด้งออกมา */
}

/* ── ab ── */
.h02-full-section {
    background: #fff;
    padding: 6rem 0; /* ระยะห่างบน-ล่าง */
    display: flex;
    justify-content: center;
}

.h02-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem; /* ระยะห่างซ้ายขวา */
    display: flex;
    justify-content: center;
}

.h02-img {
    width: 100%;
    max-width: 1200px; /* คุมความกว้างให้เท่ากับแบนเนอร์ตัวบน */
    height: auto;
    display: block;
    border-radius: 20px; /* มุมโค้งมนนิดๆ */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* เงาให้ภาพดูมีมิติเด้งออกมา */
}

/* ── ab ── */
.h03-full-section {
    background: #fff;
    padding: 6rem 0; /* ระยะห่างบน-ล่าง */
    display: flex;
    justify-content: center;
}

.h03-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem; /* ระยะห่างซ้ายขวา */
    display: flex;
    justify-content: center;
}

.h03-img {
    width: 100%;
    max-width: 1200px; /* คุมความกว้างให้เท่ากับแบนเนอร์ตัวบน */
    height: auto;
    display: block;
    border-radius: 20px; /* มุมโค้งมนนิดๆ */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* เงาให้ภาพดูมีมิติเด้งออกมา */
}

/* ── ab ── */
.h04-full-section {
    background: #fff;
    padding: 6rem 0; /* ระยะห่างบน-ล่าง */
    display: flex;
    justify-content: center;
}

.h04-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem; /* ระยะห่างซ้ายขวา */
    display: flex;
    justify-content: center;
}

.h04-img {
    width: 100%;
    max-width: 1200px; /* คุมความกว้างให้เท่ากับแบนเนอร์ตัวบน */
    height: auto;
    display: block;
    border-radius: 20px; /* มุมโค้งมนนิดๆ */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* เงาให้ภาพดูมีมิติเด้งออกมา */
}





.hero-text {
    color: #ffffff; /* สีตัวอักษรขาวทั้งก้อน */
}

.hero-title {
    font-size: 3rem; /* ปรับขนาดตามความเหมาะสม */
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-desc {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* ปรับแต่งปุ่มสีเหลือง/ส้ม */
.btn-see-station {
    display: inline-block;
    background-color: #f0a500; /* สีส้มตามภาพ */
    color: #ffffff;
    padding: 12px 40px;
    border-radius: 50px; /* ขอบมน */
    text-decoration: none;
    font-weight: bold;
    text-transform: lowercase; /* ตัวพิมพ์เล็กตามภาพ */
    transition: 0.3s;
}

.btn-see-station:hover {
    background-color: #d49100;
    transform: translateY(-2px);
}


/* ปรับขนาดภาษาอังกฤษให้ใหญ่สะใจ */
.highlight-title {
    font-size: 4rem;      /* ปรับตัวเลขนี้ให้ใหญ่ขึ้นได้ตามต้องการ */
    font-weight: 800;    /* เพิ่มความหนาเป็นพิเศษ */
    line-height: 1.1;    /* ปรับระยะห่างบรรทัดให้ชิดกันเพื่อให้ดูโมเดิร์น */
    margin-bottom: 25px;
    text-transform: none; /* คงความเป็นตัวพิมพ์ใหญ่-เล็กตามต้นฉบับ */
    color: #ffffff;
}

/* ส่วนของภาษาไทยให้ดูเล็กลงและสะอาดตา */
.hero-desc {
    font-size: 1.4rem;
    font-weight: normal;
    opacity: 0.9;
    color: #ffffff;
}


/* ── ab ── */
.h05-full-section {
    background: #fff;
    padding: 6rem 0; /* ระยะห่างบน-ล่าง */
    display: flex;
    justify-content: center;
}

.h05-inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem; /* ระยะห่างซ้ายขวา */
    display: flex;
    justify-content: center;
}

.h05-img {
    width: 100%;
    max-width: 1200px; /* คุมความกว้างให้เท่ากับแบนเนอร์ตัวบน */
    height: auto;
    display: block;
    border-radius: 20px; /* มุมโค้งมนนิดๆ */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* เงาให้ภาพดูมีมิติเด้งออกมา */
}



/* =========================================
   INSIGHT SECTION (แบบรูปเดียวมุมขวาล่าง)
   ========================================= */
.insight-section {
    position: relative;
    width: 100%;
    min-height: 600px;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.insight-inner {
    width: 100%;
    max-width: 1200px; /* ความกว้างจำกัดให้อยู่ตรงกลางจอพอดี */
    position: relative;
    height: 600px;
}

/* โลโก้ซ้ายบน */
.insight-logo {
    position: absolute;
    top: 30px;
    left: 20px;
}

.insight-logo img {
    width: 120px; /* ปรับขนาดโลโก้ตามต้องการ */
    height: auto;
}

/* ข้อความตรงกลาง */
.insight-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    z-index: 10;
}

.insight-title {
    font-size: 5rem;
    font-weight: 700;
    color: #f7941d; /* สีส้ม */
    margin-bottom: 15px;
}

.insight-desc {
    font-size: 1.2rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.8;
}

/* =========================================
   สไตล์สำหรับรูปตกแต่งมุมขวาล่าง (รูปเดียว)
   ========================================= */
.corner-decoration-single {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5;
    /* สามารถปรับความกว้างของรูปกราฟิกตรงนี้ได้ */
    max-width: 350px; 
}

.corner-decoration-single img {
    width: 100%;
    height: auto;
    display: block; /* เอาช่องว่างใต้รูปออก */
}

/* =========================================
   RESPONSIVE สำหรับมือถือ
   ========================================= */
@media (max-width: 768px) {
    .insight-inner { height: auto; min-height: 500px; padding: 100px 0; }
    .insight-title { font-size: 3.5rem; }
    .insight-desc { font-size: 1rem; }
    
    /* ปรับขนาดรูปลงเมื่ออยู่ในจอมือถือ */
    .corner-decoration-single { 
        max-width: 200px; 
    }
}

.hero-subtitle {
    font-size: 2.2rem;   /* ปรับขนาดตัวอักษรตรงนี้ให้พอดีกับหน้าเว็บของคุณ */
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 15px; /* ระยะห่างระหว่างหัวข้อกับรายละเอียด */
}

/* หาก hero-title เดิมมี margin-bottom เยอะไป อาจจะต้องปรับลดลงเพื่อให้ชิดกันเหมือนในรูป */
.hero-title {
    margin-bottom: 10px; 
}



/* =========================================
   PET CARDS SECTION (ขนาด 609 x 273)
   ========================================= */
.pet-cards-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* สีพื้นหลังอ่อนๆ ให้การ์ดสีขาวดูเด่นขึ้น */
}

/* สร้าง Grid 2 คอลัมน์ */
.pet-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px; /* ระยะห่างระหว่างการ์ด */
    max-width: 1280px; /* จำกัดความกว้างสูงสุดให้อยู่ตรงกลาง */
    margin: 0 auto;
}

/* ตัวการ์ด (อ้างอิงขนาด 609x273) */
.pet-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); /* เงาฟุ้งๆ นุ่มๆ แบบในภาพ */
    max-width: 609px;
    height: 273px;
    padding: 20px; /* ระยะห่างจากขอบการ์ดถึงรูป */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pet-card:hover {
    transform: translateY(-5px); /* เอฟเฟกต์ยกตัวตอนเมาส์ชี้ */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* กรอบรูปภาพ */
.pet-img-wrap {
    flex: 0 0 50%; /* ให้รูปภาพกินพื้นที่ 50% ของการ์ด */
    height: 100%;
    border-radius: 16px;
    overflow: hidden; /* ตัดขอบรูปให้มนตามกรอบ */
}

.pet-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ทำให้รูปเต็มกรอบพอดี ไม่เบี้ยว */
    display: block;
}

/* ส่วนข้อความ */
.pet-info {
    flex: 1;
    padding-left: 35px; /* ระยะห่างจากรูปถึงข้อความ */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pet-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 20px; /* ห่างจากบรรทัดล่างนิดนึงตามภาพ */
}

.pet-info p {
    font-size: 1.1rem;
    color: #7a7a7a; /* สีเทาอ่อน */
    margin: 8px 0;
    font-weight: 400;
}

/* =========================================
   RESPONSIVE (สำหรับมือถือและแท็บเล็ต)
   ========================================= */
@media (max-width: 1024px) {
    /* หน้าจอเล็กกว่า 1024px ให้แสดงเหลือ 1 คอลัมน์ (บน-ล่าง) */
    .pet-grid {
        grid-template-columns: 1fr;
        max-width: 609px;
    }
}

@media (max-width: 600px) {
    /* สำหรับมือถือจอเล็ก ปรับให้รูปกับข้อความเรียงบนล่าง */
    .pet-card {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
    
    .pet-img-wrap {
        width: 100%;
        height: 200px; /* กำหนดความสูงรูปบนมือถือ */
    }

    .pet-info {
        padding-left: 0;
        padding-top: 20px;
        text-align: center; /* จัดข้อความให้อยู่ตรงกลางบนมือถือ */
    }
}