:root{--nen:#f4f5f7;--o:#ffffff;--o2:#f9fafb;--chu:#14161a;--mo:#6a707c;--vien:#e4e6eb;--nhan:#3b5bdb;--nhan2:#edf1ff;--tot:#1e8a4c;--tot2:#e7f6ee;--cham:#a66a00;--cham2:#fff4dd;--loi:#c9372c;--loi2:#fdecea;--bong:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
@media (prefers-color-scheme:dark){:root{--nen:#0f1115;--o:#171a20;--o2:#1c2027;--chu:#e9ebf0;--mo:#9298a5;--vien:#272b33;--nhan:#7c95ff;--nhan2:#1d2440;--tot:#57d18e;--tot2:#11291c;--cham:#f0b84d;--cham2:#2c2210;--loi:#ff7b6e;--loi2:#331714;--bong:none}}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;background:var(--nen);color:var(--chu)}
body{font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
code,.mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:12.5px}
a{color:var(--nhan);text-decoration:none}
input,select,button,textarea{font:inherit;padding:8px 11px;border-radius:9px;border:1px solid var(--vien);background:var(--o);color:var(--chu);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--nhan);box-shadow:0 0 0 3px var(--nhan2)}
button{cursor:pointer;font-weight:500;transition:background .15s;white-space:nowrap}button:hover{background:var(--o2)}button:disabled{opacity:.5;cursor:default}
.bc{background:var(--nhan);border-color:var(--nhan);color:#fff}.bc:hover{background:var(--nhan);filter:brightness(1.08)}
.bd{color:var(--loi)}.bn{padding:4px 10px;font-size:12.5px}.nho{font-size:12.5px}.mo{color:var(--mo)}
/* đăng nhập */
#dn{min-height:100vh;display:grid;place-items:center;padding:16px}
.the_dn{width:100%;max-width:380px;background:var(--o);border:1px solid var(--vien);border-radius:16px;padding:28px;box-shadow:var(--bong)}
.the_dn h1{font-size:20px;margin:18px 0 4px}.the_dn label{display:block;font-size:12.5px;color:var(--mo);margin:14px 0 6px}.the_dn input{width:100%}.the_dn button{width:100%;margin-top:18px;padding:10px}
.bao_loi{color:var(--loi);font-size:13px;margin-top:12px;min-height:18px}
/* khung */
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.logo img{height:26px;width:auto;display:block}.logo .lg-toi{display:none}.logo span{font-weight:600;opacity:.75;padding-left:10px;border-left:1px solid currentColor;line-height:1}
@media (prefers-color-scheme:dark){.logo .lg-sang{display:none}.logo .lg-toi{display:block}}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--o) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--vien)}
.top .trong{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tabs{display:flex;gap:2px;flex-wrap:wrap}.tabs button{border:0;background:none;color:var(--mo);padding:7px 12px}.tabs button.on{background:var(--nhan2);color:var(--nhan)}
.phai{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
main{max-width:1240px;margin:0 auto;padding:20px 16px 64px}
h2{font-size:15px;margin:0 0 10px;font-weight:600}.khoi{margin-bottom:26px}
.o{background:var(--o);border:1px solid var(--vien);border-radius:14px;box-shadow:var(--bong)}
.bang{overflow:auto;max-height:calc(100vh - 150px)}table{border-collapse:separate;border-spacing:0;width:100%}
.bang thead th{position:sticky;top:0;z-index:2}
th,td{padding:10px 14px;text-align:left;vertical-align:middle;font-size:13.5px;border-bottom:1px solid var(--vien)}
th{font-size:12px;color:var(--mo);font-weight:600;background:var(--o2);white-space:nowrap}td{white-space:nowrap}tr:last-child td{border-bottom:0}
.so{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}th.so{text-align:right}.nw{white-space:nowrap}
.lg,.loi_thoai{min-width:220px;max-width:380px;white-space:normal;word-break:break-word}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.kpi .o{padding:16px}.kpi span{font-size:12.5px;color:var(--mo)}.kpi b{display:block;font-size:24px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:500;white-space:nowrap}
.p-tot{background:var(--tot2);color:var(--tot)}.p-cham{background:var(--cham2);color:var(--cham)}.p-loi{background:var(--loi2);color:var(--loi)}.p-mo{background:var(--o2);color:var(--mo);border:1px solid var(--vien)}.p-nhan{background:var(--nhan2);color:var(--nhan)}
.form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px}
.trong_rong{padding:26px;text-align:center;color:var(--mo)}
.phan_trang{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 4px;font-size:13px;color:var(--mo)}.phan_trang button{padding:4px 12px}.phan_trang select{padding:4px 8px}
.hang{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#thong{position:fixed;bottom:16px;right:16px;max-width:360px;padding:12px 14px;border-radius:10px;background:var(--chu);color:var(--nen);font-size:13px;display:none;z-index:30}
/* hộp thoại */
.phu{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;z-index:20}
.hop{width:100%;max-width:460px;background:var(--o);border:1px solid var(--vien);border-radius:16px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.25);max-height:90vh;overflow:auto}
.hop h3{margin:0 0 4px;font-size:16px}.hop label{display:block;font-size:12.5px;color:var(--mo);margin:12px 0 5px}.hop input,.hop select{width:100%}
.hop .nut{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.khoa_moi{margin-top:12px;padding:12px;border-radius:10px;background:var(--o2);border:1px dashed var(--vien);word-break:break-all}