/* ============================================================
   Together · นิตยสารเมือง — sc-1-home
   Smoked-Glass editorial system · light+dark · 4 access modes
   Brand CI: Magenta / Grape / Gold / Sky / Pink (per concept.html)
   ============================================================ */

:root{
  --magenta:#E42369; --pink:#F77BA8; --gold:#F0DC7A; --sky:#B6E0EB; --grape:#2F133C;
  --bg:#F7F1F4; --bg-2:#FCEFF5; --ink:#2F133C; --ink-2:#6A4B73; --ink-3:#9A86A2;
  --rule:#EEDFE8; --rule-2:#F6EDF2; --surface:#FFFFFF; --accent:var(--magenta);
  --hd:"Kanit",sans-serif; --body:"Noto Sans Thai","Kanit",sans-serif; --mono:"Noto Sans Thai","Kanit",sans-serif;
  /* access-tunable */
  --fs:1; --pad:18px; --radius:22px; --gap:14px; --blockpad:24px;
  /* smoked glass */
  --glass:color-mix(in oklab,var(--surface) 88%,transparent);
  --glass-2:color-mix(in oklab,var(--surface) 94%,transparent);
  --glass-brd:color-mix(in oklab,var(--ink) 9%,transparent);
  --glass-blur:blur(20px) saturate(170%);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.65);
  --glass-shadow:0 16px 38px -22px rgba(47,19,60,.42);
}
[data-theme="dark"]{
  --bg:#160A1E; --bg-2:#2A1136; --ink:#FBEFF5; --ink-2:#D7B8DE; --ink-3:#A285AC;
  --rule:#46204F; --rule-2:#3A1A45; --surface:#2A1136;
  --glass:color-mix(in oklab,#3a1a48 86%,transparent);
  --glass-2:color-mix(in oklab,#3a1a48 93%,transparent);
  --glass-brd:rgba(255,255,255,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.10);
  --glass-shadow:0 16px 40px -20px rgba(0,0,0,.7);
}
/* tenant accents */
[data-tenant="chiangrai"]{--accent:#1E6B5A}
[data-tenant="udon"]{--accent:#C2542C}
/* access modes — 4th axis, overlays the descriptor */
[data-access="elder"]{--fs:1.30;--pad:22px;--gap:18px;--blockpad:26px;--radius:20px}
[data-access="guided"]{--fs:1.12;--pad:20px;--gap:16px}
[data-access="exec"]{--fs:.98;--pad:16px;--gap:11px;--blockpad:18px;--radius:18px}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
h1,h2,h3,h4{font-family:var(--hd);font-weight:600;letter-spacing:-0.01em;line-height:1.08}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:calc(10px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;color:var(--ink-3)}
.en{display:none} .lang-en .en{display:revert} .lang-en .th{display:none}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* phone shell — faint blooms give the glass something to frost */
.phone{max-width:444px;margin:0 auto;min-height:100vh;position:relative;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  background:var(--bg)}

/* ---------- smoked-glass surface primitives ---------- */
.glass{background:var(--glass);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-hi),var(--glass-shadow)}
.glass-2{background:var(--glass-2);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-hi),var(--glass-shadow)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}

/* ===================== HEADER GROUP (blocks 35/36/1) ===================== */
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:8px;padding:8px var(--pad);
  background:var(--glass-2);
  border-bottom:1px solid var(--glass-brd);box-shadow:var(--glass-hi)}
.top .logo{height:42px;width:auto;margin-left:-4px;object-fit:contain;transform:scale(1.3);transform-origin:left center}
.top .sp{flex:1}
.pillbtn{border:1px solid var(--glass-brd);background:var(--glass);color:var(--ink);border-radius:9px;cursor:pointer;
  font-family:var(--mono);font-size:calc(10px*var(--fs));letter-spacing:0.02em;padding:8px 12px;display:flex;align-items:center;gap:6px;
  }
.iconbtn{border:1px solid var(--glass-brd);background:var(--glass);color:var(--ink);min-width:38px;height:38px;border-radius:100px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
[data-access="elder"] .iconbtn{min-width:48px;height:48px}

/* access switcher */
.access-bar{position:sticky;top:58px;z-index:55;display:flex;gap:5px;padding:8px var(--pad);overflow-x:auto;scrollbar-width:none;
  background:var(--glass-2);border-bottom:1px solid var(--glass-brd)}
.access-bar::-webkit-scrollbar{display:none}
.access-bar button{flex:1;white-space:nowrap;border:1px solid var(--glass-brd);background:var(--glass);color:var(--ink-2);
  border-radius:10px;padding:9px 4px;cursor:pointer;font-family:var(--hd);font-size:calc(11.5px*var(--fs));font-weight:600;min-width:0}
.access-bar button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}

/* header spacer (block 37) */
.header-spacer{height:4px}

/* ===================== EDITORIAL COVER (chrome) ===================== */
.cover{position:relative;overflow:hidden;color:#fff;padding:26px var(--pad) 28px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(158deg,var(--accent) 0%,#7d1840 100%)}
[data-tenant="chiangrai"] .cover{background:linear-gradient(158deg,#1E6B5A,#0e3b31)}
[data-tenant="udon"] .cover{background:linear-gradient(158deg,#C2542C,#5e2613)}
.cover .deco{position:absolute;inset:0;opacity:.45;background:
  radial-gradient(60% 50% at 85% 10%,rgba(255,255,255,.28),transparent 60%),
  radial-gradient(52% 52% at 8% 96%,rgba(240,220,122,.32),transparent 60%)}
.cover .gl{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;border:1px solid rgba(255,255,255,.3)}
.cover .row{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cover .mast{font-family:var(--hd);font-weight:700;font-size:calc(14px*var(--fs));letter-spacing:0.02em;text-transform:uppercase}
.cover .issue{font-family:var(--mono);font-size:calc(10px*var(--fs));background:rgba(255,255,255,.18);padding:5px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.25);white-space:nowrap}
.cover .acc{display:inline-block;font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;background:var(--gold);color:#3a1020;padding:5px 11px;border-radius:100px;margin-bottom:14px}
.cover .ctitle{position:relative;font-family:var(--hd);font-weight:700;font-size:calc(48px*var(--fs));line-height:0.94;letter-spacing:-0.02em}
.cover .csub{position:relative;font-size:calc(13.5px*var(--fs));opacity:.92;margin-top:12px;max-width:32ch}
.cover .barcode{position:relative;display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:18px;opacity:.85}
.cover .barcode i{width:2px;background:#fff;display:block}

/* ===================== CONTENTS JUMP BAR (chrome) ===================== */
.contents{position:sticky;top:58px;z-index:50;display:flex;gap:4px;padding:9px var(--pad);overflow-x:auto;scrollbar-width:none;
  background:var(--glass-2);border-bottom:1px solid var(--glass-brd)}
.contents::-webkit-scrollbar{display:none}
.contents a{flex:1 1 0;min-width:0;white-space:nowrap;text-align:center;text-decoration:none;font-family:var(--hd);font-weight:600;font-size:calc(10.5px*var(--fs));color:var(--ink-2);border:1px solid var(--glass-brd);border-radius:9px;padding:7px 5px;background:var(--glass)}
.contents a:hover,.contents a.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* trust ribbon (chrome) */
.trust{display:flex;align-items:center;gap:10px;padding:10px var(--pad);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule-2)}
.trust::-webkit-scrollbar{display:none}
.trust .tag{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.trust .tag svg{width:13px;height:13px;color:var(--accent)}
.trust .tag b{color:var(--ink-2);font-weight:600}

/* ===================== AUTH (login / register) ===================== */
/* Login + Register show by default; once signed in (html[data-authed="1"])
 * they hide and the logout icon appears. auth.js sets data-authed. */
.authbtn-primary{background:var(--brand,#E42369);color:#fff;border-color:var(--brand,#E42369)}
.authedonly{display:none}
html[data-authed="1"] .authbtn{display:none}
html[data-authed="1"] .authedonly{display:inline-flex}

/* ===================== BLOCK SCAFFOLD ===================== */
.block{padding:var(--blockpad) var(--pad) 0;position:relative}
.block.flush{padding-top:calc(var(--blockpad) - 6px)}

/* Mode/compose emphasis (2026-06-01) · modes-chrome.js sets data-tg-emphasis when an
 * Experience mode promotes/demotes a block; hydrate.js sets data-emphasis from the
 * composer. Mirrors the mirror's hero|primary|secondary|compact weights. Any block
 * (chrome or section), so attributes are matched directly — not just .block. */
[data-tg-emphasis="hero"], [data-emphasis="hero"]{
  /* hero: lift + subtle ring so the promoted block reads as the page's focus */
  scroll-margin-top:80px;
}
[data-tg-emphasis="hero"]>*:first-child, [data-emphasis="hero"]>*:first-child{
  box-shadow:0 14px 34px -16px rgba(0,0,0,.32);border-radius:18px;
}
[data-tg-emphasis="primary"]{opacity:1}
[data-tg-emphasis="secondary"]{opacity:.92}
/* compact: tighten vertical rhythm so lower-priority blocks take less room */
[data-tg-emphasis="compact"].block{padding-top:calc(var(--blockpad) * .55)}
[data-tg-emphasis="compact"] .sec-head{margin-bottom:7px}
/* muted (hydrate composer) · de-emphasise without hiding */
[data-emphasis="muted"], [data-tg-emphasis="muted"]{opacity:.6}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:13px}
.sec-head h2{font-size:calc(22px*var(--fs));line-height:1.04}
.sec-head .more{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:calc(11.5px*var(--fs));font-weight:500;letter-spacing:0.02em;text-transform:uppercase;color:var(--accent);text-decoration:none;white-space:nowrap}
.sec-head .more::after{content:"";width:.95em;height:.95em;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.chev{width:1em;height:1em;display:inline-block;vertical-align:-0.14em}
.kick{display:block;font-family:var(--mono);font-size:calc(11px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.kick.acc{color:var(--accent)}
.sub{font-size:calc(13px*var(--fs));color:var(--ink-2);margin-top:6px;line-height:1.55}
.zone-rule{display:flex;align-items:center;gap:12px;padding:10px var(--pad) 0;margin-top:6px}
.zone-rule .n{display:none}
.zone-rule .ln{flex:1;height:1px;background:var(--rule)}
.zone-rule .lbl{font-family:var(--hd);font-weight:600;font-size:calc(12px*var(--fs));color:var(--ink-2)}

/* why-this chip */
.why{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;
  background:var(--bg-2);color:var(--accent);border:1px solid var(--rule);padding:4px 10px;border-radius:100px;margin-top:10px}
.why svg{width:11px;height:11px}

/* reusable pieces */
.statline{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px;font-family:var(--mono);font-size:calc(10px*var(--fs));color:var(--ink-2);letter-spacing:0.02em}
.statline b{color:var(--ink);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}
.step{border:1px solid var(--rule);border-radius:13px;padding:11px 10px;background:var(--surface)}
.step .sk{font-family:var(--mono);font-size:calc(8.5px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;color:var(--accent)}
.step .st{font-family:var(--hd);font-weight:600;font-size:calc(12.5px*var(--fs));margin-top:5px;line-height:1.2}
.btnrow{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn{border:0;border-radius:100px;padding:11px 18px;font-family:var(--body);font-weight:600;font-size:calc(13px*var(--fs));cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn.p{background:var(--accent);color:#fff} .btn.g{background:var(--bg-2);color:var(--ink);border:1px solid var(--rule)}
.btn.glassbtn{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}
.pillchips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.chip{font-family:var(--mono);font-size:calc(9.5px*var(--fs));letter-spacing:0.02em;padding:6px 12px;border-radius:100px;background:var(--bg-2);color:var(--ink-2);border:1px solid var(--rule);white-space:nowrap}

/* greeting */
.greet .hi{font-size:calc(16px*var(--fs));color:var(--ink-2)}
.greet .hi b{color:var(--ink);font-weight:700}

/* mood card (AI) */
.mood{margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;color:#fff;padding:20px;position:relative;
  background:#6d1338 linear-gradient(135deg,var(--accent),#6d1338)}
.mood .deco{position:absolute;inset:0;opacity:.4;background:radial-gradient(60% 80% at 88% 12%,rgba(240,220,122,.5),transparent 60%)}
.mood .wx{position:relative;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:calc(10px*var(--fs));letter-spacing:0.02em}
.mood .wx svg{width:16px;height:16px}
.mood h3{position:relative;font-size:calc(22px*var(--fs));margin-top:12px}
.mood p{position:relative;font-size:calc(12.5px*var(--fs));opacity:.92;margin-top:6px}
.mood .moods{position:relative;display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.mood .moods button{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;border-radius:100px;padding:8px 13px;font-family:var(--body);font-weight:600;font-size:calc(12px*var(--fs));cursor:pointer;}
.mood .dots{position:absolute;top:16px;right:16px;display:flex;gap:5px}
.mood .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}
.mood .dots i.on{background:#fff}

/* cockpit / trip strip */
.trip{display:flex;align-items:center;gap:13px;border-radius:var(--radius);padding:15px 16px;margin:var(--gap) 0 0;color:#fff;
  background:#2F133C linear-gradient(120deg,var(--grape),var(--accent))}
.trip .day{flex-shrink:0;text-align:center;border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:8px 11px;background:rgba(255,255,255,.12);}
.trip .day small{display:block;font-family:var(--mono);font-size:calc(8px*var(--fs));opacity:.8;letter-spacing:0.02em}
.trip .day b{font-family:var(--hd);font-size:calc(17px*var(--fs))}
.trip .mid .k{font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;opacity:.75;text-transform:uppercase}
.trip .mid .t{font-family:var(--hd);font-weight:600;font-size:calc(15px*var(--fs));margin-top:1px}
.trip .mid .nx{font-size:calc(11.5px*var(--fs));opacity:.85;margin-top:2px}
.trip .v{margin-left:auto;text-align:right;flex-shrink:0}
.trip .v .mono{color:rgba(255,255,255,.7)}
.trip .v b{font-family:var(--hd);font-size:calc(16px*var(--fs))}

/* AI plan hero */
.aiplan{position:relative;margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;color:#fff;min-height:206px;display:flex;flex-direction:column;justify-content:space-between;padding:20px}
.aiplan .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
.aiplan .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,9,28,.15) 0%,rgba(33,9,28,.82) 100%)}
.aiplan .insp{position:relative;align-self:flex-start;font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:100px}
.aiplan .ct{position:relative}
.aiplan h3{font-size:calc(25px*var(--fs));max-width:15ch}
.aiplan p{font-size:calc(12.5px*var(--fs));opacity:.92;margin-top:8px;max-width:34ch}

/* search bar */
.search-wrap{margin:var(--gap) 0 0;display:flex;gap:8px}
.search{flex:1;display:flex;align-items:center;gap:9px;border-radius:100px;padding:12px 16px;color:var(--ink-3);font-size:calc(13px*var(--fs));cursor:text}
.search svg{flex-shrink:0;opacity:.7}
.sq-btn{border:1px solid var(--glass-brd);background:var(--glass);color:var(--ink);width:46px;height:46px;flex-shrink:0;align-self:center;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sq-btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}

/* banner with image bg (editors-choice / avenue / curated / welcome / tourism) */
.imgcard{position:relative;margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;color:#fff;min-height:172px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;cursor:pointer}
.imgcard.tall{min-height:210px}
.imgcard .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.imgcard .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,9,28,.05),rgba(33,9,28,.78))}
.imgcard .ct{position:relative}
.imgcard .kick{color:rgba(255,255,255,.85)}
.imgcard h3{font-size:calc(19px*var(--fs));margin-top:3px}
.imgcard .ic-acc{position:absolute;top:14px;right:14px}
.imgcard .ic-cta{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:5px 11px;border-radius:100px;text-transform:uppercase}

/* placeholder image (mirror/local assets that won't load) */
.ph{background:
  repeating-linear-gradient(135deg,color-mix(in oklab,var(--accent) 16%,var(--surface)) 0 9px,var(--surface) 9px 18px);
  display:flex;align-items:center;justify-content:center}
.ph span{font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;color:var(--ink-3);background:var(--surface);padding:4px 9px;border-radius:100px;border:1px solid var(--rule)}
.imgcard .ph{position:absolute;inset:0}

/* mice highlight (glass card) */
.mice{margin:var(--gap) 0 0;border-radius:var(--radius);padding:18px;position:relative;overflow:hidden}
.mice .plogo{position:absolute;top:16px;right:16px;height:78px;opacity:.9}
.mice .plogo.ph{position:static;height:auto}

/* hotel banner */
.hotel{margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;color:#fff;position:relative;
  background:#3a1630 linear-gradient(135deg,#3a1630,var(--accent))}
.hotel .wave{display:none}
.hotel .bd{position:relative;padding:18px}
.hotel .dates{font-family:var(--mono);font-size:calc(10px*var(--fs));letter-spacing:0.02em;opacity:.85;margin-top:7px}
.hotel .step{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff;}
.hotel .step .sk{color:var(--gold)}

/* subportals — 2 tiles */
.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:var(--gap) 0 0}
.subtile{border-radius:var(--radius);padding:16px;position:relative;overflow:hidden;cursor:pointer;min-height:150px;display:flex;flex-direction:column}
.subtile h4{font-size:calc(17px*var(--fs));margin-top:4px}
.subtile p{font-size:calc(11px*var(--fs));color:var(--ink-2);margin-top:6px;line-height:1.45}
.subtile .ss{margin-top:auto;display:flex;gap:9px;padding-top:12px;font-family:var(--mono);font-size:calc(9px*var(--fs));color:var(--ink-3)}
.subtile .ss b{color:var(--accent)}

/* news+health split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:var(--gap) 0 0}
.split .c{border-radius:var(--radius);padding:16px;cursor:pointer;min-height:128px;display:flex;flex-direction:column}
.split .c .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--accent);border:1px solid var(--rule);margin-bottom:auto}
.split .c h4{font-size:calc(15px*var(--fs));margin-top:12px}
.split .c p{font-size:calc(10.5px*var(--fs));color:var(--ink-2);margin-top:4px;line-height:1.4}

/* lottery live banner */
.lotto{margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;color:#fff;position:relative;padding:18px;
  background:#2F133C linear-gradient(135deg,#7d1840,var(--grape))}
.lotto .live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;background:var(--magenta);padding:4px 10px;border-radius:100px}
.lotto .live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.lotto .vc{font-family:var(--mono);font-size:calc(10px*var(--fs));opacity:.8;margin-left:9px}
.lotto h3{font-size:calc(18px*var(--fs));margin-top:12px}
.lotto p{font-size:calc(12px*var(--fs));opacity:.88;margin-top:5px}

/* wallet strip */
.wallet{margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;padding:18px;color:#fff;position:relative;
  background:#2F133C linear-gradient(135deg,var(--grape),var(--accent))}
.wallet .deco{position:absolute;inset:0;opacity:.4;background:radial-gradient(50% 70% at 90% 10%,rgba(240,220,122,.4),transparent 60%)}
.wallet .topr{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.wallet .badge{font-family:var(--mono);font-size:calc(9px*var(--fs));background:var(--gold);color:#3a1020;padding:4px 10px;border-radius:100px}
.wallet .pts{position:relative;font-family:var(--hd);font-size:calc(32px*var(--fs));font-weight:600;margin-top:8px}
.wallet .pts small{font-family:var(--mono);font-size:calc(11px*var(--fs));opacity:.6;font-weight:400}
.wallet .eq{position:relative;font-size:calc(11px*var(--fs));opacity:.85}
.wallet .bar{position:relative;height:5px;background:rgba(255,255,255,.2);border-radius:100px;margin-top:13px;overflow:hidden}
.wallet .bar i{display:block;height:100%;background:var(--gold)}
.wallet .nxt{position:relative;font-family:var(--mono);font-size:calc(9.5px*var(--fs));opacity:.8;margin-top:7px}

/* budget */
.budget{margin:var(--gap) 0 0;border-radius:var(--radius);padding:17px}
.budget .amt{font-family:var(--hd);font-weight:600;font-size:calc(17px*var(--fs));margin-top:3px}
.budget .seg{display:flex;height:8px;border-radius:100px;overflow:hidden;margin-top:13px;background:var(--bg-2)}
.budget .seg i{display:block;height:100%}
.budget .legend{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin-top:13px}
.budget .legend .lg{display:flex;align-items:center;gap:7px;font-size:calc(11.5px*var(--fs));color:var(--ink-2)}
.budget .legend .lg i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.budget .legend .lg b{margin-left:auto;color:var(--ink);font-family:var(--mono);font-size:calc(10px*var(--fs))}

/* coupon vault — horizontal scroll */
.hscroll{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 4px;margin-top:13px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.coupon{flex-shrink:0;width:232px;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid var(--rule);background:var(--surface);cursor:pointer}
.coupon .cb{padding:14px}
.coupon .ck{font-family:var(--mono);font-size:calc(8.5px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;color:var(--accent)}
.coupon h4{font-size:calc(15px*var(--fs));margin-top:7px}
.coupon .disc{font-size:calc(11.5px*var(--fs));color:var(--ink-2);margin-top:5px}
.coupon .notch{border-top:1px dashed var(--rule);margin:13px 0 0;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:calc(9px*var(--fs))}
.coupon .exp{color:var(--ink-3)} .coupon .st-ok{color:#1E8A5B} .coupon .st-soon{color:var(--accent)}
.coupon::before,.coupon::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--bg);bottom:42px;border:1px solid var(--rule)}
.coupon::before{left:-9px} .coupon::after{right:-9px}

/* timeline */
.timeline{margin:13px 0 0;position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--rule)}
.tl{position:relative;padding:10px 0 10px 16px}
.tl::before{content:"";position:absolute;left:-21px;top:14px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-3)}
.tl.now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 28%,transparent)}
.tl .k{font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;color:var(--ink-3)}
.tl.now .k{color:var(--accent)}
.tl .a{font-size:calc(13.5px*var(--fs));margin-top:2px}

/* wifi */
.wifi{margin:var(--gap) 0 0;border-radius:var(--radius);padding:17px;position:relative;overflow:hidden}
.wifi .ic{width:36px;height:36px;border-radius:10px;background:color-mix(in oklab,#1E8A5B 16%,var(--surface));color:#1E8A5B;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in oklab,#1E8A5B 22%,transparent)}
.wifi h4{font-size:calc(15.5px*var(--fs));margin-top:11px}
.wifi .creds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.wifi .cr{border:1px solid var(--rule);border-radius:12px;padding:10px 12px;background:var(--bg-2)}
.wifi .cr small{font-family:var(--mono);font-size:calc(8.5px*var(--fs));color:var(--ink-3);letter-spacing:0.02em;text-transform:uppercase}
.wifi .cr b{display:block;font-family:var(--mono);font-size:calc(12px*var(--fs));color:var(--ink);margin-top:3px;word-break:break-all}

/* pretrip add-ons + thai music — feature card */
.feature{margin:var(--gap) 0 0;border-radius:var(--radius);padding:17px;position:relative;overflow:hidden}
.feature .ic{position:absolute;top:16px;right:16px;color:var(--accent);opacity:.5}
.feature h3{font-size:calc(17px*var(--fs));margin-top:3px;max-width:22ch}

/* tourism map */
.map .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:13px}
.map .cell{aspect-ratio:1;border-radius:13px;overflow:hidden;position:relative;cursor:pointer;border:1px solid var(--rule)}
.map .cell .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.map .cell span{position:absolute;left:8px;bottom:7px;font-family:var(--hd);font-weight:600;font-size:calc(11px*var(--fs));color:#fff;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.map .cell .sc{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.5))}

/* merchants row */
.merch{display:flex;align-items:center;gap:13px;margin:var(--gap) 0 0;border-radius:var(--radius);padding:16px;cursor:pointer}
.merch .ic{width:46px;height:46px;border-radius:14px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.merch .mc{flex:1}
.merch h3{font-size:calc(16px*var(--fs))}
.merch p{font-size:calc(11px*var(--fs));color:var(--ink-2);margin-top:3px}
.merch .arr{color:var(--ink-3)}

/* more-for-you tiles */
.moregrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:var(--gap) 0 0}
.mtile{border-radius:var(--radius);padding:15px;position:relative;overflow:hidden;cursor:pointer;min-height:138px;display:flex;flex-direction:column;color:#fff}
.mtile.t1{background:#7d1840 linear-gradient(150deg,var(--accent),#7d1840)}
.mtile.t2{background:#2F133C linear-gradient(150deg,var(--grape),#4a2059)}
.mtile.t3{background:#0e3b31 linear-gradient(150deg,#1E6B5A,#0e3b31)}
.mtile.t4{background:#5e2613 linear-gradient(150deg,#C2542C,#5e2613)}
.mtile .deco{position:absolute;inset:0;color:#fff}
.mtile .k{position:relative;font-family:var(--mono);font-size:calc(8.5px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;opacity:.8}
.mtile h4{position:relative;font-size:calc(16px*var(--fs));margin-top:3px}
.mtile p{position:relative;font-size:calc(10.5px*var(--fs));opacity:.9;margin-top:4px;line-height:1.4}
.mtile .acc-row{position:relative;margin-top:auto;display:flex;align-items:center;gap:6px;padding-top:12px}
.mtile .av{width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-left:-7px}
.mtile .av:first-child{margin-left:0}
.mtile .mchip{font-family:var(--mono);font-size:calc(8px*var(--fs));background:rgba(255,255,255,.2);padding:3px 8px;border-radius:100px;}
.mtile .stat{font-family:var(--mono);font-size:calc(9px*var(--fs));margin-left:auto;opacity:.85}

/* tag filter */
.tags-bar{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 0 0;margin-top:6px}
.tags-bar::-webkit-scrollbar{display:none}
.tags-bar button{flex-shrink:0;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);border-radius:10px;padding:9px 16px;font-family:var(--hd);font-weight:600;font-size:calc(13px*var(--fs));cursor:pointer;white-space:nowrap}
.tags-bar button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}

/* hero carousel */
.hero-rail{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 6px;margin-top:13px;scrollbar-width:none}
.hero-rail::-webkit-scrollbar{display:none}
.hcard{flex-shrink:0;width:268px;scroll-snap-align:center;border-radius:var(--radius);overflow:hidden;position:relative;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;cursor:pointer}
.hcard .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hcard .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,9,28,.05) 40%,rgba(33,9,28,.82))}
.hcard .badge{position:absolute;top:13px;left:13px;font-family:var(--mono);font-size:calc(8.5px*var(--fs));letter-spacing:0.02em;background:var(--gold);color:#3a1020;padding:4px 10px;border-radius:100px}
.hcard .idx{position:absolute;top:13px;right:14px;font-family:var(--hd);font-weight:700;font-size:calc(22px*var(--fs));opacity:.85}
.hcard .ct{position:relative;padding:16px}
.hcard .hk{font-family:var(--mono);font-size:calc(8.5px*var(--fs));letter-spacing:0.02em;opacity:.85;text-transform:uppercase}
.hcard h3{font-size:calc(21px*var(--fs));margin-top:4px}
.hcard .meta{display:flex;align-items:center;gap:12px;margin-top:9px;font-family:var(--mono);font-size:calc(10px*var(--fs))}
.hcard .meta .pr{margin-left:auto;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:100px;}

/* popular places — list */
.poplist{margin:13px 0 0;display:flex;flex-direction:column}
.poprow{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--rule-2);cursor:pointer;align-items:center}
.poprow:last-child{border-bottom:0}
.poprow .th-img{width:74px;height:62px;border-radius:14px;flex-shrink:0;background-size:cover;background-position:center;position:relative;overflow:hidden}
.poprow .rk{font-family:var(--hd);font-weight:700;font-size:calc(15px*var(--fs));color:var(--ink-3);width:22px;flex-shrink:0;text-align:center}
.poprow .pc{flex:1;min-width:0}
.poprow .pc h4{font-size:calc(15px*var(--fs))}
.poprow .pc .m{font-family:var(--mono);font-size:calc(9.5px*var(--fs));color:var(--ink-3);margin-top:3px}
.poprow .pbadge{font-family:var(--mono);font-size:calc(7.5px*var(--fs));letter-spacing:0.02em;background:var(--gold);color:#3a1020;padding:3px 7px;border-radius:100px;margin-top:5px;display:inline-block}

/* events list */
.ev{display:flex;gap:13px;margin:0;padding:13px 0;border-bottom:1px solid var(--rule-2);align-items:center;cursor:pointer}
.ev .date{width:58px;flex-shrink:0;background:var(--grape);color:#fff;border-radius:12px;text-align:center;padding:9px 4px}
[data-theme="dark"] .ev .date{background:var(--accent)}
.ev .date small{display:block;font-family:var(--mono);font-size:calc(9px*var(--fs));opacity:.8}
.ev .date b{font-family:var(--hd);font-size:calc(17px*var(--fs))}
.ev .ec h4{font-size:calc(15px*var(--fs))}
.ev .ec p{font-size:calc(11.5px*var(--fs));color:var(--ink-3);margin-top:2px}
.ev .ego{margin-left:auto;color:var(--ink-3)}

/* services overview */
.svc{margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;position:relative;padding:18px 18px 12px;color:#fff;
  background:#2F133C linear-gradient(150deg,var(--grape),#4a2059)}
.svc .deco{position:absolute;inset:0;opacity:.35;background:radial-gradient(60% 70% at 88% 8%,rgba(228,35,105,.6),transparent 60%)}
.svc h3{position:relative;font-size:calc(19px*var(--fs))}
.svc .grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.svc .s{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer}
.svc .s .ic{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.svc .s span{font-size:calc(10.5px*var(--fs));text-align:center;line-height:1.2;font-weight:600;font-family:var(--hd)}
.svc .foot{position:relative;font-family:var(--mono);font-size:calc(9px*var(--fs));opacity:.7;margin-top:8px;text-align:center;letter-spacing:0.02em}

/* featured video */
.video{margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;position:relative;min-height:200px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.video .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.video .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,9,28,.2),rgba(33,9,28,.7))}
.video .play{position:relative;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:#fff}
.video .dur{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:calc(9px*var(--fs));background:rgba(0,0,0,.45);color:#fff;padding:4px 10px;border-radius:100px;}
.video .cap{position:absolute;left:16px;bottom:14px;color:#fff}
.video .cap h3{font-size:calc(18px*var(--fs))}
.video .cap .src{font-family:var(--mono);font-size:calc(8.5px*var(--fs));opacity:.8;margin-top:3px}

/* operator strip */
.operator{display:flex;align-items:center;gap:13px;margin:var(--gap) 0 0;border-radius:var(--radius);padding:15px 16px;cursor:pointer;
  border:1px dashed var(--ink-3)}
.operator .ic{width:42px;height:42px;border-radius:12px;background:var(--bg-2);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--rule)}
.operator .oc{flex:1}
.operator .k{font-family:var(--mono);font-size:calc(8.5px*var(--fs));letter-spacing:0.02em;text-transform:uppercase;color:var(--ink-3)}
.operator h4{font-size:calc(15px*var(--fs));margin-top:2px}
.operator .open{font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:0.02em;color:var(--accent);border:1px solid var(--accent);border-radius:100px;padding:7px 12px}

/* merchant wallet banner */
.merchwallet{margin:var(--gap) 0 0;border-radius:var(--radius);overflow:hidden;position:relative;padding:17px;color:#fff;cursor:pointer;
  background:#0e3b31 linear-gradient(135deg,#1E6B5A,#0e3b31)}
[data-tenant="udon"] .merchwallet{background:#5e2613 linear-gradient(135deg,#C2542C,#5e2613)}
.merchwallet .topr{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.merchwallet .badge{font-family:var(--mono);font-size:calc(8px*var(--fs));background:var(--gold);color:#3a1020;padding:4px 9px;border-radius:100px}
.merchwallet h3{font-size:calc(17px*var(--fs));margin-top:9px}
.merchwallet p{font-size:calc(10.5px*var(--fs));opacity:.85;margin-top:6px;line-height:1.45}

/* exec brief — exec only */
.exec-brief{display:none;margin:var(--gap) 0 0;border:1.5px solid var(--accent);border-radius:var(--radius);padding:18px;background:var(--glass-2);}
[data-access="exec"] .exec-brief{display:block}
.exec-brief .big{font-family:var(--hd);font-weight:700;font-size:calc(21px*var(--fs));margin-top:5px}
.exec-brief .acts{display:flex;gap:8px;margin-top:14px}
.exec-brief .acts button{flex:1;border:1px solid var(--accent);background:var(--surface);color:var(--accent);border-radius:12px;padding:11px;font-family:var(--body);font-weight:600;cursor:pointer;font-size:calc(11.5px*var(--fs))}
/* in exec mode trim heavy decorative blocks to keep it "1-screen-ish" */
[data-access="exec"] .exec-hide{display:none}

/* guided floating help — guided + elder */
.guided-help{display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--accent);color:#fff;border:0;border-radius:100px;padding:13px 22px;font-family:var(--body);font-weight:600;cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(228,35,105,.6);font-size:calc(13px*var(--fs));align-items:center;gap:8px}
[data-access="guided"] .guided-help,[data-access="elder"] .guided-help{display:inline-flex}

/* footer */
.foot{padding:34px var(--pad) 70px;text-align:center;border-top:1px solid var(--rule);margin-top:26px}
.foot .links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.foot a{font-family:var(--mono);font-size:calc(9.5px*var(--fs));text-transform:uppercase;letter-spacing:0.02em;color:var(--accent);text-decoration:none;border:1px solid var(--rule);border-radius:100px;padding:8px 14px}

/* elder: force single-column on grids that are too dense */
[data-access="elder"] .subgrid,[data-access="elder"] .moregrid{grid-template-columns:1fr}
[data-access="elder"] .svc .grid{grid-template-columns:repeat(2,1fr)}
[data-access="elder"] .wifi .creds{grid-template-columns:1fr}

/* gradient cards: paint gradient on a child .bg layer (robust against GPU raster-tiling dropout on tall pages) */
.gfix{position:relative}
.gfix>.bg{position:absolute;inset:0;z-index:0;border-radius:inherit}
.gfix>.deco{z-index:1}
.gfix>.wave{z-index:1}
.gfix>:not(.bg):not(.deco):not(.wave){position:relative;z-index:2}
/* inline <a> cards must be block so the absolute .bg fills the whole card (not just the padding strip) */
a.lotto,a.wallet,a.merchwallet{display:block}
.mood>.bg{background:linear-gradient(135deg,var(--accent),#6d1338)}
.trip>.bg{background:linear-gradient(120deg,var(--grape),var(--accent))}
.lotto>.bg{background:linear-gradient(135deg,#7d1840,var(--grape))}
.wallet>.bg{background:linear-gradient(135deg,var(--grape),var(--accent))}
.hotel>.bg{background:linear-gradient(135deg,#3a1630,var(--accent))}
.svc>.bg{background:linear-gradient(150deg,var(--grape),#4a2059)}
.merchwallet>.bg{background:linear-gradient(135deg,#1E6B5A,#0e3b31)}
[data-tenant="udon"] .merchwallet>.bg{background:linear-gradient(135deg,#C2542C,#5e2613)}
.mtile.t1>.bg{background:linear-gradient(150deg,var(--accent),#7d1840)}
.mtile.t2>.bg{background:linear-gradient(150deg,var(--grape),#4a2059)}
.mtile.t3>.bg{background:linear-gradient(150deg,#1E6B5A,#0e3b31)}
.mtile.t4>.bg{background:linear-gradient(150deg,#C2542C,#5e2613)}

/* ===== viewport preview (presentational only — ไม่กระทบ contract/blocks) ===== */
.vw-switch{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;gap:4px;padding:5px;border-radius:100px;
  background:var(--glass-2);border:1px solid var(--glass-brd);box-shadow:var(--glass-hi),var(--glass-shadow)}
.vw-switch button{border:0;background:none;color:var(--ink-2);width:40px;height:34px;border-radius:100px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vw-switch button[aria-pressed="true"]{background:var(--accent);color:#fff}
[data-vw="tablet"] .phone{max-width:768px}
[data-vw="desktop"] .phone{max-width:1040px}
[data-vw="tablet"] body,[data-vw="desktop"] body{background:radial-gradient(120% 55% at 50% -8%, color-mix(in oklab,var(--accent) 12%,var(--bg)), var(--bg) 58%)}
[data-vw="tablet"] .phone,[data-vw="desktop"] .phone{margin:24px auto 48px;min-height:auto;border:1px solid var(--rule);border-radius:30px;box-shadow:0 50px 120px -60px rgba(47,19,60,.55)}
/* keep chrome inside the framed device (no detached sticky in preview) */
[data-vw="tablet"] .top,[data-vw="tablet"] .access-bar,[data-vw="tablet"] .contents,
[data-vw="desktop"] .top,[data-vw="desktop"] .access-bar,[data-vw="desktop"] .contents{position:relative;top:auto}
/* progressively richer grids on bigger screens */
[data-vw="tablet"] .pop{grid-template-columns:repeat(3,1fr)}[data-vw="tablet"] .map .grid{grid-template-columns:repeat(5,1fr)}
[data-vw="desktop"] .pop{grid-template-columns:repeat(4,1fr)}
[data-vw="desktop"] .map .grid{grid-template-columns:repeat(5,1fr)}
[data-vw="desktop"] .moregrid{grid-template-columns:repeat(4,1fr)}
[data-vw="desktop"] .subgrid,[data-vw="desktop"] .split{grid-template-columns:repeat(2,1fr)}
/* slightly larger editorial measure on desktop */
[data-vw="desktop"] .cover{min-height:420px}
@media print{.vw-switch{display:none}}

/* ===== Give-Back zone (A12 · ใหม่ · วางใต้ Console/วิดีโอ) ===== */
.gb-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:var(--gap) 0 0}
.gb-tile{border-radius:var(--radius);padding:16px;cursor:pointer;min-height:122px;display:flex;flex-direction:column}
.gb-tile .ic{width:38px;height:38px;border-radius:12px;background:var(--bg-2);color:var(--accent);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;margin-bottom:auto}
.gb-tile h4{font-size:calc(15px*var(--fs));margin-top:12px}
.gb-tile p{font-size:calc(11px*var(--fs));color:var(--ink-2);margin-top:4px;line-height:1.4}
.gb-trust{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:13px 0 0;font-family:var(--mono);font-size:calc(9px*var(--fs));letter-spacing:.02em;color:var(--ink-3)}
.gb-trust .t{display:flex;align-items:center;gap:5px}
.gb-trust svg{width:12px;height:12px;color:var(--accent)}
.gb-trust b{color:var(--ink-2);font-weight:600}
[data-vw="desktop"] .gb-grid{grid-template-columns:repeat(4,1fr)}
[data-access="elder"] .gb-grid{grid-template-columns:1fr}

/* ===== Editor's Choice badge — gold-star (อิง motif ใน spec: ดาวทอง #FFE26B) ===== */
.hcard .badge, .poprow .pbadge, .imgcard .ic-cta.ec{
  display:inline-flex;align-items:center;gap:5px;border:0;font-weight:600;letter-spacing:.06em;
  background:linear-gradient(180deg,#FFE9A0,#EFC451);color:#5a2410;
  box-shadow:0 3px 10px -3px rgba(150,100,0,.55), inset 0 1px 0 rgba(255,255,255,.7)}
.hcard .badge svg, .poprow .pbadge svg, .imgcard .ic-cta.ec svg{width:11px;height:11px;flex-shrink:0;fill:#5a2410}
.poprow .pbadge{padding:4px 9px}

/* ===== Bottom dock (mobile tab bar เหมือน mirror · shared chrome) ===== */
.phone{padding-bottom:74px}
.dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:444px;z-index:70;
  display:flex;align-items:flex-end;justify-content:space-around;gap:2px;
  padding:9px 10px calc(10px + env(safe-area-inset-bottom,0)) 10px;
  background:var(--glass-2);border-top:1px solid var(--glass-brd);
  box-shadow:0 -12px 34px -20px rgba(47,19,60,.45), var(--glass-hi)}
.dock a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--ink-3);
  font-family:var(--hd);font-weight:600;font-size:calc(9px*var(--fs));white-space:nowrap}
.dock a[aria-current="true"]{color:var(--accent)}
.dock a svg{width:23px;height:23px}
.dock .mid{align-self:center}
.dock .mid .fab{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;border:3px solid var(--bg);box-shadow:0 10px 22px -7px rgba(228,35,105,.6)}
.dock .mid .fab b{font-family:var(--hd);font-weight:700;font-size:calc(13px*var(--fs));letter-spacing:.02em}
.dock .mid .fab svg{width:28px;height:28px}
[data-vw="tablet"] .dock{max-width:768px}
[data-vw="desktop"] .dock{max-width:1280px}
/* lift floating controls above the dock */
.vw-switch{bottom:84px}
[data-access="guided"] .guided-help,[data-access="elder"] .guided-help{bottom:82px}
@media print{.dock{display:none}}

/* rating star (B1: glyph → SVG) */
.rstar{width:1em;height:1em;display:inline-block;vertical-align:-0.12em;color:#EFC451;flex-shrink:0}
.hcard .meta span{display:inline-flex;align-items:center;gap:3px}

/* desktop: 2-col lists */
[data-vw="desktop"] .poplist{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-items:start}
[data-vw="desktop"] #sc-1-home-events-list>div{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
[data-vw="desktop"] #sc-1-home-events-list .ev{margin:0}

/* ===== Desktop: ทั้งหน้าเป็น 2 คอลัมน์ (magazine layout) ===== */
[data-vw="desktop"] .phone{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start}
[data-vw="desktop"] .phone>.top,
[data-vw="desktop"] .phone>.access-bar,
[data-vw="desktop"] .phone>.header-spacer,
[data-vw="desktop"] .phone>.cover,
[data-vw="desktop"] .phone>.contents,
[data-vw="desktop"] .phone>.trust,
[data-vw="desktop"] .phone>.exec-brief,
[data-vw="desktop"] .phone>.zone-rule,
[data-vw="desktop"] .phone>.foot{grid-column:1/-1}
/* บล็อกครึ่งกว้างแล้ว → list ภายในกลับเป็นคอลัมน์เดียว */
[data-vw="desktop"] .poplist{display:flex}
[data-vw="desktop"] #sc-1-home-events-list>div{display:block}

/* desktop: services-overview เต็มแถว · 8 บริการเรียงแถวเดียว */
[data-vw="desktop"] #sc-1-home-services-overview{grid-column:1/-1}
[data-vw="desktop"] .svc .grid{grid-template-columns:repeat(8,1fr)}

/* ===== Editor's Choice badge = dark pill + bookmark ribbon (เหมือน mirror) ===== */
.hcard .badge,.poprow .pbadge{background:linear-gradient(180deg,#4a1731,#321029);color:#fff;border:0;box-shadow:0 4px 12px -3px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.hcard .badge svg,.poprow .pbadge svg{fill:#FFD36B}
.hcard .badge{left:auto;right:13px}
.hcard .idx{display:none}
.bookmark{position:absolute;top:0;z-index:4;color:var(--pink);line-height:0}
.bookmark svg{filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.hcard .bookmark{left:14px;color:#FF2E7E}
.hcard .bookmark svg{width:34px;height:46px}
.poprow .th-img .bookmark{left:6px}
.poprow .th-img .bookmark svg{width:15px;height:20px}

/* hero meta: ที่ตั้ง/เวลา อยู่บรรทัดเดียว ไม่ตัดคำ */
.hcard .meta{flex-wrap:wrap;row-gap:2px}
.hcard .meta span{white-space:nowrap}
/* popular EC badge: พื้นน้ำเงิน · ขอบเหลือง (ตามที่ขอ) */
.poprow .pbadge{background:#2C4B9B;border:1.5px solid #F0DC7A;color:#fff;box-shadow:none}
.poprow .pbadge svg{fill:#F0DC7A}

/* popular thumbnail ribbon — ใหญ่ขึ้น · น้ำเงินเข้ม */
.poprow .th-img .bookmark{color:#1E3A8A;left:7px}
.poprow .th-img .bookmark svg{width:21px;height:28px}

/* trust ribbon — จัดไอคอน+label กึ่งกลางแนวตั้ง */
.trust{align-items:center}
.trust .tag{align-items:center;line-height:1}
.trust .tag svg{flex-shrink:0;display:block}
.trust .tag b{line-height:1}

/* ============ POLISH PACK (visual/JS only · ไม่แตะ contract) ============ */
/* 1 · micro-interactions */
.imgcard,.hcard,.coupon,.gb-tile,.subtile,.mtile,.merch,.trip,.wallet,.lotto,.video,.operator,.merchwallet,.feature,.poprow,.ev,.btn,.sq-btn,.pillbtn,.iconbtn,.dock a,.tags-bar button,.access-bar button,.contents a,.gbcta,.mood{
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,background-color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent}
@media(hover:hover){
 .imgcard:hover,.hcard:hover,.coupon:hover,.gb-tile:hover,.subtile:hover,.mtile:hover,.merch:hover,.trip:hover,.wallet:hover,.lotto:hover,.video:hover,.operator:hover,.merchwallet:hover,.feature:hover{transform:translateY(-3px)}
 .btn:hover,.gbcta:hover{filter:brightness(1.05)}
}
.imgcard:active,.hcard:active,.coupon:active,.gb-tile:active,.subtile:active,.mtile:active,.merch:active,.trip:active,.wallet:active,.lotto:active,.video:active,.operator:active,.merchwallet:active,.poprow:active,.ev:active,.btn:active,.sq-btn:active,.tags-bar button:active,.access-bar button:active,.contents a:active,.gbcta:active,.mood:active{transform:scale(.97)}
.dock a:active{transform:scale(.9)}
.dock a[aria-current="true"] svg{transform:translateY(-1px)}

/* 2 · entrance fade-up (gated by html.anim → ถ้า JS ไม่ทำงาน = แสดงปกติ) */
html.anim .block{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
html.anim .block.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.anim .block{opacity:1;transform:none;transition:none}}

/* 3 · skeleton shimmer สำหรับ placeholder */
.ph{position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.38) 50%,transparent 68%);transform:translateX(-100%);animation:shimmer 1.9s infinite}
[data-theme="dark"] .ph::after{background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.09) 50%,transparent 68%)}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* 4 · cover premium — display ใหญ่ขึ้น + เส้นทองบาง */
.cover .ctitle{font-size:calc(53px*var(--fs));letter-spacing:-0.03em}
.cover::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:78px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}

/* 5 · depth + accent hairline บนสุด */
.top{box-shadow:var(--glass-hi),0 1px 0 color-mix(in oklab,var(--accent) 20%,transparent)}
.imgcard,.hcard{box-shadow:0 18px 40px -26px rgba(47,19,60,.55)}

/* mood card: dots ชิดซ้าย (แนวดิ่งเดียวกับข้อความ) · ลงล่างสุดใต้ปุ่ม
   ใช้ #moodDots (id) บังคับ absolute ชนะ .gfix>:not() ที่ตั้ง position:relative */
#moodDots{position:absolute;top:auto;bottom:13px;left:20px;right:auto;z-index:3}
.mood{padding-bottom:34px}
.mood .moods{padding-right:0}

/* desktop: คอลัมน์เดียวจัดกึ่งกลาง (แทน 2-col grid ที่ยืดเกิน) */
[data-vw="desktop"] .phone{display:block;grid-template-columns:none;max-width:720px}
[data-vw="desktop"] .svc .grid{grid-template-columns:repeat(4,1fr)}
[data-vw="desktop"] #sc-1-home-services-overview{grid-column:auto}

/* wifi: ลดช่องว่างด้านบน (มีแถบคั่นแล้ว) */
#sc-1-home-wifi{padding-top:2px}
#sc-1-home-wifi .wifi{margin-top:10px}

/* desktop 2-col (multi-column · balanced · chrome เต็มแถว) */
[data-vw="desktop"] .phone{display:block;column-count:2;column-gap:24px;max-width:1280px;padding-bottom:88px}
[data-vw="desktop"] .phone>.top,
[data-vw="desktop"] .phone>.access-bar,
[data-vw="desktop"] .phone>.header-spacer,
[data-vw="desktop"] .phone>.cover,
[data-vw="desktop"] .phone>.contents,
[data-vw="desktop"] .phone>.trust,
[data-vw="desktop"] .phone>.exec-brief,
[data-vw="desktop"] .phone>.zone-rule,
[data-vw="desktop"] .phone>.foot,
[data-vw="desktop"] #sc-1-home-services-overview{column-span:all}
[data-vw="desktop"] .block{break-inside:avoid}
[data-vw="desktop"] .svc .grid{grid-template-columns:repeat(8,1fr)}

/* desktop: คอลัมน์เดียว (ไม่ 2-col ทุก block) — 2-col เฉพาะแถวที่ระบุ */
[data-vw="desktop"] .phone{display:block;column-count:1;max-width:960px}
[data-vw="desktop"] .dock{max-width:960px}
[data-vw="desktop"] .poplist{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-items:start}
[data-vw="desktop"] #sc-1-home-events-list>div{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
[data-vw="desktop"] #sc-1-home-events-list .ev{margin:0}
[data-vw="desktop"] .svc .grid{grid-template-columns:repeat(4,1fr)}

/* desktop: fit-width เต็มจอ (ไม่ตีกรอบ) */
[data-vw="desktop"] .phone{max-width:none;margin:0;border-radius:0;border-left:0;border-right:0}
[data-vw="desktop"] .dock{max-width:none}

/* MSG-15 · zones container — Code ใส่ el.style.order reorder ได้ (default order:0 = คงลำดับ DOM) */
.zones{display:flex;flex-direction:column}
/* MSG-14 · per-item image slot (hydrate เติม photo_url · demo src = fallback) */
.hcard .cardimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0}
.poprow .th-img .rowimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}