/* ══════════════════════════════════════════════════════════════
   HEALTHSHIELD — Dark Cinematic
   โทนคนละแบบกับหน้าหลัก: พื้นดำลึก แสงออร่า เส้นเรืองแสง
   ══════════════════════════════════════════════════════════════ */
:root{
  --menu-grad:var(--gJade);--menu-fg:#03121f;  /* สีแถบ "หน้าปัจจุบัน" ในเมนูมือถือ */
  --jade:#2ee6a8; --cyan:#22d3ee; --violet:#a78bfa; --rose:#fb7185; --amber:#fbbf24; --blue:#4b8cf7;

  --ink:#04060d; --ink2:#070c18; --ink3:#0b1222;
  --panel:rgba(255,255,255,.045);
  --panel2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.11);
  --line2:rgba(255,255,255,.2);
  --tx:#eaf2ff; --tx2:#a9bfda; --tx3:#728aa8;

  --gJade:linear-gradient(120deg,#2ee6a8,#22d3ee);
  --gWarn:linear-gradient(120deg,#fb7185,#fbbf24);
  --gVio:linear-gradient(120deg,#a78bfa,#22d3ee);

  --r:16px; --r2:24px; --r3:34px;
  --ease:cubic-bezier(.22,.9,.24,1);
  --maxw:1180px;
  --safeb:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
[data-theme="light"]{
  --ink:#f4f7fd; --ink2:#ffffff; --ink3:#eef3fb;
  --panel:#ffffff; --panel2:#f4f8fe;
  --line:#dde6f3; --line2:#c3d2e6;
  /* โทนสว่าง: เข้มพอผ่านเกณฑ์คอนทราสต์ AA สำหรับตัวอักษรขนาดเล็ก */
  --tx:#08101f; --tx2:#3a4f6b; --tx3:#54687f;
  --jade:#046f52; --cyan:#0e7490; --violet:#6d28d9; --rose:#be123c; --amber:#96590b; --blue:#1d4ed8;
  --gJade:linear-gradient(120deg,#059669,#0e7490);
  --gWarn:linear-gradient(120deg,#e11d48,#b45309);
  --gVio:linear-gradient(120deg,#6d28d9,#0e7490);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:142px;overflow-x:hidden;overflow-y:scroll}
body{
  font-family:"IBM Plex Sans Thai","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--ink); color:var(--tx); line-height:1.8; font-size:16px;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease),color .5s var(--ease);
}
/* ออร่าเรืองแสงพื้นหลัง — ตรึงไว้กับจอ ไม่ขวางการคลิก */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58vw 46vw at 12% -6%, rgba(46,230,168,.16), transparent 62%),
    radial-gradient(52vw 44vw at 88% 4%, rgba(167,139,250,.15), transparent 62%),
    radial-gradient(64vw 50vw at 50% 108%, rgba(34,211,238,.12), transparent 64%);
}
[data-theme="light"] body::before{
  background:
    radial-gradient(58vw 46vw at 12% -6%, rgba(5,150,105,.10), transparent 62%),
    radial-gradient(52vw 44vw at 88% 4%, rgba(109,40,217,.09), transparent 62%),
    radial-gradient(64vw 50vw at 50% 108%, rgba(14,116,144,.08), transparent 64%);
}
/* ผิวสัมผัสแบบฟิล์ม — เกรนละเอียดทับทั้งหน้า */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after{opacity:.35}

a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none}
h1,h2,h3,h4{line-height:1.24;letter-spacing:-.022em;font-weight:800}
::selection{background:var(--jade);color:#04120c}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid transparent;background-clip:content-box}

.wrap{width:min(var(--maxw),92%);margin-inline:auto}
.narrow{width:min(880px,92%);margin-inline:auto}
.gJ{background:var(--gJade);-webkit-background-clip:text;background-clip:text;color:transparent}
.gW{background:var(--gWarn);-webkit-background-clip:text;background-clip:text;color:transparent}
.gV{background:var(--gVio);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── REVEAL ── */
.rv{opacity:1;transform:none}
.rv.pre{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.pre.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv.pre{opacity:1!important;transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── NAV ── */
#prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
#prog b{display:block;height:100%;width:0;background:var(--gJade);box-shadow:0 0 14px var(--jade)}
.nav{position:sticky;top:0;z-index:150;background:color-mix(in srgb,var(--ink) 78%,transparent);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
@supports (backdrop-filter:blur(6px)){.nav{backdrop-filter:blur(20px) saturate(170%)}}
@supports not (backdrop-filter:blur(6px)){.nav{background:var(--ink)}}
.nav.stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--ink) 92%,transparent)}
.nav-in{display:flex;align-items:center;gap:.8rem;padding:.75rem 0;min-height:64px}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.14rem;flex:none;letter-spacing:-.02em}
.mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--gJade);color:#03130d;box-shadow:0 8px 26px -8px rgba(46,230,168,.75)}
.brand i{font-style:normal;color:var(--jade)}
.links{display:flex;gap:.1rem;margin-inline:auto;flex-wrap:wrap}
.links a{padding:.5rem .82rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--tx3);
  transition:color .25s,background .25s}
.links a:hover{color:var(--tx);background:var(--panel2)}
.links a.act{color:var(--jade);background:color-mix(in srgb,var(--jade) 14%,transparent)}
.acts{display:flex;align-items:center;gap:.5rem;flex:none}
.ibtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--tx);cursor:pointer;font-size:1.08rem;display:grid;place-items:center;flex:none;
  transition:transform .4s var(--ease),border-color .3s}
.ibtn:hover{transform:rotate(-22deg) scale(1.1);border-color:var(--jade)}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:18px;height:2px;background:var(--tx);border-radius:2px;transition:transform .3s,opacity .3s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:980px){
  .burger{display:flex}
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:.2rem;padding:.8rem;
    background:var(--ink2);border:1px solid var(--line);border-radius:0 0 var(--r2) var(--r2);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.9);display:none}
  .links.open{display:flex}
  .nav-in{position:relative}
  /* ต้องเจาะจงกว่า .btn ที่ประกาศทีหลัง ไม่งั้นปุ่มยังโผล่และดันแถบบนจนล้นจอ */
  .nav .nosm{display:none}
}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.92rem 1.7rem;
  border-radius:999px;border:0;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  position:relative;overflow:hidden;white-space:nowrap;min-height:48px;
  transition:transform .3s var(--ease),box-shadow .3s,filter .3s,background .3s,color .3s,border-color .3s}
.btn-p{background:var(--gJade);color:#03130d;box-shadow:0 14px 34px -14px rgba(46,230,168,.85)}
.btn-p:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 20px 44px -16px rgba(46,230,168,.95)}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn-p:hover::after{transform:translateX(130%)}
.btn-o{border:1.6px solid var(--line2);color:var(--tx);background:transparent}
.btn-o:hover{border-color:var(--jade);color:var(--jade);transform:translateY(-3px)}
.btn-lg{padding:1.05rem 2.1rem;font-size:1.06rem;min-height:56px}
.btn:active{transform:translateY(0) scale(.985)}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}

/* ── SECTION ── */
.sec{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.eye{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--jade);margin-bottom:.8rem}
.eye::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.head{max-width:800px;margin-bottom:3.2rem}
.head.mid{margin-inline:auto;text-align:center}
.head.mid .eye::after{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.head h2{font-size:clamp(1.65rem,3.7vw,2.55rem);margin-bottom:.85rem;text-wrap:balance}
.head p{color:var(--tx2);font-size:clamp(.98rem,2vw,1.1rem);text-wrap:pretty}

/* ── HERO ── */
.hero{position:relative;padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%)}
.hero-g{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:980px){.hero-g{grid-template-columns:1fr}}
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem 1rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-size:.83rem;color:var(--tx2);margin-bottom:1.3rem}
.pill i{font-style:normal;width:7px;height:7px;border-radius:50%;background:var(--jade);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--jade) 22%,transparent);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(1.95rem,5vw,3.55rem);letter-spacing:-.032em;margin-bottom:1.1rem;text-wrap:balance}
.hero .lead{color:var(--tx2);font-size:clamp(1rem,2.2vw,1.16rem);max-width:56ch;text-wrap:pretty}

.hero-chips{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem}
.chip{padding:.62rem 1rem;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  font-size:.84rem;color:var(--tx2);display:inline-flex;align-items:center;gap:.45rem}
.chip b{color:var(--tx);font-weight:800}

/* การ์ดภาพหลัก */
.stage{position:relative;border-radius:var(--r3);padding:clamp(1.2rem,2.5vw,2rem);
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(0,0,0,.95);overflow:hidden}
.stage::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--jade) 55%,transparent),transparent 45%,color-mix(in srgb,var(--violet) 45%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.stage-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.stage-h h4{font-size:.95rem;font-weight:700}
.stage-h span{font-size:.74rem;color:var(--tx3);display:inline-flex;align-items:center;gap:.35rem}
.dot{width:7px;height:7px;border-radius:50%;background:var(--rose);animation:pulse 1.6s infinite}

/* ── ตัวเลขสถิติ ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.stat{padding:1.7rem 1.5rem;border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);
  position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s}
.stat:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--jade) 45%,transparent)}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--gJade);opacity:.85}
.stat.warn::before{background:var(--gWarn)}
.stat.vio::before{background:var(--gVio)}
.stat .v{font-size:clamp(2rem,5vw,2.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.stat .k{font-size:.83rem;color:var(--tx3);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:.5rem 0 .35rem}
.stat p{font-size:.9rem;color:var(--tx2);line-height:1.7}

/* ── การ์ดทั่วไป ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.card{padding:1.9rem 1.7rem;border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .4s,background .4s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:var(--line2);background:var(--panel2)}
.card .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;
  background:color-mix(in srgb,var(--jade) 14%,transparent);border:1px solid color-mix(in srgb,var(--jade) 30%,transparent);
  margin-bottom:1.1rem}
.card.w .ic{background:color-mix(in srgb,var(--rose) 14%,transparent);border-color:color-mix(in srgb,var(--rose) 30%,transparent)}
.card.v .ic{background:color-mix(in srgb,var(--violet) 14%,transparent);border-color:color-mix(in srgb,var(--violet) 30%,transparent)}
.card h3{font-size:1.1rem;margin-bottom:.5rem}
.card p{font-size:.93rem;color:var(--tx2);line-height:1.75}
.card b{color:var(--tx)}

/* ── บิลค่ารักษา ── */
.billwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:center}
@media (max-width:900px){.billwrap{grid-template-columns:1fr}}
.billbars{display:grid;gap:.7rem}
.bb{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;gap:.9rem;align-items:center;
  padding:.55rem .2rem;border-radius:10px;transition:background .3s}
.bb:hover{background:var(--panel)}
.bb .nm{font-size:.88rem;color:var(--tx2)}
.bb .tk{height:12px;border-radius:99px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.bb .tk i{display:block;height:100%;border-radius:99px;background:var(--gJade);width:0;
  transition:width 1.1s var(--ease)}
.bb.a .tk i{background:var(--gWarn)}
.bb.b .tk i{background:var(--gVio)}
.bb .pc{font-size:.85rem;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

/* ── ตารางเทียบ ── */
.vsgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media (max-width:820px){.vsgrid{grid-template-columns:1fr}}
.vcard{padding:1.9rem 1.7rem;border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);position:relative}
.vcard.best{border-color:color-mix(in srgb,var(--jade) 45%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--jade) 10%,transparent),var(--panel))}
.vcard .tagbest{position:absolute;top:-11px;right:18px;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  padding:.28rem .8rem;border-radius:999px;background:var(--gJade);color:#03130d}
.vcard h3{font-size:1.18rem;margin-bottom:.3rem}
.vcard .sub{font-size:.85rem;color:var(--tx3);margin-bottom:1.2rem}
.vlist{display:grid;gap:.7rem}
.vlist li{display:flex;gap:.6rem;font-size:.92rem;color:var(--tx2);align-items:flex-start;line-height:1.7}
.vlist i{font-style:normal;flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:.68rem;margin-top:.32rem;color:#03130d;background:var(--jade)}
.vlist li.no i{background:var(--rose);color:#fff}

/* ── ขั้นบันได / ไทม์ไลน์ ── */
.rail{display:grid;gap:1.1rem;position:relative;padding-left:2.4rem}
.rail::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--jade),var(--violet),var(--rose))}
.rl{position:relative;padding:1.4rem 1.5rem;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.rl::before{content:"";position:absolute;left:-2.4rem;top:1.6rem;width:24px;height:24px;border-radius:50%;
  background:var(--ink2);border:2px solid var(--jade);box-shadow:0 0 0 5px color-mix(in srgb,var(--jade) 12%,transparent)}
.rl:nth-child(2)::before{border-color:var(--cyan);box-shadow:0 0 0 5px color-mix(in srgb,var(--cyan) 12%,transparent)}
.rl:nth-child(3)::before{border-color:var(--violet);box-shadow:0 0 0 5px color-mix(in srgb,var(--violet) 12%,transparent)}
.rl:nth-child(4)::before{border-color:var(--rose);box-shadow:0 0 0 5px color-mix(in srgb,var(--rose) 12%,transparent)}
.rl h3{font-size:1.05rem;margin-bottom:.3rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.rl h3 small{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.rl p{font-size:.92rem;color:var(--tx2)}

/* ── กล่องคำเตือน/ข้อมูล ── */
.note{padding:1.15rem 1.4rem;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
  font-size:.9rem;color:var(--tx2);line-height:1.8}
.note b{color:var(--tx)}
.note.warn{background:color-mix(in srgb,var(--rose) 10%,transparent);border-color:color-mix(in srgb,var(--rose) 32%,transparent)}
.note.ok{background:color-mix(in srgb,var(--jade) 10%,transparent);border-color:color-mix(in srgb,var(--jade) 32%,transparent)}

/* ── เครื่องคำนวณ ── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
@media (max-width:920px){.calc{grid-template-columns:1fr}}
.form{padding:1.9rem;border-radius:var(--r3);background:var(--panel);border:1px solid var(--line);display:grid;gap:1.1rem}
.f label{display:block;font-size:.9rem;font-weight:700;margin-bottom:.3rem}
.f small{display:block;font-size:.78rem;color:var(--tx3);font-weight:400;line-height:1.6;margin-bottom:.5rem}
.f input,.f select{width:100%;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line2);
  background:var(--ink3);color:var(--tx);font-family:inherit;font-size:1rem;
  font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;transition:border-color .25s,box-shadow .25s}
.f select{cursor:pointer;padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.f input:focus,.f select:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px color-mix(in srgb,var(--jade) 20%,transparent)}
.f input[type=number]{-moz-appearance:textfield}
.f input::-webkit-outer-spin-button,.f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.frow{grid-template-columns:1fr}}

.out{padding:1.9rem;border-radius:var(--r3);position:relative;overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--jade) 16%,var(--ink2)),var(--ink2) 62%);
  border:1px solid color-mix(in srgb,var(--jade) 34%,transparent);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.out .lbl{font-size:.84rem;color:var(--tx2);letter-spacing:.04em}
.out .big{font-size:clamp(2rem,5.4vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin:.25rem 0 .1rem;
  font-variant-numeric:tabular-nums;background:var(--gJade);-webkit-background-clip:text;background-clip:text;color:transparent}
.out .sub{font-size:.86rem;color:var(--tx3)}
.orow{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.orow:last-of-type{border-bottom:0}
.orow span{color:var(--tx2)}
.orow b{font-variant-numeric:tabular-nums;color:var(--tx);font-weight:700}
.orow.tot{border-top:1px solid var(--line2);margin-top:.4rem;padding-top:.75rem;font-size:1rem}
.formula{margin-top:1rem;padding:.9rem 1.1rem;border-radius:12px;background:rgba(0,0,0,.28);
  border:1px solid var(--line);font-size:.82rem;color:var(--tx2);line-height:1.9}
[data-theme="light"] .formula{background:var(--ink3)}
.hintbox{margin-top:.9rem;font-size:.86rem;color:var(--tx2);line-height:1.75}
.stamp{margin-top:.6rem;font-size:.74rem;color:var(--tx3)}

/* ── กราฟค่ารักษา vs วงเงิน ── */
.chartbox{padding:1.6rem;border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);margin-top:1.4rem}
.chartbox svg{width:100%;height:auto;overflow:visible}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;color:var(--tx2);margin-top:.9rem}
.legend i{width:18px;height:3px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:.4rem}

/* ── FAQ ── */
.acc{display:grid;gap:.75rem}
.acc details{border-radius:var(--r);background:var(--panel);border:1px solid var(--line);overflow:hidden;
  transition:border-color .3s}
.acc details[open]{border-color:color-mix(in srgb,var(--jade) 40%,transparent)}
.acc summary{padding:1.1rem 1.4rem;cursor:pointer;font-weight:700;font-size:.98rem;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.3rem;color:var(--jade);flex:none;transition:transform .3s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{padding:0 1.4rem 1.2rem;font-size:.92rem;color:var(--tx2);line-height:1.85}

/* ── CTA + FOOTER ── */
.cta{padding:clamp(4rem,8vw,6.5rem) 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 90% at 50% 50%,color-mix(in srgb,var(--jade) 16%,transparent),transparent 70%)}
.cta h2{font-size:clamp(1.65rem,3.9vw,2.6rem);margin-bottom:.9rem;text-wrap:balance}
.cta p{color:var(--tx2);max-width:58ch;margin:0 auto}
.foot{border-top:1px solid var(--line);padding:3rem 0 2rem;background:var(--ink2)}
.foot-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:1024px){.foot-g{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.foot-g{grid-template-columns:1fr}}
.foot p{font-size:.88rem;color:var(--tx3);line-height:1.85;margin-top:.8rem;max-width:46ch}
.foot h4{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:.8rem}
.foot a{display:block;font-size:.92rem;color:var(--tx2);padding:.22rem 0;transition:color .25s}
.foot a:hover{color:var(--jade)}
.foot-b{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--tx3);text-align:center}
#toTop{position:fixed;right:1.1rem;bottom:calc(1.2rem + var(--safeb));z-index:120;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel2);color:var(--tx);cursor:pointer;font-size:1.1rem;
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s var(--ease);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#toTop.on{opacity:1;pointer-events:auto}
#toTop:hover{transform:translateY(-4px);border-color:var(--jade)}

/* ── ช่องใส่รูปภาพ (ระบบเดียวกับหน้าหลัก) ── */
.imgslot{position:relative;margin:2.4rem 0 0;border-radius:var(--r2)}
.imgslot.empty{display:none}
body.imgedit .imgslot.empty{display:block}
.imgslot img{width:100%;height:auto;border-radius:var(--r2);border:1px solid var(--line);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95)}
.imgslot figcaption{margin-top:.7rem;font-size:.84rem;color:var(--tx3);text-align:center}
.imgslot figcaption:empty{display:none}
.imgslot .ph{display:none;place-items:center;min-height:200px;border-radius:var(--r2);
  border:2px dashed var(--line2);background:var(--panel);color:var(--tx3);text-align:center;padding:1.5rem;font-size:.92rem}
.imgslot .ph b{display:block;font-size:1.8rem;margin-bottom:.3rem}
body.imgedit .imgslot.empty .ph{display:grid}
body.imgedit .imgslot{outline:2px dashed color-mix(in srgb,var(--jade) 55%,transparent);outline-offset:6px}
.imgbar{display:none;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.8rem;padding:.8rem;
  border-radius:var(--r);background:var(--panel2);border:1px solid var(--line)}
body.imgedit .imgbar{display:flex}
.imgbar .tag{font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--jade);
  background:color-mix(in srgb,var(--jade) 15%,transparent);border-radius:999px;padding:.22rem .65rem;flex:none}
.imgbar input[type=text]{flex:1 1 220px;min-width:0;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line2);
  background:var(--ink3);color:var(--tx);font-family:inherit;font-size:.86rem}
.imgbar input[type=text]:focus{outline:none;border-color:var(--jade)}
.imgbar .mini{padding:.58rem .9rem;font-size:.83rem;border-radius:10px;border:1px solid var(--line2);
  background:var(--ink3);color:var(--tx2);cursor:pointer;font-family:inherit;font-weight:600;white-space:nowrap}
.imgbar .mini:hover{border-color:var(--jade);color:var(--jade)}
.imgbar .mini.del:hover{border-color:var(--rose);color:var(--rose)}
.imgbar input[type=file]{display:none}
#imgFab{position:fixed;right:1.1rem;bottom:calc(5.2rem + var(--safeb));z-index:120;width:48px;height:48px;border-radius:50%;
  border:0;cursor:pointer;background:var(--gVio);color:#fff;font-size:1.15rem;
  box-shadow:0 16px 34px -14px rgba(167,139,250,.9);transition:transform .3s var(--ease)}
#imgFab:hover{transform:translateY(-4px) scale(1.06)}
#imgFab.on{background:var(--gWarn)}
#imgPanel{position:fixed;right:1.1rem;bottom:calc(10rem + var(--safeb));z-index:121;width:min(92vw,420px);
  background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);padding:1.2rem;display:none}
#imgPanel.on{display:block}
#imgPanel h4{font-size:1rem;margin-bottom:.4rem}
#imgPanel p{font-size:.82rem;color:var(--tx3);line-height:1.75;margin-bottom:.8rem}
#imgPanel textarea{width:100%;height:120px;font-family:ui-monospace,Menlo,monospace;font-size:.73rem;
  border-radius:10px;border:1px solid var(--line2);background:var(--ink3);color:var(--tx);padding:.6rem;resize:vertical}
#imgPanel .prow{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
#imgQuota{font-size:.75rem;color:var(--tx3);margin-top:.5rem}

/* ── SVG art ── */
.art-ecg .beat{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.4s var(--ease) forwards .3s}
@keyframes draw{to{stroke-dashoffset:0}}
.art-ecg .glow{filter:blur(7px);opacity:.55}
.floaty{animation:float 7s ease-in-out infinite}
.floaty.d1{animation-delay:-2.4s}
.floaty.d2{animation-delay:-4.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---- แถบเลื่อนคู่กับช่องกรอก ---- */
.sld{margin-top:1.5rem;position:relative}
.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%,color-mix(in srgb,#fff 34%,transparent) 50%,transparent 100%) 0 0/220% 100% no-repeat,
    linear-gradient(90deg,var(--jade) 0%,color-mix(in srgb,var(--jade) 72%,#7ef2c8) var(--p,50%),
                    var(--line2) var(--p,50%),var(--line2) 100%);
  transition:background .06s linear,box-shadow .2s ease}
.sld.is-drag input[type=range]{
  animation:sldSheen 1.5s linear infinite;
  box-shadow:0 0 16px color-mix(in srgb,var(--jade) 34%,transparent)}
@keyframes sldSheen{from{background-position:-120% 0,0 0}to{background-position:220% 0,0 0}}
.sld input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--ink2);
  border:3px solid var(--jade);box-shadow:0 0 0 4px color-mix(in srgb,var(--jade) 18%,transparent);
  cursor:grab;margin-top:-8px;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s ease}
.sld input[type=range]::-webkit-slider-thumb:active{
  cursor:grabbing;transform:scale(1.24);
  box-shadow:0 0 0 9px color-mix(in srgb,var(--jade) 24%,transparent)}
.sld input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--ink2);border:3px solid var(--jade);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--jade) 18%,transparent);cursor:grab;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s ease}
.sld input[type=range]:active::-moz-range-thumb{
  transform:scale(1.24);box-shadow:0 0 0 9px color-mix(in srgb,var(--jade) 24%,transparent)}
.sld input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:transparent}
.sld input[type=range]:focus-visible{outline:2px solid var(--jade);outline-offset:4px}
.sld-b{
  position:absolute;top:-1.55rem;transform:translateX(-50%);pointer-events:none;
  padding:.16rem .5rem;border-radius:.5rem;font-size:.76rem;font-weight:800;
  background:var(--jade);color:#04211a;white-space:nowrap;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .18s ease,transform .18s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 6px 16px color-mix(in srgb,var(--jade) 32%,transparent)}
.sld-b::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--jade)}
.sld.is-drag .sld-b{opacity:1;transform:translateX(-50%) translateY(-2px)}
.sld-t{display:flex;justify-content:space-between;font-size:.73rem;color:var(--tx3);margin-top:.4rem;
  font-variant-numeric:tabular-nums}
.sld-t .mid{opacity:.62}
@media(prefers-reduced-motion:reduce){
  .sld.is-drag input[type=range]{animation:none}
  .sld-b,.sld input[type=range]::-webkit-slider-thumb{transition:none}}
/* ================= แถบลิงก์ข้ามหน้า (ใช้โทนสีของหน้านี้) ================= */
.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(--tx3);white-space:nowrap;text-decoration:none;
  transition:color .25s,background .25s,transform .25s var(--ease)}
.tools a:hover{color:var(--jade);background:color-mix(in srgb,var(--jade) 13%,transparent);transform:translateY(-1px)}
.tools a.cur{background:var(--gJade);color:#04211a;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--jade) 80%,transparent)}
.tools a.cur:hover{color:#04211a;transform:none}
.tools a.home{border:1.5px solid var(--line2)}
.tools a.home:hover{border-color:var(--jade)}
@media (max-width:640px){
  .tools-in{padding:.36rem 0}
  .tools a{font-size:.79rem;padding:.36rem .7rem}
}
/* เมนูมือถือต้องเปิดลงมาใต้ทั้งแถบหัว (รวมแถบลิงก์ข้ามหน้า) */
.nav-in{position:static}
@media (max-width:640px){html{scroll-padding-top:124px}}

/* ---- ปุ่มขอรับข้อเสนอ ท้ายแถบลิงก์ข้ามหน้า ----
   ใช้โทนอำพันให้ต่างจากปุ่มไล่สีที่ใช้บอก "หน้าปัจจุบัน" จะได้ไม่สับสนว่าเป็นหน้าไหน
   สีคงที่ทั้งสองโหมด เพราะเป็นปุ่มกระทำหลัก ไม่ใช่ลิงก์นำทาง */
.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}

/* [แก้บั๊ก] เดิมตั้งชื่อคลาสปุ่มนี้ว่า .quote ซึ่งชนกับ .quote ของกล่องคำพูด
   ทำให้เครื่องหมาย ❝ ขนาด 5.5rem ทะลุมาทับตัวหนังสือบนปุ่ม จึงเปลี่ยนเป็น .askq */
.tools a::before,.tools a::after{content:none}

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