*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:#eef1f5;color:#1f2937;font-size:14px}
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:#0f2c4d;color:#cdd9e8;flex-shrink:0;display:flex;flex-direction:column}
.brand{padding:20px 18px;border-bottom:1px solid #1d3f63}
.brand b{color:#fff;font-size:16px;display:block}
.brand span{font-size:11px;color:#8fa6c2}
.nav{margin-top:10px;flex:1}
.nav a{display:flex;align-items:center;gap:10px;padding:12px 18px;color:#cdd9e8;text-decoration:none;cursor:pointer;border-left:3px solid transparent}
.nav a:hover{background:#16365c}
.nav a.active{background:#16365c;color:#fff;border-left-color:#3b82f6;font-weight:600}
.nav .ico{width:20px;text-align:center}
.logout{display:block;padding:14px 18px;color:#8fa6c2;text-decoration:none;font-size:13px;border-top:1px solid #1d3f63}
.logout:hover{color:#fff}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;padding:14px 26px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}
.topbar h1{font-size:18px;color:#0f2c4d}
.topbar .user{font-size:13px;color:#64748b}
.content{padding:22px 26px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;margin-bottom:18px}
.card h2{font-size:15px;margin-bottom:14px;color:#0f2c4d}
.drop{border:2px dashed #93b4d8;border-radius:12px;background:#f7fafd;padding:34px;text-align:center;color:#5b7fa6}
.drop .big{font-size:38px}.drop p{margin:8px 0}.drop .hint{font-size:12.5px}
.drop input[type=file]{margin:10px auto;display:block}
.btn{background:#2563eb;color:#fff;border:none;padding:9px 18px;border-radius:7px;font-size:14px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block}
.btn:hover{background:#1d4ed8}
.btn.ghost{background:#eef2f7;color:#1f4e78}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.pill.ok{background:#dcfce7;color:#166534}.pill.x{background:#fef3c7;color:#92400e}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters input{padding:8px 10px;border:1px solid #cbd5e1;border-radius:7px;font-size:14px;min-width:260px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:#f1f5f9;text-align:left;padding:10px;color:#334155;font-size:12.5px;border-bottom:2px solid #e2e8f0}
td{padding:10px;border-bottom:1px solid #eef2f7}
tr.click{cursor:pointer}tr.click:hover{background:#f7fafd}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tot{font-weight:700;background:#f8fafc}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 10px;font-size:13.5px;align-content:start}
.kv b{color:#475569;font-weight:600}
.pdfbox{border:1px solid #e2e8f0;border-radius:8px;background:#fbfcfe;min-height:160px;display:flex;align-items:center;justify-content:center}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px}
.stat .lbl{font-size:12.5px;color:#64748b}.stat .val{font-size:21px;font-weight:700;color:#0f2c4d;margin-top:4px}
.back{color:#2563eb;cursor:pointer;font-size:13px;display:inline-block;margin-bottom:12px;text-decoration:none}
.flash{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:13.5px}
.flash.ok{background:#dcfce7;color:#166534}.flash.err{background:#fee2e2;color:#991b1b}
.loginbg{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0f2c4d}
.loginbox{background:#fff;padding:32px;border-radius:12px;width:340px;text-align:center}
.loginbox h2{color:#0f2c4d}.loginbox .sub{font-size:12.5px;color:#64748b;margin:6px 0 18px}
.loginbox input{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:8px;margin-bottom:12px;font-size:15px}
.loginbox .btn{width:100%}
@media(max-width:760px){.grid2,.cards4{grid-template-columns:1fr}.sidebar{width:64px}.brand span,.nav a span:not(.ico),.logout{display:none}}
.pill.vao{background:#dbeafe;color:#1e40af}
.pill.ra{background:#dcfce7;color:#166534}
.pill.khac{background:#f1f5f9;color:#475569}
.filters select{padding:8px 10px;border:1px solid #cbd5e1;border-radius:7px;font-size:14px;background:#fff}
.pill.warn{background:#ffedd5;color:#9a3412}
.pay{border:1px solid #cbd5e1;background:#f1f5f9;color:#475569;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.pay.on{background:#dcfce7;border-color:#86efac;color:#15803d}
.pay:hover{filter:brightness(.97)}
.del{border:1px solid #fecaca;background:#fef2f2;color:#dc2626;border-radius:7px;padding:4px 9px;font-size:13px;cursor:pointer;line-height:1}
.del:hover{background:#fee2e2}