:root{--bg:#0B1220;--panel:#141D2E;--line:#223049;--text:#E6EDF7;--muted:#8A9BB5;--yellow:#FFC72C;--blue:#2F80ED;--green:#4ADE80;--red:#F87171;--safe-b:env(safe-area-inset-bottom)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 -apple-system,Inter,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
a{color:#9DB8E6}
button,input,select,textarea{font:inherit;color:inherit}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:10px 14px;min-height:44px;cursor:pointer;font-weight:600}
.btn.main{background:var(--yellow);color:#0B1220;border-color:var(--yellow)}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.warn{border-color:var(--red);color:var(--red)}
.btn.sm{min-height:34px;padding:5px 10px;font-size:13px}
.btn:disabled{opacity:.5}
input,select,textarea{width:100%;background:#0E1626;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{min-height:90px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.card h3{margin:0 0 10px;font-size:15px}
.muted{color:var(--muted);font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.kpi b{display:block;font-size:24px}.kpi span{font-size:12px;color:var(--muted)}
.pill{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.p-moi{background:#3A2E05;color:var(--yellow)}.p-dangsua{background:#1E3A5F;color:#9DD2FF}.p-xong{background:#0F3A2A;color:var(--green)}.p-lite{background:#1E3A5F;color:#9DD2FF}.p-pro{background:#3A2E05;color:var(--yellow)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase}
tr.click{cursor:pointer}tr.click:active{background:#1A2538}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bar{height:8px;background:#1C2840;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--yellow)}
.pct{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:6px}.pct span:first-child{width:46%}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(70px + var(--safe-b));background:#1E3A5F;color:#fff;padding:10px 16px;border-radius:10px;z-index:99;font-size:14px;max-width:92vw}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;word-break:break-all;background:#0E1626;border:1px solid var(--line);border-radius:10px;padding:10px;max-height:320px;overflow:auto}
/* layout */
#app{display:flex;min-height:100vh}
nav{width:220px;background:#0E1626;border-right:1px solid var(--line);padding:16px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
nav .logo{display:flex;align-items:center;gap:8px;padding:6px 8px 16px}
nav .logo img{height:28px}nav .logo b{color:var(--yellow);font-size:13px;letter-spacing:1px}
nav a.item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px}
nav a.item.on{background:var(--panel);color:var(--yellow)}
nav .sp{flex:1}
main{flex:1;padding:18px 22px;max-width:1100px;width:100%}
main h2{margin:0 0 14px;font-size:20px}
.login{max-width:360px;margin:12vh auto;padding:0 16px}
@media (max-width:760px){
  #app{flex-direction:column}
  nav{width:100%;height:auto;position:fixed;bottom:0;top:auto;flex-direction:row;padding:6px 4px calc(6px + var(--safe-b));border-right:0;border-top:1px solid var(--line);z-index:50;overflow-x:auto}
  nav .logo,nav .sp,nav .hide-m{display:none}
  nav a.item{flex-direction:column;gap:2px;font-size:11px;padding:6px 8px;flex:1;min-width:58px;text-align:center}
  nav a.item svg{width:22px;height:22px}
  main{padding:14px 14px 90px}
  .kpi b{font-size:20px}
}
nav a.item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}