:root{
  --nen:#f6f7f9; --the:#fff; --vien:#e3e6ea; --chu:#1a1d21; --mo:#6b7280;
  --tim:#635bff; --xanh:#16a34a; --do:#dc2626; --vang:#f59e0b; --lam:#0891b2;
  --tru-nen:#e7f5f8; --tru-chu:#0c5460;
  --dis-nen:#fff4d6; --dis-chu:#8a6100;
  --cong-nen:#dcf5e3; --cong-chu:#12633a;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--nen);color:var(--chu);-webkit-font-smoothing:antialiased}
.an{display:none !important}
button{font:inherit;cursor:pointer}
a{color:var(--tim)}

/* ---- đăng nhập ---- */
.man-hinh-dn{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.the-dn{background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:32px;width:360px;
  box-shadow:0 8px 30px rgba(0,0,0,.06)}
.the-dn h1{margin:0;font-size:22px}
.the-dn .phu{margin:4px 0 22px;color:var(--mo)}
.the-dn label{display:block;margin-bottom:14px;font-size:13px;color:var(--mo)}
.the-dn input{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--vien);
  border-radius:8px;font-size:15px;color:var(--chu);background:#fff}
.the-dn button{width:100%;padding:11px;border:0;border-radius:8px;background:var(--tim);color:#fff;
  font-weight:600;font-size:15px;margin-top:6px}
.loi{color:var(--do);margin:12px 0 0;font-size:13px}

/* ---- khung ---- */
header{display:flex;align-items:center;gap:16px;background:var(--the);border-bottom:1px solid var(--vien);
  padding:0 18px;height:54px;position:sticky;top:0;z-index:20;flex-wrap:nowrap;overflow-x:auto}
.hieu{font-weight:700;white-space:nowrap}
nav{display:flex;gap:2px}
nav button{border:0;background:none;padding:8px 12px;border-radius:8px;color:var(--mo);white-space:nowrap}
nav button:hover{background:var(--nen);color:var(--chu)}
nav button.chon{background:#efeeff;color:var(--tim);font-weight:600}
.phai{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap}
.phu{color:var(--mo)} .nho{font-size:12px}
.phu-nut{border:1px solid var(--vien);background:var(--the);border-radius:8px;padding:6px 12px;color:var(--chu)}
.phu-nut:hover{background:var(--nen)}

.thanh-loc{display:flex;gap:10px;align-items:center;padding:12px 18px;flex-wrap:wrap}
.thanh-loc select,.thanh-loc input{padding:7px 10px;border:1px solid var(--vien);border-radius:8px;background:var(--the);font:inherit}
.thanh-loc input{min-width:280px;flex:1;max-width:420px}
main{padding:0 18px 40px}

/* ---- ô số ---- */
.o-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.o{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:14px 16px}
.o .nhan{color:var(--mo);font-size:12px;margin-bottom:6px}
.o .so{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.o .duoi{color:var(--mo);font-size:12px;margin-top:4px}
.xanh{color:var(--xanh)} .do{color:var(--do)} .vang{color:var(--vang)} .lam{color:var(--lam)}

/* ---- bảng ---- */
.khung-bang{background:var(--the);border:1px solid var(--vien);border-radius:12px;overflow:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--vien);white-space:nowrap}
th{background:#fafbfc;font-size:12px;color:var(--mo);font-weight:600;position:sticky;top:0;z-index:1}
td.so,th.so{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#fcfcfd}
tr.tru{background:var(--tru-nen);color:var(--tru-chu)}
tr.tru:hover{background:#dcf0f5}
tr.tru-dispute{background:var(--dis-nen);color:var(--dis-chu)}
tr.tru-dispute:hover{background:#ffedc2}
tr.cong{background:var(--cong-nen);color:var(--cong-chu)}
tr.cong:hover{background:#cbeed7}
tr.tru td,tr.tru-dispute td,tr.cong td{font-weight:600}
tr.tong td{background:#fafbfc;font-weight:700;border-top:2px solid var(--vien)}
.hieu-nho{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.h-thanh-cong{background:#dcf5e3;color:#12633a}
.h-hoan{background:#e7f5f8;color:#0c5460}
.h-dispute{background:#fff4d6;color:#8a6100}
.h-hong{background:#fde8e8;color:#8a1c1c}
.h-chan{background:#efe6f7;color:#5b2a86}
.mo-ta{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.phan-trang{display:flex;gap:8px;align-items:center;justify-content:center;padding:14px}
.trong{padding:44px;text-align:center;color:var(--mo)}

/* ---- cài đặt ---- */
.the{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:18px;margin-bottom:16px}
.the h2{margin:0 0 4px;font-size:16px}
.the p.phu{margin:0 0 14px;font-size:13px}
.hang{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.hang label{font-size:12px;color:var(--mo)}
.hang input,.hang select{display:block;margin-top:4px;padding:8px 10px;border:1px solid var(--vien);border-radius:8px;font:inherit}
.nut{border:0;border-radius:8px;padding:8px 14px;background:var(--tim);color:#fff;font-weight:600}
.nut.xoa{background:var(--do)}
.nut.nhat{background:var(--the);color:var(--chu);border:1px solid var(--vien)}
.canh-bao{background:#fff8e6;border:1px solid #f0d99b;color:#7a5a00;padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:13px}
@media (max-width:820px){
  .thanh-loc input{min-width:0}
  th,td{padding:7px 9px}
}