/* Thailand Living Insight — shared styles for the hub and every topic page */
:root{
  --bg:#F4F1EA; --surface:#FFFFFF; --ink:#1A2321; --muted:#5E6A66; --line:#E1DBCF;
  --brand:#23463F; --brand-soft:#E2ECE7; --warn:#A8461F; --warn-soft:#F8E6DC; --ok:#2F7A4F; --ok-soft:#E1F1E6;
  --tc:#23463F; --tc-soft:#E2ECE7;
  --shadow:0 1px 2px rgba(20,30,28,.06),0 6px 24px rgba(20,30,28,.06);
  --r:14px;
  --serif:"Fraunces","IBM Plex Sans Thai",Georgia,serif;
  --sans:"IBM Plex Sans Thai","Noto Sans KR","Noto Sans JP","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1513; --surface:#16201D; --ink:#E6EEEA; --muted:#97A7A1; --line:#2A3833;
    --brand:#8CC7B1; --brand-soft:#1D2E29; --warn:#F0A07C; --warn-soft:#3A241B; --ok:#86D3A5; --ok-soft:#1B3125;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 24px rgba(0,0,0,.25); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1513; --surface:#16201D; --ink:#E6EEEA; --muted:#97A7A1; --line:#2A3833;
  --brand:#8CC7B1; --brand-soft:#1D2E29; --warn:#F0A07C; --warn-soft:#3A241B; --ok:#86D3A5; --ok-soft:#1B3125;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 24px rgba(0,0,0,.25); color-scheme:dark;
}
/* topic colours (light / dark) */
body[data-topic="wellness"]{--tc:#3F7D5C;--tc-soft:#E3F0E8}
body[data-topic="smarthome"]{--tc:#3D55B4;--tc-soft:#E5E9F8}
body[data-topic="relocate"]{--tc:#B4632D;--tc-soft:#F8E9DE}
body[data-topic="eec"]{--tc:#1F5E86;--tc-soft:#E0ECF4}
body[data-topic="buying"]{--tc:#8A6A1C;--tc-soft:#F5EDD6}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body[data-topic="wellness"]{--tc:#86C9A2;--tc-soft:#1A2D22}
  :root:not([data-theme="light"]) body[data-topic="smarthome"]{--tc:#9DADF0;--tc-soft:#1E2440}
  :root:not([data-theme="light"]) body[data-topic="relocate"]{--tc:#EBA57A;--tc-soft:#35231A}
  :root:not([data-theme="light"]) body[data-topic="eec"]{--tc:#8EC3E6;--tc-soft:#16283A}
  :root:not([data-theme="light"]) body[data-topic="buying"]{--tc:#E0C16F;--tc-soft:#302814}
  :root:not([data-theme="light"]) body[data-topic="hub"]{--tc:#8CC7B1;--tc-soft:#1D2E29}
}
:root[data-theme="dark"] body[data-topic="wellness"]{--tc:#86C9A2;--tc-soft:#1A2D22}
:root[data-theme="dark"] body[data-topic="smarthome"]{--tc:#9DADF0;--tc-soft:#1E2440}
:root[data-theme="dark"] body[data-topic="relocate"]{--tc:#EBA57A;--tc-soft:#35231A}
:root[data-theme="dark"] body[data-topic="eec"]{--tc:#8EC3E6;--tc-soft:#16283A}
:root[data-theme="dark"] body[data-topic="buying"]{--tc:#E0C16F;--tc-soft:#302814}
:root[data-theme="dark"] body[data-topic="hub"]{--tc:#8CC7B1;--tc-soft:#1D2E29}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--sans);overflow-x:hidden}
a{color:var(--tc)}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar ------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:12px;min-height:58px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--brand);display:grid;place-items:center}
.logo-mark svg{width:18px;height:18px;stroke:var(--bg)}
.logo b{font:600 16px/1 var(--serif);letter-spacing:.02em;display:block}
.logo small{font:500 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.back{display:none;align-items:center;gap:6px;margin-left:auto;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back.on{display:inline-flex}
.back:hover{border-color:var(--tc)}
.langs{display:flex;gap:2px;margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:3px}
.back.on + .langs{margin-left:0}
.langs button{border:0;background:none;padding:4px 10px;border-radius:99px;font-size:14.5px;cursor:pointer;color:var(--muted)}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
@media (max-width:520px){.logo small{display:none}.back span.lbl{display:none}}

/* topic tabs ---------------------------------------------------- */
.tabs{border-bottom:1px solid var(--line);background:var(--bg)}
.tabs-in{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tab{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15px;background:var(--surface)}
.tab svg{width:16px;height:16px}
.tab[aria-current="page"]{background:var(--tc);border-color:var(--tc);color:#fff}
:root[data-theme="dark"] .tab[aria-current="page"]{color:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tab[aria-current="page"]{color:var(--bg)}}

/* hero ---------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:44px 0 36px;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 400px at 85% -10%,var(--tc-soft),transparent 70%);pointer-events:none}
.hero-in{position:relative;display:grid;gap:22px}
@media (min-width:880px){.hero-in{grid-template-columns:1.35fr 1fr;align-items:end}}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tc)}
.kicker svg{width:18px;height:18px}
h1{font:600 clamp(30px,5.4vw,52px)/1.12 var(--serif);margin:14px 0 14px;letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:clamp(16px,2vw,18.5px);color:var(--muted);margin:0;max-width:62ch;text-wrap:pretty}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;font-size:14.5px;color:var(--muted)}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 12px;box-shadow:var(--shadow)}
.stat b{display:block;font:600 clamp(22px,3.4vw,30px)/1.1 var(--serif);color:var(--tc);letter-spacing:-.01em}
.stat span{display:block;font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:6px}
.stat sup a,.ref{font:500 12px/1 var(--mono);text-decoration:none;color:var(--muted);vertical-align:super;margin-left:2px}

/* sections ------------------------------------------------------ */
main{padding-bottom:30px}
.sec{padding:40px 0 8px}
.sec-hd{display:flex;gap:14px;align-items:baseline;margin-bottom:16px}
.sec-no{font:500 14.5px/1 var(--mono);color:var(--tc);flex-shrink:0;padding-top:4px}
h2{font:600 clamp(22px,3.2vw,30px)/1.25 var(--serif);margin:0;letter-spacing:-.005em;text-wrap:balance}
.sec-intro{color:var(--muted);margin:-4px 0 18px;max-width:70ch}
p{margin:0 0 12px}
.prose{max-width:72ch}
.prose p:last-child{margin-bottom:0}

.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.card-ic{width:38px;height:38px;border-radius:11px;background:var(--tc-soft);display:grid;place-items:center;margin-bottom:6px}
.card-ic svg{width:21px;height:21px;stroke:var(--tc)}
.card h3{font:600 17px/1.35 var(--sans);margin:0}
.card p{font-size:15.5px;color:var(--muted);margin:0}
.card ul{margin:4px 0 0;padding-left:18px;font-size:15.5px;color:var(--muted)}
.card li{margin:3px 0}
.tag{align-self:flex-start;font:600 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--brand-soft);color:var(--brand);margin-top:auto}

.callout{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);background:var(--tc-soft);border:1px solid color-mix(in srgb,var(--tc) 25%,transparent);margin:6px 0 4px;font-size:16px}
.callout.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.callout svg{width:22px;height:22px;flex-shrink:0;stroke:var(--tc);margin-top:2px}
.callout.warn svg{stroke:var(--warn)}
.callout .ct{display:block;margin-bottom:2px}
.callout p{margin:0}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:15.5px}
th,td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
th{font:600 13.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:color-mix(in srgb,var(--bg) 60%,var(--surface))}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}
.tbl-note{font-size:14.5px;color:var(--muted);margin-top:8px}

.chip{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--mono);letter-spacing:.04em;padding:5px 8px;border-radius:99px;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-building{background:#E3EEF9;color:#1F5E86}.st-investing{background:#EDE6F7;color:#5A3A96}.st-delayed{background:var(--warn-soft);color:var(--warn)}.st-operating{background:var(--ok-soft);color:var(--ok)}.st-approved{background:#EFE8F8;color:#6640A8}.st-planned{background:#ECEDEA;color:#5E6A66}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st-building{background:#16283A;color:#8EC3E6}:root:not([data-theme="light"]) .st-investing{background:#271D38;color:#C3A8F0}:root:not([data-theme="light"]) .st-approved{background:#271D38;color:#C3A8F0}:root:not([data-theme="light"]) .st-planned{background:#232B28;color:#A9B5B0}}
:root[data-theme="dark"] .st-building{background:#16283A;color:#8EC3E6}:root[data-theme="dark"] .st-investing{background:#271D38;color:#C3A8F0}:root[data-theme="dark"] .st-approved{background:#271D38;color:#C3A8F0}:root[data-theme="dark"] .st-planned{background:#232B28;color:#A9B5B0}

.tl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tl li{display:grid;grid-template-columns:1fr;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
@media (min-width:720px){.tl li{grid-template-columns:200px 1fr;gap:16px}}
.tl .when{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tl .when small{font:500 14px/1.3 var(--mono);color:var(--muted)}
.tl h3{margin:0 0 4px;font:600 16px/1.35 var(--sans)}
.tl p{margin:0;font-size:15.5px;color:var(--muted)}

.pc{display:grid;gap:12px}
@media (min-width:760px){.pc{grid-template-columns:1fr 1fr}}
.pc > div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.pc h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 16px/1.3 var(--sans)}
.pc h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--ok)}
.pc .con h3::before{background:var(--warn)}
.pc ul{margin:0;padding-left:18px;font-size:15.5px;color:var(--muted)}
.pc li{margin:6px 0}

.check{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.check li{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15.5px}
.check li::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:3px;border-radius:5px;border:2px solid var(--tc)}

.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:600 14.5px/1 var(--mono);color:var(--tc);margin-bottom:8px}
.steps h3{margin:0 0 4px;font:600 16px/1.35 var(--sans)}
.steps p{margin:0;font-size:15.5px;color:var(--muted)}

/* widgets ------------------------------------------------------- */
.widget{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.w-hd{padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--tc-soft),transparent)}
.w-hd h3{margin:0;font:600 17px/1.3 var(--sans)}
.w-hd p{margin:4px 0 0;font-size:15px;color:var(--muted)}
.w-bd{padding:16px 18px;display:grid;gap:16px}
@media (min-width:860px){.w-bd.split{grid-template-columns:1.1fr 1fr;align-items:start}}
.q{display:grid;gap:6px}
.q > span{font-weight:600;font-size:15.5px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:6px 12px;font-size:15px;cursor:pointer}
.opt[aria-pressed="true"]{background:var(--tc);border-color:var(--tc);color:#fff}
.field{display:grid;gap:4px;font-size:15px}
.field input,.field select{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 11px;width:100%}
.fields{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.res{display:grid;gap:8px}
.res-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.res-card.best{border-color:var(--tc);background:var(--tc-soft)}
.res-card h4{margin:0 0 3px;font:600 15.5px/1.35 var(--sans);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.res-card p{margin:0;font-size:15px;color:var(--muted)}
.fit{font:600 12.5px/1 var(--mono);padding:4px 7px;border-radius:6px;background:var(--surface);color:var(--tc);border:1px solid var(--tc)}
.sum{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sum div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:15.5px}
.sum div:last-child{border-bottom:0}
.sum .tot{background:var(--tc-soft);font-weight:600}
.sum .num{font-family:var(--mono);white-space:nowrap}
.sum .h{background:var(--bg);font:600 13.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.picks{display:grid;gap:6px}
.pick{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--bg)}
.pick input{width:18px;height:18px;accent-color:var(--tc)}
.pick b{font-weight:600;font-size:15.5px;display:block}
.pick small{color:var(--muted);font-size:14px}
.pick .num{font:500 14px/1.2 var(--mono);color:var(--muted);text-align:right;white-space:nowrap}
.pick:has(input:checked){border-color:var(--tc);background:var(--tc-soft)}
.meter{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--tc);border-radius:99px;transition:width .3s}
.big{font:600 34px/1 var(--serif);color:var(--tc)}
.w-note{font-size:14px;color:var(--muted);margin:0}

.map svg{width:100%;height:auto;display:block}
.map .lbl{font:500 17px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.map .sub{font:400 12px var(--sans);fill:var(--muted)}
.map .road{stroke:var(--muted);stroke-width:2;fill:none;opacity:.55}
.map .rail{stroke:var(--warn);stroke-width:2.5;fill:none;stroke-dasharray:6 5}
.map .coast{fill:var(--tc-soft);stroke:none}
.map .pt{fill:var(--surface);stroke:var(--tc);stroke-width:2.5}
.map .pt.home{fill:var(--tc)}
.map .proj{cursor:pointer}
.map .proj circle{transition:r .2s}
.map .proj.on circle{stroke-width:4}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14.5px;color:var(--muted)}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-legend i{display:inline-block;width:18px;height:0;border-top:2.5px solid var(--muted)}
.map-legend i.r{border-top:2.5px dashed var(--warn)}

/* hub ----------------------------------------------------------- */
.topics{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tcard{--tc:var(--c);position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,border-color .15s;overflow:hidden}
.tcard:hover{transform:translateY(-2px);border-color:var(--c)}
.tcard::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:var(--c);opacity:.09}
.tcard .card-ic{background:color-mix(in srgb,var(--c) 14%,transparent)}
.tcard .card-ic svg{stroke:var(--c)}
.tcard small{font:600 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.tcard h3{margin:0;font:600 20px/1.3 var(--serif)}
.tcard p{margin:0;color:var(--muted);font-size:15.5px}
.tcard .go{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;color:var(--c)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.facts li{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:15.5px}
.facts li b{font:600 14.5px/1.6 var(--mono);color:var(--tc);flex-shrink:0;min-width:64px}
.reports{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.report{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.report:hover{border-style:solid;border-color:var(--tc)}
.report b{font-weight:600}
.report small{color:var(--muted);font-size:14.5px}

/* property CTA ------------------------------------------------- */
.cta{margin-top:40px;border-radius:20px;padding:24px;background:var(--ink);color:var(--bg);display:grid;gap:16px}
@media (min-width:760px){.cta{grid-template-columns:1.3fr 1fr;align-items:center;padding:30px}}
.cta h2{color:var(--bg)}
.cta p{margin:6px 0 0;opacity:.8}
.cta-links{display:grid;gap:8px}
.cta a.btn{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border-radius:12px;background:var(--bg);color:var(--ink);text-decoration:none;font-weight:600}
.cta a.btn small{display:block;font-weight:400;color:var(--muted);font-size:14px}
.cta a.btn.ghost{background:transparent;color:var(--bg);border:1px solid color-mix(in srgb,var(--bg) 35%,transparent)}
.cta a.btn.ghost small{color:var(--bg);opacity:.7}

.next{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:16px}
.next a{--tc:var(--c);display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink);font-weight:500;font-size:15.5px}
.next a svg{width:18px;height:18px;stroke:var(--c);flex-shrink:0}
.next a:hover{border-color:var(--c)}

/* sources + footer -------------------------------------------- */
.srcs{margin:0;padding-left:22px;font-size:15px;color:var(--muted);display:grid;gap:6px}
.srcs li:target{color:var(--ink);font-weight:500}
.srcs a{word-break:break-word}
.disc{font-size:14.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:22px}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:8px 14px;font-size:15px;cursor:pointer;color:var(--ink);text-decoration:none}
.tbtn svg{width:16px;height:16px}
.tbtn:hover{border-color:var(--tc)}
.foot{border-top:1px solid var(--line);padding:26px 0 40px;margin-top:20px;font-size:14.5px;color:var(--muted)}
.credit{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px}
.credit img{height:30px;width:auto;border-radius:6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;font-size:15px;opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%)}
.fallback-note{font-size:14.5px;color:var(--muted);background:var(--tc-soft);border-radius:10px;padding:8px 12px;margin-top:14px;display:none}
.fallback-note.on{display:block}

@media print{
  .topbar,.tabs,.tools,.cta,.next,.widget .opts{display:none!important}
  body{background:#fff;color:#000}
  .card,.stat,.tl li,.pc>div,.widget{box-shadow:none}
}

html[lang="th"] h1{line-height:1.32}
html[lang="th"] h2{line-height:1.4}
.wrap-c{margin-top:28px}
.sum-box{position:sticky;top:76px}
@media (max-width:859px){.sum-first .sum-box{order:-1;top:64px;z-index:3}.sum-first .sum-box .res-card{box-shadow:var(--shadow)}}
@media (max-width:520px){.logo b{display:none}.back{max-width:none;flex:1;justify-content:center}}

/* pictures (hub) */
.hub-photo{margin:28px 0 0;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#0E1513}
.hub-photo img{display:block;width:100%;aspect-ratio:2.4;object-fit:cover}
.hub-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 12px;background:linear-gradient(transparent,rgba(8,14,12,.72));color:#fff;font-size:14px}
@media (max-width:620px){.hub-photo img{aspect-ratio:16/10}}
.tcard.has-img{padding-top:0}
.tcard.has-img::after{display:none}
.tcard-img{display:block;margin:0 -22px 8px;aspect-ratio:16/9;overflow:hidden;background:var(--line)}
.tcard-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tcard:hover .tcard-img img{transform:scale(1.04)}
.tcard.has-img .card-ic{margin-top:-30px;position:relative;z-index:1;background:var(--surface);border:1px solid var(--line)}
/* deep-dive links grouped by topic */
.rgroup{--tc:var(--c);margin-top:18px}
.rgroup h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 17px/1.3 var(--serif)}
.rgroup h3 svg{width:20px;height:20px;stroke:var(--c)}
.rgroup h3 a{color:var(--ink);text-decoration:none}.rgroup h3 a:hover{color:var(--c)}
.report .go{margin-top:auto;padding-top:4px;font-size:14px;font-weight:600;color:var(--tc,var(--ink))}
/* six language buttons: never wrap a label; scroll sideways on narrow screens */
.langs{min-width:0;overflow-x:auto;scrollbar-width:none}
.langs::-webkit-scrollbar{display:none}
.langs button{white-space:nowrap;flex-shrink:0}
@media (max-width:520px){.langs button{padding:4px 8px;font-size:13.5px}.langs{max-width:calc(100vw - 80px)}.back.on{font-size:0;gap:0;padding:7px 9px;flex-shrink:0}.back.on svg{width:18px;height:18px}.back.on{flex:0 0 auto}.back.on + .langs{max-width:calc(100vw - 132px)}}