html { scroll-padding-top: 96px; }

/* ============================================================
   CASHLI — "Lavender Pop" theme (lavender, purple & pink + brand green)
   Re-skin of the Warm Sunset design language:
   soft blobs, curved hero, pill buttons, floating cards, Poppins
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --lav-light:  #c9b8f7;   /* light lavender blob */
    --purple:      #7c5cfc;   /* primary */
    --purple-deep: #5b3cf0;
    --lav-pale:   #e7defb;   /* pale lavender */
    --snow:       #f4f0fc;   /* lavender-tinted background */
    --white:      #ffffff;
    --dark:       #17142e;   /* dark navy-purple */
    --gray:       #6b6584;
    --line:       #e7e1f6;
    --pink:       #e87fd9;   /* accent */
    --pink-deep:  #c44fb6;
    --brand-green:      #2ece71;   /* Cashli logo green */
    --brand-green-deep: #1fae5c;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--snow);
    color: var(--dark);
    overflow-x: hidden;
}
:focus-visible { outline: 3px solid var(--brand-green-deep); outline-offset: 3px; border-radius: 8px; }

/* ---------- Header ---------- */
header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(246, 243, 252, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(23, 20, 46, 0.06);
}

nav {
    /* เต็มความกว้างจอ: โลโก้ชิดซ้ายสุด ปุ่มชิดขวาสุด (เหลือ padding กันชนขอบ) */
    padding: 1rem 2.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.logo-img { width: 48px; height: 48px; display: block; filter: drop-shadow(0 4px 10px rgba(46, 206, 113, 0.3)); }

.logo-text { font-size: 1.5rem; font-weight: 700; color: var(--dark); }
.logo-text span { color: var(--brand-green); }

.nav-menu { display: flex; list-style: none; gap: 2rem; }
.nav-menu a {
    color: var(--gray); text-decoration: none;
    font-size: 0.95rem; font-weight: 500; transition: color 0.3s;
}
.nav-menu a:hover { color: var(--brand-green-deep); }

/* ---------- Mobile menu ---------- */
.nav-toggle {
    display: none;
    position: relative;
    width: 46px; height: 46px; flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: var(--dark);
    cursor: pointer;
    transition: transform 0.35s ease, background 0.3s ease;
}
.nav-toggle-line {
    position: absolute; left: 14px;
    width: 18px; height: 2px; border-radius: 2px;
    background: white;
    transition: top 0.3s ease, transform 0.3s ease, opacity 0.2s ease, background 0.3s ease;
}
.nav-toggle-line:nth-child(1) { top: 17px; }
.nav-toggle-line:nth-child(2) { top: 22px; }
.nav-toggle-line:nth-child(3) { top: 27px; }
body.menu-open .nav-toggle { background: rgba(255, 255, 255, 0.12); }
body.menu-open .nav-toggle-line:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.menu-open .nav-toggle-line:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle-line:nth-child(3) { top: 22px; transform: rotate(-45deg); }
body.menu-open .nav-toggle:hover { transform: rotate(90deg); background: var(--brand-green); }
body.menu-open .nav-toggle:hover .nav-toggle-line { background: var(--dark); }

.menu-backdrop {
    position: fixed; inset: 0; z-index: 1040;
    background: rgba(17, 14, 34, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
body.menu-open .menu-backdrop { opacity: 1; visibility: visible; }

/* Drawer: ลิ้นชักความกว้างคงที่ สไลด์จากขวา — หน้าตาเหมือนกันทุกขนาดจอ */
.mobile-menu {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 1050;
    width: min(86vw, 380px);
    background: linear-gradient(160deg, #1f1a3c 0%, var(--dark) 55%, #110e22 100%);
    display: flex; align-items: center; justify-content: flex-start;
    padding: 92px 2rem 2rem;
    overflow-y: auto;
    transform: translateX(102%);
    visibility: hidden;
    box-shadow: -24px 0 60px rgba(10, 8, 22, 0.4);
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0.45s;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { transform: translateX(0); visibility: visible; }
body.menu-open header { z-index: 1060; background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
body.menu-open header .logo-text { color: white; }

.mobile-menu-inner { width: 100%; max-width: 400px; padding: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.mobile-links { list-style: none; display: grid; }
.mobile-links li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mobile-links a {
    display: flex; align-items: center; gap: 1rem;
    padding: clamp(0.55rem, 1.5svh, 0.9rem) 0.2rem;
    font-size: clamp(1.05rem, 4.2vw, 1.25rem); font-weight: 700;
    color: white; text-decoration: none;
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.25s ease;
}
.mobile-links a span { min-width: 1.5rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; color: var(--brand-green); }
.mobile-links a:hover { color: var(--brand-green); }
body.menu-open .mobile-links a { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-links li:nth-child(1) a { transition-delay: 0.05s; }
body.menu-open .mobile-links li:nth-child(2) a { transition-delay: 0.1s; }
body.menu-open .mobile-links li:nth-child(3) a { transition-delay: 0.15s; }
body.menu-open .mobile-links li:nth-child(4) a { transition-delay: 0.2s; }
body.menu-open .mobile-links li:nth-child(5) a { transition-delay: 0.25s; }
body.menu-open .mobile-links li:nth-child(6) a { transition-delay: 0.3s; }
body.menu-open .mobile-links li:nth-child(7) a { transition-delay: 0.35s; }
body.menu-open .mobile-links li:nth-child(8) a { transition-delay: 0.4s; }
.mobile-cta {
    width: 100%; justify-content: center;
    margin-top: clamp(1.1rem, 3svh, 1.8rem);
    background: var(--brand-green); color: var(--dark);
    box-shadow: 0 10px 30px rgba(46, 206, 113, 0.3);
}
.mobile-cta:hover { background: white; color: var(--dark); transform: translateY(-3px); }
.mobile-note {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    margin-top: 0.95rem; font-size: 0.76rem; color: rgba(255, 255, 255, 0.55);
}
.mobile-note i { color: var(--brand-green); }

.btn {
    padding: 0.875rem 2rem;
    border-radius: 50px;
    font-weight: 600; font-size: 0.95rem;
    text-decoration: none; cursor: pointer; border: 0;
    transition: all 0.3s;
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

.btn-primary {
    background: var(--dark);
    color: white;
    box-shadow: 0 8px 25px rgba(23, 20, 46, 0.28);
}
.btn-primary:hover {
    transform: translateY(-3px);
    background: var(--brand-green);
    color: var(--dark);
    box-shadow: 0 12px 35px rgba(46, 206, 113, 0.4);
}

.btn-outline { border: 2px solid var(--dark); color: var(--dark); background: white; }
.btn-outline:hover { background: var(--dark); color: white; transform: translateY(-3px); }

/* ---------- Blobs ---------- */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; z-index: 0; pointer-events: none; }
.blob-1 { width: 300px; height: 300px; background: var(--lav-light); top: 14%; left: 6%; animation: blob 8s infinite; }
.blob-2 { width: 220px; height: 220px; background: var(--lav-pale); bottom: 16%; right: 28%; animation: blob 8s infinite 2s; }

@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -30px) scale(1.1); }
    66%      { transform: translate(-20px, 20px) scale(0.9); }
}

/* ---------- Hero ---------- */
.hero {
    /* สูง "อย่างน้อย" เท่าสัดส่วนภาพ (ภาพยังสเกลตามจอ) แต่ยืดต่อได้เสมอถ้าฟอร์มสูงกว่า — ไม่มีการตัดเนื้อหา */
    min-height: max(calc(100vw * 1115 / 1672), 640px);
    display: flex; align-items: center;
    padding: 130px 2rem 90px;
    position: relative; overflow: hidden;
    background: #f6f9f4;
}

.hero-bg {
    position: absolute; inset: 0;
    background: url("../images/hero-illustration.webp") center bottom / cover no-repeat;
    z-index: 0;
}
.hero > .blob { display: none; }

.hero-container {
    width: 100%;                         /* ลูก flex ต้องสั่งยืดเอง ไม่งั้นหดตามเนื้อหา (ต้นเหตุที่เห็นเป็น ~1300) */
    max-width: 1600px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem; align-items: center;
    position: relative; z-index: 2;
}

.hero-content { max-width: min(640px, 56vw - 256px); margin-left: clamp(0px, (100vw - 1347px) / 2, 158px); }

.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: white; border-radius: 50px;
    font-size: 0.85rem; color: var(--brand-green-deep); font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.hero h1 {
    font-size: clamp(2rem, 5vw - 25.6px, 3.4rem);   /* ย่อไว: จอแคบลงหัวข้อหลีกทางทันที */
    font-weight: 800;
    line-height: 1.15; margin-bottom: 1.5rem; color: var(--dark);
}
.hero h1 .grad {
    background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand-green-deep);
}

.hero-sub {
    font-size: clamp(0.95rem, 0.6vw + 8.3px, 1.12rem);
    color: var(--gray);
    line-height: 1.8; margin-bottom: 2rem; max-width: 480px;
}

.hero-cta { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.hero-note { font-size: 0.85rem; color: var(--gray); margin-bottom: 2.6rem; }
.hero-note i { color: var(--brand-green); margin-right: 0.4rem; }

.hero-stats { display: flex; gap: clamp(1.1rem, 5.5vw - 48px, 2.5rem); flex-wrap: wrap; }
.stat { display: flex; align-items: center; gap: clamp(0.5rem, 1vw - 4px, 0.75rem); }
.stat-icon {
    width: clamp(38px, 2.5vw + 8px, 48px); height: clamp(38px, 2.5vw + 8px, 48px);
    background: white; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(0.92rem, 0.85vw + 4.8px, 1.15rem); color: var(--brand-green-deep);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.stat h4 { font-size: clamp(1.1rem, 1vw + 5.6px, 1.35rem); font-weight: 700; color: var(--dark); line-height: 1; }
.stat p  { font-size: clamp(0.7rem, 0.4vw + 6.4px, 0.8rem); color: var(--gray); margin: 0; }

/* ----- Hero visual: amount card + floating mini-cards ----- */
.hero-visual { position: relative; }

/* ----- กรอบคลิปบอร์ด (วาดด้วย CSS ให้เข้าโลก illustration) ----- */
.hero-form {
    max-width: 480px;
    margin-left: auto;
    background: #9cc6b7;                              /* บอร์ดทีลพาสเทล */
    border-radius: 26px 23px 27px 24px / 24px 27px 23px 26px;  /* ขอบเบี้ยวแบบวาดมือ */
    padding: 18px 15px 15px;
    position: relative; z-index: 2;
    transform: rotate(0.5deg);
    box-shadow:
        inset 0 0 0 3px rgba(58, 86, 74, 0.08),       /* เส้นสีเข้มจางๆ เหมือนรอยพู่กัน */
        10px 14px 0 rgba(73, 102, 90, 0.13),          /* เงาทึบเยื้องแบบภาพวาด */
        0 26px 55px rgba(23, 20, 46, 0.08);
}
.hf-clip {
    position: absolute; top: -13px; left: 50%;
    transform: translateX(-50%);
    width: 156px; height: 30px;
    background: #7cab9b;
    border-radius: 10px 11px 9px 10px;
    z-index: 3;
    box-shadow: 0 3px 0 rgba(58, 86, 74, 0.16);
}
.hf-clip::before {
    content: '';
    position: absolute; top: -21px; left: 50%;
    transform: translateX(-50%);
    width: 58px; height: 30px;
    background: #7cab9b;
    border-radius: 13px 13px 4px 4px;
}
.hf-clip::after {
    content: '';
    position: absolute; top: -12px; left: 50%;
    transform: translateX(-50%);
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #d9ebe1;                              /* รูหนีบโทนสีผนัง */
}
.hf-spark, .hf-spark::before {
    position: absolute;
    width: 4px; height: 17px; border-radius: 3px;
    background: #7cab9b;
}
.hf-spark { top: -32px; left: 6px; transform: rotate(-30deg); }
.hf-spark::before { content: ''; left: 16px; top: 0; transform: rotate(52deg); }
.hf-paper {
    background: #ffffff;                              /* กระดาษขาว — เข้าชุดกับพื้นฟอร์ม widget */
    border-radius: 17px 15px 18px 16px / 15px 18px 16px 17px;
    padding: 2.1rem 1.8rem 1.7rem;
    box-shadow: inset 0 0 0 1px rgba(23, 20, 46, 0.05);
}
.hf-eyebrow {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--brand-green-deep); margin-bottom: 0.55rem;
}
.hf-title { font-size: 1.45rem; font-weight: 800; color: var(--dark); margin-bottom: 1.3rem; line-height: 1.3; text-wrap: balance; }
#_lg_form_ {
    min-height: 380px;                    /* กันกระดาษยุบระหว่างรอ widget โหลด */
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
}
.hf-foot {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    font-size: 0.74rem; color: var(--gray); margin-top: 1.05rem; text-align: center;
}
.hf-foot i { color: var(--brand-green-deep); }

.hero-figure {
    position: absolute;
    bottom: -70px;                      /* ช่วงขาจมหายเข้าขอบล่าง */
    /* ผูกกับขอบขวาคอนเทนเนอร์ตรงๆ: max(32px, (100vw-1600px)/2) = ระยะขอบคอนเทนเนอร์จากขอบจอ
       ฟอร์มกว้าง 480 ตรึงขอบขวาคอนเทนเนอร์เสมอ -> +455px = ขอบขวาเธอเกยกรอบฟอร์มคงที่ ~25px ทุกจอ */
    right: calc(max(32px, (100vw - 1600px) / 2) + 455px);
    height: clamp(700px, 15vw + 600px, 840px);   /* หดช้ามาก: 840 -> ~750 ที่จอแคบสุด */
    z-index: 3;                         /* อยู่เหนือฟอร์ม — แขนทับคลิปบอร์ด */
    pointer-events: none;               /* คลิกทะลุผ่าน ไม่บังการกรอกฟอร์ม */
}
.hero-figure img { height: 100%; width: auto; display: block; }

input[type=range] {
    width: 100%; margin: 1rem 0 0.5rem;
    appearance: none; -webkit-appearance: none;
    height: 8px; border-radius: 99px;
    background: linear-gradient(90deg, var(--brand-green) var(--fill, 50%), #e9e3f8 var(--fill, 50%));
    cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: white; border: 7px solid var(--brand-green);
    box-shadow: 0 4px 12px rgba(23, 20, 46, 0.25);
}
input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: white; border: 7px solid var(--brand-green);
    box-shadow: 0 4px 12px rgba(23, 20, 46, 0.25);
}
.range-ends {
    display: flex; justify-content: space-between;
    font-size: 0.82rem; font-weight: 600; color: var(--gray);
    margin-bottom: 1.4rem;
}

/* ---------- Sections (shared) ---------- */
section { position: relative; }
.section-pad { padding: 7rem 2rem; }
.container { max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; }

.section-header { text-align: center; margin-bottom: 4rem; }
.section-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    background: linear-gradient(135deg, rgba(46, 206, 113, 0.14), rgba(31, 174, 92, 0.09));
    border-radius: 50px;
    font-size: 0.85rem; color: var(--brand-green-deep); font-weight: 600;
    margin-bottom: 1rem;
}
.section-header h2 {
    font-size: 2.6rem; font-weight: 800; color: var(--dark);
    margin: 0 auto 1rem; max-width: 860px;
    line-height: 1.25; text-wrap: balance;
}
.section-header p  { color: var(--gray); font-size: 1.08rem; max-width: 560px; margin: 0 auto; line-height: 1.8; }

/* ---------- How it works ---------- */
.steps-section { background: white; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.soft-card {
    background: var(--snow);
    border-radius: 24px;
    padding: 2.2rem 2rem;
    transition: all 0.4s;
    text-align: center;
}
.soft-card:hover {
    background: white;
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(23, 20, 46, 0.1);
}
.soft-icon {
    width: 70px; height: 70px;
    background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: white;
    margin: 0 auto 1.25rem;
}
.soft-card h3 { font-size: 1.3rem; font-weight: 700; color: var(--dark); margin-bottom: 0.75rem; }
.soft-card p  { color: var(--gray); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.1rem; }
.soft-tag {
    display: inline-block;
    font-size: 0.78rem; font-weight: 600; color: var(--brand-green-deep);
    background: rgba(46, 206, 113, 0.13);
    padding: 0.35rem 0.95rem; border-radius: 50px;
}

/* ---------- Amount tiers ---------- */
.tiers-section { background: var(--snow); }
.tier-rows { display: grid; gap: 1.8rem; }
.tier-row {
    display: grid; grid-template-columns: 1fr 1fr;
    border-radius: 28px; overflow: hidden;
    background: white;
    box-shadow: 0 20px 50px rgba(23, 20, 46, 0.08);
}
.tier-text {
    padding: 3.4rem 3.2rem;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
}
.tier-text.dark { background: var(--dark); }
.tier-chip {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 0.42rem 1rem; border-radius: 50px; margin-bottom: 1.4rem;
    background: rgba(46, 206, 113, 0.14); color: var(--brand-green-deep);
}
.tier-text.dark .tier-chip { background: rgba(255, 255, 255, 0.12); color: var(--brand-green); }
.tier-text h3 { font-size: 2.05rem; font-weight: 800; line-height: 1.25; color: var(--dark); margin-bottom: 1rem; text-wrap: balance; }
.tier-text.dark h3 { color: white; }
.tier-text > p { font-size: 0.95rem; color: var(--gray); line-height: 1.8; margin-bottom: 1.6rem; max-width: 470px; }
.tier-text.dark > p { color: rgba(255, 255, 255, 0.7); }
.tier-list { list-style: none; display: grid; gap: 0.7rem; margin-bottom: 2.1rem; }
.tier-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.92rem; color: var(--gray); line-height: 1.55; }
.tier-text.dark .tier-list li { color: rgba(255, 255, 255, 0.78); }
.tier-list li i {
    width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    background: rgba(46, 206, 113, 0.16); color: var(--brand-green-deep);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.58rem;
}
.tier-text.dark .tier-list li i { background: rgba(46, 206, 113, 0.25); color: var(--brand-green); }
.btn-outline-light { border: 2px solid rgba(255, 255, 255, 0.8); color: white; background: transparent; }
.btn-outline-light:hover { background: white; color: var(--dark); border-color: white; transform: translateY(-3px); }
.tier-art { position: relative; min-height: 360px; }
.tier-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Comparison ---------- */
.compare-section { background: white; }
.swipe-hint {
    display: none;
    align-items: center; justify-content: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 600; color: var(--gray);
    margin: -2.6rem 0 1.4rem;
}
.swipe-hint i { color: var(--brand-green-deep); }
.compare-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(23, 20, 46, 0.08);
    background: white;
}
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 680px; background: white; }
th, td { padding: 1.05rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line); }
thead th {
    background: white;
    color: var(--gray); font-weight: 700;
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em;
    border-bottom: 2px solid var(--line);
    vertical-align: bottom;
    padding-top: 1.6rem;                      /* ที่ว่างด้านบนให้บัลลังก์ดูยกสูง */
}
thead th:first-child { color: var(--dark); font-size: 0.95rem; text-transform: none; letter-spacing: 0; }

/* ----- บัลลังก์ Cashli: คอลัมน์ยกพื้น ----- */
thead th.col-hero {
    background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
    color: white;
    font-size: 1rem; text-transform: none; letter-spacing: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 -8px 22px rgba(31, 174, 92, 0.28);
}
thead th.col-hero i { margin-right: 0.45rem; font-size: 0.85rem; }
td.col-hero {
    background: #f1fbf4;
    box-shadow: inset 2px 0 0 #cdeed8, inset -2px 0 0 #cdeed8;
}
tbody tr:last-child td.col-hero {
    box-shadow: inset 2px 0 0 #cdeed8, inset -2px 0 0 #cdeed8, inset 0 -3px 0 #cdeed8;
    border-radius: 0 0 14px 14px;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfcfa; }
tbody tr:hover td.col-hero { background: #eaf8ef; }
td:first-child { font-weight: 600; color: var(--dark); }

/* ----- ไอคอน ✓ / ✗ ให้กวาดตารู้ผลทันที ----- */
.yes, .no { white-space: nowrap; }
.yes::before, .no::before {
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-right: 0.5rem; font-size: 0.9em;
}
.yes::before { content: "\f058"; color: var(--brand-green); }   /* circle-check */
.no::before  { content: "\f057"; color: #d97e5e; }              /* circle-xmark */
.yes { color: var(--brand-green-deep); font-weight: 700; }
.no  { color: #c05b40; font-weight: 600; }
.tbl-note { font-size: 0.72rem; color: var(--gray); margin-top: 1.1rem; text-align: center; }

/* ---------- Use cases ---------- */
.uses-section { background: white; }
.uses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.use-card {
    background: var(--snow); border-radius: 20px; padding: 1.6rem;
    display: flex; gap: 1rem; align-items: flex-start;
    transition: all 0.35s;
}
.use-card:hover { background: white; transform: translateY(-6px); box-shadow: 0 18px 40px rgba(23, 20, 46, 0.09); }
.use-icon {
    width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(46,206,113,0.14), rgba(31,174,92,0.1));
    color: var(--brand-green-deep); display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.use-card b { display: block; color: var(--dark); font-size: 0.98rem; margin-bottom: 0.2rem; }
.use-card span { font-size: 0.86rem; color: var(--gray); line-height: 1.6; }

/* ---------- Trust / E-E-A-T ---------- */
.trust-section { background: var(--snow); }
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.pillar {
    background: white;
    border-radius: 24px; padding: 2.2rem 2rem;
    box-shadow: 0 6px 20px rgba(23, 20, 46, 0.04);
    transition: all 0.4s;
}
.pillar:hover { box-shadow: 0 25px 50px rgba(23, 20, 46, 0.09); transform: translateY(-8px); }
.pillar .soft-icon { margin: 0 0 1.2rem; width: 60px; height: 60px; font-size: 1.3rem; }
.pillar h3 { font-size: 1.25rem; font-weight: 700; color: var(--dark); margin-bottom: 0.7rem; }
.pillar p  { color: var(--gray); font-size: 0.93rem; line-height: 1.75; }

.editorial {
    margin: 2.6rem auto 0;
    max-width: 860px;
    background: linear-gradient(135deg, rgba(46,206,113,0.12), rgba(31,174,92,0.06));
    border-radius: 20px;
    padding: 1.5rem 1.9rem;
    font-size: 0.9rem; color: var(--gray); line-height: 1.75;
}
.editorial b { color: var(--dark); }

/* ---------- Eligibility ---------- */
.elig-section { background: white; }
.elig-grid {
    display: grid; grid-template-columns: 0.95fr 1.05fr;
    gap: 4rem; align-items: center;
}
.check-list { list-style: none; display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.check-list li { display: flex; gap: 0.95rem; align-items: flex-start; }
.check-ic {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
}
.check-list b { color: var(--dark); font-size: 1rem; }
.check-list span { display: block; font-size: 0.88rem; color: var(--gray); line-height: 1.6; }

.elig-art img {
    width: 100%; height: auto; display: block;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(23, 20, 46, 0.12);
}
.elig-note { font-size: 0.93rem; color: var(--gray); line-height: 1.75; margin: 1.7rem 0 1.6rem; max-width: 540px; }
.elig-note b { color: var(--dark); }

.elig-section .section-header { text-align: left; margin-bottom: 0.6rem; }
.elig-section .section-header p { margin: 0; }
.elig-lede { color: var(--gray); font-size: 1.05rem; line-height: 1.8; max-width: 560px; }

/* ---------- Calculator ---------- */
.calc-section {
    background: linear-gradient(160deg, #1f1a3c 0%, var(--dark) 55%, #110e22 100%);
    position: relative; overflow: hidden;
}
.calc-section .blob { opacity: 0.35; }
.calc-section .blob-1 { background: #4a3d8f; }
.calc-section .section-badge {
    background: rgba(46, 206, 113, 0.16);
    color: var(--brand-green);
}
.calc-section .section-header h2 { color: white; }
.calc-section .section-header p { color: rgba(255, 255, 255, 0.7); }
.calc-copy h3 { font-size: 1.35rem; font-weight: 700; color: white; margin-bottom: 0.8rem; }
.calc-body { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.85; max-width: 540px; }
.calc-copy .check-list { margin-top: 1.7rem; }
.calc-copy .check-list b { color: white; }
.calc-copy .check-list span { color: rgba(255, 255, 255, 0.62); }
.calc-grid {
    display: grid; grid-template-columns: 1fr 0.92fr;
    gap: 4.5rem; align-items: center;
    max-width: 1100px; margin: 0 auto;
}
.calc-card {
    background: white;
    border: none;
    border-radius: 26px;
    padding: 2.2rem 2rem;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
    width: 100%; max-width: 430px;
    margin-left: auto;
}
.calc-eyebrow {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--brand-green-deep); margin-bottom: 1.2rem;
}
.calc-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--gray); }
.calc-amount {
    font-size: 2.6rem; font-weight: 800; color: var(--dark);
    line-height: 1.1; margin: 0.15rem 0 0.3rem;
    font-variant-numeric: tabular-nums;
}
.calc-card input[type=range] { margin: 0.3rem 0 0.4rem; }
.calc-card .range-ends { margin-bottom: 1.5rem; }

.calc-plan { margin-bottom: 1.5rem; }
.calc-seg {
    display: flex; gap: 4px;
    background: var(--snow);
    border-radius: 50px; padding: 4px;
    margin-top: 0.55rem;
}
.calc-seg button {
    flex: 1; border: 0; background: transparent;
    border-radius: 50px; padding: 0.6rem 0.2rem;
    font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--gray);
    cursor: pointer; transition: all 0.25s;
}
.calc-seg button:hover { color: var(--brand-green-deep); }
.calc-seg button.active {
    background: white; color: var(--dark);
    box-shadow: 0 3px 10px rgba(23, 20, 46, 0.12);
}

.calc-summary {
    background: linear-gradient(160deg, #251f47 0%, #15122a 100%);
    color: white; border-radius: 18px;
    padding: 1.2rem 1.3rem;
}
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.28rem 0; font-size: 0.88rem; }
.calc-row span:first-child { opacity: 0.85; }
.calc-row b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row.total { border-top: 1px solid rgba(255, 255, 255, 0.3); margin-top: 0.5rem; padding-top: 0.75rem; }
.calc-row.total b { font-size: 1.5rem; color: var(--brand-green); }

.calc-card .btn { width: 100%; justify-content: center; margin-top: 1.4rem; }
.calc-foot {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-size: 0.78rem; color: var(--brand-green-deep); font-weight: 600; margin-top: 1rem;
}
.calc-disclaimer { font-size: 0.68rem; color: var(--gray); line-height: 1.6; margin-top: 0.7rem; text-align: center; }

/* ---------- Reviews (Trustpilot style) ---------- */
.reviews-section { background: white; overflow: hidden; }

.tp-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 1.5rem; flex-wrap: wrap;
    margin: -1.8rem auto 3.2rem;
    background: white;
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 1rem 2.2rem;
    width: fit-content;
    box-shadow: 0 8px 25px rgba(23, 20, 46, 0.06);
}
.tp-logo { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 1.3rem; color: var(--dark); letter-spacing: -0.01em; }
.tp-logo i { color: #00b67a; font-size: 1.35rem; }

.tp-stars { display: inline-flex; gap: 4px; }
.tp-stars span {
    width: 30px; height: 30px;
    background: #00b67a;
    display: flex; align-items: center; justify-content: center;
}
.tp-stars span i { color: #fff; font-size: 0.85rem; }
.tp-stars span.part { background: linear-gradient(90deg, #00b67a 80%, #dcdce6 80%); }
.tp-stars span.off  { background: #dcdce6; }
.tp-score { font-size: 0.93rem; color: var(--gray); font-weight: 500; }
.tp-score b { color: var(--dark); font-weight: 700; }

.tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.tp-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.8rem 1.7rem;
    box-shadow: 0 6px 20px rgba(23, 20, 46, 0.05);
    display: flex; flex-direction: column; gap: 0.85rem;
    transition: all 0.35s;
}
.tp-card:hover { transform: translateY(-6px); box-shadow: 0 22px 45px rgba(23, 20, 46, 0.09); }
.tp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.tp-card .tp-stars { gap: 3px; }
.tp-card .tp-stars span { width: 22px; height: 22px; }
.tp-card .tp-stars span i { font-size: 0.66rem; }
.tp-verified { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--gray); font-weight: 500; white-space: nowrap; }
.tp-verified i { color: #00b67a; font-size: 0.85rem; }
.tp-card h3 { font-size: 1.02rem; font-weight: 700; color: var(--dark); line-height: 1.45; }
.tp-card > p { font-size: 0.88rem; color: var(--gray); line-height: 1.7; flex-grow: 1; }
.tp-user { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.05rem; border-top: 1px solid var(--line); }
.tp-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    color: white; font-weight: 700; font-size: 0.88rem;
    display: flex; align-items: center; justify-content: center;
}
.tp-user b { display: block; font-size: 0.89rem; color: var(--dark); }
.tp-user span { font-size: 0.76rem; color: var(--gray); }
.tp-note { text-align: center; margin-top: 2.6rem; font-size: 0.8rem; color: var(--gray); max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.7; }

/* ---------- Pros & Cons ---------- */
.proscons-section { background: var(--snow); }
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.pc-card {
    border-radius: 24px;
    padding: 2.2rem 2rem;
    transition: all 0.4s;
}
.pc-card:hover { transform: translateY(-8px); }
.pc-pros {
    background: linear-gradient(180deg, rgba(46, 206, 113, 0.1), rgba(46, 206, 113, 0.03)), white;
    border: 1.5px solid rgba(46, 206, 113, 0.3);
}
.pc-pros:hover { box-shadow: 0 25px 50px rgba(46, 206, 113, 0.2); }
.pc-cons {
    background: linear-gradient(180deg, rgba(217, 154, 43, 0.09), rgba(217, 154, 43, 0.03)), white;
    border: 1.5px solid rgba(217, 154, 43, 0.25);
}
.pc-cons:hover { box-shadow: 0 25px 50px rgba(217, 154, 43, 0.16); }
.pc-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.5rem; }
.pc-head .soft-icon { margin: 0; width: 54px; height: 54px; font-size: 1.2rem; }
.pc-cons .soft-icon { background: linear-gradient(135deg, #e0a93f, #c98a1f); }
.pc-head h3 { font-size: 1.35rem; font-weight: 700; color: var(--dark); }
.pc-list { list-style: none; display: grid; gap: 1rem; }
.pc-list li { display: flex; gap: 0.8rem; align-items: flex-start; }
.pc-list i { margin-top: 0.28rem; flex-shrink: 0; font-size: 0.9rem; }
.pc-pros .pc-list i { color: var(--brand-green-deep); }
.pc-cons .pc-list i { color: #c9881d; }
.pc-list b { color: var(--dark); font-size: 0.97rem; }
.pc-list span { display: block; font-size: 0.87rem; color: var(--gray); line-height: 1.65; }
.pc-bottom {
    margin-top: 2rem;
    background: white;
    box-shadow: 0 6px 20px rgba(23, 20, 46, 0.04);
    border-radius: 20px;
    padding: 1.6rem 2rem;
    display: flex; gap: 1.1rem; align-items: flex-start;
}
.pc-bottom .soft-icon { margin: 0; width: 48px; height: 48px; font-size: 1.05rem; flex-shrink: 0; }
.pc-bottom b { color: var(--dark); display: block; margin-bottom: 0.25rem; font-size: 1rem; }
.pc-bottom p { font-size: 0.92rem; color: var(--gray); line-height: 1.75; }
@media (max-width: 992px) { .pc-grid { grid-template-columns: 1fr; } }

/* ---------- Blog ---------- */
.blog-section { background: var(--snow); }
.blog-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 1.4rem 1.4rem 1.8rem;
    transition: all 0.4s;
    display: flex; flex-direction: column;
    box-shadow: 0 6px 20px rgba(23, 20, 46, 0.04);
}
.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(23, 20, 46, 0.1);
}
.blog-cover {
    height: 230px;
    border-radius: 23px 23px 0 0;
    margin: -1.4rem -1.4rem 1.3rem;
    position: relative; overflow: hidden;
    background: var(--snow);
}
.blog-cover img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.5s ease;
}
.blog-card:hover .blog-cover img { transform: scale(1.05); }
.blog-meta {
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.blog-tag {
    font-size: 0.74rem; font-weight: 600; color: var(--brand-green-deep);
    background: rgba(46, 206, 113, 0.13);
    padding: 0.3rem 0.85rem; border-radius: 50px;
}
.blog-meta time, .blog-meta .read-time { font-size: 0.78rem; color: var(--gray); }
.blog-card h3 {
    font-size: 1.18rem; font-weight: 700; color: var(--dark);
    line-height: 1.45; margin-bottom: 0.7rem;
}
.blog-card h3 a { color: inherit; text-decoration: none; transition: color 0.3s; }
.blog-card h3 a:hover { color: var(--brand-green-deep); }
.blog-card .excerpt {
    color: var(--gray); font-size: 0.92rem; line-height: 1.7;
    margin-bottom: 1.2rem; flex-grow: 1;
}
.blog-link {
    color: var(--brand-green-deep); font-weight: 600; font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.blog-link:hover { text-decoration: underline; }
.blog-more { text-align: center; margin-top: 3rem; }

/* ---------- FAQ ---------- */
.faq-section { background: white; }
.faq-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; }
.faq-list { display: grid; gap: 1rem; }
.faq-art img {
    width: 100%; height: auto; display: block;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(23, 20, 46, 0.12);
}
details {
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}
details[open] { background: white; border-color: transparent; box-shadow: 0 15px 40px rgba(23, 20, 46, 0.1); }
summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
    padding: 1.3rem 1.6rem;
    font-weight: 600; font-size: 1.02rem; color: var(--dark);
}
summary::-webkit-details-marker { display: none; }
summary::after {
    content: "\2b"; /* plus */
    font-size: 1.4rem; font-weight: 400; color: var(--brand-green-deep);
    transition: transform 0.25s; flex-shrink: 0; line-height: 1;
}
details[open] summary::after { transform: rotate(45deg); }
details .ans { padding: 0 1.6rem 1.4rem; font-size: 0.94rem; color: var(--gray); line-height: 1.75; max-width: 72ch; }

/* ---------- CTA band ---------- */
.cta {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-deep) 55%, #0c7a42 100%);
    text-align: center;
    position: relative; overflow: hidden;
}
.cta::before {
    content: '';
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 50%);
}
.cta h2 { font-size: 2.6rem; font-weight: 800; color: white; margin-bottom: 1rem; position: relative; text-wrap: balance; }
.cta p  { color: rgba(255,255,255,0.92); font-size: 1.12rem; margin-bottom: 2rem; position: relative; max-width: 560px; margin-inline: auto; }
.btn-white { background: white; color: var(--dark); padding: 1rem 2.5rem; font-size: 1rem; position: relative; }
.btn-white:hover { transform: translateY(-3px); background: var(--dark); color: white; box-shadow: 0 15px 30px rgba(0,0,0,0.25); }

/* ---------- Footer ---------- */
footer { background: var(--dark); padding: 4rem 2rem 2.5rem; color: rgba(255,255,255,0.6); font-size: 0.88rem; }

/* ----- โซเชียลแชร์ + คัดลอกลิงก์ ----- */
.foot-social { display: flex; gap: 0.7rem; margin-top: 1.5rem; }
.soc-btn {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; cursor: pointer; text-decoration: none;
    transition: all 0.3s;
}
.soc-btn:hover { background: var(--brand-green); border-color: var(--brand-green); color: var(--dark); transform: translateY(-3px); }
.copy-feedback { font-size: 0.78rem; color: var(--brand-green); margin: 0.6rem 0 0; min-height: 1.1em; opacity: 0; transition: opacity 0.3s; }
.copy-feedback.show { opacity: 1; }

/* ----- แถวล่างสุด: ลิขสิทธิ์ซ้าย / legal ขวา ----- */
.foot-bottom {
    max-width: 1300px; margin: 2.2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
}
.foot-bottom p { margin: 0; font-size: 0.82rem; }
.foot-legal { display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.foot-legal a { color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; text-decoration: none; transition: color 0.25s; }
.foot-legal a:hover { color: var(--brand-green); }
.foot-grid {
    max-width: 1300px; margin: 0 auto 2.8rem;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem;
}
footer .logo-text { color: white; }
footer h4 { color: white; font-size: 0.98rem; font-weight: 600; margin-bottom: 1rem; }
footer ul { list-style: none; display: grid; gap: 0.55rem; }
footer a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; }
footer a:hover { color: var(--lav-light); }
footer .about { max-width: 42ch; margin-top: 1rem; line-height: 1.7; }

.disclosure {
    max-width: 1300px; margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1.8rem;
    font-size: 0.78rem; line-height: 1.75; color: rgba(255,255,255,0.45);
}
.disclosure p { margin-bottom: 0.8rem; }
.disclosure strong { color: rgba(255,255,255,0.7); }

/* ---------- Responsive ---------- */
/* ต่ำกว่า 1360: ชิปสถิติเลิกยื้อบรรทัดเดียว สลับเป็นกริด 3 ช่องสมมาตร — ไม่มีสภาพ 2+1 */
@media (max-width: 1360px) {
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
    .stat { flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
    /* โหมดกริด: ไอคอนใหญ่เต็ม 48px จัดกึ่งกลางเหนือข้อความ แบบเดียวกับสไตล์มือถือเดิม */
    .stat-icon { width: 48px; height: 48px; font-size: 1.15rem; }
    .stat h4 { font-size: 1.35rem; }
    .stat p { font-size: 0.8rem; }
}

/* ต่ำกว่า 1200: สลับฝ่ายหลบ — ตัวหนังสือหยุดย่อ (ค้างที่ค่า ณ 1200) ผู้หญิงย่อแทน */
@media (max-width: 1200px) {
    .hero-content { max-width: 416px; }
    .hero h1 { font-size: 2.15rem; }
    .hero-sub { font-size: 0.97rem; }
    .hero-figure { height: clamp(440px, 120vw - 740px, 700px); }  /* 700 ที่ 1200 -> 460 ที่ 1000 */
}

@media (max-width: 992px) {
    .hero { padding-top: 110px; }
    .hero-container { grid-template-columns: 1fr; gap: 3rem; }
    .hero h1 { font-size: 2.5rem; }
    .hero-bg, .hero-figure { display: none; }
    .hero-form { margin: 0 auto; }
    .hero-content { max-width: min(540px, 100%); margin-left: auto; margin-right: auto; text-align: center; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-cta { justify-content: center; }
    .cards-3, .uses-grid { grid-template-columns: 1fr; }
    .tier-row { grid-template-columns: 1fr; }
    .tier-row .tier-text { order: 1; padding: 2.4rem 1.8rem; }
    .tier-row .tier-art { order: 2; min-height: 0; aspect-ratio: 3 / 2; }
    .tier-text h3 { font-size: 1.7rem; }
    .faq-grid { grid-template-columns: 1fr; }
    .faq-art { max-width: 560px; margin: 0 auto; }
    .pillars, .elig-grid { grid-template-columns: 1fr; }
    .tp-grid { grid-template-columns: repeat(2, 1fr); }
    .calc-grid { grid-template-columns: 1fr; gap: 3rem; }
    .calc-card { margin: 0 auto; }
    .nav-menu { display: none; }
    .nav-toggle { display: block; }
    header nav > .btn-primary { display: none; }
    .section-header h2 { font-size: 2.1rem; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem 2rem; }
    .foot-grid > :first-child { grid-column: 1 / -1; }   /* brand+contact+social เต็มแถวบน */
    .hero { background: linear-gradient(180deg, #f9fbf7 0%, #e8f2ea 100%); }
    .cta h2 { font-size: 2.1rem; }
    .swipe-hint { display: flex; }
    #_lg_form_ input, #_lg_form_ select, #_lg_form_ textarea { font-size: 16px; }
}

/* แท็บเล็ต 700–992px: ฟอร์มชิดขวา + ผู้หญิงกลับมายืนเกยคลิปบอร์ดเหมือนเดสก์ท็อป
   (ตำแหน่งแนวนอนใช้สูตรเดิมของ .hero-figure ซึ่งให้ค่า 487px จากขอบขวาพอดีในช่วงนี้) */
@media (max-width: 992px) and (min-width: 700px) {
    .hero-form { margin-left: auto; margin-right: 0; }
    .hero-figure {
        display: block;
        height: auto;
        width: clamp(110px, calc(100vw - 600px), 250px);   /* โตตามพื้นที่ว่างข้างฟอร์ม */
        bottom: -40px;
    }
    .hero-figure img { width: 100%; height: auto; }
}
@media (max-width: 560px) {
    .hero h1 { font-size: 2.1rem; }
    .hero-stats { gap: 1.4rem; }
    .section-pad { padding: 5rem 1.4rem; }
    .tp-grid { grid-template-columns: 1fr; }
    .tp-bar { gap: 0.9rem; padding: 1rem 1.4rem; border-radius: 24px; }
    .calc-card { padding: 1.7rem 1.3rem; }
    .hf-paper { padding: 1.6rem 1.25rem 1.4rem; }
    .calc-amount { font-size: 2.2rem; }
    .calc-seg button { font-size: 0.74rem; }
    .tier-text h3 { font-size: 1.45rem; }
    .tier-row .tier-text { padding: 2rem 1.4rem; }

    /* Header */
    nav { padding: 0.85rem 1.25rem; }
    .mobile-menu { width: 100%; box-shadow: none; padding-left: 1.5rem; padding-right: 1.5rem; }
    .hf-title { font-size: 1.28rem; }

    /* Hero */
    .hero { padding: 100px 1.4rem 64px; }
    .hero-badge { font-size: 0.78rem; }
    .hero-sub { font-size: 1.02rem; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
    .stat { flex-direction: column; text-align: center; gap: 0.45rem; }
    .stat h4 { font-size: 1.05rem; }
    .stat p { font-size: 0.7rem; }

    /* หัวข้อทุกเซกชั่น */
    .section-header { margin-bottom: 2.8rem; }
    .section-header h2 { font-size: 1.75rem; }
    .section-header p { font-size: 0.95rem; }

    /* Amounts */
    .tier-text .btn { width: 100%; justify-content: center; }

    /* Eligibility */
    .elig-art img { border-radius: 20px; }
    .elig-grid .btn { width: 100%; justify-content: center; }

    /* Reviews */
    .tp-score { font-size: 0.85rem; text-align: center; }

    /* Pros & Cons */
    .pc-card { padding: 1.8rem 1.4rem; }

    /* CTA */
    .cta { padding: 4.5rem 1.4rem; }
    .cta h2 { font-size: 1.75rem; }
    .cta p { font-size: 1rem; }
    .cta .btn-white { width: 100%; max-width: 360px; justify-content: center; }

    /* Footer */
    footer { padding: 3rem 1.4rem 2rem; }
}

/* ---------- Sticky CTA bar (เฉพาะโมบาย โผล่หลังพ้น hero) ---------- */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 32px rgba(23, 20, 46, 0.1);
    transform: translateY(110%);
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
    display: none;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sticky-cta-text b { font-size: 0.9rem; font-weight: 700; color: var(--dark); line-height: 1.3; white-space: nowrap; }
.sticky-cta-text span { font-size: 0.72rem; color: var(--gray); white-space: nowrap; }
.sticky-cta-text span i { color: var(--brand-green-deep); margin-right: 0.3rem; font-size: 0.65rem; }
.sticky-cta-btn { flex-shrink: 0; padding: 0.85rem 1.35rem; font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 992px) {
    .sticky-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    footer { padding-bottom: 7rem; }    /* กันแถบบังบรรทัดท้าย footer */
}
@media (max-width: 400px) {
    .sticky-cta { gap: 0.7rem; }
    .sticky-cta-text b { font-size: 0.82rem; }
    .sticky-cta-text span { font-size: 0.66rem; }
    .sticky-cta-btn { padding: 0.8rem 1.1rem; font-size: 0.8rem; }
}

/* ---------- ลิงก์เมนูหน้าปัจจุบัน ---------- */
.nav-menu a.active { color: var(--brand-green-deep); }

/* ---------- ปุ่มดูคู่มือเต็มใต้ 3 ขั้นตอน (หน้า index) ---------- */
.steps-more { text-align: center; margin-top: 2.8rem; }

/* ---------- ช่องทางติดต่อใน footer ---------- */
.foot-contact { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.foot-contact a {
    color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.88rem;
    display: inline-flex; align-items: center; gap: 0.65rem; transition: color 0.25s;
}
.foot-contact a:hover { color: var(--brand-green); }
.foot-contact i { color: var(--brand-green); font-size: 0.82rem; width: 16px; text-align: center; }