:root{
  --nen:#0b1220; --nen2:#0f172a; --the:#111b2e; --the2:#16233a; --vien:#22324d; --vien2:#2c4166;
  --chu:#e6edf7; --chu2:#a9b8cf; --chu3:#71839e; --xanh:#2f7cf6; --xanh2:#1d4ed8; --vang:#facc15; --do:#ef4444; --la:#22c55e;
  --bo:10px; font-family:'Be Vietnam Pro',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--nen);color:var(--chu);font-size:13px;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
body{display:grid;grid-template-columns:200px minmax(0,1fr) 340px;grid-template-rows:56px minmax(0,1fr);grid-template-areas:"dau dau dau" "trai giua phai"}

/* ── đầu trang ── */
.dau{grid-area:dau;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--nen2);border-bottom:1px solid var(--vien)}
.logo{display:flex;align-items:center;gap:10px;min-width:200px}
.o-logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,#38bdf8,#6366f1);color:#fff}
.logo b{font-size:15px;letter-spacing:.06em}.logo b span{color:#60a5fa}
.logo small{display:block;color:var(--chu3);font-size:11px}
.logo small.that{color:var(--la)}
.hoi{flex:1;display:flex;align-items:center;gap:8px;max-width:620px;background:var(--the);border:1px solid var(--vien2);border-radius:999px;padding:4px 4px 4px 14px}
.hoi .sao{color:#93c5fd}
.hoi input{flex:1;background:none;border:0;outline:0;color:var(--chu)}
.hoi button,.nhap button{background:var(--xanh);border:0;border-radius:999px;padding:6px 16px;font-weight:600;color:#fff}
.tim{width:200px;background:var(--the);border:1px solid var(--vien);border-radius:8px;padding:7px 10px;outline:0}
.nut-tron{position:relative;width:34px;height:34px;border-radius:50%;background:var(--the);border:1px solid var(--vien);display:grid;place-items:center}
.nut-tron.chu{font-size:11px;font-weight:700}
.nut-tron i{position:absolute;top:-4px;right:-4px;background:var(--do);color:#fff;font-style:normal;font-size:10px;border-radius:999px;padding:1px 5px}
.gio{text-align:right}.gio b{display:block;font-size:17px;font-variant-numeric:tabular-nums}.gio small{color:var(--chu3);font-size:11px}
.nguoi{display:flex;align-items:center;gap:8px}.nguoi small{display:block;color:var(--chu3);font-size:11px}
.av{width:32px;height:32px;border-radius:50%;background:#1d4ed8;display:grid;place-items:center;font-weight:700}

/* ── cột trái ── */
.trai{grid-area:trai;background:var(--nen2);border-right:1px solid var(--vien);padding:12px 10px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.che-do{display:flex;background:var(--the);border-radius:9px;padding:3px}
.che-do button{flex:1;border:0;background:none;padding:7px 4px;border-radius:7px;font-size:12px;color:var(--chu2)}
.che-do button.bat{background:var(--xanh);color:#fff;font-weight:600}
nav{display:flex;flex-direction:column;gap:2px}
nav button{display:flex;align-items:center;gap:10px;background:none;border:0;text-align:left;padding:8px 10px;border-radius:8px;color:var(--chu2)}
nav button:hover{background:var(--the)}
nav button.bat{background:var(--the2);color:#fff;box-shadow:inset 3px 0 var(--xanh)}
nav button span:first-child{width:18px;flex:none;text-align:center}
.club{margin-top:auto;background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);padding:10px}
.club b{color:#7dd3fc;font-size:12px}.club small{display:block;color:var(--chu3)}
.phien{color:var(--chu3);font-size:11px}

/* ── giữa ── */
.giua{grid-area:giua;display:flex;flex-direction:column;min-height:0;padding:10px;gap:10px}
.kpi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.kpi .o{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);padding:9px 12px;position:relative;cursor:pointer}
.kpi .o:hover{border-color:var(--vien2)}
.kpi .o::after{content:"";position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--m,#60a5fa)}
.kpi label{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--chu3)}
.kpi b{font-size:22px;font-variant-numeric:tabular-nums}
.kpi small{margin-left:6px;color:var(--chu2)}.kpi small.c{color:#93c5fd}.kpi small.x{color:#fca5a5}.kpi small.mp{color:#c4b5fd}
.vung{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden}
.cong-cu{padding:8px 10px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--vien);background:var(--nen2)}
.hang{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hang>label{font-size:10px;letter-spacing:.08em;color:var(--chu3);font-weight:700}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chips button{background:var(--the);border:1px solid var(--vien);border-radius:7px;padding:4px 10px;font-size:12px;color:var(--chu2);display:flex;align-items:center;gap:6px}
.chips button i{width:8px;height:8px;border-radius:2px;display:inline-block}
.chips button:hover{border-color:var(--vien2);color:#fff}
.chips button.bat{background:var(--xanh2);border-color:#3b82f6;color:#fff}
select{background:var(--the);border:1px solid var(--vien);border-radius:7px;padding:4px 8px}
.tick{display:flex;align-items:center;gap:5px;color:var(--chu2);font-size:12px}
.canvas-hop{position:relative;flex:1;min-height:0}
.canvas-hop canvas{display:block}
.lop-nhan{position:absolute;inset:0}
.lop-nhan>div{pointer-events:none}
.nhan-khu{display:flex;align-items:center;gap:6px;background:rgba(10,18,34,.86);border:1px solid rgba(148,163,184,.35);border-radius:8px;padding:3px 8px 3px 4px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.nhan-khu .ic{width:20px;height:20px;border-radius:6px;background:#1e3a8a;display:grid;place-items:center;font-size:12px}
.nhan-khu b{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.nhan-khu small{display:none;color:#9fb0c8;font-size:10px}
.nhan-khu.chon small,.nhan-khu.gan small{display:block}
.nhan-khu em{font-style:normal;background:#2563eb;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700}
.nhan-khu.chon{border-color:var(--vang);box-shadow:0 0 0 2px rgba(250,204,21,.4)}
.nhan-nguoi{display:flex;align-items:center;gap:5px;background:rgba(10,18,34,.82);border-radius:6px;padding:2px 7px;font-size:11px;white-space:nowrap;border:1px solid rgba(148,163,184,.25)}
.nhan-nguoi i{width:7px;height:7px;border-radius:50%}
.nhan-nguoi em{font-style:normal;color:#93a4bd;font-size:10px}
.nhan-nguoi.do{border-color:#f87171}
.nhan-nguoi.chon{border-color:var(--vang);background:#3b2f07}
.goi-y{position:absolute;z-index:5;width:230px;background:rgba(12,20,36,.96);border:1px solid var(--vien2);border-radius:9px;padding:9px 11px;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.goi-y b{display:block}.goi-y small{display:block;color:var(--chu3)}.goi-y .tim-tt{color:#c4b5fd}
.ban-do{position:absolute;right:10px;bottom:10px;z-index:4;background:rgba(10,18,34,.88);border:1px solid var(--vien2);border-radius:9px;padding:6px;text-align:center}
.ban-do canvas{cursor:pointer;border-radius:6px}
.ban-do small{display:block;color:var(--chu3);font-size:10px}
.nut-phong-to{position:absolute;top:10px;right:10px;z-index:6;background:rgba(10,18,34,.88);border:1px solid var(--vien2);border-radius:8px;padding:6px 12px;color:var(--chu);font-weight:600}
.nut-phong-to:hover{border-color:#3b82f6}
/* chế độ phóng to: khung 3D chiếm trọn cửa sổ, chỉ giữ thanh công cụ */
body.phong-to{grid-template-columns:0 minmax(0,1fr) 0;grid-template-rows:0 minmax(0,1fr)}
body.phong-to .dau,body.phong-to .trai,body.phong-to .phai,body.phong-to .kpi,body.phong-to .mentor,body.phong-to .chan{display:none}
body.phong-to .giua{padding:6px}
.loi-tai{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;color:var(--chu2);background:var(--nen)}

/* ── 2D ── */
.hai-d{overflow:auto;padding:12px;display:block}
.luoi-khu{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.the-khu{background:var(--nen2);border:1px solid var(--vien);border-top:3px solid var(--m);border-radius:var(--bo);padding:10px}
.the-khu h4{margin:0 0 6px;display:flex;justify-content:space-between}
.the-khu .ds div{display:flex;gap:6px;align-items:center;padding:3px 0;border-bottom:1px dashed var(--vien);cursor:pointer;font-size:12px}
.the-khu .ds div span{flex:1;color:var(--chu2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cham{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.cot-bieu{display:flex;align-items:flex-end;gap:12px;height:150px;padding:10px;background:var(--nen2);border:1px solid var(--vien);border-radius:var(--bo);margin-bottom:12px}
.cot-bieu div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:11px;color:var(--chu2)}
.cot-bieu i{display:block;width:100%;max-width:46px;border-radius:5px 5px 0 0;background:var(--m)}
h3.tieu{margin:4px 0 10px;font-size:13px;color:var(--chu2);letter-spacing:.06em}

/* ── mentor ── */
.mentor{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);padding:8px 10px;display:flex;flex-direction:column;gap:7px}
.mentor-dau{display:flex;align-items:center;gap:10px}
.av-ai{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#fbbf24,#f59e0b);display:grid;place-items:center}
.mentor-dau small{display:block;color:var(--chu3);font-size:11px}
.online{margin-left:auto;color:var(--la);font-size:11px;font-weight:700}
.nut-nho{background:var(--the2);border:1px solid var(--vien);border-radius:6px;padding:2px 8px}
.tin{max-height:110px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.tin div{max-width:85%;padding:6px 10px;border-radius:9px;white-space:pre-wrap;line-height:1.45}
.tin .tin-ban{align-self:flex-end;background:var(--xanh2)}
.tin .tin-ai{align-self:flex-start;background:var(--the2);border:1px solid var(--vien)}
.nhanh{display:flex;gap:6px;flex-wrap:wrap}
.nhanh button{background:var(--nen2);border:1px solid var(--vien);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--chu2)}
.nhanh button:hover{color:#fff;border-color:var(--vien2)}
.nhap{display:flex;gap:8px}
.nhap input{flex:1;background:var(--nen2);border:1px solid var(--vien);border-radius:8px;padding:8px 12px;outline:0}

/* ── chân ── */
.chan{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--chu2)}
.phat{background:var(--the);border:1px solid var(--vien);border-radius:7px;padding:5px 10px;white-space:nowrap}
.phat.gio-that{background:var(--xanh);border-color:var(--xanh);color:#fff;font-weight:600}
.chu-giai{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.chu-giai span{display:flex;align-items:center;gap:4px;white-space:nowrap}
.toc{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tong{white-space:nowrap}

/* ── cột phải ── */
.phai{grid-area:phai;background:var(--nen2);border-left:1px solid var(--vien);display:flex;flex-direction:column;min-height:0;position:relative}
.tabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--vien);flex-wrap:wrap}
.tabs button{background:none;border:0;padding:7px 7px;color:var(--chu3);font-size:12px;border-bottom:2px solid transparent}
.tabs button.bat{color:#fff;border-bottom-color:var(--xanh)}
.tabs button i{font-style:normal;background:var(--do);color:#fff;border-radius:999px;padding:0 5px;font-size:10px;margin-left:3px}
.noi-dung{flex:1;overflow:auto;padding:10px}
.noi-dung h5,.chi-tiet h5{margin:6px 0 8px;font-size:11px;letter-spacing:.08em;color:var(--chu3);display:flex;justify-content:space-between}
.muc{background:var(--the);border:1px solid var(--vien);border-left:3px solid var(--m,#3b82f6);border-radius:8px;padding:8px 10px;margin-bottom:7px;cursor:pointer}
.muc:hover{border-color:var(--vien2)}
.muc .d1{display:flex;align-items:center;gap:7px}
.muc .d1 b{flex:1}
.muc .tg{color:var(--chu3);font-size:11px}
.muc .ma{font-size:10px;font-weight:700;background:var(--the2);border-radius:5px;padding:1px 5px;color:#93c5fd}
.muc .the{font-size:10px;border:1px solid #a16207;color:#fcd34d;border-radius:5px;padding:0 5px}
.muc p{margin:4px 0 0;color:var(--chu)}
.muc small{display:block;color:var(--chu3);margin-top:3px}
.thanh{height:5px;background:var(--the2);border-radius:9px;overflow:hidden;margin-top:6px}
.thanh i{display:block;height:100%;background:var(--xanh)}
.nut-hd{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.nut-hd button{background:var(--the2);border:1px solid var(--vien2);border-radius:6px;padding:4px 10px;font-size:12px}
.nut-hd button.chinh{background:var(--xanh);border-color:var(--xanh);color:#fff}
.trong{color:var(--chu3);text-align:center;padding:30px 10px}
.chi-tiet{position:absolute;inset:0;background:var(--nen2);overflow:auto;padding:14px;z-index:3}
.chi-tiet .dong{position:absolute;top:10px;right:10px;background:var(--the);border:1px solid var(--vien);border-radius:7px;width:28px;height:28px}
.chi-tiet .nhom{font-size:10px;letter-spacing:.08em;color:var(--chu3)}
.chi-tiet h2{margin:2px 0 8px;font-size:20px}
.nhan-mp{display:inline-block;font-size:10px;font-weight:700;color:#c4b5fd;background:#2e1065;border-radius:5px;padding:1px 6px}
.chi-tiet .the-so{display:inline-block;background:var(--the);border:1px solid var(--vien);border-radius:8px;padding:8px 12px;margin:0 6px 6px 0}
.chi-tiet .the-so small{display:block;color:var(--chu3);font-size:11px}
.chi-tiet .the-so b{font-size:20px}
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--the);border:1px solid var(--vien);border-radius:999px;padding:3px 10px;margin:0 5px 6px 0;font-size:12px;cursor:pointer}
.pill small{color:var(--chu3)}
.su-kien{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--vien)}
.su-kien b{color:#f9a8d4;min-width:44px;font-variant-numeric:tabular-nums}
.su-kien.qua{opacity:.45}
.o-giao{display:flex;gap:6px;margin-top:8px}.o-giao input{flex:1;background:var(--the);border:1px solid var(--vien);border-radius:7px;padding:6px 9px;outline:0}

@media (max-width:1180px){ body{grid-template-columns:64px minmax(0,1fr) 300px} .trai nav button span+span,.che-do,.club,.phien{display:none} .kpi{grid-template-columns:repeat(3,minmax(0,1fr))} .tim,.nguoi div{display:none} }
@media (max-width:820px){
  html,body{overflow:auto} body{display:block}
  .dau{flex-wrap:wrap;height:auto;padding:8px 16px} .logo{min-width:0}
  .trai{display:none} .giua{height:auto;padding:10px 16px} .vung#vung3d{height:70vh;flex:none}
  .phai{border-left:0;border-top:1px solid var(--vien);min-height:420px} .chi-tiet{position:fixed}
  .kpi{grid-template-columns:repeat(2,minmax(0,1fr))} .kpi b{font-size:18px}
  .cong-cu .hang,.cong-cu .chips{overflow-x:auto;flex-wrap:nowrap}
  .chips button{white-space:nowrap;flex:none} .ban-do{display:none} .gio small,.nguoi{display:none}
  .hoi{order:5;flex-basis:100%;max-width:none}
}