/* ================= TOKENS ================= */
:root{
  --menu-grad:var(--grad);--menu-fg:#fff;   /* สีแถบ "หน้าปัจจุบัน" ในเมนูมือถือ */
  --b900:#04142e;--b800:#072a55;--b700:#0b4a8f;--b600:#1466c4;--b500:#2b8bf2;
  --sky:#38bdf8;--cyan:#22d3ee;--mint:#34d399;--rose:#fb7185;--amber:#fbbf24;

  --bg:#f4f9ff;--bg2:#e8f2ff;--surface:#ffffff;--surface2:#f8fbff;
  --text:#0a1729;--text2:#33475f;--muted:#64798f;--line:#dceaf9;
  --glass:rgba(255,255,255,.72);

  --grad:linear-gradient(120deg,#0b4a8f 0%,#1466c4 34%,#2b8bf2 66%,#38bdf8 100%);
  --grad2:linear-gradient(120deg,#22d3ee,#2b8bf2);
  --gradWarn:linear-gradient(120deg,#f43f5e,#fb923c);
  --tint:linear-gradient(160deg,#eaf4ff 0%,#f8fcff 100%);

  --sh1:0 4px 14px -6px rgba(var(--a7),.18);
  --sh2:0 18px 44px -20px rgba(var(--a7),.34);
  --sh3:0 34px 70px -28px rgba(var(--a9),.42);
  --r:16px;--r2:22px;--r3:30px;
  --ease:cubic-bezier(.22,.8,.2,1);

  /* ── ค่า RGB ของสีหลัก ใช้กับ rgba() ที่ต้องการความโปร่งใส ──
     แต่ละหน้าทับค่าชุดนี้เพื่อเปลี่ยนโทนทั้งหน้าได้โดยไม่ต้องแก้ทีละกฎ ── */
  --a5:43,139,242;      /* = --b500 */
  --a6:20,102,196;      /* = --b600 */
  --a7:11,74,143;       /* = --b700 */
  --a9:4,20,46;         /* = --b900 */
  --aSky:56,189,248;    /* = --sky  */
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#040d1e;--bg2:#07152c;--surface:#0c1e3b;--surface2:#0a1830;
  --text:#eaf3ff;--text2:#c2d5ee;--muted:#93aacb;--line:#1d3358;
  --glass:rgba(12,30,59,.72);
  --tint:linear-gradient(160deg,#0a1a34 0%,#06122a 100%);
  --sh1:0 4px 14px -6px rgba(0,0,0,.6);
  --sh2:0 18px 44px -20px rgba(0,0,0,.8);
  --sh3:0 34px 70px -28px rgba(0,0,0,.9);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:78px}
body{
  font-family:"IBM Plex Sans Thai","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.78;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease),color .4s var(--ease);
}
h1,h2,h3,h4,h5{line-height:1.3;letter-spacing:-.015em;font-weight:800}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--b500);color:#fff}
.wrap{width:min(1180px,92%);margin-inline:auto}
.narrow{width:min(860px,92%);margin-inline:auto}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gradW{background:var(--gradWarn);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ================= REVEAL ================= */
.rv{opacity:1;transform:none}
.rv.pre{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.pre.in{opacity:1;transform:none}
/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:999px;border:0;font-family:inherit;font-size:1rem;
  font-weight:700;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn-lg{padding:1rem 2rem;font-size:1.06rem}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 14px 30px -12px rgba(var(--a6),.75)}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(var(--a6),.85)}
.btn-p:hover::after{transform:translateX(120%)}
.btn-p:active{transform:translateY(0) scale(.98)}
.btn-o{border:2px solid var(--b500);color:var(--b600);background:transparent}
[data-theme="dark"] .btn-o{color:var(--sky)}
.btn-o:hover{background:var(--b500);color:#fff;transform:translateY(-3px)}
.btn-w{background:#fff;color:var(--b700)}
.btn-w:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}
.btn-gh{background:transparent;border:1.5px solid var(--line);color:var(--muted);font-size:.9rem;padding:.72rem 1.2rem}
.btn-gh:hover{border-color:var(--b500);color:var(--b600)}
.ibtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--text);cursor:pointer;font-size:1.15rem;line-height:1;display:grid;place-items:center;flex:none;
  transition:transform .4s var(--ease),background .3s,border-color .3s}
.ibtn:hover{transform:rotate(-25deg) scale(1.12);border-color:var(--b500)}
.ibtn:active{transform:scale(.92)}
.ver{font-size:.66rem;font-weight:800;padding:.22rem .5rem;border-radius:6px;
  background:linear-gradient(120deg,#16a34a,#22c55e);color:#fff;letter-spacing:.05em;flex:none}
/* ================= NAV ================= */
#prog{position:fixed;top:0;left:0;right:0;height:4px;z-index:200;pointer-events:none}
#prog b{display:block;height:100%;width:0;background:var(--grad2);box-shadow:0 0 12px var(--sky)}
.nav{position:sticky;top:0;z-index:150;background:var(--glass);border-bottom:1px solid transparent;
  transition:box-shadow .35s,border-color .35s,background .4s}
@supports (backdrop-filter:blur(10px)){.nav{backdrop-filter:blur(18px) saturate(160%)}}
.nav.stuck{border-color:var(--line);box-shadow:0 10px 30px -24px rgba(var(--a9),.7)}
.nav-in{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;position:relative}
.brand{display:flex;align-items:center;gap:.6rem;font-size:1.22rem;font-weight:800;flex:none}
.brand b{color:var(--b500)}
[data-theme="dark"] .brand b{color:var(--sky)}
.mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--grad);
  color:#fff;flex:none;box-shadow:0 8px 20px -10px rgba(var(--a6),.9)}
.links{display:flex;gap:.15rem;margin-inline:auto;flex-wrap:wrap}
.links a{padding:.48rem .78rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--muted);
  transition:color .25s,background .25s}
.links a:hover,.links a.act{color:var(--b600);background:rgba(var(--a5),.13)}
[data-theme="dark"] .links a:hover,[data-theme="dark"] .links a.act{color:var(--sky);background:rgba(var(--aSky),.14)}
.acts{display:flex;align-items:center;gap:.5rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:9px}
.burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.35s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ================= HERO ================= */
.hero{position:relative;padding:4rem 0 0;overflow:hidden;isolation:isolate}
.aur{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.55}
[data-theme="dark"] .aur{opacity:.34}
.aur i{position:absolute;display:block;border-radius:50%;filter:blur(80px)}
.aur i:nth-child(1){width:520px;height:520px;background:#38bdf8;top:-170px;left:-130px;animation:f1 22s ease-in-out infinite}
.aur i:nth-child(2){width:450px;height:450px;background:#1466c4;top:40px;right:-150px;animation:f2 26s ease-in-out infinite}
.aur i:nth-child(3){width:360px;height:360px;background:#22d3ee;bottom:-150px;left:40%;animation:f1 30s ease-in-out infinite reverse}
@keyframes f1{50%{transform:translate(55px,50px) scale(1.16)}}
@keyframes f2{50%{transform:translate(-65px,40px) scale(1.12)}}
.grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 35%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 55% at 50% 35%,#000 20%,transparent 75%)}
.hero-g{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:3rem;
  align-items:center;padding-bottom:3.5rem}
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem 1rem;border-radius:999px;
  background:rgba(var(--a5),.13);color:var(--b600);font-weight:700;font-size:.85rem;
  border:1px solid rgba(var(--a5),.3)}
[data-theme="dark"] .pill{background:rgba(var(--aSky),.15);color:var(--sky);border-color:rgba(var(--aSky),.32)}
.hero h1{font-size:clamp(2.05rem,5.2vw,3.55rem);margin:1.1rem 0 .9rem}
.lead{font-size:1.1rem;color:var(--text2);max-width:56ch}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.9rem 0}
.trust{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.83rem;color:var(--muted)}
.trust span{display:flex;align-items:center;gap:.35rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.9rem}
.stat{padding:1.1rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh1);transition:transform .35s var(--ease),box-shadow .35s}
.stat:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.stat b{display:block;font-size:1.9rem;font-weight:800;color:var(--b600);line-height:1.2}
[data-theme="dark"] .stat b{color:var(--sky)}
.stat span{display:block;font-size:.76rem;color:var(--muted);line-height:1.55}
.art{position:relative;z-index:1}
.board{position:relative;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh3);padding:1.6rem;overflow:hidden}
.board::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.055;pointer-events:none}
.board-h{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;gap:1rem}
.board-h h4{font-size:.98rem}
.dot{width:9px;height:9px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:.35rem;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.board-h span{font-size:.78rem;color:var(--muted);white-space:nowrap}
.chart{position:relative;display:flex;align-items:flex-end;gap:.5rem;height:150px;padding:.85rem;
  border-radius:15px;background:rgba(var(--a5),.08)}
.chart i{flex:1;border-radius:7px 7px 3px 3px;background:var(--grad);opacity:.9;transform-origin:bottom;
  animation:grow 1.15s var(--ease) backwards}
@keyframes grow{from{transform:scaleY(.04)}}
.rows{position:relative;margin-top:1.1rem;display:grid;gap:.55rem}
.row{display:flex;align-items:center;gap:.7rem;padding:.72rem .9rem;border-radius:13px;background:var(--surface2);
  border:1px solid var(--line);font-size:.87rem;font-weight:600;transition:transform .3s var(--ease)}
.row:hover{transform:translateX(5px)}
.row em{margin-left:auto;font-style:normal;color:var(--b600);font-weight:800;white-space:nowrap}
[data-theme="dark"] .row em{color:var(--sky)}
.tagA,.tagB{position:absolute;padding:.55rem 1rem;border-radius:14px;font-size:.82rem;font-weight:700;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh2);z-index:2}
.tagA{top:-16px;left:-14px;animation:bob 5.5s ease-in-out infinite}
.tagB{bottom:-18px;right:-12px;animation:bob 7s ease-in-out infinite .9s}
@keyframes bob{50%{transform:translateY(-13px)}}
.marq{position:relative;z-index:1;overflow:hidden;background:var(--grad);color:#fff;padding:.8rem 0}
.marq div{display:flex;gap:2.2rem;width:max-content;white-space:nowrap;font-weight:700;font-size:.92rem;
  animation:sc 34s linear infinite}
@keyframes sc{to{transform:translateX(-50%)}}
/* ================= SECTION ================= */
.sec{padding:5.2rem 0;position:relative}
.tinted{background:var(--tint)}
.dark-sec{background:var(--b900);color:#eaf3ff}
.dark-sec .head p,.dark-sec .muted{color:#a8c3e6}
.head{text-align:center;max-width:780px;margin:0 auto 3rem}
.eye{display:inline-block;font-size:.79rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--b500);margin-bottom:.55rem}
.dark-sec .eye{color:var(--sky)}
.head h2{font-size:clamp(1.65rem,3.8vw,2.6rem);margin-bottom:.7rem}
.head p{color:var(--text2);font-size:1.02rem}
/* ================= STORY / PAIN ================= */
.story{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.quote{position:relative;padding:2.2rem 2rem 2rem;border-radius:var(--r3);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh2);font-size:1.06rem;line-height:1.95;color:var(--text2)}
.quote::before{content:"“";position:absolute;top:-6px;left:18px;font-size:5.5rem;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.35}
.quote footer{margin-top:1.1rem;font-size:.87rem;color:var(--muted);font-style:normal}
.timeline{display:grid;gap:0;position:relative;padding-left:1.9rem}
.timeline::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--b500),var(--rose))}
.tl{position:relative;padding:0 0 1.5rem .3rem}
.tl::before{content:"";position:absolute;left:-1.9rem;top:.55rem;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:3px solid var(--b500)}
.tl:last-child::before{border-color:var(--rose)}
.tl h4{font-size:1rem;margin-bottom:.15rem}
.tl p{font-size:.92rem;color:var(--muted)}
.tl small{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--b500)}
.tl:last-child small{color:var(--rose)}
.painwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:1rem}
.pain{padding:1.6rem 1.4rem;border-radius:var(--r2);background:rgba(255,255,255,.05);
  border:1px solid rgba(251,113,133,.3);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s}
.pain:hover{transform:translateY(-7px);border-color:var(--rose)}
.pain::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradWarn)}
.pain .n{font-size:1.9rem;margin-bottom:.5rem}
.pain h4{font-size:1.04rem;margin-bottom:.35rem;color:#fff}
.dark-sec .pain h4{color:#fff}
.pain p{font-size:.9rem;color:#a8c3e6;line-height:1.7}
.pain b{color:#fda4af}
/* ================= SCALE / COMPARE ================= */
.scale{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:stretch;margin-top:1rem}
.pan-side{padding:1.8rem 1.5rem;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh2)}
.pan-side.bad{border-top:5px solid var(--rose)}
.pan-side.good{border-top:5px solid var(--b500)}
.pan-side h3{font-size:1.15rem;margin-bottom:.3rem}
.pan-side>p{font-size:.86rem;color:var(--muted);margin-bottom:1rem}
.pan-side ul{display:grid;gap:.7rem}
.pan-side li{display:flex;gap:.6rem;font-size:.93rem;color:var(--text2);align-items:flex-start}
.pan-side li i{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;font-size:.72rem;color:#fff;margin-top:.3rem}
.bad li i{background:var(--rose)}
.good li i{background:var(--b500)}
.vs{display:grid;place-items:center;font-weight:800;font-size:.85rem;color:var(--muted);
  writing-mode:vertical-rl;letter-spacing:.3em}
.bill{margin-top:1.2rem;padding:1rem;border-radius:14px;background:var(--surface2);border:1px dashed var(--line);
  font-size:.87rem;display:grid;gap:.45rem}
.bill div{display:flex;justify-content:space-between;gap:1rem}
.bill .tot{border-top:1px solid var(--line);padding-top:.5rem;font-weight:800;font-size:.98rem}
.bill .neg{color:var(--rose)}
.bill .pos{color:var(--b600)}
[data-theme="dark"] .bill .pos{color:var(--sky)}
/* ================= CARDS ================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:1.3rem}
.card{position:relative;padding:2rem 1.6rem;border-radius:var(--r2);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh1);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card::after{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-10px);box-shadow:var(--sh3)}
.card:hover::after{transform:scaleX(1)}
.ico{width:56px;height:56px;display:grid;place-items:center;font-size:1.6rem;border-radius:16px;
  background:linear-gradient(135deg,rgba(var(--a5),.16),rgba(var(--aSky),.16));margin-bottom:1rem;
  transition:transform .4s var(--ease)}
.card:hover .ico{transform:rotate(-8deg) scale(1.08)}
.card h3{font-size:1.12rem;margin-bottom:.45rem}
.card p{color:var(--muted);font-size:.94rem}
/* ================= SPLIT / PYRAMID ================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem;align-items:center;margin-top:3.6rem}
.split h3{font-size:1.55rem;margin-bottom:.9rem}
.pyr{display:grid;gap:.5rem}
.pyr li{padding:.85rem 1.1rem;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  font-size:.94rem;transition:transform .3s var(--ease)}
.pyr li:hover{transform:translateX(6px)}
.pyr b{color:var(--b500);margin-right:.5rem}
.hl{background:var(--grad);color:#fff;padding:.14rem .55rem;border-radius:8px;font-weight:700}
.note{margin-top:1.15rem;padding:1rem 1.2rem;border-left:4px solid var(--b500);border-radius:0 14px 14px 0;
  background:rgba(var(--a5),.1);font-size:.92rem;color:var(--text2)}
.note.warn{border-left-color:var(--rose);background:rgba(251,113,133,.12)}
/* ================= STEPS ================= */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem 1.2rem;margin-top:1.6rem}
.step{position:relative;padding:2.2rem 1.4rem 1.6rem;border-radius:var(--r2);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh1);transition:transform .35s var(--ease),box-shadow .35s}
.step:hover{transform:translateY(-8px);box-shadow:var(--sh2)}
.stepn{position:absolute;top:-18px;left:1.3rem;width:44px;height:44px;display:grid;place-items:center;
  border-radius:14px;background:var(--grad);color:#fff;font-size:1.18rem;font-weight:800;
  box-shadow:0 10px 22px -10px rgba(var(--a6),.9)}
.step h3{font-size:1.08rem;margin:.5rem 0 .35rem}
.step h3 small{display:block;font-size:.73rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--b500)}
.step p{color:var(--muted);font-size:.92rem}
.step.hi{background:var(--grad);color:#fff;border-color:transparent}
.step.hi p,.step.hi small{color:rgba(255,255,255,.93)}
.step.hi .stepn{background:#fff;color:var(--b700)}
/* ================= MATRIX ================= */
.mx{margin-top:3.4rem;padding:2rem;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh2)}
.mx h3{text-align:center;font-size:1.18rem;margin-bottom:1.3rem}
.mxg{display:grid;grid-template-columns:.72fr 1fr 1fr;gap:.6rem}
.mc{padding:1.05rem;border-radius:14px;font-size:.88rem;display:flex;flex-direction:column;gap:.2rem;justify-content:center}
.mc.h{font-weight:800;text-align:center;align-items:center;color:var(--muted);background:transparent}
.mc span{font-size:.76rem;opacity:.88}
.g1{background:rgba(34,211,238,.2);color:var(--b800)}
.g2{background:rgba(var(--a5),.2);color:var(--b800)}
.g3{background:rgba(251,113,133,.2);color:#9f1239}
.g4{background:var(--grad);color:#fff;box-shadow:0 14px 30px -14px rgba(var(--a6),.85)}
[data-theme="dark"] .g1,[data-theme="dark"] .g2{color:#dbeafe}
[data-theme="dark"] .g3{color:#fecdd3}
/* ================= FLOW ================= */
.flow{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.node{flex:1 1 220px;max-width:280px;text-align:center;padding:2rem 1.2rem;border-radius:var(--r2);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1);
  transition:transform .35s var(--ease),box-shadow .35s}
.node:hover{transform:translateY(-8px) scale(1.03);box-shadow:var(--sh2)}
.node.mid{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--sh2)}
.node.mid p{color:rgba(255,255,255,.93)}
.node div{font-size:2.2rem;margin-bottom:.5rem}
.node h3{font-size:1.02rem;margin-bottom:.3rem}
.node p{color:var(--muted);font-size:.87rem}
.arw{display:flex;flex-direction:column;align-items:center;color:var(--b500);font-size:.78rem;font-weight:700}
.arw i{font-style:normal;font-size:1.6rem;animation:sl 1.7s ease-in-out infinite}
@keyframes sl{50%{transform:translateX(9px)}}
/* ================= TABS ================= */
.tbar{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.6rem}
.tab{padding:.68rem 1.35rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;
  transition:.28s var(--ease)}
.tab:hover{color:var(--b600);transform:translateY(-2px);border-color:var(--b500)}
.tab.act{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 12px 26px -12px rgba(var(--a6),.9)}
.pan{display:none;padding:2.2rem;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh2);animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
.pan.act{display:block}
.pan h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--b600)}
[data-theme="dark"] .pan h3{color:var(--sky)}
.pan>p{color:var(--text2)}
.pan-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1.6rem;margin-top:1.2rem;align-items:start}
.tick{display:grid;gap:.5rem}
.tick li{position:relative;padding-left:1.9rem;font-size:.93rem;color:var(--text2)}
.tick li::before{content:"✓";position:absolute;left:0;top:.32rem;width:22px;height:22px;display:grid;
  place-items:center;border-radius:50%;background:var(--grad);color:#fff;font-size:.7rem;line-height:1}
.spec{display:grid;gap:.5rem;padding:1.1rem;border-radius:16px;background:var(--surface2);border:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem}
.spec span{color:var(--muted)}
.spec b{color:var(--b600)}
[data-theme="dark"] .spec b{color:var(--sky)}
/* ================= RIDERS ================= */
.riders{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.rider{padding:1.4rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh1);transition:transform .3s var(--ease),border-color .3s}
.rider:hover{transform:translateY(-6px);border-color:var(--b500)}
.rider h4{font-size:1rem;margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}
.rider p{font-size:.88rem;color:var(--muted)}
.chip{display:inline-block;font-size:.68rem;font-weight:800;padding:.16rem .55rem;border-radius:6px;
  background:rgba(var(--a5),.15);color:var(--b600);margin-top:.6rem}
[data-theme="dark"] .chip{color:var(--sky);background:rgba(var(--aSky),.16)}
/* ================= MYTH FLIP ================= */
.myths{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem}
.myth{border-radius:var(--r2);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1);
  padding:1.5rem;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s}
.myth:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.myth .mq{font-weight:800;font-size:1rem;display:flex;gap:.6rem;align-items:flex-start}
.myth .mq em{font-style:normal;color:var(--rose);flex:none}
.myth .ma{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.myth.open .ma{max-height:300px;opacity:1;margin-top:.8rem}
.myth .ma p{font-size:.91rem;color:var(--text2);padding-top:.8rem;border-top:1px dashed var(--line)}
.myth .tog{position:absolute;top:1.5rem;right:1.3rem;font-size:.75rem;font-weight:800;color:var(--b500);
  transition:transform .35s}
.myth.open .tog{transform:rotate(180deg)}
/* ================= CHECKLIST ================= */
.chk{display:grid;gap:.6rem}
.chk label{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.2rem;border-radius:15px;
  background:var(--surface);border:1px solid var(--line);cursor:pointer;font-size:.94rem;
  transition:border-color .3s,transform .3s var(--ease),background .3s}
.chk label:hover{transform:translateX(5px);border-color:var(--b500)}
.chk input{width:20px;height:20px;accent-color:var(--b500);margin-top:.28rem;flex:none;cursor:pointer}
.chk input:checked+span{color:var(--muted);text-decoration:line-through}
#chkBar{margin-top:1rem;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
#chkBar i{display:block;height:100%;width:0;background:var(--grad2);transition:width .5s var(--ease)}
#chkTxt{margin-top:.55rem;font-size:.87rem;font-weight:700;color:var(--b600);text-align:center}
[data-theme="dark"] #chkTxt{color:var(--sky)}
/* ================= CALCULATOR ================= */
.calc{display:grid;grid-template-columns:1fr 1.05fr;gap:1.5rem;align-items:start}
.cform{padding:1.9rem;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh2);display:grid;gap:.95rem;align-content:start}
.cform label{display:grid;gap:.35rem;font-size:.89rem;font-weight:700}
.cform label small{font-weight:600;color:var(--muted);font-size:.77rem}
.cform input{padding:.85rem 1rem;border-radius:12px;border:1.5px solid var(--line);background:var(--surface2);
  color:var(--text);font-family:inherit;font-size:1.02rem;font-weight:700;width:100%;transition:.25s}
.cform input:focus{outline:0;border-color:var(--b500);box-shadow:0 0 0 4px rgba(var(--a5),.18)}
.cbtns{display:grid;grid-template-columns:1fr auto;gap:.6rem;margin-top:.3rem}
#stale{display:none;padding:.62rem .9rem;border-radius:12px;background:rgba(251,191,36,.16);
  border:1px solid rgba(251,191,36,.5);color:#a16207;font-size:.83rem;font-weight:700;text-align:center}
[data-theme="dark"] #stale{color:#fcd34d}
#stale.on{display:block;animation:fade .3s var(--ease)}
#errbox{display:none;padding:.62rem .9rem;border-radius:12px;background:rgba(244,63,94,.15);
  border:1px solid rgba(244,63,94,.5);color:#be123c;font-size:.83rem;font-weight:700}
[data-theme="dark"] #errbox{color:#fda4af}
#errbox.on{display:block}
.cout{padding:1.9rem;border-radius:var(--r3);background:var(--grad);color:#fff;box-shadow:var(--sh3);
  position:relative;overflow:hidden}
.cout::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:rgba(255,255,255,.09);top:-120px;right:-90px}
.cout>*{position:relative}
.cout .lbl{font-size:.88rem;opacity:.92;display:block}
#sumOut{font-size:clamp(1.95rem,5.2vw,3rem);font-weight:800;margin:.25rem 0 .35rem;line-height:1.15;
  font-variant-numeric:tabular-nums;transition:opacity .18s}
/* ประกายวิ่งผ่านตัวเลข — ใช้เฉพาะเบราว์เซอร์ที่ตัดพื้นหลังตามรูปตัวอักษรได้
   ถ้าไม่รองรับ ตัวเลขจะเป็นสีขาวปกติ ไม่หาย */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #sumOut{
    background-image:linear-gradient(100deg,#fff 0%,#fff 38%,rgba(255,255,255,.55) 50%,#fff 62%,#fff 100%);
    background-size:280% 100%;background-position:120% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
#sumOut.flash{opacity:.22}
#sumOut.shine{animation:sumShine .95s cubic-bezier(.4,0,.2,1)}
@keyframes sumShine{
  0%{background-position:120% 0;transform:scale(1)}
  22%{transform:scale(1.035)}
  100%{background-position:-90% 0;transform:scale(1)}}
.cout.pulse{animation:coutPulse .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes coutPulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.42)}
  100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){
  #sumOut.shine,.cout.pulse{animation:none}}
#ratio{font-size:.9rem;opacity:.95;margin-bottom:1.3rem;font-weight:700}
.bars{display:grid;gap:.75rem}
.brow{display:grid;grid-template-columns:112px 1fr auto;align-items:center;gap:.65rem;font-size:.83rem}
.track{height:9px;border-radius:99px;background:rgba(255,255,255,.24);overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:99px;background:#fff;
  transition:width .7s var(--ease)}
.brow.mn .track i{background:#67e8f9}
.brow b{font-variant-numeric:tabular-nums;white-space:nowrap}
#formula{margin-top:1.2rem;padding:.9rem 1.05rem;border-radius:13px;background:rgba(255,255,255,.14);
  font-size:.82rem;line-height:1.85;font-variant-numeric:tabular-nums;word-break:break-word}
#hint{margin-top:1rem;font-size:.79rem;opacity:.92;border-top:1px solid rgba(255,255,255,.28);padding-top:.9rem}
#stamp{margin-top:.55rem;font-size:.71rem;opacity:.75}
/* ================= ACCORDION ================= */
.acc{display:grid;gap:.7rem}
.acc details{border-radius:16px;background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:border-color .3s,box-shadow .3s}
.acc details[open]{box-shadow:var(--sh2);border-color:var(--b500)}
.acc summary{padding:1.1rem 1.35rem;cursor:pointer;font-weight:700;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:1.35rem;font-weight:800;color:var(--b500);transition:transform .35s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{padding:0 1.35rem 1.2rem;color:var(--text2);font-size:.93rem}
/* ================= CTA / FOOTER ================= */
.cta{padding:4.6rem 0;background:var(--grad);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.14),transparent 40%),
                   radial-gradient(circle at 80% 70%,rgba(255,255,255,.12),transparent 40%)}
.cta>*{position:relative}
.cta h2{font-size:clamp(1.65rem,4.2vw,2.6rem);margin-bottom:.5rem}
.cta .cta-row{justify-content:center}
.foot{background:var(--b900);color:#dbeafe;padding:3.4rem 0 1.5rem}
.foot-g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.foot h4{margin-bottom:.75rem;font-size:1rem;color:#fff}
.foot a{display:block;color:#a9c6ea;font-size:.9rem;padding:.2rem 0;transition:.25s var(--ease)}
.foot a:hover{color:var(--sky);transform:translateX(5px)}
.foot p{color:#8fabcf;font-size:.87rem;margin-top:.75rem;max-width:44ch}
.foot-b{border-top:1px solid rgba(255,255,255,.13);margin-top:2rem;padding-top:1.2rem;font-size:.82rem;
  color:#8fabcf;text-align:center}
#toTop{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;border:0;
  background:var(--grad);color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:var(--sh2);opacity:0;
  pointer-events:none;transition:.35s var(--ease);z-index:140}
#toTop.on{opacity:1;pointer-events:auto}
#toTop:hover{transform:translateY(-4px)}
/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .foot-g{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .hero-g,.split,.calc,.story,.pan-grid{grid-template-columns:1fr}
  /* [แก้บั๊ก] margin-inline:auto ทำให้ grid item เลิกยืดเต็มช่อง แล้วหดตาม
     ความกว้างตามธรรมชาติของลูกแทน — .ph/.board ข้างในใช้ความกว้างเป็น %
     ซึ่งไม่นับเป็นความกว้างตามธรรมชาติ กรอบภาพจึงเหลือแค่ ~16px บนจอแคบ
     ทุกรุ่น ต้องใส่ width:100% กำกับไว้ด้วย */
  .art{max-width:520px;margin-inline:auto;width:100%}
  .scale{grid-template-columns:1fr}
  .vs{writing-mode:horizontal-tb;letter-spacing:.2em;padding:.5rem}
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--surface);
    padding:.8rem;border-bottom:1px solid var(--line);box-shadow:var(--sh2);transform:translateY(-140%);
    opacity:0;pointer-events:none;transition:.4s var(--ease);margin:0}
  .links.open{transform:none;opacity:1;pointer-events:auto}
  .links a{padding:.75rem 1rem}
  .burger{display:flex}
  .nosm{display:none}
  .arw i{transform:rotate(90deg)}
}
@media (max-width:640px){
  .sec{padding:3.6rem 0}
  .stats{grid-template-columns:1fr}
  .mxg{grid-template-columns:1fr}
  .mc.h{display:none}
  .foot-g{grid-template-columns:1fr}
  .brow{grid-template-columns:90px 1fr auto;font-size:.76rem}
  .mx,.pan,.cform,.cout,.quote{padding:1.3rem}
  .cbtns{grid-template-columns:1fr}
  .tagA{left:0}.tagB{right:0}
  .hero{padding-top:2.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rv.pre{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}
/* ══════════════ v5 ADDITIONS ══════════════ */
/* ---- ผลรวมเปรียบเทียบ A/B ---- */
.zero{color:var(--muted)}
.gapbox{
  margin-top:1.4rem;padding:1.15rem 1.5rem;border-radius:var(--r2);
  background:linear-gradient(120deg,rgba(52,211,153,.14),rgba(var(--a5),.10));
  border:1px solid rgba(52,211,153,.34);
  display:flex;align-items:center;gap:.6rem 1.1rem;flex-wrap:wrap;
}
.gapbox .gl{font-size:.9rem;font-weight:700;color:var(--text2);letter-spacing:.02em}
.gapbox b{font-size:clamp(1.35rem,3.4vw,1.9rem);font-weight:800;font-variant-numeric:tabular-nums;color:var(--mint)}
.gapbox b.neg{color:var(--rose)}
.gapbox .gs{flex:1 1 100%;font-size:.85rem;color:var(--muted);line-height:1.7}
/* ---- โหมดขั้นสูงของเครื่องคำนวณ ---- */
.adv{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:1rem;margin-top:.2rem}
.advtog{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;font-weight:600;font-size:.95rem}
/* [แก้บั๊ก] .cform label{display:grid} ถูกประกาศทีหลังและเจาะจงกว่า (0,2,0 > 0,1,0)
   ช่องติ๊ก "โหมดขั้นสูง" จึงหล่นไปอยู่คนละบรรทัดกับข้อความมาตลอด ทั้งจอใหญ่และจอเล็ก */
.cform label.advtog{display:flex;gap:.7rem;align-items:flex-start}
.advtog input{width:20px;height:20px;flex:none;margin-top:.25rem;accent-color:var(--b500);cursor:pointer}
.advtog small{display:block;font-weight:400;font-size:.8rem;color:var(--muted);line-height:1.65;margin-top:.25rem}
.advg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-top:.9rem}
#cmpBox{margin-top:1rem;border-top:1px solid var(--line);padding-top:.9rem}
.cmpr{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.42rem 0;font-size:.88rem;color:var(--muted)}
.cmpr b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text2)}
.cmpr.on{color:var(--text);font-weight:600}
.cmpr.on b{color:var(--b600);font-size:1.02rem}
[data-theme="dark"] .cmpr.on b{color:var(--sky)}
#cmpNote{font-size:.79rem;color:var(--muted);line-height:1.65;margin-top:.35rem}
/* ---- ขัดเกลาดีไซน์เล็กน้อย ---- */
.head h2{text-wrap:balance}
.lead,.head p{text-wrap:pretty}
.card,.pain,.step,.node,.myth{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover,.pain:hover{transform:translateY(-4px)}
.bill b{font-variant-numeric:tabular-nums}
.cout #sumOut{font-variant-numeric:tabular-nums}
.brow b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ---- [แก้คอนทราสต์] แถบสีเข้ม #cost ----
   เดิม .pan-side ใช้พื้นขาว (--surface) แต่ตัวอักษรสืบทอดสีขาวจาก .dark-sec
   ในโหมดสว่างจึงเป็น "ตัวหนังสือขาวบนการ์ดขาว" อ่านไม่ออกเลย
   ทำให้การ์ดเปรียบเทียบเป็นการ์ดโปร่งบนพื้นเข้ม เหมือนการ์ด .pain ในแถบเดียวกัน */
.dark-sec .pan-side{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.14);
  color:#eaf3ff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.dark-sec .pan-side h3{color:#fff}
.dark-sec .pan-side>p{color:#a8c3e6}
.dark-sec .pan-side li{color:#d7e6f9}
.dark-sec .bill{background:rgba(4,12,28,.55);border-color:rgba(255,255,255,.16)}
.dark-sec .bill div span{color:#b9d1ec}
.dark-sec .bill .tot{border-top-color:rgba(255,255,255,.22);color:#fff}
.dark-sec .bill .pos{color:#7dd3fc}
.dark-sec .bill .neg{color:#fda4af}
.dark-sec .zero{color:#8fa9c8}
.dark-sec .note{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#c8dcf3}
.dark-sec .note b{color:#fff}
.dark-sec .gapbox .gl{color:#bcd6f2}
.dark-sec .gapbox .gs{color:#93aecd}
.dark-sec .gapbox b{color:#6ee7b7}
/* ป้าย VS ให้เห็นชัดขึ้น แทนตัวหนังสือจาง ๆ แนวตั้ง */
.vs{
  writing-mode:horizontal-tb;letter-spacing:.12em;align-self:center;
  width:56px;height:56px;border-radius:50%;font-size:.82rem;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);box-shadow:var(--sh1)
}
.dark-sec .vs{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:#dbeafe}
@media (max-width:860px){ .vs{width:auto;height:auto;border-radius:999px;padding:.35rem 1.1rem;justify-self:center} }
/* ---- กล่องเทียบสองวิธี อยู่บนการ์ดไล่สีน้ำเงิน จึงต้องใช้ตัวอักษรโทนขาว ---- */
.cout #cmpBox{border-top-color:rgba(255,255,255,.28)}
.cout .cmpr{color:rgba(255,255,255,.74)}
.cout .cmpr b{color:rgba(255,255,255,.9)}
.cout .cmpr.on{color:#fff;font-weight:700}
.cout .cmpr.on b{color:#fff}
.cout #cmpNote{color:rgba(255,255,255,.75)}
[data-theme="dark"] .cout .cmpr.on b{color:#fff}
/* ---- [แก้คอนทราสต์โหมดสว่าง] ----
   ตรวจทั้งหน้าด้วยเกณฑ์ WCAG AA แล้วพบว่าสีเทา --muted และสีฟ้า --b500
   ที่ใช้กับตัวอักษรขนาดเล็ก ได้อัตราส่วนราว 3.3–4.5:1 ซึ่งยังไม่ผ่าน 4.5:1
   จึงทำให้เข้มขึ้นเฉพาะโหมดสว่าง (โหมดมืดผ่านเกณฑ์อยู่แล้ว จึงไม่แตะ) */
:root:not([data-theme="dark"]){ --muted:#54687e; }
:root:not([data-theme="dark"]) .eye,
:root:not([data-theme="dark"]) .tl small,
:root:not([data-theme="dark"]) .pyr b{ color:var(--b700) }
:root:not([data-theme="dark"]) .tl:last-child small{ color:#be123c }
:root:not([data-theme="dark"]) .pain b{ color:#be123c }
:root:not([data-theme="dark"]) .brand b{ color:var(--b600) }
:root:not([data-theme="dark"]) .step h3 small,
:root:not([data-theme="dark"]) .arw span{ color:var(--b700) }
/* แถบ/พื้นสีเข้มต้องคงสีสว่างไว้เสมอ — ต้องมี :root นำหน้าเพื่อให้ชนะกฎด้านบน */
:root .dark-sec .eye{color:var(--sky)}
:root .dark-sec .pain b{color:#fda4af}
:root .dark-sec .imgbar .tag{color:#7dd3fc;background:rgba(125,211,252,.16)}
:root .foot .brand b{color:var(--sky)}
/* ช่องใส่รูปในแถบสีเข้ม ให้กลมกลืนกับแถบนั้น */
.dark-sec .imgslot .ph{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#bcd6f2}
.dark-sec .imgbar{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.dark-sec .imgbar input[type=text]{background:rgba(4,12,28,.5);border-color:rgba(255,255,255,.2);color:#eaf3ff}
.dark-sec .imgbar .mini{background:rgba(4,12,28,.5);border-color:rgba(255,255,255,.2);color:#dbeafe}
.dark-sec .imgslot figcaption{color:#a8c3e6}
/* ลิงก์ไปหน้าสุขภาพ ให้เด่นกว่าเมนูอื่นเล็กน้อย */
.links a.tohealth{color:#0f766e;background:rgba(45,212,160,.13);font-weight:700}
.links a.tohealth:hover{background:rgba(45,212,160,.22)}
[data-theme="dark"] .links a.tohealth{color:#5eead4;background:rgba(45,212,160,.16)}
/* ---- แถบเลื่อนคู่กับช่องกรอก ---- */
.sld{position:relative;margin-top:1.5rem;padding-top:.15rem}
.sld input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;outline:none;cursor:pointer;
  background:
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%) no-repeat,
    linear-gradient(90deg,var(--b600) 0%,var(--b500) var(--p,50%),var(--line) var(--p,50%),var(--line) 100%);
  background-size:60px 100%,100% 100%;
  background-position:-80px 0,0 0;
  transition:background-color .1s linear,box-shadow .3s}
.sld.is-drag input[type=range]{
  box-shadow:0 0 0 6px rgba(var(--a5),.10);
  animation:sldSheen 1.15s linear infinite}
@keyframes sldSheen{
  from{background-position:-80px 0,0 0}
  to  {background-position:calc(100% + 80px) 0,0 0}}
.sld input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;
  border:3px solid var(--b500);box-shadow:0 3px 12px -2px rgba(var(--a6),.75);
  cursor:grab;margin-top:-8px;transition:transform .18s var(--ease),box-shadow .22s}
.sld input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}
.sld input[type=range]:active::-webkit-slider-thumb{
  cursor:grabbing;transform:scale(1.24);box-shadow:0 0 0 9px rgba(var(--a5),.18),0 4px 16px -2px rgba(var(--a6),.9)}
.sld input[type=range]::-moz-range-thumb{
  width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid var(--b500);
  box-shadow:0 3px 12px -2px rgba(var(--a6),.75);cursor:grab}
.sld input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:transparent}
.sld input[type=range]:focus-visible{outline:2px solid var(--b500);outline-offset:5px}
[data-theme="dark"] .sld input[type=range]::-webkit-slider-thumb{background:#0c1e3b;border-color:var(--sky)}
[data-theme="dark"] .sld input[type=range]::-moz-range-thumb{background:#0c1e3b;border-color:var(--sky)}
[data-theme="dark"] .sld input[type=range]{
  background:
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%) no-repeat,
    linear-gradient(90deg,var(--cyan) 0%,var(--sky) var(--p,50%),var(--line) var(--p,50%),var(--line) 100%);
  background-size:60px 100%,100% 100%;background-position:-80px 0,0 0}
[data-theme="dark"] .sld.is-drag input[type=range]{box-shadow:0 0 0 6px rgba(var(--aSky),.14)}
/* ป้ายค่าลอยเหนือหัวแถบ ปรากฏตอนลากหรือโฟกัส */
.sld-b{
  position:absolute;top:-1.35rem;transform:translateX(-50%) scale(.86);transform-origin:bottom center;
  padding:.16rem .55rem;border-radius:8px;white-space:nowrap;pointer-events:none;
  background:var(--b700);color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .22s,transform .22s var(--ease);
  box-shadow:0 6px 16px -6px rgba(var(--a9),.7)}
.sld-b::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--b700)}
.sld.is-drag .sld-b{opacity:1;transform:translateX(-50%) scale(1)}
[data-theme="dark"] .sld-b{background:var(--sky);color:#04142e}
[data-theme="dark"] .sld-b::after{border-top-color:var(--sky)}
.sld-t{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:.4rem;
  font-variant-numeric:tabular-nums}
.sld-t .mid{opacity:.62}
/* ---- [แก้คอนทราสต์] ตัวอักษรเล็กสีฟ้าอ่อนบนพื้นขาว ไม่ผ่าน WCAG AA (3.46:1)
        จึงเปลี่ยนเป็นน้ำเงินเข้มในโหมดสว่าง และคงสีฟ้าไว้ในโหมดมืด ---- */
.step h3 small,.pn,.rung h4 small,.tl small{color:var(--b700)}
[data-theme="dark"] .step h3 small,
[data-theme="dark"] .pn,
[data-theme="dark"] .rung h4 small,
[data-theme="dark"] .tl small{color:var(--sky)}
.step.hi h3 small{color:rgba(255,255,255,.93)}
/* ป้ายบนแถบเส้นเวลาในแถบสีเข้ม ต้องใช้โทนสว่าง ไม่ใช่ --muted */
.dark-sec .albar .tick{color:#dbeafe}
.dark-sec .albar .tick i{background:rgba(255,255,255,.4)}
.dark-sec .albar .cap{color:#a8c3e6}
/* ================= แถบลิงก์ข้ามหน้า (อยู่ในแถบเมนู ติดบนสุดเสมอ) ================= */
.tools{border-top:1px solid var(--line)}
.tools-in{display:flex;gap:.3rem;padding:.42rem 0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tools-in::-webkit-scrollbar{display:none}
.tools a{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .9rem;border-radius:999px;
  font-size:.85rem;font-weight:700;color:var(--muted);white-space:nowrap;
  transition:color .25s,background .25s,transform .25s var(--ease)}
.tools a:hover{color:var(--b600);background:rgba(var(--a5),.13);transform:translateY(-1px)}
[data-theme="dark"] .tools a:hover{color:var(--sky);background:rgba(var(--aSky),.14)}
.tools a.cur{background:var(--grad);color:#fff;box-shadow:0 8px 18px -10px rgba(var(--a6),.9)}
.tools a.cur:hover{color:#fff;transform:none}
.tools a.home{border:1.5px solid var(--line)}
.tools a.home:hover{border-color:var(--b500)}
@media (max-width:640px){
  .tools-in{padding:.36rem 0}
  .tools a{font-size:.79rem;padding:.36rem .7rem}
}
/* เมนูมือถือต้องเปิดลงมาใต้ "ทั้งแถบหัว" (รวมแถบลิงก์ข้ามหน้า) ไม่ใช่ใต้แถวแรก
   จึงให้ .links อ้างอิงตำแหน่งกับ .nav แทน .nav-in */
.nav-in{position:static}
/* แถบหัวสูงขึ้นเพราะมีแถบลิงก์ข้ามหน้า จุดจอดของ #anchor จึงต้องเลื่อนตาม */
html{scroll-padding-top:142px}
@media (max-width:640px){html{scroll-padding-top:124px}}
/* ---- [แก้บั๊ก] ตัวเลขนับขึ้นในการ์ดสถิติ ----
   เดิม .stat span ตั้งใจจัดสไตล์ให้ "คำอธิบายใต้ตัวเลข" แต่ไปโดน
   <span class="num"> ที่อยู่ใน <b> ด้วย ตัวเลขจึงเล็กและจางกว่าหน่วย
   แถมตกลงไปคนละบรรทัด — ให้ .num สืบทอดขนาด/สีจาก <b> แทน */
.stat b .num{display:inline;font-size:inherit;color:inherit;font-weight:inherit}
/* [แก้บั๊ก] เดิมตั้งชื่อคลาสปุ่มนี้ว่า .quote ซึ่งชนกับ .quote ของกล่องคำพูด
   ทำให้เครื่องหมาย ❝ ขนาด 5.5rem ทะลุมาทับตัวหนังสือบนปุ่ม จึงเปลี่ยนเป็น .askq
   และกันไว้อีกชั้นเผื่อมีคลาสประดับอื่นมาโดนในอนาคต */
.tools a::before,.tools a::after{content:none}
/* ---- ปุ่มขอรับข้อเสนอ ท้ายแถบลิงก์ข้ามหน้า ----
   ใช้โทนอำพันให้ต่างจากปุ่มไล่สีน้ำเงินที่ใช้บอก "หน้าปัจจุบัน" จะได้ไม่สับสนว่าเป็นหน้าไหน
   สีคงที่ทั้งสองโหมด เพราะเป็นปุ่มกระทำหลัก ไม่ใช่ลิงก์นำทาง */
.tools a.askq{
  margin-left:auto;background:linear-gradient(120deg,#f59e0b,#fbbf24);color:#3a1d00;
  box-shadow:0 8px 18px -10px rgba(245,158,11,.95)}
.tools a.askq:hover{
  color:#3a1d00;background:linear-gradient(120deg,#ea8c04,#f8b617);
  transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(245,158,11,1)}
.tools a.askq span{display:inline-block;transition:transform .3s var(--ease)}
.tools a.askq:hover span{transform:translateX(4px)}
/* จอแคบ: แถบเลื่อนได้อยู่แล้ว แต่ต้องมีช่องไฟคั่นจากปุ่มสุดท้าย ไม่งั้นดูเป็นพวกเดียวกัน */
@media (max-width:1080px){.tools a.askq{margin-left:.55rem}}
/* ---- สีประจำเครื่องมือแต่ละตัว ----
   ลิงก์ในแถบจะติดสีของหน้าปลายทางตอนชี้เมาส์ ทำให้จำได้ว่าสีไหนคือหน้าไหน
   แม้จะยังไม่ได้เข้าไปในหน้านั้น */
.tools a[href="money.html"]:hover    {color:#0b4a8f;background:rgba(43,139,242,.14)}
.tools a[href="health.html"]:hover   {color:#046f52;background:rgba(16,185,129,.15)}
.tools a[href="retire.html"]:hover   {color:#5b21b6;background:rgba(139,92,246,.16)}
.tools a[href="education.html"]:hover{color:#9f1239;background:rgba(225,29,72,.13)}
[data-theme="dark"] .tools a[href="money.html"]:hover    {color:#7dd3fc;background:rgba(56,189,248,.16)}
[data-theme="dark"] .tools a[href="health.html"]:hover   {color:#5eead4;background:rgba(45,212,191,.16)}
[data-theme="dark"] .tools a[href="retire.html"]:hover   {color:#c4b5fd;background:rgba(167,139,250,.18)}
[data-theme="dark"] .tools a[href="education.html"]:hover{color:#fda4af;background:rgba(251,113,133,.16)}
/* หน้าปัจจุบันเป็นปุ่มไล่สีอยู่แล้ว ไม่ต้องเปลี่ยนตอน hover */
.tools a.cur:hover{background:var(--grad);color:#fff}
/* ---- [แก้คอนทราสต์] โหมดมืดกับโทนสีเข้ม ----
   .eye กับ .pyr b ใช้ --b500 ซึ่งพอไหวบนพื้นเข้มเมื่อเป็นโทนน้ำเงิน
   แต่โทนม่วง (#8b5cf6) และชมพู (#e11d48) ตกเกณฑ์ AA บนพื้นมืด
   จึงให้ใช้ --sky (เฉดอ่อนของสีประจำหน้า) แทนในโหมดมืดทุกโทน */
[data-theme="dark"] .eye{color:var(--sky)}
[data-theme="dark"] .pyr b{color:var(--sky)}

/* ── โลโก้ 2ProviGroup บนแถบหัวและฟุตเตอร์ ──
   ไฟล์โลโก้เป็นวงกลมขาวมุมโปร่ง ถ้าปล่อยพื้นไล่เฉดของ .mark ไว้
   สีจะโผล่ตามมุมจนดูเลอะ จึงเอาพื้นออกแล้วให้รูปเต็มกรอบแทน */
.mark{background:none;border-radius:50%;padding:0;overflow:hidden;
  box-shadow:0 6px 18px -8px rgba(var(--a6),.55)}
.mark img{width:100%;height:100%;display:block;object-fit:contain}