/* PrakanBuddy V4 — "เพื่อนคนรู้ใจ" mobile-first (375px) design system
   Layout: one phone-width column; frosted white cards layered over soft pink shapes on cream.
   Light-only on purpose: brand world is cream / white / red #D80025 (see docs/website g1–g8). */
:root{
  color-scheme: light;
  /* colour */
  --cream:#FBF6F1;
  --white:#ffffff;
  --ink:#1c1716;
  --body:#3d3734;
  --muted:#6e6661;
  --line:rgba(70,30,25,.11);
  --red:#D80025;
  --red-press:#b3001f;
  --red-soft:#fde8ea;
  --pink-1:#f7d2d6;
  --pink-2:#fbe4e2;
  --ok-bg:#e2f3e6; --ok:#16602e;
  --warn-bg:#fff0d2; --warn:#7a4c00;
  --na-bg:#efeae6; --na:#58514c;
  --info-bg:#eef0fb; --info:#2f3a7a;
  --glass:rgba(255,255,255,.70);
  --glass-strong:rgba(255,255,255,.90);
  --glass-edge:rgba(255,255,255,.75);
  --shadow-1:0 1px 2px rgba(90,25,35,.06),0 8px 22px rgba(120,35,50,.08);
  --shadow-2:0 2px 6px rgba(90,25,35,.07),0 22px 50px rgba(120,35,50,.14);
  /* type */
  --font:"IBM Plex Sans Thai","Noto Sans Lao","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
  --fs-xs:13px; --fs-sm:14.5px; --fs-md:17px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:32px;
  /* shape */
  --r-lg:24px; --r-md:18px; --r-sm:12px; --r-pill:999px;
  --top-h:60px; --tab-h:68px;
  --wrap:560px;
}
:lang(lo){ --font:"Noto Sans Lao","IBM Plex Sans Thai",-apple-system,"Segoe UI",sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--cream); color:var(--body);
  font-family:var(--font); font-size:var(--fs-md); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 24px);
  min-height:100vh;
}
body::before{ /* paints the notch band above the sticky header */
  content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:41; background:var(--glass-strong);
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid rgba(216,0,37,.45); outline-offset:2px; border-radius:10px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none!important; }
.num{ font-variant-numeric:tabular-nums; }

/* soft layered shapes behind everything */
.bg-shapes{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg-shapes i{ position:absolute; border-radius:50%; }
.bg-shapes i:nth-child(1){ width:130vw; height:80vw; max-width:900px; max-height:560px; left:-35vw; top:-20vw; background:radial-gradient(closest-side,var(--pink-1),rgba(247,210,214,0)); }
.bg-shapes i:nth-child(2){ width:100vw; height:100vw; max-width:640px; max-height:640px; right:-45vw; top:40vh; background:radial-gradient(closest-side,var(--pink-2),rgba(251,228,226,0)); }
.bg-shapes i:nth-child(3){ width:90vw; height:70vw; max-width:560px; max-height:420px; left:-40vw; bottom:-12vh; background:radial-gradient(closest-side,#f9dcdc,rgba(249,220,220,0)); }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:var(--top-h);
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
  background:var(--glass-strong);
  -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{ text-decoration:none; font-weight:700; font-size:22px; letter-spacing:-.2px; color:var(--ink); white-space:nowrap; font-family:"IBM Plex Sans Thai",-apple-system,sans-serif; }
.brand b{ color:var(--red); font-weight:700; }
.top-actions{ display:flex; align-items:center; gap:8px; }
.lang{ display:flex; border:1.5px solid var(--ink); border-radius:var(--r-pill); padding:2px; background:var(--white); }
.lang button{ border:0; background:none; font-size:13px; font-weight:600; letter-spacing:0; min-width:34px; height:30px; padding:0 8px; border-radius:var(--r-pill); cursor:pointer; color:var(--ink); font-family:"IBM Plex Sans Thai","Noto Sans Lao",-apple-system,"Segoe UI",sans-serif; }
.lang button[lang="lo"]{ font-family:"Noto Sans Lao","IBM Plex Sans Thai",sans-serif; }
.lang button[aria-pressed="true"]{ background:var(--ink); color:var(--white); }
.me-btn{ display:block; width:40px; height:40px; border-radius:50%; padding:2px; background:var(--red); flex:none; }
.me-btn img{ display:block; width:36px; height:36px; border-radius:50%; border:2px solid var(--white); object-fit:cover; }

/* ---------- bottom tabs ---------- */
.tabbar{
  position:fixed; z-index:40; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:6px max(10px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
  background:var(--glass-strong);
  -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px);
  border-top:1px solid var(--line);
}
.tabbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; text-decoration:none; color:var(--muted); font-size:13px; font-weight:500; border-radius:14px; text-align:center; line-height:1.25; }
.tabbar svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
body[data-tab="chat"] .tabbar a[data-tab="chat"],
body[data-tab="check"] .tabbar a[data-tab="check"],
body[data-tab="rooms"] .tabbar a[data-tab="rooms"],
body[data-tab="read"] .tabbar a[data-tab="read"],
body[data-tab="guide"] .tabbar a[data-tab="read"],
body[data-tab="answers"] .tabbar a[data-tab="read"]{ color:var(--red); font-weight:700; }

/* ---------- layout + type ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:20px 8px; display:flex; flex-direction:column; gap:16px; }
h1,h2,h3{ color:var(--ink); text-wrap:balance; margin:0; letter-spacing:-.2px; }
h1{ font-size:var(--fs-2xl); line-height:1.25; font-weight:700; }
h2{ font-size:var(--fs-xl); line-height:1.3; font-weight:700; }
h3{ font-size:var(--fs-lg); line-height:1.35; font-weight:700; }
p{ margin:0; }
.lead{ font-size:var(--fs-md); color:var(--muted); margin-top:4px; }
.eyebrow{ font-size:var(--fs-sm); color:var(--muted); letter-spacing:.2px; }
.src{ font-size:var(--fs-xs); color:var(--muted); line-height:1.5; }
.src a{ color:var(--muted); text-underline-offset:2px; }
.sample-tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.4px; color:var(--info); background:var(--info-bg); border-radius:6px; padding:1px 7px; vertical-align:2px; }
.page-head{ display:flex; flex-direction:column; gap:4px; }

/* ---------- surfaces ---------- */
.card{
  position:relative; background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:18px;
  -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px);
}
.card.solid{ background:var(--glass-strong); -webkit-backdrop-filter:none; backdrop-filter:none; }
.card.lift{ box-shadow:var(--shadow-2); }
.stack-gap{ display:flex; flex-direction:column; gap:14px; }
.layered{ position:relative; margin-top:18px; isolation:isolate; }
.layered::before,.layered::after{ content:""; position:absolute; height:40px; border-radius:var(--r-lg); background:rgba(255,255,255,.6); border:1px solid var(--glass-edge); box-shadow:var(--shadow-1); z-index:-1; }
.layered::before{ top:-16px; left:30px; right:30px; opacity:.75; }
.layered::after{ top:-8px; left:14px; right:14px; }
.divider{ height:1px; background:var(--line); border:0; margin:4px 0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:10px 20px; border-radius:var(--r-pill);
  font-size:var(--fs-md); font-weight:600; text-decoration:none; cursor:pointer; text-align:center; line-height:1.3;
  background:var(--white); color:var(--ink); border:1.5px solid rgba(28,23,22,.16);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .15s ease, background-color .15s ease;
}
.btn:active{ transform:scale(.98); }
.btn-red{ background:var(--red); color:var(--white); border-color:var(--red); box-shadow:0 6px 18px rgba(216,0,37,.28); font-weight:700; }
.btn-red:hover{ background:var(--red-press); }
.btn-block{ display:flex; width:100%; }
.btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.btn-sm{ min-height:44px; padding:8px 14px; font-size:var(--fs-sm); }
.linkbtn{ background:none; border:0; padding:6px 0; min-height:44px; color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:var(--fs-sm); text-align:left; }
.linkbtn.quiet{ color:var(--ink); }
.sticky-cta{ position:sticky; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 10px); z-index:20; }

/* ---------- chips, segmented, stepper ---------- */
.chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 16px 8px; margin:0 -16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:6px 16px; border-radius:var(--r-pill);
  background:var(--glass-strong); border:1px solid var(--line); box-shadow:var(--shadow-1);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap;
}
.chip[aria-pressed="true"]{ background:var(--red); color:var(--white); border-color:var(--red); }
.chip .count{ font-weight:500; opacity:.7; }
select.chip{ appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231c1716' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
select.chip.on{ background-color:var(--ink); color:var(--white); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

.seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:rgba(28,23,22,.06); border-radius:var(--r-pill); padding:4px; gap:4px; }
.seg button{ border:0; min-height:44px; border-radius:var(--r-pill); background:none; font-weight:600; font-size:var(--fs-md); cursor:pointer; color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--red); color:var(--white); box-shadow:0 4px 12px rgba(216,0,37,.25); }
.seg.red button[aria-pressed="true"]{ background:var(--red); color:var(--white); box-shadow:0 4px 12px rgba(216,0,37,.25); }

.field{ display:flex; flex-direction:column; gap:8px; }
.field > label,.field > .label{ font-weight:600; color:var(--ink); font-size:var(--fs-md); }
.stepper{ display:grid; grid-template-columns:56px 1fr 56px; align-items:center; background:rgba(28,23,22,.06); border-radius:var(--r-pill); padding:4px; }
.stepper button{ height:48px; border:0; border-radius:50%; background:var(--white); box-shadow:var(--shadow-1); font-size:26px; line-height:1; cursor:pointer; color:var(--ink); }
.stepper .st-mid{ display:flex; align-items:baseline; justify-content:center; gap:6px; }
.stepper input{ border:0; background:none; text-align:right; font-size:28px; font-weight:700; width:3.2ch; color:var(--ink); -moz-appearance:textfield; padding:0; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper .unit{ font-size:var(--fs-md); color:var(--muted); font-weight:500; }
.hint{ font-size:var(--fs-sm); color:var(--muted); }
.hint.warn{ color:var(--warn); font-weight:600; }

.search{ display:flex; align-items:center; gap:10px; min-height:52px; padding:0 16px; border-radius:var(--r-pill); background:var(--glass-strong); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.search svg{ width:22px; height:22px; stroke:var(--muted); fill:none; stroke-width:2; flex:none; }
.search input{ flex:1; min-width:0; border:0; background:none; font-size:var(--fs-md); min-height:48px; outline:none; }

/* ---------- status pills + badges ---------- */
.pill{ display:inline-flex; align-items:center; justify-content:center; gap:4px; border-radius:var(--r-pill); padding:5px 10px; font-size:var(--fs-sm); font-weight:700; line-height:1.3; text-align:center; }
.pill.ok{ background:var(--ok-bg); color:var(--ok); }
.pill.warn{ background:var(--warn-bg); color:var(--warn); }
.pill.na{ background:var(--na-bg); color:var(--na); font-weight:600; }
.badge{ display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-pill); padding:3px 10px 3px 8px; font-size:13px; font-weight:600; line-height:1.4; }
.badge svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; flex:none; }
.badge.cashless{ background:var(--ok-bg); color:var(--ok); }
.badge.smart{ background:var(--info-bg); color:var(--info); }
.badge.plain{ background:var(--na-bg); color:var(--na); }

/* ---------- progress ---------- */
.progress{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.progress .dots{ display:flex; align-items:center; }
.progress .dots i{ width:12px; height:12px; border-radius:50%; background:#d6cfca; }
.progress .dots i.on{ background:var(--red); box-shadow:0 0 0 4px var(--red-soft); }
.progress .dots b{ width:44px; height:2px; background:#ddd6d1; }
.progress span{ font-size:var(--fs-sm); color:var(--muted); }

/* ---------- banner ---------- */
.banner{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md); background:var(--warn-bg); color:var(--warn); font-size:var(--fs-sm); line-height:1.5; }
.banner b{ color:var(--ink); }
.banner.test{ background:var(--info-bg); color:var(--info); }

/* ---------- check: plan tiles ---------- */
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile{ border-radius:var(--r-md); background:var(--glass-strong); border:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:1px; }
.tile .t-plan{ font-size:var(--fs-sm); color:var(--ink); font-weight:700; }
.tile .t-room{ font-size:12.5px; color:var(--muted); }
.tile .t-price{ font-size:22px; font-weight:700; color:var(--ink); margin-top:4px; }
.tile .t-unit{ font-size:12.5px; color:var(--muted); }

/* ---------- check: hospital picker ---------- */
.hlist{ display:flex; flex-direction:column; gap:10px; }
.hitem{ display:grid; grid-template-columns:44px 1fr 32px; gap:12px; align-items:center; padding:14px; border-radius:var(--r-md); background:var(--glass-strong); border:1.5px solid transparent; box-shadow:var(--shadow-1); cursor:pointer; }
.hitem.on{ border-color:var(--red); }
.hitem .h-ico{ width:44px; height:44px; border-radius:12px; background:var(--pink-2); display:grid; place-items:center; }
.hitem .h-ico svg{ width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:1.6; }
.hitem .h-name{ font-weight:600; color:var(--ink); line-height:1.35; }
.hitem .h-meta{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.hitem .h-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.hitem input{ width:28px; height:28px; accent-color:var(--red); margin:0; cursor:pointer; }
.more-wrap{ display:flex; justify-content:center; }

/* ---------- check: compare table (Apple-style) ---------- */
.cmp{ display:flex; flex-direction:column; gap:14px; }
.cmp-head{ position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--top-h)); z-index:15; display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:10px; padding-block:8px; }
.cmp-head::before{ content:""; position:absolute; top:0; bottom:-8px; left:-16px; right:-16px; background:linear-gradient(var(--cream) 78%, rgba(251,246,241,0)); z-index:-1; }
.plan-col{ position:relative; border-radius:var(--r-md); background:var(--glass-strong); border:1px solid var(--glass-edge); box-shadow:var(--shadow-2); padding:8px 8px 10px; text-align:center; min-width:0; }
.plan-col select{ appearance:none; -webkit-appearance:none; border:0; background-color:transparent; font-weight:700; font-size:var(--fs-md); color:var(--ink); text-align:center; text-align-last:center; width:100%; min-height:40px; cursor:pointer; padding:0 18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D80025' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; border-radius:10px; }
.plan-col .p-price{ display:block; font-size:28px; font-weight:700; color:var(--red); line-height:1.15; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.plan-col .p-unit{ display:block; font-size:var(--fs-xs); color:var(--muted); }
.plan-col .p-month{ display:block; font-size:12px; color:var(--muted); }
.cmp-group{ border-radius:var(--r-lg); background:var(--glass-strong); border:1px solid var(--glass-edge); box-shadow:var(--shadow-1); overflow:hidden; }
.cmp-group > h3{ display:flex; align-items:center; gap:10px; font-size:var(--fs-md); padding:10px 14px; min-height:52px; background:rgba(28,23,22,.045); flex-wrap:wrap; }
.cmp-group > h3 svg{ width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.cmp-group > h3 .h3-tools{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; }
.mini-step{ display:inline-flex; align-items:center; gap:4px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.mini-step button{ width:38px; height:38px; border-radius:50%; border:0; background:rgba(28,23,22,.07); font-size:20px; cursor:pointer; line-height:1; }
.mini-step output{ min-width:26px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.cmp-row{ padding:12px 14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.cmp-group > h3 + .cmp-row{ border-top:0; }
.cmp-label{ font-size:var(--fs-sm); color:var(--ink); font-weight:600; line-height:1.4; }
.cmp-label small{ display:block; font-weight:400; color:var(--muted); font-size:var(--fs-xs); }
.cmp-vals{ display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:10px; align-items:center; }
.cmp-vals > div{ text-align:center; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; min-width:0; line-height:1.35; }
.cmp-vals > div small{ display:block; font-weight:500; color:var(--muted); font-size:12px; }
.cmp-vals .pill{ width:100%; }
.cmp-span{ text-align:center; font-weight:600; color:var(--ink); font-size:var(--fs-sm); }
.room-pick select{ width:100%; min-height:44px; border-radius:12px; border:1px solid var(--line); background-color:var(--white); padding:6px 30px 6px 10px; font-size:var(--fs-sm); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231c1716' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.example{ display:flex; flex-direction:column; gap:10px; }
.example .ex-bar{ display:flex; height:18px; border-radius:var(--r-pill); overflow:hidden; background:var(--na-bg); }
.example .ex-bar i{ display:block; height:100%; }
.example .ex-bar i.paid{ background:#3f9d5d; }
.example .ex-bar i.room{ background:#e2a43b; }
.example .ex-bar i.other{ background:#9c8f88; }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:var(--fs-xs); color:var(--body); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.kv{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; font-size:var(--fs-sm); }
.kv dt{ color:var(--body); }
.kv dd{ margin:0; text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.kv .tot{ border-top:1px solid var(--line); padding-top:6px; }

/* ---------- rooms ---------- */
.stats{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:var(--fs-sm); color:var(--muted); }
.stats b{ color:var(--ink); }
.hcard{ display:flex; flex-direction:column; gap:10px; }
.hcard .hc-top{ display:flex; flex-direction:column; gap:6px; }
.hcard h2{ font-size:var(--fs-lg); line-height:1.35; }
.hcard .hc-meta{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--muted); }
.hcard .hc-meta svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex:none; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.rooms{ display:flex; flex-direction:column; }
.room{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:10px 0; border-top:1px solid var(--line); align-items:start; }
.room .r-name{ font-weight:600; color:var(--ink); font-size:var(--fs-sm); line-height:1.4; min-width:0; overflow-wrap:anywhere; }
.room .r-price{ text-align:right; font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.room .r-price small{ display:block; font-weight:500; color:var(--muted); font-size:12px; }
.room .r-break{ grid-column:1 / -1; font-size:var(--fs-xs); color:var(--muted); }
.room .r-pill{ grid-column:1 / -1; justify-self:start; }
details.more > summary{ list-style:none; cursor:pointer; color:var(--red); font-weight:600; font-size:var(--fs-sm); min-height:44px; display:flex; align-items:center; text-decoration:underline; text-underline-offset:3px; }
details.more > summary::-webkit-details-marker{ display:none; }
.hcard.compact{ padding:14px 16px; gap:6px; }
.hcard.compact h2{ font-size:var(--fs-md); }
.group-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:8px; }
.group-title h2{ font-size:var(--fs-lg); }
.empty{ text-align:center; color:var(--muted); padding:20px; }

/* ---------- chat ---------- */
.hero-me{ display:flex; justify-content:center; padding-top:6px; }
.hero-me .ring{ width:132px; height:132px; border-radius:50%; padding:5px; background:var(--red); box-shadow:var(--shadow-2); }
.hero-me img{ width:122px; height:122px; border-radius:50%; border:4px solid var(--white); display:block; object-fit:cover; }
.thread{ display:flex; flex-direction:column; gap:12px; }
.msg{ max-width:88%; padding:12px 16px; border-radius:22px; line-height:1.55; box-shadow:var(--shadow-1); }
.msg.him{ align-self:flex-start; background:var(--glass-strong); border:1px solid var(--glass-edge); border-bottom-left-radius:8px; color:var(--ink); }
.msg.him.big{ max-width:100%; align-self:stretch; text-align:center; border-radius:var(--r-lg); padding:20px 18px; }
.msg.him.big h1{ font-size:30px; }
.msg.him.big p{ color:var(--body); margin-top:6px; }
.msg.me{ align-self:flex-end; background:var(--red); color:var(--white); border-bottom-right-radius:8px; font-weight:600; }
.msg ul,.msg ol{ margin:6px 0 0; padding-left:20px; }
.msg li + li{ margin-top:4px; }
.msg .m-actions{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.replies{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.reply{ min-height:48px; padding:10px 20px; border-radius:22px 22px 8px 22px; border:1px solid var(--glass-edge); background:var(--glass-strong); box-shadow:var(--shadow-1); color:var(--red); font-weight:700; font-size:var(--fs-md); cursor:pointer; text-align:right; max-width:92%; }
.reply.quiet{ color:var(--ink); font-weight:600; }
.typing{ align-self:flex-start; display:inline-flex; gap:5px; padding:14px 16px; border-radius:22px; border-bottom-left-radius:8px; background:var(--glass-strong); box-shadow:var(--shadow-1); }
.typing i{ width:8px; height:8px; border-radius:50%; background:#b7aca6; animation:blink 1s infinite; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{ transform:translateY(0); } 40%{ transform:translateY(-4px); } }
.understand{ display:flex; flex-direction:column; gap:10px; }
.understand .u-head{ display:flex; align-items:center; gap:12px; }
.understand .u-head img{ width:48px; height:48px; border-radius:50%; border:2px solid var(--red); }
.u-row{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 8px 10px 12px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--line); }
.u-row svg{ width:26px; height:26px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; justify-self:center; }
.u-row .u-k{ font-size:var(--fs-xs); color:var(--muted); }
.u-row .u-v{ font-weight:600; color:var(--ink); line-height:1.4; }
.u-row .linkbtn{ padding:6px 8px; }
.composer{ display:flex; gap:8px; align-items:flex-end; }
.composer textarea{ flex:1; min-width:0; min-height:52px; max-height:160px; resize:vertical; border-radius:18px; border:1px solid var(--line); background:var(--white); padding:12px 14px; font-size:var(--fs-md); }
.auto-note{ font-size:var(--fs-xs); color:var(--muted); text-align:center; }
.about{ display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; }
.about img{ width:72px; height:72px; border-radius:50%; border:3px solid var(--white); box-shadow:var(--shadow-1); }
.faq-links{ display:flex; flex-direction:column; gap:8px; }
.faq-links a{ display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:52px; padding:10px 16px; border-radius:var(--r-md); background:var(--glass-strong); border:1px solid var(--line); text-decoration:none; color:var(--ink); font-weight:600; line-height:1.4; }
.faq-links a::after{ content:"›"; font-size:24px; color:var(--muted); line-height:1; }
.checklist{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.checklist li{ display:flex; gap:8px; align-items:flex-start; }
.checklist li::before{ content:""; flex:none; width:18px; height:18px; margin-top:4px; border-radius:5px; border:2px solid var(--red); }

/* ---------- guide ---------- */
.timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.timeline li{ position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding-bottom:20px; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{ content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--red); opacity:.85; }
.timeline li:last-child::before{ display:none; }
.timeline .n{ width:44px; height:44px; border-radius:50%; background:var(--red); color:var(--white); font-weight:700; font-size:20px; display:grid; place-items:center; box-shadow:0 0 0 4px var(--red-soft); }
.timeline h3{ font-size:var(--fs-lg); }
.timeline p{ color:var(--body); margin-top:2px; }
.timeline .t-note{ font-size:var(--fs-sm); color:var(--muted); margin-top:4px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ---------- answer pages ---------- */
.crumbs{ font-size:var(--fs-sm); color:var(--muted); }
.crumbs a{ color:var(--muted); }
.byline{ display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; font-size:var(--fs-sm); color:var(--muted); line-height:1.5; }
.byline img{ width:48px; height:48px; border-radius:50%; border:2px solid var(--red); }
.byline b{ color:var(--ink); font-weight:600; }
.short{ border-left:5px solid var(--red); }
.short h2{ color:var(--red); font-size:var(--fs-lg); margin-bottom:6px; }
.prose{ display:flex; flex-direction:column; gap:12px; }
.prose h2{ font-size:var(--fs-lg); margin-top:6px; }
.prose ul,.prose ol{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; }
.prose table{ border-collapse:collapse; width:100%; font-size:var(--fs-sm); }
.prose th,.prose td{ border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top; }
.prose td.n,.prose th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table-scroll{ overflow-x:auto; }
.faq details{ border-radius:var(--r-md); background:var(--glass-strong); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.faq details + details{ margin-top:10px; }
.faq summary{ list-style:none; cursor:pointer; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; font-weight:600; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; width:10px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); flex:none; margin-top:-4px; transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
.faq .a{ padding:0 16px 14px; display:flex; flex-direction:column; gap:8px; }
.lang-note{ font-size:var(--fs-sm); }

/* ---------- sheet ---------- */
.sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(28,18,16,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sheet-panel{
  position:relative; width:100%; max-width:var(--wrap); max-height:92vh; overflow:auto;
  background:var(--glass-strong); -webkit-backdrop-filter:saturate(1.6) blur(22px); backdrop-filter:saturate(1.6) blur(22px);
  border-radius:28px 28px 0 0; box-shadow:0 -10px 40px rgba(60,20,25,.18);
  padding:10px max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  display:flex; flex-direction:column; gap:12px; align-items:stretch; text-align:center;
  animation:sheetUp .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetUp{ from{ transform:translateY(40px); } to{ transform:none; } }
.grabber{ width:44px; height:5px; border-radius:3px; background:#cfc6c1; margin:2px auto 4px; }
.sheet-close{ position:absolute; right:12px; top:10px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(28,23,22,.06); font-size:22px; cursor:pointer; line-height:1; }
.sheet .avatar-lg{ width:88px; height:88px; border-radius:50%; border:4px solid var(--white); outline:3px solid var(--red); margin:4px auto 0; display:block; }
.sheet h2{ font-size:var(--fs-xl); }
.sheet .s-sub{ color:var(--muted); font-size:var(--fs-sm); margin-top:-6px; }
.msg-preview{ text-align:left; display:flex; flex-direction:column; gap:6px; }
.msg-preview label{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.msg-preview textarea{ width:100%; min-height:130px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--white); padding:10px 12px; font-size:var(--fs-sm); line-height:1.5; resize:vertical; }
.msg-preview .mp-state{ font-size:var(--fs-xs); color:var(--muted); }
html[lang="lo"] .sheet .row2 .wa{ order:-1; }
.sheet-small{ font-size:var(--fs-xs); color:var(--muted); }

/* ---------- toast ---------- */
.toast{ position:fixed; left:50%; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 18px); transform:translateX(-50%); z-index:70; background:var(--ink); color:var(--white); padding:10px 18px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600; box-shadow:var(--shadow-2); max-width:calc(100% - 32px); text-align:center; }

/* ---------- gentle rise (transform only; content is always visible) ---------- */
.rise{ transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.rise.pre{ transform:translateY(18px); }
@media (prefers-reduced-motion: reduce){
  .rise,.rise.pre{ transform:none!important; transition:none!important; }
  .sheet-panel{ animation:none; }
  .typing i{ animation:none; }
  .btn{ transition:none; }
}

/* ---------- wider screens ---------- */
@media (min-width:720px){
  :root{ --wrap:760px; --fs-2xl:38px; }
  .tabbar{ left:50%; right:auto; transform:translateX(-50%); width:min(560px,calc(100% - 32px)); bottom:14px; border-radius:24px; border:1px solid var(--line); box-shadow:var(--shadow-2); padding-bottom:6px; }
  body{ padding-bottom:110px; }
  .sticky-cta{ bottom:100px; }
  .toast{ bottom:110px; }
  .tiles{ grid-template-columns:repeat(4,1fr); }
  .sheet{ align-items:center; }
  .sheet-panel{ border-radius:28px; max-width:440px; }
}

/* readable line breaks for Thai paragraphs */
.lead,.prose p,.msg p,.hint{ text-wrap:pretty; }
a.chip{ text-decoration:none; }

/* answer pages: example hospitals as cards (a 6-column table is too wide at 375px) */
.ex-zone{ font-size:var(--fs-md); color:var(--muted); font-weight:700; letter-spacing:.3px; margin-top:4px; }
.ex-cards{ display:grid; gap:12px; }
.ex-card{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:var(--r-md); background:var(--glass-strong); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.ex-card h4{ margin:0; font-size:var(--fs-md); color:var(--ink); line-height:1.35; }
.ex-card h4 a{ text-underline-offset:3px; }
.ex-room{ font-size:var(--fs-sm); color:var(--muted); }
.ex-price{ font-size:var(--fs-sm); color:var(--body); }
.ex-price b{ font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ex-break{ font-size:var(--fs-xs); color:var(--muted); line-height:1.5; }
.ex-plans{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 2px; }
.ex-plans div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ex-plans dt{ font-size:12.5px; color:var(--muted); }
.ex-plans dd{ margin:0; width:100%; font-variant-numeric:tabular-nums; }
@media (min-width:520px){ .ex-plans{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:720px){ .ex-cards{ grid-template-columns:1fr 1fr; } }

/* premium check: add-ons + totals */
.tile .t-split{ font-size:12px; color:var(--muted); margin-top:2px; }
select.addon{ min-height:40px; max-width:150px; border-radius:var(--r-pill); border:1px solid var(--line); background-color:var(--white); padding:4px 30px 4px 12px; font-size:var(--fs-sm); font-weight:600; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D80025' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; color:var(--ink); }
.addon-what{ font-size:var(--fs-sm); color:var(--body); }
.sum-total{ font-size:20px; color:var(--ink); }

/* premium options (collapsed by default) + pending-price badge */
.badge.pending{ background:var(--warn-bg); color:var(--warn); }
details.premium{ border-radius:var(--r-lg); background:var(--glass-strong); border:1px solid var(--glass-edge); box-shadow:var(--shadow-1); }
details.premium > summary{ list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:14px 48px 14px 16px; min-height:56px; position:relative; font-weight:700; color:var(--ink); }
details.premium > summary::-webkit-details-marker{ display:none; }
details.premium > summary small{ font-weight:500; color:var(--muted); font-size:var(--fs-sm); }
details.premium > summary::after{ content:""; position:absolute; right:20px; top:24px; width:10px; height:10px; border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(45deg); transition:transform .2s ease; }
details.premium[open] > summary::after{ transform:rotate(-135deg); top:28px; }
.premium-body{ display:flex; flex-direction:column; gap:14px; padding:0 10px 14px; }
.ic-picks{ flex-direction:row; flex-wrap:wrap; gap:8px; }
.ic-picks select.addon{ max-width:none; }
.cmp-span small{ display:block; font-weight:500; color:var(--muted); font-size:12px; }
/* two-line contact buttons: channel + who replies */
.btn.two{ flex-direction:column; gap:0; line-height:1.25; padding-block:8px; }
.btn.two small{ font-size:12px; font-weight:500; color:var(--muted); }

/* site footer: disclosure + licence (required on web pages) */
.site-foot{ margin-top:24px; border-top:1px solid var(--line); background:rgba(255,255,255,.55); }
.site-foot .wrap{ gap:8px; padding-block:18px 12px; font-size:var(--fs-xs); color:var(--muted); line-height:1.55; }
.site-foot a{ color:var(--muted); }

/* value view: which plan really fits */
.tile .t-fit{ font-size:12px; font-weight:600; border-radius:8px; padding:2px 6px; margin-top:4px; align-self:flex-start; line-height:1.4; }
.tile .t-fit.ok{ background:var(--ok-bg); color:var(--ok); }
.tile .t-fit.warn{ background:var(--warn-bg); color:var(--warn); }
.tile.is-rec{ border:2px solid var(--red); }
.rec-badge{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.3px; color:var(--white); background:var(--ink); border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:2px; }
.plan-col.is-rec{ border:2px solid var(--ink); }
.rec-badge.top{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); margin:0; white-space:nowrap; }
.rec-row p{ font-size:var(--fs-sm); color:var(--ink); }
.rec-row p .rec-badge{ margin-left:0; margin-right:4px; }
.budget-card{ display:flex; flex-direction:column; gap:10px; }

/* ---------- เช็คเบี้ย 5 ขั้น (round 2) — same cards and colours, one thing per step ---------- */
.progress .bars{ display:flex; gap:6px; width:min(240px,70%); }
.progress .bars i{ flex:1; height:5px; border-radius:3px; background:#e2dad5; transition:background .25s ease-out; }
.progress .bars i.on{ background:var(--red); }
.noname{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.noname img{ width:28px; height:28px; border-radius:50%; border:2px solid var(--white); outline:1.5px solid var(--red); object-fit:cover; flex:none; }
.stepper .age-btn{ display:flex; align-items:baseline; justify-content:center; gap:6px; border:2px solid var(--red); background:var(--white); border-radius:var(--r-md); height:auto; min-height:52px; margin:0 8px; cursor:pointer; color:var(--ink); font:inherit; font-size:inherit; padding:2px 10px; box-shadow:none; }
.age-btn .age-val{ font-size:30px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.age-btn .pen{ width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.8; stroke-linejoin:round; align-self:center; }
.stepper button:active,.btn:active,.age-btn:active{ transform:scale(.97); }
.confirm-bar{ position:sticky; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 10px); z-index:20; display:flex; flex-direction:column; gap:6px; padding:10px 12px 12px; border-radius:var(--r-lg); background:var(--glass-strong); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--glass-edge); box-shadow:var(--shadow-2); }
.confirm-bar .bar-sum{ margin:0; text-align:center; font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
.confirm-bar .bar-row{ display:flex; align-items:center; gap:10px; }
.confirm-bar .bar-row .btn{ flex:1; }
.confirm-bar .bar-row .linkbtn{ flex:none; padding:6px 4px; }
.sa-list{ display:flex; flex-direction:column; gap:10px; }
.sa-opt{ display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-md); background:var(--glass-strong); border:2px solid transparent; box-shadow:var(--shadow-1); cursor:pointer; }
.sa-opt.on{ border-color:var(--red); }
.sa-opt input{ width:24px; height:24px; accent-color:var(--red); margin:0; }
.sa-opt .sa-amt{ font-size:22px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sa-opt .sa-min{ font-size:12px; font-weight:600; color:var(--muted); background:rgba(28,23,22,.06); border-radius:999px; padding:1px 8px; }
.sa-opt .sa-prem{ text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.sa-opt .sa-prem small{ display:block; font-weight:500; color:var(--muted); font-size:12px; }
.life-note{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; }
.life-note svg{ width:26px; height:26px; flex:none; stroke:var(--ink); fill:none; stroke-width:1.6; }
.life-note p{ margin:0; font-size:var(--fs-sm); }
.plans{ display:flex; flex-direction:column; gap:10px; }
.plan-card{ position:relative; display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:var(--r-md); background:var(--glass-strong); border:2px solid transparent; box-shadow:var(--shadow-1); cursor:pointer; text-align:left; font:inherit; color:inherit; width:100%; }
.plan-card.sel{ border-color:var(--red); box-shadow:var(--shadow-2); }
.plan-card .pc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.plan-card .pc-name{ font-weight:700; color:var(--ink); font-size:var(--fs-md); }
.plan-card .pc-price{ font-size:24px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1; text-align:right; }
.plan-card .pc-price small{ display:block; font-size:12px; font-weight:500; color:var(--muted); }
.plan-card .pc-room{ font-size:var(--fs-sm); color:var(--muted); }
.plan-card .pc-fit{ display:flex; flex-wrap:wrap; gap:6px; }
.plan-card .pc-fit .pill{ font-size:12.5px; padding:3px 9px; }
.plan-card .pc-more{ display:none; flex-direction:column; gap:6px; margin-top:4px; padding-top:10px; border-top:1px solid var(--line); }
.plan-card.sel .pc-more{ display:flex; }
.pc-more ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.pc-more li{ display:flex; gap:8px; align-items:flex-start; font-size:var(--fs-sm); line-height:1.45; border-radius:10px; padding:6px 10px; }
.pc-more li.pro{ background:var(--ok-bg); color:var(--ok); }
.pc-more li.con{ background:var(--warn-bg); color:var(--warn); }
.pc-more li b{ flex:none; width:18px; text-align:center; }
.pc-more .linkbtn{ align-self:flex-start; min-height:36px; }
.plan-card .pc-check{ position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:50%; border:2px solid #d6cfca; background:var(--white); display:none; }
.plan-card .rec-badge{ margin-left:6px; }
details.full-cmp{ border-radius:var(--r-lg); background:var(--glass-strong); border:1px solid var(--glass-edge); box-shadow:var(--shadow-1); }
details.full-cmp > summary{ list-style:none; cursor:pointer; padding:14px 48px 14px 16px; min-height:52px; position:relative; font-weight:700; color:var(--ink); }
details.full-cmp > summary::-webkit-details-marker{ display:none; }
details.full-cmp > summary::after{ content:""; position:absolute; right:20px; top:20px; width:10px; height:10px; border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(45deg); transition:transform .2s ease-out; }
details.full-cmp[open] > summary::after{ transform:rotate(-135deg); top:24px; }
details.full-cmp .full-body{ padding:0 4px 12px; }
.sum-card{ display:flex; flex-direction:column; gap:8px; }
.sum-card .sum-who{ font-size:var(--fs-xl); font-weight:700; color:var(--ink); line-height:1.2; }
.sum-card .sum-row{ display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-sm); color:var(--body); }
.sum-card .sum-row b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.sum-card .sum-tot{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px solid var(--line); padding-top:10px; margin-top:2px; }
.sum-card .sum-tot span{ font-weight:700; color:var(--ink); }
.sum-card .sum-tot b{ font-size:30px; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1; text-align:right; }
.sum-card .sum-tot b small{ display:block; font-size:12.5px; font-weight:500; color:var(--muted); }
.sum-card .pill{ align-self:flex-start; }
.addon-row{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.addon-row:first-child{ border-top:0; }
.addon-row b{ display:block; color:var(--ink); }
.addon-row small{ display:block; color:var(--muted); font-size:var(--fs-xs); }
.switch{ appearance:none; -webkit-appearance:none; width:52px; height:32px; border-radius:999px; background:#d9d1cc; position:relative; cursor:pointer; margin:0; transition:background .2s ease-out; flex:none; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s ease-out; }
.switch:checked{ background:var(--red); }
.switch:checked::after{ transform:translateX(20px); }
.switch:focus-visible{ outline:3px solid var(--red-soft); outline-offset:2px; }
.btn.wa{ border-color:var(--line); }
.age-wheel{ height:232px; overflow-y:auto; scroll-snap-type:y mandatory; border-radius:var(--r-md); background:rgba(28,23,22,.04); padding:94px 0; overscroll-behavior:contain; }
.age-wheel button{ display:block; width:100%; height:44px; border:0; background:none; font:inherit; font-size:20px; color:var(--muted); scroll-snap-align:center; cursor:pointer; font-variant-numeric:tabular-nums; }
.age-wheel button[aria-selected="true"]{ color:var(--ink); font-weight:700; font-size:24px; background:var(--white); box-shadow:var(--shadow-1); border-radius:12px; }
details.dob > summary{ cursor:pointer; color:var(--red); font-weight:600; font-size:var(--fs-sm); min-height:44px; display:flex; align-items:center; }
.dob-input{ font:inherit; font-size:var(--fs-md); padding:10px 12px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--white); color:var(--ink); min-height:48px; }
@media (prefers-reduced-motion: reduce){ .progress .bars i,.switch,.switch::after{ transition:none; } .stepper button:active,.btn:active,.age-btn:active{ transform:none; } }
.nowrap{ white-space:nowrap; }
.pill-text{ display:inline; text-align:left; }
.sum-card .pill{ justify-content:flex-start; text-align:left; }

/* ---------- อ่าน (reading hub + 1-minute articles) ---------- */
.pin-guide{ display:flex; flex-direction:column; gap:10px; background:var(--red-soft); border:1px solid rgba(216,0,37,.12); }
.pin-guide h2{ font-size:var(--fs-lg); }
.pin-guide .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.read-list{ display:flex; flex-direction:column; gap:10px; }
.read-card{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:start; padding:14px 16px; border-radius:var(--r-md); background:var(--glass-strong); border:1px solid var(--line); box-shadow:var(--shadow-1); text-decoration:none; color:var(--ink); }
.read-card .min{ grid-row:span 2; font-size:12px; font-weight:700; color:var(--red); background:var(--red-soft); border-radius:999px; padding:2px 9px; white-space:nowrap; margin-top:3px; }
.read-card b{ font-weight:700; line-height:1.4; }
.read-card small{ color:var(--muted); font-size:var(--fs-sm); line-height:1.45; }
.cta-card{ display:flex; flex-direction:column; gap:10px; text-align:center; }
.cta-card p{ margin:0; }
.facts{ font-size:var(--fs-sm); }
.facts li{ margin-bottom:4px; }
html[lang="lo"] .sheet [data-mode="contact"] .btn-red[href^="tel:"]{ background:var(--white); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-1); }
html[lang="lo"] .sheet [data-mode="contact"] .row2 .wa{ background:var(--red); color:var(--white); border-color:var(--red); box-shadow:0 6px 18px rgba(216,0,37,.28); }
html[lang="lo"] .sheet [data-mode="contact"] .row2 .wa small{ color:rgba(255,255,255,.85); }
.prose table.fit{ font-size:14.5px; }
.prose table.fit th,.prose table.fit td{ padding-left:6px; padding-right:6px; }
.cta-card b{ text-wrap:balance; }