*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#EEF2F7;color:#141E2B;overflow:hidden;height:100vh}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#B0BEC5;border-radius:3px}

/* ===== Đăng nhập ===== */
#authScreen{display:flex;align-items:center;justify-content:center;height:100vh;background:linear-gradient(145deg,#071525,#14375A 50%,#1B5E8A)}
.authCard{background:#fff;border-radius:16px;padding:32px;width:400px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.authCard h2{font-family:'Barlow Semi Condensed',sans-serif;font-size:18px;font-weight:800;color:#1B5E8A;margin-bottom:2px;text-align:center;line-height:1.3}
.authCard .sub{font-size:11px;color:#8293A7;margin-bottom:16px;text-align:center}
.authTabs{display:flex;border-bottom:1px solid #E3EAF2;margin-bottom:14px}
.authTab{flex:1;text-align:center;padding:8px 4px;font-size:12px;font-weight:600;color:#8293A7;cursor:pointer;border-bottom:2px solid transparent}
.authTab.on{color:#1B5E8A;border-color:#1B5E8A}
.authPane{display:none}.authPane.on{display:block}
.fld{margin-bottom:11px}
.fld label{display:block;font-size:11px;font-weight:600;color:#465366;margin-bottom:3px}
.fld input,.fld select{width:100%;padding:9px 10px;border:1.5px solid #CDD5E0;border-radius:7px;font-size:13px;outline:none;font-family:inherit}
.fld input:focus,.fld select:focus{border-color:#1B5E8A}
.authBtn{width:100%;margin-top:6px;padding:10px;background:#1B5E8A;color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer}
.authBtn:hover{background:#2A7AB5}
.authBtn:disabled{opacity:.6;cursor:not-allowed}
.authLink{margin-top:12px;font-size:11px;color:#1B5E8A;text-align:center;cursor:pointer}
.authLink:hover{text-decoration:underline}
.authNote{margin-top:12px;font-size:9.5px;color:#8293A7;text-align:center;line-height:1.5}
.authErr{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;font-size:11px;padding:7px 9px;border-radius:6px;margin-bottom:10px;display:none}
.authErr.show{display:block}
.authMsg{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46;font-size:11px;padding:7px 9px;border-radius:6px;margin-bottom:10px;display:none}
.authMsg.show{display:block}

/* ===== Khung ứng dụng ===== */
#appShell{display:none;flex-direction:column;height:100vh}
#appShell.on{display:flex}
header{background:linear-gradient(135deg,#14507A,#1B5E8A 55%,#2A7AB5);padding:6px 18px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
.hdrLeft .dept{font-size:8px;font-weight:600;letter-spacing:1px;color:rgba(240,244,248,.5);text-transform:uppercase}
.hdrLeft h1{font-family:'Barlow Semi Condensed',sans-serif;font-size:14px;font-weight:800;color:#F0F4F8}
.hdrRight{display:flex;align-items:center;gap:10px}
.avatarGroup{display:flex}
.avatarGroup div{width:23px;height:23px;border-radius:50%;border:2px solid rgba(255,255,255,.2);margin-left:-6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;cursor:default;position:relative}
.avatarGroup div:first-child{margin-left:0}
.avatarGroup div.me{border-color:#FFD54F;box-shadow:0 0 0 2px rgba(255,213,79,.4)}
.userBadge span{font-size:10px;font-weight:600;color:#F0F4F8}
.userBadge .roleTag{font-size:8px;color:rgba(240,244,248,.6);margin-left:3px}
.logoutBtn{font-size:9px;color:rgba(240,244,248,.6);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:4px 8px;cursor:pointer}
.logoutBtn:hover{background:rgba(255,255,255,.15);color:#fff}

.toolbar{background:#fff;border-bottom:1px solid #E3EAF2;padding:5px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:4px;flex-wrap:wrap}
.tGroup{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.btn{font-size:10.5px;font-weight:500;padding:5px 9px;border-radius:5px;border:1px solid #CDD5E0;background:#fff;color:#465366;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap}
.btn:hover{background:#E3EAF2}
.btn.primary{background:#1B5E8A;color:#fff;border-color:#1B5E8A}
.btn.primary:hover{background:#2A7AB5}
.btn.danger{background:#fff;color:#C4343A;border-color:#F3C5C7}
.btn.danger:hover{background:#FEF2F2}
.btn:disabled{opacity:.4;cursor:not-allowed}
.tSep{width:1px;height:18px;background:#E3EAF2;margin:0 2px}
.bellWrap{position:relative}
.bellWrap .badge{position:absolute;top:-4px;right:-4px;background:#C4343A;color:#fff;font-size:8px;font-weight:700;min-width:14px;height:14px;border-radius:7px;display:none;align-items:center;justify-content:center;padding:0 3px}
.bellWrap .badge.show{display:flex}
.bellPanel{position:absolute;top:100%;right:0;width:320px;max-height:340px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);border:1px solid #E3EAF2;display:none;flex-direction:column;overflow:hidden;z-index:60;margin-top:4px}
.bellPanel.open{display:flex}
.bellHead{padding:8px 10px;border-bottom:1px solid #E3EAF2;font-size:11px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.bellList{overflow-y:auto;flex:1}
.bellItem{padding:7px 10px 7px 8px;border-bottom:1px solid #E3EAF2;border-left:3px solid transparent;font-size:10.5px;line-height:1.35}
.bellItem.warn{border-left-color:#C47B0B;background:#FFF9F0}
.bellItem.err{border-left-color:#C4343A;background:#FEF2F2}
.bellItem:not(.unread){opacity:.6}
.bellItem.unread{font-weight:600}
.bellItem.unread .t{font-weight:500}
.bellItem .t{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:#8293A7}
.bellEmpty{padding:18px;text-align:center;color:#8293A7;font-size:10.5px}

.kpiBar{display:flex;gap:7px;padding:7px 12px;flex-shrink:0}
.kpiCard{flex:1;min-width:90px;background:#fff;border-radius:6px;padding:8px 11px;border:1.5px solid #E3EAF2;cursor:pointer;user-select:none;text-align:center}
.kpiCard:hover{border-color:#B0BEC5}
.kpiCard.on{border-color:#1B5E8A;box-shadow:0 0 0 2px rgba(27,94,138,.15)}
.kpiNum{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:600;line-height:1}
.kpiLbl{font-size:9.5px;color:#8293A7;margin-top:2px;font-weight:500}
.kc0 .kpiNum{color:#141E2B}.kc1 .kpiNum{color:#1E7A4A}.kc2 .kpiNum{color:#C4343A}.kc3 .kpiNum{color:#C47B0B}

.tableArea{display:flex;flex:1;overflow:hidden}
.leftPane{overflow:auto;flex-shrink:0;background:#fff}
.leftPane table{border-collapse:collapse}
.leftPane thead{position:sticky;top:0;z-index:5}
.leftPane th{background:#F5F7FA;font-size:8.5px;font-weight:700;color:#8293A7;text-transform:uppercase;letter-spacing:.2px;padding:4px 4px;border-bottom:2px solid #CDD5E0;white-space:nowrap;text-align:center;user-select:none;height:26px}
.leftPane th:first-child{text-align:left}
.leftPane td{padding:2px 4px;border-bottom:1px solid #E3EAF2;font-size:10.5px;color:#465366;vertical-align:middle;white-space:nowrap;height:26px}
.projRow td{background:#F5F7FA!important;font-weight:700;font-size:10.5px;color:#141E2B;border-bottom:2px solid #CDD5E0;cursor:pointer}
.projDot{display:inline-block;width:3px;height:12px;border-radius:2px;margin-right:4px;vertical-align:middle}
.projInfo{font-weight:500;font-size:8.5px;color:#8293A7;margin-left:5px}
.taskRow td{transition:background .1s}
.taskRow:hover td{background:#E3EAF2}
.redDot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#C4343A;margin-right:3px;flex-shrink:0}
.badge2{display:inline-block;padding:1px 4px;border-radius:3px;font-size:9px;font-weight:600;white-space:nowrap}
.bS0{background:#E8EEF4;color:#607080}.bS1{background:#DBEAFE;color:#1E40AF}.bS2{background:#D1FAE5;color:#065F46}.bS3{background:#FEF3C7;color:#92400E}
.mono{font-family:'IBM Plex Mono',monospace;font-size:9.5px}
.cellInput{border:1px solid #1B5E8A;border-radius:3px;padding:2px 4px;font-size:10px;outline:none;width:100%;max-width:135px;font-family:inherit}
.cellCodeInput{border:1px solid #E3EAF2;border-radius:3px;padding:2px 4px;font-size:9.5px;outline:none;width:100%;max-width:60px;font-family:'IBM Plex Mono',monospace;color:#465366;background:#fff}
.cellCodeInput:hover{border-color:#CDD5E0}
.cellCodeInput:focus{border-color:#1B5E8A}
.cellDate{border:1px solid #1B5E8A;border-radius:3px;padding:2px 3px;font-size:9.5px;font-family:'IBM Plex Mono',monospace;outline:none}
.dateEdit{border:1px solid #1B5E8A;border-radius:3px;padding:2px 4px;font-size:9.5px;font-family:'IBM Plex Mono',monospace;cursor:pointer;display:inline-block;min-width:56px;background:#fff;color:#141E2B}
.dateEdit:hover{background:#EBF5FF}
.dateEdit.empty{color:#8293A7}
.hiddenDateInput{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cellSelect{font-size:9.5px;font-weight:600;padding:2px 3px;border:1px solid #CDD5E0;border-radius:3px;background:#fff;color:#465366;cursor:pointer;max-width:96px;outline:none}
.cellSelect:focus{border-color:#1B5E8A}
.expIcon{display:inline-block;width:13px;text-align:center;cursor:pointer;color:#8293A7;font-size:8px}
.expIcon.collapsed{transform:rotate(-90deg)}
.splitter{width:5px;cursor:col-resize;background:#E3EAF2;flex-shrink:0;z-index:10}
.splitter:hover,.splitter.drag{background:#1B5E8A}
.rightPane{flex:1;overflow:hidden;min-width:140px;display:flex;flex-direction:column}
.rightPane.hidden{display:none}
.tlWrap{flex:1;overflow:auto;position:relative}
.tlHeader{position:sticky;top:0;z-index:5;display:flex;background:#F5F7FA;border-bottom:2px solid #CDD5E0;height:26px}
.tlMonth{display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:600;color:#8293A7;border-right:1px solid #E3EAF2;flex-shrink:0}
.tlBody{position:relative}
.tlProjRow{height:26px;background:#F5F7FA;border-bottom:2px solid #CDD5E0}
.tlTaskRow{height:26px;position:relative;border-bottom:1px solid #E3EAF2}
.tlBar{position:absolute;top:5px;height:16px;border-radius:3px;overflow:hidden;min-width:3px}
.tlBarBg{position:absolute;inset:0;border-radius:3px;opacity:.22}
.tlBarFill{position:absolute;top:0;left:0;bottom:0;border-radius:3px;opacity:.8}
.tlBar.late .tlBarBg{opacity:.3;border:1.5px solid #C4343A}
.tlPct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:7.5px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);white-space:nowrap;pointer-events:none}
.tlGrid{position:absolute;top:0;bottom:0;width:1px;background:#E3EAF2;pointer-events:none}
.tlToday{position:absolute;top:0;bottom:0;border-left:2px dashed #C4343A;z-index:3;pointer-events:none}
.tlTodayLbl{position:absolute;top:1px;left:3px;font-size:7px;font-weight:700;color:#C4343A;font-family:'IBM Plex Mono',monospace;white-space:nowrap}

/* ===== Modal ===== */
.modalOverlay{position:fixed;inset:0;background:rgba(11,29,51,.45);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s}
.modalOverlay.open{opacity:1;pointer-events:all}
.modalBox{background:#fff;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.25);width:460px;max-width:92vw;max-height:86vh;overflow-y:auto;transform:translateY(8px);transition:transform .15s}
.modalOverlay.open .modalBox{transform:translateY(0)}
.modalBox.wide{width:640px}
.modalHead{padding:9px 14px;border-bottom:1px solid #E3EAF2;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
.modalHead h3{font-family:'Barlow Semi Condensed',sans-serif;font-size:14px;font-weight:700}
.modalClose{width:22px;height:22px;border-radius:5px;border:none;background:transparent;cursor:pointer;font-size:12px;color:#8293A7;display:flex;align-items:center;justify-content:center}
.modalClose:hover{background:#E3EAF2}
.modalBody{padding:12px 14px}
.modalFoot{padding:9px 14px;border-top:1px solid #E3EAF2;display:flex;justify-content:flex-end;gap:6px}
.formRow{margin-bottom:9px}
.formRow label{display:block;font-size:10.5px;font-weight:600;color:#465366;margin-bottom:3px}
.formRow input,.formRow select,.formRow textarea{width:100%;padding:6px 8px;border:1.5px solid #CDD5E0;border-radius:5px;font-size:11.5px;outline:none;font-family:inherit}
.formRow input:focus,.formRow select:focus,.formRow textarea:focus{border-color:#1B5E8A}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 9px}
.miniBtn{padding:5px 10px;border-radius:5px;font-size:11.5px;font-weight:600;cursor:pointer;border:1.5px solid transparent}
.miniBtn.primary{background:#1B5E8A;color:#fff;border-color:#1B5E8A}
.miniBtn.primary:hover{background:#2A7AB5}
.miniBtn.primary:disabled{opacity:.4;cursor:not-allowed}
.miniBtn.std{background:#fff;color:#465366;border-color:#CDD5E0}
.miniBtn.std:hover{background:#E3EAF2}
.miniBtn.danger{background:#C4343A;color:#fff;border-color:#C4343A}
.miniBtn.danger:hover{background:#A82C31}
.formErr{color:#C4343A;font-size:10.5px;margin-top:-4px;margin-bottom:8px;display:none}
.formErr.show{display:block}

.permTable{width:100%;border-collapse:collapse}
.permTable th,.permTable td{padding:5px 6px;text-align:center;border-bottom:1px solid #E3EAF2;font-size:10.5px}
.permTable th{background:#F5F7FA;font-weight:700;color:#8293A7;font-size:9px;text-transform:uppercase}
.permTable td:first-child{text-align:left;font-weight:600}
.permTable input[type=checkbox]{width:13px;height:13px;accent-color:#1B5E8A;cursor:pointer}
.permNote{background:#F8FAFC;border:1px solid #E3EAF2;border-radius:6px;padding:8px 10px;font-size:10.5px;color:#465366;line-height:1.5;margin-bottom:10px}

.logList{max-height:260px;overflow-y:auto}
.logEntry{display:flex;gap:7px;padding:5px 0;border-bottom:1px solid #E3EAF2;font-size:10.5px;align-items:flex-start}
.logEntry:last-child{border-bottom:none}
.logTime{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#8293A7;white-space:nowrap;min-width:82px}
.logWho{font-weight:700;color:#1B5E8A;min-width:42px}
.logAction{color:#465366}

.emailZone{border:2px dashed #E3EAF2;border-radius:6px;padding:14px;text-align:center;margin-bottom:8px;cursor:pointer;transition:all .15s}
.emailZone.over{border-color:#1B5E8A;background:#EBF5FF}
.emailZone i{font-size:20px;color:#8293A7}
.emailZone p{font-size:9.5px;color:#8293A7;margin-top:4px}
.emailPreview{margin-top:9px;padding:8px;background:#F8FAFC;border-radius:5px;border:1px solid #E3EAF2}
.emailPreview .plbl{font-size:8.5px;font-weight:700;color:#8293A7;text-transform:uppercase;margin-bottom:1px}
.emailPreview .pval{font-size:10.5px;color:#141E2B;margin-bottom:6px;min-height:13px}
.emailPreview .pval.missing{color:#C4343A;font-style:italic}

.acctRow{display:flex;align-items:center;gap:7px;padding:7px 9px;border-bottom:1px solid #E3EAF2;font-size:10.5px}
.acctRow .name{flex:1;font-weight:700}
.acctRow .roleLbl{color:#8293A7;font-size:9px;min-width:52px}
.acctRow .act{font-size:9px;color:#1B5E8A;cursor:pointer;padding:2px 5px}
.acctRow .act:hover{text-decoration:underline}
.acctRow .act.off{color:#8293A7}

.toastWrap{position:fixed;top:58px;right:12px;z-index:200;display:flex;flex-direction:column;gap:5px;max-width:320px}
.toast{padding:8px 11px;border-radius:6px;font-size:10.5px;font-weight:500;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:toastIn .25s ease}
.toast.ok{background:#1E7A4A}.toast.err{background:#C4343A}.toast.warn{background:#C47B0B}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

.warnBox{padding:9px;background:#FEF2F2;border:1px solid #FECACA;border-radius:5px;margin-bottom:9px;font-size:10.5px;color:#991B1B;line-height:1.4}
.emptyState{padding:18px;text-align:center;color:#8293A7;font-size:11.5px}
.linkIcon{color:#1B5E8A;cursor:pointer;font-size:11px;margin-left:2px}
.linkIcon:hover{color:#2A7AB5}
.connStatus{position:fixed;bottom:10px;left:10px;font-size:9px;padding:4px 8px;border-radius:5px;background:#FEF3C7;color:#92400E;display:none;z-index:150}
.connStatus.show{display:block}
.tabSwitch{display:flex;gap:6px;margin-bottom:10px}
.tabSwitchItem{flex:1;text-align:center;padding:6px;font-size:10.5px;font-weight:600;color:#8293A7;border:1.5px solid #CDD5E0;border-radius:5px;cursor:pointer}
.tabSwitchItem.on{color:#fff;background:#1B5E8A;border-color:#1B5E8A}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}