/* Mì Quảng Bách Khoa · toàn bộ giao diện (biến màu sáng/tối ở đầu file) */
/* Layout: one-screen phone game — status strip, customer tables, bowl as hero, ingredient pad at thumb height; overlays for account, difficulty and rankings */
:root{
  color-scheme: light;
  --navy:#1B3A6B; --turmeric:#E8A317; --chili:#C8321E; --leaf:#2F6B3A;
  --paper:#FBF3E3; --ink:#2A2118; --muted:#7A6A55; --line:#E6D6B8; --card:#FFFDF8; --soft:#FFF4D6;
  --gold:#C99A1E; --silver:#8C96A3; --bronze:#A8663A;
  --heading:#1B3A6B; --toast-bg:#2A2118; --toast-fg:#FFFFFF; --on-warm:#2A2118; --shade:#E6D6B8;
  --win:#2E6CB5; --loss:#C8321E; --even:#8C96A3;
  --display:"Baloo 2","Be Vietnam Pro",system-ui,sans-serif;
  --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Giao diện tối: quán mì lúc đêm, nền xanh than */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme: dark;
  --navy:#2A5599; --turmeric:#F0B23A; --chili:#F26B55; --leaf:#62B373;
  --paper:#11161F; --ink:#F2EADB; --muted:#A99C88; --line:#2B3443; --card:#1A212D; --soft:#2E2817;
  --gold:#E2B54A; --silver:#A9B3C0; --bronze:#C98552;
  --heading:#A9C4F5; --toast-bg:#F2EADB; --toast-fg:#11161F; --shade:#0A0E15; --win:#5B91D9; --loss:#E0533F; --even:#7D8794}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --navy:#2A5599; --turmeric:#F0B23A; --chili:#F26B55; --leaf:#62B373;
  --paper:#11161F; --ink:#F2EADB; --muted:#A99C88; --line:#2B3443; --card:#1A212D; --soft:#2E2817;
  --gold:#E2B54A; --silver:#A9B3C0; --bronze:#C98552;
  --heading:#A9C4F5; --toast-bg:#F2EADB; --toast-fg:#11161F; --shade:#0A0E15; --win:#5B91D9; --loss:#E0533F; --even:#7D8794}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;overflow:hidden;
  -webkit-tap-highlight-color:transparent;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#app{height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px;position:relative;user-select:none;-webkit-user-select:none}

.bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stat{background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:5px 8px;min-width:0}
.stat b{display:block;font-family:var(--display);font-size:18px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat.time b{color:var(--chili)}
.hearts{color:var(--chili);display:flex!important;gap:2px;align-items:center;height:20px}
.hearts svg{width:11px;height:11px;flex:none}
.kitchen{display:contents}
.desk{display:none!important}
kbd{display:none;font:700 10px/1 var(--body);color:var(--muted);background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:3px 5px;min-width:18px;text-align:center}
@media (hover:hover) and (pointer:fine){
  kbd{display:inline-block}
  .ing{position:relative}.ing kbd{position:absolute;top:5px;right:5px}
  .cust kbd.k-table{position:absolute;top:6px;right:6px}
  .btn kbd{margin-left:8px;vertical-align:2px;background:transparent;color:inherit;border-color:currentColor;opacity:.7}
  .ing:hover{border-color:var(--turmeric)}
  .cust[data-i]:hover{border-color:var(--heading)}
}
.event{font-size:12px;font-weight:700;color:var(--heading);text-align:center;margin-top:-4px}
.event{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px}
.event .tag.rush{background:var(--chili);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6}}
.queue{display:inline-flex;align-items:center;gap:5px;color:var(--chili);font-weight:700}
.queue i{width:12px;height:12px;border-radius:50%;background:var(--c);display:inline-block}
.event .tag{display:inline-block;padding:1px 7px;border-radius:999px;color:#fff;margin-right:4px;font-size:11px}

.tables{display:grid;gap:8px;grid-template-columns:repeat(var(--n,3),1fr)}
.cust{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:7px 6px 8px;display:flex;flex-direction:column;gap:5px;align-items:center;min-height:132px;cursor:pointer;position:relative;transition:transform .12s;min-width:0}
.cust:active{transform:scale(.96)}
.cust.empty{border-style:dashed;justify-content:center;color:var(--muted);font-size:12px;cursor:default;background:transparent}
.cust.teacher{border-color:var(--heading);box-shadow:inset 0 0 0 1.5px var(--heading)}
.ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:12px;font-weight:800;line-height:1}
.who{font-size:11px;font-weight:700;text-align:center;line-height:1.2}
.order{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;background:var(--paper);border-radius:8px;padding:3px}
.order svg{width:20px;height:20px}
.pat{width:100%;height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:auto}
.pat i{display:block;height:100%;background:var(--leaf);border-radius:3px}
.quote{font-size:10px;color:var(--muted);text-align:center;line-height:1.25;font-style:italic}

.station{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#bowl{width:100%;max-width:300px;height:auto;max-height:100%}
.hint{font-size:13px;font-weight:600;color:var(--muted);text-align:center;min-height:18px}

.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.ing{font:inherit;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:6px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;color:var(--ink)}
.ing svg{width:30px;height:30px}
.ing span{font-size:11px;font-weight:700}
.ing.on{border-color:var(--turmeric);background:var(--soft)}
.ing:active{transform:scale(.94)}
.acts{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.btn{font:inherit;font-family:var(--display);font-weight:800;font-size:17px;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;color:#fff;background:var(--navy);text-align:center}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}

.btn.warm{background:var(--turmeric);color:var(--on-warm)}
.btn.pour{background:#C8321E}
.btn:disabled{opacity:.45;cursor:default}
.link{font:inherit;background:none;border:0;color:var(--heading);font-weight:700;text-decoration:underline;cursor:pointer;padding:4px 0;text-align:left}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--turmeric);outline-offset:2px}

/* overlays */
.ov{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;gap:14px;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:20px;z-index:5;overflow-y:auto;user-select:text;-webkit-user-select:text}
.ov > *{flex-shrink:0}
.ov .grow{margin-top:auto}
.ov{padding-bottom:52px!important}
.ov h1{font-family:var(--display);font-weight:800;font-size:42px;line-height:.95;margin:0;color:var(--heading);text-wrap:balance}
.ov h1 em{font-style:normal;color:var(--turmeric);display:block}
.ov h2{font-family:var(--display);font-size:28px;margin:0;line-height:1.05;color:var(--heading);text-wrap:balance}
.ov p{margin:0;line-height:1.5;max-width:60ch}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--chili)}
.steps{margin:0;padding-left:20px;line-height:1.6;font-size:14px}
.muted{color:var(--muted);font-size:13px}
.msg{font-size:13px;font-weight:600;min-height:18px;color:var(--chili)}
.msg.ok{color:var(--leaf)}
.col{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row > .btn{flex:1}
label{font-size:12px;font-weight:700;color:var(--muted);display:flex;flex-direction:column;gap:4px}
input,select{font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%}

.me{background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:end}
.me .nm{font-weight:700;font-size:16px}
.me .sub{font-size:12px;opacity:.8}
.me .pts{grid-row:1/3;grid-column:2;text-align:right;font-family:var(--display);font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.me .pts small{display:block;font-family:var(--body);font-size:11px;opacity:.8;font-weight:600}

.diffs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.diff.d-bk .x{color:var(--heading)}
.diff b{white-space:nowrap}
@media (max-width:420px){.diff b{font-size:13px}.diff .x{font-size:19px}.diff small{font-size:10px}.diff{padding:9px 3px}}
.diff{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.diff b{font-family:var(--display);font-size:17px;line-height:1}
.diff .x{font-family:var(--display);font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.diff small{font-size:11px;color:var(--muted);line-height:1.3}
.diff[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--soft)}
.diff.d-dianguc .x{color:var(--chili)}
.diff.d-kho .x{color:var(--turmeric)}
.diff.d-thuong .x{color:var(--leaf)}

.sum{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:15px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.sum b{font-variant-numeric:tabular-nums;text-align:right}
.big{font-family:var(--display);font-size:46px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.up{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px}
.up strong{font-size:14px}
.up small{grid-column:1;color:var(--muted);font-size:12px}
.up button{grid-row:1/3;grid-column:2;font:inherit;font-weight:700;font-size:13px;border:0;border-radius:10px;padding:8px 12px;background:var(--turmeric);color:var(--on-warm);cursor:pointer}
.up button:disabled{background:var(--line);color:var(--muted)}

/* bảng xếp hạng */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.tabs button{font:inherit;font-weight:700;border:0;background:transparent;border-radius:9px;padding:8px 4px;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--navy);color:#fff}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end}
.pod{background:var(--card);border:1.5px solid var(--line);border-radius:12px 12px 4px 4px;padding:10px 6px;text-align:center;min-width:0;display:flex;flex-direction:column;gap:2px}
.pod .rk{font-family:var(--display);font-size:26px;font-weight:800;line-height:1}
.pod .nm{font-weight:700;font-size:13px;overflow-wrap:anywhere;line-height:1.25}
.pod .sb{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.pod .pt{font-family:var(--display);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.pod.r1{border-color:var(--gold);padding-block:18px 12px;background:var(--soft)} .pod.r1 .rk{color:var(--gold)}
.pod.r2 .rk{color:var(--silver)} .pod.r3 .rk{color:var(--bronze)}
.list{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:9px 12px;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .rk{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.li .nm{font-weight:700;min-width:0;overflow-wrap:anywhere}
.li .sb{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.li .pt{font-family:var(--display);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.li.mine{background:var(--soft);box-shadow:inset 3px 0 0 var(--turmeric)}
.empty-state{padding:22px 14px;text-align:center;color:var(--muted)}
.donate{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:14px;align-items:start}
.donate img{width:100%;height:auto;border-radius:14px;border:1.5px solid var(--line);background:#fff}
@media (max-width:620px){.donate{grid-template-columns:1fr;justify-items:center}.donate img{max-width:280px}.donate .list{width:100%}}
.theme{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:700}
.theme span{margin-right:4px}
.theme button{font:inherit;font-size:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 11px;cursor:pointer}
.theme button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.heart-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:10px 14px}
.heart-row .lbl{font-weight:700}
.hearts.big{color:var(--chili);display:inline-flex;gap:3px}.hearts.big svg{width:20px;height:20px}
.plus{font:800 20px/1 var(--display);width:36px;height:36px;border-radius:50%;border:0;background:var(--chili);color:#fff;cursor:pointer;display:grid;place-items:center}
.plus:disabled{background:var(--line);color:var(--muted);cursor:default}
/* ===== Chuỗi ngày ===== */
.streak-pill{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;color:var(--muted)}
.streak-pill .flame{width:24px;height:30px;flex:none}
.streak-pill b{font-family:var(--display);font-size:22px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.streak-pill span{font-size:12px;font-weight:600;line-height:1.3}
.streak-pill.on{border-color:#F59A2A;background:var(--soft)}
.streak-pill.on b{color:#E8661E}
.streak-stage{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-block:auto}
.flame-wrap{position:relative;width:160px;height:190px;margin-bottom:-6px}
.flame-wrap .flame{position:absolute;left:20px;top:10px;width:120px;height:150px;transform-origin:50% 90%}
.glow{position:absolute;left:50%;top:55%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,40,.55),rgba(255,120,30,.18) 45%,transparent 70%);opacity:0;animation:glowIn .9s .7s ease-out forwards}
.f-gray{animation:grayOut .5s .55s ease-in forwards}
.f-lit{opacity:0;transform:scale(.25);animation:litPop .7s .65s cubic-bezier(.2,1.6,.4,1) forwards,flicker 1.6s 1.4s ease-in-out infinite}
.sparks{position:absolute;left:50%;bottom:34px}
.sparks i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#FFB23A;box-shadow:0 0 6px #FF8A1F;opacity:0;
  animation:spark 1.1s var(--d) ease-out forwards}
.streak-num b{display:inline-block;font-family:var(--display);font-weight:800;font-size:64px;line-height:1;color:#E8661E;font-variant-numeric:tabular-nums}
.streak-num b.pop{animation:numPop .5s cubic-bezier(.2,1.8,.4,1)}
.record{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#E8661E;border-radius:999px;padding:4px 12px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;max-width:360px;margin-top:4px}
.wd{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--muted)}
.wd i{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;font-style:normal;color:#fff;font-size:14px}
.wd.on i{background:#F59A2A;border-color:#F59A2A}
.wd.today i{border-color:#F59A2A;animation:todayLit .4s 1.1s ease-out forwards}
.wd.today span{color:#E8661E}
.wd.future i{opacity:.5}
.streak-stage .btn{width:100%;max-width:360px;margin-top:8px}
@keyframes grayOut{to{opacity:0;transform:scale(.85)}}
@keyframes litPop{0%{opacity:0;transform:scale(.25)}100%{opacity:1;transform:scale(1)}}
@keyframes flicker{0%,100%{transform:scale(1) skewX(0)}30%{transform:scale(1.04,.97) skewX(-2deg)}60%{transform:scale(.97,1.04) skewX(2deg)}}
@keyframes glowIn{to{opacity:1}}
@keyframes spark{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),-150px) scale(.4)}}
@keyframes numPop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes todayLit{to{background:#F59A2A;box-shadow:0 0 0 4px rgba(245,154,42,.25)}}
@media (prefers-reduced-motion:reduce){
  .f-gray{display:none}.f-lit{opacity:1;transform:none;animation:none}.glow{opacity:1;animation:none}.sparks{display:none}
  .wd.today i{background:#F59A2A;animation:none}.streak-num b.pop{animation:none}}
@media (min-width:900px) and (min-height:560px){.streak-stage{max-width:520px!important}.flame-wrap{transform:scale(1.15)}}
.av{border-radius:50%;object-fit:cover;flex:none;display:inline-block;background:var(--line)}
.av-txt{display:inline-grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;line-height:1}
.me.has-av{grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px}
.me.has-av .me-av{grid-row:1/3;align-self:center;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.me.has-av .nm,.me.has-av .sub{grid-column:2}
.me.has-av .pts{grid-column:3}
.me-btn{width:100%;border:0;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.me-btn .nm,.me-btn .sub,.me-btn .pts{display:block}.me-btn:active{transform:scale(.985)}
.me-btn:focus-visible{outline:3px solid var(--turmeric);outline-offset:3px}
.me-av-w{position:relative;grid-row:1/3;align-self:center;display:block}
.me-pen{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:var(--turmeric);color:var(--on-warm);display:grid;place-items:center;box-shadow:0 0 0 2px var(--navy)}
.me-pen svg{width:11px;height:11px}
.me .pts2{grid-row:3;grid-column:1/-1;display:flex;gap:28px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18)}
.me .pts2 b{display:block;font-family:var(--display);font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.me .pts2 small{display:block;font-size:12px;opacity:.85;font-weight:600;margin-top:4px;white-space:nowrap}
.li .nm.with-av{display:flex;align-items:center;gap:10px}
.pod .pod-av{margin:0 auto 4px;box-shadow:0 0 0 3px var(--card)}
.pod.r1 .pod-av{box-shadow:0 0 0 3px var(--gold)}
.av-edit{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
.av-edit .row .link{font-size:13px}
.crop{position:relative;width:min(300px,100%);aspect-ratio:1;max-width:100%;margin:0 auto;border-radius:16px;overflow:hidden;touch-action:none;cursor:grab;background:#000;user-select:none}
.crop:active{cursor:grabbing}
.crop canvas{width:100%;height:100%;display:block}
.crop .ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.55);outline:2px solid rgba(255,255,255,.85);outline-offset:-2px;pointer-events:none}
.zoom{flex-direction:row!important;align-items:center;gap:10px!important;max-width:300px;width:100%;margin:0 auto}
.zoom input{flex:1;padding:0;accent-color:var(--turmeric)}
.station{position:relative}
.snd-slot{position:absolute;top:2px;right:0;z-index:2}
.snd{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:6px 8px;cursor:pointer}
.snd svg{width:18px;height:18px}
.snd-l{padding:5px 11px}
.snd[aria-pressed="false"]{opacity:.75}
.submitting{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--leaf);font-size:14px}
.coin{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE38A,#E8A317 60%,#B97C0C);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);animation:coinspin .48s linear infinite}
@keyframes coinspin{0%{transform:scaleX(1)}50%{transform:scaleX(.1)}100%{transform:scaleX(1)}}
.pop-in{animation:popin .35s cubic-bezier(.2,1.7,.4,1)}
@keyframes popin{0%{transform:scale(.6);opacity:.3}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.coin,.pop-in{animation:none}}
.rule{font-size:12px;color:var(--muted);line-height:1.5}
table.tb{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tb th,.tb td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:right}
.tb th:first-child,.tb td:first-child{text-align:left}

.ptr{position:absolute;left:50%;top:0;z-index:7;width:40px;height:40px;margin-left:-20px;border-radius:50%;
  background:var(--card);border:1.5px solid var(--line);box-shadow:0 2px 8px rgba(42,33,24,.15);display:grid;place-items:center;
  color:var(--heading);transform:translateY(-48px);opacity:0;pointer-events:none}
.ptr svg{width:20px;height:20px;transition:transform .15s}
.ptr.ready svg{transform:rotate(180deg)}
.ptr.spin svg{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
.ov{overscroll-behavior-y:contain}
.visits{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:12px;z-index:6;display:flex;align-items:center;gap:6px;
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;pointer-events:none;line-height:1}
.visits svg{width:15px;height:15px;flex:none}
.visits b{color:var(--heading);font-size:13px}
.float{position:absolute;font-family:var(--display);font-weight:800;font-size:20px;pointer-events:none;z-index:4;animation:up 1s ease-out forwards}
@keyframes up{to{transform:translateY(-40px);opacity:0}}
.toast{position:absolute;left:50%;top:42%;transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-fg);font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;z-index:6;pointer-events:none;white-space:nowrap}
.shake{animation:sh .35s}
@keyframes sh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.float,.shake{animation:none}.float{display:none}}
/* ===== Solo: thông báo thách đấu, tìm người chơi, màn đấu ===== */
.notices{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(52px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-direction:column;gap:10px;width:min(340px,calc(100vw - 32px));pointer-events:none}
.notice{pointer-events:auto;background:var(--card);color:var(--ink);border:1.5px solid var(--turmeric);border-radius:16px;box-shadow:0 14px 36px rgba(20,16,10,.25);padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;animation:noticeIn .38s cubic-bezier(.2,1.4,.4,1)}
.notice > .av{grid-row:1/3}
.notice .t{font-weight:800;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.notice .d{font-size:12px;color:var(--muted);line-height:1.35}
.notice .note{grid-column:1/3;font-size:12px;color:var(--chili);font-weight:600;margin-top:4px}
.notice .timer{grid-column:1/3;height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:8px}
.notice .timer i{display:block;height:100%;background:var(--turmeric);transform-origin:left;animation:noticeT linear forwards}
.notice .acts2{grid-column:1/3;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:8px}
.notice .acts2 .btn{font-size:15px;padding:8px 10px}
.notice.out{transition:opacity .25s,transform .25s;opacity:0;transform:translateX(30px)}
@keyframes noticeIn{from{transform:translateY(28px) scale(.95);opacity:0}}
@keyframes noticeT{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.notice{animation:none}}
.search{position:relative}
.search input{padding-left:40px}
.search svg{position:absolute;left:13px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
.li .act{font:inherit;font-weight:800;font-size:13px;border:0;border-radius:10px;padding:8px 12px;background:var(--navy);color:#fff;cursor:pointer;white-space:nowrap}
[data-uid][role=button]{cursor:pointer}
.li[data-uid]:hover,.pod[data-uid]:hover{border-color:var(--heading)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--leaf);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 2px var(--card)}
.tabs.t4{grid-template-columns:repeat(4,1fr)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px}
.mode b{font-family:var(--display);font-size:17px;line-height:1.1}
.mode small{font-size:12px;color:var(--muted);line-height:1.35}
.mode[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--soft)}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;text-align:center;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 10px}
.vs .p{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.vs .p .nm{font-weight:800;overflow-wrap:anywhere;line-height:1.25}
.vs .p .sb{font-size:12px;color:var(--muted)}
.vs .x{font-family:var(--display);font-weight:800;font-size:28px;color:var(--chili)}
.opp{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:2px 9px 2px 2px;font-size:12px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.opp .av-txt{font-size:8px!important}
.opp .hearts{color:var(--chili);display:inline-flex;gap:1px;height:auto}.opp .hearts svg{width:10px;height:10px}
.countdown{font-family:var(--display);font-weight:800;font-size:132px;line-height:1;color:var(--heading);text-align:center;margin-block:auto;font-variant-numeric:tabular-nums}
.push-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;background:var(--card);border:1.5px solid var(--turmeric);border-radius:12px;padding:10px 12px}
.push-card > svg{width:24px;height:24px;color:var(--turmeric)}
.push-card span{font-size:13px;line-height:1.4;font-weight:600}
.push-card .btn{grid-column:1/3;font-size:15px;padding:8px 12px}
.push-card .link{grid-column:1/3;font-size:13px;justify-self:center;padding:0}
.push-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
.push-row svg{width:22px;height:22px;color:var(--turmeric);flex:none}
.push-row span{flex:1;min-width:160px;font-size:13px}
/* ===== Màn hiệu ứng thắng / thua ===== */
.fx{position:absolute;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;padding:24px;touch-action:none}
.fx canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx .ttl{position:relative;text-align:center;font-family:var(--display);font-weight:800;font-size:64px;line-height:1;max-width:560px;text-wrap:balance}
.fx .ttl small{display:block;font-family:var(--body);font-weight:700;font-size:16px;line-height:1.4;margin-top:12px}
.fx.win{background:radial-gradient(circle at 50% 55%,rgba(255,214,102,.55),rgba(251,243,227,.35) 45%,transparent 75%)}
.fx.win .ttl{color:var(--heading);animation:fxPop .7s cubic-bezier(.2,1.7,.4,1) both}
.fx.win .ttl small{color:var(--ink)}
.fx.lose{animation:fxDim .5s ease-out forwards}
.fx.lose .ttl{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);animation:fxDrop .8s cubic-bezier(.3,1.5,.5,1) .15s both}
.fx.lose .ttl small{color:#E6DCCB}
.fx.draw{background:rgba(251,243,227,.6)}
.fx.draw .ttl{color:var(--heading);animation:fxPop .6s ease-out both}
.fx.out{transition:opacity .45s;opacity:0}
.fx.win.out{transition:opacity 1.6s ease-in;background:transparent}
.fx.out .ttl{opacity:0;transition:opacity .2s;animation:none}
#app.fx-lose > :not(.fx){filter:grayscale(1) brightness(.75);transition:filter .5s}
#app.fx-lose{animation:sh .35s 2}
#app.fx-win > :not(.fx),#app.fx-draw > :not(.fx){filter:saturate(.7) blur(1.5px);transition:filter .4s}
.btn.locked,.link.locked{opacity:.35;transition:opacity .3s}
@keyframes fxPop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fxDrop{0%{transform:translateY(-60px);opacity:0}100%{transform:none;opacity:1}}
@keyframes fxDim{from{background:rgba(17,22,31,0)}to{background:rgba(17,22,31,.62)}}
@media (min-width:900px) and (min-height:560px){.fx .ttl{font-size:96px}.fx .ttl small{font-size:18px}}
@media (prefers-reduced-motion:reduce){.fx .ttl{animation:none!important}#app.fx-lose{animation:none}}
/* ===== Tạm dừng / bỏ cuộc / xin hoà ===== */
.pause-slot{position:absolute;top:2px;left:0;z-index:2}
.pz{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.pz svg{width:18px;height:18px}
.pz:hover{border-color:var(--heading);color:var(--heading)}
.float-panel{position:absolute;left:50%;top:72px;transform:translateX(-50%);z-index:9;width:min(340px,calc(100% - 32px));background:var(--card);
  border:1.5px solid var(--turmeric);border-radius:14px;box-shadow:0 12px 30px rgba(20,16,10,.25);padding:12px;display:flex;flex-direction:column;gap:8px;animation:noticeIn .3s ease-out}
.float-panel .fp-t{font-weight:800;text-align:center}
.float-panel .btn{font-size:15px;padding:9px 12px}
.float-panel .link{align-self:center}
.float-panel .fp-row{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.float-panel .timer{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.float-panel .timer i{display:block;height:100%;background:var(--turmeric);transform-origin:left;animation:noticeT linear forwards}
/* ===== Hồ sơ, ván đấu, thống kê ===== */
.kq{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;font:800 18px/1 var(--display)}
.kq.win{background:var(--win)}.kq.loss{background:var(--loss)}.kq.even{background:var(--even)}
.list.games .li.game{grid-template-columns:26px minmax(0,1fr) auto;font:inherit;color:inherit;background:none;border:0;border-top:1px solid var(--line);text-align:left;cursor:pointer;width:100%}
.list.games .li.game:first-child{border-top:0}
.list.games .li.game:hover{background:var(--soft)}
.li .pt .elo-doi{display:block;text-align:right}
.li .pt .xem{display:block;font:700 11px/1.2 var(--body);color:var(--heading);text-align:right}
.card-s{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.card-s h3{margin:0;font-family:var(--display);font-size:20px;color:var(--heading)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile{background:var(--paper);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.tile span{font-size:11px;color:var(--muted);font-weight:700}
.tile b{font-family:var(--display);font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
.wdl{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden}
.wdl i{display:block;min-width:4px}.wdl .win{background:var(--win)}.wdl .even{background:var(--even)}.wdl .loss{background:var(--loss)}
.wdl-l{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.wdl-l span{display:inline-flex;align-items:center;gap:6px}.wdl-l .kq{width:18px;height:18px;font-size:13px;border-radius:5px}
.chart-t{font-size:12px;font-weight:700;color:var(--muted);margin-top:4px}
.chart{position:relative;touch-action:pan-y}
.chart svg{display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}.chart .base{stroke:var(--muted);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:10px;font-family:var(--body)}
.chart .ln{fill:none;stroke:var(--win);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--win);stroke:var(--card);stroke-width:2}
.chart .xh{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.chart .up{fill:var(--win)}.chart .down{fill:var(--loss)}.chart .hit{fill:transparent;cursor:pointer}
.ctip{position:absolute;z-index:3;width:150px;background:var(--toast-bg);color:var(--toast-fg);font-size:12px;line-height:1.4;border-radius:8px;padding:6px 8px;pointer-events:none}
/* ===== Xem lại ===== */
.rp-stage{display:grid;gap:10px}
@media (min-width:700px){.rp-stage.n2{grid-template-columns:1fr 1fr}}
.rp-view{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.rp-head{display:flex;align-items:center;gap:8px}.rp-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-head .hearts{color:var(--chili);display:inline-flex;gap:1px}.rp-head .hearts svg{width:12px;height:12px}
.rp-kq{font:800 11px/1.5 var(--body);color:#fff;border-radius:999px;padding:0 8px;white-space:nowrap}
.rp-kq.win{background:var(--win)}.rp-kq.loss{background:var(--loss)}.rp-kq.even{background:var(--even)}
.rp-ket{background:var(--card);border:1.5px solid var(--line);border-left:6px solid var(--even);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:4px;animation:rpKetIn .35s ease-out}
.rp-ket.win{border-left-color:var(--win)}.rp-ket.loss{border-left-color:var(--loss)}
.rp-ket-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:17px}.rp-ket-t small{color:var(--muted);font-size:13px}
.rp-ket-s{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:13px}.rp-ket-s b{color:var(--ink)}
@keyframes rpKetIn{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.rp-ket{animation:none}}
.rp-stats{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.rp-stats b{color:var(--ink)}
.rp-stats .tag,.rp-bowl .tag{border-radius:999px;color:#fff;padding:0 7px;font-size:11px;font-weight:700}.rp-stats .tag.rush{background:var(--chili)}.rp-bowl .tag.broth{background:var(--turmeric);color:var(--on-warm)}
.rp-tables{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px}
.rp-c{border:1.5px solid var(--line);border-radius:10px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:74px;background:var(--paper)}
.rp-c.teacher{border-color:var(--heading)}.rp-c.empty{border-style:dashed;justify-content:center;color:var(--muted);font-size:11px;background:transparent}
.rp-c .ava{width:26px;height:26px;font-size:9px}.rp-c .order{display:flex;flex-wrap:wrap;justify-content:center;gap:1px}.rp-c .order svg{width:15px;height:15px}
.rp-c .pat{height:4px}
.rp-q{font-size:11px;font-weight:700;color:var(--chili);display:flex;align-items:center;gap:4px;min-height:14px}
.rp-q i{width:10px;height:10px;border-radius:50%;background:var(--c);display:inline-block}
.rp-bowl{display:flex;align-items:center;gap:8px;min-height:24px}.rp-b{display:flex;gap:2px}.rp-b svg{width:22px;height:22px}.rp-b em{font-size:12px;color:var(--muted)}
.rp-log{display:flex;flex-direction:column;gap:1px;font-size:12px;min-height:58px}
.rp-log .good{color:var(--leaf);font-weight:700}.rp-log .bad{color:var(--chili);font-weight:700}.rp-log .day,.rp-log .shop{color:var(--heading);font-weight:700}
.rp-ctl{position:sticky;bottom:-52px;z-index:2;background:var(--paper);display:flex;flex-direction:column;gap:6px;padding:8px 0}
.rp-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rp-play{min-width:96px;padding:8px 16px}
.rp-ic{display:inline-grid;place-items:center;padding-inline:10px}.rp-ic svg{width:16px;height:16px}
@media (max-width:420px){.rp-btns{gap:6px}.rp-play{min-width:76px;padding:8px 12px}}
.rp-speed{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;margin-left:auto}
.rp-speed button{font:inherit;font-size:12px;font-weight:700;border:0;background:var(--card);color:var(--muted);padding:6px 9px;cursor:pointer}
.rp-speed button[aria-pressed="true"]{background:var(--navy);color:#fff}
.rp-bar{position:relative;padding-bottom:14px}.rp-bar input{width:100%;padding:0;accent-color:var(--turmeric)}
.rp-days{position:absolute;left:0;right:0;bottom:0;height:12px}
.rp-days i{position:absolute;transform:translateX(-50%);font:700 10px/1 var(--body);color:var(--muted);font-style:normal}
.rp-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rp-moves{max-height:320px;overflow-y:auto;overscroll-behavior:contain}
.rp-mv{font:inherit;color:var(--muted);background:none;border:0;border-top:1px solid var(--line);text-align:left;cursor:pointer;width:100%;grid-template-columns:44px 1fr!important}
.rp-mv.done{color:var(--ink)}.rp-mv.cur{background:var(--soft)}.rp-mv.good .nm{color:var(--leaf)}.rp-mv.bad .nm{color:var(--chili)}
.rp-mv.done.good .nm,.rp-mv.done.bad .nm{font-weight:700}
@media (max-width:340px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.rp-view{padding:8px;gap:4px}.rp-c{min-height:52px;padding:4px}.rp-c .ava{width:20px;height:20px;font-size:8px}.rp-c .order svg{width:13px;height:13px}
  .rp-log{min-height:34px}.rp-log span:nth-child(n+3){display:none}.rp-bowl{min-height:20px}.rp-b svg{width:18px;height:18px}.rp-q{min-height:0}}
.st-badge{display:inline-block;font:700 10px/1.4 var(--body);color:var(--on-warm);background:var(--turmeric);border-radius:999px;padding:0 7px;vertical-align:2px;white-space:nowrap}
.pod .st-badge{margin:2px auto 0}
.li .act:disabled{background:var(--line);color:var(--muted);cursor:default}
.msg.warn{color:var(--heading)}
.hs-act{gap:8px;flex-wrap:wrap}.hs-act .btn{flex:1;min-width:140px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--chili);margin-right:6px;vertical-align:1px;animation:livePulse 1.4s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.live-tag{color:var(--chili);font-weight:800}
.li .act.watch{background:var(--navy);color:#fff}
.li[data-prof]{cursor:pointer}
.xem-ket{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;line-height:1.5}
/* ======== Laptop / màn hình rộng ======== */
@media (min-width:900px) and (min-height:560px){
  .desk{display:revert!important}
  .mob{display:none!important}
  #app{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto auto auto minmax(0,1fr);
    column-gap:28px;row-gap:12px;padding-block:20px}
  .bar{grid-column:1;grid-row:1}
  .event{grid-column:1;grid-row:2;margin-top:0;justify-content:flex-start;font-size:13px}
  .tables{grid-column:1;grid-row:3;gap:12px}
  .station{grid-column:1;grid-row:4}
  .kitchen{grid-column:2;grid-row:1/5;display:flex;flex-direction:column;gap:12px;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px;min-height:0}
  .k-head{display:flex!important;flex-direction:column;gap:2px}
  .k-head b{font-family:var(--display);font-size:24px;line-height:1;color:var(--heading)}
  .k-head span{font-size:12px;color:var(--muted)}
  .kitchen .pad{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1;align-content:start}
  .ing{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;background:var(--paper)}
  .ing svg{width:34px;height:34px}
  .ing span{font-size:14px}
  .acts{grid-template-columns:1fr 1.7fr}
  .stat{padding:8px 12px}
  .stat b{font-size:24px}
  .stat span{font-size:11px}
  .hearts{height:28px}.hearts svg{width:17px;height:17px}
  .cust{min-height:178px;padding:12px 10px 12px;gap:7px}
  .ava{width:46px;height:46px;font-size:14px}
  .who{font-size:13px}
  .order svg{width:26px;height:26px}
  .quote{font-size:12px}
  #bowl{max-width:440px}
  .hint{font-size:15px}
  /* màn phủ */
  .ov{align-items:center;padding-block:36px}
  .ov > *{width:100%;max-width:640px}
  .ov > .grow{margin-top:8px}
  .ov h1{font-size:76px;line-height:.9}
  .ov h2{font-size:38px}
  .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;margin-block:auto;max-width:1060px!important}
  .split-a,.split-b{display:flex;flex-direction:column;gap:16px;min-width:0}
  .split-b{background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:28px}
  .split-b .grow{margin-top:8px}
  .hero-icon{width:88px;height:88px;border-radius:22px;box-shadow:0 8px 24px rgba(27,58,107,.18)}
  .keys kbd{display:inline-block}
  .podium{gap:14px}
  .ov > p{max-width:640px}
  #shop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:390px){
  .bar{gap:4px}
  .stat{padding:5px 6px}
  .stat b{font-size:15px}
  .stat span{font-size:9px;letter-spacing:.03em}
  .hearts{gap:1px}.hearts svg{width:10px;height:10px}
}
.split,.split-a,.split-b{display:contents}
@media (min-width:900px) and (min-height:560px){.split{display:grid}.split-a,.split-b{display:flex}}
@media (max-height:640px){.cust{min-height:112px}.quote{display:none}.ov h1{font-size:34px}}

/* ===== Biểu đồ: dòng số liệu phía trên, rê/kéo ngang để chọn (bản 2.14.0) ===== */
.cread{min-height:40px;margin:2px 0 6px;padding:6px 10px;border-radius:10px;background:var(--soft);font-size:13px;line-height:1.45;color:var(--ink)}
.chart .hit{cursor:crosshair}
.chart svg:focus-visible{outline:2px solid var(--turmeric);outline-offset:4px;border-radius:6px}
.chart .bar{transition:opacity .12s}.chart .bar.mo{opacity:.4}

/* ===== Bạn bè, chuông thông báo (bản 2.14.0) ===== */
.home-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.chuong{position:relative;flex:none;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--heading);display:grid;place-items:center;cursor:pointer}
.chuong svg{width:21px;height:21px}
.bb-so{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--chili);color:#fff;font:800 11px/1 var(--body);vertical-align:2px}
.chuong .bb-so{position:absolute;top:-4px;right:-4px;box-shadow:0 0 0 2px var(--paper)}
.bb-dem{color:var(--muted);font-weight:600}
.kb-row{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn.kb{display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn.kb svg{width:17px;height:17px}
.btn.kb.on{color:var(--win);border-color:var(--win)}
.li .kb-row .btn{padding:6px 12px;font-size:13px;min-height:0}
.tb-li.moi{background:var(--soft)}
.tb-li .nm{display:flex;flex-direction:column;gap:3px}
.rp-act{gap:8px;flex-wrap:wrap}.rp-act .btn{padding:7px 14px;font-size:14px}
.hs-act .kb-row{flex:1 1 100%}.hs-act .kb-row .btn{flex:1}
.kb-row .btn{width:auto;flex:none}.rp-act .btn{width:auto;white-space:nowrap}
/* bản 2.14.2: bấm tên/avatar trong xem lại để mở hồ sơ; nút huỷ kết bạn tách riêng */
.rp-head .rp-who{display:flex;align-items:center;gap:8px;flex:1;min-width:0;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rp-head .rp-who b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.rp-head .rp-who:hover b{text-decoration-color:currentColor}
.rp-head .rp-who:focus-visible{outline:2px solid var(--turmeric);outline-offset:3px;border-radius:6px}
.rp-head .rp-hr{display:inline-flex;align-items:center;gap:8px}
.kb-on{display:inline-flex;align-items:center;justify-content:center;gap:4px;color:var(--win);font-weight:700;padding:8px 6px;white-space:nowrap}
.hs-act .kb-row .kb-on{flex:1}
.btn.kb-bo{color:var(--muted)}.btn.kb-bo.canh-bao{color:var(--loss);border-color:var(--loss)}

/* ===== Phân hạng (bản 2.15.0): danh hiệu Elo màu kiểu Codeforces, huy hiệu ĐBK ===== */
:root{--r-newbie:#808080;--r-pupil:#008000;--r-specialist:#03A89E;--r-expert:#0000FF;--r-cm:#AA00AA;--r-master:#E07800;--r-gm:#E00000}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--r-newbie:#A3A9B0;--r-pupil:#46B954;--r-specialist:#2CC7B8;--r-expert:#7E96FF;--r-cm:#D877D8;--r-master:#FFA347;--r-gm:#FF5C5C}}
:root[data-theme="dark"]{--r-newbie:#A3A9B0;--r-pupil:#46B954;--r-specialist:#2CC7B8;--r-expert:#7E96FF;--r-cm:#D877D8;--r-master:#FFA347;--r-gm:#FF5C5C}
.r-newbie{--rc:var(--r-newbie)}.r-pupil{--rc:var(--r-pupil)}.r-specialist{--rc:var(--r-specialist)}.r-expert{--rc:var(--r-expert)}
.r-cm{--rc:var(--r-cm)}.r-master,.r-im{--rc:var(--r-master)}.r-gm,.r-igm,.r-lgm{--rc:var(--r-gm)}
.elo-t{display:inline-block;color:var(--rc);font-weight:800;white-space:nowrap}
.elo-t.r-lgm::first-letter,.ten-elo.r-lgm::first-letter{color:var(--ink)}
.elo-t.chip{--r-newbie:#808080;--r-pupil:#008000;--r-specialist:#03A89E;--r-expert:#0000FF;--r-cm:#AA00AA;--r-master:#E07800;--r-gm:#E00000;
  background:#fff;border-radius:999px;padding:0 8px;font-size:12px;line-height:1.6;vertical-align:1px}
.elo-t.chip.r-lgm::first-letter{color:#000}
.ten-elo{display:inline-block;color:var(--rc);font-weight:800}
.hang-logo{display:inline-block;vertical-align:middle;flex:none;overflow:visible}
.pt .hang-logo{margin-right:4px;vertical-align:-5px}
.hang-the{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--soft)}
.hang-tt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.hang-tt b{font-size:16px}
.hang-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}.hang-bar i{display:block;height:100%;border-radius:999px}
.hang-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px 10px;margin-top:8px}
.hang-ds span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.hang-ds small{color:var(--muted);flex-basis:100%;padding-left:32px;margin-top:-4px}
.hang-ds.elo{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.hang-ds.elo small{padding-left:0;margin-top:0}
.len-hang{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--soft);font-size:15px;animation:rpKetIn .4s ease-out}
.len-hang.xuong{opacity:.85}
.me .pts .hang-logo{display:block;margin:0 0 2px auto}
.pts2 .hang-row{display:flex;align-items:center;gap:6px}