/* style.css (ฉบับแก้ไข V24 - Adjust Hero Height & Box) */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=Prompt:wght@300;400;500;600&display=swap');

/* Basic Reset & Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Font & Base Styles */
body {
    font-family: 'Kanit', sans-serif; 
    line-height: 1.6;
    color: var(--color-text);
    background-color: #f8f9fa; 
}

/* === BRAND BOOK UPDATE START === */
:root {
    --color-primary: #007CEC;  
    --color-accent: #FF6000;   
    --color-text: #333;
    --color-dark: #001159;     
    --color-light-gray: #e9ecef;
    --font-heading: 'Kanit', sans-serif;
    --font-body: 'Prompt', sans-serif; 
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px; 
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 5rem; 
}
/* === BRAND BOOK UPDATE END === */


/* Global Link Styles */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}
a:hover {
    color: var(--color-accent);
    transform: translateY(-1px);
}

/* Buttons */
.button-primary, .cta-main {
    display: inline-block;
    background-color: var(--color-accent);
    color: white;
    padding: 0.8rem 1.8rem;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: none;
    cursor: pointer;
}
.button-primary:hover, .cta-main:hover {
    background-color: #e05600; 
    transform: translateY(-2px);
}

.button-secondary, .cta-secondary {
    display: inline-block;
    background-color: transparent;
    color: var(--color-primary);
    padding: 0.8rem 1.8rem;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--color-primary);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}
.button-secondary:hover, .cta-secondary:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* (FIX) <main> คือตัวจำกัดความกว้าง */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-sm);
    position: relative;
    z-index: 5;
}

section {
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: center;
}

/* ============================================= */
/* (REPLACE V2) Header & Navigation Styles      */
/* ============================================= */
header {
    background-color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    z-index: 100;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo a {
    display: block; 
    line-height: 1; 
}
.logo-img {
    height: 45px; /* ปรับขนาดให้พอดี */
    width: auto;
    display: block; 
}

/* Wrapper สำหรับเมนู (Desktop แสดงปกติ) */
.nav-menu-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

nav ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-lg); 
    margin: 0;
    padding: 0;
}

nav ul li a {
    color: var(--color-text);
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
    font-size: 1rem;
}

nav ul li a:hover {
    color: var(--color-primary);
}

/* Hamburger Button (ซ่อนบน Desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}
.hamburger span {
    width: 100%;
    height: 3px;
    background-color: var(--color-dark);
    border-radius: 3px;
    transition: all 0.3s linear;
}

/* ============================================= */
/* (NEW) Mobile Navigation & Responsive Fixes  */
/* ============================================= */
@media (max-width: 992px) {
    
    /* 1. แสดงปุ่ม Hamburger */
    .hamburger {
        display: flex;
    }

    /* 2. ซ่อนเมนูและทำเป็น Drawer เลื่อนลงมา */
    .nav-menu-wrapper {
        position: absolute;
        top: 100%; /* อยู่ใต้ Header */
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        align-items: center;
        padding: 0;
        max-height: 0; /* ซ่อนโดยใช้ height */
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }

    /* คลาส .open จะถูกเติมด้วย JS เมื่อกดปุ่ม */
    .nav-menu-wrapper.open {
        max-height: 500px; /* ความสูงพอประมาณให้เนื้อหาแสดงครบ */
        padding: var(--spacing-md) 0;
    }

    nav ul {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    nav ul li a {
        display: block;
        padding: 10px;
        font-size: 1.1rem;
    }

    .nav-cta {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 80%; /* ให้ปุ่มกว้างเกือบเต็ม */
        margin-top: var(--spacing-sm);
    }
    .button-primary, .button-secondary {
        width: 100%;
        text-align: center;
    }

    /* Animation for Hamburger Icon */
    .hamburger.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
}

/* (FIX) ปรับ Hero บนมือถือให้ Text ไม่ทับหน้า Waiman */
@media (max-width: 768px) {
    #hero-v6 {
        min-height: 500px; /* ลดความสูง */
        background-position: 70% center; /* ขยับภาพคนไปทางขวา */
        align-items: flex-start; /* จัดเนื้อหาชิดบน */
        padding-top: 2rem;
    }
    
    .hero-content-overlay {
        /* ใส่พื้นหลังจางๆ ให้ข้อความอ่านออกทับภาพได้ */
        background: linear-gradient(to right, rgba(0, 17, 89, 0.85) 0%, rgba(0, 17, 89, 0.6) 60%, transparent 100%);
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* (FIX) Trust Bar บนมือถือ */
    #trust-bar {
        margin-top: 0; /* ไม่ต้องลอยทับ Hero บนมือถือ เพราะจะบัง */
        box-shadow: none;
        background-color: #f8f9fa; /* ให้กลืนกับพื้นหลัง */
        padding-top: 1rem;
    }
    #trust-bar ul {
        gap: 1rem;
        padding-bottom: 1rem;
    }
    #trust-bar ul li {
        font-size: 0.9rem;
        justify-content: flex-start; /* จัดชิดซ้าย */
        padding-left: 2rem; /* เว้นที่ให้ดูเป็นระเบียบ */
    }
    
    /* (FIX) ดัน USP ลงไปอีกนิดเพราะ Trust bar ไม่ลอยแล้ว */
    #usps {
        padding-top: var(--spacing-xl);
    }
}

/* === (REPLACE) Hero Section (V12 - Final Text Positioning) === */
#hero-v6 { 
    position: relative;
    z-index: 20; 
    width: 100%;
    min-height: 70vh;
    
    background-image: url('/img/banner/hero-waiman.avif');
    background-size: cover;
    background-position: center center;
    
    display: flex; 
    align-items: center; 
    padding: var(--spacing-xl) 0;

    justify-content: flex-start !important; 
    
}

/* (FIX by User) Overlay นี้จะจัดกรอบเนื้อหาให้ชิดซ้าย */
.hero-content-overlay {
    max-width: 1200px; 
    width: 100%;
    
    /* === (MOD V16) CHANGE 1: Center the 1200px container === */
    margin-left: auto;  
    margin-right: auto; /* (ลบ !important ออก) */
    
    padding: 0 var(--spacing-lg); /* 3rem padding */
}

/* (FIX by User) จัดเรียง Text Block ภายใน */
.hero-text-wrapper {
     width: 55%; 
     max-width: 650px; 
     color: white;
     z-index: 5; 
     position: relative;
     
     display: flex;
     flex-direction: column; 

     text-align: left !important;
     align-items: flex-start !important; 
     
     /* === (MOD V16) CHANGE 2: Push text to align === */
     /* 100px (trust-bar offset) - 48px (container padding 3rem) = 52px */
     margin-left: 3.25rem; /* 52px */
}
        
/* (REMOVED) ลบ .hero-v7-grid, .hero-v7-text, .hero-v7-graphic */

/* Adjust H1/H2 styles */
#hero-v6 h1 {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    /* (FIX V12) ขยับ H1 ขึ้นบน (ข้อ 2) */
    margin-top: -1.5rem; 
    margin-bottom: var(--spacing-xs);
    line-height: 1.1;
    font-weight: 800;
    color: white;
}

/* === (KEEP V13) Hero Slogan & Badge Styles START === */
#hero-v6 h2 {
    font-size: clamp(2.2rem, 4vw, 3rem); 
    font-weight: 600; 
    color: white; 
    line-height: 1.2; 
    margin-bottom: 0; 
}

.hero-slogan-cluster {
    display: flex;
    align-items: center; 
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap; 
}

.hero-badges {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); 
    flex-shrink: 0;
    margin-top: 0.5rem; 
}

.badge-delivery-time {
    background-color: var(--color-accent);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius-md);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.badge-price {
    background-color: white;
    color: var(--color-text);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-md);
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    font-weight: 500;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    text-align: center;
}

.badge-price strong {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--color-dark);
    vertical-align: middle;
}

.badge-price::before {
    content: '';
    position: absolute;
    bottom: 100%; /* Position it right above the badge */
    left: 2rem; /* Indent it a bit */
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent white transparent; /* Points up */
}
/* === (KEEP V13) Hero Slogan & Badge Styles END === */


/* Adjust remaining text styles */
#hero-v6 p {
    font-size: clamp(0.9rem, 2vw, 1rem); 
    max-width: 600px; 
    /* (FIX V12) ขยับ P ลงล่าง (ข้อ 3) */
    margin-top: 0.5rem; 
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
    color: white;
}
#hero-v6 .hero-top-slogan {
    font-size: 0.9rem;
    font-weight: 400;
    color: #b3d7ff; 
    
    /* === (MOD V17) เพิ่มระยะห่างจาก H1 === */
    margin-bottom: 1.5rem; /* (เดิมคือ var(--spacing-sm) หรือ 1rem) */
    
    line-height: 1;
}
#hero-v6 .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* === Responsive for New Hero V12 === */
@media (max-width: 992px) {
    #hero-v6 {
        background-position: 40% center; 
    }
    .hero-content-overlay {
        padding: 0 var(--spacing-md);
        /* === (MOD V16) CHANGE 3: Center container at this breakpoint too === */
        margin-left: auto;
        margin-right: auto;
    }
    .hero-text-wrapper {
         width: 60%;
         max-width: 60%;
         /* === (MOD V16) CHANGE 4: Reset push margin === */
         margin-left: 0; 
    }
}
@media (max-width: 768px) {
    #hero-v6 {
        min-height: 80vh;
        background-position: 60% bottom; 
        align-items: flex-start; 
        padding-top: var(--spacing-lg);
    }
    .hero-text-wrapper {
         width: 100%;
         max-width: 100%;
         margin-left: 0; /* (Already 0, good) */
    }
    #hero-v6 h1 { 
        font-size: 2.5rem; 
        margin-top: 0; /* Reset */
    }
    #hero-v6 h2 { font-size: 1.5rem; }
    #hero-v6 p {
        margin-top: 0; /* Reset */
    }
    
    /* (KEEP V13) Responsive for cluster */
    .hero-slogan-cluster {
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    #hero-v6 h2 {
         font-size: 2.2rem;
    }
    .badge-delivery-time {
        font-size: 1.6rem;
        padding: 0.6rem 1rem;
    }
    .badge-price {
        font-size: 1rem;
    }
    
    /* (NEW V17) Reset slogan margin on mobile */
    #hero-v6 .hero-top-slogan {
        margin-bottom: var(--spacing-sm); /* 1rem */
    }
}
    
    /* (KEEP V13) Responsive for cluster */
    .hero-slogan-cluster {
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    #hero-v6 h2 {
         font-size: 2.2rem;
    }
    .badge-delivery-time {
        font-size: 1.6rem;
        padding: 0.6rem 1rem;
    }
    .badge-price {
        font-size: 1rem;
    }
    
    /* (NEW V17) Reset slogan margin on mobile */
    #hero-v6 .hero-top-slogan {
        margin-bottom: var(--spacing-sm); /* 1rem */
    }
}
/* === END HERO V12 === */

/* ============================================= */
/* (NEW V35.1) Service Page Hero Layout (usa.php) */
/* ============================================= */
#hero-v14 {
    background-color: #f8f9fa; /* สีเทาอ่อน */
    padding: var(--spacing-xl) var(--spacing-sm);
}
.hero-v14-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}
.hero-v14-text h1 {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}
.hero-v14-text h2 {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}
.hero-v14-text .hero-cta {
    display: flex;
    gap: var(--spacing-sm);
}
.hero-v14-graphic { text-align: right; }
.hero-v14-graphic img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* (NEW V35.1) Quote Form Layout */
#quote-form {
     background-color: var(--color-light-gray);
     padding-top: var(--spacing-xl); /* (V35.1) เพิ่ม padding-top */
     padding-bottom: var(--spacing-xl); /* (V35.1) เพิ่ม padding-bottom */
}
.quote-form-container {
    background-color: white;
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 800px; 
    margin: 0 auto;
    text-align: left; 
}
.quote-form-container .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}
.quote-form-container label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-dark);
}
.quote-form-container input,
.quote-form-container select,
.quote-form-container textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: 'Kanit', sans-serif;
}
.quote-form-container input[disabled] {
    background-color: #eee;
}

@media (max-width: 768px) {
    .hero-v14-grid { grid-template-columns: 1fr; }
    .hero-v14-graphic { grid-row: 1; margin-bottom: var(--spacing-md); }
}

/* ============================================= */
/* ============================================= */
/* (REVISED V38) Trust Bar (Floating Card)     */
/* ============================================= */
#trust-bar-v14 {
    background-color: transparent; /* 1. Section โปร่งใส */
    padding: 0 var(--spacing-sm); /* 2. ไม่มี padding บน-ล่าง */
    
    /* 3. ดึง Section ขึ้นไปซ้อน (-4rem) */
    margin-top: -4rem; 
    position: relative;
    z-index: 10; /* 4. ต้องอยู่บน Hero */
    
    box-shadow: none; /* 5. ลบเงาของ Section ออก */
}
.trust-bar-v14-grid {
    /* 6. Grid (ด้านใน) กลายเป็นการ์ดสีขาว */
    background-color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 7. เพิ่มเงาให้การ์ด */
    border-radius: var(--border-radius-lg); /* 8. ขอบมน */
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    max-width: 1200px; /* 9. จำกัดความกว้างการ์ด */
    margin: 0 auto;
    text-align: center;
    
    /* 10. เพิ่ม padding ให้การ์ด (ย้ายจาก V37) */
    padding: var(--spacing-md);
}
.trust-item {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-dark);
}
@media (max-width: 768px) {
    #trust-bar-v14 {
         margin-top: -3rem; /* 11. ลดระยะซ้อนทับบนมือถือ */
    }
    .trust-bar-v14-grid {
        grid-template-columns: 1fr 1fr; /* 12. 2x2 บนมือถือ */
    }
}

/* ============================================= */
/* (NEW V40) Wai No Tax Hub Page               */
/* ============================================= */
#comparison-table {
    background-color: white; 
}
.comparison-table-container {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    text-align: left;
    border: 1px solid var(--color-light-gray);
}
.comparison-table-header, .comparison-table-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; /* 3 Columns */
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-md); 
}
.comparison-table-header {
    background-color: #f8f9fa; /* Light gray header */
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}
.comparison-table-row {
    background-color: white;
    font-size: 1rem;
    border-top: 1px solid var(--color-light-gray);
}
.comparison-table-row strong {
    font-weight: 600;
    color: var(--color-dark);
}
.comparison-table-row .col-pro {
    color: #155724; /* Green */
    font-weight: 600;
}
.comparison-table-row .col-con {
    color: #721c24; /* Red */
}

/* === (NEW V40) CTA Buttons === */
.cta-hub {
    background-color: var(--color-light-gray);
}
.cta-hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    max-width: 900px;
    margin: 0 auto;
}
.cta-hub-card {
    background-color: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
}
.cta-hub-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}
@media (max-width: 768px) {
    .comparison-table-header { display: none; } 
    .comparison-table-row {
        grid-template-columns: 1fr; 
        gap: var(--spacing-sm); 
    }
    .comparison-table-row .col-feature::before,
    .comparison-table-row .col-pro::before,
    .comparison-table-row .col-con::before {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: #555;
    }
    .comparison-table-row .col-feature::before { content: 'เปรียบเทียบ'; }
    .comparison-table-row .col-pro::before { content: 'Wai No Tax (เหมาจ่าย)'; }
    .comparison-table-row .col-con::before { content: 'ส่งแบบปกติ'; }
    
    .cta-hub-grid { grid-template-columns: 1fr; }
}

/* ============================================= */
/* (NEW V36) Shipping Rate Table (usa.php)     */
/* ============================================= */
#shipping-rates {
    background-color: white; 
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}
.rate-table-container {
    max-width: 800px;
    margin: 0 auto;
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    text-align: left;
    border: 1px solid var(--color-light-gray);
}
.rate-table-header, .rate-table-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.2fr; /* 3 Columns */
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-md); 
}
.rate-table-header {
    background-color: #f8f9fa; /* Light gray header */
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid var(--color-light-gray);
}
.rate-table-row {
    background-color: white;
    font-size: 1.1rem;
}
.rate-table-row .col-service strong {
    color: var(--color-primary); /* Brand color */
    font-size: 1.2rem;
}
/* (V36) Price Box (เหมือนในรูป แต่ใช้สีแบรนด์) */
.rate-table-row .col-price {
    background-color: var(--color-dark); 
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .rate-table-header { display: none; } 
    .rate-table-row {
        grid-template-columns: 1fr; 
        gap: var(--spacing-sm); 
        padding: var(--spacing-md);
    }
    .rate-table-row .col-service::before,
    .rate-table-row .col-time::before {
        content: 'บริการ (Service)'; /* Default label */
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: #555;
        margin-bottom: 0.25rem;
    }
    .rate-table-row .col-time::before { content: 'ระยะเวลาจัดส่ง (Delivery time)'; }
    
    .rate-table-row .col-price {
        margin-top: var(--spacing-sm);
        font-size: 1.3rem;
    }
}


/* === V20 - Modern Shipping Hero (Full Bleed) === */

/* (REMOVED V22) - ลบกฎ Full-bleed */

#shipping-hero-V14 {
    position: relative; 
    padding: 0; /* (MOD V22) - ลบ padding ของ section */
    
    /* (NEW V22) - เพิ่มขอบมน */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}
.shipping-hero-image {
    width: 100%;
    
    /* === (MOD V24) - เพิ่มความสูง 30% === */
    height: 715px; /* (เดิมคือ 550px) */
    
    overflow: hidden; 
}
.shipping-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    /* === (MOD V24) - จัดตำแหน่งภาพใหม่ (Center) === */
    object-position: center center; /* (เดิมคือ center 30%) */
}

.shipping-hero-content-box {
    position: absolute;
    top: 50%; 
    right: var(--spacing-md);  
    transform: translateY(-50%); 
    z-index: 10;
    width: 90%; 
    
    /* === (MOD V24) - บีบกล่อง === */
    max-width: 420px; /* (เดิมคือ 460px) */
    
    background-color: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    
    /* === (MOD V24) - บีบ Padding === */
    padding: 1.5rem; /* (เดิมคือ var(--spacing-md)) */
    
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(255, 255, 255, 0.2); 
}

.shipping-hero-content-box h1 {
    font-size: clamp(1.5rem, 5vw, 2.0rem); 
    font-weight: 800;
    color: var(--color-dark);
    text-align: left; 
}
.shipping-hero-content-box h2 {
    font-size: clamp(0.9rem, 3vw, 1.0rem); 
    font-weight: 500;
    color: var(--color-text);
    text-align: left; 
    
    /* === (MOD V24) - บีบช่องว่าง === */
    margin-bottom: var(--spacing-sm); /* (เดิมคือ var(--spacing-md)) */
}

.shipping-hero-content-box .calculator-form {
    max-width: 100%;
    background-color: transparent; 
    box-shadow: none;
    padding: 0; 
    border-radius: 0; 
}
.shipping-hero-content-box .calculator-form label {
    font-size: 0.85rem;
}
.shipping-hero-content-box .calculator-form .form-grid {
    /* === (MOD V24) - บีบช่องว่าง === */
    gap: 0.75rem; /* (เดิมคือ var(--spacing-sm)) */
}
.shipping-hero-content-box .calculator-form input,
.shipping-hero-content-box .calculator-form select {
    padding: 0.8rem 1rem; 
    font-size: 1rem; 
}
.shipping-hero-content-box .calculator-form .line-button {
    /* === (MOD V24) - บีบช่องว่าง === */
    margin-top: var(--spacing-sm); /* (เดิมคือ var(--spacing-md)) */
    padding: 0.8rem 1rem; 
    font-size: 1.1rem; 
}

/* === (NEW V20) Radio Button Styles === */
.form-radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    
    /* === (MOD V24) - บีบช่องว่าง === */
    margin-bottom: 1.25rem; /* (เดิมคือ var(--spacing-md)) */
}
.form-radio-group label {
    position: relative;
    cursor: pointer;
}
.form-radio-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.form-radio-group span {
    display: block;
    
    /* === (MOD V24) - บีบช่องว่าง === */
    padding: 0.6rem 0.8rem; /* (เดิมคือ var(--spacing-sm) 0.8rem) */
    
    border: 2px solid var(--color-light-gray);
    border-radius: var(--border-radius-sm);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    background-color: white;
}
.form-radio-group span strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.3;
}
.form-radio-group span small {
    display: block;
    font-size: 0.8rem;
    color: #666;
    line-height: 1.3;
}
.form-radio-group input[type="radio"]:checked + span {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
    background-color: #f7fbff;
}
/* === END (NEW V20) === */


/* (REMOVED V20) - .shipping-usp-bar */
.shipping-usp-bar {
    display: none; /* (MOD V20) - ซ่อน USP Bar */
}
.usp-item {
    display: none;
}
/* === END V20 Shipping Hero === */



/* === (FIX V14) Responsive for New Hero === */
@media (max-width: 992px) {
    #hero-v6 {
        background-position: 40% center; 
    }
    .hero-content-overlay {
        padding: 0 var(--spacing-md);
        margin-left: auto;
        margin-right: auto;
    }
    .hero-text-wrapper {
         width: 60%;
         max-width: 60%;
         margin-left: 0; 
    }
}
@media (max-width: 768px) {
    #hero-v6 {
        min-height: 80vh;
        background-position: 60% bottom; 
        align-items: flex-start; 
        /* (FIX) เพิ่ม padding บน-ล่าง ให้ปุ่มมีที่หายใจ */
        padding-top: 3rem;
        padding-bottom: 3rem; 
    }
    .hero-text-wrapper {
         width: 100%;
         max-width: 100%;
         margin-left: 0; 
    }
    #hero-v6 h1 { 
        font-size: 2.2rem; /* (FIX) ลดขนาด H1 นิดนึงบนมือถือ */
        margin-top: 0; 
    }
    #hero-v6 h2 { font-size: 1.4rem; }
    #hero-v6 p {
        margin-top: 0; 
        font-size: 0.95rem;
    }
    
    .hero-slogan-cluster {
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    
    /* (FIX) ปรับปุ่มบนมือถือให้เรียงแนวตั้ง หรือเล็กลงถ้าจำเป็น */
    .hero-cta {
        width: 100%;
        justify-content: flex-start;
        gap: 1rem;
    }
    .hero-cta .cta-main, .hero-cta .cta-secondary {
        width: 100%; /* ปุ่มเต็มความกว้างบนมือถือ */
        text-align: center;
        padding: 0.8rem;
    }
}

/* === (REVERT V14) Trust Bar Section (กลับเป็น V12) === */
#trust-bar {
    background-color: white;
    padding: var(--spacing-md) var(--spacing-sm);
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
    margin-top: -5rem; /* ซ้อนทับ Hero */
    position: relative;
    z-index: 25; /* ให้อยู่บน Hero (z-index: 20) */
    border-radius: var(--border-radius-md);
    max-width: 1000px; 
    margin-left: auto;
    margin-right: auto;
}

#trust-bar ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    /* (REMOVED V14) ลบ max-width และ margin */
}

#trust-bar ul li {
    flex-basis: 200px; 
    font-weight: 600;
    font-size: 1rem; /* (REVERT V14) */
    color: var(--color-dark); /* (REVERT V14) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

/* (FIX V14) ปรับ Spacing ด้านล่าง Trust Bar */
#usps,
#how-it-works {
    background-color: #f8f9fa;
    padding: var(--spacing-xl) var(--spacing-sm);
    /* (FIX) ลดระยะห่างลง (จาก 5rem เหลือ 2rem + padding ปกติ) */
    padding-top: var(--spacing-xl); 
}


/* USP Section */
/* (MOD V22) - ปรับ Padding-top ของ #usps และ #how-it-works */
#usps,
#how-it-works {
    background-color: #f8f9fa;
    padding: var(--spacing-xl) var(--spacing-sm);
    /* (REVERT V14) คืนค่า padding-top ให้หลบ trust bar */
    padding-top: calc(var(--spacing-xl) + 5rem); 
}
/* (MOD V22) - แต่ #how-it-works ในหน้า shipping-page ไม่ต้องหลบ */
main > #how-it-works {
    padding-top: var(--spacing-xl);
}


#usps h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-lg);
    color: var(--color-dark);
    font-weight: 700;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: var(--spacing-xl);
    max-width: 1200px; 
    margin: 0 auto;
}

.usp-grid article {
    background-color: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.usp-grid article:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.usp-icon {
    font-size: 3rem; 
    color: var(--color-primary); 
    margin-bottom: var(--spacing-sm);
    line-height: 1; 
}
.usp-icon svg {
    width: 56px; 
    height: 56px;
    fill: var(--color-primary); 
}

.usp-grid article h3 {
    font-size: 1.75rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.usp-grid article p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Calculator Section */
#calculator {
    background-color: var(--color-light-gray);
    padding: var(--spacing-xl) var(--spacing-sm);
    position: relative; 
    overflow: hidden; 
}

#calculator h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-md);
    color: var(--color-dark);
    font-weight: 700;
    position: relative; 
    z-index: 5;
}

#calculator p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: var(--spacing-lg);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative; 
    z-index: 5;
}

#calculator .calculator-form {
    background-color: white;
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 700px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: left; 
    position: relative; 
    z-index: 5;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-dark);
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: var(--spacing-md);
}

#calculator .calculator-form input,
#calculator .calculator-form select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: 'Kanit', sans-serif;
}

#calculator .line-button {
    width: 100%; 
    font-size: 1.1rem;
    padding: 1rem 1.8rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}
.line-icon {
    width: 24px;
    height: 24px;
    fill: white;
}

.calculator-bg-element {
    position: absolute;
    z-index: 1;
    opacity: 0.08; 
    background-color: var(--color-primary); 
}
.calculator-bg-element.shape-1 {
    width: 150px;
    height: 400px;
    transform: skew(-20deg) rotate(15deg);
    top: -50px;
    left: -30px;
}
.calculator-bg-element.shape-2 {
    width: 120px;
    height: 350px;
    transform: skew(-20deg) rotate(15deg);
    bottom: -80px;
    right: 20px;
    opacity: 0.05;
}

/* Branches Section */
#branches {
    background-color: white;
}

#branches h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-md);
    color: var(--color-dark);
    font-weight: 700;
}

#branches p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: var(--spacing-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.branch-search-container {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.branch-search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    fill: var(--color-primary);
    opacity: 0.6;
}

#branch-search-input {
    width: 100%;
    padding: 1.2rem 1.2rem 1.2rem 3.5rem; 
    font-size: 1.1rem;
    font-family: 'Kanit', sans-serif;
    border: 2px solid var(--color-light-gray);
    border-radius: var(--border-radius-md);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#branch-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 124, 236, 0.2);
}

#branch-search-button {
    width: 100%;
    font-size: 1.1rem;
    padding: 1rem;
}


/* Service Links Section */
#service-links {
    background-color: #f8f9fa;
}

#service-links h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-lg);
    color: var(--color-dark);
    font-weight: 700;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

.service-card {
    display: block; 
    background-color: white; 
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; 
    overflow: hidden; 
    position: relative; 
}
.service-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.service-card-content {
    padding: var(--spacing-md);
    position: relative;
    z-index: 10; 
    min-height: 80px; 
}
.service-card-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    transition: color 0.3s ease;
}
.service-card:hover .service-card-content h3 {
    color: var(--color-primary); 
}

.service-card-graphic {
    position: absolute;
    bottom: 0; 
    left: 0;
    right: 0;
    height: 65%; 
    z-index: 1;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
    transform: scale(1.5, 1); 
    opacity: 0.9;
    transition: height 0.3s ease;
}
.service-card:hover .service-card-graphic {
    height: 70%; 
}

.service-card-diecut {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px; 
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    z-index: 5;
    transition: transform 0.3s ease;
}
.service-card-diecut img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; 
}
.service-card:hover .service-card-diecut {
    transform: scale(1.05) translateY(-5px); 
}

.service-card.shape-blue .service-card-graphic {
    background-color: var(--color-primary); 
}
.service-card.shape-orange .service-card-graphic {
    background-color: var(--color-accent); 
}
.service-card.shape-navy .service-card-graphic {
    background-color: var(--color-dark); 
}

/* Target Audience Section */
#target-audience {
    background-color: white;
}

#target-audience h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-lg);
    color: var(--color-dark);
    font-weight: 700;
}

.target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.target-grid article {
    background-color: #f0f4ff; 
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: left;
}

.target-grid article h3 {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.target-grid article p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Content Hub Section */
#content-hub {
    background-color: #f8f9fa;
}

#content-hub h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-lg);
    color: var(--color-dark);
    font-weight: 700;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto var(--spacing-lg) auto;
}

.blog-grid article {
    background-color: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-grid article:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.blog-grid article a {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-dark);
}

/* Final CTA Section */
#final-cta {
    background-color: var(--color-primary);
    color: white;
    padding: var(--spacing-xl) var(--spacing-sm);
}

#final-cta h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--spacing-md);
    font-weight: 800;
}

#final-cta p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 800px;
    margin-bottom: var(--spacing-lg);
    margin-left: auto;
    margin-right: auto;
}

/* Footer */
footer {
    background-color: var(--color-dark); 
    color: white;
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: left;
    position: relative;
    z-index: 5;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto var(--spacing-xl) auto;
}

.footer-logo-col {
    line-height: 1; 
}
.footer-logo-col p {
    margin-top: var(--spacing-sm); 
}

.logo-img-footer {
    height: 45px; 
    width: auto;
}

.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-accent);
    font-weight: 600;
}

.footer-col p, .footer-col ul {
    font-size: 0.95rem;
    color: #e0e0e0;
    line-height: 1.7;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li a {
    color: #e0e0e0;
    display: block;
    padding: 0.3rem 0;
}

.footer-col ul li a:hover {
    color: var(--color-accent);
    transform: translateX(5px);
}

.footer-copyright {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #bbb;
}


/* ============================================= */
/* (REPLACE V27) Modern FAQ Styles (Fixed Spacing) */
/* ============================================= */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    background-color: white;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.faq-question {
    padding: 1.5rem; /* พื้นที่กดกว้างๆ */
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-dark);
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    background-color: #fff;
    transition: background-color 0.3s;
}

/* ไอคอนลูกศร */
.faq-question::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-left: 1rem;
    flex-shrink: 0;
}

/* สถานะเปิด (Active) */
.faq-item.active .faq-question {
    color: var(--color-primary);
    background-color: #f8fbff;
    border-bottom: 1px solid #f0f0f0; /* เส้นคั่นที่ชัดเจน */
}
.faq-item.active .faq-question::after {
    transform: rotate(-135deg);
}

.faq-answer {
    /* (FIX) ใช้ max-height 0 เพื่อซ่อน */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #fff;
}

/* (FIX) เนื้อหาข้างใน div อีกชั้นเพื่อจัดการ Padding */
.faq-answer p {
    margin: 0;
    padding: 1.5rem; /* Padding รอบตัวหนังสือที่แท้จริง */
    line-height: 1.7;
    color: #555;
}

/* (FIX) เมื่อเปิด ให้ขยายเต็มที่ (ใช้ JS ช่วยหรือตั้งค่าสูงๆ) */
.faq-item.active .faq-answer {
    max-height: 1000px; /* เผื่อไว้เยอะๆ */
    transition: max-height 0.5s ease-in;
    /* (สำคัญ) ลบ padding ของตัวแม่ทิ้ง ให้ลูก (p) จัดการเอง */
    padding: 0; 
}


/* (FIX) ปรับระยะห่างตอนเปิดให้พอดี */
.faq-item.active .faq-answer {
    max-height: 500px;
    /* เพิ่ม padding รอบๆ 1.5rem (24px) ให้ไม่ชิดขอบ */
    padding: 1.5rem; 
    border-top: 1px solid #f0f0f0;
}

/* (FIX) ลบ margin ของ p ตัวสุดท้ายเพื่อไม่ให้ดันกรอบล่าง */
.faq-answer p {
    margin-bottom: 0;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    nav ul {
        gap: var(--spacing-md);
    }
    nav .nav-cta {
        display: none; 
    }
}

@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    nav ul {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }
    nav ul li a::after {
        left: 0;
        width: 100%;
    }
    nav .nav-cta {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-sm);
    }
    .button-primary, .button-secondary, .cta-main, .cta-secondary {
        width: 100%;
    }

    /* (REVERT V14) Responsive Trust Bar */
    #trust-bar ul {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .usp-grid, .service-grid, .target-grid, .blog-grid, .footer-grid {
        grid-template-columns: 1fr;
    }

    .usp-grid article,
    .target-grid article,
    .blog-grid article {
        text-align: center;
    }
    
    /* (MOD V22) Responsive Shipping Hero (Boxed) */
    #shipping-hero-V14 {
        border-radius: var(--border-radius-lg);
    }
    .shipping-hero-image {
        height: 40vh !important;
    }
    .shipping-hero-content-box {
        position: relative;
        right: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 0; /* (MOD V22) - ไม่ต้องซ้อนทับ */
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); /* (MOD V22) */
    }
    .form-radio-group {
        grid-template-columns: 1fr; 
    }

}


/* Process Stepper Styles */
#how-it-works .process-stepper-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: var(--spacing-sm);
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    text-align: left;
}

#how-it-works .step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-sm);
    position: relative;
}

#how-it-works .step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
#how-it-works .step-icon svg {
    width: 32px;
    height: 32px;
    fill: var(--color-primary);
}

#how-it-works .step-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-accent); 
    margin-bottom: var(--spacing-xs);
}
#how-it-works .step-content p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}

#how-it-works .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px; 
    left: 100%;
    width: 100%;
    transform: translateX(calc(-1 * var(--spacing-sm))); 
    border-top: 2px dashed var(--color-light-gray);
    z-index: -1;
}

#how-it-works .process-diecut-image {
    text-align: center;
    width: 100%;
}

@media (max-width: 992px) {
    #how-it-works .process-stepper-container {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 500px; 
    }

    #how-it-works .step {
        flex-direction: row; 
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
    }

    #how-it-works .step-icon {
        flex-shrink: 0; 
    }

    #how-it-works .step:not(:last-child)::after {
        display: none;
    }
    
    #how-it-works .step:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 64px; 
        left: 32px; 
        height: 100%;
        border-left: 2px dashed var(--color-light-gray);
        z-index: -1;
    }
}

/* Testimonials Section Styles */
#testimonials h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-lg);
    color: var(--color-dark);
    font-weight: 700;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    background-color: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.testimonial-card .stars {
    font-size: 1.5rem;
    color: var(--color-accent); 
    margin-bottom: var(--spacing-sm);
}

.testimonial-card .quote {
    font-size: 1.1rem;
    font-style: italic;
    color: #333;
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
    flex-grow: 1; 
}

.testimonial-card .author {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Dos & Don'ts Section Styles */
#dos-and-donts h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-xs);
    color: var(--color-dark);
    font-weight: 700;
}
#dos-and-donts p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: var(--spacing-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.dos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.dos-column {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
}

.dos-column h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.dos-column h3 svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.dos-column ul {
    list-style-position: inside;
    padding-left: var(--spacing-xs);
    font-size: 1rem;
    line-height: 1.8;
}

.column-allowed {
    background-color: #f0fff4;
    border: 1px solid #c3e6cb;
}
.column-allowed h3 {
    color: #155724;
}
.column-allowed h3 svg {
    fill: #28a745;
}

.column-prohibited {
    background-color: #fff3f3;
    border: 1px solid #f5c6cb;
}
.column-prohibited h3 {
    color: #721c24;
}
.column-prohibited h3 svg {
    fill: #dc3545;
}

@media (max-width: 992px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dos-grid {
        grid-template-columns: 1fr;
    }
}

/* Hero Image Position for Import Page */
.hero-import .shipping-hero-image img {
    object-position: center 30%; 
}

/* Service Hub Page Styles (our-services) */
#hub-hero {
    background-color: var(--color-dark); 
    color: white;
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: center;
    height: 350px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    padding-top: var(--spacing-lg); 
}

#hub-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    line-height: 1.15;   /* เพิ่มบรรทัดนี้ ลดช่องไฟระหว่างบรรทัด */
}
#hub-hero h2 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 400;
    color: #e0e7ff;
    max-width: 800px;
}

/* Service Hub Page Cards V2 Styles */
#hub-service-cards-container {
    margin-top: -120px; 
    margin-bottom: var(--spacing-xxl);
    position: relative;
    z-index: 10; 
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-sm);
}

.service-cards-v2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.service-card-v2 {
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: var(--border-radius-lg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
}

.service-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-v2-artwork {
    width: 100%;
    height: 180px; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e2e8f0; 
}

.card-v2-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

.card-v2-content {
    padding: var(--spacing-md);
    flex-grow: 1;
    text-align: left;
}

.card-v2-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.card-v2-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.card-v2-cta {
    padding: var(--spacing-md);
    text-align: right;
    border-top: 1px solid #eee;
}

.card-v2-cta .cta-secondary {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.service-card-v2.blue .cta-secondary {
    background-color: var(--color-primary); 
    color: white;
}
.service-card-v2.blue .cta-secondary:hover {
    background-color: #005bb5; 
}

.service-card-v2.orange .cta-secondary {
    background-color: var(--color-accent); 
    color: white;
}
.service-card-v2.orange .cta-secondary:hover {
    background-color: #cc4d00;
}

.service-card-v2.navy .cta-secondary {
    background-color: var(--color-dark); 
    color: white;
}
.service-card-v2.navy .cta-secondary:hover {
    background-color: #000a30;
}

@media (max-width: 768px) {
    #hub-hero {
        min-height: 250px;
    }
    #hub-service-cards-container {
        margin-top: -100px; 
    }
    .service-cards-v2-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================= */
/* (NEW) Blog Index Page Styles (blog.php)     */
/* ============================================= */
#blog-hero {
    background-color: var(--color-dark); 
    color: white;
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: center;
    height: 40vh; /* (NEW) ปรับความสูง Hero หน้า Blog */
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}
#blog-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
}
#blog-hero h2 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 400;
    color: #e0e7ff;
    max-width: 800px;
}

/* (NEW) ปรับ <main> สำหรับหน้ารวมบทความ */
.article-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
    /* (NEW) ดึง Grid ให้ลอยทับ Hero */
    margin-top: -5rem; 
    position: relative;
    z-index: 10;
}

/* (NEW) Grid สำหรับการ์ดบทความ */
.blog-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

/* (NEW) สไตล์การ์ดบทความ (คล้าย .service-card-v2) */
.article-card {
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ============================================= */
/* (FIX V13) Blog Grid Adjustments             */
/* ============================================= */

/* (NEW) ปรับ Grid ให้แน่นขึ้น (แสดง 3-4 การ์ดต่อแถว) */
.blog-grid-v2 {
    display: grid;
    /* (FIX) ลด minmax เหลือ 280px เพื่อให้เรียงได้ 3-4 การ์ด */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

/* (NEW) ปรับขนาดการ์ดและภาพให้เล็กลง */
.article-card .card-v2-image-wrapper {
    width: 100%;
    /* (FIX) ลดความสูงภาพลง (จากเดิม height: auto หรือ 200px) */
    height: 180px; 
    overflow: hidden;
}
.article-card .card-v2-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* บังคับให้เต็มพื้นที่ 180px */
    transition: transform 0.3s ease;
}

/* (NEW) ปรับขนาดตัวอักษรให้กะทัดรัด */
.article-card .card-v2-content {
    padding: 1.2rem; /* ลด padding */
}
.article-card .card-v2-content h3 {
    font-size: 1.15rem; /* ลดขนาดหัวข้อ */
    line-height: 1.4;
    margin-bottom: 0.5rem;
    
    /* (Optional) ตัดหัวข้อถ้ายาวเกิน 2 บรรทัด */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.article-card .card-v2-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
    
    /* (FIX) ตัดคำอธิบายเหลือ 3 บรรทัด */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;  
    overflow: hidden;
    margin-bottom: 0;
}

.article-card .card-v2-content {
    padding: var(--spacing-md);
    flex-grow: 1;
    text-align: left;
}
.article-card .card-v2-content h3 {
    font-size: 1.3rem; /* (NEW) ปรับขนาด H3 */
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}
.article-card .card-v2-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    /* (NEW) จำกัดข้อความ 2 บรรทัด */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.article-card .card-v2-cta {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: right;
    border-top: 1px solid #eee;
}
.article-card .card-v2-cta .cta-secondary {
    background-color: var(--color-primary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
}



/* ============================================= */
/* (NEW) Contact Page Styles                   */
/* ============================================= */
#contact-hero {
    background-color: var(--color-dark); /* สีน้ำเงินเข้ม */
    color: white;
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: center;
    min-height: 40vh; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}
#contact-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
}
#contact-hero h2 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 400;
    color: #e0e7ff;
    max-width: 800px;
}

/* (NEW) ปรับ <main> สำหรับหน้า Contact */
.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
    /* (NEW) ดึง Grid ให้ลอยทับ Hero */
    margin-top: -5rem; 
    position: relative;
    z-index: 10;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 2 คอลัมน์ (ภาพ 1 ส่วน, ฟอร์ม 1.5 ส่วน) */
    gap: var(--spacing-lg);
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.contact-image {
    background-color: #f8f9fa; /* สีพื้นหลังเผื่อภาพโหลดช้า */
}
.contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.contact-form-area {
    padding: var(--spacing-lg);
    text-align: left;
}
.contact-form-area h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-xs);
}
.contact-form-area p {
    font-size: 1rem;
    color: #555;
    margin-bottom: var(--spacing-md);
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}
.detail-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
}
.detail-item svg {
    width: 24px;
    height: 24px;
    fill: var(--color-primary);
}
.detail-item .line-icon {
    width: 24px;
    height: 24px;
    fill: #06C755; /* LINE Green */
}

.contact-form-area hr {
    border: none;
    border-top: 1px solid var(--color-light-gray);
    margin-bottom: var(--spacing-md);
}

/* (NEW) สไตล์สำหรับ Contact Form */
.contact-form .form-group {
    margin-bottom: var(--spacing-sm);
}
.contact-form label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: 'Kanit', sans-serif;
}
.contact-form textarea {
    resize: vertical;
}
.contact-form button.cta-main {
    width: 100%;
    font-size: 1.1rem;
    padding: 1rem;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* คอลัมน์เดียวบนมือถือ */
    }
    .contact-image img {
        height: 300px; /* จำกัดความสูงภาพบนมือถือ */
    }
}

/* ============================================= */
/* (NEW) Branch Locator Page Styles (branches.php) */
/* ============================================= */
#branch-hero {
    background-color: var(--color-dark); 
    color: white;
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: center;
    min-height: 40vh; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}
#branch-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
}
#branch-hero h2 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 400;
    color: #e0e7ff;
    max-width: 800px;
}

/* (NEW) ปรับ <main> สำหรับหน้า Branch */
.branch-locator-container {
    max-width: 1400px; /* (NEW) ทำให้หน้านี้กว้างเป็นพิเศษ */
    margin: 0 auto;
    padding-top: 0;
    margin-top: -5rem; 
    position: relative;
    z-index: 10;
}

.branch-map-wrapper {
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: grid;
    /* (NEW) 2 คอลัมน์ (กล่องค้นหา 1 ส่วน, แผนที่ 2.5 ส่วน) */
    grid-template-columns: 1fr 2.5fr;
    min-height: 70vh;
}

.branch-search-box {
    padding: var(--spacing-md);
    border-right: 1px solid var(--color-light-gray);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.branch-search-box input[type="text"] {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: 'Kanit', sans-serif;
}
.branch-search-box .cta-main {
    width: 100%;
}

.branch-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-xs);
}
.filter-btn {
    font-size: 0.8rem;
    padding: var(--spacing-xs) 0.5rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-light-gray);
    background-color: #f8f9fa;
    color: #555;
    cursor: pointer;
}
.filter-btn.active, .filter-btn:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

#branch-map-area {
    width: 100%;
    height: 100%;
    background-color: #e9ecef; /* สี Placeholder ของแผนที่ */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #999;
    min-height: 400px;
}

/* (NEW) สไตล์ของ List รายชื่อ */
#branch-list {
    padding-top: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}
.branch-list-scroll {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.branch-item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: var(--spacing-sm);
    align-items: center;
    background-color: white;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-light-gray);
}
.branch-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.branch-item-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
}
.branch-item-icon.service-point {
    background-color: var(--color-accent); /* สีส้ม */
}
.branch-item-icon.drop-off {
    background-color: #777; /* สีเทา */
}

.branch-item-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
}
.branch-item-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0;
}
.branch-item-info span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-primary);
}

.branch-item .cta-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

@media (max-width: 992px) {
    .branch-map-wrapper {
        grid-template-columns: 1fr; /* (NEW) ให้แผนที่อยู่บน */
    }
    .branch-search-box {
        grid-row: 2; /* (NEW) ให้กล่องค้นหาอยู่ล่างแผนที่ */
        border-right: none;
        border-top: 1px solid var(--color-light-gray);
    }
}

/* ============================================= */
/* (NEW) Branch Locator Page Fix (V3)          */
/* ============================================= */
#branch-map-area iframe {
    height: 100%;
    min-height: 70vh; /* (NEW) ทำให้ iframe สูงเท่า wrapper */
}

@media (max-width: 992px) {
    #branch-map-area iframe {
        min-height: 400px; /* (NEW) ความสูง iframe บนมือถือ */
    }
}

/* ============================================= */
/* (NEW) Branch Locator Page Fix (V5)          */
/* ============================================= */
.branch-item-info {
    cursor: pointer; /* (NEW) ทำให้เป็นรูปมือ เมื่อชี้ที่ "ข้อมูล" สาขา */
}
.branch-item:hover .branch-item-info {
    background-color: #f8f9fa; /* (NEW) เพิ่ม Highlight เวลาชี้ */
}

/* ============================================= */
/* (NEW) Branch Locator Page Fix (V5)          */
/* ============================================= */
.branch-item-info {
    cursor: pointer; /* (NEW) ทำให้เป็นรูปมือ เมื่อชี้ที่ "ข้อมูล" สาขา */
}
.branch-item:hover .branch-item-info {
    background-color: #f8f9fa; /* (NEW) เพิ่ม Highlight เวลาชี้ */
}

/* === (START) V25 - Homepage Service Links (1+5 Layout) === */

/* 1. ซ่อน H2 และ Grid เก่าของ #service-links */
#service-links > h2 {
    display: none; /* H2 ถูกย้ายไปอยู่ในการ์ด */
}
#service-links .service-grid {
    display: none; /* ใช้ .service-grid-v2-homepage แทน */
}

/* 2. Grid Container ใหม่ (1+5) */
.service-grid-v2-homepage {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 split */
    gap: var(--spacing-md);
    max-width: 1200px; 
    margin: 0 auto;
}

/* 3. การ์ดใหญ่ (ซ้าย) */
.service-card-large {
    display: flex; 
    flex-direction: column;
    background-color: var(--color-primary); /* พื้นหลังสีน้ำเงิน */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    position: relative;
    color: white;
    padding: var(--spacing-lg);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card-large:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.service-card-large-content {
    position: relative;
    z-index: 10;
    flex-grow: 1;
}
.service-card-large-content h2 {
    font-size: clamp(2rem, 4vw, 3rem); 
    font-weight: 700;
    text-align: left; /* บังคับชิดซ้าย */
    margin-bottom: var(--spacing-lg);
    max-width: 400px;
    line-height: 1.2;
}

/* Icons (Decorative) */
.service-card-large-content [class^="icon-"] {
    position: absolute;
    opacity: 0.1;
    z-index: 5;
}
.service-card-large-content .icon-plane { top: -10px; left: -20px; }
.service-card-large-content .icon-box { top: 80px; right: 100px; }
.service-card-large-content .icon-form { top: 150px; left: 50px; }
.service-card-large-content [class^="icon-"] svg {
    width: 80px;
    height: 80px;
    fill: white;
}

.service-card-large-image {
    z-index: 9;
    position: relative; 
    margin: 0 -2rem -2rem 0; 
    align-self: flex-end; 
}
.service-card-large-image img {
    max-width: 100%;
    max-height: 400px; 
    object-fit: contain;
    display: block;
    margin-left: auto; 
}

/* 4. กล่องการ์ดเล็ก (ขวา) */
.service-card-small-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); /* ลดช่องว่างให้ชิดกันมากขึ้น */
    justify-content: center; /* (NEW) จัดกลางแนวตั้ง */
}

/* 1. ขยายพื้นที่การ์ดสีขาว (ที่คุณทำแล้ว) */
.service-card-small {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 1.25rem var(--spacing-md); /* เพิ่ม padding บน-ล่าง */
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: var(--color-dark);
    font-weight: 600;
    font-size: 1.1rem;
    text-align: left;
}

.service-card-small:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    color: var(--color-primary);
}

.service-card-small-stack .service-card-small img {
    width: 190px; /* ขยายจาก 50px */
    height: 70px; /* ขยายจาก 50px */
    object-fit: contain;
    flex-shrink: 0;
}

/* 5. Responsive */
@media (max-width: 992px) {
    .service-grid-v2-homepage {
        grid-template-columns: 1fr; /* Stack บนมือถือ/แท็บเล็ต */
    }
    .service-card-large-image {
        max-height: 300px;
        margin-right: 0;
    }
/* 4. กล่องการ์ดเล็ก (ขวา) */
.service-card-small-stack {
    display: flex;
    flex-direction: column;
    /* (แก้ไข) เพิ่ม gap ถ้า 1rem มันชิดไปสำหรับภาพ 190px */
    gap: var(--spacing-md); /* จากเดิม var(--spacing-sm) */
    justify-content: center; 
}
}

@media (max-width: 768px) {
     .service-card-small {
        font-size: 1rem;
        padding: var(--spacing-sm);
     }
     .service-card-large-content h2 {
        font-size: 2rem;
     }
}
/* === (END) V25 === */
}

/* ============================================= */
/* (NEW) Blog Article Callout Box Styles       */
/* ============================================= */
.article-callout {
    background-color: #FFF7F0; /* สีส้มอ่อน */
    border-left: 5px solid var(--color-accent); /* สีส้ม Accent */
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.article-callout h3 {
    color: var(--color-accent) !important; /* สีส้ม Accent */
    margin-top: 0 !important;
}
.article-callout p {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
}

/* ============================================= */
/* (NEW) Blog Article UX/UI Improvements       */
/* ============================================= */

/* 1. Full-width Image Breaker */
.article-image-full {
    /* (NEW) ขยายภาพให้เต็มความกว้างของ .article-container */
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}
.article-image-full img {
    width: 100%;
    display: block;
    border-radius: 0; /* ไม่ต้องมีขอบมน */
}

/* 2. 3-Column Feature Grid (สำหรับ "เหมาะกับใคร") */
.feature-grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}
.feature-box {
    background-color: #f8f9fa;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    text-align: left;
}
.feature-box svg {
    width: 32px;
    height: 32px;
    fill: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}
.feature-box h3 {
    color: var(--color-primary) !important;
    font-size: 1.2rem !important;
    margin-top: 0 !important;
}
.feature-box p {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
}

/* 3. 2-Column Media Object (สำหรับ "ข้อควรระวัง") */
.media-object-right {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* 1.5 ส่วนสำหรับ Text, 1 ส่วนสำหรับ Image */
    gap: var(--spacing-lg);
    align-items: center;
    margin: var(--spacing-md) 0;
}
.media-object-right img {
    border-radius: var(--border-radius-md);
}

/* 4. Responsive */
@media (max-width: 768px) {
    .article-image-full {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
    }
    .feature-grid-3-col,
    .media-object-right {
        grid-template-columns: 1fr; /* Stack เป็น 1 คอลัมน์บนมือถือ */
    }
}

/* ============================================= */
/* (NEW) V11 - Blog Article Layout Styles (Waiwer Adapted) */
/* ============================================= */
.aw-article-guide {
    /* (NEW) Waiwer Colors */
    --aw-primary: var(--color-primary); /* #007CEC */
    --aw-primary-weak: #f0f7ff; /* Light Blue */
    --aw-accent: var(--color-accent); /* #FF6000 */
    --aw-ink: #1F2937;
    --aw-ink-soft: #4B5563;
    --aw-card: #ffffff;
    --aw-radius: 16px;
    --aw-shadow: 0 10px 30px rgba(31, 41, 55, .08);
}
.aw-article-guide * { box-sizing: border-box; }

/* (NEW) Full-width Image Banner */
.aw-hero-banner {
    margin: 0 auto 24px; 
    max-width: 100%; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.aw-hero-banner img {
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover;
}

/* (NEW) Intro Hero Box */
.aw-hero {
    background: linear-gradient(135deg, var(--aw-primary) 0%, #4da1e8 100%);
    border-radius: var(--aw-radius); 
    padding: 28px 24px; 
    color: var(--aw-ink); 
    box-shadow: var(--aw-shadow); 
    position: relative; 
    overflow: hidden;
}
.aw-hero h1 {
    margin: 0 0 8px; 
    font-size: clamp(22px, 4.2vw, 36px); 
    line-height: 1.25; 
    color: var(--aw-card); /* White text */
}
.aw-hero p.lead {
    margin: 0; 
    font-size: clamp(14px, 2.6vw, 18px); 
    line-height: 1.7; 
    color: #e0f0ff; /* Light blue text */
}

/* (NEW) Table of Contents Box */
.aw-toc {
    margin: 20px 0 28px; 
    background: var(--aw-primary-weak); 
    border-left: 6px solid var(--aw-primary); 
    border-radius: 12px; 
    padding: 18px 18px 12px;
}
.aw-toc h2 {
    margin: 0 0 8px; 
    font-size: 20px; 
    color: var(--aw-ink);
}
.aw-toc ol { margin: 0; padding-left: 20px; color: var(--aw-ink); }
.aw-toc a {
    color: var(--aw-ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.15);
}
.aw-toc a:hover {
    color: var(--aw-accent);
    border-color: var(--aw-accent);
}

/* (NEW) Content Sections */
.aw-section {
    background: var(--aw-card); 
    border-radius: var(--aw-radius); 
    padding: 22px; 
    margin: 0 0 16px; 
    box-shadow: var(--aw-shadow); 
    border: 1px solid var(--color-light-gray);
}
.aw-section h2 {
    display: flex; 
    gap: 10px; 
    align-items: center; 
    margin: 0 0 8px; 
    font-size: clamp(18px, 3vw, 22px); 
    color: var(--aw-ink);
}
.aw-tag {
    font-size: 12px; 
    background: var(--aw-accent); /* Orange Tag */
    color: #fff; 
    padding: 4px 8px; 
    border-radius: 999px;
}
.aw-section p, .aw-section ul, .aw-section ol {
    margin: 0 0 16px;
    color: var(--aw-ink-soft);
    line-height: 1.85;
}
.aw-section ul, .aw-section ol {
    padding-left: 22px;
}

/* (NEW) Tip Box (Adapted from Callout) */
.aw-tip {
    margin-top: 10px; 
    padding: 10px 12px; 
    border-left: 4px solid var(--aw-accent); /* Orange Border */
    background: #fffaf5; /* Light Orange */
    border-radius: 10px;
}
.aw-tip strong {
    color: var(--aw-accent);
}

/* (NEW) CTA Box */
.aw-cta {
    margin: 26px 0 0; 
    background: var(--aw-card); 
    border-radius: var(--aw-radius); 
    padding: 22px; 
    border: 2px dashed var(--aw-primary); /* Blue dashed border */
}
.aw-cta-grid {
    display: grid; 
    grid-template-columns: 1.25fr .95fr; 
    gap: 18px; 
    align-items: center;
}
.aw-cta-text h4 {
    font-size: 1.5rem;
    color: var(--aw-ink);
    margin: 0 0 8px;
}
.aw-cta-text p { margin: 0 0 14px; }
.aw-cta-img picture, .aw-cta-img img {
    width: 100%; 
    height: auto; 
    display: block; 
    border-radius: 12px; 
    box-shadow: var(--aw-shadow); 
    border: 1px solid #eee; 
    background: #fff;
}
.aw-actions {
    display: flex; 
    gap: 10px; 
    justify-content: flex-start; 
    flex-wrap: wrap;
}
.aw-btn {
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    padding: 10px 14px; 
    border-radius: 12px; 
    text-decoration: none; 
    font-weight: 700; 
    border: 2px solid #0000; 
    transition: .2s;
    font-family: 'Kanit', sans-serif;
    cursor: pointer;
}
.aw-btn--blue {
    background: var(--aw-primary); 
    color: white;
}
.aw-btn--blue:hover { filter: brightness(1.1); }
.aw-btn--orange {
    background: var(--aw-accent); 
    color: white;
}
.aw-btn--orange:hover { filter: brightness(1.1); }

/* (NEW) Gallery Grid */
.aw-gallery {
    display: grid; 
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); 
    gap: 12px; 
    margin-top: 14px;
}
.aw-gallery img {
    width: 100%; 
    height: auto; 
    border-radius: 12px; 
    border: 1px solid #eee; 
    box-shadow: var(--aw-shadow); 
    object-fit: cover;
}

@media (max-width: 768px){
  .aw-cta-grid { grid-template-columns: 1fr; }
  .aw-cta-img { max-width: 520px; margin: 10px auto 0; }
}

/* === (NEW V44) Express Delivery Badge Style === */
.express-delivery-badge {
    background-color: var(--color-primary); /* ใช้สีหลักของแบรนด์ (สีส้ม) */
    color: white;
    display: inline-flex; /* ใช้ flexbox เพื่อจัดวาง icon และข้อความ */
    align-items: center; /* จัดให้อยู่กึ่งกลางในแนวตั้ง */
    padding: 0.5rem 1.2rem;
    border-radius: 50px; /* ทรงแคปซูล */
    font-weight: 500;
    font-size: 1rem;
    margin-top: var(--spacing-xs); /* เว้นระยะจาก Badge ด้านบนเล็กน้อย */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    gap: 0.5rem; /* ระยะห่างระหว่าง icon กับ text */
}
.express-delivery-badge span {
    font-weight: 600; /* ทำให้ตัวเลข "2-5 วัน" หนาขึ้น */
}

/* === (NEW V45) How-to Section Styles === */
#how-to-usa {
    background-color: #f8f9fa;
    padding: var(--spacing-xl) var(--spacing-sm);
}
#how-to-usa h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: var(--spacing-lg);
    color: var(--color-dark);
    font-weight: 700;
    text-align: center;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}
.step-card {
    background-color: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    position: relative;
}
.step-number {
    background-color: var(--color-accent);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 auto var(--spacing-sm) auto;
}
.step-card h3 {
    font-size: 1.2rem;
    color: var(--color-dark);
    margin-bottom: var(--spacing-xs);
}
.step-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* ============================================= */
/* (FIX) Hero V14 Alignment Fix (ตบชิดซ้ายทั้งหมด) */
/* ============================================= */

/* 1. บังคับให้ Container ข้อความชิดซ้าย และจัดเรียงแนวตั้ง */
#hero-v14 .hero-v14-text {
    text-align: left !important;      /* เลิกจัดกึ่งกลาง */
    display: flex;                    /* ใช้ Flexbox จัดระเบียบ */
    flex-direction: column;           /* เรียงลงมาเป็นชั้นๆ */
    align-items: flex-start !important; /* บังคับทุกชิ้นส่วนชิดซ้าย */
    justify-content: center;          /* จัดกึ่งกลางแนวตั้งเทียบกับรูปภาพ */
}

/* 2. ปรับแต่ง H1 และ H2 ให้ชิดซ้ายแน่ๆ */
#hero-v14 .hero-v14-text h1,
#hero-v14 .hero-v14-text h2,
#hero-v14 .hero-v14-text p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%; /* ให้ข้อความเต็มพื้นที่ฝั่งซ้าย */
}

/* 3. (สำคัญ) แก้ไข Badge ให้ไม่ยืดเต็มจอ และชิดซ้าย */
#hero-v14 .hero-v14-text .badge-price,
#hero-v14 .hero-v14-text .express-delivery-badge {
    margin-left: 0 !important;
    margin-right: auto !important; /* ดันด้านขวาให้ว่าง (เพื่อให้ชิดซ้าย) */
    display: inline-flex !important; /* ป้องกันการยืดเต็มความกว้าง */
    width: fit-content !important; /* ขนาดเท่าเนื้อหาข้างใน */
}

/* 4. (แถม) สำหรับมือถือ: ให้กลับมาอยู่ตรงกลางเหมือนเดิม (Mobile Friendly) */
@media (max-width: 768px) {
    #hero-v14 .hero-v14-text {
        text-align: center !important;
        align-items: center !important; /* กลับมาจัดกลางบนมือถือ */
    }
    #hero-v14 .hero-v14-text h1,
    #hero-v14 .hero-v14-text h2,
    #hero-v14 .hero-v14-text p {
        text-align: center !important;
    }
    #hero-v14 .hero-v14-text .badge-price,
    #hero-v14 .hero-v14-text .express-delivery-badge {
        margin-left: auto !important;
        margin-right: auto !important; /* จัดกลางบนมือถือ */
    }
}

/* ============================================= */
/* (NEW) Brand Pattern Overlay System          */
/* ============================================= */

/* คลาสสำหรับใส่ Pattern */
.has-brand-pattern {
    position: relative; /* เพื่อให้ ::before อ้างอิงตำแหน่งได้ */
    overflow: hidden;   /* ตัดส่วนเกินทิ้ง */
    z-index: 1;         /* ตั้งฐานเลเยอร์ */
}

/* สร้างเลเยอร์ลายกราฟิก */
.has-brand-pattern::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* (UPDATE) ดึงภาพ Pattern เป็น .avif */
    background-image: url('/img/brand-pattern.avif'); 
    background-repeat: repeat;
    background-size: 600px; /* ปรับขนาดความใหญ่ของลาย (ลองปรับดูได้ครับ 400-600px) */
    
    /* ปรับความจาง (สำคัญมาก) */
    opacity: 0.06; /* ค่า 0.03 - 0.08 กำลังสวยครับ ไม่กวนสายตา */
    
    z-index: -1; /* ดันไปอยู่หลังสุด */
    pointer-events: none; /* เพื่อให้คลิกทะลุได้ ไม่บังปุ่ม */
}

/* (Optional) ซ่อนกราฟิกเรขาคณิตเดิมใน Calculator เพื่อให้ Pattern เด่นชัด */
#calculator .calculator-bg-element {
    display: none; 
}

/* ============================================= */
/* (NEW) Standard Content Image Style          */
/* ============================================= */
/* สำหรับภาพประกอบในเนื้อหาที่ไม่ต้องการให้เต็มจอ */
.aw-content-image {
    margin: var(--spacing-md) auto; /* จัดกึ่งกลาง และเว้นระยะบนล่าง */
    text-align: center;
    max-width: 100%;
}

.aw-content-image img {
    max-width: 80%; /* (สำคัญ) จำกัดความกว้างไว้ที่ 80% ของพื้นที่ */
    height: auto;
    border-radius: var(--aw-radius); /* เพิ่มขอบมนให้เข้าธีม */
    box-shadow: var(--aw-shadow); /* เพิ่มเงา */
    display: inline-block;
}

/* บนมือถือ ให้แสดงเต็ม 100% เหมือนเดิม */
@media (max-width: 768px) {
    .aw-content-image img {
        max-width: 100%;
    }
}
/* ============================================= */
/* (FIX V18) Mobile Split Layout (ภาพบน / เนื้อหาล่าง) */
/* วางแทนที่ block @media (max-width: 768px) เดิม */
/* ============================================= */

@media (max-width: 768px) {

    /* 1. โครงสร้างหลัก: เรียงแนวตั้ง (บน-ล่าง) */
    #hero-v6 {
        display: flex;
        flex-direction: column; /* เรียงลงมา */
        min-height: auto;
        padding: 0; 
        
        /* (สำคัญ) ลบภาพพื้นหลังเดิม แล้วใส่สีน้ำเงินเข้มแทน */
        background-image: none !important; 
        background-color: var(--color-dark); 
    }

    /* 2. ส่วน "รูปภาพ" (อยู่ด้านบนสุด) */
    #hero-v6::before {
        content: '';
        display: block;
        width: 100%;
        height: 350px; /* ความสูงของภาพ */
        
        /* ดึงภาพมาแสดงตรงนี้ (แบบ V16) */
        background-image: url('/img/banner/hero-waiman.avif');
        background-size: cover;
        background-position: center 15%; /* จัดให้เห็นคนและกล่องชัดเจน */
        background-repeat: no-repeat;
        
        flex-shrink: 0;
    }

    /* 3. ส่วน "เนื้อหา" (อยู่ด้านล่าง) */
    .hero-content-overlay {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 2rem 1.5rem 3rem 1.5rem; /* เว้นขอบให้น่าอ่าน */
        
        /* ดึงกล่องขึ้นไปทับรูปนิดหน่อย ให้ดูเชื่อมกัน (Optional) */
        margin-top: -20px; 
        border-radius: 20px 20px 0 0;
        background-color: var(--color-dark); /* สีพื้นหลังเดียวกับ Hero */
        
        position: relative;
        z-index: 5;
    }

    .hero-text-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        text-align: left !important;
        align-items: flex-start !important;
        background: transparent; /* ไม่ต้องมีพื้นหลังซ้อน */
        box-shadow: none;
    }

    /* --- ส่วนบน (Slogan, H1, H2) --- */
    #hero-v6 .hero-top-slogan {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-bottom: 0.5rem;
    }
    
    #hero-v6 h1 { 
        font-size: 2.2rem; 
        line-height: 1.1;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }
    
    /* แยก H2 กับ Badges ออกจากกัน */
    .hero-slogan-cluster {
        flex-direction: column; /* เรียง H2 ไว้บน Badges */
        align-items: flex-start;
        gap: 1.5rem; /* (FIX) เพิ่มระยะห่างระหว่าง ส่วนบน กับ ส่วนล่าง */
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    #hero-v6 h2 { 
        font-size: 1.6rem; 
        line-height: 1.3;
        margin-bottom: 0;
    }

    /* --- ส่วนล่าง (Badges, Desc, Buttons) --- */
    .hero-badges {
        flex-direction: row; /* Badges เรียงแนวนอน (ถ้าพอ) */
        flex-wrap: wrap;
        gap: 0.8rem;
    }
    .badge-delivery-time, .badge-price {
        font-size: 1rem;
        padding: 0.6rem 1rem;
        /* ปรับให้ Badge ดูเด่นขึ้นบนพื้นสีเข้ม */
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    #hero-v6 p {
        font-size: 1rem;
        color: #e0e7ff; /* สีขาวอมฟ้า อ่านง่าย */
        line-height: 1.6;
        margin-top: 0;
        margin-bottom: 2rem;
    }

    /* ปุ่ม CTA (เต็มจอ) */
    .hero-cta {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }
    .hero-cta .cta-main, 
    .hero-cta .cta-secondary {
        width: 100%;
        text-align: center;
        padding: 1rem;
        font-size: 1.1rem;
    }

    /* Trust Bar & Spacing (คงเดิม) */
    #trust-bar {
        margin-top: 0;
        padding: 1.5rem 1rem;
        background-color: white;
        box-shadow: none;
        border-bottom: 1px solid #eee;
    }
    #trust-bar ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
        padding: 0;
        flex-direction: row;
    }
    #trust-bar ul li {
        font-size: 0.85rem;
        background-color: #f8f9fa;
        padding: 1rem 0.5rem;
        border-radius: 8px;
        justify-content: center;
        text-align: center;
        width: auto;
        min-height: 80px;
    }
    #usps {
        padding-top: 2rem;
    }
}


/* ============================================= */
/* (NEW V55) USA Page Specific Styles          */
/* ============================================= */

/* 1. USA Hero */
#hero-v14 { background-color: #f8f9fa; padding: var(--spacing-xl) var(--spacing-sm); padding-bottom: 6rem; }
.hero-v14-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); max-width: 1200px; margin: 0 auto; align-items: center; }
.hero-v14-text h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 800; color: var(--color-dark); line-height: 1.2; margin-bottom: var(--spacing-sm); }
.hero-v14-text h2 { font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 500; color: var(--color-text); line-height: 1.6; margin-bottom: var(--spacing-md); }
.hero-v14-text .hero-cta { display: flex; gap: var(--spacing-sm); }
.hero-v14-graphic { text-align: right; }
.hero-v14-graphic img { max-width: 100%; height: auto; border-radius: var(--border-radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* 2. Quote Form */
#quote-form { background-color: var(--color-light-gray); padding-top: 6rem; }
.quote-form-container { background-color: white; padding: var(--spacing-lg) var(--spacing-md); border-radius: var(--border-radius-md); box-shadow: 0 10px 30px rgba(0,0,0,0.1); max-width: 800px; margin: 0 auto; text-align: left; }
.quote-form-container .form-group { display: flex; flex-direction: column; gap: var(--spacing-xs); margin-bottom: var(--spacing-sm); }
.quote-form-container label { font-weight: 500; font-size: 0.9rem; color: var(--color-dark); }
.quote-form-container input, .quote-form-container select { width: 100%; padding: 0.8rem 1rem; border: 1px solid #ccc; border-radius: var(--border-radius-sm); font-size: 1rem; font-family: 'Kanit', sans-serif; }
.quote-form-container input[disabled] { background-color: #eee; }

/* 3. Trust Bar (Overlay) */
#trust-bar-v14 { background-color: transparent; padding: 0 var(--spacing-sm); margin-top: -4rem; position: relative; z-index: 10; box-shadow: none; }
.trust-bar-v14-grid { background-color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: var(--border-radius-lg); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); max-width: 1200px; margin: 0 auto; text-align: center; padding: var(--spacing-md); }

/* 4. Rate Table */
.rate-table-container { max-width: 800px; margin: 0 auto; border-radius: var(--border-radius-md); box-shadow: 0 5px 20px rgba(0,0,0,0.08); overflow: hidden; text-align: left; border: 1px solid var(--color-light-gray); }
.rate-table-header { display: grid; grid-template-columns: 2fr 1.5fr 1.2fr; background-color: #f8f9fa; padding: var(--spacing-md); font-weight: 600; color: #555; border-bottom: 1px solid #eee; }
.rate-table-row { display: grid; grid-template-columns: 2fr 1.5fr 1.2fr; padding: var(--spacing-md); background: white; align-items: center; font-size: 1.1rem; }
.rate-table-row .col-service strong { color: var(--color-primary); font-size: 1.2rem; }
.rate-table-row .col-price { background-color: var(--color-dark); color: white; padding: 1rem; border-radius: var(--border-radius-sm); text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

.express-delivery-badge { background-color: var(--color-primary); color: white; display: inline-flex; align-items: center; padding: 0.5rem 1.2rem; border-radius: 50px; font-weight: 500; font-size: 1rem; margin-top: var(--spacing-xs); box-shadow: 0 4px 10px rgba(0,0,0,0.1); gap: 0.5rem; }
.express-delivery-badge span { font-weight: 600; }

/* 5. Grids (Keywords, States, Steps) */
.seo-kw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.seo-kw-item { background: white; padding: 1.2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); font-weight: 600; color: var(--color-dark); border: 1px solid #f0f0f0; transition: transform 0.2s; }
.seo-kw-item:hover { transform: translateY(-5px); border-color: var(--color-primary); }

.states-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; max-width: 1200px; margin: 0 auto; text-align: left; }
.state-item { background-color: #f8f9fa; padding: 0.8rem 1rem; border-radius: 8px; font-size: 0.95rem; color: #555; border: 1px solid #eee; }
.state-item:hover { border-color: var(--color-accent); color: var(--color-accent); }

.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); max-width: 1200px; margin: 0 auto; }
.step-card { background-color: white; padding: var(--spacing-lg); border-radius: var(--border-radius-md); box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; position: relative; }
.step-number { background-color: var(--color-accent); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; margin: 0 auto var(--spacing-sm) auto; }

/* Responsive */
@media (max-width: 768px) {
    #hero-v14 { padding-bottom: 5rem; }
    .hero-v14-grid { grid-template-columns: 1fr; }
    .hero-v14-graphic { grid-row: 1; margin-bottom: var(--spacing-md); }
    #quote-form { padding-top: 5rem; }
    #trust-bar-v14 { margin-top: -3rem; }
    .trust-bar-v14-grid { grid-template-columns: 1fr 1fr; }
    .rate-table-header { display: none; } 
    .rate-table-row { grid-template-columns: 1fr; gap: var(--spacing-sm); padding: var(--spacing-md); }
    .rate-table-row .col-service::before { content: 'บริการ (Service)'; display: block; font-size: 0.8rem; color: #555; } 
    .rate-table-row .col-time::before { content: 'ระยะเวลาจัดส่ง (Delivery time)'; display: block; font-size: 0.8rem; color: #555; }
    .rate-table-row .col-price { margin-top: var(--spacing-sm); font-size: 1.3rem; }
    .seo-kw-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================= */
/* (NEW V61) International Shipping Pillar Page Styles */
/* ============================================= */

/* 1. Country Grid (ธงชาติ + ชื่อประเทศ) */
.country-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* ปรับขนาดให้พอดี */
    gap: 1rem;
    margin-top: 2rem;
}
.country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 1.5rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: transform 0.2s, border-color 0.2s;
}
.country-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.country-flag {
    width: 48px;
    height: 48px;
    object-fit: contain; /* หรือ cover แล้วแต่รูปธง */
    margin-bottom: 0.8rem;
    border-radius: 50%; /* ธงกลม */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.country-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
}

/* 2. Comparison Table (ตารางเปรียบเทียบ) */
.shipping-table-wrapper {
    overflow-x: auto; /* เลื่อนแนวนอนได้บนมือถือ */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    background: white;
}
.shipping-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* บังคับความกว้างขั้นต่ำให้ไม่บีบเกินไป */
}
.shipping-table th, .shipping-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.shipping-table th {
    background-color: #f8f9fa;
    color: var(--color-dark);
    font-weight: 700;
}
.shipping-table tr:last-child td {
    border-bottom: none;
}
.shipping-table td strong {
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .country-index-grid {
        grid-template-columns: repeat(3, 1fr); /* มือถือ 3 คอลัมน์ */
        gap: 0.5rem;
    }
    .country-card {
        padding: 1rem 0.5rem;
    }
    .country-flag {
        width: 36px;
        height: 36px;
    }
    .country-name {
        font-size: 0.85rem;
        text-align: center;
    }
}

/* ============================================= */
/* (NEW V62) International Shipping Pillar Styles */
/* ============================================= */

/* 1. Country Grid (ธงชาติ + ชื่อประเทศ) */
.country-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 1rem;
    margin-top: 2rem;
}
.country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 1.5rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: transform 0.2s, border-color 0.2s;
}
.country-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.country-flag {
    width: 48px;
    height: 48px;
    object-fit: contain; 
    margin-bottom: 0.8rem;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.country-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    text-align: center;
}

/* 2. Comparison Table (ตารางเปรียบเทียบ) */
.shipping-table-wrapper {
    overflow-x: auto; /* เลื่อนแนวนอนได้บนมือถือ */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    background: white;
    margin-top: 2rem;
    border: 1px solid #eee;
}
.shipping-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* บังคับความกว้างขั้นต่ำให้ไม่บีบเกินไป */
}
.shipping-table th, .shipping-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.shipping-table th {
    background-color: #f8f9fa;
    color: var(--color-dark);
    font-weight: 700;
}
.shipping-table tr:last-child td {
    border-bottom: none;
}
.shipping-table td strong {
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .country-index-grid {
        grid-template-columns: repeat(3, 1fr); /* มือถือ 3 คอลัมน์ */
        gap: 0.5rem;
    }
    .country-card {
        padding: 1rem 0.5rem;
    }
    .country-flag {
        width: 36px;
        height: 36px;
    }
    .country-name {
        font-size: 0.85rem;
    }
}

/* ========================================= */
/* MOBILE REDESIGN (V18 - Fixed Height for SE) */
/* ========================================= */

/* 1. Top Bar */
.top-notification-bar {
    background-color: #FF6000;
    color: white;
    text-align: center;
    font-size: 0.8rem; /* ลดขนาดนิดนึง */
    padding: 6px 10px;
    font-weight: 500;
    width: 100%;
    position: relative;
    z-index: 20;
}

/* 2. Hero Section (ลดความสูงลง) */
#mobile-design-hero {
    position: relative;
    width: 100%;
    background-image: url('/img/banner/hero-waiman.avif'); 
    background-size: cover;
    /* ขยับจุดโฟกัสรูปให้เห็นคนชัดแม้พื้นที่น้อยลง */
    background-position: center 15%; 
    
    /* (KEY FIX) ความสูงที่พอดีกับ iPhone SE (667px) */
    /* หัก Top Bar, Nav Bar ออก จะเหลือพื้นที่โชว์ Blue Bar ด้านล่าง */
    height: 420px; 
    
    display: flex;
    align-items: flex-end;
    padding-bottom: 20px;
}

.hero-container {
    width: 100%;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* ลดช่องว่าง */
}

/* Badges */
.hero-badges-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: auto; /* ดันขึ้นบน */
    padding-top: 30px; 
}

.badge-orange-pill {
    background-color: #FF6000;
    color: white;
    font-size: 1.5rem; /* ลดขนาดนิดนึง */
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: inline-block;
}

.badge-white-bubble {
    background-color: white;
    color: #FF6000;
    font-size: 1.6rem; /* ลดขนาดนิดนึง */
    font-weight: 800;
    padding: 6px 18px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.badge-white-bubble small {
    font-size: 0.85rem;
    color: #FF6000;
    font-weight: 600;
}
.badge-white-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 25px;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: white transparent;
    display: block;
    width: 0;
}

/* Buttons */
.hero-buttons-container {
    display: flex;
    gap: 8px;
    width: 100%;
}

.btn-hero-orange, .btn-hero-transparent {
    text-align: center;
    padding: 10px 5px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.85rem; /* ลดขนาดฟอนต์ปุ่ม */
    white-space: nowrap;
}

.btn-hero-orange {
    flex: 1.5;
    background-color: #FF6000;
    color: white;
    font-weight: 600;
    border: 2px solid #FF6000;
}

.btn-hero-transparent {
    flex: 1;
    background-color: rgba(0,0,0,0.4);
    color: white;
    font-weight: 500;
    border: 1px solid white;
}

/* 3. Blue Bar (ปรับให้กระชับขึ้น) */
.blue-value-prop {
    background-color: #008CFF;
    color: white;
    text-align: center;
    /* ลด Padding บนล่าง */
    padding: 25px 15px 60px 15px; 
}
.blue-value-prop h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.25;
}
.blue-value-prop p {
    font-size: 0.9rem;
    font-weight: 300;
    opacity: 0.95;
    line-height: 1.4;
    margin-bottom: 0;
}

/* 4. Trust Card */
.trust-card-section {
    padding: 0 15px;
    margin-top: -40px; /* ดึงขึ้นน้อยลงให้สมดุล */
    position: relative;
    z-index: 10;
}

.trust-card-container {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
}

.trust-item {
    font-size: 0.8rem;
    font-weight: 600;
    color: #001159;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Desktop Hide */
@media (min-width: 769px) {
    .top-notification-bar,
    #mobile-design-hero,
    .blue-value-prop,
    .trust-card-section {
        display: none;
    }
}

/* สไตล์ปุ่มในหน้า USP Card */
    .btn-card-action {
        display: inline-block;
        margin-top: 15px;
        padding: 8px 20px;
        background-color: white;
        color: var(--color-primary); /* สีน้ำเงินแบรนด์ */
        border: 1px solid var(--color-primary);
        border-radius: 50px;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 600;
        transition: all 0.2s;
    }
    .btn-card-action:hover {
        background-color: var(--color-primary);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 124, 236, 0.2);
    }

    /* สไตล์ลิงก์อ่านต่อ (แบบข้อความ) */
    .btn-text-link {
        display: inline-block;
        margin-top: 15px;
        color: var(--color-primary);
        font-weight: 700;
        text-decoration: underline;
        font-size: 0.95rem;
    }
    .btn-text-link:hover {
        color: var(--color-accent); /* เปลี่ยนเป็นสีส้มเมื่อชี้ */
    }

/* ============================================= */
/* (FIXED V3) Mobile Navigation & Lang Switcher  */
/* ============================================= */
@media (max-width: 992px) {
    
    /* 1. แสดงปุ่ม Hamburger */
    .hamburger {
        display: flex;
    }

    /* 2. ตัวกล่องเมนู (Drawer) */
    .nav-menu-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        align-items: center;
        padding: 0;
        
        /* เริ่มต้นซ่อน */
        max-height: 0; 
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }

    /* 3. ตอนเปิดเมนู (.open) */
    .nav-menu-wrapper.open {
        /* 🔥 แก้ไข: เพิ่มความสูงเผื่อไว้เยอะๆ หรือเต็มจอ */
        max-height: 100vh !important; /* ยืดได้สูงสุดเท่าหน้าจอ */
        padding: var(--spacing-md) 0;
        overflow-y: auto; /* ถ้าจอมือถือเล็กมาก ให้เลื่อนนิ้วได้ */
    }

    /* 4. รายการเมนู */
    nav ul {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    nav ul li a {
        display: block;
        padding: 10px;
        font-size: 1.1rem;
    }

    /* 5. กลุ่มปุ่ม (CTA + ภาษา) */
    nav .nav-cta {
        display: flex !important; /* บังคับโชว์ */
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 15px;
        margin-top: 20px;
        padding-bottom: 40px; /* เว้นที่ด้านล่างกันตกขอบ */
        border-top: 1px solid #eee;
        padding-top: 20px;
    }

    /* 6. ปุ่มภาษาในมือถือ */
    .lang-switcher {
        margin-left: 0 !important;
        width: 100%;
        display: flex !important;
        justify-content: center;
        order: -1; /* (Optional) ดันปุ่มภาษาขึ้นไปอยู่บนสุดของกลุ่มปุ่ม (ถ้าต้องการ) */
    }

    .lang-switcher a {
        width: auto;
        padding: 10px 30px !important;
        background-color: #f8f9fa !important;
        border: 1px solid #ddd;
        font-size: 1rem !important;
    }

    /* 7. ปุ่ม CTA ให้เต็มจอ */
    .nav-cta .button-secondary, 
    .nav-cta .button-primary {
        width: 85% !important;
        text-align: center;
    }

    /* Animation Hamburger */
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}