/* Zero to Sixty · สไตล์หลัก (ใช้ทุกหน้า) */
/* ============================================================
   ZERO TO SIXTY — DESIGN SYSTEM v6  ·  motif = หลักไมล์ (milestone road)
   ============================================================ */
:root{
  --logo:url(/assets/img/logo-stacked.png);
  /* พื้นผิว */
  --paper:#F7F5F0; --surface:#FFFFFF; --sunk:#F1EDE5; --cream:#FBF4E7;
  /* หมึก */
  --ink:#16202B; --body:#4A5561; --muted:#6A7381; --line:#E6E1D8; --hair:#EFEBE3;
  /* แบรนด์ */
  --navy:#1B3A75; --deep:#132C59; --night:#0B1C3F;
  --orange:#E8891A; --gold:#C9992F; --sand:#E8B978;
  /* ระยะ */
  --r-s:10px; --r-m:14px; --r-l:20px;
  --sh-s:0 1px 2px rgba(16,32,48,.05);
  --sh-m:0 4px 18px rgba(16,32,48,.07),0 1px 3px rgba(16,32,48,.05);
  --sh-l:0 18px 50px rgba(11,28,63,.13),0 2px 6px rgba(11,28,63,.07);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Kanit',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:#E4E6EA;
  line-height:1.74;font-size:15.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* ---------- กรอบเบราว์เซอร์ (mockup only) ---------- */
.legend{max-width:1260px;margin:20px auto 12px;padding:0 14px;font-size:12.5px;color:#5B6470;line-height:1.7}
.legend b{color:var(--deep);font-weight:500}
.stage{max-width:1260px;margin:0 auto 46px;padding:0 14px}
.frame{background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:var(--sh-l)}
.chrome{background:#EDEEF0;border-bottom:1px solid #E0E2E6;padding:9px 14px;display:flex;align-items:center;gap:9px}
.dot{width:10px;height:10px;border-radius:50%}
.url{flex:1;background:#fff;border:1px solid #E2E4E8;border-radius:20px;padding:4px 14px;font-size:12px;color:var(--muted);text-align:center}
.url b{color:var(--ink);font-weight:400}

/* ---------- โครงร่วม ---------- */
.sec{padding:78px 60px;position:relative}
.sec.tight{padding:58px 60px}
.inner{max-width:1040px;margin:0 auto}
.dark{background:linear-gradient(168deg,var(--deep) 0%,var(--night) 100%);color:#E9ECF8;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(60% 80% at 8% 0,rgba(232,137,26,.16),transparent 62%),
             repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 64px)}
.dark>*{position:relative;z-index:1}

/* หัว section — ป้ายหลักไมล์เล็ก ๆ + เส้นถนน */
.head{margin-bottom:26px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.6}
.dark .eyebrow{color:var(--sand)}
h2{font-size:clamp(25px,3.1vw,33px);font-weight:400;color:var(--deep);line-height:1.26;margin:12px 0 0;max-width:27ch;letter-spacing:-.01em}
h2 b{font-weight:500}
.dark h2{color:#fff}
.lede{font-size:16px;color:var(--body);max-width:62ch;margin-top:12px}
.dark .lede{color:#BCC8E6}
.roadrule{height:0;border-top:2px dashed rgba(27,58,117,.22);margin:0;}
.dark .roadrule{border-color:rgba(255,255,255,.16)}

/* ปุ่ม */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font:inherit;
  font-size:14.5px;font-weight:400;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.16s}
.btn-o{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(232,137,26,.28)}
.btn-o:hover{background:#D67C12;transform:translateY(-1px)}
.btn-g{border-color:rgba(255,255,255,.4);color:#fff}
.btn-g:hover{background:rgba(255,255,255,.1)}
.btn-n{border-color:#BDC8E7;color:var(--navy)}
.btn-n:hover{background:#F1F4FC}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* การ์ดมาตรฐาน */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-m)}
.dark .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);box-shadow:none;color:#DDE3F5}

/* ---------- NAV + odometer ---------- */
.nav{display:flex;align-items:center;gap:26px;padding:13px 60px;border-bottom:1px solid var(--hair);
  background:rgba(247,245,240,.92);position:sticky;top:0;z-index:40;backdrop-filter:blur(10px)}
.nav .logo{height:36px;width:150px;background:var(--logo) left center/contain no-repeat;flex:none}
.nav .links{display:flex;gap:22px;margin-left:8px}
.nav .links a{color:var(--body);text-decoration:none;font-size:14px}
.nav .links a:hover{color:var(--navy)}
.nav .cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav .ph{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.navbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);width:0;transition:width .12s linear}

/* odometer ลอย */
.odo{position:fixed;left:18px;bottom:18px;z-index:60;background:rgba(19,44,89,.94);color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:9px 14px;backdrop-filter:blur(8px);
  box-shadow:0 10px 28px rgba(11,28,63,.3);display:flex;align-items:center;gap:11px}
.odo .n{font-family:var(--mono);font-size:22px;line-height:1;color:var(--sand);min-width:2.4ch;text-align:right}
.odo .t{font-size:11px;color:#A9B9DC;line-height:1.35;max-width:14ch}
.odo .bar{width:54px;height:4px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.odo .bar i{display:block;height:100%;width:0;background:var(--orange);border-radius:3px;transition:width .12s linear}
@media(max-width:760px){.odo{left:10px;bottom:10px;padding:7px 11px}.odo .t{display:none}}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(162deg,#1A3A74 0%,var(--deep) 52%,var(--night) 100%);color:#fff;
  padding:64px 60px 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 70% at 88% 12%,rgba(232,137,26,.2),transparent 65%)}
.hero>*{position:relative;z-index:1}
.hero .kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
.hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:300;line-height:1.2;margin:14px 0 0;letter-spacing:-.015em;max-width:24ch}
.hero h1 b{font-weight:500;color:#fff}
.hero .define{margin-top:14px;font-size:16.5px;color:#CAD4EF;font-weight:200;max-width:56ch}
.hero .define b{color:var(--sand);font-weight:400}
.hero .sell{margin-top:16px;font-size:15.5px;color:#B1BFE1;font-weight:200;max-width:54ch}
.hero .sell strong{font-weight:400;color:#fff}
.hero .acts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.jump{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:13.5px;color:var(--sand);
  text-decoration:none;border-bottom:1px dotted rgba(232,185,120,.5);padding-bottom:2px}

/* แถบถนนเต็มความกว้าง */
.scene{margin:34px -60px 0;position:relative;background:#0D1E44}
.scene svg{display:block;width:100%;height:auto}
.ridenote{margin:0;padding:11px 60px 0;font-size:13px;color:#A0B2DA;font-weight:200;display:flex;gap:9px;align-items:flex-start}
.ridenote::before{content:"";width:22px;height:2px;background:var(--orange);border-radius:2px;margin-top:11px;flex:none}
.milelist{display:none}
@media(max-width:640px){
  .scene{display:none}
  .milelist{display:grid;gap:9px;margin:26px 0 0;list-style:none}
  .milelist li{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:center;position:relative}
  .milelist li::before{content:"";position:absolute;left:18px;top:28px;bottom:-9px;width:2px;
    background:repeating-linear-gradient(180deg,rgba(244,230,204,.45) 0 5px,transparent 5px 10px)}
  .milelist li:last-child::before{display:none}
  .milelist .n{font-family:var(--mono);font-size:15px;color:#132C59;background:#FBF4E7;border:1px solid #D9C7A6;
    border-radius:9px;text-align:center;padding:5px 0;line-height:1}
  .milelist li:last-child .n{background:#FDF3DF;border-color:#E8B978;color:#8A5A17}
  .milelist .t{font-size:14px;color:#DDE3F5}
  .milelist .t small{display:block;font-size:12px;color:#A0B2DA}
  .ridenote{padding-top:16px}
  .nav .ph{display:none}
  .nav{gap:12px}
}

.car{animation:drive 9s linear infinite}
@keyframes drive{0%{transform:translateX(-200px)}100%{transform:translateX(1010px)}}
.bgA{animation:fadeA 9s linear infinite}
.bgB{animation:fadeB 9s linear infinite;opacity:0}
.bgC{animation:fadeC 9s linear infinite;opacity:0}
@keyframes fadeA{0%,47%{opacity:1}54%{opacity:0}97%{opacity:0}100%{opacity:1}}
@keyframes fadeB{0%,47%{opacity:0}54%,70%{opacity:1}77%{opacity:0}100%{opacity:0}}
@keyframes fadeC{0%,70%{opacity:0}77%,97%{opacity:1}100%{opacity:0}}
.wheel{animation:spin .62s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.dashes{animation:flow .9s linear infinite}
@keyframes flow{to{stroke-dashoffset:-56}}
.rain{animation:rainfall .75s linear infinite}
@keyframes rainfall{to{transform:translateY(58px)}}
.flash{animation:flash 4.5s linear infinite;opacity:0}
@keyframes flash{0%,92%{opacity:0}94%{opacity:.5}95%{opacity:0}96%{opacity:.34}97%,100%{opacity:0}}
.bob{animation:bob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@media (prefers-reduced-motion:reduce){
  .car,.bgA,.bgB,.bgC,.wheel,.dashes,.rain,.flash,.bob{animation:none}
  .bgA{opacity:1}.flash{opacity:0}
}

/* แถบความน่าเชื่อถือ */
.trust{max-width:1040px;margin:26px auto 0;border-top:1px solid rgba(255,255,255,.14);
  padding:20px 0 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust div{font-size:12.5px;color:#A9B9DC;font-weight:200}
.trust div b{display:block;font-family:var(--mono);font-size:14px;color:#fff;font-weight:500;letter-spacing:.01em}

/* ---------- 3 เสา (3P) ---------- */
.pillars{background:var(--sunk);padding:56px 60px}
.p3{max-width:1040px;margin:0 auto}
.p3 .row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;align-items:end}
.p3 .c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 18px 16px;position:relative}
.p3 .c .cap{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.p3 .c .meter{width:100%;height:6px;border-radius:4px;background:var(--sunk);overflow:hidden;margin-bottom:12px}
.p3 .c .meter i{display:block;height:100%;background:#B7C4CE;border-radius:4px}
.p3 .c b{font-size:16px;color:var(--deep);font-weight:500}
.p3 .c p{font-size:13.2px;color:var(--body);line-height:1.68;margin-top:5px}
.p3 .c .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.p3 .c.on{background:linear-gradient(170deg,#FFFDF8,#FDF6EA);border-color:#EBD9B8;box-shadow:0 10px 30px rgba(180,126,26,.12)}
.p3 .c.on .meter i{background:var(--orange)}
.p3 .c.on b{color:#8A5A17}
.p3 .c.on .tag{color:var(--gold)}
.p3 .kick{margin-top:18px;font-size:16px;color:var(--deep);font-weight:300}
.p3 .kick b{font-weight:500;color:var(--orange)}

/* ---------- บันได 4 ขั้น = ถนนแนวตั้ง ---------- */
.arcbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;font-size:13px;color:var(--muted)}
.arcbar span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 15px;color:var(--body)}
.arcbar i{color:var(--orange);font-style:normal}
.road{position:relative;margin-top:30px;padding-left:64px}
.road::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:2px;
  background:repeating-linear-gradient(180deg,rgba(27,58,117,.3) 0 9px,transparent 9px 18px)}
.stepc{position:relative;padding:0 0 34px}
.stepc:last-child{padding-bottom:0}
.sign{position:absolute;left:-64px;top:2px;width:44px;text-align:center}
.sign .plate{background:var(--cream);border:1.5px solid #D9C7A6;border-radius:9px;padding:5px 0 4px;
  font-family:var(--mono);font-size:15px;color:var(--deep);line-height:1;box-shadow:0 3px 10px rgba(16,32,48,.08)}
.sign .post{width:3px;height:16px;background:#8C7B63;margin:0 auto;border-radius:0 0 2px 2px}
.stepc.goal .plate{background:#FDF3DF;border-color:var(--sand);color:#8A5A17}
.stepc .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.stepc h3{font-size:21px;font-weight:500;color:var(--deep);margin:6px 0 8px;line-height:1.4;max-width:34ch}
.stepc p.d{font-size:15px;color:var(--body);max-width:54ch}
.stepc .grid2{display:grid;grid-template-columns:1.02fr .98fr;gap:26px;align-items:start;margin-top:14px}
.bridge{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--sand);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:11px 15px;font-size:13.4px;color:var(--body)}
.bridge b{color:var(--navy);font-weight:500}
.booknote{margin-top:9px;font-size:12.6px;color:var(--muted);line-height:1.64}
.booknote b{color:var(--navy);font-weight:500}
.booknote a{color:var(--orange);text-decoration:none;font-weight:500}

/* การ์ดคลิป */
.clip{background:linear-gradient(150deg,#1A3A74,#0D1E44);border-radius:var(--r-m);aspect-ratio:16/9;
  display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.clip::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,rgba(35,92,140,.6),transparent 62%)}
.clip .play{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.62);
  display:grid;place-items:center;position:relative;z-index:2;transition:.18s}
.clip .play::before{content:"";border-left:13px solid #fff;border-top:8.5px solid transparent;border-bottom:8.5px solid transparent;margin-left:4px}
.clip:hover .play{background:rgba(255,255,255,.28);transform:scale(1.07)}
.clip .cap{position:absolute;left:14px;right:14px;bottom:11px;font-size:12.8px;color:rgba(255,255,255,.93);z-index:2;line-height:1.5}
.clip .id{position:absolute;right:12px;top:11px;font-family:var(--mono);font-size:10.5px;color:#fff;
  background:rgba(0,0,0,.4);border-radius:6px;padding:2px 8px;z-index:2;letter-spacing:.06em}
.vsub{font-size:12.6px;color:var(--muted);margin-top:8px;line-height:1.62}
.vpair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}

/* 3 ถัง */
.bk{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.bk .c{border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;background:var(--surface)}
.bk .c s{text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--orange)}
.bk .c b{display:block;font-size:15px;font-weight:500;color:var(--navy);margin-top:3px}
.bk .c p{font-size:12.8px;color:var(--body);margin-top:4px;line-height:1.6}
.bk .c.n{background:#F2F5FC} .bk .c.l{background:#FFFAF2}

/* การ์ด ebook */
.eb{display:grid;grid-template-columns:.38fr 1fr;gap:28px;align-items:center;margin-top:36px;
  background:linear-gradient(140deg,#FFFDF8,#F6F8FA);border:1px solid var(--line);border-radius:var(--r-l);padding:26px 30px}
.eb .cov{background:linear-gradient(160deg,var(--navy),var(--deep));border-radius:12px;aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px 18px;color:#fff;
  box-shadow:0 12px 30px rgba(11,28,63,.24);max-width:186px}
.eb .cov .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--sand)}
.eb .cov b{font-size:17px;font-weight:400;line-height:1.36;margin-top:6px;display:block}
.eb .cov p{font-size:10.5px;color:#AAB8DC;margin-top:7px;font-weight:200}
.eb h3{font-size:22px;font-weight:500;color:var(--deep);line-height:1.4;margin-bottom:8px}
.eb p.d{font-size:14.6px;color:var(--body)}
.eb .toc{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 16px}
.eb .toc span{font-family:var(--mono);font-size:11.5px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:4px 12px;color:var(--body)}
.eb .no{font-size:12.5px;color:var(--muted);margin-top:10px}

/* ---------- 4 เสา + 5 ชั้น ---------- */
.pil{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.pil .c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-m);padding:18px 16px}
.pil .c .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;margin-bottom:11px;border:1px solid rgba(255,255,255,.18)}
.pil .c .ic svg{width:19px;height:19px}
.pil .c b{display:block;font-size:16px;color:#fff;font-weight:400;margin-bottom:4px}
.pil .c p{font-size:12.8px;color:#AAB8DC;font-weight:200;line-height:1.62}
.bridgeline{margin:34px 0 6px;display:flex;align-items:center;gap:14px}
.bridgeline .l{flex:1;border-top:2px dashed rgba(255,255,255,.2);background:none;padding:0}
.bridgeline .pillcap{font-size:13.5px;color:var(--deep);background:var(--sand);border-radius:999px;padding:7px 20px;font-weight:400}

/* กรวย 5 ชั้น */
.funnel{margin-top:24px;display:grid;gap:9px}
.fr{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-m);padding:14px 18px;position:relative}
.fr .n{width:30px;height:30px;border-radius:9px;background:rgba(232,137,26,.85);color:#fff;
  font-family:var(--mono);font-size:13.5px;display:grid;place-items:center;flex:none;font-weight:500}
.fr .tx{flex:1}
.fr .tx b{display:block;font-size:15.5px;color:#fff;font-weight:400}
.fr .tx p{font-size:12.9px;color:#AAB8DC;font-weight:200;line-height:1.62;margin-top:3px}
.fr .tx p strong{font-weight:400;color:#fff}
.fr .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#D1DAF2;
  background:rgba(255,255,255,.12);border-radius:999px;padding:4px 11px;flex:none}
.fr.last{background:linear-gradient(100deg,rgba(232,137,26,.26),rgba(232,137,26,.12));border-color:rgba(232,185,120,.6)}
.fr.last .n{background:var(--sand);color:var(--deep)}
.fr.last .who{background:var(--sand);color:var(--deep)}
.pull{margin-top:24px;border-left:3px solid var(--sand);padding:4px 0 4px 20px;font-size:19px;
  font-weight:200;color:#fff;line-height:1.6;max-width:62ch}
.pull b{font-weight:400;color:var(--sand)}
.statbox{margin-top:22px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-m);padding:18px 22px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.statbox .big{font-family:var(--mono);font-size:38px;font-weight:500;color:var(--sand);line-height:1}
.statbox p{font-size:13.6px;color:#C5CDEC;font-weight:200}
.statbox p strong{font-weight:400;color:#fff}
.statbox .src{font-size:11.5px;color:#8F9FC7;margin-top:8px;font-weight:200}
.guards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.guards div{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-s);
  padding:14px 17px;font-size:12.9px;color:#BEC8E9;font-weight:200;line-height:1.66}
.guards div b{color:#fff;font-weight:400}
.guards em{font-style:normal;color:#fff}

/* ---------- บริการ: แทร็กหลักไมล์ + การ์ด 3 พอร์ต ---------- */
.track{background:var(--deep);border-radius:var(--r-l);padding:18px 20px;display:grid;gap:14px;
  position:relative;overflow:hidden;color:#DDE3F5;margin-top:26px}
.track::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 90% at 12% 0,rgba(232,137,26,.16),transparent 70%),
             repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 56px)}
.roadwrap{position:relative;z-index:1;border-radius:12px;overflow:hidden;background:#0D1E44}
.roadwrap svg{display:block;width:100%;height:auto}
.mile{transition:opacity .35s}
#span{transition:x .85s cubic-bezier(.16,.9,.24,1),width .85s cubic-bezier(.16,.9,.24,1),fill .35s}
#tcar{transition:transform .95s cubic-bezier(.16,.9,.24,1)}
#tcar .w{animation:spin 1.1s linear infinite;transform-box:fill-box;transform-origin:center}
.lanes{display:grid;gap:8px;position:relative;z-index:1}
.barrow{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.barrow::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-.5px);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 18px,transparent 18px 36px)}
.seg{font:inherit;font-size:13px;text-align:left;display:flex;align-items:center;gap:8px;border-radius:999px;
  padding:9px 15px;cursor:pointer;border:1px solid transparent;position:relative;overflow:hidden;transition:.18s;z-index:1}
.seg .dot2{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;opacity:.7}
.seg.gn{background:#1D3C76;color:#C2D2F7;grid-column:1/4}
.seg.aw{background:#1B4A3C;color:#B7E6D3;grid-column:1/3}
.seg.gmi{background:#5A3F13;color:#F0DCB2;grid-column:2/4}
.seg:hover,.seg.live{border-color:currentColor}
.tinynote{margin:2px 0 0;font-size:11.6px;color:#8FA0C9}
.tinynote b{color:#DDE3F5;font-weight:400}
.mileshort{display:none}

.ports{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-m);
  overflow:hidden;display:grid;align-content:start;scroll-margin-top:80px;transition:.2s}
.pcard.hit{box-shadow:0 0 0 2px var(--orange),var(--sh-m)}
.pcard.gmi{background:#FCFBF8}
.pstrip{height:104px;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#14305F,#25498F);color:#fff}
.pcard.aw .pstrip{background:linear-gradient(135deg,#17453A,#2E6B55)}
.pcard.gmi .pstrip{background:linear-gradient(135deg,#5B3F12,#9A6216);height:92px}
.pstrip .len{position:absolute;right:12px;top:11px;font-family:var(--mono);font-size:10.5px;
  background:rgba(0,0,0,.38);border-radius:6px;padding:2px 8px}
.pstrip .cap{position:absolute;left:14px;right:14px;bottom:10px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.93)}
.pbody{padding:16px 18px 18px;display:grid;gap:10px}
.pbody .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pttl{display:flex;align-items:center;gap:10px}
.pttl h3{margin:0;font-size:20px;font-weight:500;color:var(--deep);line-height:1.25}
.micon{width:44px;height:20px;flex:none}
.micon .b{stroke:var(--line);stroke-width:5;stroke-linecap:round}
.micon .f{stroke-width:5;stroke-linecap:round}
.by{font-size:12.6px;color:var(--muted);margin:-4px 0 0}
.forwho{font-size:14px;color:var(--body);line-height:1.68}
.forwho b{color:var(--deep);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{font-family:var(--mono);font-size:11.5px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:3px 11px;color:var(--body)}
.chips .hl{background:#FFF7EA;border-color:#EBD2A6;color:#8A5A17}
details{border-top:1px solid var(--hair);padding-top:9px}
details summary{cursor:pointer;font-size:13.4px;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--mono);color:var(--orange);font-size:16px}
details[open] summary::after{content:"–"}
details ul{margin:9px 0 0;padding-left:17px}
details li{font-size:13.2px;color:var(--body);line-height:1.66;margin-bottom:5px}
.fee{margin-top:18px;background:#FFF8EE;border:1px solid rgba(232,137,26,.34);border-radius:var(--r-m);
  padding:13px 17px;font-size:13.6px;color:#8A5306}
.fee b{color:#A35A06;font-weight:500}

/* แถวเสริม + ระดับการดูแล */
.addon{margin-top:18px;border:1px dashed #CFC7B8;border-radius:var(--r-l);padding:20px 22px;background:#FBFAF7}
.addon .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.addon h3{font-size:18px;font-weight:500;color:var(--deep);margin:6px 0 12px}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.agrid .a{border:1px solid var(--line);border-radius:var(--r-m);padding:13px 15px;background:#fff}
.agrid .a b{font-size:14px;color:var(--navy);font-weight:500;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.agrid .a b small{font-weight:300;font-size:11px;color:#fff;background:var(--navy);border-radius:999px;padding:2px 8px}
.agrid .a p{font-size:12.4px;color:var(--body);margin-top:5px;line-height:1.6}
.tiers{margin-top:8px}
.tiers .r{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--hair);font-size:13.6px;color:var(--body)}
.tiers .r:first-child{border-top:none}
.tiers .r b{font-family:var(--mono);color:var(--navy);font-weight:500;min-width:124px;flex:none;font-size:12.5px;letter-spacing:.02em}

/* ภาษี */
.tax{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 24px;box-shadow:var(--sh-m)}
.lv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.lv div{border:1px solid var(--line);border-radius:var(--r-s);padding:10px 8px;background:#fff;text-align:center}
.lv div b{display:block;font-family:var(--mono);font-size:13px;color:var(--navy);font-weight:500}
.lv div s{text-decoration:none;display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45}
.lv div:nth-child(1){background:#F2F5FC} .lv div:nth-child(4){background:#FFF7EE}
.how{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 15px;background:#FBFAF7}
.how .h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.how .two{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px;color:var(--body)}
.how .two b{color:var(--navy);font-weight:500;display:block;font-size:12.5px}

/* ---------- โบนัสลูกค้า ---------- */
.perkchips{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 8px}
.perkchips div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-m);padding:12px 18px;font-size:14px}

/* ---------- มีพอร์ตอยู่แล้ว ---------- */
.exist{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:32px 34px;box-shadow:var(--sh-m)}
.exist h3{font-size:23px;font-weight:500;color:var(--deep);margin:10px 0 10px;line-height:1.36}
.exist p{font-size:14.6px;color:var(--body)}
.crit{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 20px}
.crit .h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.crit li{list-style:none;font-size:13.8px;color:var(--body);padding:7px 0 7px 26px;position:relative;line-height:1.62}
.crit li::before{content:"";position:absolute;left:3px;top:15px;width:8px;height:8px;border-radius:50%;
  border:2px solid var(--sand)}

/* ---------- soul + cadence ---------- */
.soul{margin-top:24px;background:linear-gradient(150deg,#FFFDF8,#FDF7EE);border:1px solid #F0E6D4;
  border-left:3px solid var(--orange);border-radius:0 var(--r-l) var(--r-l) 0;padding:26px 30px;box-shadow:0 10px 32px rgba(181,126,26,.1)}
.soul .top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.soul .av{width:46px;height:46px;border-radius:50%;flex:none;background:linear-gradient(150deg,var(--navy),var(--orange));
  display:grid;place-items:center;color:#fff;font-weight:500;font-size:18px;box-shadow:0 5px 14px rgba(11,28,63,.22)}
.soul .sh{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.soul .sh s{display:block;text-decoration:none;font-family:var(--sans);font-size:15.5px;letter-spacing:0;
  text-transform:none;color:var(--deep);font-weight:500;margin-top:2px}
.soulgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
.soul p{font-size:14.6px;color:var(--body);line-height:1.86;margin-bottom:12px}
.soul p:last-of-type{margin-bottom:0}
.soul b{color:var(--navy);font-weight:500}
.soul .fit{margin:17px 2px 0;font-size:15px;color:var(--deep);line-height:1.82}
.soul .close{background:#FFF6E9;border:1px solid #F4E3C6;border-radius:var(--r-m);padding:15px 18px;
  margin-top:14px;color:var(--deep);font-size:14.6px;line-height:1.82}
.cad{width:100%;border-collapse:separate;border-spacing:0;margin-top:26px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-m)}
.cad th{background:var(--deep);color:#fff;font-weight:400;font-size:12.5px;text-align:left;padding:13px 20px;
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cad td{border-top:1px solid var(--hair);padding:15px 20px;font-size:14.2px;vertical-align:top;color:var(--body)}
.cad td:first-child{width:25%;color:var(--navy);font-weight:500;white-space:nowrap}
.cad tr:nth-child(even) td{background:#FBFAF7}

/* ---------- verify + book ---------- */
.ver{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:24px 26px;box-shadow:var(--sh-m)}
.lic{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--hair)}
.lic:first-of-type{border-top:none}
.lic .k{font-size:12.5px;color:var(--muted);min-width:122px;flex:none}
.lic .v{font-size:15px;color:var(--ink);font-weight:400}
.lic .v a{font-size:12.5px;color:var(--navy);display:block;font-weight:300;text-decoration:none}
.book{background:linear-gradient(150deg,var(--navy),var(--deep));color:#fff;border-radius:var(--r-l);padding:26px 28px}
.book h3{font-size:22px;font-weight:500;margin-bottom:8px}
.book p{font-size:14px;color:#CAD3EF;font-weight:200}
.field{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-s);
  padding:11px 15px;margin-top:10px;font-size:13.5px;color:#A0B2DA}
.book .note{font-size:11.8px;color:#A9B9DC;margin-top:12px;font-weight:200}
.flow{display:grid;gap:0;margin:18px 0 6px}
.fstep{display:grid;grid-template-columns:34px 1fr;gap:13px;position:relative;padding-bottom:16px}
.fstep:last-child{padding-bottom:0}
.fstep::before{content:"";position:absolute;left:16px;top:32px;bottom:2px;width:2px;
  background:repeating-linear-gradient(180deg,rgba(232,185,120,.45) 0 5px,transparent 5px 10px)}
.fstep:last-child::before{display:none}
.fstep .fn{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);
  border:1px solid rgba(232,185,120,.45);color:var(--sand);font-family:var(--mono);font-size:14px;
  display:grid;place-items:center;flex:none}
.fstep.now .fn{background:var(--sand);color:var(--deep);border-color:var(--sand)}
.fstep b{display:block;font-size:14.6px;color:#fff;font-weight:400;line-height:1.5}
.fstep p{font-size:12.8px;color:#A9B9DC;font-weight:200;line-height:1.66;margin-top:3px}
.fstep .when{font-family:var(--mono);font-size:10.5px;color:var(--sand);letter-spacing:.06em}
.startbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:16px;
  background:var(--orange);color:#fff;border-radius:999px;padding:14px 20px;text-decoration:none;
  font-size:15px;font-weight:400;box-shadow:0 10px 24px rgba(232,137,26,.3);transition:.16s}
.startbtn:hover{background:#D67C12;transform:translateY(-1px)}
.startmeta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:11px}
.startmeta span{font-family:var(--mono);font-size:10.5px;color:#BDC8E9;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px 10px}

/* ---------- footer ---------- */
.foot{background:var(--night);color:#8F9FC7;padding:46px 60px 34px;font-size:13px;font-weight:200}
.foot .top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;max-width:1040px;margin:0 auto 26px}
.foot .logo{display:block;height:48px;width:170px;background:var(--logo) left center/contain no-repeat;
  filter:brightness(0) invert(1);opacity:.9;margin-bottom:12px}
.foot h5{color:#fff;font-size:12.5px;font-weight:400;margin-bottom:9px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.foot a{color:#8F9FC7;text-decoration:none;display:block;padding:3px 0}
.foot a:hover{color:#fff}
.disc{max-width:1040px;margin:0 auto;border-top:1px solid rgba(255,255,255,.1);padding-top:18px;
  font-size:11.6px;line-height:1.78;color:#7F8FB9}

/* ---------- หมายเหตุ mockup ---------- */
.mk{position:absolute;left:14px;top:26px;background:#7A2EA8;color:#fff;font-family:var(--mono);font-size:10px;
  border-radius:5px;padding:2px 8px;letter-spacing:.05em;z-index:5}
.an{background:#F6F0FB;border:1px dashed #B48ED4;border-radius:var(--r-s);padding:11px 15px;
  font-size:12.4px;color:#5B3D80;margin-top:16px;line-height:1.7}
.an b{color:#4A2D6D;font-weight:500}
.dark .an,.hero .an{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#D1DAF2}
.dark .an b,.hero .an b{color:#fff}
body.clean .mk,body.clean .an{display:none}

.nav .mk{left:10px;top:50%;transform:translateY(-50%)}
.toggle{position:fixed;right:18px;bottom:18px;z-index:99;background:var(--deep);color:#fff;border:none;
  font-family:var(--sans);font-size:12.5px;font-weight:300;border-radius:999px;padding:10px 20px;
  cursor:pointer;box-shadow:0 8px 24px rgba(11,28,63,.35)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,.9,.24,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .sec,.nav,.hero,.foot,.pillars{padding-left:26px;padding-right:26px}
  .scene{margin-left:-26px;margin-right:-26px}
  .ridenote{padding-left:26px;padding-right:26px}
  .stepc .grid2,.exist,.ver,.soulgrid,.foot .top,.statbox{grid-template-columns:1fr}
  .p3 .row,.pil,.bk,.agrid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
  .nav .links{display:none}
  .eb{grid-template-columns:1fr}
  .eb .cov{max-width:150px}
  .guards{grid-template-columns:1fr}
}
@media(max-width:640px){
  .stage{padding:0 8px}
  .sec{padding-top:56px;padding-bottom:56px}
  .p3 .row,.pil,.bk,.agrid,.vpair,.lv,.how .two{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .road{padding-left:52px}
  .road::before{left:17px}
  .sign{left:-52px;width:36px}
  .roadwrap{display:none}
  .mileshort{display:grid;position:relative;z-index:1;background:#0D1E44;border-radius:12px;padding:12px 14px}
  .mileshort ol{list-style:none;display:grid;gap:9px}
  .mileshort li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;position:relative}
  .mileshort li::before{content:"";position:absolute;left:16px;top:26px;bottom:-9px;width:2px;
    background:repeating-linear-gradient(180deg,rgba(244,230,204,.5) 0 5px,transparent 5px 10px)}
  .mileshort li:last-child::before{display:none}
  .mileshort .n{font-family:var(--mono);font-size:14px;color:#132C59;background:#FBF4E7;border:1px solid #D9C7A6;
    border-radius:8px;text-align:center;padding:4px 0;line-height:1}
  .mileshort li:last-child .n{background:#FDF3DF;border-color:#E8B978;color:#8A5A17}
  .mileshort .t{font-size:13.5px;color:#DDE3F5}
  .barrow{grid-template-columns:1fr}
  .barrow::before{display:none}
  .seg{grid-column:1 !important}
  .cad td:first-child{width:auto;white-space:normal}
  .cad td,.cad th{padding:11px 14px;font-size:13.4px}
}

/* =================== v8 · ชั้นปรับดีไซน์ให้ดูหรู (คำ/ลำดับ/กราฟิกเดิมจาก v6) =================== */
body{background:var(--paper);font-size:16px}
.stage{max-width:none;margin:0;padding:0}
.frame{border-radius:0;box-shadow:none;overflow:visible;background:var(--paper)}
:root{--paper:#F7F6F2;--sunk:#EFEDE7;--cream:#FBF6EC;--line:#E4E1D9;--hair:#ECE9E2}

/* ตัวอักษรไทย: เลิกใช้ฟอนต์ mono กับคำไทย (อ่านยาก ดูห่าง) */
.eyebrow,.stepc .st,.p3 .c .tag,.pbody .tag,.addon .tag,.crit .h,.how .h,.soul .sh,.cad th,.foot h5,.bk .c s,.fstep .when,.hero .kick{
  font-family:var(--sans)!important;letter-spacing:.08em!important;font-weight:400}
.eyebrow{font-size:12.5px;color:var(--gold)}
.eyebrow::before{width:28px;height:1px;opacity:.9}
h2{font-size:clamp(28px,3.3vw,40px);font-weight:300;line-height:1.22;max-width:24ch;letter-spacing:-.015em}
h2 b{font-weight:500}
.lede{font-size:16.5px;line-height:1.78;max-width:58ch}
.head{margin-bottom:34px}
.sec{padding:112px 60px}
.sec.tight{padding:84px 60px}
.inner{max-width:1080px}

/* NAV */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1320px,calc(100% - 40px));height:66px;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 10px 0 30px;
  background:rgba(255,255,255,.97);border:0;border-radius:999px;box-shadow:0 12px 36px rgba(8,20,48,.18);backdrop-filter:blur(12px);overflow:hidden}
.nav .links{margin:0;gap:26px}
.nav .links a{font-size:15px;color:var(--ink);position:relative}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav .links a:hover::after{transform:scaleX(1)}
.nav .logo{width:auto;height:auto;background:none;justify-self:center}
.nav .logo img{height:30px;width:auto}
.nav .cta{justify-self:end;margin:0}
.nav .cta .btn{padding:12px 22px;font-size:14.5px;white-space:nowrap}
.navbar{bottom:0;height:2px}

/* HERO */
.hero{padding:156px 60px 0;background:radial-gradient(70% 90% at 80% 20%,#22468A 0%,rgba(34,70,138,0) 60%),linear-gradient(165deg,#1A3A74 0%,var(--deep) 52%,var(--night) 100%)}
.hero::before{background:radial-gradient(40% 55% at 82% 30%,rgba(232,137,26,.14),transparent 70%)}
.hero .inner{position:relative;min-height:470px}
.hero h1{font-size:clamp(32px,3.6vw,48px);max-width:none;line-height:1.2}
.hero .define,.hero .sell,.hero .acts,.hero .jump,.hero .kick{position:relative;z-index:2;max-width:560px}
.hero .define{font-size:17px}
.hero .acts .btn{padding:14px 26px;font-size:15.5px}
.hph{position:absolute;right:-10px;bottom:-34px;height:540px;width:auto;aspect-ratio:694/1100;margin:0;z-index:1}
.hph img{width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 24px 40px rgba(0,8,30,.45))}
.hph::before{content:"";position:absolute;left:-12%;right:-12%;top:12%;bottom:0;background:radial-gradient(55% 55% at 50% 45%,rgba(232,185,120,.18),transparent 70%);z-index:-1}
.lcard{position:absolute;right:-36px;bottom:110px;background:rgba(11,28,63,.84);border:1px solid rgba(232,185,120,.35);backdrop-filter:blur(8px);
  border-radius:14px;padding:12px 16px;color:#fff;font-size:13.5px;line-height:1.45;box-shadow:0 18px 40px rgba(0,8,30,.35)}
.lcard b{display:block;font-weight:400}
.lcard span{font-family:var(--mono);font-size:12px;color:var(--sand)}
.scene{z-index:2}
.trust{max-width:1080px;padding:24px 0 34px}
.trust div b{font-size:15px}

/* 3 เสา */
.pillars{padding:96px 60px;background:var(--paper)}
.p3 .row{gap:18px}
.p3 .c{padding:24px 22px 22px;border-radius:18px;box-shadow:0 1px 2px rgba(11,28,63,.04)}
.p3 .c b{font-size:19px}
.p3 .c p{font-size:14.2px}
.p3 .kick{margin-top:26px;font-size:19px}

/* บันได 4 ขั้น: โครง/คำเดิม แต่จัดลำดับสายตาใหม่ */
#ladder{background:#fff!important}
.arcbar span{padding:7px 18px;font-size:13.5px}
.road{padding-left:92px;margin-top:44px}
.road::before{left:30px;background:repeating-linear-gradient(180deg,rgba(27,58,117,.28) 0 10px,transparent 10px 20px)}
.sign{left:-92px;width:62px}
.sign .plate{background:var(--deep);border:0;color:var(--sand);font-size:17px;padding:10px 0;border-radius:12px;box-shadow:0 8px 20px rgba(11,28,63,.18)}
.sign .post{background:var(--sand);opacity:.6;width:2px;height:18px}
.stepc.goal .plate{background:linear-gradient(160deg,#F2C985,#E8B978);color:var(--deep)}
.stepc{padding:0 0 64px;margin-bottom:64px;border-bottom:1px solid var(--hair)}
.stepc:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.stepc .st{font-size:12.5px;color:var(--orange)}
.stepc h3{font-size:clamp(22px,2.2vw,27px);font-weight:400;margin:8px 0 14px;max-width:30ch}
.stepc p.d{font-size:16px;line-height:1.8;color:var(--body)}
.stepc .grid2{gap:44px;margin-top:4px}
.bridge{background:var(--paper);border:0;border-left:2px solid var(--sand);border-radius:0 12px 12px 0;padding:13px 16px;font-size:14px;margin-top:20px}
.bridge b{font-weight:400}
.booknote{font-size:13.2px;margin-top:12px;color:var(--muted)}
.booknote a{font-weight:400}
.ic{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:6px;background:var(--orange);
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-go{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15.5 8.5l-2 5-5 2 2-5z'/></svg>")}
.ic-bk{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5A2 2 0 0 1 6 4h5v16H6a2 2 0 0 0-2 1.5z'/><path d='M20 5.5A2 2 0 0 0 18 4h-5v16h5a2 2 0 0 1 2 1.5z'/></svg>")}
.ic-cap{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9l10-5 10 5-10 5z'/><path d='M6 11v5c3 2 9 2 12 0v-5'/></svg>")}
.ic-new{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z'/></svg>")}
.booknote .ic{background:var(--gold)}

/* การ์ดคลิป: ภาพจากคลิปจริง */
.clip{border-radius:16px;border:0;box-shadow:0 18px 40px rgba(11,28,63,.16);background-size:cover;background-position:center}
.clip::after{background:linear-gradient(180deg,rgba(11,28,63,.05) 30%,rgba(11,28,63,.82) 100%)}
.clip .play{width:58px;height:58px;background:var(--orange);border:0;box-shadow:0 10px 26px rgba(232,137,26,.45)}
.clip:hover .play{background:#D67C12}
.clip .cap{font-size:14px;bottom:14px;left:18px;right:18px}
.clip .id{background:rgba(11,28,63,.7)}
.vsub{font-size:13px}
.vpair{gap:26px;margin-top:26px}








.bk{gap:16px;margin-top:22px}
.bk .c{border-radius:14px;padding:18px 20px}
.bk .c b{font-size:16.5px}
.eb{border-radius:24px;padding:34px 38px;background:linear-gradient(140deg,#fff,#F3F5FB);border-color:var(--line);margin-top:70px}
.eb .cov{background:linear-gradient(160deg,#25498F,var(--deep))}

/* โทนเข้ม (บล็อก 3 + โบนัส) */
.dark{background:linear-gradient(168deg,#183670 0%,var(--deep) 45%,var(--night) 100%)}
.pil{gap:16px}
.pil .c{padding:22px 20px;border-radius:18px}
.fr{padding:16px 20px;border-radius:16px}
.statbox,.guards div{border-radius:16px}

/* บริการ */
.track{border-radius:24px;padding:22px 24px}
.ports{gap:22px;margin-top:22px}
.pcard{border-radius:22px;box-shadow:0 1px 2px rgba(11,28,63,.05),0 12px 32px rgba(11,28,63,.06)}
.pbody{padding:20px 22px 22px}
.pttl h3{font-size:22px}
.fee{border-radius:16px;margin-top:24px}
.tax{border-radius:22px;padding:28px 30px;box-shadow:none}

/* ประตูที่สอง: Definit */
.door{margin-top:64px;border-radius:28px;padding:52px 54px;color:#DDE3F5;position:relative;overflow:hidden;
  background:radial-gradient(70% 120% at 100% 0,#22468A 0%,rgba(34,70,138,0) 60%),linear-gradient(165deg,#1A3A74,var(--deep) 55%,var(--night))}
.door::after{content:"";position:absolute;right:-60px;top:-40px;width:520px;height:300px;pointer-events:none;opacity:.35;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 300'><g fill='none' stroke='%23E8B978' stroke-opacity='.5'><path d='M0 260 L60 222 L110 240 L170 170 L230 188 L290 120 L350 146 L410 78 L470 96 L520 34'/></g><g fill='%23E8891A'><circle cx='290' cy='120' r='3.5'/><circle cx='410' cy='78' r='3.5'/></g></svg>") center/contain no-repeat}
.door>*{position:relative;z-index:1}
.dtop{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.door .eyebrow{color:var(--sand)}
.door h3{font-size:clamp(25px,2.7vw,34px);font-weight:300;color:#fff;margin-top:12px;line-height:1.3}
.door h3 b{font-weight:500;color:var(--sand)}
.dtop p{color:#B1BFE1;max-width:62ch;margin-top:12px;font-size:15.5px}
.dby{font-size:12.5px;color:#A0B2DA;text-align:right;line-height:1.6}
.dby b{display:block;color:#fff;font-weight:400;font-size:15px;margin-bottom:8px}
.dd{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.dc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:26px 28px}
.dc .hd{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.dc h4{font-size:21px;font-weight:500;color:#fff}
.dc .hd small{font-size:13px;color:#A0B2DA}
.dc .min{font-family:var(--mono);font-size:22px;color:var(--sand);text-align:right;white-space:nowrap}
.dc .min small{display:block;font-family:var(--sans);font-size:11.5px;color:#A0B2DA}
.how2{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.how2 span{font-size:12.5px;border:1px solid rgba(232,185,120,.4);color:#F1DDB8;border-radius:999px;padding:4px 12px}
.how2 b{font-family:var(--mono);font-weight:500;color:#fff;margin-right:6px}
.dc dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:16px;font-size:14px}
.dc dt{color:#8FA0C9}.dc dd{color:#DDE3F5}
.drule{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:13.8px;color:#B1BFE1}
.drule b{display:block;color:#fff;font-weight:400;font-size:15px;margin-bottom:4px}
.dcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ddisc{margin-top:16px;font-size:12.5px;color:#8FA0C9}
.agrid.two{grid-template-columns:1fr 1fr}
.addon{border-style:solid;border-color:var(--line);background:#fff;border-radius:22px;padding:24px 26px}

/* มีพอร์ตอยู่แล้ว / why / verify */
.exist{border-radius:24px;padding:40px 42px;box-shadow:0 1px 2px rgba(11,28,63,.05),0 14px 36px rgba(11,28,63,.06)}
.soul{border-radius:0 26px 26px 0;padding:34px 38px}
.soul .av{width:64px;height:64px;padding:0;overflow:hidden;background:var(--deep);border:2px solid #fff;box-shadow:0 8px 20px rgba(11,28,63,.2)}
.soul .av img{width:100%;height:100%;object-fit:cover}
.cad{border-radius:18px}
.cad th{background:var(--deep)}
.vcard,.book{border-radius:24px}
.book{background:radial-gradient(70% 110% at 100% 0,#22468A,rgba(34,70,138,0) 60%),linear-gradient(160deg,#1A3A74,var(--deep))}

/* footer */
.foot .logo{background:url(/assets/img/logo-v-white.png) left center/contain no-repeat!important;filter:none!important;height:84px;width:120px}
.odo{background:rgba(11,28,63,.95)}

/* motion: เข้าฉากนุ่มขึ้น */
.reveal{transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}

@media(max-width:1100px){
  .nav .links{display:none}
  .nav{grid-template-columns:auto 1fr;padding:0 8px 0 22px}.nav .logo{justify-self:start}
  .hph{right:-40px;height:470px}
  .lcard{right:0}
}
@media(max-width:940px){
  .hero .inner{min-height:0}
  .hph{position:relative;right:auto;bottom:auto;display:block;height:auto;width:min(72%,340px);margin:30px auto -8px}
  .lcard{right:-10%;bottom:60px}
  .dtop,.dd,.drule{grid-template-columns:1fr}.dby{text-align:left}
  .road{padding-left:72px}.sign{left:-72px;width:48px}.road::before{left:23px}
}
@media(max-width:640px){
  .nav{height:58px;width:calc(100% - 24px);top:10px}.nav .logo img{height:22px}.nav .cta .btn{padding:10px 13px;font-size:12.5px}.nav{gap:10px;padding:0 6px 0 16px}.nav .logo img{height:20px}.nav .cta .ph{display:none}
  .hero{padding:110px 22px 0}
  .sec,.pillars{padding:72px 22px}.sec.tight{padding:60px 22px}
  h2{font-size:27px}
  .road{padding-left:58px}.sign{left:-58px;width:40px}.sign .plate{font-size:14px;padding:8px 0}.road::before{left:19px}
  .stepc{padding-bottom:44px;margin-bottom:44px}
  .door{padding:30px 22px;border-radius:22px}
  .dc{padding:22px}.dc .hd{flex-direction:column}.dc .min{text-align:left}
  .agrid.two{grid-template-columns:1fr}
  .exist{padding:28px 22px}.soul{padding:26px 22px}
}

/* =================== v9 · ตามข้อติ 4 ต.ค. =================== */
/* hero กระชับ + เท่ */
.hero{padding:150px 60px 0;min-height:min(820px,100vh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero .inner{min-height:0;padding-bottom:96px;width:100%}
.big60{position:absolute;right:4%;top:90px;font-family:var(--sans);font-weight:600;font-size:min(42vw,620px);line-height:.8;color:transparent;
  -webkit-text-stroke:1.5px rgba(232,185,120,.18);letter-spacing:-.04em;pointer-events:none;user-select:none;z-index:0!important}
.hline{position:absolute;inset:0;width:100%;height:100%;z-index:0!important;pointer-events:none}
.hline path{stroke-dashoffset:1400;animation:hl 2.8s .3s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes hl{to{stroke-dashoffset:0}}
.hero h1{margin-top:18px}
.h1a{display:block;font-size:clamp(56px,7.4vw,108px);font-weight:500;line-height:1;letter-spacing:-.03em;color:#fff}
.h1a em{font-style:normal;color:var(--orange);font-weight:600}
.h1b{display:block;font-size:clamp(22px,2.3vw,32px);font-weight:300;line-height:1.35;margin-top:14px;color:#DDE3F5}
.h1b b{font-weight:400;color:#fff}
.hero .define{margin-top:22px;font-size:16px}
.hero .sell{font-size:15px}
.hph{right:0;bottom:0;height:min(640px,72vh)}
.hero .inner{position:static}
.hph{position:absolute;right:max(40px,calc((100% - 1180px)/2));bottom:0}
.lcard{right:-24px;bottom:150px}
@media (prefers-reduced-motion:reduce){.hline path{animation:none;stroke-dashoffset:0}}

/* แถบถนน: สว่าง แยกจาก hero ชัด */
.roadband{background:var(--paper);padding:56px 60px 30px}
.rbin{max-width:1180px;margin:0 auto}
.roadband .scene{margin:0;border-radius:26px;overflow:hidden;box-shadow:0 26px 60px rgba(11,28,63,.22)}
.roadband .ridenote{padding:18px 4px 0;color:var(--body);font-size:14.5px}
.roadband .trust{border-top:1px solid var(--line);margin-top:22px;padding:22px 0 0;max-width:none}
.roadband .trust div{color:var(--muted)}
.roadband .trust div b{color:var(--deep)}
.roadband .milelist .t{color:var(--ink)}.roadband .milelist .t small{color:var(--muted)}
.roadband .milelist li::before{background:repeating-linear-gradient(180deg,rgba(27,58,117,.35) 0 5px,transparent 5px 10px)}
.pillars{background:#fff}

/* 3 เสา */
.p3 .roof{display:block;width:100%;height:56px;color:#C9B590;margin:6px 0 -2px}
.p3 .row{gap:22px;align-items:stretch}
.p3 .c{display:grid;grid-template-columns:60px 1fr;column-gap:20px;align-items:end;padding:22px 22px 22px 18px;border-radius:6px 6px 14px 14px}
.p3 .c>*:not(.col){grid-column:2}
.p3 .c .col{grid-column:1;grid-row:1 / span 4;width:60px;height:190px;align-self:end}
.col .cap{fill:#E7DFCF}.col .cap2{fill:#DCD1BC}.col .shaft{fill:#F3EEE4}.col .flute line{stroke:#D8CDB8;stroke-width:1.4}
.col .fill{fill:#AEB9CF;transition:y 1.4s cubic-bezier(.2,.7,.2,1),height 1.4s cubic-bezier(.2,.7,.2,1)}
.p3 .c.on .col .fill{fill:url(#none);fill:var(--orange)}
.p3 .c.on .col .cap,.p3 .c.on .col .cap2{fill:#F2D7A6}
.p3 .base{height:10px;border-radius:4px;background:linear-gradient(90deg,#E4DCCB,#D9CDB4,#E4DCCB);margin-top:-2px}

/* บันได: ถนนจริง */
.road::before{left:21px;width:20px;border-radius:10px;background:#2A3550;box-shadow:inset 0 0 0 2px #3A4767}
.road::after{content:"";position:absolute;left:30px;top:12px;bottom:12px;width:2px;background:repeating-linear-gradient(180deg,#E8B978 0 12px,transparent 12px 24px);opacity:.85}
.sign{z-index:2}
.lcar{position:absolute;left:17px;top:0;width:28px;height:44px;z-index:3;transition:transform .25s linear;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.lcar svg{width:100%;height:100%}
.res{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.res .bridge,.res .booknote{margin:0;border:0;border-radius:14px;padding:14px 16px 15px;font-size:13.6px;line-height:1.6;color:var(--body)}
.res .bridge{background:#EAF0FB;border-top:3px solid var(--navy)}
.res .booknote{background:#FBF2E1;border-top:3px solid var(--sand)}
.res .rl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.06em;font-weight:500;border-radius:999px;padding:3px 10px;margin-bottom:8px}
.res .bridge .rl{background:var(--navy);color:#fff}
.res .booknote .rl{background:#E8B978;color:#5A3A0C}
.res .bridge .ic{background:var(--navy)}
.res .booknote .ic{background:#B07A2A}
.stepc .grid2 .res{grid-template-columns:1fr}

/* ถัง */
.bkwrap{margin-top:22px;position:relative}
.bkwrap .flow{display:block;width:100%;height:auto;margin-bottom:-14px}
.bk{margin-top:0}
.bk .c{text-align:center;padding:18px 18px 20px}
.bucket{width:120px;height:120px;display:block;margin:0 auto 8px}
.bucket .lvl{transition:y 1.6s cubic-bezier(.2,.7,.2,1)}
.coin{opacity:0}
.bkwrap.go .coin{opacity:1}

/* รู้หลักแล้ว: ส่วนสว่าง */
.simple{background:var(--paper)}
.simple .pil .c{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,28,63,.04)}
.simple .pil .c b{color:var(--deep)}
.simple .pil .c p{color:var(--body)}
.simple .lede strong{color:var(--deep)!important}
.simple .bridgeline .l{border-color:rgba(27,58,117,.2)}
.simple .bridgeline .pillcap{background:var(--deep);color:#fff}
.simple .pil .c .ic{background:var(--deep)!important;border-color:var(--deep)!important}
.simple .pil .c .ic svg{stroke:#E8B978}
/* 5 ชั้น: เข้ม แต่สั้น */
.five{padding-top:96px;padding-bottom:96px}
.five .head h2{max-width:22ch}
.fgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
.fr{cursor:pointer;outline:0}
.fr .tx p{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .35s,margin .35s;margin-top:0}
.fr:hover .tx p,.fr:focus .tx p,.fr.open .tx p{max-height:120px;opacity:1;margin-top:4px}
.fr .tx b::after{content:" +";color:var(--sand);font-family:var(--mono);font-size:13px}
.fr:hover .tx b::after,.fr:focus .tx b::after,.fr.open .tx b::after{content:" −"}
.fside .pull{margin-top:0;font-size:18px}
.fside .statbox{grid-template-columns:1fr;gap:10px}
.fside .statbox .big{font-size:56px}
.gfold{margin-top:26px;border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.gfold summary{color:#DDE3F5;font-size:14.5px}
.gfold summary::after{color:var(--sand)}
.gfold .guards{margin-top:14px}

/* why */
.soulgrid{grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.soul .sh s{font-size:24px!important;font-weight:400!important}
.soul .close{margin-top:16px}
.more{border-top:1px solid #F0E3CC;margin-top:16px;padding-top:10px}
.more summary{font-size:14px;color:var(--navy)}
.more p{margin-top:10px}
.cadg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:22px}
.cadg .cd{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.cadg .cd .w{display:block;font-size:13px;color:var(--orange);font-weight:500;margin-bottom:6px;line-height:1.4}
.cadg .cd .w span{color:var(--muted)!important;font-size:12px!important;display:inline!important}
.cadg .cd .w br{display:none}
.cadg .cd p{font-size:13.8px;color:var(--body);line-height:1.62}
.cadg .cd:last-child{background:var(--deep);border-color:var(--deep)}
.cadg .cd:last-child .w{color:var(--sand)}.cadg .cd:last-child p,.cadg .cd:last-child p strong{color:#fff!important}

@media(max-width:940px){
  .hero{min-height:0;display:block}
  .hero .inner{padding-bottom:0}
  .hph{position:relative;right:auto;bottom:auto;height:auto;width:min(72%,340px);margin:30px auto 0}
  .big60{font-size:70vw;top:auto;bottom:0}
  .fgrid{grid-template-columns:1fr}
  .res{grid-template-columns:1fr}
  .soulgrid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .roadband{padding:36px 22px 20px}
  .h1a{font-size:54px}
  .p3 .c{grid-template-columns:44px 1fr}.p3 .c .col{width:44px;height:140px}
  .p3 .roof{height:36px}
  .road::before{left:12px;width:16px}.road::after{left:19px}.lcar{left:8px;width:24px;height:38px}
  .bucket{width:96px;height:96px}
  .bkwrap .flow{display:none}
}

/* =================== v10 · เมนูใหม่ (แบบ C) =================== */
.nav{overflow:visible;grid-template-columns:1fr auto 1fr;padding:0 10px 0 22px}
.navbar{left:34px;right:auto;max-width:calc(100% - 68px)}
.nav .links{gap:4px;display:flex}
.dd2{position:relative}
.dd2 .top{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border-radius:999px;font-size:15px;color:var(--ink);text-decoration:none;transition:background .2s}
.dd2 .top::after{display:none}
.dd2:hover .top,.dd2.open .top,.dd2.act .top{background:#EEF1F8}
.dd2.act .top{color:var(--navy);font-weight:400}
.car2{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .25s}
.dd2.open .car2{transform:rotate(225deg) translate(-2px,-1px)}
.nav .cta{display:flex;align-items:center;gap:16px}
.nav .have{font-size:14.5px;color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--sand)}
.nav .have:hover{color:var(--orange)}
.burger{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--deep);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger i{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
body.mopen .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}body.mopen .burger i:nth-child(2){opacity:0}body.mopen .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* แผงเมนูย่อย */
.mpanels{position:fixed;top:88px;left:50%;transform:translateX(-50%);width:min(1100px,calc(100% - 40px));z-index:59;pointer-events:none}
.mp{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .3s;pointer-events:none;
  background:#fff;border-radius:26px;box-shadow:0 30px 70px rgba(8,20,48,.22);border:1px solid var(--hair);overflow:hidden}
.mp.on{opacity:1;transform:none;pointer-events:auto}
.mpg{display:grid;grid-template-columns:280px 1fr}
.mp .art{background:linear-gradient(160deg,#F3F5FB,#EAEFF9);padding:26px 26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.mp .art svg{width:100%;height:auto}
.mp .art p{font-size:13.5px;color:var(--body);line-height:1.6}
.mp .who{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mp .who img{width:78px;height:78px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 20px rgba(11,28,63,.18);margin-bottom:6px}
.mp .who b{font-weight:500;color:var(--deep);font-size:16px}.mp .who span{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.mp .its{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:18px}
.mi{display:block;padding:14px 16px;border-radius:16px;text-decoration:none;transition:background .2s;position:relative}
.mi:hover,.mi:focus{background:#F4F6FB;outline:0}
.mi b{display:block;font-weight:500;color:var(--deep);font-size:15.5px}
.mi span{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px}
.mi .mt{display:inline-block;font-family:var(--mono);font-size:10.5px;color:#8A5A17;background:#FBF2E1;border-radius:999px;padding:1px 8px;margin:0 0 6px}
.mi:hover b{color:var(--orange)}

/* มือถือ */
.mobmenu{position:fixed;inset:0;z-index:58;background:rgba(11,28,63,.97);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto}
body.mopen .mobmenu{opacity:1;pointer-events:auto}
.mbin{padding:96px 24px 40px;max-width:560px;margin:0 auto}
.mg{border-bottom:1px solid rgba(255,255,255,.1);padding:16px 0}
.mg .mh{display:block;color:#fff;font-size:20px;font-weight:400;text-decoration:none;margin-bottom:6px}
.mg .mi{padding:9px 0;border-radius:0}
.mg .mi:hover{background:none}
.mg .mi b{color:#DDE3F5;font-size:15px;font-weight:300}.mg .mi span{display:none}.mg .mi .mt{display:none}
.mcta{margin-top:24px;width:100%;justify-content:center}

@media(max-width:1180px){
  .nav .have{display:none}
}
@media(max-width:1100px){
  .nav .links{display:none!important}
  .burger{display:flex}
  .mpanels{display:none}
}
@media(max-width:640px){
  .nav .cta .btn{display:none}
  .nav{grid-template-columns:1fr auto}
}

/* พื้นหลังภาพจริงแบบจาง (ไม่รกหลังตัวหนังสือ) */
#why,#perk,#five{position:relative;overflow:hidden;isolation:isolate}
#why::before{content:"";position:absolute;right:0;top:0;width:55%;height:620px;z-index:-1;pointer-events:none;
  background:url(/assets/img/bg-why.webp) 40% 30%/cover no-repeat;opacity:.16;
  -webkit-mask:linear-gradient(90deg,transparent,#000 45%),linear-gradient(180deg,#000 50%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 45%) intersect,linear-gradient(180deg,#000 50%,transparent)}
#perk::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url(/assets/img/bg-perk.webp) center 40%/cover no-repeat;opacity:.16;mix-blend-mode:luminosity}
#perk>*{position:relative;z-index:1}
#five::after{content:"";position:absolute;right:-4%;top:0;bottom:0;width:46%;z-index:0;pointer-events:none;background:url(/assets/img/bg-stage.webp) 60% 30%/cover no-repeat;opacity:.22;mix-blend-mode:luminosity;
  -webkit-mask:linear-gradient(90deg,transparent,#000 60%);mask:linear-gradient(90deg,transparent,#000 60%)}
#five>*{position:relative;z-index:1}
#book{position:relative;overflow:hidden;isolation:isolate}
#book::before{content:"";position:absolute;left:0;top:0;width:60%;height:560px;z-index:-1;pointer-events:none;background:url(/assets/img/bg-hall.webp) center/cover no-repeat;opacity:.12;
  -webkit-mask:linear-gradient(270deg,transparent,#000 45%),linear-gradient(180deg,#000 45%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(270deg,transparent,#000 45%) intersect,linear-gradient(180deg,#000 45%,transparent)}
@media(max-width:640px){#book::before{width:100%;height:340px;opacity:.08}}
@media(max-width:640px){#why::before{width:100%;height:360px;opacity:.09}#five::after{width:100%;opacity:.07}}

/* =================== v11 =================== */
/* โซน 3 เสา กับ บันได แยกกันชัด */
.pillars{background:var(--paper);padding-bottom:84px}
#ladder{background:#fff!important;position:relative;padding-top:92px;border-radius:44px 44px 0 0;margin-top:-40px;box-shadow:0 -18px 40px rgba(11,28,63,.06);z-index:2}
.roadband{padding-bottom:10px}
/* "เหมาะถ้า" ในการ์ดพอร์ต */
.pick{display:flex;gap:9px;align-items:flex-start;background:#FBF2E1;border-radius:12px;padding:9px 12px;font-size:14px;color:#6B4A12;line-height:1.5;margin:2px 0 0}
.pick i{flex:none;width:16px;height:16px;margin-top:2px;background:var(--orange);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat}
.pcard.aw .pick{background:#E6F2EC;color:#1B4A3C}.pcard.aw .pick i{background:#2E6B55}
.pcard.gn .pick{background:#EAF0FB;color:#1B3A75}.pcard.gn .pick i{background:#1B3A75}
/* บริการเพิ่มเติม แบบย่อ/ยืด */
.more-svc{margin-top:46px}
.mlabel{font-size:13px;color:var(--muted);letter-spacing:.04em;margin-bottom:12px}
.fold{border:1px solid var(--line);border-radius:18px;background:#fff;margin-top:12px;padding:0;overflow:hidden;transition:box-shadow .3s}
.fold[open]{box-shadow:0 14px 36px rgba(11,28,63,.08)}
.fold>summary{display:grid;grid-template-columns:112px 1fr auto 28px;gap:18px;align-items:center;padding:18px 22px;cursor:pointer;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{display:none!important}
.fk{font-size:12px;letter-spacing:.06em;color:var(--orange);font-weight:500}
.ft b{display:block;font-size:17px;font-weight:500;color:var(--deep)}
.ft small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.fm{font-family:var(--mono);font-size:13px;color:var(--navy);background:#EEF1F8;border-radius:999px;padding:4px 12px;white-space:nowrap}
.fm:empty{display:none}
.fx{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);position:relative}
.fx::before,.fx::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;background:var(--navy);transform:translate(-50%,-50%);transition:transform .3s}
.fx::after{transform:translate(-50%,-50%) rotate(90deg)}
.fold[open] .fx::after{transform:translate(-50%,-50%) rotate(0)}
.fold.hot>summary{background:linear-gradient(90deg,#132C59,#1B3A75);}
.fold.hot .ft b{color:#fff}.fold.hot .ft small{color:#B1BFE1}.fold.hot .fk{color:var(--sand)}
.fold.hot .fm{background:rgba(255,255,255,.12);color:var(--sand)}.fold.hot .fx{border-color:rgba(255,255,255,.3)}.fold.hot .fx::before,.fold.hot .fx::after{background:#fff}
.fb{padding:4px 18px 18px}
.fb .door{margin-top:14px}
.fb .tax,.fb .addon,.fb .card{border:0!important;box-shadow:none!important;margin-top:6px!important;padding:12px 8px 4px!important}
.more-svc .lede[style]{margin-top:22px!important}
@media(max-width:640px){
  .fold>summary{grid-template-columns:1fr 28px;gap:6px 12px;padding:16px}
  .fk{grid-column:1}.ft{grid-column:1}.fm{grid-column:1;justify-self:start}.fx{grid-column:2;grid-row:1 / span 3}
  #ladder{border-radius:28px 28px 0 0}
}

/* =================== v12 · ปกคลิป =================== */
.clip.ph-v4004{background-image:url(/assets/img/clips/a1.webp)!important}
.clip.ph-v6278{background-image:url(/assets/img/clips/b3.webp)!important}
.clip.ph-v4308{background-image:url(/assets/img/clips/d2.webp)!important}
.clip.ph-v6598{background-image:url(/assets/img/clips/c3.webp)!important}
.clip.ph-v4157{background-image:url(/assets/img/clips/e1.webp)!important}
.clip.ph-v5367{background-image:url(/assets/img/clips/j4.webp)!important}
.clip.ph-v5318{background-image:url(/assets/img/clips/h1.webp)!important}
.pstrip.pc-gn{background-image:url(/assets/img/clips/gn.webp)!important}
.pstrip.pc-aw{background-image:url(/assets/img/clips/aw.webp)!important}
.pstrip.pc-gmi{background-image:url(/assets/img/clips/gmi.webp)!important}

.cvr{background-size:cover!important;background-position:center!important;cursor:pointer}
.clip.cvr::after{display:none}
.cvr .cap,.cvr .id{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pstrip.cvr{height:auto!important;aspect-ratio:16/9;display:block;border-radius:0}
.pstrip.cvr .len{display:none}
.cvr .play{position:absolute!important;left:4.2%;bottom:6.5%;width:auto!important;height:auto!important;display:inline-flex!important;align-items:center;gap:8px;
  padding:7px 15px 7px 12px!important;border-radius:999px!important;background:rgba(11,28,63,.55)!important;border:1px solid rgba(217,184,120,.65)!important;
  box-shadow:none!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:500 12.5px/1 var(--sans);color:#F3DFB0;transform:none!important;transition:background .25s,color .25s}
.cvr .play::before{content:"";border-left:9px solid #E8C98A;border-top:6px solid transparent;border-bottom:6px solid transparent;margin:0!important}
.clip.cvr .play::after{content:"ดูคลิป"}
.pstrip.pc-gn .play::after{content:"ดูคลิป · 6:12"}.pstrip.pc-aw .play::after{content:"ดูคลิป · 5:40"}.pstrip.pc-gmi .play::after{content:"ดูคลิป · 7:05"}
.cvr:hover .play{background:#D9B878!important;color:#0B1C3F}.cvr:hover .play::before{border-left-color:#0B1C3F}
.clip.cvr{transition:transform .35s ease,box-shadow .35s ease}.clip.cvr:hover{transform:translateY(-3px);box-shadow:0 26px 50px rgba(11,28,63,.24)}

/* hero · ประโยคขาย */
.sell2{position:relative;margin:30px 0 34px;padding:4px 0 4px 26px;max-width:620px}
.sell2::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,#F3DFB0,#B48C45 70%,rgba(180,140,69,0));transform-origin:top;animation:sgrow 1s .5s both cubic-bezier(.2,.7,.2,1)}
.sell2 p{margin:0}
.s-no{font-size:17px;color:rgba(255,255,255,.62);font-weight:300;opacity:0;animation:sin .7s .6s both}
.s-no .strike{position:relative;margin-left:6px;color:rgba(255,255,255,.62);white-space:nowrap}
.s-no .strike::after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:2px;background:#D9B878;transform:scaleX(0);transform-origin:left;animation:sline .6s 1.3s forwards cubic-bezier(.6,0,.2,1)}
.s-yes{font-size:clamp(25px,2.6vw,34px);line-height:1.3;color:#fff;font-weight:500;margin-top:6px!important;opacity:0;animation:sin .8s 1.7s both}
.s-yes b{font-weight:600;margin-left:8px;background:linear-gradient(100deg,#F6E3B4,#D9B26A 55%,#B48C45);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;white-space:nowrap}
.s-yes b::after{content:"";position:absolute;left:8px;right:0;bottom:-4px;height:2px;background:linear-gradient(90deg,#D9B878,rgba(217,184,120,0));transform:scaleX(0);transform-origin:left;animation:sline .8s 2.3s forwards ease}
.s-and{font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.72);font-weight:300;margin-top:12px!important;opacity:0;animation:sin .8s 2.1s both}
@keyframes sin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sline{to{transform:scaleX(1)}}
@keyframes sgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.sell2 *,.sell2::before{animation:none!important;opacity:1!important;transform:none!important}}
@media(max-width:640px){.sell2{padding-left:18px;margin:24px 0 28px}.s-yes b{display:inline-block;margin-left:0}.s-yes b::after{left:0}}

/* =================== v13 =================== */
/* ฉากพายุ: เส้นฝนมีสี + ฟ้าแลบ */
.rain line{stroke:#B7CDE6;stroke-opacity:.6;stroke-linecap:round}
@keyframes stormflash{0%,59%{opacity:0}60%{opacity:.55}61%{opacity:0}62.5%{opacity:.38}63.5%,100%{opacity:0}}
@keyframes boltk{0%,59%{opacity:0}60%{opacity:1}61%{opacity:0}62.5%{opacity:.8}63.5%,100%{opacity:0}}
.flash{animation:stormflash 9s linear infinite!important}
.bolt{opacity:0;animation:boltk 9s linear infinite;filter:drop-shadow(0 0 10px rgba(207,227,243,.9))}
@media (prefers-reduced-motion:reduce){.bolt,.flash{animation:none!important;opacity:0}}

/* แถบความน่าเชื่อถือ: ตัวเลขหมุนแบบมาตรวัดไมล์ */
.roadband .trust.tr2{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border:0;padding:0;margin-top:34px}
.tr2 .ti{position:relative;background:#fff;border-radius:18px;padding:22px 22px 20px;box-shadow:0 14px 34px rgba(11,28,63,.07);border:1px solid rgba(201,163,92,.28);transition:transform .35s,box-shadow .35s;overflow:hidden}
.tr2 .ti::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:linear-gradient(90deg,#D9B878,rgba(217,184,120,0));transform:scaleX(0);transform-origin:left;transition:transform 1.2s .2s cubic-bezier(.2,.8,.2,1)}
.tr2.on .ti::before{transform:scaleX(1)}
.tr2 .ti:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(11,28,63,.12)}
.tr2 .tk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#A9843F;letter-spacing:.04em;margin-bottom:10px}
.tr2 .tk i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#F3DFB0,#B48C45);display:inline-grid;place-items:center}
.tr2 .tk i::after{content:"";width:6px;height:3.5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.roadband .tr2 .ti b{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:clamp(26px,2.5vw,36px);line-height:1.1;color:var(--deep);font-weight:500;letter-spacing:.01em;white-space:nowrap}
.tr2 .pre{font-size:.5em;color:#A9843F;letter-spacing:.08em;align-self:center}
.tr2 .suf{font-family:var(--sans);font-size:.55em;color:var(--deep);font-weight:400}
.tr2 .tl{display:block;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
.tr2 .tv{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(201,163,92,.6)}
.tr2 .tv:hover{color:#A9843F}
.dgs{display:inline-flex}
.dg{display:inline-block;height:1.1em;overflow:hidden;vertical-align:top}
.dg .st{display:block;transform:translateY(0);transition:transform 1.8s cubic-bezier(.16,.84,.24,1)}
.dg .st i{display:block;height:1.1em;line-height:1.1em;font-style:normal;text-align:center}
.tr2 .txt{background:linear-gradient(100deg,#132C59 0 40%,#C9A35C 50%,#132C59 60% 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.6s 1s ease}
.tr2.on .txt{background-position:0 0}
.tr2 .txt{font-size:.72em;white-space:normal;line-height:1.5}
@media(max-width:900px){.roadband .trust.tr2{grid-template-columns:1fr 1fr;gap:12px}.tr2 .ti{padding:18px 16px}}

#tcar{transition:transform 1.1s cubic-bezier(.45,.05,.25,1)!important}
#span{transition:x 1.1s cubic-bezier(.45,.05,.25,1),width 1.1s cubic-bezier(.45,.05,.25,1),fill .4s}
.mile{transition:opacity .5s}
#tcar .w{animation:none!important}
#tcar.moving .w{animation:spin .5s linear infinite!important}
#tcar.moving>g{animation:carbob .3s ease-in-out infinite}
@keyframes carbob{50%{transform:translate(52px,73.2px) scale(.82)}}

.taxtool{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;margin:14px 0 18px;padding:16px 18px;border-radius:16px;background:#FBF6EC;border:1px solid rgba(201,163,92,.45);text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.taxtool:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,28,63,.08)}
.tt-ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#F3DFB0,#B48C45);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:600}
.taxtool b{display:block;font-size:15.5px;font-weight:500;color:var(--deep)}
.taxtool small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.55}
.tt-go{font-size:13.5px;font-weight:500;color:#fff;background:var(--orange);border-radius:999px;padding:9px 16px;white-space:nowrap}
@media(max-width:640px){.taxtool{grid-template-columns:auto 1fr}.tt-go{grid-column:1 / -1;justify-self:start}}

/* v14 · บรรทัดนิยามสั้นลง */
.define.d2{display:flex;align-items:center;gap:12px;font-size:15px;color:#E8C98A;font-weight:400;letter-spacing:.02em;margin-top:18px}
.define.d2 i{width:28px;height:1.5px;background:#D9B878;flex:none}

.tr-about{display:flex;align-items:center;gap:18px;margin:16px 0 0;padding:16px 22px;border-radius:16px;border:1px solid rgba(201,163,92,.45);background:linear-gradient(90deg,#FBF6EC,#fff 70%);text-decoration:none;transition:transform .3s,box-shadow .3s}
.tr-about:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,28,63,.08)}
.ta-k{font-size:15.5px;font-weight:500;color:var(--deep);white-space:nowrap}
.ta-t{flex:1;font-size:13.5px;color:var(--muted)}
.ta-go{width:38px;height:38px;flex:none;border-radius:50%;background:#132C59;color:#E8C98A;display:grid;place-items:center;font-size:17px;transition:transform .3s}
.tr-about:hover .ta-go{transform:translateX(4px)}
@media(max-width:640px){.tr-about{flex-wrap:wrap;gap:6px 12px;padding:14px 16px}.ta-t{flex:1 1 100%;order:3}.ta-k{flex:1}}

/* =================== v15 · wow =================== */
.big60.shine{-webkit-text-stroke:1.6px #F3DFB0;opacity:.0;
  -webkit-mask-image:linear-gradient(105deg,transparent 35%,#000 48%,#000 52%,transparent 65%);mask-image:linear-gradient(105deg,transparent 35%,#000 48%,#000 52%,transparent 65%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:120% 0;mask-position:120% 0;animation:shine60 9s 1.2s ease-in-out infinite}
@keyframes shine60{0%{opacity:.55;-webkit-mask-position:120% 0;mask-position:120% 0}30%{opacity:.55;-webkit-mask-position:-20% 0;mask-position:-20% 0}31%,100%{opacity:0;-webkit-mask-position:-20% 0;mask-position:-20% 0}}
/* กรวย 5 ชั้น: สว่างทีละชั้นตอนเลื่อนมาถึง + เส้นทองไหลลง */
.funnel{position:relative}
.funnel .fr{transition:box-shadow .6s,border-color .6s,background .6s}
.funnel .fr .n{transition:background .5s,box-shadow .5s,transform .5s}
.funnel.flow .fr.lit{border-color:rgba(217,184,120,.55)!important;box-shadow:0 0 0 1px rgba(217,184,120,.25),0 10px 30px rgba(0,0,0,.25)}
.funnel.flow .fr.lit .n{background:linear-gradient(135deg,#F3DFB0,#B48C45);color:#0B1C3F;box-shadow:0 0 18px rgba(232,185,120,.55);transform:scale(1.08)}
.funnel.flow .fr.last.lit{background:rgba(217,184,120,.10)!important}
.fdrop{position:absolute;left:50%;top:28px;width:2px;height:calc(100% - 56px);transform:translateX(-50%);pointer-events:none;z-index:0;overflow:hidden}
.fdrop::before{content:"";position:absolute;left:0;top:-30%;width:2px;height:30%;background:linear-gradient(180deg,transparent,#F3DFB0,transparent);opacity:0}
.funnel.flow .fdrop::before{animation:fdrop 2.6s .2s ease-in forwards}
@keyframes fdrop{0%{top:-30%;opacity:1}100%{top:100%;opacity:1}}
.funnel .fr{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.big60.shine{display:none}.funnel .fdrop{display:none}}

.psrc{display:block;margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.5;opacity:.85}

/* =================== v17 · พร้อมใช้ =================== */
#tg,.an,.mk{display:none!important}
.cvr .play::after,.clip.cvr .play::after,.pstrip.cvr .play::after{content:attr(data-label)!important}
.cvr.soon{cursor:default}
.cvr.soon .play{background:rgba(11,28,63,.55)!important;color:rgba(243,223,176,.85)}
.cvr.soon .play::before{display:none}
.cvr.soon:hover .play{background:rgba(11,28,63,.55)!important;color:rgba(243,223,176,.85)}
.cvr.soon:hover{transform:none}
.vmodal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(6,14,32,.86);backdrop-filter:blur(6px);padding:24px}
.vmodal.open{display:flex;animation:vmin .3s ease}
@keyframes vmin{from{opacity:0}to{opacity:1}}
.vbox{position:relative;width:min(1100px,100%);aspect-ratio:16/9}
#vframe{position:absolute;inset:0;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vclose{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(217,184,120,.6);background:rgba(11,28,63,.7);color:#F3DFB0;font-size:20px;cursor:pointer}
@media(max-width:640px){.vclose{top:-46px}}
.bklink{color:var(--deep);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(201,163,92,.7);transition:color .2s,border-color .2s}.bklink:hover{color:#A9843F;border-bottom-color:#A9843F}