[hidden] { display: none !important; }
:root {
  --nen: #f4f6f8; --the: #ffffff; --chu: #1c2733; --mo: #637381; --vien: #e3e8ee;
  --chinh: #0f766e; --chinh-nhat: #e6f4f2; --do: #c62828; --do-nhat: #fdecea; --vang: #b26a00; --vang-nhat: #fff4e0;
  --xanh: #1565c0; --xanh-nhat: #e8f0fb; --luc: #2e7d32; --luc-nhat: #e8f5e9; --xam-nhat: #eef1f4;
  --bo: 12px; --bong: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0f1419; --the: #182029; --chu: #e6edf3; --mo: #95a3b3; --vien: #2a3542;
    --chinh: #2dd4bf; --chinh-nhat: #12302d; --do: #f87171; --do-nhat: #3a1d1d; --vang: #fbbf24; --vang-nhat: #352a12;
    --xanh: #60a5fa; --xanh-nhat: #172a42; --luc: #4ade80; --luc-nhat: #15301e; --xam-nhat: #222c37;
    --bong: none;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nen); color: var(--chu); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--chinh); }
.tai { padding: 40px; text-align: center; color: var(--mo); }

header.dau { position: sticky; top: 0; z-index: 5; background: var(--chinh); color: #fff; padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; }
@media (prefers-color-scheme: dark) { header.dau { background: #0b3b37; } }
header.dau h1 { font-size: 17px; margin: 0; flex: 1; font-weight: 600; }
header.dau .nho { font-size: 13px; opacity: .85; }
header.dau button { background: rgba(255,255,255,.15); border: 0; color: #fff; padding: 6px 10px; border-radius: 8px; cursor: pointer; }

main { max-width: 1200px; margin: 0 auto; padding: 16px; }
.the { background: var(--the); border-radius: var(--bo); box-shadow: var(--bong); padding: 16px; margin-bottom: 12px; border: 1px solid var(--vien); }
.the h2 { font-size: 16px; margin: 0 0 10px; }
.the h3 { font-size: 15px; margin: 0 0 8px; }
.hang { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gian { flex: 1; }
.mo { color: var(--mo); }
.nho { font-size: 13px; }
.dam { font-weight: 600; }
.phai { text-align: right; }
.luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.so { background: var(--xam-nhat); border-radius: 10px; padding: 10px 12px; }
.so b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.so span { font-size: 12.5px; color: var(--mo); }

nav.duoi { position: fixed; bottom: 0; left: 0; right: 0; background: var(--the); border-top: 1px solid var(--vien);
  display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 6; }
nav.duoi a { flex: 1; text-align: center; padding: 8px 2px 7px; color: var(--mo); text-decoration: none; font-size: 11.5px; }
nav.duoi a .bt { display: block; font-size: 20px; line-height: 1.2; }
nav.duoi a.chon { color: var(--chinh); font-weight: 600; }

.tab-con { display: flex; gap: 6px; overflow-x: auto; margin: -4px 0 12px; padding-bottom: 4px; scrollbar-width: none; }
.tab-con a { white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--the); border: 1px solid var(--vien);
  color: var(--chu); text-decoration: none; font-size: 14px; }
.tab-con a.chon { background: var(--chinh); color: #fff; border-color: var(--chinh); }

.nut { border: 1px solid var(--vien); background: var(--the); padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.nut:hover { border-color: var(--chinh); }
.nut.chinh { background: var(--chinh); color: #fff; border-color: var(--chinh); }
@media (prefers-color-scheme: dark) { .nut.chinh { color: #04201d; } }
.nut.do { color: var(--do); border-color: var(--do); }
.nut.to { padding: 14px 18px; font-size: 17px; font-weight: 600; width: 100%; border-radius: 12px; }
.nut:disabled { opacity: .45; cursor: not-allowed; }
.nut.nho { padding: 4px 9px; font-size: 13px; }

label.o { display: block; margin-bottom: 10px; }
label.o > span { display: block; font-size: 13px; color: var(--mo); margin-bottom: 3px; }
input.nhap, select.nhap, textarea.nhap { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--vien); background: var(--the); }
input.nhap:focus, select.nhap:focus, textarea.nhap:focus { outline: 2px solid var(--chinh); outline-offset: -1px; }
input.o-so { width: 110px; padding: 5px 7px; border: 1px solid var(--vien); border-radius: 6px; background: var(--the); text-align: right; }

.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.c-du { background: var(--luc-nhat); color: var(--luc); }
.c-muon, .c-ve_som { background: var(--vang-nhat); color: var(--vang); }
.c-vang, .c-quen_ra, .c-quen_vao, .c-tu_choi { background: var(--do-nhat); color: var(--do); }
.c-dang_lam, .c-cho { background: var(--xanh-nhat); color: var(--xanh); }
.c-chua_toi, .c-chua_vao { background: var(--xam-nhat); color: var(--mo); }
.c-nghi_phep { background: #f3e8ff; color: #7b2cbf; }
@media (prefers-color-scheme: dark) { .c-nghi_phep { background: #2b1d3d; color: #c4a1ff; } }

.dong-ho { text-align: center; padding: 8px 0 4px; }
.dong-ho b { font-size: 44px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.ca { border: 1px solid var(--vien); border-radius: 12px; padding: 12px; margin-top: 10px; }
.ca .hang + .hang { margin-top: 8px; }

table.bang { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.bang th, table.bang td { padding: 7px 8px; border-bottom: 1px solid var(--vien); text-align: left; vertical-align: middle; }
table.bang th { font-weight: 600; color: var(--mo); font-size: 12.5px; background: var(--the); position: sticky; top: 0; z-index: 1; }
table.bang td.so-t, table.bang th.so-t { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.bang tr.tong td { font-weight: 700; background: var(--xam-nhat); }
.cuon { overflow: auto; max-height: 72vh; border: 1px solid var(--vien); border-radius: 10px; }
.cuon table.bang th:first-child, .cuon table.bang td:first-child { position: sticky; left: 0; background: var(--the); z-index: 2; }
.cuon table.bang th:first-child { z-index: 3; }

table.xep td.o-ca { min-width: 92px; cursor: pointer; font-size: 12px; padding: 4px; }
table.xep td.o-ca:hover { background: var(--chinh-nhat); }
.the-ca { display: block; background: var(--xanh-nhat); color: var(--xanh); border-radius: 5px; padding: 1px 5px; margin: 2px 0; white-space: nowrap; }
.the-ca.tc { background: var(--vang-nhat); color: var(--vang); }
.the-ca.da { background: var(--luc-nhat); color: var(--luc); }
table.xep th.cn, table.xep td.cn { background: color-mix(in srgb, var(--vang-nhat) 50%, transparent); }

table.cong td.o { text-align: center; padding: 3px 2px; min-width: 30px; font-size: 11.5px; }
.diem { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 6px; font-size: 11px; font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #1c2733;
  color: #fff; padding: 11px 16px; border-radius: 10px; z-index: 50; max-width: calc(100% - 32px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.toast.loi { background: var(--do); }
.modal { position: fixed; inset: 0; background: rgba(10,15,20,.5); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.modal .hop { background: var(--the); width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .modal { align-items: center; } .modal .hop { border-radius: 16px; } }
.modal h2 { margin: 0 0 12px; font-size: 17px; }
.chon-ca label { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--vien); border-radius: 9px; margin-bottom: 6px; cursor: pointer; }
.dang-nhap { max-width: 380px; margin: 8vh auto 0; padding: 16px; }
.dang-nhap .logo { width: 64px; height: 64px; border-radius: 16px; background: var(--chinh); color: #fff; display: grid; place-items: center;
  font-size: 30px; font-weight: 700; margin: 0 auto 12px; }
.anh-nho { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; vertical-align: middle; }
.canh-bao { background: var(--vang-nhat); color: var(--vang); padding: 8px 12px; border-radius: 9px; font-size: 13.5px; margin-bottom: 10px; }
.trong { text-align: center; color: var(--mo); padding: 22px 8px; }
pre.log { background: var(--xam-nhat); padding: 10px; border-radius: 8px; font-size: 12.5px; max-height: 220px; overflow: auto; white-space: pre-wrap; }
@media (max-width: 600px) { main { padding: 12px; } .an-dt { display: none; } }

header.dau .chuong { position: relative; font-size: 17px; padding: 5px 9px; }
header.dau .dem { position: absolute; top: -4px; right: -4px; background: #e11d48; color: #fff; border-radius: 999px;
  font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px; font-weight: 700; }
details summary { cursor: pointer; margin: 6px 0; color: var(--mo); }
@media print { header.dau, nav.duoi, .tab-con, .modal .hang, .modal p { display: none !important; } .modal { position: static; background: none; } }