/* ==========================================================================
   Expatique Master Global Stylesheet (global.css)
   Theme: Executive Navy Blue & Warm Caramel Gold
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   1. Root Variables & Design Tokens (อัปเดตตลับสีใหม่: Executive Navy Blue)
   ========================================================================== */
:root {
    --bg-header-navy: #0A121E;
    /* 🔥 สีน้ำเงินกรมท่าเข้มมาก สำหรับ Header และ Footer */
    --primary-color: #0B1320;
    /* 🔥 สีน้ำเงินกรมท่าเกือบดำ สำหรับหัวข้อหลัก (H1, H2, H3) ดูนุ่มกว่าสีดำสนิท */
    --primary-blue: #0B1320;

    --accent-gold: #C49765;
    /* 🔥 สีทองคาราเมลอบอุ่น (Caramel Gold) สำหรับปุ่ม Active Tab และปุ่ม Consultation */
    --accent-gold-hover: #B38654;
    /* สีทองตอนเอาเมาส์ไปชี้ */
    --accent-gold-light: #F8F5F0;
    /* สีครีมอ่อนสำหรับพื้นหลัง Hover เมนูย่อย */

    --text-dark: #2A323D;
    /* สีเทาอมน้ำเงินเข้ม สำหรับข้อความทั่วไป */
    --text-muted: #5A6472;
    /* สีเทาสำหรับข้อความอธิบายรอง */
    --text-light: #FFFFFF;

    --bg-white: #FFFFFF;
    --bg-light-grey: #F6F8FA;
    /* 🔥 ปรับพื้นหลังสลับข้อความให้เป็น สีเทาอมฟ้าบางๆ ให้เข้ากับธีม Navy */

    --border-color: rgba(11, 19, 32, 0.08);
    --font-main: 'Inter', sans-serif;
    --transition-speed: 0.3s;
}

/* 2. Global Resets & Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    background-color: var(--bg-white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--primary-color);
    /* หัวข้อจะเป็นสีน้ำเงินกรมท่าเข้มสุดคลาสสิก */
    margin-bottom: 15px;
    line-height: 1.3;
}

p {
    font-family: var(--font-main);
    font-weight: 400;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-speed) ease;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   3. Global Buttons UI (ปุ่มทรงแคปซูล สีทองคาราเมล ตัดกับธีม Navy)
   ========================================================================== */
.btn,
.mega-btn,
.btn-dark,
.schedule-btn,
[class*="btn-primary"] {
    display: inline-block;
    padding: 12px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px !important;
    background-color: var(--accent-gold) !important;
    /* 🔥 สีทองคาราเมลตามรูปตัวอย่าง */
    color: #FFFFFF !important;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--accent-gold) !important;
    line-height: normal;
    white-space: nowrap;
    min-width: auto;
    box-shadow: 0 4px 15px rgba(196, 151, 101, 0.25);
}

.btn:hover,
.mega-btn:hover,
.btn-dark:hover,
.schedule-btn:hover,
[class*="btn-primary"]:hover {
    background-color: var(--accent-gold-hover) !important;
    color: #FFFFFF !important;
    border-color: var(--accent-gold-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(196, 151, 101, 0.38);
}

/* ปุ่มแบบ Outline */
.btn-outline {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    box-shadow: none;
}

.btn-outline:hover {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 20px rgba(11, 19, 32, 0.2);
}

/* ==========================================================================
   4. Global Fixed Header (ธีม Executive Navy Blue & Caramel Pill Tab)
   ========================================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;

    /* 🔥 เปลี่ยนพื้นหลังเป็น "สีน้ำเงินกรมท่าเข้ม" โปร่งแสงหรูหรา */
    background-color: rgba(10, 18, 30, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* เส้นคั่นบางๆ ให้ดูมีมิติ */

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3% !important;
    z-index: 9999;
    transition: all 0.3s ease;
}

/* 🔥 ปรับสีชื่อบริษัท "EXPATIQUE" ให้เป็นสีขาว เพื่อให้อ่านชัดเจนบนพื้น Navy Blue */
.navbar-brand-name {
    color: #FFFFFF !important;
}

nav {
    margin-left: auto !important;
}

nav ul {
    display: flex;
    justify-content: flex-end;
    gap: 2px !important;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* ดีไซน์ปุ่ม Navigator บนพื้นหลัง Navy Blue */
nav ul li a.nav-item {
    font-size: 0.82rem !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #D1D7E0 !important;
    /* 🔥 ตัวอักษรสีเทาอมฟ้าสว่าง อ่านง่ายและสบายตามากบนพื้น Navy */
    padding: 6px 11px !important;
    border-radius: 999px;
    position: relative;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: transparent;
    white-space: nowrap !important;
    display: inline-block;
    line-height: 1.2;
}

nav ul li a.nav-item::after {
    display: none !important;
}

/* 1. ตอนเอาเมาส์ชี้ (Hover) -> พื้นหลังใสอมทองเบาๆ ตัวอักษรเปลี่ยนเป็นสีทอง */
nav ul li a.nav-item:hover {
    background-color: rgba(196, 151, 101, 0.15);
    color: var(--accent-gold) !important;
    transform: translateY(-2px);
}

/* 2. 🔥 หน้าปัจจุบัน (Active Tab) -> กลายเป็น "Pill สีทองคาราเมลทึบ" ตามรูปเป๊ะ! */
nav ul li a.nav-item.active {
    background-color: var(--accent-gold) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(196, 151, 101, 0.4);
}

/* ==========================================================================
   ⚠️ สำหรับมือถือ: เปลี่ยนสีขีด 3 ขีด (Hamburger) ให้เป็นสีขาวบนพื้น Navy Blue
   ========================================================================== */
@media (max-width: 1024px) {
    .hamburger span {
        background: #FFFFFF !important;
    }
}

/* ==========================================================================
   5. Universal Mega Menu System (อัปเดตระบบล็อกขนาดกล่องและซิงค์คลาสสลับสี)
   ========================================================================== */
nav ul li.mega-dropdown {
    position: static;
}

.mega-menu {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(15px);

    /* ล็อกขนาดเท่ากันเป๊ะทุกหมวดหมู่ */
    width: 1150px;
    height: 525px;

    background-color: var(--bg-white);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2000;
    overflow: hidden;
    border: 1px solid var(--border-color);
    text-align: left;
    pointer-events: none;
}

nav ul li.mega-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.mega-menu-left {
    width: 32%;
    height: 100%;
    background-color: #FDFDFD;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
}

.mega-menu-link {
    padding: 14px 25px;
    border-bottom: 1px solid #F5F5F5;
    border-left: 4px solid transparent;
    display: block;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ซิงค์ชื่อคลาส .active-hover ให้ตรงกับระบบ JS */
.mega-menu-link:hover,
.mega-menu-link.active-hover {
    background-color: var(--accent-gold-light);
    border-left-color: var(--accent-gold);
    padding-left: 32px;
}

.mega-menu-link h4 {
    color: var(--accent-gold);
    font-size: 0.95rem;
    margin-bottom: 4px;
    font-weight: 700;
    transition: color 0.25s ease;
}

.mega-menu-link:hover h4,
.mega-menu-link.active-hover h4 {
    color: var(--primary-color);
}

.mega-menu-link p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.mega-menu-right {
    width: 68%;
    height: 100%;
    display: flex;
    background-color: var(--bg-white);
}

.mega-content {
    flex: 1;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mega-image-container {
    width: 380px;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.mega-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: object-position 0.3s ease;
}

.mega-bullet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.mega-bullet-item {
    font-size: 0.9rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.mega-bullet-item::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--accent-gold);
    border-radius: 50%;
}

.mega-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.mega-title {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.mega-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.mega-actions {
    display: flex;
    gap: 15px;
}

/* ==========================================================================
   6. Footer Layout & Style (Theme: Executive Navy Blue - สีเดียวกับ Navigator)
   ========================================================================== */
.main-footer {
    /* 🔥 เปลี่ยนเป็นสี var(--bg-header-navy) หรือ #0A121E โทนเดียวกับ Navigator ด้านบนเป๊ะ! */
    background-color: var(--bg-header-navy, #0A121E) !important;
    color: #FFFFFF !important;
    padding: 80px 10% 40px !important;
    width: 100% !important;
    border-top: 1px solid rgba(196, 151, 101, 0.25) !important;
    /* เส้นคั่นบนสีทองคาราเมลบางๆ */
    position: relative;
    z-index: 10;
}

/* กล่องคุมการจัดเรียงคอลัมน์ใน Footer */
.footer-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    text-align: left !important;
    gap: 50px !important;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1 !important;
    min-width: 200px;
    text-align: left !important;
}

/* 1. โลโก้ใน Footer */
.footer-col img {
    height: 45px !important;
    margin-bottom: 20px !important;
    transition: transform 0.3s ease;
}

.footer-col img:hover {
    transform: scale(1.05);
}

/* 2. หัวข้อในแต่ละคอลัมน์ (H4) -> สีทอง Caramel Gold */
.footer-col h4 {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: var(--accent-gold, #C49765) !important;
    margin-bottom: 22px !important;
    text-transform: uppercase !important;
    opacity: 0.95;
}

/* 3. รายละเอียดและลิงก์ต่างๆ -> สีเทาอมฟ้าสว่าง อ่านง่ายบนพื้น Navy */
.footer-col p,
.footer-col ul li a {
    color: #D1D7E0 !important;
    font-size: 0.92rem !important;
    line-height: 1.8 !important;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.footer-col ul li {
    margin-bottom: 10px !important;
}

/* เอาเมาส์ชี้ลิงก์ใน Footer แล้วเปลี่ยนเป็นสีทอง + สไลด์ขวาเบาๆ */
.footer-col ul li a:hover {
    color: var(--accent-gold, #C49765) !important;
    transform: translateX(6px);
}

/* 4. แถบลิขสิทธิ์ด้านล่างสุด */
.footer-bottom {
    text-align: center;
    margin-top: 60px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    color: #8A95A5;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   🔥 FOOTER MOBILE RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .main-footer {
        padding: 60px 0 30px 0 !important;
    }

    .footer-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 35px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-col {
        width: 100% !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 25px;
    }

    .footer-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .footer-col img {
        margin: 0 0 15px 0 !important;
    }

    .footer-bottom {
        margin-top: 40px;
        padding-left: 24px;
        padding-right: 24px;
        text-align: center;
    }
}

/* ==========================================================================
   🔥 FOOTER MOBILE RESPONSIVE (ฉบับ WOXA Style: ชิดซ้ายเป็นระเบียบ เรียบหรู)
   ========================================================================== */
@media (max-width: 768px) {
    .main-footer {
        padding: 60px 0 30px 0 !important;
        background-color: var(--bg-header-navy, #0A121E) !important;
    }

    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* 🔥 หัวใจสำคัญ: บังคับทุกคอลัมน์ชิดซ้ายตามแบบ WOXA */
        justify-content: flex-start !important;
        gap: 35px !important;
        /* ระยะห่างระหว่างหมวดหมู่กำลังดี ไม่ห่างเกินไป */
        padding-left: 24px !important;
        /* เว้น Safe Padding 24px ให้ตรงกับเนื้อหาส่วนอื่น */
        padding-right: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-col {
        width: 100% !important;
        text-align: left !important;
        /* 🔥 ข้อความทุกหมวดหมู่จัดชิดซ้ายทั้งหมด */
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        /* เส้นคั่นบางๆ ระหว่างหมวด */
        padding-bottom: 28px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* จัดอิลิเมนต์ภายในกล่องให้ชิดซ้าย */
    }

    .footer-col:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* 🔥 แก้ไขโลโก้: จัดชิดซ้ายบนสุด ขนาดเด่นชัด พร้อมเว้นระยะด้านล่างสวยงาม */
    .footer-col img {
        display: block !important;
        margin: 0 0 18px 0 !important;
        /* ชิดซ้าย เว้นระยะล่าง 18px ไม่ลอยสะเปะสะปะ */
        height: 48px !important;
        /* ขนาดพอดีตา ไม่เล็กจิ๋วหรือใหญ่ล้น */
        width: auto !important;
    }

    /* จัดระเบียบหัวข้อ COMPANY, CONTACT ให้ชิดซ้าย ตัวอักษรสีทอง Caramel Gold */
    .footer-col h4 {
        text-align: left !important;
        margin-bottom: 16px !important;
        color: var(--accent-gold, #C49765) !important;
        font-size: 0.85rem !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        width: 100% !important;
    }

    /* จัดข้อความอธิบายบริษัท และลิงก์เมนูต่างๆ ให้ชิดซ้าย อ่านง่ายสบายตา */
    .footer-col p,
    .footer-col ul,
    .footer-col ul li,
    .footer-col ul li a {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        color: #D1D7E0 !important;
        /* สีเทาอมฟ้าสว่าง อ่านชัดบนพื้น Navy */
        line-height: 1.7 !important;
    }

    .footer-col ul li {
        margin-bottom: 12px !important;
        /* ช่องไฟระหว่างเมนู (เช่น Who We Are กับ Legal) */
    }

    /* แถบลิขสิทธิ์ด้านล่างสุด จัดชิดซ้ายให้คุมโทนเดียวกับเนื้อหาด้านบน */
    .footer-bottom {
        margin-top: 40px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        text-align: left !important;
        /* จัดชิดซ้ายตามสไตล์โมเดิร์น */
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-top: 25px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   7. Cursor Spotlight Effect
   ========================================================================== */
.cursor-follower {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(181, 133, 41, 0.1) 0%, rgba(181, 133, 41, 0) 60%) !important;
    /* เปลี่ยนเงาเมาส์เป็นสีทอง */
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
}

body:hover .cursor-follower {
    opacity: 1 !important;
}

/* ==========================================================================
   8. Global Responsive (Mobile Menu UX Improvement)
   ========================================================================== */
@media (max-width: 1024px) {
    .hamburger {
        display: block !important;
        cursor: pointer;
        padding: 10px;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        background: #000;
        margin: 5px 0;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 10px 20px 30px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        height: calc(100vh - 80px);
        /* ให้เมนูยาวเต็มจอ เลื่อนดูได้ */
        overflow-y: auto;
    }

    .nav-menu.is-active {
        display: block;
    }

    /* 1. ปรับให้รายการเมนูกว้างเต็มพื้นที่เพื่อกดง่าย */
    .nav-menu ul {
        flex-direction: column;
        align-items: stretch !important;
        /* ขยายความกว้างเต็มจอ 100% */
        gap: 0 !important;
        /* เอา gap ออก แล้วใช้ Padding แทน */
    }

    .nav-menu ul li {
        width: 100%;
        border-bottom: 1px solid #F0F0F0;
        /* ใส่เส้นคั่นให้กดง่ายและเป็นระเบียบ */
    }

    /* 2. ขยายพื้นที่กด (Touch Target) ให้ปุ่มเมนูหลัก */
    nav ul li a.nav-item {
        display: flex;
        justify-content: space-between;
        /* ดันลูกศร (ถ้ามี) ไปชิดขวา */
        align-items: center;
        width: 100%;
        padding: 20px 10px !important;
        /* [สำคัญมาก] เพิ่มพื้นที่แนวตั้งให้อ้วนขึ้น นิ้วโป้งกดง่าย */
        font-size: 1.1rem;
        color: var(--text-dark);
    }

    nav ul li a.nav-item:hover,
    nav ul li a.nav-item.active {
        background-color: var(--bg-light-grey);
        /* กดแล้วมีไฮไลท์สีเทาอ่อน */
        border-radius: 8px;
    }

    nav ul li a.nav-item::after {
        display: none;
        /* ซ่อนขีดเส้นใต้ตอน Hover ในมือถือ เพราะมันเกะกะ */
    }

    /* 3. ปรับพื้นที่กดของเมนูย่อย (Dropdown) */
    /* 3. ปรับพื้นที่กดของเมนูย่อย (Dropdown) */
    .mega-menu {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        /* กันเหนียว ไม่ให้มีค่าความสูงขั้นต่ำหลงเหลือ */
        border: none !important;
        box-shadow: none !important;
        background: #FAFAFA !important;
        display: none;
        padding: 5px 0 15px 0 !important;
    }

    .mega-menu.is-active-mobile {
        display: block !important;
    }

    .mega-menu-left {
        width: 100% !important;
        height: auto !important;
        /* 🔥 สำคัญมาก: ปลดล็อกความสูงกล่องลูก ให้หดพอดีเนื้อหา! */
        background: transparent !important;
        border: none !important;
    }

    .mega-menu-right {
        display: none !important;
    }

    .mega-menu-link {
        padding: 15px 30px;
        border-bottom: 1px solid #F5F5F5;
        border-left: 4px solid transparent;
    }

    .mega-menu-link h4 {
        font-size: 1rem;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    header {
        padding: 0 5%;
    }

    .footer-container {
        flex-direction: column !important;
        text-align: center !important;
    }

    .footer-col {
        text-align: center !important;
    }

    .footer-col img {
        margin: 0 auto 15px auto;
    }
}

/* ==========================================================================
   🔥 MASTER MOBILE RESPONSIVE RULES (ฉบับยุบรวม Clean Code ไม่ซ้ำซ้อน)
   * ธีม: WOXA Full-Bleed Background + Left-Aligned Text (24px Padding) + Centered Buttons
   ========================================================================== */

/* 1. ระบบแถบเมนู Tab แนวนอน เลื่อนปัดด้วยนิ้วได้ (Swipeable Tabs) */
@media (max-width: 768px) {

    .tab-menu,
    [id^="tab-menu"],
    .health-tab-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding-bottom: 12px;
        margin-bottom: 25px;
        border-bottom: 1px solid var(--border-color);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tab-menu::-webkit-scrollbar,
    [id^="tab-menu"]::-webkit-scrollbar {
        display: none;
    }

    .tab-menu button,
    .tab-menu a,
    [id^="tab-menu"]>*,
    .health-tab-menu>* {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 0.95rem;
        border-radius: 999px;
    }
}

/* 2. ระบบพื้นหลังเต็มจอ 100% + ระยะเว้นข้อความปลอดภัย 24px + จัดชิดซ้าย */
@media (max-width: 768px) {

    /* 🔥 สั่งให้พื้นหลัง Section ทุกอัน "ยืดสุดขอบจอ 100%" (ไม่มี Padding ขอบขาวขวางกั้น) */
    main,
    section,
    .hero-wix,
    .hero-with-bg,
    .split-content-section,
    .detailed-services-section,
    .services-overview,
    .tabs-section,
    [class*="-section"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 🔥 ครอบ Padding (24px) ให้เฉพาะ "กล่องข้อความและเนื้อหาด้านใน" ไม่ให้ชิดขอบจอ */
    .woxa-container,
    .hero-wix-left,
    .hero-wix-right,
    .split-text-side,
    .split-image-side,
    .cta-banner,
    .section-header,
    .services-grid,
    .detailed-services-grid,
    .boi-stepper-list,
    .timeline-container,
    .tab-menu,
    .sub-tab-menu {
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* การ์ดที่อยู่ข้างใน Grid ไม่ต้องเว้นขอบซ้ำซ้อน แต่ให้เว้นข้างในตัวมันเองแทน */
    .service-card,
    .detail-card,
    .boi-icon-card,
    .timeline-item {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 🔥 บังคับให้หัวข้อและข้อความ (Text) จัดชิดซ้ายอ่านง่ายตามแนวสายตา */
    .hero-wix-left h1,
    .hero-wix-left p,
    .hero-with-bg h1,
    .hero-with-bg p,
    .split-text-side h3,
    .split-text-side p,
    .cta-banner h3,
    .cta-banner p,
    [class*="hero-"] h1,
    [class*="hero-"] p {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* ปรับขนาดหัวข้อในมือถือให้ใหญ่ คมชัด เต็มตา */
    .hero-wix h1,
    .hero-with-bg h1 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }

    .hero-wix p,
    .hero-with-bg p {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
    }
}

/* 3. ระบบบังคับเฉพาะ "ปุ่ม CTA" ให้อยู่ตรงกลางหน้าจอมือถือ */
@media (max-width: 768px) {

    /* 🔥 บังคับเฉพาะปุ่ม ให้ดีดตัวเองไปตั้งอยู่ตรงกลางหน้าจออย่างสมดุล */
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-outline-blue,
    .btn-dark,
    .schedule-btn,
    .mega-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;

        /* ดันซ้าย-ขวาอัตโนมัติ เพื่อดึงเฉพาะปุ่มมาอยู่ตรงกลางโดยไม่ดึงตัวหนังสือตามมา! */
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;

        text-align: center !important;
        width: fit-content !important;
        min-width: 220px !important;
        /* ขยายปุ่มให้นิ้วโป้งกดโดนง่าย */
        max-width: 90% !important;
    }

    /* กล่องครอบกลุ่มปุ่ม ให้จัดเรียงซ้อนกันตรงกลาง */
    .button-group,
    .cta-banner-actions,
    .hero-wix-left>div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   🔥 MASTER MOBILE UI/UX FIX: ควบคุม "ทุกส่วนของเว็บไซต์" ให้สวยเป๊ะเป็นระบบเดียว
   * 1. พื้นหลัง Section ยืดสุดขอบจอ 100% (Full-Bleed)
   * 2. ข้อความทุกส่วนมี Safe Padding 24px และจัดชิดซ้ายอ่านง่าย
   * 3. ปลดล็อกความสูงทุกกล่อง (height: auto) ห้ามยืดห่างกันเอง + ใช้ gap จัดช่องไฟ
   * 4. ปุ่ม CTA ทุกชนิดอยู่ตรงกลางจออย่างสมดุล
   ========================================================================== */
@media (max-width: 768px) {

    /* ==========================================================================
       PART 1: ระบบพื้นหลังเต็มจอ 100% + ปลดล็อกความสูงทุก Section
       ========================================================================== */
    main,
    section,
    .hero-wix,
    .hero-with-bg,
    .split-content-section,
    .detailed-services-section,
    .services-overview,
    .tabs-section,
    .cta-banner,
    [class*="-section"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        /* 🔥 ยกเลิกความสูงขั้นต่ำทุกส่วน ไม่ให้กล่องยืดเทอะทะ */
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* จัดระยะเว้นบน-ล่างของ Section ทั่วไป (ที่ไม่ใช่ Hero) ให้มีพื้นที่หายใจกำลังดี */
    section:not(.hero-wix):not(.hero-with-bg),
    .split-content-section,
    .detailed-services-section,
    .services-overview,
    .tabs-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* ==========================================================================
       PART 2: ระบบ Safe Padding (24px) สำหรับข้อความและเนื้อหา "ทุกส่วน"
       ========================================================================== */
    .woxa-container,
    .hero-wix-left,
    .hero-wix-right,
    .split-text-side,
    .split-image-side,
    .cta-banner,
    .section-header,
    .services-grid,
    .detailed-services-grid,
    .boi-stepper-list,
    .timeline-container,
    .tab-menu,
    .sub-tab-menu {
        padding-left: 24px !important;
        /* 🔥 เว้นระยะซ้าย 24px ให้ข้อความทุกส่วนอ่านสบายตา */
        padding-right: 24px !important;
        /* 🔥 เว้นระยะขวา 24px */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* การ์ดที่อยู่ข้างใน Grid ให้เว้นระยะข้างในตัวมันเอง ไม่ให้ซ้อนทับ */
    .service-card,
    .detail-card,
    .boi-icon-card,
    .timeline-item,
    .boi-stepper-bar {
        padding: 24px 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================================
       PART 3: 🔥 ปลดล็อกความสูงกล่องเนื้อหา "ทุกชนิด" ไม่ให้ยืดห่าง + ใช้ Gap จัดช่องไฟ
       ========================================================================== */
    .hero-wix-left,
    .hero-with-bg>.woxa-container,
    .hero-with-bg>div,
    .split-text-side,
    .cta-banner,
    .cta-banner-text,
    .section-header,
    .service-card,
    .detail-card,
    .boi-icon-card,
    .timeline-item {
        min-height: auto !important;
        /* 🔥 ห้ามยืดความสูงเด็ดขาด ปล่อยตามเนื้อหาจริง */
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        /* 🔥 สั่งเรียงชิดบนเสมอ ไม่ให้โดนถีบแยกบน-ล่าง */
        gap: 12px !important;
        /* 🔥 ช่องไฟระหว่างหัวข้อ-ข้อความพอดีสวยงามทั้งเว็บ (12-14px) */
    }

    /* ล้างค่า Margin เก่าที่เคยดันกันเองทิ้ง ให้ทุกอย่างพึ่งพาระบบ Gap ด้านบน */
    .hero-wix-left h1,
    .hero-wix-left p,
    .hero-wix-left span,
    .hero-with-bg h1,
    .hero-with-bg p,
    .hero-with-bg span,
    .split-text-side h2,
    .split-text-side h3,
    .split-text-side p,
    .cta-banner h2,
    .cta-banner h3,
    .cta-banner p,
    .section-header h2,
    .section-header p,
    .service-card h3,
    .service-card p,
    .detail-card h3,
    .detail-card p,
    .timeline-item h4,
    .timeline-item p {
        margin: 0 !important;
        text-align: left !important;
        /* จัดข้อความชิดซ้ายทั้งหมดเพื่อการอ่านที่ดีที่สุด */
        width: 100% !important;
    }

    /* ปรับขนาดฟอนต์หัวข้อของ Section ต่างๆ ให้พอดีจอมือถือ ไม่ใหญ่ล้นจอ */
    .section-header h2,
    .split-text-side h2,
    .cta-banner h3 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        color: var(--primary-color) !important;
    }

    /* ==========================================================================
       PART 4: HERO SECTION (เว้นบน 100px พ้น Navigator พอดีเป๊ะ)
       ========================================================================== */
    .hero-wix,
    .hero-with-bg {
        padding-top: 100px !important;
        /* ดันลงมาพ้น Header 80px + พื้นที่หายใจ 20px */
        padding-bottom: 40px !important;
        background-position: center bottom !important;
        /* ดึงวิวตึกมาไว้ด้านล่าง */
    }

    .hero-wix h1,
    .hero-with-bg h1 {
        font-size: 2.3rem !important;
        line-height: 1.25 !important;
    }

    .hero-wix {
        background-image: linear-gradient(180deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0.95) 70%,
                rgba(255, 255, 255, 0.25) 100%), url('../picture/Town.png') !important;
        background-size: cover !important;
    }

    /* ==========================================================================
       PART 5: 🔥 บังคับเฉพาะ "ปุ่ม CTA ทุกปุ่มทั้งเว็บไซต์" ให้อยู่ตรงกลางจอ
       ========================================================================== */
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-outline-blue,
    .btn-dark,
    .schedule-btn,
    .mega-btn,
    .card-link,
    [class*="btn-"],
    [class*="-btn"] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;

        /* 🔥 ดันซ้าย-ขวาอัตโนมัติ เพื่อดึงเฉพาะปุ่มมาอยู่ตรงกลางโดยไม่ดึงตัวหนังสือตามมา! */
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;

        text-align: center !important;
        width: fit-content !important;
        min-width: 220px !important;
        /* ขยายปุ่มให้นิ้วโป้งกดโดนง่าย */
        max-width: 90% !important;
    }

    /* กล่องครอบกลุ่มปุ่ม ให้จัดเรียงซ้อนกันตรงกลาง */
    .button-group,
    .cta-banner-actions,
    .hero-wix-left>div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 15px !important;
        gap: 12px !important;
    }
}