:root{--nen:#f5f3ef;--the:#fff;--chu:#1d1b18;--mo:#6b665e;--vien:#e4dfd6;--chinh:#d9480f;--chinh2:#b8390a;--xanh:#2b8a3e;--do:#c92a2a;--vang:#e8a400;--xanhnhat:#e6f4ea;--donhat:#fdecec;--vangnhat:#fff6dc}
@media (prefers-color-scheme:dark){:root{--nen:#151412;--the:#1f1d1a;--chu:#f1ede6;--mo:#a39d93;--vien:#35322d;--xanhnhat:#183021;--donhat:#3a1d1d;--vangnhat:#3a3018}}
*{box-sizing:border-box}
body{margin:0;background:var(--nen);color:var(--chu);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.khung{max-width:480px;margin:0 auto;padding:16px}
.rong{max-width:1200px}
.the{background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:16px;margin-bottom:14px}
h1{font-size:20px;margin:4px 0 12px}h2{font-size:17px;margin:0 0 10px}
.mo{color:var(--mo);font-size:14px}
input,select{width:100%;padding:11px 12px;border:1px solid var(--vien);border-radius:10px;background:var(--the);color:var(--chu);font:inherit;margin:4px 0 10px}
label{font-size:14px;color:var(--mo)}
button{font:inherit;border:0;border-radius:10px;padding:11px 16px;background:var(--chinh);color:#fff;cursor:pointer;font-weight:600}
button:hover{background:var(--chinh2)}button:disabled{opacity:.5;cursor:default}
button.phu{background:transparent;color:var(--chu);border:1px solid var(--vien)}
button.nho{padding:6px 10px;font-size:14px}
.nut-to{width:100%;padding:22px;font-size:22px;border-radius:16px}
.nut-to.ra{background:var(--xanh)}
.dong{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dong>*{flex:1}
.gio{font-size:44px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:1px}
.tb{padding:10px 12px;border-radius:10px;margin:10px 0;font-size:15px}
.tb.ok{background:var(--xanhnhat);color:var(--xanh)}.tb.loi{background:var(--donhat);color:var(--do)}.tb.canh{background:var(--vangnhat)}
.so{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.so b{display:block;font-size:22px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:7px 6px;border-bottom:1px solid var(--vien);text-align:left;white-space:nowrap}
th{color:var(--mo);font-weight:600}
td.so-tien,th.so-tien{text-align:right;font-variant-numeric:tabular-nums}
.cuon{overflow-x:auto}
.nhan{display:inline-block;padding:1px 7px;border-radius:20px;font-size:12px;font-weight:600}
.nhan.muon{background:var(--vangnhat);color:#a06b00}.nhan.loi{background:var(--donhat);color:var(--do)}.nhan.ok{background:var(--xanhnhat);color:var(--xanh)}
.tab{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px}
.tab button{background:transparent;color:var(--chu);border:1px solid var(--vien);white-space:nowrap}
.tab button.chon{background:var(--chu);color:var(--nen)}
.an{display:none!important}
a{color:var(--chinh)}
.luoi td,.luoi th{text-align:center;padding:5px 3px;min-width:30px}
.luoi td:first-child,.luoi th:first-child{text-align:left;position:sticky;left:0;background:var(--the)}
.luoi td.o{cursor:pointer}.luoi td.o:hover{outline:2px solid var(--chinh)}
.o1{background:var(--xanhnhat)}.oNua{background:var(--vangnhat)}.oLoi{background:var(--donhat)}
.cn{color:var(--mo)}
