:root{--pri:#0B5ED7;--prid:#084FB5;--pril:#E8F0FE;--ink:#1B2433;--mut:#5B6678;--line:#DCE3EE;--bg:#F2F5FA;--ok:#1E6B3A;--okbg:#E4F5EA;--warn:#7A4E00;--warnbg:#FFF1CC;--info:#084FB5;--infobg:#E1ECFF;--err:#B42318;--errbg:#FDECEA}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:100%}
body{margin:0;font:1rem/1.5 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--pri)}
h1,h2,h3{margin:0}
:focus-visible{outline:0.1875rem solid #7FB0FF;outline-offset:0.125rem}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:0.5rem;top:0.5rem;z-index:50;background:#fff;padding:0.5rem 0.75rem;border-radius:0.5rem}
.grow{flex:1}
/* khung */
.shell{min-height:100vh}.side{display:none}.main{min-width:0}
.top{position:sticky;top:0;z-index:5;background:var(--pri);color:#fff;display:flex;align-items:center;min-height:3.5rem;padding:0 0.5rem}
.top .ttl{flex:1;font-size:1.125rem;font-weight:600;text-align:center;margin:0 2.75rem 0 0}
.top .back{width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;color:inherit;text-decoration:none;border-radius:0.625rem;margin-right:-2.75rem;position:relative;z-index:1}
.content{padding:1rem 1rem 6rem;max-width:47.5rem;margin:0 auto;display:flex;flex-direction:column;gap:0.875rem}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem;min-height:3.75rem;font-size:0.75rem;color:var(--mut);text-decoration:none}
.tabbar a.active{color:var(--pri);font-weight:700}
.tabbar svg{width:1.5rem;height:1.5rem}
/* thành phần */
.card{background:#fff;border:1px solid var(--line);border-radius:0.875rem;padding:1rem}
.lbl{display:block;font-size:0.8125rem;color:var(--mut);margin-bottom:0.25rem}
.h2{font-size:1rem;font-weight:700;margin-top:0.25rem}
.acct{display:flex;align-items:center;gap:0.75rem}
.avatar{width:3rem;height:3rem;border-radius:50%;background:var(--pril);color:var(--pri);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;flex:none}
.acct .nm{font-weight:700}.acct .sb{font-size:0.8125rem;color:var(--mut)}
.periodbar{display:flex;align-items:center;gap:0.5rem}
.periodbar .pt{flex:1;text-align:center;font-weight:600}
.iconbtn{width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:0.75rem;background:#fff;color:var(--ink);text-decoration:none}
.iconbtn.off{opacity:.4}
.total{background:var(--pri);color:#fff;border-radius:1rem;padding:1.125rem}
.total .tl{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;font-size:0.875rem}
.total .ta{font-size:2rem;font-weight:800;line-height:1.2;margin:0.375rem 0 0.125rem;word-break:break-word}
.total .ts{font-size:0.8125rem;opacity:.95}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.stats3{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.stats3 .wide{grid-column:1/-1}
.bigamt{font-size:1.75rem;font-weight:800;color:var(--pri);word-break:break-word}.tbl td.why{color:var(--warn)}
.stat .sn{font-size:1.375rem;font-weight:700;color:var(--ink)}.stat .sl{font-size:0.8125rem;color:var(--mut)}
.badge{display:inline-block;font-size:0.75rem;font-weight:700;border-radius:6.1875rem;padding:0.125rem 0.625rem;white-space:nowrap;border:1px solid currentColor}
.badge.ok{color:var(--ok);background:var(--okbg)}.badge.warn{color:var(--warn);background:var(--warnbg)}.badge.info{color:var(--info);background:var(--infobg)}
.total .badge{background:#fff}
.note{border-radius:0.75rem;padding:0.625rem 0.75rem;font-size:0.875rem}
.note.warn{background:var(--warnbg);color:var(--warn)}.note.err{background:var(--errbg);color:var(--err)}.note.info{background:var(--infobg);color:var(--info)}
.dayitem{display:flex;align-items:center;gap:0.625rem;background:#fff;border:1px solid var(--line);border-radius:0.875rem;padding:0.75rem 0.875rem;text-decoration:none;color:var(--ink);min-height:4rem}
.dayitem .dl{flex:1;min-width:0}.dayitem .dd{font-weight:700}.dayitem .dq{font-size:0.8125rem;color:var(--mut)}.dayitem .dw{font-size:0.75rem;color:var(--warn);font-weight:600}
.dayitem .dr{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:0.25rem}.dayitem .da{font-weight:700}
.dayitem .chev{color:var(--mut)}
.list{display:flex;flex-direction:column;gap:0.625rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.25rem;border:0;border-radius:0.75rem;background:var(--pri);color:#fff;font:600 1rem "Segoe UI",Roboto,Arial,sans-serif;cursor:pointer;text-decoration:none;width:100%}
.btn:hover{background:var(--prid)}.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:#fff;color:var(--pri);border:1px solid var(--pri)}
.btn.auto{width:auto}
.inp{display:block;width:100%;min-height:3rem;border:1px solid #8C99AD;border-radius:0.75rem;padding:0 0.875rem;font:1rem "Segoe UI",Roboto,Arial,sans-serif;background:#fff;color:var(--ink)}
.field{position:relative;margin-bottom:0.75rem}.field .inp{padding-right:4rem}
.field .tg{position:absolute;right:0.375rem;top:0.375rem;min-height:2.25rem;min-width:3rem;border:0;background:transparent;color:var(--pri);font-weight:600;cursor:pointer;border-radius:0.5rem}
.err{color:var(--err);font-weight:600}
.link{background:none;border:0;color:var(--pri);text-decoration:underline;cursor:pointer;font:inherit;padding:0.5rem 0;min-height:2.75rem}
.state{text-align:center;padding:1.75rem 1rem;display:flex;flex-direction:column;align-items:center;gap:0.625rem}
.state h2{font-size:1.125rem}.state p{margin:0;color:var(--mut)}.state .sico{width:4rem;height:4rem;border-radius:50%;background:var(--pril);color:var(--pri);display:flex;align-items:center;justify-content:center}
.state .sico svg{width:2rem;height:2rem}
.state .btn{max-width:20rem}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0.375rem}
.tabs a{display:flex;align-items:center;justify-content:center;min-height:2.75rem;border:1px solid var(--line);border-radius:0.625rem;background:#fff;color:var(--ink);text-decoration:none;font-size:0.8125rem;text-align:center}
.tabs a.on{background:var(--pri);color:#fff;border-color:var(--pri);font-weight:700}
.months{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem}
.months a,.months span{display:flex;align-items:center;justify-content:center;min-height:3rem;border:1px solid var(--line);border-radius:0.625rem;background:#fff;color:var(--ink);text-decoration:none}
.months a.on{background:var(--pri);color:#fff;border-color:var(--pri);font-weight:700}.months span{color:#9AA5B5;background:#F6F8FB}
.yrbar{display:flex;align-items:center;justify-content:space-between;font-weight:700}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:0.75rem;color:var(--mut);padding:0.5rem;border-bottom:1px solid var(--line)}
.tbl td{padding:0.625rem 0.5rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl .r{text-align:right}.tbl tr.tot td{font-weight:700;color:var(--pri);border-bottom:0}
.menu{display:flex;flex-direction:column}
.menu a,.menu summary,.menu .mi{display:flex;align-items:center;justify-content:space-between;min-height:3.25rem;padding:0 0.25rem;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;cursor:pointer;background:none;font:inherit;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.menu .out{color:var(--err);font-weight:600}
.menu .det{padding:0.5rem 0.25rem 0.75rem;font-size:0.875rem;color:var(--mut)}
.chartwrap{overflow-x:auto}.chartwrap svg{display:block;height:auto;max-width:56rem;margin:0 auto}
.chartwrap a{cursor:pointer;outline:none}.chartwrap a:hover .bar{opacity:.8}.chartwrap a:focus .hit{stroke:#7FB0FF;stroke-width:2}
.legend{display:flex;gap:0.875rem;flex-wrap:wrap;font-size:0.8125rem;color:var(--mut);margin-top:0.5rem}
.legend i{display:inline-block;width:0.875rem;height:0.875rem;border:1px solid var(--pri);vertical-align:-0.125rem;margin-right:0.25rem}
.dnav{display:flex;align-items:center;gap:0.5rem}.dnav .pt{flex:1;text-align:center;font-weight:700}
.busy{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background:rgba(255,255,255,.8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem}
.busy[hidden]{display:none}
.spin{width:2.5rem;height:2.5rem;border:0.25rem solid var(--pril);border-top-color:var(--pri);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.foot{text-align:center;font-size:0.8125rem;color:var(--mut)}
/* đăng nhập */
.auth{max-width:26.25rem;margin:0 auto;padding:2rem 1.25rem;display:flex;flex-direction:column;gap:1rem;min-height:100vh}
.brand{display:flex;align-items:center;gap:0.625rem;font-weight:800;font-size:1.375rem;color:var(--pri)}
.logo{display:inline-flex;width:2.5rem;height:2.5rem;border-radius:0.625rem;background:var(--pri);color:#fff;align-items:center;justify-content:center;font-weight:800}
.auth h1{font-size:1.375rem;text-align:center}.auth .sub{text-align:center;color:var(--mut);margin:0}
.truck{display:block;margin:0 auto;width:9.375rem;height:auto}
/* quản trị */
.adm{display:grid;grid-template-columns:minmax(0,1fr);gap:0.875rem;align-items:start}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}.btns .full{grid-column:1/-1}
.st{padding:0.625rem 0.75rem;background:var(--bg);border-radius:0.625rem;font-size:0.875rem}
.adm .tbl th,.adm .tbl td{white-space:nowrap}
/* bảng tự chuyển thành thẻ trên điện thoại */
@media(max-width:699px){
 .tbl.resp thead{display:none}
 .tbl.resp tr{display:block;padding:0.625rem 0;border-bottom:1px solid var(--line)}
 .tbl.resp td{display:flex;justify-content:space-between;gap:0.75rem;border:0;padding:0.1875rem 0;text-align:right}
 .tbl.resp td::before{content:attr(data-l);color:var(--mut);text-align:left}
 .tbl.resp td.first{font-weight:700;text-align:left;font-size:1rem}.tbl.resp td.first::before{content:none}
}
@media(min-width:900px){
 .shell{display:grid;grid-template-columns:15rem minmax(0,1fr)}
 .side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:1.25rem 0.75rem;gap:0.375rem}
 .side .brand{margin:0 0.5rem 1rem}
 .navlink{display:flex;align-items:center;gap:0.625rem;min-height:2.875rem;padding:0 0.75rem;border-radius:0.625rem;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;text-align:left}
 .navlink svg{width:1.375rem;height:1.375rem;flex:none}
 .navlink.active{background:var(--pril);color:var(--pri);font-weight:700}.navlink.out{color:var(--err)}
 .tabbar{display:none}
 .top{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
 .top .ttl{text-align:left;margin:0;padding-left:0.75rem}.top .back{margin-right:0}
 .content{max-width:68.75rem;padding:1.5rem 1.75rem 2.5rem}
 .g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
 .adm{grid-template-columns:minmax(0,1fr) 22.5rem}
 .tbl.resp td.first{font-size:inherit}
}
@media(max-width:899px){.g2{display:flex;flex-direction:column;gap:0.875rem}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}

/* màn hình rộng: tăng cỡ chữ và khoảng cách theo tỉ lệ để 2K, 3K, 4K không bị nhỏ và trống */
@media(min-width:700px){.stats3{grid-template-columns:repeat(3,1fr)}.stats3 .wide{grid-column:auto}}
@media(min-width:900px){.content{max-width:72rem}}
@media(min-width:2200px){html{font-size:125%}.content{max-width:80rem}.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(26rem,1fr));gap:.75rem}}
@media(min-width:3000px){html{font-size:162.5%}.content{max-width:84rem}}
@media(min-width:3800px){html{font-size:200%}.content{max-width:88rem}}