:root{
  --primary:#005BAA;--primary-dark:#003E7E;--primary-deep:#002B5C;--red:#E31E26;
  --sky:#E8F2FB;--sky2:#D4E7F7;--amber:#F5A300;--amber-bg:#FFF4DC;--green:#1E9E5A;--green-bg:#E3F5EB;
  --red-bg:#FDE8E9;--ink:#14202E;--ink2:#5A6B7E;--ink3:#8FA0B2;--line:#E2E9F1;--surface:#fff;--bg:#F4F7FA;
  --m-bcngay:#005BAA;--m-nhatky:#2E86D4;--m-bctuan:#1E9E5A;--m-chamcong:#7A52CC;--m-canhbao:#F5A300;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;height:100vh;display:flex;flex-direction:column;overflow:hidden}
button{font-family:inherit;border:none;cursor:pointer;background:none}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#C6D3DF;border-radius:9px}
.lbl{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}

/* topbar */
.topbar{height:54px;background:linear-gradient(90deg,var(--primary-deep),var(--primary-dark) 55%,var(--primary));color:#fff;
  display:flex;align-items:center;gap:14px;padding:0 16px;flex-shrink:0;z-index:20}
.evnmark{height:40px;border-radius:8px;background:#fff;display:flex;align-items:center;padding:4px 10px;flex-shrink:0}
.evnmark img{height:32px;width:auto;display:block}
.tb-proj{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:9px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.tb-proj small{opacity:.7;font-weight:500}
.tb-proj select{background:transparent;color:#fff;border:none;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;max-width:440px}
.tb-proj select:focus{outline:none}
.tb-proj select option{color:var(--ink)}
.tb-proj .sep{opacity:.4}
.tb-search{flex:1;max-width:380px;display:flex;align-items:center;background:rgba(255,255,255,.12);border-radius:9px;padding:7px 12px;color:rgba(255,255,255,.65);font-size:12.5px}
.tb-search span{margin-left:auto;font-size:10px;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:1px 5px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.tb-bell{position:relative;cursor:pointer;display:flex;align-items:center}
.tb-bell .lbl{font-size:10.5px}
.tb-bell i{position:absolute;top:-7px;right:-9px;background:var(--red);color:#fff;font-size:9px;font-weight:800;font-style:normal;border-radius:99px;padding:1px 5px}
.tb-user{position:relative;display:flex;align-items:center;gap:9px;cursor:pointer}
.ava{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--primary);font-weight:800;font-size:12px;display:grid;place-items:center}
.tb-user small{font-size:10.5px;opacity:.75;display:block}.tb-user b{font-size:12.5px;line-height:1.2;display:block}
.tb-user-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.15);min-width:170px;z-index:100;overflow:hidden}
.tb-user-menu button{display:block;width:100%;text-align:left;padding:10px 16px;font-size:12.5px;font-weight:600;background:none;border:none;cursor:pointer;color:var(--ink)}
.tb-user-menu button:hover{background:var(--bg)}
.tb-user-menu hr{margin:0;border:none;border-top:1px solid var(--line)}
.tb-user-menu .mnu-danger{color:var(--red)}

.shell{flex:1;display:flex;overflow:hidden}
.sidebar{width:232px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-group{padding:14px 14px 4px;font-size:10px;font-weight:800;letter-spacing:1px;color:var(--ink3);text-transform:uppercase}
.sb-item{position:relative;display:flex;align-items:center;gap:11px;padding:10px 14px 10px 18px;border-radius:9px;margin:1px 8px;
  font-size:13px;font-weight:700;color:var(--ink2);text-align:left;width:calc(100% - 16px);overflow:hidden}
.sb-item::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:99px;background:transparent}
.sb-item:hover{background:var(--bg)}.sb-item:hover::before{background:var(--mc,#C6D3DF)}
.sb-item.on{background:var(--sky);color:var(--primary)}.sb-item.on::before{background:var(--mc,var(--primary))}
.sb-item .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:99px}
.sb-item.dis{opacity:.42;cursor:not-allowed}
.sb-item .p2{margin-left:auto;font-size:9px;font-weight:800;background:#EEF1F5;color:var(--ink3);padding:2px 6px;border-radius:5px}
.sb-foot{margin-top:auto;padding:12px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--ink3);line-height:1.5}
.sb-ident-name{font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:2px}

.main{flex:1;overflow-y:auto;display:none}.main.active{display:block}
.phead{display:flex;align-items:center;gap:14px;padding:18px 24px 0}
.phead h1{font-size:20px;font-weight:800;position:relative;padding-bottom:9px}
.phead h1::after{content:'';position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:99px;background:var(--hl,var(--primary))}
.phead .sub{color:var(--ink2);font-size:12.5px;margin-top:3px}
.phead .acts{margin-left:auto;display:flex;gap:9px}
.btn{padding:9px 16px;border-radius:9px;font-size:11.5px;font-weight:800;letter-spacing:.6px}
.btn-pri{background:var(--primary);color:#fff}.btn-pri:hover{background:var(--primary-dark)}
.btn-line{border:1.5px solid var(--line);color:var(--ink2);background:var(--surface)}
.btn-green{background:var(--green);color:#fff}

.chip{font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 10px;border-radius:99px;white-space:nowrap;text-transform:uppercase}
.c-auto{background:var(--sky);color:var(--primary)}.c-edit{background:var(--amber-bg);color:#7A5200}
.c-ky{background:var(--green-bg);color:#13633A}.c-nghi{background:#EEF1F5;color:var(--ink2)}
.c-rej{background:var(--red-bg);color:var(--red)}
.qchip{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--bg);color:var(--ink2);border:1px solid var(--line);white-space:nowrap;margin:1px 2px}
.qchip.qc-op{background:var(--sky);color:var(--primary);border-color:var(--sky2)}
.qchip.qc-admin{background:var(--amber-bg);color:#7A5200;border-color:#F5D090}
.btn-icon{padding:5px 9px;display:inline-flex;align-items:center;justify-content:center}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.panel h3{font-size:13px;font-weight:700;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.panel h3 small{margin-left:auto;font-weight:600;color:var(--primary);font-size:12px;cursor:pointer}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);font-weight:800;text-align:left;padding:10px 18px;border-bottom:1px solid var(--line);background:#FAFCFE}
.tbl td{padding:11px 18px;border-bottom:1px solid var(--bg);vertical-align:middle}
.tbl tr:hover td{background:#FAFCFE}

/* ===== BC NGÀY: form 7 trường ===== */
.bcgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;padding:18px 24px 24px}
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.formcard h3{font-size:13px;font-weight:700;margin-bottom:4px}
.formcard .hint{font-size:11.5px;color:var(--ink3);margin-bottom:16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.field label .req{color:var(--red)}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--sky)}
.field textarea{resize:vertical;min-height:74px;line-height:1.6}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips-pick{display:flex;gap:7px;flex-wrap:wrap}
.pick{font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:9px;background:var(--bg);color:var(--ink2);border:1.5px solid transparent}
.pick.on{background:var(--sky);color:var(--primary);border-color:var(--primary)}
.formfoot{display:flex;gap:10px;align-items:center;margin-top:6px}
.formfoot .note{font-size:11px;color:var(--ink3);line-height:1.5}
.btn-lg{padding:12px 22px;border-radius:10px;font-size:13px;font-weight:800;letter-spacing:.4px}

/* AI preview panel */
.aipanel{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.aihead{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.aihead b{font-size:13px;font-weight:700}
.aibody{padding:16px 18px;overflow-y:auto;font-size:13px;line-height:1.7}
.nkdoc h4{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--primary);margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.nkdoc h4:first-child{margin-top:0}
.nkdoc .kv{display:grid;grid-template-columns:130px 1fr;gap:4px 12px;margin-bottom:4px}
.nkdoc .kv span{color:var(--ink2)}.nkdoc .kv b{font-weight:600}
.nkdoc p{margin-bottom:6px}
.infer{background:var(--green-bg);color:#13633A;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;margin-left:5px}
.aifoot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:10px;background:#FAFCFE}

/* ===== NHẬT KÝ: lịch + danh sách ===== */
.nklayout{display:grid;grid-template-columns:300px 1fr;gap:16px;padding:18px 24px 24px}
.calcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.calcard .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.calcard .mh b{font-size:13.5px;font-weight:700}
.calcard .nav-m{font-size:16px;color:var(--ink3);cursor:pointer;padding:0 6px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow{font-size:10px;font-weight:800;color:var(--ink3);text-align:center;padding:4px 0}
.cal .d{aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:600;cursor:pointer;position:relative;border:1.5px solid transparent}
.cal .d.has{background:var(--green-bg);color:#13633A}
.cal .d.nghi{background:#EEF1F5;color:var(--ink3)}
.cal .d.sel{border-color:var(--primary);background:var(--sky);color:var(--primary)}
.cal .d.empty{cursor:default}
.cal .d .dot{width:5px;height:5px;border-radius:50%;background:var(--green);margin-top:2px}
.callegend{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--ink2)}
.callegend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:7px;vertical-align:-2px}

/* ===== CHẤM CÔNG ===== */
.ccwrap{padding:18px 24px 24px}
.cctable td.day{text-align:center;width:30px;padding:8px 0;font-size:11px}
.cctable .x{color:var(--green);font-weight:800}
.cctable .o{color:var(--ink3)}
.cctable .nghi{color:var(--amber);font-weight:700}
.cctable th.day{text-align:center;font-size:9px;padding:8px 0}
.cctable .total{font-weight:800;color:var(--primary);text-align:center}

/* ===== CẢNH BÁO ===== */
.cbwrap{padding:18px 24px 24px;display:grid;gap:12px;max-width:880px}
.cbcard{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:16px}
.cbcard.urgent{border-left-color:var(--red)}
.cbcard .cb-when{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--amber);min-width:120px}
.cbcard.urgent .cb-when{color:var(--red)}
.cbcard b{font-size:13.5px}
.cbcard small{display:block;color:var(--ink2);font-size:12px;margin-top:2px}
.cbcard .cb-act{margin-left:auto;display:flex;gap:8px}

/* ===== TỔNG QUAN DỰ ÁN (F5) ===== */
.kpiwrap{padding:18px 24px 0}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.kpi-card .lbl{color:var(--ink3);font-size:11.5px;font-weight:700}
.kpi-card .val{font-size:26px;font-weight:800;margin-top:6px;color:var(--ink)}
.kpi-card .val small{font-size:12px;font-weight:700;color:var(--ink3);margin-left:2px}
.kpi-card .delta{font-size:11.5px;color:var(--ink2);margin-top:6px}
.wbswrap{padding:18px 24px 24px;display:grid;gap:16px;grid-template-columns:1.3fr 1fr}
.wbs-row{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--bg)}
.wbs-row:last-child{border-bottom:none}
.wbs-row>div:first-child{flex:1}
.wbs-row b{font-size:12.5px;font-weight:700}
.pbar{height:7px;border-radius:99px;background:var(--bg);overflow:hidden;margin-top:6px}
.pbar i{display:block;height:100%;border-radius:99px;background:var(--primary)}
.wbs-pct{font-size:12px;font-weight:800;color:var(--primary);white-space:nowrap}

/* ===== BIÊN BẢN (F7 — xem trước) ===== */
.bbwrap{padding:18px 24px 24px;display:grid;grid-template-columns:1fr 1.2fr;gap:16px}
.bb-list .row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--bg)}
.bb-list .row:last-child{border-bottom:none}
.bb-list .row b{font-size:13px}
.bb-list .row small{display:block;color:var(--ink3);font-size:11.5px;margin-top:2px}
.bb-list .row .chip{margin-left:auto}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(14,26,46,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--surface);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.28);width:100%;max-width:580px;max-height:90vh;overflow-y:auto}
.modal-head{display:flex;align-items:center;gap:10px;padding:18px 22px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.modal-head h3{flex:1;font-size:15px;font-weight:800;margin:0}
.modal-close{background:none;border:none;cursor:pointer;font-size:24px;line-height:1;color:var(--ink3);padding:0 4px;border-radius:6px}
.modal-close:hover{background:var(--bg);color:var(--ink)}
.modal-body{padding:20px 22px 26px}

/* ===== CÀI ĐẶT ===== */
.qcheck{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.qcheck label{display:flex;align-items:flex-start;gap:8px;cursor:pointer;line-height:1.35;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:normal;color:var(--ink2);margin-bottom:0}
.qcheck label input[type=checkbox]{width:auto;height:auto;flex:none;margin:2px 0 0;padding:0;border:1.5px solid var(--line);border-radius:4px}
@media(max-width:560px){.qcheck{grid-template-columns:1fr}}

.note-banner{margin:0 24px;background:var(--sky);border:1px solid var(--sky2);border-radius:10px;padding:10px 16px;font-size:12px;color:var(--primary);font-weight:600;display:flex;align-items:center;gap:8px}
.mtabs{display:none}
@media(max-width:900px){
  .sidebar{display:none}.bcgrid,.nklayout,.wbswrap,.bbwrap{grid-template-columns:1fr}.tb-search,.tb-proj small{display:none}.kpi-grid{grid-template-columns:repeat(2,1fr)}
  .mtabs{display:flex;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 10px;gap:7px;overflow-x:auto}
  .mtabs button{font-size:12px;font-weight:700;padding:7px 13px;border-radius:99px;background:var(--bg);color:var(--ink2);white-space:nowrap}
  .mtabs button.on{background:var(--primary);color:#fff}
}

/* ===== ĐĂNG NHẬP ===== */
.login-screen{position:fixed;inset:0;background:linear-gradient(135deg,var(--primary-deep),var(--primary-dark));display:flex;align-items:center;justify-content:center;z-index:100}
.login-card{background:var(--surface);border-radius:16px;padding:32px 30px;width:340px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-card h2{font-size:17px;font-weight:800;margin-bottom:18px}
.login-card .field{text-align:left}
.login-card .hint{font-size:11px;color:var(--ink3);text-align:left}
.login-brand{margin:10px 0 16px;line-height:1.5}
.login-brand-title{font-size:15px;font-weight:800;color:var(--primary);letter-spacing:.5px}
.login-brand-desc{font-size:11.5px;color:var(--ink3);margin-top:4px}