:root{
  --bg:#EEF2F7; --card:#FFFFFF; --card2:#F4F7FB;
  --ink:#0F1722; --ink2:#48586C; --ink3:#7C8A9C;
  --line:#DCE4EE; --line2:#EAEFF6;
  --brand:#27548A; --brand-sf:#E3EBF5;
  --ok:#1C7548; --ok-sf:#DEEFE7;
  --warn:#8E6210; --warn-sf:#F5EBD6;
  --danger:#A2353A; --danger-sf:#F6E3E4;
  --shadow:0 1px 2px rgba(15,23,34,.06), 0 10px 26px -18px rgba(15,23,34,.35);
  --f:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --nav-h:4.25rem;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0A0F16; --card:#141C26; --card2:#1B2531;
  --ink:#E6ECF4; --ink2:#A7B5C6; --ink3:#77869A;
  --line:#26313E; --line2:#1D2732;
  --brand:#7FADE0; --brand-sf:#182839;
  --ok:#62C08C; --ok-sf:#12291F;
  --warn:#D7AB54; --warn-sf:#292214;
  --danger:#E27C80; --danger-sf:#2C191A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -20px rgba(0,0,0,.8);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.an{display:none!important}

.khung{max-width:460px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:var(--nav-h)}
@media(min-width:520px){.khung{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.rong{max-width:1100px;margin:0 auto;padding:0 1rem 3rem}

.thanh{position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;padding:.85rem 1rem .9rem}
.thanh .ai{font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.thanh .phu{font-size:.78rem;opacity:.85;margin-top:.1rem}
.the-nho{margin-left:auto;font-size:.7rem;font-weight:600;background:rgba(255,255,255,.18);padding:.2rem .55rem;border-radius:99px;white-space:nowrap}
.the-nho.cho{background:#D7AB54;color:#2B2110}
.the-nho.xong{background:rgba(255,255,255,.22)}

.nut{background:var(--brand);color:#fff;font-weight:600;padding:.8rem 1.4rem;border-radius:11px;font-size:1rem;box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.nut:disabled{background:var(--card2);color:var(--ink3);box-shadow:none}
.nut.mo{background:var(--card2);color:var(--ink2);box-shadow:none;font-weight:500;border:1px solid var(--line)}
.nut.do{background:var(--danger-sf);color:var(--danger);box-shadow:none}
.nut.rong{width:100%}

.o{width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:11px;background:var(--card);outline:none}
.o:focus{border-color:var(--brand)}
.nhan{display:block;font-size:.8rem;color:var(--ink2);margin:0 0 .35rem;font-weight:500}

.hop{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--shadow)}
.rong-cot{display:flex;flex-direction:column;gap:.75rem}
.trong{text-align:center;color:var(--ink3);font-size:.9rem;padding:2.5rem 1rem}

.bao{position:fixed;left:50%;transform:translateX(-50%) translateY(1rem);bottom:calc(var(--nav-h) + 1rem);background:var(--ok);color:#fff;padding:.7rem 1.1rem;border-radius:11px;font-size:.9rem;font-weight:500;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 24px -8px rgba(0,0,0,.4);max-width:90vw;text-align:center}
.bao.hien{opacity:1;transform:translateX(-50%) translateY(0)}
.bao.loi{background:var(--danger)}

.tam{position:fixed;inset:0;z-index:70;background:rgba(10,15,22,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
.tam.hien{opacity:1;pointer-events:auto}
.tam-trong{background:var(--card);width:100%;max-width:460px;border-radius:16px 16px 0 0;padding:1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));transform:translateY(1.5rem);transition:transform .18s}
.tam.hien .tam-trong{transform:translateY(0)}
.tam h3{margin:0 0 .3rem;font-size:1.05rem;font-weight:700}
.tam p{margin:0 0 1rem;font-size:.88rem;color:var(--ink2)}
.tam-nut{display:flex;gap:.6rem}
.tam-nut .nut{flex:1}

table{border-collapse:collapse;width:100%;font-size:.88rem}
th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:.6rem .7rem;background:var(--card2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:.6rem .7rem;border-bottom:1px solid var(--line2);color:var(--ink2);vertical-align:top}
tr:last-child td{border-bottom:none}
.so{font-variant-numeric:tabular-nums;white-space:nowrap}
.cuon{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:var(--card)}

.the{display:inline-block;font-size:.68rem;font-weight:600;padding:.16rem .5rem;border-radius:99px;white-space:nowrap}
.the.ok{background:var(--ok-sf);color:var(--ok)}
.the.canh{background:var(--warn-sf);color:var(--warn)}
.the.xau{background:var(--danger-sf);color:var(--danger)}