/* PawnshopOne Liquid Glass: ชั้นเนื้อหาทึบ ชั้นควบคุมเป็นกระจก เขียวหยกเป็นสีปุ่ม ทองเฉพาะมูลค่า */
:root{
  --f:-apple-system,BlinkMacSystemFont,"Inter","Noto Sans Thai","Thonburi",sans-serif;
  --jade:#0d6a5b;--jade-2:#0a5549;--on-jade:#fff;--jade-s:#dcefe9;
  --gold:#7f5508;--gold-s:#f7edd6;--gold-b:#c08a1e;
  --bg:#f1f3f2;--card:#fff;--label:#101a17;--label-2:#4c5854;--label-3:#5f6c67;
  --sep:rgb(16 26 23/.13);--fill:rgb(16 26 23/.06);--fill-2:rgb(16 26 23/.1);
  --red:#c02619;--red-s:#fde8e5;--orange:#9c4a05;--orange-s:#fcefdc;--green:#17733a;--green-s:#e1f3e6;--blue:#1a5fb0;--blue-s:#e4edf9;
  --g-rgb:255 255 255;--g-a:.6;--g-blur:16px;--g-sat:190%;--g-solid:#f8f9f8;
  --g-edge:rgb(0 0 0/.15);--g-spec:rgb(255 255 255/.98);--g-spec-2:rgb(255 255 255/.5);--g-shadow:0 8px 22px rgb(10 30 25/.13);--g-sheen:rgb(255 255 255/.4);
  --drop:rgb(16 26 23/.08);--ink:rgb(16 26 23/.84);--g-b:1.12;
  --st:12px;--sb:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --jade:#4dc2a7;--jade-2:#7fd8c2;--on-jade:#04261f;--jade-s:#143a31;
  --gold:#ecc87e;--gold-s:#3a2e15;--gold-b:#e0b354;
  --bg:#000;--card:#191e1d;--label:#f2f6f4;--label-2:#b7c2be;--label-3:#a0aca7;
  --sep:rgb(255 255 255/.14);--fill:rgb(255 255 255/.08);--fill-2:rgb(255 255 255/.13);
  --red:#ff8a7a;--red-s:#3d1b17;--orange:#f2ad57;--orange-s:#392a11;--green:#6fd490;--green-s:#14301f;--blue:#8ab6ef;--blue-s:#172a42;
  --g-rgb:62 68 66;--g-a:.62;--g-b:.62;--g-solid:#2b302f;
  --g-edge:rgb(0 0 0/.55);--g-spec:rgb(255 255 255/.5);--g-spec-2:rgb(255 255 255/.2);--g-shadow:0 8px 22px rgb(0 0 0/.45);--g-sheen:rgb(255 255 255/.12);
  --drop:rgb(0 0 0/.3);--ink:rgb(255 255 255/.78);color-scheme:dark;
}}
:root[data-theme="dark"]{
  --jade:#4dc2a7;--jade-2:#7fd8c2;--on-jade:#04261f;--jade-s:#143a31;
  --gold:#ecc87e;--gold-s:#3a2e15;--gold-b:#e0b354;
  --bg:#000;--card:#191e1d;--label:#f2f6f4;--label-2:#b7c2be;--label-3:#a0aca7;
  --sep:rgb(255 255 255/.14);--fill:rgb(255 255 255/.08);--fill-2:rgb(255 255 255/.13);
  --red:#ff8a7a;--red-s:#3d1b17;--orange:#f2ad57;--orange-s:#392a11;--green:#6fd490;--green-s:#14301f;--blue:#8ab6ef;--blue-s:#172a42;
  --g-rgb:62 68 66;--g-a:.62;--g-b:.62;--g-solid:#2b302f;
  --g-edge:rgb(0 0 0/.55);--g-spec:rgb(255 255 255/.5);--g-spec-2:rgb(255 255 255/.2);--g-shadow:0 8px 22px rgb(0 0 0/.45);--g-sheen:rgb(255 255 255/.12);
  --drop:rgb(0 0 0/.3);--ink:rgb(255 255 255/.78);color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--label);font:400 17px/1.5 var(--f);-webkit-font-smoothing:antialiased;text-size-adjust:100%;overflow-x:hidden}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:color-mix(in srgb,var(--jade) 26%,transparent)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--jade) 60%,transparent);outline-offset:2px}
.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}
.val{color:var(--gold);font-weight:600}

/* วัสดุกระจก */
.g{position:relative;isolation:isolate;background:rgb(var(--g-rgb)/var(--g-a));-webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-b));backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-b));box-shadow:0 0 0 .5px var(--g-edge),var(--g-shadow);border-radius:999px}
.g::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 100% at 50% -35%,var(--g-sheen),transparent 62%);pointer-events:none}
.g::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(140deg,var(--g-spec) 0%,transparent 32%,transparent 64%,var(--g-spec-2) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.g.clear{background:rgb(0 0 0/.35);color:#fff;--g-spec:rgb(255 255 255/.8);--g-spec-2:rgb(255 255 255/.35);--g-sheen:rgb(255 255 255/.16);--g-blur:6px}
.g.tint{background:color-mix(in srgb,var(--jade) 94%,transparent);color:var(--on-jade);--g-sheen:rgb(255 255 255/.28)}
.g:active{transform:scale(1.04)}
.g{transition:transform .28s cubic-bezier(.3,1.4,.5,1),background .25s,color .25s}
:root.rt .g,:root.rt .ee,:root.rt .sheet{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--g-solid)}
:root.rt .g.tint{background:var(--jade)}
:root.rt .g.clear{background:#222}
@media (prefers-reduced-transparency:reduce){.g,.ee,.sheet{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--g-solid)!important}.g.tint{background:var(--jade)!important}}

/* หน้าจอ */
.scr{position:relative;width:100%;height:100%;overflow:hidden;overflow:clip;background:var(--bg);color:var(--label);container-type:inline-size}
.sc{position:absolute;inset:0;overflow:hidden auto;overscroll-behavior:contain;padding:calc(var(--st) + 60px) 0 calc(var(--sb) + 104px);scrollbar-width:none}
.sc::-webkit-scrollbar{display:none}
.sc.hero{padding-top:0}
.sc.acc-on{padding-bottom:calc(var(--sb) + 170px)}
.ee{position:absolute;inset:0 0 auto;height:calc(var(--st) + 56px);z-index:4;opacity:0;pointer-events:none;background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:.5px solid var(--sep);transition:opacity .2s}
.scrolled .ee{opacity:1}
.tb{position:absolute;inset:var(--st) 0 auto;height:44px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;pointer-events:none}
.tb>*{pointer-events:auto}
.tb .ttl{position:absolute;left:68px;right:68px;text-align:center;font-weight:600;font-size:17px;line-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:opacity .2s}
.tb.has-lt .ttl{opacity:0}
.scrolled .tb.has-lt .ttl{opacity:1}
.tbs{display:flex;gap:8px;margin-left:auto}
.ib{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;position:relative;flex:none}
.ibg{display:flex;align-items:center;height:44px;padding:0 2px}
.ibg .ib{width:42px}
.txtb{height:44px;padding:0 16px;font-weight:600;display:flex;align-items:center;font-size:16px;white-space:nowrap}
.bdg{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:12px;line-height:18px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .bdg{background:#e5484d}
.lt{font-size:34px;line-height:1.22;font-weight:700;padding:6px 20px 2px;text-wrap:balance}
.lts{font-size:15px;color:var(--label-2);padding:0 20px 2px}

/* แถบล่าง */
.bot{position:absolute;inset:auto 0 0;z-index:6;padding:0 16px calc(var(--sb) + 8px);pointer-events:none}
.bot>*{pointer-events:auto}
.eb{position:absolute;inset:auto 0 0;height:110px;z-index:5;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent) 28%,transparent)}
.trow{display:flex;gap:8px;align-items:center;justify-content:space-between}
.tabs{display:flex;height:62px;padding:4px;flex:1 1 auto;min-width:0;transition:flex-basis .42s cubic-bezier(.3,1.2,.45,1),max-width .42s cubic-bezier(.3,1.2,.45,1),transform .28s;max-width:100%}
.tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:27px;color:var(--ink);font-size:14px;line-height:1.15;font-weight:500;white-space:nowrap;overflow:hidden;transition:flex .42s cubic-bezier(.3,1.2,.45,1),opacity .2s;position:relative}
.tab[aria-current]{background:var(--drop);color:var(--jade);font-weight:600}
.srch{width:62px;height:62px;display:grid;place-items:center;flex:none}
.min .tabs{flex:0 0 62px;max-width:62px;padding:4px}
.min .tab:not([aria-current]){flex:0 0 0;opacity:0;pointer-events:none}
.min .tab[aria-current]{border-radius:999px}
.min .tab[aria-current] span{display:none}
.acc{position:absolute;left:16px;right:16px;bottom:calc(var(--sb) + 80px);height:60px;display:flex;align-items:center;gap:10px;padding:0 8px 0 8px;transition:left .42s cubic-bezier(.3,1.2,.45,1),right .42s cubic-bezier(.3,1.2,.45,1),bottom .42s cubic-bezier(.3,1.2,.45,1),height .3s;z-index:2;text-align:left}
.acc img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.acc b{display:block;font-size:15px;line-height:1.25;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc small{display:block;font-size:14px;line-height:1.25;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc .tx{min-width:0;flex:1}
.acc .go{height:44px;padding:0 16px;border-radius:22px;background:var(--jade);color:var(--on-jade);font-weight:600;font-size:15px;display:flex;align-items:center;white-space:nowrap;flex:none}
.acc .go[hidden]{display:none}
.acc .sm{display:none}
.min .acc .lg{display:none}
.min .acc .sm{display:inline}
.min .acc{left:86px;right:86px;bottom:calc(var(--sb) + 13px);height:52px;padding:0 6px}
.min .acc img,.min .acc small{display:none}
.min .acc .tx{padding-left:12px}
.min .acc .go{height:40px;padding:0 13px;border-radius:20px;font-size:14px}
.dock{display:flex;gap:8px;align-items:center}
.btn{min-height:52px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:17px;border-radius:26px;text-align:center;line-height:1.25}
.btn.w{width:100%;flex:1}
.btn.fill{background:var(--fill-2);color:var(--label)}
.btn.tinted{background:var(--jade-s);color:var(--jade)}
.btn.solid{background:var(--jade);color:var(--on-jade)}
.btn.danger{background:var(--red-s);color:var(--red)}
.btn.sm{min-height:44px;font-size:15px;padding:0 16px;border-radius:22px}
.btn.plain{color:var(--jade)}
.btn[aria-disabled="true"]{opacity:.5}
.dockbar{display:flex;align-items:center;gap:6px;width:100%;padding:6px;border-radius:34px}
.dockbar .ib{background:var(--fill-2)}
.dock .sum{padding:0 4px 0 14px;flex:1;min-width:0}
.dock .sum small{display:block;font-size:14px;line-height:1.2;color:var(--label-2)}
.dock .sum b{display:block;font-size:22px;line-height:1.25;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* เนื้อหา */
.sec{padding:0 16px;margin-top:26px}
.sec:first-child{margin-top:8px}
.sh{font-size:20px;line-height:1.3;font-weight:700;padding:0 4px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sh a,.sh button{font-size:15px;font-weight:600;color:var(--jade);white-space:nowrap}
.sh.s{font-size:15px;font-weight:600;color:var(--label-2)}
.sf{font-size:14px;line-height:1.45;color:var(--label-2);padding:8px 4px 0}
.list{background:var(--card);border-radius:24px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 16px;width:100%;text-align:left;position:relative}
.row+.row::before{content:"";position:absolute;top:0;right:0;left:var(--si,16px);height:.5px;background:var(--sep)}
.row.ic{--si:58px}
.row.th{--si:88px}
.row .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--jade-s);color:var(--jade)}
.ico.gold{background:var(--gold-s);color:var(--gold)}.ico.red{background:var(--red-s);color:var(--red)}.ico.blue{background:var(--blue-s);color:var(--blue)}.ico.gray{background:var(--fill-2);color:var(--label-2)}.ico.green{background:var(--green-s);color:var(--green)}
.row .th{width:60px;height:60px;border-radius:14px;object-fit:cover;flex:none;background:var(--fill)}
.row .tx{flex:1;min-width:0}
.row .tx b{display:block;font-weight:400;font-size:17px;line-height:1.35}
.row.bold .tx b{font-weight:600}
.row .tx small{display:block;font-size:15px;line-height:1.35;color:var(--label-2)}
.row .v{text-align:right;font-size:16px;color:var(--label-2);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;max-width:62%;line-height:1.35}
.row .v.wrap{white-space:normal}
.row .v.ink{color:var(--label);font-weight:600}
.row .v small{display:block;font-size:14px;color:var(--label-2);font-weight:400}
.row .cv{color:var(--label-3);opacity:.75;flex:none}
.row.dg .tx b{color:var(--red)}
.row.act .tx b{color:var(--jade);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:14px;line-height:1.5;font-weight:600;white-space:nowrap;background:var(--fill);color:var(--label-2)}
.pill.jade{background:var(--jade-s);color:var(--jade)}.pill.gold{background:var(--gold-s);color:var(--gold)}.pill.red{background:var(--red-s);color:var(--red)}.pill.orange{background:var(--orange-s);color:var(--orange)}.pill.green{background:var(--green-s);color:var(--green)}.pill.blue{background:var(--blue-s);color:var(--blue)}
.note{display:flex;gap:10px;padding:12px 14px;border-radius:20px;font-size:15px;line-height:1.45;background:var(--fill);color:var(--label-2)}
.note .i{margin-top:2px}
.note.blue{background:var(--blue-s);color:var(--blue)}.note.orange{background:var(--orange-s);color:var(--orange)}.note.red{background:var(--red-s);color:var(--red)}.note.green{background:var(--green-s);color:var(--green)}
.p{padding:0 20px;color:var(--label-2);font-size:16px;line-height:1.5}
.stack{display:flex;flex-direction:column;gap:10px}
.hs{display:flex;gap:10px;overflow-x:auto;padding:2px 16px;margin:0 -16px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-left:16px}
.hs::-webkit-scrollbar{display:none}
.hs>*{flex:none;scroll-snap-align:start}
.chip{height:40px;padding:0 15px;border-radius:20px;background:var(--fill);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--label)}
.chip[aria-pressed="true"]{background:var(--jade);color:var(--on-jade);font-weight:600}
.seg{display:flex;padding:3px;background:var(--fill-2);border-radius:22px;gap:2px}
.seg button{flex:1 1 0;min-width:0;height:38px;border-radius:19px;font-size:15px;font-weight:500;white-space:nowrap;color:var(--label);padding:0 6px}
.seg button[aria-pressed="true"]{background:var(--card);font-weight:600;box-shadow:0 1px 4px rgb(0 0 0/.14)}
.sw{width:62px;height:30px;border-radius:15px;background:var(--fill-2);position:relative;flex:none;transition:background .22s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:36px;height:24px;border-radius:12px;background:#fff;box-shadow:0 1px 4px rgb(0 0 0/.25);transition:transform .3s cubic-bezier(.3,1.4,.5,1),opacity .15s}
.sw[aria-checked="true"]{background:var(--jade)}
.sw[aria-checked="true"]::after{transform:translateX(20px)}
.sw:active::after{transform:scale(1.18);opacity:.85}
.sw[aria-checked="true"]:active::after{transform:translateX(20px) scale(1.18)}
.check{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--label-3);flex:none;display:grid;place-items:center;color:transparent}
[aria-checked="true"]>.check,.check.on{background:var(--jade);box-shadow:none;color:var(--on-jade)}

/* ตั๋วแบบ Wallet และบัตรสินค้า */
.pass{position:relative;display:block;width:100%;aspect-ratio:1/1.08;border-radius:30px;overflow:hidden;background:#0c1f1a;color:#fff}
.pass img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pass::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(5 18 15/.92) 8%,rgb(5 18 15/.55) 38%,transparent 62%)}
.pass .in{position:absolute;inset:auto 0 0;z-index:1;padding:18px}
.pass .pill{background:#fff;color:#7a2c06;position:absolute;left:14px;top:14px;z-index:1}
.pass .pill.calm{background:rgb(0 0 0/.62);color:#fff}
.pass h3{font-size:22px;line-height:1.25;font-weight:700;text-wrap:balance}
.pass p{font-size:15px;line-height:1.4;color:rgb(255 255 255/.88);font-variant-numeric:tabular-nums}
.pass .amt{font-size:15px;color:rgb(255 255 255/.88);margin-top:8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pass .amt b{font-size:28px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.pass-hs>*{width:calc(100cqw - 56px)}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 0}
.qa a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:14px;line-height:1.25;text-align:center;padding:4px 0}
.qa .c{width:54px;height:54px;border-radius:50%;background:var(--card);color:var(--jade);display:grid;place-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.pc{display:block;min-width:0;position:relative}
.pc img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:22px;background:var(--fill)}
.pc h3{font-size:15px;line-height:1.35;font-weight:400;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .pr{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.35;margin-top:2px}
.pc .was{font-size:14px;color:var(--label-2);text-decoration:line-through;font-weight:400;margin-left:6px}
.pc .fav{position:absolute;right:8px;top:8px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgb(0 0 0/.42);color:#fff}
.pc .fav.on{color:#ff8a7a}
.pc .tagv{position:absolute;left:8px;top:8px;padding:1px 9px;border-radius:999px;background:rgb(0 0 0/.62);color:#fff;font-size:14px;font-weight:600}
.hs .pc{width:164px}
.cat{width:74px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;line-height:1.25;text-align:center}
.cat img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--card)}
.catg{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:78px;gap:12px 6px;overflow-x:auto;padding:2px 16px;margin:0 -16px;scrollbar-width:none}
.catg::-webkit-scrollbar{display:none}
.heroimg{position:relative;width:100%;aspect-ratio:1;background:#0c1f1a}
.heroimg img{width:100%;height:100%;object-fit:cover}
.hd{padding:16px 20px 0}
.hd h1{font-size:26px;line-height:1.3;font-weight:700;text-wrap:balance}
.big{font-size:34px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.big small{font-size:17px;font-weight:600;margin-left:4px}
.ctr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 24px 6px}
.seal{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--jade-s);color:var(--jade)}
.seal.red{background:var(--red-s);color:var(--red)}.seal.green{background:var(--green-s);color:var(--green)}
.ctr h1{font-size:24px;line-height:1.3;font-weight:700;text-wrap:balance}
.fld{display:block;padding:10px 16px;position:relative}
.fld+.fld::before{content:"";position:absolute;top:0;right:0;left:16px;height:.5px;background:var(--sep)}
.fld span{display:block;font-size:14px;line-height:1.3;color:var(--label-2)}
.fld input,.fld textarea,.fld select{display:block;width:100%;border:0;background:none;outline:0;font-size:17px;line-height:1.45;padding:2px 0;appearance:none;resize:none}
.fld input::placeholder,.fld textarea::placeholder{color:var(--label-3);opacity:1}
.fld.ro input{color:var(--label-2)}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0 20px}
.otp i{height:58px;border-radius:16px;background:var(--card);display:grid;place-items:center;font-style:normal;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.otp i.cur{box-shadow:inset 0 0 0 2px var(--jade)}
.steps{display:flex;gap:6px;padding:4px 20px 0}
.steps i{flex:1;height:5px;border-radius:3px;background:var(--fill-2)}
.steps i.on{background:var(--jade)}
.qr{width:232px;height:232px;margin:0 auto;padding:14px;background:#fff;border-radius:26px}
.qr svg{width:100%;height:100%;display:block}
.tl{position:relative;padding:4px 0 4px}
.tl li{list-style:none;display:flex;gap:12px;padding:8px 0;position:relative}
.tl ul,ul.tl{margin:0;padding:0}
.tl li::before{content:"";position:absolute;left:12px;top:32px;bottom:-8px;width:2px;background:var(--jade)}
.tl li:last-child::before{display:none}
.tl .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--jade);color:var(--on-jade);flex:none;z-index:1}
.tl b{display:block;font-weight:500;line-height:1.35}
.tl small{font-size:15px;color:var(--label-2)}
.pic3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pic3 button{aspect-ratio:1;border-radius:18px;background:var(--fill);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px;color:var(--label-2)}
.tabline{display:flex;gap:6px;overflow-x:auto;padding:2px 16px;scrollbar-width:none}
.tabline::-webkit-scrollbar{display:none}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vc{position:relative;display:block;aspect-ratio:1/1.1;border-radius:24px;overflow:hidden;background:var(--card)}
.vc img{width:100%;height:100%;object-fit:cover}
.vc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(4 16 13/.86) 10%,transparent 56%)}
.vc span{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;color:#fff;font-weight:600;line-height:1.3}
.vc small{display:block;font-size:14px;font-weight:400;color:rgb(255 255 255/.88)}
.dial{width:172px;height:172px;margin:0 auto;position:relative;display:grid;place-items:center;font-weight:700;font-size:40px;font-variant-numeric:tabular-nums}
.dial svg{position:absolute;inset:0;transform:rotate(-90deg)}
.code{font-size:42px;font-weight:700;letter-spacing:.08em;text-align:center;font-variant-numeric:tabular-nums}
.bub{max-width:82%;padding:10px 14px;border-radius:20px;background:var(--card);line-height:1.45}
.bub.me{background:var(--jade);color:var(--on-jade);margin-left:auto}
.input-g{display:flex;align-items:center;gap:8px}
.input-g input{flex:1;min-width:0;height:52px;padding:0 18px;border:0;background:none;outline:0;font-size:17px}
.input-g input::placeholder{color:var(--ink);opacity:1}
.input-g .ib{flex:none}

/* แผ่นซ้อน (sheet) */
.back{position:absolute;inset:0;z-index:8;background:rgb(0 0 0/.3);opacity:0;pointer-events:none;transition:opacity .25s}
.sheet{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--kb,0px));z-index:9;border-radius:34px;transform:translateY(calc(100% + 16px));transition:transform .42s cubic-bezier(.25,1.1,.4,1);max-height:calc(100% - var(--kb,0px) - 70px);display:flex;flex-direction:column;overflow:hidden;background:rgb(var(--g-rgb)/max(.9,var(--g-a)));-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);box-shadow:0 0 0 .5px var(--g-edge),0 16px 40px rgb(0 0 0/.24)}
.sheet .grb{width:38px;height:5px;border-radius:3px;background:var(--fill-2);margin:7px auto 0;flex:none}
.sheet header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 8px;gap:8px;flex:none}
.sheet header b{font-size:17px;font-weight:600;text-align:center;flex:1}
.sheet .bd{overflow-y:auto;padding:0 14px 16px;display:flex;flex-direction:column;gap:10px}
.scr.sh-open .back{opacity:1;pointer-events:auto}
.scr.sh-open .sheet.on{transform:none}
.menu{--g-blur:30px;background:rgb(var(--g-rgb)/max(.86,var(--g-a)));position:absolute;z-index:9;min-width:210px;border-radius:26px;padding:6px;transform-origin:100% 100%;transform:scale(.6);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.3,1.35,.45,1),opacity .15s}
.menu.on{transform:none;opacity:1;pointer-events:auto}
.menu button{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;border-radius:20px;text-align:left}
.menu button:hover{background:var(--fill)}

.seg[data-pick] button[aria-pressed="true"]{background:var(--jade);color:var(--on-jade);font-weight:600;box-shadow:none}
.scrolled .tb .g.clear{background:rgb(var(--g-rgb)/var(--g-a));color:var(--label);--g-blur:16px;--g-spec:initial;--g-spec-2:initial}
.stg-screen{position:absolute;inset:0;visibility:hidden;background:var(--bg)}
.stg-screen.on,.stg-screen.under,.stg-screen.leaving{visibility:visible}
.amt-w{display:block;background:var(--card);border-radius:24px;padding:12px 16px}
.amt-w>span:first-child{display:block;font-size:14px;color:var(--label-2)}
.amt-r{display:flex;align-items:baseline;gap:8px}
.amt-r input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:34px;line-height:1.25;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 0}
.amt-r input::placeholder{color:var(--label-3);opacity:1}
.amt-r b{font-size:17px;font-weight:600;color:var(--label-2)}
.amt-r.bad input{color:var(--red)}
.amt-q{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.amt-q button{min-height:54px;border-radius:20px;background:var(--fill);font-size:16px;font-weight:600;line-height:1.25}
.amt-q small{display:block;font-size:14px;font-weight:500;color:var(--label-2)}
.amt-err{min-height:0;font-size:15px;color:var(--red);padding:0 6px}
.amt-err:empty{display:none}
.otp-w{display:block;position:relative}
.otp-w input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;z-index:1}
.otp-w input:focus+.otp i:empty:first-of-type{box-shadow:inset 0 0 0 2px var(--jade)}
.tk-q{display:flex;gap:8px;align-items:center}
.srchf{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:22px;background:var(--fill);color:var(--label-2)}
.srchf input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:16px;color:var(--label)}
.srchf input::placeholder{color:var(--label-2);opacity:1}
.stars{display:flex;gap:2px;color:var(--gold-b)}
.stars button{width:32px;height:32px;display:grid;place-items:center}
.stars button.on .i{fill:currentColor}
#toast{position:fixed;left:50%;top:calc(var(--st) + 54px);z-index:70;transform:translate(-50%,-14px);opacity:0;pointer-events:none;padding:10px 18px;border-radius:24px;font-size:15px;font-weight:600;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;transition:opacity .2s,transform .28s}
#toast.on{opacity:1;transform:translate(-50%,0)}
[hidden]{display:none!important}
.demo-chip{height:32px;padding:0 12px;display:inline-flex;align-items:center;font-size:14px;font-weight:600}

/* จอกว้าง */
.wide{position:relative;height:100%;display:grid;grid-template-columns:280px 1fr;background:var(--bg);overflow:hidden;color:var(--label)}
.wide .sb{position:absolute;left:10px;top:10px;bottom:10px;width:262px;border-radius:28px;padding:14px 10px;z-index:4;overflow:auto;scrollbar-width:none}
.wide .sb h4{margin:14px 12px 4px;font-size:14px;font-weight:600;color:var(--label-2)}
.wide .sb a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;font-size:16px}
.wide .sb a[aria-current]{background:var(--drop);color:var(--jade);font-weight:600}
.wide .sb .br{font-size:20px;font-weight:700;padding:6px 12px 2px}
.wide .mn{grid-column:2;overflow:auto;padding:22px 28px 28px 16px;scrollbar-width:none}
.wide .mn::-webkit-scrollbar{display:none}
.wg{display:grid;gap:18px}
.wtb{position:absolute;right:20px;top:16px;z-index:5;display:flex;gap:8px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}