/* Hốc List Guest v2. Self-hosted fonts (SIL OFL 1.1), see fonts/FONTS.md. */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-500-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-800-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-800-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/silkscreen-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Màu nhãn hạng (--S..--D) giữ nguyên ở cả hai nền; --t* là màu chữ hạng trên nền ô (hộp thoại). Nền sáng: theo hệ thống, hoặc data-theme do prefs.js/nút đặt. */
:root{--ground:#120e1b;--panel:#1c1530;--chip:#2a2142;--edge:#4a3c6e;--text:#f5f1fc;--muted:#c0b5d8;--hi:#ffd23f;--selbg:#ffd23f;--selfg:#1b1500;--hov:#ffd23f;--score:#ffd23f;--ph:#9d92b8;--modesp:#4a3c6e;--focus:#ffffff;--S:#a23be0;--A:#2fae7c;--B:#e0ac2a;--C:#93a1b2;--D:#9c5a38;--tS:#cf7bff;--tA:#2fae7c;--tB:#e0ac2a;--tC:#93a1b2;--tD:#d98d66;
 --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;--num:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif;--pix:Silkscreen,"Be Vietnam Pro",system-ui,sans-serif;color-scheme:dark}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--ground:#f4effa;--panel:#ffffff;--chip:#ece4f7;--edge:#7d6fa3;--text:#1b1330;--muted:#554a73;--score:#7a4b00;--ph:#6f6590;--modesp:#d9d0ee;--focus:#1b1330;--selbg:#1b1330;--selfg:#f4effa;--hov:#1b1330;--tS:#7a1fb8;--tA:#166b48;--tB:#7d5700;--tC:#536274;--tD:#8f4a22;color-scheme:light}}
:root[data-theme=light]{--ground:#f4effa;--panel:#ffffff;--chip:#ece4f7;--edge:#7d6fa3;--text:#1b1330;--muted:#554a73;--score:#7a4b00;--ph:#6f6590;--modesp:#d9d0ee;--focus:#1b1330;--selbg:#1b1330;--selfg:#f4effa;--hov:#1b1330;--tS:#7a1fb8;--tA:#166b48;--tB:#7d5700;--tC:#536274;--tD:#8f4a22;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--text);font:500 15px/1.5 var(--body);-webkit-text-size-adjust:100%}
::selection{background:var(--hi);color:#1b1500}
.wrap{max-width:1180px;margin:0 auto;padding:16px 16px 72px}
header{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;padding:8px 0 14px}
header img{width:72px;height:72px;image-rendering:pixelated;grid-row:span 2}
h1{margin:0;font:800 clamp(38px,8vw,64px)/.92 var(--num);letter-spacing:-.035em}
.sub{margin:0;color:var(--muted);font-size:13px}
.modes{grid-column:1/-1;display:flex;gap:8px;margin-top:12px}
.mode{flex:1;min-height:46px;padding:0 14px;border:2px solid var(--edge);border-radius:0;background:transparent;color:var(--text);font:700 15px var(--body);cursor:pointer}
.mode span{color:var(--muted);font-weight:500;margin-left:6px}
.mode[aria-pressed=true]{background:var(--text);color:var(--ground);border-color:var(--text)}.mode[aria-pressed=true] span{color:var(--modesp)}
.tools{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
input[type=search],select{min-height:46px;padding:0 14px;border:2px solid var(--edge);border-radius:0;background:var(--panel);color:var(--text);font:inherit}
input[type=search]{flex:1 1 220px}select{flex:0 1 200px;max-width:100%}
input::placeholder{color:var(--ph)}
.prices{display:flex;gap:8px;flex-wrap:wrap}
.fp{flex:none;min-height:46px;min-width:46px;padding:0 12px;border:2px solid var(--edge);border-radius:0;background:transparent;color:var(--text);font:700 15px var(--body);cursor:pointer}
.fp[aria-pressed=true]{background:var(--selbg);color:var(--selfg);border-color:var(--selbg)}
.fp.ghost{border-style:dashed;color:var(--muted)}
#pick{min-height:46px;padding:0 18px;border:0;border-radius:0;background:var(--hi);color:#1b1500;font:800 15px var(--body);cursor:pointer;box-shadow:inset -3px -3px 0 #c9a21f}
#pick:active{box-shadow:inset 3px 3px 0 #c9a21f}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
nav.jump{position:sticky;top:0;z-index:5;display:flex;gap:6px;padding:8px 0;margin:0 0 12px;background:linear-gradient(var(--ground) 78%,transparent)}
nav.jump a{flex:1;min-height:44px;display:grid;place-content:center;text-align:center;background:var(--c);color:#fff;text-decoration:none;font:700 22px/1 var(--pix)}
nav.jump a small{display:block;font:700 13px/1.2 var(--body);margin-top:2px}
nav.jump a[data-t=A],nav.jump a[data-t=B],nav.jump a[data-t=C]{color:#10140f}
.count{margin:0 0 10px;color:var(--muted);font-size:13px;min-height:20px}
.board{display:grid;gap:14px}
.tier{--c:var(--S);display:grid;grid-template-columns:92px 1fr;background:color-mix(in srgb,var(--c) 13%,var(--panel));scroll-margin-top:68px;clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.tier[data-t=S]{--c:var(--S)}.tier[data-t=A]{--c:var(--A)}.tier[data-t=B]{--c:var(--B)}.tier[data-t=C]{--c:var(--C)}.tier[data-t=D]{--c:var(--D)}
.label{display:grid;place-content:center;text-align:center;padding:10px 4px;background:var(--c);color:#fff;font:700 54px/1 var(--pix)}
.tier[data-t=S] .label{font-size:72px}
.label small{display:block;margin-top:8px;font:700 13px/1 var(--body)}
.tier[data-t=A] .label,.tier[data-t=B] .label,.tier[data-t=C] .label{color:#10140f}
.card:focus-visible{outline:3px solid var(--focus);outline-offset:-7px}
.body{padding:12px;display:grid;gap:10px;align-content:start}
.feat{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"art nm sc" "art mt sc";gap:2px 14px;align-items:center;text-align:left;padding:12px 14px;border:0;background:var(--chip);color:var(--text);cursor:pointer;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent);font:inherit;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.card .art{grid-area:art;display:grid;place-content:center;width:var(--a,56px);height:var(--a,56px);background:color-mix(in srgb,var(--c) 22%,var(--ground))}
.card img{width:calc(var(--a,56px) - 10px);height:calc(var(--a,56px) - 10px);image-rendering:pixelated}
.card .nm{grid-area:nm;font-weight:800;font-size:var(--f,16px);line-height:1.25;align-self:end}
.card .mt{grid-area:mt;color:var(--muted);font-size:13px;align-self:start}
.card .sc{grid-area:sc;font:800 var(--sf,24px)/1 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--score)}
.tier[data-t=S] .card{--a:88px;--f:21px;--sf:44px;padding:16px}
.tier[data-t=S] .feat{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.tier[data-t=A] .feat{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.card .nm{min-width:0;overflow-wrap:anywhere}.card .sc{white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.chip{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px 4px 6px;border:0;background:var(--chip);color:var(--text);font:700 14px/1.2 var(--body);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.tier[data-t=C] .chip,.tier[data-t=D] .chip{font-weight:500;color:var(--muted)}
.chip img{width:28px;height:28px;image-rendering:pixelated;flex:none}
.chip b{font:800 15px/1 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--score);margin-left:4px;white-space:nowrap}
.card:hover,.chip:hover{box-shadow:inset 0 0 0 2px var(--hov)}
.more,.retry{min-height:44px;padding:0 14px;border:2px dashed var(--edge);background:transparent;color:var(--muted);font:700 14px var(--body);cursor:pointer}
.empty,.err{margin:0;color:var(--muted)}
.tier.void[data-t] .label{padding:6px 4px;font-size:30px}.tier.void[data-t] .label small{margin-top:4px}.tier.void .body{padding:6px 12px;align-content:center}
.errbox{padding:20px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--edge)}.errbox p{margin:0 0 12px}
.hit{position:relative;z-index:1;outline:4px solid var(--hi)}
.prefs{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}
.pref{min-height:44px;padding:0 12px;border:2px solid var(--edge);border-radius:0;background:transparent;color:var(--muted);font:700 13px var(--body);cursor:pointer}
/* Hiệu ứng đủ: chỉ animate transform/opacity, không box-shadow/layout. Mặc định ít hiệu ứng khi hệ thống yêu cầu giảm chuyển động, bật tiết kiệm dữ liệu hoặc máy ít RAM (prefs.js). */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes hitpop{0%,100%{transform:scale(1)}40%{transform:scale(1.05)}}
@keyframes glow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
html[data-fx=full]{scroll-behavior:smooth}
html[data-fx=full] .board.enter .tier{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
html[data-fx=full] .board.enter .tier:nth-child(2){animation-delay:.06s}html[data-fx=full] .board.enter .tier:nth-child(3){animation-delay:.12s}html[data-fx=full] .board.enter .tier:nth-child(4){animation-delay:.18s}html[data-fx=full] .board.enter .tier:nth-child(5){animation-delay:.24s}
html[data-fx=full] dialog[open]{animation:pop .24s ease-out}html[data-fx=full] dialog[open]::backdrop{animation:fade .24s ease-out}
html[data-fx=full] #spin.on{animation:fade .18s ease-out}
html[data-fx=full] .card,html[data-fx=full] .chip,html[data-fx=full] .fp,html[data-fx=full] .mode,html[data-fx=full] #pick{transition:transform .15s ease-out}
html[data-fx=full] .card:active,html[data-fx=full] .chip:active,html[data-fx=full] .fp:active,html[data-fx=full] .mode:active,html[data-fx=full] #pick:active{transform:scale(.97)}
html[data-fx=full] .hit{outline:0;animation:hitpop 1.4s ease-in-out 2}
html[data-fx=full] .hit:focus-visible{outline:3px solid var(--focus)}
html[data-fx=full] .hit::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 3px var(--hi),inset 0 0 28px color-mix(in srgb,var(--hi) 55%,transparent);animation:glow 1.4s ease-out 2}
footer{margin-top:32px;color:var(--muted);font-size:13px;line-height:1.6;text-align:center}footer a{color:var(--text);display:inline-block;padding:12px 8px}
dialog{border:3px solid var(--hi);border-radius:0;background:var(--panel);color:var(--text);padding:22px;width:min(92vw,440px)}
dialog::backdrop{background:rgba(8,5,16,.78)}
dialog h2{margin:0 56px 4px 0;font-size:24px;line-height:1.2}dialog p{margin:0 0 14px;color:var(--muted)}
#dArt{width:96px;height:96px;image-rendering:pixelated;display:block;margin:0 0 12px;background:color-mix(in srgb,var(--c,#c04dff) 25%,var(--ground));padding:8px}
dialog dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px}dialog dl div{background:var(--chip);padding:10px}
dt{font-size:13px;color:var(--muted)}dd{margin:2px 0 0;font:800 26px/1.1 var(--num);font-variant-numeric:tabular-nums}#dPrice{font-size:20px}
#dTier[data-t=S]{color:var(--tS)}#dTier[data-t=A]{color:var(--tA)}#dTier[data-t=B]{color:var(--tB)}#dTier[data-t=C]{color:var(--tC)}#dTier[data-t=D]{color:var(--tD)}
#dClose{position:absolute;right:12px;top:12px;min-height:44px;min-width:44px;padding:0 10px;background:transparent;border:2px solid var(--edge);color:var(--text);cursor:pointer;font:inherit}
#dMap{display:block;text-align:center;padding:12px;background:var(--hi);color:#1b1500;font:800 15px var(--body);text-decoration:none}
.dRow{display:flex;gap:8px;margin-top:8px}.dRow button{flex:1;min-height:44px;background:transparent;color:var(--text);border:2px solid var(--edge);border-radius:0;font:700 15px var(--body);cursor:pointer}
#dHelp{margin:-6px 0 14px;font-size:13px}
#dNote{margin:8px 0 0;font-size:13px;color:var(--text)}#dNote:empty{margin:0}
.modes :disabled,.tools :disabled{opacity:.5;cursor:not-allowed}
#spin{position:fixed;inset:0;z-index:20;display:none;place-content:center;background:rgba(8,5,16,.86);text-align:center}
#spin.on{display:grid}#spin img{width:140px;height:140px;image-rendering:pixelated;background:var(--panel);padding:14px;box-shadow:inset 0 0 0 3px var(--hi)}
#spin p{margin:14px 0 0;font:800 14px var(--body);letter-spacing:.12em;color:var(--hi)}
.noscript{padding:16px;text-align:center}
@media(max-width:600px){.tier{grid-template-columns:62px 1fr}.label{font-size:38px}.tier[data-t=S] .label{font-size:50px}.label small{font-size:13px}.feat{grid-template-columns:1fr}.card{--a:48px;--f:15px;--sf:22px;gap:2px 10px;padding:10px}.tier[data-t=S] .card{--a:60px;--f:17px;--sf:32px;padding:12px 10px}.card .mt{font-size:13px}.body{padding:8px 6px}header img{width:56px;height:56px}
 .tools{gap:8px}input[type=search]{flex:1 1 100%}select{flex:1 1 0;min-width:0}#pick{flex:0 0 auto}
 .prices{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;margin:0 -16px;padding-inline:16px;scroll-snap-type:x proximity}
 .modes{margin-top:8px}.mode{min-height:44px;padding:0 8px;font-size:14px}}
@media(min-width:1920px){.wrap{max-width:1560px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}html[data-fx=full] *,html[data-fx=full] *::after,html[data-fx=full] dialog::backdrop{animation:none!important;transition:none!important}html[data-fx=full] .hit{outline:4px solid var(--hi)}}