/* --coral fills and borders; --coralInk is the same hue darkened enough to be
   read at 12-13px on a white card, where the fill colour only reaches 3:1. */
:root{--bg:#F6F8FC;--card:#FFFFFF;--text:#0F172A;--muted:#5B6779;--line:#E4E9F2;--pri:#2563EB;--priSoft:#EFF4FF;--coral:#FF5A5F;--coralInk:#D32F35;--r1:#D32F35;--r2:#A16207;--r3:#0B7A5A;--coralSoft:#FFF1F0;--cream:#FFF7F4;--amber:#F59E0B;--amberSoft:#FEF6E7;--green:#0E9F76;--greenSoft:#E8F7F1;--shadow:0 1px 2px rgba(15,23,42,.05);--maxw:1180px}
html.dark{--bg:#0A1020;--card:#111A2C;--text:#E8EDF7;--muted:#9AA7BD;--line:#22314A;--pri:#7BA5FF;--priSoft:#17243D;--coral:#FF7276;--coralInk:#FF8A8D;--r1:#FF7276;--r2:#FBBF24;--r3:#34D399;--coralSoft:#2A1720;--cream:#131A2A;--amber:#FBBF24;--amberSoft:#2A2113;--green:#34D399;--greenSoft:#12271F;--shadow:0 1px 2px rgba(0,0,0,.4)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* An <img> carries its intrinsic width and height so the browser can reserve the
   space before the file arrives. Once max-width shrinks the width, the height has
   to follow or the picture is stretched vertically by exactly that difference. */
img{max-width:100%;height:auto;display:block}
p{margin:0;font-size:17px;line-height:1.65}
a{color:var(--pri);text-decoration:none}
a:hover{color:var(--coral)}
/* `color:inherit` alone leaves the background at the browser default button face,
   which is a light colour. In dark mode that pairs a near-white inherited text with
   a near-white face and the control disappears. Anything that wants a background
   states one; everything else stays transparent over whatever it sits on. */
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
button{background:transparent}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:34px;line-height:1.18;letter-spacing:-.03em;font-weight:800}
h2{font-size:24px;line-height:1.22;font-weight:800}
h3{font-size:18px;font-weight:700}
.thai{font-family:'Noto Sans Thai',system-ui,sans-serif}
.muted{color:var(--muted)}
.sm{font-size:15px}
.xs{font-size:14px}
.grow{flex:1}
.hidden,[hidden]{display:none!important}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:26px 20px 60px;width:100%;min-width:0}
.wrap>*{min-width:0;max-width:100%}
.wrap>*+*{margin-top:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);min-width:0;max-width:100%}
.card *{min-width:0}
.tint{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--cream);min-width:0}
.hd{padding:0}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-sm{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row-b{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sec-sub{margin-top:6px;color:var(--muted)}
.cols{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cols-2{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-cards{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.grid-names{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.grid-sym{display:flex;flex-wrap:wrap;gap:8px}
.grid-emoji{display:flex;flex-wrap:wrap;gap:8px}
.grid-emoji-mini{display:flex;flex-wrap:wrap;gap:6px}
.grid-steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-podium{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:flex-start;margin-top:34px}
.grid-week{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-top:20px}
.grid-groups{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:1px solid var(--line)}
.site-header .inner{max-width:var(--maxw);margin:0 auto;padding:13px 15px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--pri);letter-spacing:-.02em}
.flag{width:31px;height:22px;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.flag i{display:block}
.flag i:nth-child(1),.flag i:nth-child(5){flex:1;background:#A51931}
.flag i:nth-child(2),.flag i:nth-child(4){flex:1;background:#F4F5F8}
.flag i:nth-child(3){flex:2;background:#2D2A4A}
.flag.sm{width:27px;height:19px;border-radius:3px;box-shadow:none}
.nav{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
.nav a{color:var(--muted);white-space:nowrap}
.nav a.on{color:var(--pri);font-weight:600}
.head-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* buttons */
.icon-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);border-radius:10px;cursor:pointer;color:var(--muted)}
.icon-btn:hover{border-color:var(--pri);color:var(--pri)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--pri);color:var(--pri)}
.btn-pri{border:none;background:var(--pri);color:#fff}
.btn-pri:hover{opacity:.88;color:#fff}
.btn-ghost{color:var(--pri)}
.btn-ghost:hover{background:var(--priSoft)}
.btn-line{border:1px solid var(--pri);color:var(--pri);padding:10px 16px}
.btn-line:hover{background:var(--priSoft)}
.pill{padding:4px 10px;border-radius:999px;background:var(--priSoft);color:var(--pri);font-size:12.5px;font-weight:700;white-space:nowrap}
.pill-coral{background:var(--coralSoft);color:var(--coral)}
.chip{flex:none;padding:11px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--muted);font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip .n{opacity:.65;font-weight:500}
.chip.on{border-color:var(--pri);background:var(--priSoft);color:var(--pri)}
.chip.on-coral{border-color:var(--coral);background:var(--coralSoft);color:var(--coralInk)}
.chips{display:flex;gap:9px;padding-bottom:4px}

/* inputs */
.field{position:relative;min-width:0}
.input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font-size:16px;outline:none}
.input:focus{border-color:var(--pri)}
.input-lg{padding:19px 52px 19px 17px;border:2px solid var(--pri);border-radius:14px;background:var(--card);font-size:21px;font-weight:600;box-shadow:0 0 0 4px var(--priSoft)}
.input-lg:focus{border-color:var(--coral);box-shadow:0 0 0 5px var(--coralSoft)}
.label-hi{font-size:15px;font-weight:700;color:var(--pri);display:flex;align-items:center;gap:7px}
.input-search{padding-left:40px}
.field .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.field .in-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px}
.field .in-btn:hover{color:var(--pri);background:var(--priSoft)}

/* generator */
.case-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.case{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 4px;border-radius:11px;border:1.5px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer}
.case b{font-size:15px}
.case span{font-size:12.5px;font-weight:500}
.case.on{border-color:var(--pri);background:var(--priSoft);color:var(--pri)}
.res-wrap{display:flex;flex-wrap:wrap;gap:10px}
.res{flex:1 1 auto;max-width:min(100%,420px);display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.res:hover{border-color:var(--pri);background:var(--priSoft)}
.res .txt{font-size:21px;line-height:1.45;padding:2px 0;overflow-wrap:break-word}
.res .copy{flex:none;display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}

/* lists */
.lrow{display:flex;align-items:center;gap:10px;padding:11px 6px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px}
.lrow:hover{background:var(--bg)}
.lrow .rank{width:20px;flex:none;font-size:15px;color:var(--muted)}
.lrow .nm{font-size:16px;overflow-wrap:break-word}
.lrow .views{flex:none;display:flex;align-items:center;gap:5px;font-size:14px;color:var(--muted)}
.kao{flex:1 1 auto;max-width:min(100%,340px);display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;cursor:pointer}
.kao:hover{border-color:var(--pri);background:var(--priSoft)}
.kao span{font-size:16px;white-space:nowrap}
.emoji-mini{flex:0 1 auto;min-width:40px;padding:9px 10px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1.2;border:1px solid transparent;background:transparent;border-radius:10px;cursor:pointer;white-space:nowrap}
.emoji-mini:hover{background:var(--bg);border-color:var(--line)}
.emoji-cell{flex:0 1 auto;max-width:100%;min-width:62px;display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:10px 10px;border:1px solid var(--line);background:var(--card);border-radius:12px;cursor:pointer}
.emoji-cell:hover{border-color:var(--pri);background:var(--priSoft)}
.emoji-cell b{font-size:26px;line-height:1.25;font-weight:400;white-space:nowrap}
.emoji-cell i{font-size:11.5px;color:var(--muted);font-weight:600;font-style:normal}
.sym{flex:1 1 auto;max-width:min(100%,190px);min-width:44px;padding:12px 12px;border:1px solid var(--line);background:var(--card);border-radius:10px;font-size:16px;line-height:1.4;cursor:pointer;white-space:nowrap;text-align:center}
.sym:hover{border-color:var(--pri);background:var(--priSoft)}

/* table */
.tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:16px}
.tbl th{text-align:left;padding:12px 10px;font-weight:600;font-size:14px;color:var(--muted)}
.tbl td{padding:13px 10px;border-top:1px solid var(--line)}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--bg)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.up{color:var(--green);font-weight:600}
.down{color:var(--coral);font-weight:600}

/* cards */
.sug{flex:0 1 auto;max-width:100%;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px}
.sug .nm{font-size:20px;line-height:1.4;overflow-wrap:break-word}
.tag{font-size:12.5px;font-weight:600;color:var(--muted);padding:4px 9px;background:var(--bg);border-radius:999px}
.heart{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid var(--line);background:transparent;border-radius:9px;cursor:pointer;color:var(--muted)}
.heart:hover{border-color:var(--coral)}
.heart.on{color:var(--coral);border-color:var(--coral)}
.podium{flex:0 1 auto;max-width:100%;position:relative;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:32px 22px 22px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:14px}
.podium:hover{transform:translateY(-3px)}
.podium .badge{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:16px;font-weight:700}
.podium .nm{font-size:24px;line-height:1.35;max-width:100%;overflow-wrap:break-word}
.podium .lbl{padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:600}
/* Rank colours come in two versions because a single one cannot serve both jobs:
   the medal is a filled circle carrying a numeral, the label is coloured text on a
   pale tint. The bright hue that makes a good fill is far too light to read as text
   at 13px, so each rank keeps one hue and swaps which side of it is dark. */
.podium.p1{border-color:var(--r1)}.podium.p1 .badge{background:var(--r1)}.podium.p1 .lbl{color:var(--r1);background:var(--coralSoft)}
.podium.p2{border-color:var(--r2)}.podium.p2 .badge{background:var(--r2)}.podium.p2 .lbl{color:var(--r2);background:var(--amberSoft)}
.podium.p3{border-color:var(--r3)}.podium.p3 .badge{background:var(--r3)}.podium.p3 .lbl{color:var(--r3);background:var(--greenSoft)}
/* In dark mode the rank hues are the light ones, so the numeral flips to dark ink. */
html.dark .podium .badge{color:#0A1020}
.wk{flex:0 1 auto;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:inline-flex;align-items:center;gap:14px;cursor:pointer}
.wk:hover{border-color:var(--coral)}
.wk .rank{font-size:15px;color:var(--muted);min-width:18px;flex:none}
.wk .nm{font-size:18px;line-height:1.4;overflow-wrap:break-word}
.name-card{flex:0 1 auto;max-width:100%;padding:16px;border-radius:14px;display:flex;flex-direction:column;gap:12px;cursor:pointer;color:var(--text)}
.name-card:hover{border-color:var(--coral)}
.name-card .nm{font-size:20px;line-height:1.4;overflow-wrap:break-word}
.name-card .cp{font-size:14px;font-weight:600;color:var(--coralInk)}
.vote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vote{padding:14px 6px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font-weight:700;font-size:14.5px}
.vote i{font-style:normal;font-weight:500;font-size:14px;opacity:.85}
.vote.on.v1{border-color:var(--green);background:var(--greenSoft);color:var(--green)}
.vote.on.v2{border-color:var(--amber);background:var(--amberSoft);color:var(--amber)}
.vote.on.v3{border-color:var(--coral);background:var(--coralSoft);color:var(--coral)}
.feat-box{border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:9px}
.feat-box .t{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700}
.step .n{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--priSoft);color:var(--pri);font-weight:700;font-size:15px}
.tip{background:var(--amberSoft);border:1px solid var(--amber);border-radius:12px;padding:15px 18px;text-align:center;font-size:15.5px}
.faq{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq button{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;background:transparent;border:none;cursor:pointer;text-align:left;font-size:16px;font-weight:600}
.faq .sign{margin-left:auto;font-size:20px;color:var(--muted)}
.faq p{padding:0 16px 16px;font-size:15.5px;color:var(--muted)}
.quote{border-left:3px solid var(--coral);background:var(--coralSoft);border-radius:0 12px 12px 0;padding:14px 16px}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;background:var(--priSoft);color:var(--pri);display:grid;place-items:center;font-weight:700;font-size:13px}

/* blog */
.ph{background:repeating-linear-gradient(135deg,var(--line) 0 10px,transparent 10px 20px);display:grid;place-items:center;color:var(--muted);font:600 12px/1.2 ui-monospace,Menlo,monospace;text-align:center;padding:8px;border-radius:12px}
.feat-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;color:var(--text)}
.feat-grid:hover{border-color:var(--pri)}
.feat-grid .ph{min-height:230px}
.post{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;align-items:center;color:var(--text)}
.post:hover{border-color:var(--pri)}
.post .ph{aspect-ratio:16/9;border-radius:10px}
.post .t{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.post .ex{font-size:15.5px;color:var(--muted);line-height:1.55}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}
.aside{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px}
.toc a{display:block;font-size:15.5px;color:var(--muted);line-height:1.45}
.toc a:hover{color:var(--pri)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.rel .ph{aspect-ratio:16/9;border-radius:10px}
.lead{font-size:19px;line-height:1.6;font-weight:500}
.progress{position:sticky;top:66px;z-index:59;height:3px;background:var(--line)}
.progress i{display:block;height:3px;background:var(--coral);width:0}

/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--card)}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:34px 15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.site-footer,.site-footer *{min-width:0}
.site-footer a,.site-footer span,.site-footer p{overflow-wrap:anywhere}
.site-footer .col{display:flex;flex-direction:column;gap:9px;font-size:15px}
.site-footer .col a{color:var(--muted)}
.site-footer .col a:hover{color:var(--pri)}
.site-footer .col .h{font-weight:700;font-size:15.5px;color:var(--text);margin-bottom:4px}
.socials{display:flex;gap:8px}
.socials span{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:12.5px;font-weight:700}

/* floating */
.to-top{position:fixed;right:16px;bottom:96px;z-index:70;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--pri);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(15,23,42,.16)}
.to-top:hover{background:var(--priSoft)}
/* Pinned to the viewport and never wider than it. An explicit width rather than
   left:0 + right:0, because the flex children were still able to push the box past
   the screen and take the whole document with them — and a fixed element's overflow
   is not caught by the body, so it widened the whole document. overflow-x:clip stops
   that without creating a scroll container, which matters because the raised centre
   button must still show above the bar (overflow-y stays visible).

   The width is in vw, not %: a percentage resolves against the containing block, and
   once the bar had widened the document that block was the widened document — the box
   kept its own overflow alive. vw is measured from the viewport and breaks the loop. */
.mobnav{display:none;position:fixed;left:0;bottom:0;width:100vw;max-width:100vw;overflow-x:clip;z-index:80;background:var(--card);border-top:1px solid var(--line);padding:8px 4px 10px;align-items:flex-end;justify-content:space-around;box-shadow:0 -4px 20px rgba(15,23,42,.1)}
/* A flex item refuses to shrink past its own content unless told to: without
   min-width:0 the five labels add up to more than a phone is wide and the whole
   fixed bar — and with it the page — grows past the viewport. */
.mobnav a,.mobnav button{flex:1 1 0;min-width:0;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;color:var(--muted);font-size:12px;font-weight:600}
.mobnav a>span,.mobnav button>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobnav .on{color:var(--pri)}
.mobnav .fab{padding:0;color:var(--coralInk)}
.mobnav .fab i{width:52px;height:52px;margin-top:-20px;border-radius:50%;background:linear-gradient(180deg,#FF7A6E,#FF4F63);display:grid;place-items:center;color:#fff;animation:glow 2.6s ease-in-out infinite}
.sheet{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.5);display:flex;align-items:flex-end}
.sheet .panel{width:100%;background:var(--card);border-radius:20px 20px 0 0;padding:18px 15px 26px;animation:up .22s ease}
.sheet .bar{width:44px;height:5px;border-radius:99px;background:var(--line);margin:0 auto 16px}
.sheet .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sheet a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border:1px solid var(--line);border-radius:14px;color:var(--text);font-size:13.5px;font-weight:600;text-align:center}
.sheet a b{font-size:22px;font-weight:400}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:110px;z-index:95;padding:12px 20px;border-radius:999px;background:#0F172A;color:#fff;font-size:15px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.28);animation:up .18s ease}
html.dark .toast{background:#E8EDF7;color:#0A1020}
/* In dark mode the primary colour becomes a light blue, so white text on it drops
   to about 2.4:1. A dark ink on that same fill reads the way the light-mode button
   does, and keeps the button the brightest thing on the card. */
html.dark .btn-pri{color:#0A1020}

@keyframes glow{0%,100%{box-shadow:0 6px 16px rgba(255,90,95,.42)}50%{box-shadow:0 8px 26px rgba(255,90,95,.68)}}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* responsive */
@media(max-width:1080px){
 .nav{display:none}
 .mobnav{display:flex}
 .site-footer{padding-bottom:78px}
}
@media(max-width:980px){
 .art-grid{grid-template-columns:minmax(0,1fr)}
 .aside{position:static}
}
@media(max-width:900px){
 body{font-size:16.5px}
 p{font-size:16.5px}
 h1{font-size:28px}
 h2{font-size:22px}
 .hide-sm{display:none}
 .wrap{padding:16px 0 100px}
 .wrap>*+*{margin-top:16px}
 .card{padding:15px;border-radius:0;border-left:0;border-right:0}
 .tint{padding:15px;border-radius:0;border-left:0;border-right:0}
 .hd{padding:0 15px}
 .grid-podium{margin-top:30px}
}
@media(max-width:760px){
 .feat-grid{grid-template-columns:minmax(0,1fr);gap:14px}
 .post{grid-template-columns:120px minmax(0,1fr);gap:12px}
}
@media(max-width:460px){
 .post{grid-template-columns:minmax(0,1fr);gap:10px}
 .res .copy span{display:none}
}

/* ---------- WordPress integration ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:10px 16px;background:var(--card);border:1px solid var(--pri);border-radius:0 0 10px 0}
.skip-link:focus{left:0}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* long-form content coming from the editor */
/* The copy contains unbreakable runs — an MD5 hash, a bare URL — that no language
   rule will split. Left alone they push a paragraph wider than the phone. */
.entry-content{display:flex;flex-direction:column;gap:16px;overflow-wrap:break-word;word-break:break-word}
.entry-content>*{margin:0}
.entry-content h2{font-size:24px;line-height:1.25;font-weight:800;margin-top:10px}
.entry-content h3{font-size:19px;font-weight:700;margin-top:6px}
.entry-content h4{font-size:17px;font-weight:700}
.entry-content p{font-size:17px;line-height:1.7}
.entry-content ul,.entry-content ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.entry-content li{line-height:1.65}
.entry-content img{border-radius:12px;height:auto}
.entry-content figure{margin:0}
.entry-content blockquote{border-left:3px solid var(--coral);background:var(--coralSoft);border-radius:0 12px 12px 0;padding:14px 16px;margin:0}
.entry-content table{width:100%;border-collapse:collapse;font-size:16px}
.entry-content th,.entry-content td{padding:11px 10px;border-top:1px solid var(--line);text-align:left}
.entry-content code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:14.5px}
.entry-content pre{overflow-x:auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px}
.entry-content hr{border:0;border-top:1px solid var(--line);width:100%}
.entry-content .wp-block-image{margin:0}
.entry-content a{overflow-wrap:anywhere}

/* header menu built from the WordPress menu */
.nav .menu-item-has-children{position:relative}
.nav ul.sub-menu{display:none;position:absolute;left:0;top:100%;min-width:180px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;margin:6px 0 0;list-style:none;box-shadow:0 10px 30px rgba(15,23,42,.12)}
.nav li:hover>ul.sub-menu,.nav li:focus-within>ul.sub-menu{display:block}
.nav ul.sub-menu a{display:block;padding:8px 10px;border-radius:8px}
.nav ul.sub-menu a:hover{background:var(--priSoft)}

/* pagination */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted);font-weight:600;font-size:15px}
.pager .page-numbers:hover{border-color:var(--pri);color:var(--pri)}
.pager .page-numbers.current{border-color:var(--pri);background:var(--priSoft);color:var(--pri)}

/* generator result groups (engine sections) */
.gp-groups{display:flex;flex-direction:column;gap:18px}
.gp-group{display:flex;flex-direction:column;gap:10px}
.gp-group>.h{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700}
.gp-group>.h .n{font-size:13px;font-weight:600;color:var(--muted)}
.gp-empty{padding:22px 14px;text-align:center;color:var(--muted)}
.gp-skeleton{height:56px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(90deg,var(--bg) 25%,var(--card) 50%,var(--bg) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.res{text-align:left;font:inherit}
.res .txt{min-width:0}
.sel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sel{display:flex;flex-direction:column;gap:4px;min-width:0}
.sel>span{font-size:12.5px;font-weight:600;color:var(--muted)}
.sel select{width:100%;padding:11px 10px;border:1.5px solid var(--line);border-radius:11px;background:var(--card);color:var(--text);font-size:15px;cursor:pointer;max-width:100%}
.sel select:focus{border-color:var(--pri);outline:none}

/* community panel on a name page */
.cm-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.cm{flex:1 1 auto;max-width:min(100%,340px);display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);min-width:0}
.cm:hover{border-color:var(--pri)}
.cm .nm{font-size:18px;line-height:1.45;overflow-wrap:break-word;cursor:pointer}
.cm .bar{display:flex;align-items:center;gap:8px}
.cm .vote{display:inline-flex;flex-direction:row;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.cm .vote:hover{border-color:var(--green);color:var(--green)}
.cm .vote.on{border-color:var(--green);color:var(--green);background:var(--greenSoft)}
.cm .cp{margin-left:auto;font-size:13px;font-weight:600;color:var(--coralInk);cursor:pointer}
.cm-form{display:flex;gap:10px;flex-wrap:wrap}
.cm-form .input{flex:1;min-width:180px}
.tone{font-size:13.5px}
.tone.ok{color:var(--green)}
.tone.err{color:var(--coral)}

/* name-page hero counters */
.stat-row{display:flex;flex-wrap:wrap;gap:8px}
.stat{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13.5px;color:var(--muted);font-weight:600}
.stat b{color:var(--text)}

/* related searches */
.rel-chips{display:flex;flex-wrap:wrap;gap:8px}
.rel-chips a{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:14.5px;font-weight:600}
.rel-chips a:hover{border-color:var(--coral);color:var(--coral)}

/* legal strip printed after the footer */
.hub-legal{max-width:var(--maxw)}
.site-footer+.hub-legal{margin-bottom:14px}

/* utilities */
.center{text-align:center}
.mt0{margin-top:0}
.nowrap{white-space:nowrap}
@media(max-width:900px){
 .entry-content{padding:0 15px}
 .card .entry-content,.tint .entry-content{padding:0}
 .sel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .sel select{padding:10px 8px;font-size:14px}
}
@media(max-width:460px){
}

/* menu lists */
.nav-list,.foot-list{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.nav-list li{position:relative}
.nav-list li.on>a,.nav a.on{color:var(--pri);font-weight:600}
.foot-list{flex-direction:column;align-items:flex-start;gap:9px}
.ic{display:inline-block;vertical-align:-.15em;flex:none}

/* ---------- copyable results ----------
   Every cell listed above holds something a visitor is meant to read and copy in
   full. Two rules govern all of them, and both are corrections of what a normal
   card grid would do:

   Size to the content, then fill the line. A fixed track width squeezes a long
   kaomoji into an ellipsis and leaves a one-character symbol adrift in an empty
   box, so the grids are flex-wrap and every item starts at the width of what it
   holds (`flex-basis:auto`). What is left over at the end of a line is then given
   back to the items on it (`flex-grow:1`), so a row reaches the full width as
   padding around each item rather than as a ragged edge — the item stays free-size,
   the line stays even. A cap keeps a final row of one or two items from stretching
   into slabs. Names wrap; kaomoji and symbols keep `nowrap` — breaking a face
   across two lines destroys it — and the box widens instead.

   Never bold. These glyphs come from fonts with no bold face, so the browser
   fakes one by smearing the strokes, which is precisely the distortion the
   characters were chosen to avoid. Regular weight, always. Labels around them
   (rank numbers, style names, like counts) may still be bold. */
.res .txt,.sym,.cm .nm,.kao span,.podium .nm,.wk .nm,.name-card .nm,.sug .nm,.lrow .nm,.emoji-cell b,.tbl .nick{
  font-weight:400;overflow:visible;text-overflow:clip}
.tbl .nick{overflow-wrap:break-word}

/* Narrow screens: give the result its own line instead of squeezing it into a
   column barely wider than one word. */
@media(max-width:560px){
 .res{gap:8px;padding:11px 12px}
 .res .txt{font-size:19px}
 .res .copy{padding:7px 11px;font-size:13px}
 .res .copy span{display:inline}
}
/* ---------- newest posts, foot of every page ----------
   A band between the article and the footer, tinted so it reads as site furniture
   rather than as part of the page above it. The cards are text only: twelve
   thumbnails at the bottom of every page would cost more to load than the links are
   worth, and the category chip already tells the reader what each one is. */
.foot-posts{border-top:1px solid var(--line);background:var(--bg);padding:32px 0 8px;margin-top:36px}
/* `.inner` only carries a width inside the header and the footer, so this block was
   running the full width of the screen while everything above it stopped at the
   container. Same max-width and side padding as .wrap. */
.foot-posts .inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%;min-width:0}
.foot-posts .hd{margin-bottom:16px}
.foot-posts h2{font-size:20px}
/* Fixed column counts, not auto-fill: twelve cards across five auto-filled columns
   leave a two-card stub on the last row. Four, three and two all divide twelve. */
.fp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.fp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fp{display:flex;flex-direction:column;gap:8px;padding:10px 10px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--text);min-width:0}
/* aspect-ratio thay vì chiều cao cứng: luật của chủ site cấm đặt cứng height vì trên
   mobile ảnh bị kéo cao. Tỉ lệ 16/9 khớp đúng file gốc 1200x675 nên không cắt gì. */
.fp-img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:9px;display:block}
span.fp-img{font-size:11px}
.fp:hover{border-color:var(--pri);background:var(--priSoft)}
.fp.on{border-color:var(--pri)}
.fp-cat{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;
  font-size:12px;font-weight:600;color:var(--pri);letter-spacing:.2px;min-width:0}
/* Only ever rendered under the preview cookie, so the reviewer can tell at a glance
   which entries are not live yet. */
/* nowrap: in a two-column phone grid the two Thai syllables of this label were
   being split across lines, which read as a broken word rather than a tag. */
.fp-draft{font-style:normal;font-weight:600;padding:1px 6px;border-radius:6px;
  background:var(--amberSoft);color:var(--amber);font-size:11px;white-space:nowrap;flex:none}
/* Titles here are Thai and run without spaces, so a long one has nowhere to break and
   would push the card wide. Two lines, then an ellipsis. */
.fp-t{font-weight:600;font-size:15.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
@media(max-width:560px){
 .foot-posts{padding:24px 0 4px;margin-top:28px}
 .foot-posts .inner{padding:0 12px}
 .fp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .fp{padding:8px 8px 11px}
 .fp-img{aspect-ratio:16/9}
 .fp-t{font-size:14.5px}
}

/* ---------- legal / about documents ----------
   These pages carry their own <style> inside the post content, written back when the
   site had no dark mode: #334155 text on a pale blue pill, #1e73be headings. On a dark
   page that pill text falls to about 2:1. The content is not ours to edit, so the dark
   palette is restated here for exactly the classes those documents use. */
html.dark .lgmeta span{background:rgba(123,165,255,.12);border-color:rgba(123,165,255,.28);color:var(--text)}
html.dark .lgtoc{background:rgba(123,165,255,.07);border-color:rgba(123,165,255,.22)}
html.dark .lgtoc b,html.dark .lgtoc a,html.dark .lgwrap th{color:var(--pri)}
html.dark .lgwrap th{background:rgba(123,165,255,.1)}
html.dark .lgwrap th,html.dark .lgwrap td{border-color:rgba(123,165,255,.22)}
html.dark .lgnote{background:rgba(123,165,255,.08);border-left-color:var(--pri)}

/* Hidden from sight, still read aloud. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Kaomoji are chips, not rows: each face is as wide as the face. */
.kao-wrap{display:flex;flex-wrap:wrap;gap:8px}
/* These chips carry names people actually created — the same rule applies. */
.rel-chips.is-names a{font-weight:400;overflow-wrap:break-word;max-width:100%}

/* A section header carries a title and a search box side by side. On a phone there is
   no room for both: the box gets squeezed to a few dozen pixels and then spills past
   the screen, which widens the viewport and drags every fixed element — the bottom bar
   included — out with it. Stack them instead. */
@media(max-width:760px){
 .hd.row-b{flex-direction:column;align-items:stretch;gap:12px}
 .hd.row-b .grow{display:none}
 .hd.row-b .field{max-width:none;width:100%}
 .hd.row .field,.hd.row .scrollx{max-width:none;width:100%}
 .hd.row{flex-direction:column;align-items:stretch}
}

/* Small phones: tighten the bar so the five items fit without needing to be clipped. */
@media(max-width:400px){
 .mobnav{padding:8px 0 10px}
 .mobnav a,.mobnav button{gap:3px;padding:4px 1px;font-size:11px}
 .mobnav .fab i{width:46px;height:46px;margin-top:-16px}
}

/* Article images and the copy grid that articles carry.
   The image is sized by its container and keeps its own aspect ratio — no fixed
   height, so a phone never stretches it. */
.vlc-figure{margin:0;display:flex;flex-direction:column;gap:8px}
.vlc-figure img{width:100%;height:auto;border-radius:14px;display:block}
.vlc-figure figcaption{font-size:14px;color:var(--muted);text-align:center}
.vlc-glyphs{display:flex;flex-direction:column;gap:10px}
.vlc-glyphs .grid-sym{margin-top:2px}
.entry-content .vlc-figure,.entry-content .vlc-glyphs{margin:4px 0}