/* Bố cục MISA (menu trái tối + thanh trên + lưới) nhưng gọn. Màu theo token, có nền tối. */
:root{
  --nen:#eef4f4; --giay:#ffffff; --chu:#1d2b2e; --nhat:#5f7377; --vien:#d7e3e4;
  --menu:#11262a; --menu-chu:#cfe0e2; --menu-on:#1d4046; --nhan:#0e9c8e; --nhan-nhat:#d9f1ee;
  --vang:#fff2c6; --tot:#1f7a3a; --tot-nhat:#ddf1e2; --canh:#a35d00; --canh-nhat:#fbecd4; --xau:#b3382c; --xau-nhat:#fbe1de;
  --f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif; --so:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --nen:#0f1716; --giay:#16201f; --chu:#e3ecea; --nhat:#93a8a3; --vien:#2a3836;
  --menu:#0a1214; --menu-chu:#b9cfd1; --menu-on:#173337; --nhan:#3cc4b5; --nhan-nhat:#163a36;
  --vang:#3a3215; --tot:#6fd08a; --tot-nhat:#173322; --canh:#f0b35a; --canh-nhat:#3a2c14; --xau:#ff8a7d; --xau-nhat:#3d1d1a; color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--nen);color:var(--chu);font-family:var(--f);font-size:14px;line-height:1.5}
[hidden]{display:none!important}
button{font:inherit}
.so,td.so,th.so{font-family:var(--so);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dang-nhap{min-height:100%;display:grid;place-items:center;padding:16px;background:var(--menu)}
.the-dn{background:var(--giay);padding:28px;border-radius:10px;width:min(360px,100%);display:grid;gap:8px}
.the-dn .logo{color:var(--chu);margin-bottom:8px}
.logo{font-weight:700;letter-spacing:.04em;color:#fff;padding:14px 16px 10px}
.logo span{font-weight:400;opacity:.7;letter-spacing:0;margin-left:4px}
input,select,textarea{font:inherit;color:var(--chu);background:var(--nen);border:1px solid var(--vien);border-radius:6px;padding:7px 9px;width:100%}
.loi{color:var(--xau);margin:0}
.nut{border:1px solid var(--vien);background:var(--giay);color:var(--chu);border-radius:6px;padding:6px 12px;cursor:pointer}
.nut.chinh{background:var(--nhan);border-color:var(--nhan);color:#fff;font-weight:600}
.nut.xau{color:var(--xau);border-color:var(--xau)}
.nut.nho{padding:3px 9px;font-size:13px}
.nut:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--nhan);outline-offset:1px}
.khung{display:grid;grid-template-columns:200px minmax(0,1fr);height:100%}
.menu{background:var(--menu);color:var(--menu-chu);display:flex;flex-direction:column;overflow-y:auto}
.them-nhanh{margin:0 14px 10px;border:1px solid #6fa9ae;background:transparent;color:#fff;border-radius:14px;padding:5px;cursor:pointer}
.menu nav a{display:block;padding:8px 16px;color:inherit;text-decoration:none;border-left:3px solid transparent}
.menu nav a:hover{background:var(--menu-on)}
.menu nav a.on{background:var(--menu-on);border-left-color:#2ec4b6;color:#fff;font-weight:600}
.menu nav hr{border:0;border-top:1px solid #2c464b;margin:8px 14px}
.chinh{display:flex;flex-direction:column;min-width:0;height:100%}
.thanh-tren{display:flex;gap:12px;align-items:center;background:var(--giay);border-bottom:1px solid var(--vien);padding:8px 16px;flex-wrap:wrap}
.thanh-tren .sp{flex:1}
.the-dl{font-size:12px;color:var(--nhat);border:1px solid var(--vien);border-radius:10px;padding:1px 8px}
.nut-menu{display:none;border:0;background:none;font-size:20px;color:var(--chu);cursor:pointer}
.noi-dung{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;flex:1}
h1{font-size:19px;margin:0}
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:2px solid var(--vien)}
.tabs button{border:0;background:none;padding:6px 12px;color:var(--nhat);cursor:pointer;border-radius:5px 5px 0 0}
.tabs button.on{background:var(--vang);color:var(--chu);font-weight:700}
.loc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--giay);padding:8px 10px;border-radius:8px;border:1px solid var(--vien)}
.loc input,.loc select{width:auto}
.loc .sp{flex:1}
.o-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.o-so div{background:var(--giay);border:1px solid var(--vien);border-radius:8px;padding:12px 14px}
.o-so b{display:block;font-size:20px;font-family:var(--so);font-variant-numeric:tabular-nums}
.o-so small{color:var(--nhat)}
.o-so .canh{border-color:var(--canh);background:var(--canh-nhat)}
.bang-wrap{overflow-x:auto;background:var(--giay);border:1px solid var(--vien);border-radius:8px}
table{border-collapse:collapse;width:100%;min-width:560px}
th{background:var(--nhan-nhat);text-align:left;font-weight:600;padding:7px 9px;white-space:nowrap;position:sticky;top:0}
td{padding:6px 9px;border-top:1px solid var(--vien)}
tr.chon td{background:var(--vang)}
tr.bam{cursor:pointer}
tr.bam:hover td{background:var(--nhan-nhat)}
tr.tong td{font-weight:700;background:var(--nen)}
.chip{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:10px;white-space:nowrap}
.chip.tot{background:var(--tot-nhat);color:var(--tot)} .chip.canh{background:var(--canh-nhat);color:var(--canh)}
.chip.xau{background:var(--xau-nhat);color:var(--xau)} .chip.nhat{background:var(--nen);color:var(--nhat)}
.am{color:var(--xau)} .duong{color:var(--tot)}
.ghi-chu{font-size:12.5px;color:var(--nhat)}
.bieu-do{background:var(--giay);border:1px solid var(--vien);border-radius:8px;padding:10px}
.bieu-do svg{width:100%;height:180px;display:block}
.chi-tiet{background:var(--giay);border:1px solid var(--vien);border-top:3px solid var(--vien);border-radius:8px;padding:10px}
.chi-tiet h3{margin:0 0 6px;font-size:14px}
dialog{border:0;border-radius:10px;padding:0;width:min(520px,calc(100% - 32px));background:var(--giay);color:var(--chu)}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog form{padding:18px;display:grid;gap:8px}
dialog .hang{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.luoi2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.thong-bao{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--chu);color:var(--giay);padding:8px 16px;border-radius:8px;z-index:50}
.trong{padding:24px;text-align:center;color:var(--nhat)}
@media (max-width:820px){
  .khung{grid-template-columns:minmax(0,1fr)}
  .menu{position:fixed;inset:0 auto 0 0;width:240px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .menu.mo{transform:none}
  .nut-menu{display:block}
  .luoi2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.menu{transition:none}}