/* ═══════════════════════════════════════════════════════════
   WONGSANU LAW AND ACCOUNTING — Design System
   สีหลัก: เขียวเข้ม / ทอง / ดำ
   ═══════════════════════════════════════════════════════════ */

:root{
  --green:#0B3D2E; --green-deep:#062419; --green-soft:#12583F; --green-mist:#E8F0EC;
  --gold:#C8A24A; --gold-soft:#E0C77E; --gold-pale:#F3E7C9;
  --ink:#101512; --ink-2:#3A463F; --muted:#6C7A72; --line:#E3E0D6;
  --cream:#F6F3EA; --paper:#fff; --radius:14px;
  --shadow-sm:0 1px 2px rgba(6,36,25,.06),0 2px 8px rgba(6,36,25,.05);
  --shadow:0 4px 12px rgba(6,36,25,.07),0 12px 32px rgba(6,36,25,.08);
  --shadow-lg:0 10px 24px rgba(6,36,25,.10),0 28px 60px rgba(6,36,25,.13);
  --head:'Noto Serif Thai',Georgia,'Times New Roman',serif;
  --body:'IBM Plex Sans Thai','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1220px; --gut:clamp(16px,4vw,32px);
  --sec-y:clamp(56px,7vw,104px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;font-family:var(--body);font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.75;color:var(--ink-2);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:var(--green);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);line-height:1.32;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(28px,4.4vw,50px)}
h2{font-size:clamp(24px,3.1vw,38px)}
h3{font-size:clamp(18px,1.7vw,23px)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap.narrow{max-width:860px}
.center{text-align:center}
.mt-32{margin-top:32px}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:12px 20px;z-index:999}
.skip:focus{left:8px;top:8px}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}

.ic{flex:none;vertical-align:middle}
.ic-xs{width:15px;height:15px}
.ic-sm{width:18px;height:18px}
.ic-lg{width:44px;height:44px}

/* ── ปุ่ม ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:.95rem;line-height:1.2;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),background .22s,color .22s,border-color .22s;
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:15px 30px;font-size:1.02rem}
.btn-sm{padding:9px 16px;font-size:.86rem}
.btn-block{display:flex;width:100%}
.btn-gold{background:linear-gradient(135deg,var(--gold) 0%,#B98F35 100%);color:#1B1403;box-shadow:0 4px 14px rgba(200,162,74,.35)}
.btn-gold:hover{color:#1B1403;box-shadow:0 8px 24px rgba(200,162,74,.45)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-soft);color:#fff}
.btn-outline{border-color:var(--green);color:var(--green);background:transparent}
.btn-outline:hover{background:var(--green);color:#fff}
.btn-outline-light{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.07);backdrop-filter:blur(6px)}
.btn-outline-light:hover{background:#fff;color:var(--green);border-color:#fff}
.btn-line{background:#06C755;color:#fff}
.btn-line:hover{background:#05a948;color:#fff}
.btn-ghost-line{border-color:var(--line);color:var(--green)}
.btn-ghost-line:hover{background:var(--green-mist);color:var(--green)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--green)}
.link-arrow .ic{transition:transform .2s var(--ease)}
.link-arrow:hover .ic{transform:translateX(4px)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:.86rem;font-weight:500;color:var(--ink-2);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--gold)}
.chip.is-active{background:var(--green);border-color:var(--green);color:#fff}
.chip.sm{padding:3px 11px;font-size:.76rem;cursor:default;background:var(--green-mist);border-color:transparent;color:var(--green)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.eyebrow.gold{color:var(--gold-soft)}
.sec{padding-block:var(--sec-y)}
.sec-cream{background:var(--cream)}
.sec-dark{background:var(--green-deep);color:rgba(255,255,255,.82)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:#fff}
.sec-head{margin-bottom:clamp(32px,4vw,56px)}
.sec-head.center{text-align:center;max-width:760px;margin-inline:auto}
.sec-head.center .eyebrow{justify-content:center}
.sec-title{margin:0 0 14px}
.sec-title.sm{font-size:clamp(20px,2.2vw,27px)}
.sec-sub{color:var(--muted);margin:0;font-size:1.03rem}
.lead{font-size:1.06rem;color:var(--ink-2)}
.sec-sub-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:clamp(48px,6vw,72px) 0 26px;flex-wrap:wrap}
.sec-sub-head h3{margin:0;position:relative;padding-left:16px}
.sec-sub-head h3::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:3px;background:var(--gold);border-radius:3px}

/* ── แถบบนสุด + เฮดเดอร์ ───────────────────────────── */
.topbar{background:var(--green-deep);color:rgba(255,255,255,.78);font-size:.82rem}
.topbar .wrap{max-width:1400px}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;flex-wrap:wrap}
.topbar-txt{display:inline-flex;align-items:center;gap:8px;color:var(--gold-soft)}
.topbar-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.topbar-links a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.78)}
.topbar-links a:hover{color:var(--gold-soft)}
.topbar-cta{font-weight:600;color:var(--gold-soft)!important}
@media(max-width:720px){.topbar-txt{display:none}.topbar-in{justify-content:center}.topbar-links{gap:12px;font-size:.78rem}}
@media(max-width:560px){.topbar-cta{display:none}}

.site-head{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s,background .25s}
.site-head.is-stuck{box-shadow:var(--shadow-sm)}
.site-head .wrap{max-width:1400px}
.head-in{display:flex;align-items:center;gap:16px;min-height:74px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-mark{width:auto;height:46px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt strong{font-family:var(--head);font-size:1.03rem;color:var(--green);font-weight:700}
.brand-txt small{font-size:.62rem;letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
.nav-desk{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav-link{padding:8px 10px;border-radius:9px;font-size:.9rem;white-space:nowrap;font-weight:500;color:var(--ink-2);position:relative}
.nav-link:hover{color:var(--green);background:var(--green-mist)}
.nav-link.is-active{color:var(--green);font-weight:600}
.nav-link.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--gold);border-radius:2px}
.head-cta{display:flex;align-items:center;gap:9px;flex:none}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1.5px solid var(--line);background:#fff;border-radius:11px;color:var(--green)}
@media(max-width:1340px){.head-cta .btn-ghost-line{display:none}}
@media(max-width:1240px){.nav-desk{display:none}.nav-toggle{display:inline-flex}}
@media(max-width:640px){.head-cta .btn span{display:none}.head-cta .btn{padding:11px 14px}}
@media(max-width:560px){.brand-txt small{display:none}.brand-txt strong{font-size:.88rem;max-width:165px;line-height:1.25}.brand-mark{height:36px}.head-in{gap:10px}}

.nav-mobile{position:fixed;inset:0;z-index:95;background:rgba(6,36,25,.55);backdrop-filter:blur(4px);animation:fade .2s}
.nav-mobile-in{position:absolute;right:0;top:0;bottom:0;width:min(340px,88vw);background:#fff;padding:26px 22px calc(26px + env(safe-area-inset-bottom));overflow-y:auto;display:flex;flex-direction:column;gap:2px;animation:slideIn .28s var(--ease)}
.nav-mobile-in a{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500}
.nav-mobile-in a:hover{color:var(--gold)}
.nav-mobile-cta{margin-top:20px;display:grid;gap:10px}
.nav-mobile-cta a{border:0!important;justify-content:center}
@keyframes fade{from{opacity:0}}
@keyframes slideIn{from{transform:translateX(100%)}}

/* ── แบนเนอร์สไลด์ ──────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--green-deep);
  height:clamp(480px,82vh,780px)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s}
.slide.is-active{opacity:1;visibility:visible}
.slide-img{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.06);transition:transform 8s linear}
.slide.is-active .slide-img{transform:scale(1)}
.slide-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(34px) brightness(.42) saturate(1.15);transform:scale(1.16)}
.slide-veil{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,36,25,calc(.94*var(--veil,.6))) 0%,rgba(6,36,25,calc(.78*var(--veil,.6))) 38%,rgba(6,36,25,calc(.18*var(--veil,.6))) 78%),
    linear-gradient(0deg,rgba(6,36,25,.62) 0%,rgba(6,36,25,0) 45%)}
.slide-in{position:relative;height:100%;display:flex;align-items:center;padding-block:80px}
.slide-in.align-center{justify-content:center;text-align:center}
.slide-in.align-center .hero-eyebrow{justify-content:center}
.slide-in.align-center .hero-btns{justify-content:center}
.slide-in.align-right{justify-content:flex-end;text-align:right}
.slide-in.align-right .hero-btns{justify-content:flex-end}
.slide-copy{max-width:680px;color:#fff}
.hero-eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold-soft);font-size:.78rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;margin:0 0 16px}
.hero-eyebrow .rule{width:34px;height:2px;background:var(--gold);border-radius:2px;flex:none}
.hero-title{font-family:var(--head);font-size:clamp(30px,5.3vw,60px);line-height:1.2;font-weight:700;color:#fff;margin:0 0 18px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-sub{font-size:clamp(15px,1.35vw,18.5px);color:rgba(255,255,255,.9);max-width:600px;margin:0 0 30px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:50px;height:50px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(6,36,25,.32);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;transition:.22s}
.hero-nav:hover{background:var(--gold);border-color:var(--gold);color:#1B1403}
.hero-nav.prev{left:clamp(10px,2.4vw,28px)}
.hero-nav.next{right:clamp(10px,2.4vw,28px)}
.hero-dots{position:absolute;left:0;right:0;bottom:26px;z-index:4;display:flex;justify-content:center;gap:10px}
.dot{width:34px;height:22px;border:0;background:none;padding:0;display:flex;align-items:center}
.dot i{display:block;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.4);transition:.3s}
.dot.is-active i{background:var(--gold);height:4px}
.hero-scroll{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);color:rgba(255,255,255,.6);animation:bob 2.2s infinite;z-index:3}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media(max-width:900px){
  .hero{height:clamp(440px,74vh,620px)}
  .hero-nav{width:42px;height:42px}
  .hero-scroll{display:none}
  .slide-veil{background:linear-gradient(0deg,rgba(6,36,25,.92) 8%,rgba(6,36,25,.55) 55%,rgba(6,36,25,.35) 100%)}
  .slide-in{align-items:flex-end;padding-bottom:76px}
}
@media(max-width:520px){.hero-btns .btn{flex:1 1 auto;min-width:140px}}

/* ── แถบจุดเด่น ─────────────────────────────────────── */
.hl-band{background:var(--green);color:#fff;position:relative;z-index:2}
.hl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hl{display:flex;gap:14px;padding:30px 26px;border-right:1px solid rgba(255,255,255,.11)}
.hl:last-child{border-right:0}
.hl-ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(200,162,74,.16);color:var(--gold-soft);display:flex;align-items:center;justify-content:center}
.hl h3{font-size:1.02rem;color:#fff;margin:0 0 4px}
.hl p{font-size:.87rem;color:rgba(255,255,255,.72);margin:0;line-height:1.6}
@media(max-width:1000px){.hl-grid{grid-template-columns:1fr 1fr}.hl{border-bottom:1px solid rgba(255,255,255,.11)}.hl:nth-child(2n){border-right:0}}
@media(max-width:560px){.hl-grid{grid-template-columns:1fr}.hl{border-right:0;padding:22px 4px}}

/* ── บล็อกแนะนำบริษัท ───────────────────────────────── */
.intro-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center}
.intro-media{position:relative}
.intro-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;background:var(--cream)}
.intro-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.intro-badge{position:absolute;right:-14px;bottom:34px;background:var(--green);color:#fff;border-radius:var(--radius);padding:18px 24px;text-align:center;box-shadow:var(--shadow-lg);border:2px solid var(--gold)}
.intro-badge strong{display:block;font-family:var(--head);font-size:2.1rem;line-height:1;color:var(--gold-soft)}
.intro-badge span{font-size:.8rem;color:rgba(255,255,255,.8)}
.deco-ring{position:absolute;left:-26px;top:-26px;width:120px;height:120px;border:2px solid var(--gold);border-radius:50%;opacity:.35;z-index:-1}
.tick-list{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:11px}
.tick-list li{display:flex;gap:11px;align-items:flex-start}
.tick-list .ic{color:var(--gold);margin-top:4px}
.tick-list.big li{font-size:1.02rem}
@media(max-width:880px){.intro-grid{grid-template-columns:1fr}.intro-media{max-width:440px;margin-inline:auto}.deco-ring{display:none}}

/* ── การ์ดหมวดหมู่ ──────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.cat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.cat-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--green-mist)}
.cat-img img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform .6s var(--ease)}
.cat-card:hover .cat-img img{transform:scale(1.06)}
.cat-body{display:flex;flex-direction:column;padding:24px;gap:8px;flex:1;position:relative}
.cat-icon{position:absolute;top:-27px;left:24px;width:54px;height:54px;border-radius:14px;background:var(--green);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);border:2px solid #fff}
.cat-title{font-family:var(--head);font-size:1.22rem;font-weight:600;color:var(--ink);margin-top:16px}
.cat-text{color:var(--muted);font-size:.94rem;line-height:1.65;flex:1}
.cat-more{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:600;font-size:.9rem;margin-top:10px}
.cat-card:hover .cat-more{color:var(--gold)}
@media(max-width:900px){.cat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cat-grid{grid-template-columns:1fr}}

/* ── การ์ดบริการ ────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.svc-img{display:block;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--cream)}
.svc-img img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:transform .6s var(--ease)}
.svc-card:hover .svc-img img{transform:scale(1.05)}
.svc-tag{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(6,36,25,.82);backdrop-filter:blur(6px);color:var(--gold-soft);font-size:.76rem;font-weight:600;padding:6px 12px;border-radius:999px}
.svc-body{display:flex;flex-direction:column;gap:9px;padding:22px;flex:1}
.svc-title{font-size:1.13rem;margin:0}
.svc-title a{color:var(--ink)}
.svc-title a:hover{color:var(--gold)}
.svc-text{color:var(--muted);font-size:.92rem;margin:0;line-height:1.65}
.svc-feats{list-style:none;padding:0;margin:2px 0 0;display:grid;gap:6px}
.svc-feats li{display:flex;gap:8px;font-size:.86rem;color:var(--ink-2)}
.svc-feats .ic{color:var(--gold);margin-top:4px}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.svc-price{font-family:var(--head);font-size:1.1rem;color:var(--green);font-weight:700}
.svc-note{font-size:.8rem;color:var(--gold);font-weight:600}
@media(max-width:960px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr}}

/* ── สถิติ ──────────────────────────────────────────── */
.stats-band{background:var(--green-deep);padding-block:clamp(40px,5vw,64px);position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 15% 0%,rgba(200,162,74,.13),transparent 70%)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.stat{text-align:center;padding:8px 12px;border-right:1px solid rgba(255,255,255,.11)}
.stat:last-child{border-right:0}
.stat strong{display:block;font-family:var(--head);font-size:clamp(30px,3.6vw,46px);color:var(--gold-soft);line-height:1.1;font-weight:700}
.stat span{font-size:.87rem;color:rgba(255,255,255,.72)}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;gap:28px 12px}.stat{border-right:0}}

/* ── ขั้นตอนการทำงาน ────────────────────────────────── */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,26px);counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px 26px;box-shadow:var(--shadow-sm);transition:.28s var(--ease)}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold)}
.step-no{position:absolute;right:18px;top:12px;font-family:var(--head);font-size:2.5rem;color:var(--green-mist);font-weight:700;line-height:1}
.step-ic{display:flex;width:52px;height:52px;border-radius:14px;background:var(--green-mist);color:var(--green);align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:1.06rem;margin:0 0 7px}
.step p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.65}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ── ทำไมต้องเลือกเรา ───────────────────────────────── */
.why-sec{position:relative;overflow:hidden}
.why-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 420px at 88% 12%,rgba(200,162,74,.14),transparent 70%)}
.why-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,68px);align-items:center;position:relative}
.why-items{display:grid;gap:22px;margin-top:28px}
.why-item{display:flex;gap:15px}
.why-ic{flex:none;width:48px;height:48px;border-radius:13px;border:1px solid rgba(200,162,74,.34);background:rgba(200,162,74,.1);color:var(--gold-soft);display:flex;align-items:center;justify-content:center}
.why-item h3{font-size:1.05rem;margin:0 0 4px}
.why-item p{font-size:.92rem;margin:0;color:rgba(255,255,255,.7)}
.why-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:3/4;border:1px solid rgba(200,162,74,.28)}
.why-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media(max-width:880px){.why-grid{grid-template-columns:1fr}.why-media{max-width:400px;margin-inline:auto;aspect-ratio:4/3}}

/* ── แถบ CTA ────────────────────────────────────────── */
.cta-band{position:relative;padding-block:clamp(48px,6vw,84px);background:var(--green);overflow:hidden;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;background-image:var(--cta-img);background-size:cover;background-position:50% 42%;opacity:.2;z-index:-2}
.cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(6,36,25,.94),rgba(11,61,46,.8));z-index:-1}
.cta-band-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,52px);flex-wrap:wrap}
.cta-band h2{color:#fff;margin:0 0 10px;max-width:640px}
.cta-band p{color:rgba(255,255,255,.82);margin:0;max-width:640px}
.cta-band-btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.cta-band-btns .btn{flex:1 1 auto}}

/* ── แกลเลอรี ───────────────────────────────────────── */
.gal-filters{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal-item{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;cursor:zoom-in;background:var(--cream);box-shadow:var(--shadow-sm)}
.gal-item.wide{grid-column:span 2;aspect-ratio:16/10}
.gal-item.tall{grid-row:span 2;aspect-ratio:3/5}
.gal-item img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;transition:transform .6s var(--ease)}
.gal-item:hover img{transform:scale(1.07)}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(0deg,rgba(6,36,25,.92),transparent);color:#fff;display:flex;flex-direction:column;gap:2px;transform:translateY(8px);opacity:0;transition:.3s var(--ease)}
.gal-item:hover figcaption,.gal-item:focus-visible figcaption{transform:none;opacity:1}
.gal-item figcaption strong{font-size:.95rem}
.gal-item figcaption span{font-size:.78rem;color:rgba(255,255,255,.78);line-height:1.5}
.gal-zoom{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--green);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:.25s var(--ease)}
.gal-item:hover .gal-zoom{opacity:1;transform:none}
.gal-item.is-hidden{display:none}
@media(max-width:1000px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gal-grid{grid-template-columns:1fr 1fr;gap:10px}.gal-item.tall{grid-row:span 1;aspect-ratio:3/4}}
@media(max-width:700px){.hero-nav{display:none}}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,36,25,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:24px;animation:fade .25s}
.lightbox img{max-width:min(1100px,94vw);max-height:78vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox p{color:rgba(255,255,255,.86);margin:0;text-align:center;max-width:700px;font-size:.94rem}
.lb-close,.lb-prev,.lb-next{position:absolute;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--gold);color:#1B1403;border-color:var(--gold)}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:10px;right:10px}}

/* ── โปรโมชั่น ──────────────────────────────────────── */
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.promo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.promo-img{aspect-ratio:16/9;overflow:hidden}
.promo-img img{width:100%;height:100%;object-fit:cover}
.promo-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.promo-badge{align-self:flex-start;background:var(--gold);color:#1B1403;font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px}
.promo-date{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:6px;margin:0}
@media(max-width:900px){.promo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.promo-grid{grid-template-columns:1fr}}

/* ── รีวิว ──────────────────────────────────────────── */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tst{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative;box-shadow:var(--shadow-sm)}
.tst-quote{position:absolute;right:20px;top:16px;color:var(--green-mist)}
.tst blockquote{margin:0 0 14px;font-size:.97rem;color:var(--ink-2);line-height:1.75}
.stars{display:flex;gap:2px;margin-bottom:12px;color:var(--line)}
.stars .on{color:var(--gold)}
.tst figcaption{display:flex;align-items:center;gap:11px;border-top:1px solid var(--line);padding-top:14px}
.tst figcaption img,.tst-ava{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.tst-ava{background:var(--green);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700}
.tst figcaption span{display:flex;flex-direction:column;line-height:1.4}
.tst figcaption small{color:var(--muted);font-size:.8rem}
@media(max-width:900px){.tst-grid{grid-template-columns:1fr}}

/* ── คำถามที่พบบ่อย ─────────────────────────────────── */
.faq-list{display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq-item[open]{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font-weight:600;color:var(--ink);font-family:var(--head)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{font-size:1.01rem;line-height:1.55}
.faq-ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--green-mist);color:var(--green);display:flex;align-items:center;justify-content:center;transition:.25s var(--ease)}
.faq-item[open] .faq-ic{transform:rotate(45deg);background:var(--gold);color:#fff}
.faq-a{padding:0 22px 20px;color:var(--ink-2)}
.faq-a p{margin:0;font-size:.96rem}
.faq-group{margin-bottom:40px}
.faq-group-title{display:flex;align-items:center;gap:9px;font-size:1.13rem;color:var(--green);margin-bottom:14px}
.faq-cta{margin-top:48px;text-align:center;background:var(--green-mist);border:1px dashed var(--gold);border-radius:var(--radius);padding:36px 24px}
.faq-cta h3{margin:0 0 8px}
.faq-cta p{color:var(--muted);margin:0 0 20px}
.faq-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── ติดต่อ / ฟอร์ม ─────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.5vw,64px);align-items:start}
.ch-list{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:14px}
.ch-item{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.25s}
.ch-item:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.ch-ic{flex:none;width:42px;height:42px;border-radius:11px;background:var(--green-mist);color:var(--green);display:flex;align-items:center;justify-content:center}
.ch-body{display:flex;flex-direction:column;min-width:0}
.ch-label{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ch-value{font-weight:600;color:var(--ink);word-break:break-word;line-height:1.55}
.ch-value:hover{color:var(--gold)}
.hours-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:22px}
.hours-box h3{display:flex;align-items:center;gap:8px;font-size:1.02rem;margin:0 0 12px;color:var(--green)}
.hours-box ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hours-box li{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.hours-box li:last-child{border:0;padding:0}
.hours-note{display:flex;gap:7px;font-size:.83rem;color:var(--muted);margin:12px 0 0}
.qr-box{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.qr-box img{width:130px;height:130px;border-radius:10px;flex:none}
.qr-box div{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.qr-box strong{font-family:var(--head);color:var(--ink)}
.qr-box span{font-size:.87rem;color:var(--muted)}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow)}
.contact-card h3{margin:0 0 20px;padding-bottom:16px;border-bottom:2px solid var(--gold);display:inline-block}
.cform{display:grid;gap:16px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-size:.87rem;font-weight:600;color:var(--ink)}
.field>span b{color:#C0392B}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.16)}
.field textarea{resize:vertical;min-height:110px;line-height:1.7}
.field.err input,.field.err textarea,.field.err select{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--muted);line-height:1.6}
.check input{margin-top:4px;width:17px;height:17px;accent-color:var(--green);flex:none}
.cform-note{display:flex;gap:7px;align-items:flex-start;font-size:.82rem;color:var(--muted);margin:0}
.cform-result{padding:16px 18px;border-radius:12px;font-size:.94rem}
.cform-result.ok{background:#E7F5EE;border:1px solid #8FCFAE;color:#1B6B45}
.cform-result.bad{background:#FDECEA;border:1px solid #F0B0A8;color:#A03227}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:560px){.cform-row{grid-template-columns:1fr}.qr-box{flex-direction:column;text-align:center}.qr-box div{align-items:center}}

/* ── แผนที่ ─────────────────────────────────────────── */
.map-sec{position:relative}
.map-wrap{position:relative;height:var(--map-h,420px);background:var(--cream)}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.18) contrast(1.03)}
.map-cta{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);box-shadow:var(--shadow-lg)}

/* ── หัวหน้าเพจย่อย ─────────────────────────────────── */
.page-hero{position:relative;background:var(--green-deep);color:#fff;overflow:hidden;isolation:isolate}
.page-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,36,25,.94),rgba(6,36,25,.72) 60%,rgba(6,36,25,.5));z-index:-1}
.page-hero:not(.has-img) .page-hero-veil{background:linear-gradient(120deg,var(--green-deep),var(--green))}
.page-hero-in{padding-block:clamp(56px,8vw,110px);max-width:900px}
.page-hero h1{color:#fff;margin:0 0 12px}
.page-hero-sub{color:rgba(255,255,255,.82);font-size:1.03rem;margin:0;max-width:700px}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.83rem;margin-bottom:18px;color:rgba(255,255,255,.62)}
.crumbs a{color:rgba(255,255,255,.72)}
.crumbs a:hover{color:var(--gold-soft)}
.crumb-sep{opacity:.45}

/* ── เนื้อหาบทความ / prose ──────────────────────────── */
.prose{color:var(--ink-2)}
.prose h2{margin:1.6em 0 .55em;font-size:clamp(21px,2.4vw,30px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.5em 0 .5em;color:var(--green)}
.prose h4{margin:1.3em 0 .4em}
.prose p{margin:0 0 1.15em;line-height:1.85}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose strong{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.pill-list{list-style:none;padding:0;margin:0 0 1.4em;display:flex;flex-wrap:wrap;gap:9px}
.pill-list li{display:inline-flex;align-items:center;gap:7px;background:var(--green-mist);color:var(--green);padding:8px 15px;border-radius:999px;font-size:.87rem;font-weight:500}
.pill-list .ic{color:var(--gold)}

/* ── หน้ารายละเอียด ─────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,4vw,56px);align-items:start}
.detail-side{display:grid;gap:20px;position:sticky;top:96px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.side-card h3{font-size:1.06rem;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.side-card .btn{margin-bottom:9px}
.side-card .btn:last-child{margin-bottom:0}
.side-price{font-family:var(--head);font-size:1.6rem;color:var(--green);font-weight:700;margin:0 0 4px}
.side-note{display:flex;gap:7px;font-size:.84rem;color:var(--muted);margin:0 0 16px}
.side-list ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.side-list li a{display:flex;gap:6px;align-items:flex-start;padding:9px 0;font-size:.92rem;color:var(--ink-2);border-bottom:1px dashed var(--line)}
.side-list li:last-child a{border:0}
.side-list .ic{color:var(--gold);margin-top:5px;flex:none}
.side-list a.is-current{color:var(--green);font-weight:600}
.side-contact .ch-item{padding:10px 0;border:0;border-radius:0;border-bottom:1px dashed var(--line)}
.side-contact .ch-item:hover{box-shadow:none}
.side-contact .ch-ic{width:34px;height:34px;border-radius:9px}
@media(max-width:960px){.detail-grid{grid-template-columns:1fr}.detail-side{position:static}}

/* ── เกี่ยวกับเรา ───────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4.5vw,64px);align-items:start}
.about-media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about-fig{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--cream)}
.about-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.about-fig.fig-0{grid-column:1/-1;aspect-ratio:4/3}
.about-fig.fig-1,.about-fig.fig-2,.about-fig.fig-3,.about-fig.fig-4,.about-fig.fig-5{aspect-ratio:1/1}
@media(max-width:880px){.about-grid{grid-template-columns:1fr}}

.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.val{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center;transition:.28s var(--ease)}
.val:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold)}
.val-ic{display:inline-flex;width:56px;height:56px;border-radius:16px;background:var(--green);color:var(--gold-soft);align-items:center;justify-content:center;margin-bottom:15px}
.val h3{font-size:1.03rem;margin:0 0 7px}
.val p{font-size:.9rem;color:var(--muted);margin:0}
@media(max-width:960px){.val-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.val-grid{grid-template-columns:1fr}}

.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;max-width:1000px;margin-inline:auto}
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.team-photo{aspect-ratio:4/5;overflow:hidden;background:var(--cream)}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.team-body{padding:24px}
.team-body h3{margin:0 0 3px}
.team-role{color:var(--gold);font-weight:600;font-size:.9rem;margin:0 0 12px}
.team-bio{font-size:.92rem;color:var(--muted);margin:0 0 14px}
.team-cred{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:7px}
.team-cred li{display:flex;gap:8px;font-size:.85rem;color:var(--ink-2)}
.team-cred .ic{color:var(--gold);margin-top:4px}
.team-links{display:flex;gap:14px;flex-wrap:wrap;font-size:.86rem}
.team-links a{display:inline-flex;align-items:center;gap:5px}

/* ── แพ็กเกจ ────────────────────────────────────────── */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.pkg{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;transition:.28s var(--ease)}
.pkg:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pkg.is-hl{border:2px solid var(--gold);box-shadow:var(--shadow-lg)}
.pkg-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1B1403;font-size:.76rem;font-weight:700;padding:5px 16px;border-radius:999px;white-space:nowrap}
.pkg h3{margin:0;font-size:1.16rem}
.pkg-price{margin:0;display:flex;align-items:baseline;gap:6px}
.pkg-num{font-family:var(--head);font-size:2rem;color:var(--green);font-weight:700}
.pkg-ask{font-family:var(--head);font-size:1.3rem;color:var(--gold)}
.pkg-price small{color:var(--muted);font-size:.85rem}
.pkg-note{font-size:.82rem;color:var(--muted);margin:0}
.pkg ul{list-style:none;padding:0;margin:6px 0 12px;display:grid;gap:9px;flex:1}
.pkg li{display:flex;gap:9px;font-size:.91rem;color:var(--ink-2)}
.pkg li .ic{color:var(--gold);margin-top:4px;flex:none}
.pkg-foot-note{display:flex;gap:8px;justify-content:center;margin-top:28px;font-size:.87rem;color:var(--muted)}
@media(max-width:900px){.pkg-grid{grid-template-columns:1fr}.pkg{max-width:460px;margin-inline:auto;width:100%}}

/* ── บทความ ─────────────────────────────────────────── */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.art-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.28s var(--ease)}
.art-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.art-img{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.art-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.art-card:hover .art-img img{transform:scale(1.05)}
.art-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.art-date{font-size:.8rem;color:var(--gold);font-weight:600}
.art-body h3{margin:0;font-size:1.08rem}
.art-body h3 a{color:var(--ink)}
.art-body h3 a:hover{color:var(--gold)}
.art-body p{font-size:.91rem;color:var(--muted);margin:0;flex:1}
.art-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:.86rem;color:var(--muted);padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.art-meta span{display:inline-flex;align-items:center;gap:6px}
.art-share{display:flex;align-items:center;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.art-share a{width:38px;height:38px;border-radius:50%;background:var(--green-mist);color:var(--green);display:flex;align-items:center;justify-content:center;transition:.22s}
.art-share a:hover{background:var(--green);color:#fff}
@media(max-width:960px){.art-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.art-grid{grid-template-columns:1fr}}

/* ── ค้นหา / ว่างเปล่า / 404 ────────────────────────── */
.search-box{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 7px 7px 18px;margin-bottom:30px;color:var(--muted)}
.search-box input{flex:1;border:0;outline:0;font:inherit;font-size:.98rem;padding:8px 0;background:none;min-width:0}
.search-results{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.search-results a{display:flex;flex-direction:column;gap:5px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.22s}
.search-results a:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.search-results strong{font-family:var(--head);color:var(--ink);font-size:1.03rem}
.search-results a>span:last-child{font-size:.9rem;color:var(--muted)}
.search-results .chip{align-self:flex-start}
.empty{text-align:center;padding:56px 24px;background:var(--cream);border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px}
.empty .ic{color:var(--line)}
.err-sec{padding-block:clamp(70px,10vw,140px)}
.err-code{font-family:var(--head);font-size:clamp(70px,14vw,150px);line-height:1;color:var(--green-mist);font-weight:700;display:block}
.err-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ── ฟุตเตอร์ ───────────────────────────────────────── */
.site-foot{background:var(--green-deep);color:rgba(255,255,255,.66);padding-top:clamp(48px,6vw,80px);position:relative;overflow:hidden}
.site-foot::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 8% 0%,rgba(200,162,74,.09),transparent 65%)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:clamp(26px,3.4vw,48px);padding-bottom:44px;position:relative}
.foot-brand img{height:74px;width:auto;object-fit:contain;margin-bottom:16px}
.foot-name{font-family:var(--head);color:#fff;font-size:1.05rem;font-weight:600;margin:0 0 3px}
.foot-en{font-size:.7rem;letter-spacing:.09em;color:var(--gold-soft);text-transform:uppercase;margin:0 0 14px}
.foot-about{font-size:.88rem;line-height:1.75;margin:0 0 18px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:.22s}
.foot-social a:hover{background:var(--gold);border-color:var(--gold);color:#1B1403}
.foot-col h3{color:#fff;font-size:1rem;margin:0 0 16px;position:relative;padding-bottom:11px}
.foot-col h3::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold)}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot-col a{color:rgba(255,255,255,.66);font-size:.9rem}
.foot-col a:hover{color:var(--gold-soft)}
.foot-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.89rem;line-height:1.65}
.foot-contact .ic{color:var(--gold);margin-top:4px;flex:none}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);position:relative}
.foot-bar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:18px;flex-wrap:wrap;font-size:.83rem}
.foot-bar p{margin:0}
.foot-legal{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr;text-align:left}.foot-bar-in{justify-content:center;text-align:center}}

/* ── ปุ่มลอย ────────────────────────────────────────── */
.floating-cta{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;display:flex;flex-direction:column;gap:10px}
.fc{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:.25s var(--ease);position:relative}
.fc:hover{transform:scale(1.08);color:#fff}
.fc span{position:absolute;right:60px;white-space:nowrap;background:var(--ink);color:#fff;font-size:.8rem;padding:6px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:.22s;transform:translateX(6px)}
.fc:hover span{opacity:1;transform:none}
.fc-green{background:var(--green)}
.fc-line{background:#06C755}
.fc-fb{background:#1877F2}
.fc-gold{background:var(--gold);color:#1B1403}
.fc-gold:hover{color:#1B1403}
@media(max-width:700px){
  .floating-cta{right:0;left:0;bottom:0;flex-direction:row;gap:0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:7px 6px calc(7px + env(safe-area-inset-bottom))}
  .fc{flex:1;width:auto;height:auto;border-radius:11px;flex-direction:column;gap:3px;padding:7px 4px;box-shadow:none;background:none!important;color:var(--green)}
  .fc span{position:static;opacity:1;transform:none;background:none;color:var(--muted);font-size:.68rem;padding:0}
  .fc-line{color:#06C755}.fc-fb{color:#1877F2}.fc-gold{color:#B98F35}
  body{padding-bottom:66px}
}

/* ── แถบคุกกี้ ──────────────────────────────────────── */
.cookie-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:90;width:min(880px,calc(100% - 24px));background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cookie-bar p{margin:0;font-size:.87rem;color:var(--ink-2);flex:1;min-width:220px}
.cookie-bar div{display:flex;align-items:center;gap:14px}
.cookie-bar a{font-size:.86rem;text-decoration:underline}
@media(max-width:700px){.cookie-bar{bottom:76px}}

/* ── แอนิเมชันตอนเลื่อน ─────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .site-head,.topbar,.floating-cta,.cookie-bar,.hero-nav,.hero-dots,.map-sec{display:none!important}
  body{color:#000}
}

/* ทีมงานแบบเต็มความกว้าง (ใช้ในหน้าแรกและหน้าเกี่ยวกับเราเมื่อมีสมาชิกหลายคน) */
.team-grid.team-grid-wide{max-width:none;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:22px}
.team-grid-wide .team-body{padding:18px 18px 20px}
.team-grid-wide .team-body h3{font-size:1.02rem}
.team-grid-wide .team-role{font-size:.84rem;margin-bottom:9px}
.team-grid-wide .team-bio{font-size:.86rem;margin-bottom:10px}
@media (max-width:640px){.team-grid.team-grid-wide{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.team-grid-wide .team-body{padding:13px}
.team-grid-wide .team-body h3{font-size:.94rem}
.team-grid-wide .team-role{font-size:.78rem}
.team-grid-wide .team-bio{font-size:.8rem}}
.about-fig.fig-3{grid-column:1/-1;aspect-ratio:16/9}

/* การ์ดทีมงานแบบย่อ (หน้าแรก) — รูป / ชื่อ / ตำแหน่ง */
.team-card-compact .team-body{padding:16px 14px 18px;text-align:center}
.team-card-compact .team-body h3{margin:0 0 4px;font-size:1rem;line-height:1.35}
.team-card-compact .team-role{margin:0;font-size:.83rem;line-height:1.45;color:var(--gold)}
@media (max-width:640px){
  .team-card-compact .team-body{padding:12px 10px 14px}
  .team-card-compact .team-body h3{font-size:.9rem}
  .team-card-compact .team-role{font-size:.75rem}
}