:root, :root[data-theme="light"] {
  --bg:#f4f6fb; --bg-glow1:rgba(246,190,60,.22); --bg-glow2:rgba(80,110,255,.10);
  --card:#ffffff; --card-hover:#ffffff; --soft:#f1f3f9; --soft2:#e9ecf5;
  --line:rgba(22,28,64,.08); --line2:rgba(22,28,64,.16);
  --text:#141833; --muted:#6b718f; --dim:#c3c7d8;
  --top:#1b2466; --bottom:#d4213d;
  --gold:#e8a91c; --gold-hi:#ffe08a; --gold-lo:#c47f08; --gold-text:#a86a00;
  --green:#14a46c; --green-bg:#e3f6ee; --red:#e5304a; --red-bg:#fde8eb;
  --shadow:0 1px 2px rgba(20,28,70,.05), 0 8px 24px rgba(20,28,70,.06);
  --shadow-hover:0 2px 4px rgba(20,28,70,.06), 0 14px 34px rgba(20,28,70,.10);
  --glass:rgba(244,246,251,.82);
  --next-bg:linear-gradient(135deg,#fff4f5,#fff9ea);
  --box:#ffffff;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0b0d18; --bg-glow1:rgba(246,198,80,.14); --bg-glow2:rgba(255,77,97,.10);
  --card:#151931; --card-hover:#1a1f3b; --soft:#1c2140; --soft2:#232849;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.14);
  --text:#f1f2f9; --muted:#8f95b4; --dim:#454b6c;
  --top:#f6c650; --bottom:#ff7d8c;
  --gold:#f6c650; --gold-hi:#fff1c2; --gold-lo:#c8871a; --gold-text:#f6c650;
  --green:#3ddc9a; --green-bg:rgba(61,220,154,.12); --red:#ff4d61; --red-bg:rgba(255,77,97,.14);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25);
  --shadow-hover:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px rgba(0,0,0,.4);
  --glass:rgba(11,13,24,.8);
  --next-bg:linear-gradient(135deg,rgba(255,77,97,.16),rgba(246,198,80,.07));
  --box:rgba(0,0,0,.25);
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; color:var(--text); font-family:Anuphan, sans-serif;
  background:
    radial-gradient(900px 480px at 10% -12%, var(--bg-glow1), transparent 60%),
    radial-gradient(700px 420px at 100% -5%, var(--bg-glow2), transparent 60%),
    var(--bg);
  background-repeat:no-repeat; background-color:var(--bg);
  transition:background-color .3s, color .3s;
}
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }

/* ---------- top bar ---------- */
.bar { display:flex; align-items:center; gap:10px; padding:16px 0; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; margin-right:auto; white-space:nowrap; }
.logo b { color:var(--gold-text); }
.live { display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:99px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); font-size:12px; color:var(--muted); white-space:nowrap; }
.live i { width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; }
.live.on i { background:var(--green); animation:ring 2s infinite; }
.live.on strong { color:var(--green); font-weight:600; }
@keyframes ring { 0% { box-shadow:0 0 0 0 rgba(20,164,108,.5); } 70%,100% { box-shadow:0 0 0 8px rgba(20,164,108,0); } }
.theme-btn { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px; cursor:pointer; color:var(--text);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:.2s; }
.theme-btn:hover { border-color:var(--line2); }
.theme-btn svg { width:18px; height:18px; }
.theme-btn .sun { display:none; }
[data-theme="dark"] .theme-btn .sun { display:block; }
[data-theme="dark"] .theme-btn .moon { display:none; }

/* ---------- hero ---------- */
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:16px; padding:6px 0 20px; }
.panel { background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:22px; padding:22px; position:relative; overflow:hidden; }
.eyebrow { font-size:12px; letter-spacing:1.2px; color:var(--muted); }
.hero h1 { margin:6px 0 2px; font-size:clamp(26px,4vw,38px); line-height:1.2; font-weight:700; }
.clock { font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums; }
.progress { margin-top:18px; }
.progress-top { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:8px; }
.progress-top strong { color:var(--text); font-size:15px; }
.track { height:8px; border-radius:99px; background:var(--soft2); overflow:hidden; }
.fill { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi)); transition:width .8s cubic-bezier(.2,.8,.2,1); }

.next { background:var(--next-bg), var(--card); border-color:rgba(229,48,74,.18); }
.next::after { content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, var(--bg-glow1), transparent 70%); pointer-events:none; }
.next-name { display:flex; align-items:center; gap:10px; margin-top:10px; font-size:20px; font-weight:600; }
.next-meta { color:var(--muted); font-size:13px; margin-top:2px; }
.count { display:flex; gap:8px; margin-top:16px; position:relative; z-index:1; }
.count div { flex:1; text-align:center; padding:10px 0 8px; border-radius:14px; background:var(--box); border:1px solid var(--line); }
.count strong { display:block; font-size:30px; line-height:1.1; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.count small { font-size:11px; color:var(--muted); }
.due-msg { display:none; margin:0; flex:1; align-items:center; justify-content:center; gap:10px; min-height:66px; border-radius:14px;
  background:var(--red-bg); border:1px solid rgba(229,48,74,.3); color:var(--red); font-weight:500; }
.due-msg i { width:9px; height:9px; border-radius:50%; background:var(--red); animation:blink 1s infinite; }
.count.due div { display:none; }
.count.due .due-msg { display:flex; }

/* ---------- toolbar ---------- */
.tools { position:sticky; top:0; z-index:5; padding:10px 16px; background:var(--glass);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.tools-in { max-width:1148px; margin:0 auto; display:flex; gap:10px; align-items:center; }
.chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; font:inherit; font-size:13px; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:99px; padding:7px 14px; cursor:pointer; transition:.2s; }
.chip:hover { color:var(--text); border-color:var(--line2); }
.chip.on { color:#3a2400; font-weight:600; border-color:transparent; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 4px 12px rgba(232,169,28,.3); }
.chip em { font-style:normal; opacity:.55; margin-left:4px; }
.search { flex:none; width:210px; position:relative; }
.search input { width:100%; font:inherit; font-size:13px; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:99px; padding:8px 14px 8px 34px; outline:none; transition:.2s; }
.search input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,169,28,.18); }
.search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted); pointer-events:none; }

/* ---------- sections ---------- */
section.board { padding-top:24px; }
.board-h { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.board-h h2 { margin:0; font-size:18px; font-weight:600; }
.board-h span { font-size:12px; color:var(--muted); background:var(--soft); padding:3px 10px; border-radius:99px; }
.board-h::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line2),transparent); }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }

/* ---------- card ---------- */
.card { position:relative; border-radius:18px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  overflow:hidden; transition:transform .25s, box-shadow .25s, background .25s; }
.card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--soft2); }
.card.confirmed::before { background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi)); }
.card.soon::before { background:var(--red); animation:blink 1.2s infinite; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); background:var(--card-hover); }
.card.flash { animation:flash 2.6s ease-out; }
@keyframes flash { 0% { box-shadow:0 0 0 3px var(--gold), 0 0 40px rgba(232,169,28,.5); transform:scale(1.02); } }

.c-head { display:flex; align-items:center; gap:10px; padding:15px 14px 0; }
.flag { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:20px; background:var(--soft); flex:none; }
.c-title { flex:1; min-width:0; }
.c-name { font-weight:600; font-size:15px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-meta { font-size:12px; color:var(--muted); }
.status { flex:none; font-size:11px; font-weight:500; padding:4px 9px; border-radius:99px; display:flex; align-items:center; gap:5px; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.confirmed { color:var(--green); background:var(--green-bg); }
.status.pending { color:var(--muted); background:var(--soft); }
.status.soon { color:#fff; background:var(--red); }
.status.soon::before { animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.25; } }

.nums { display:grid; grid-template-columns:1fr 1fr; margin:14px 14px 0; border-radius:14px; background:var(--soft); }
.nums > div { text-align:center; padding:10px 6px 8px; }
.nums > div + div { border-left:1px dashed var(--line2); }
.nums small { display:block; font-size:12px; color:var(--muted); }
.n { display:block; font-size:34px; line-height:1.25; font-weight:700; letter-spacing:4px; padding-left:4px; font-variant-numeric:tabular-nums; color:var(--top); }
.bottom .n { color:var(--bottom); }
.n.empty { color:var(--dim); }
.n.pop { animation:pop .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes pop { 0% { transform:scale(1.7); opacity:0; } }

.c-foot { display:flex; justify-content:space-between; align-items:center; padding:10px 14px 12px; font-size:12px; color:var(--muted); }
.c-foot .cd { color:var(--red); font-weight:500; }
.copy { font:inherit; font-size:12px; color:var(--muted); background:none; border:0; padding:2px 0; cursor:pointer; display:flex; align-items:center; gap:4px; }
.copy:hover { color:var(--gold-text); }
.copy svg { width:13px; height:13px; }

.empty-state { text-align:center; color:var(--muted); padding:60px 0; }
.card { cursor:pointer; }

/* ---------- date picker + past banner ---------- */
.date-pick { flex:none; position:relative; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text); background:var(--card);
  border:1px solid var(--line); border-radius:99px; padding:0 12px; height:35px; cursor:pointer; transition:.2s; }
.date-pick:hover { border-color:var(--line2); }
.date-pick svg { width:15px; height:15px; color:var(--muted); }
.date-pick input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.past { display:none; margin-top:18px; padding:12px 14px; border-radius:16px; align-items:center; gap:10px;
  background:linear-gradient(90deg,rgba(232,169,28,.16),rgba(232,169,28,.05)); border:1px solid rgba(232,169,28,.35); }
.past.on { display:flex; }
.past div { flex:1; font-size:14px; }
.past div small { display:block; font-size:12px; color:var(--muted); }
.past button { font:inherit; font-size:13px; cursor:pointer; border-radius:10px; border:1px solid var(--line2); background:var(--card); color:var(--text); height:34px; padding:0 12px; }
.past button.arrow { width:34px; padding:0; font-size:16px; }
.past button.today-btn { background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#3a2400; font-weight:600; border-color:transparent; }
.past button:disabled { opacity:.35; cursor:default; }

/* ---------- history dialog ---------- */
dialog { border:0; padding:0; width:min(460px, calc(100% - 24px)); max-height:min(720px, calc(100% - 40px)); border-radius:22px;
  background:var(--card); color:var(--text); box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden; }
dialog[open] { display:flex; flex-direction:column; animation:dlg .3s cubic-bezier(.2,1.2,.4,1); }
dialog::backdrop { background:rgba(10,12,30,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
@keyframes dlg { from { transform:translateY(16px) scale(.97); opacity:0; } }
.h-head { display:flex; align-items:center; gap:12px; padding:18px 18px 14px; border-bottom:1px solid var(--line); }
.h-head .flag { width:42px; height:42px; font-size:22px; }
.h-head div { flex:1; }
.h-head strong { display:block; font-size:18px; }
.h-head small { color:var(--muted); font-size:12px; }
.x { width:34px; height:34px; border-radius:10px; border:0; background:var(--soft); color:var(--text); font-size:18px; cursor:pointer; }
.h-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:14px 18px 4px; }
.h-stats div { background:var(--soft); border-radius:12px; padding:8px 10px; }
.h-stats small { display:block; font-size:11px; color:var(--muted); }
.h-stats b { font-size:16px; }
.h-list { overflow:auto; padding:8px 10px 14px; }
.h-row { display:grid; grid-template-columns:1fr 90px 70px; align-items:center; padding:9px 8px; border-radius:10px; }
.h-row:nth-child(even) { background:var(--soft); }
.h-row.th { font-size:12px; color:var(--muted); background:none; position:sticky; top:-8px; background:var(--card); }
.h-row span:nth-child(n+2) { text-align:center; }
.h-row .t3 { font-weight:700; font-size:20px; letter-spacing:2px; color:var(--top); }
.h-row .b2 { font-weight:700; font-size:20px; letter-spacing:2px; color:var(--bottom); }
.h-row .d { font-size:13px; }
.h-row .d small { display:block; color:var(--muted); font-size:11px; }
.h-empty { text-align:center; color:var(--muted); padding:40px 0; }
.spin { width:26px; height:26px; margin:40px auto; border-radius:50%; border:3px solid var(--soft2); border-top-color:var(--gold); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- toast ---------- */
.toasts { position:fixed; z-index:20; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; width:min(380px, calc(100% - 32px)); }
.toast { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:var(--card); border:1px solid var(--gold);
  box-shadow:0 14px 40px rgba(20,28,70,.22); animation:tin .4s cubic-bezier(.2,1.2,.4,1); }
.toast.out { animation:tout .3s forwards; }
.toast div { flex:1; font-size:13px; color:var(--muted); }
.toast div strong { display:block; color:var(--text); font-size:14px; font-weight:600; }
.toast .res { font-size:22px; font-weight:700; color:var(--top); letter-spacing:1px; }
.toast .res b { color:var(--bottom); }
@keyframes tin { from { transform:translateY(20px); opacity:0; } }
@keyframes tout { to { transform:translateY(10px); opacity:0; } }

footer { text-align:center; color:var(--muted); font-size:12px; padding:40px 16px calc(40px + env(safe-area-inset-bottom)); }

/* ---------- small screens ---------- */
@media (max-width:820px) {
  .hero { grid-template-columns:1fr; gap:10px; padding-bottom:14px; }
  .search { width:40px; }
  .search input { padding-left:30px; padding-right:4px; }
  .search input:focus { position:absolute; right:0; top:-17px; width:calc(100vw - 32px); z-index:2; }
}
@media (max-width:560px) {
  .date-pick { width:40px; padding:0; justify-content:center; }
  .date-pick span { display:none; }
  .past { flex-wrap:wrap; }
  .past div { order:-1; flex-basis:100%; }
  .past .today-btn { margin-left:auto; }
  .logo { font-size:18px; }
  .live .upd, .c-meta .mt { display:none; }
  .panel { padding:18px; border-radius:18px; }
  .progress, .count { margin-top:12px; }
  .count strong { font-size:26px; }
  .due-msg { min-height:54px; font-size:14px; }
  .grid { grid-template-columns:1fr 1fr; gap:10px; }
  .card { border-radius:15px; }
  .c-head { padding:13px 10px 0; gap:8px; }
  .flag { width:30px; height:30px; font-size:16px; border-radius:9px; }
  .c-name { font-size:13.5px; }
  .c-meta { font-size:11px; }
  .status { position:absolute; top:8px; right:8px; font-size:10px; padding:2px 7px; }
  .c-head { padding-top:28px; }
  .nums { margin:10px 10px 0; border-radius:11px; }
  .nums > div { padding:7px 2px 6px; }
  .nums small { font-size:11px; }
  .n { font-size:25px; letter-spacing:2px; padding-left:2px; }
  .c-foot { padding:8px 10px 10px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ================= shared multi-page parts ================= */
.nav { display:flex; gap:4px; margin:0 auto 0 12px; }
.nav a { color:var(--muted); text-decoration:none; font-size:14px; padding:7px 12px; border-radius:10px; white-space:nowrap; transition:.2s; }
.nav a:hover { color:var(--text); background:var(--soft); }
.nav a.on { color:var(--text); font-weight:600; background:var(--card); box-shadow:var(--shadow); }
.logo { text-decoration:none; color:inherit; }
@media (max-width:980px) {
  .bar { flex-wrap:wrap; }
  .nav { order:5; flex-basis:100%; margin:4px 0 0; overflow-x:auto; scrollbar-width:none; }
  .nav::-webkit-scrollbar { display:none; }
}

.page-h { padding:10px 0 18px; }
.crumb { font-size:13px; color:var(--muted); }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--gold-text); }
.page-h h1 { margin:6px 0 4px; font-size:clamp(24px,3.6vw,34px); line-height:1.25; }
.page-h p { margin:0; color:var(--muted); font-size:14px; }

.box { background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:20px; padding:20px; margin-bottom:16px; }
.box h2 { margin:0 0 4px; font-size:18px; }
.box > p.sub { margin:0 0 14px; color:var(--muted); font-size:13px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.cols > .box { margin:0; }

.tabs { display:flex; gap:6px; margin-bottom:16px; }
.tab { font:inherit; font-size:14px; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 16px; cursor:pointer; }
.tab.on { color:#3a2400; font-weight:600; border-color:transparent; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); }

.btn { font:inherit; font-size:14px; cursor:pointer; border-radius:12px; padding:9px 16px; border:1px solid var(--line2); background:var(--card); color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn.gold { color:#3a2400; font-weight:600; border-color:transparent; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 4px 12px rgba(232,169,28,.3); }
.btn:disabled { opacity:.4; cursor:default; }

table.t { width:100%; border-collapse:collapse; font-size:14px; }
table.t th { text-align:left; font-weight:500; font-size:12px; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); }
table.t td { padding:10px; border-bottom:1px solid var(--line); }
table.t tr:last-child td { border-bottom:0; }
table.t .c { text-align:center; }
table.t td small { display:block; color:var(--muted); font-size:11px; }
.big-top { font-weight:700; font-size:22px; letter-spacing:2px; color:var(--top); }
.big-bot { font-weight:700; font-size:22px; letter-spacing:2px; color:var(--bottom); }

.pager { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:14px; flex-wrap:wrap; }
.pager button { min-width:36px; height:36px; font:inherit; font-size:13px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); cursor:pointer; }
.pager button.on { background:var(--text); color:var(--card); border-color:transparent; }
.pager button:disabled { opacity:.35; cursor:default; }

/* stat bars */
.bar-row { display:grid; grid-template-columns:120px 1fr 54px; align-items:center; gap:10px; font-size:13px; margin:8px 0; }
.bar-row .tr { height:10px; border-radius:99px; background:var(--soft2); overflow:hidden; }
.bar-row .tr i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold-lo),var(--gold)); }
.bar-row.b .tr i { background:linear-gradient(90deg,var(--bottom),#ff8a9a); }
.bar-row b { text-align:right; font-variant-numeric:tabular-nums; }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { padding:8px 14px; border-radius:12px; background:var(--soft); font-weight:700; font-size:22px; letter-spacing:2px; color:var(--top); }
.pill.b { color:var(--bottom); }
.pill small { font-size:11px; font-weight:400; color:var(--muted); letter-spacing:0; margin-left:4px; }
.note { font-size:12px; color:var(--muted); background:var(--soft); border-radius:12px; padding:10px 12px; margin-top:12px; }

/* prose pages */
.prose { font-size:15px; line-height:1.8; }
.prose h2 { font-size:20px; margin:24px 0 8px; }
.prose h3 { font-size:16px; margin:18px 0 6px; }
.prose code, .prose pre { font-family:ui-monospace, Menlo, monospace; font-size:13px; background:var(--soft); border-radius:8px; }
.prose code { padding:2px 6px; }
.prose pre { padding:14px; overflow:auto; line-height:1.55; }
.prose ul { padding-left:20px; }
.cmd { display:grid; grid-template-columns:150px 1fr; gap:4px 14px; font-size:14px; }
.cmd code { justify-self:start; }

/* list of lottery links */
.links { display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.links a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--text); font-size:14px; transition:.2s; }
.links a:hover { border-color:var(--gold); transform:translateY(-1px); }
.links a small { margin-left:auto; color:var(--muted); font-size:12px; }

footer a { color:var(--muted); }
@media (max-width:560px) {
  .box { padding:16px; border-radius:16px; }
  .bar-row { grid-template-columns:96px 1fr 46px; }
  .cmd { grid-template-columns:1fr; }
  .cmd code { margin-top:8px; }
}

/* featured Thai government lottery card (home) */
.gov { display:flex; align-items:center; gap:20px; margin-top:18px; padding:16px 20px; border-radius:20px; text-decoration:none; color:var(--text);
  background:linear-gradient(120deg, rgba(27,36,102,.07), rgba(232,169,28,.12)), var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:.25s; }
.gov:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.gov[hidden] { display:none; }
.gov-l { display:flex; align-items:center; gap:10px; min-width:170px; }
.gov-l strong { display:block; font-size:16px; }
.gov-l small, .gov small { color:var(--muted); font-size:12px; display:block; }
.gov-first b { font-size:38px; font-weight:700; letter-spacing:5px; color:var(--top); line-height:1.15; }
.gov-sub { display:flex; gap:20px; flex:1; }
.gov-sub b { font-size:20px; font-weight:700; letter-spacing:2px; color:var(--top); }
.gov-sub b.r { color:var(--bottom); font-size:24px; }
.gov-go { font-size:13px; color:var(--gold-text); font-weight:600; white-space:nowrap; }
.h-more { margin:0 18px 16px; justify-content:center; }
@media (max-width:820px) {
  .gov { flex-wrap:wrap; gap:10px 18px; }
  .gov-l { flex-basis:100%; }
  .gov-sub { flex-basis:100%; justify-content:space-between; gap:8px; }
  .gov-go { position:absolute; right:30px; margin-top:-4px; }
  .gov { position:relative; }
  .gov-go { top:24px; }
  .gov-first b { font-size:32px; }
  .gov-sub b { font-size:17px; }
}

/* SEO: server-rendered content and FAQ */
.h1-pre { display:block; font-size:12px; font-weight:400; letter-spacing:1.2px; margin-bottom:6px; }
.ssr { margin-top:18px; }
.ssr h2 { font-size:18px; margin:20px 0 8px; }
.faq { margin:28px 0 8px; }
.faq h2 { font-size:20px; margin:0 0 12px; }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:8px; box-shadow:var(--shadow); }
.faq summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:10px; }
.faq summary::after { content:"＋"; color:var(--muted); flex:none; }
.faq details[open] summary::after { content:"－"; }
.faq details p { margin:8px 0 0; color:var(--muted); line-height:1.7; }

/* flag icons (Flaticon) */
.flag img { width:72%; height:72%; display:block; }
.h1-flag { display:inline-block; width:1.05em; height:1.05em; vertical-align:-.15em; }
.h1-flag img, img.h1-flag { width:1.05em; height:1.05em; display:block; }
.links .flag { width:28px; height:28px; border-radius:8px; }
a.c-name { display:block; color:inherit; text-decoration:none; }
a.c-name:hover { color:var(--gold-text); text-decoration:underline; }
.h-more-row { display:flex; gap:8px; margin:0 18px 16px; }
.h-more-row .btn { flex:1; justify-content:center; }

/* brand logo (เฮงเฮง) */
.logo img { height:48px; width:auto; display:block; filter:drop-shadow(0 3px 8px rgba(160,20,20,.25)); }
.logo-text { font-size:15px; font-weight:600; color:var(--muted); line-height:1.15; }
.logo-text b { display:block; font-size:19px; color:#c4161c; }
[data-theme="dark"] .logo-text b { color:#ffcf4a; }
@media (max-width:560px) { .logo img { height:40px; } .logo-text { display:none; } }