/* ===== NQ57 Portal — theme hiện đại (đề xuất) ===== */
:root{
  --brand:#0a4d8c; --brand-600:#083f73; --brand-700:#062f57; --brand-050:#eef4fb; --brand-100:#dbe8f6;
  --red:#e0182d; --green:#1a9d5a; --amber:#e6a100; --danger:#dc3545;
  --bg:#f4f6fb; --surface:#fff; --surface-2:#f8fafc; --border:#e6eaf1; --text:#1f2a37; --muted:#6b7280;
  --radius:14px; --radius-sm:9px; --shadow:0 1px 3px rgba(16,32,64,.06),0 6px 20px rgba(16,32,64,.05);
  --shadow-sm:0 1px 2px rgba(16,32,64,.08);
  --font:'Be Vietnam Pro','Segoe UI',Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:-0.1px}
h1,h2,h3,h4{margin:0;font-weight:600}
a{color:var(--brand);text-decoration:none}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.btn:hover{background:var(--brand-600);transform:translateY(-1px)}
.btn:active{transform:none}
.btn-block{width:100%}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:7px}
.btn-ghost{background:var(--brand-050);color:var(--brand)} .btn-ghost:hover{background:var(--brand-100)}
.btn-green{background:var(--green)} .btn-green:hover{background:#158049}
.btn-red{background:var(--danger)} .btn-red:hover{background:#b52a37}
.btn-amber{background:var(--amber);color:#4a3600} .btn-amber:hover{background:#cf9000}
.btn-gray{background:#eef1f6;color:#3b4453} .btn-gray:hover{background:#e2e6ee}
.btn-export{background:#107c41} .btn-export:hover{background:#0b6031}

/* Forms — chuyên nghiệp */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:12.5px;color:#374151;margin-bottom:6px}
.field .hint{font-size:12px;color:var(--muted);margin-top:4px}
input,select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;background:#fff;color:var(--text);transition:.15s}
input:hover,select:hover,textarea:hover{border-color:#cdd5e2}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}
textarea{resize:vertical;min-height:64px}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.row2{display:flex;gap:12px}.row2>*{flex:1}

/* ===== LOGIN ===== */
.login-wrapper{display:flex;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a4d8c 0%,#062f57 100%);padding:20px}
.login-card{background:#fff;padding:40px 34px;border-radius:20px;width:100%;max-width:430px;text-align:center;box-shadow:0 20px 60px rgba(6,31,57,.35)}
.login-card img{height:84px;margin-bottom:16px}
.login-card h2{color:var(--brand);font-size:19px;line-height:1.4}
.login-card h3{font-size:13px;color:var(--muted);font-weight:500;margin:6px 0 26px}
.login-card .field{text-align:left}
.login-hints{margin-top:18px;font-size:12.5px;color:#475467;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:left;line-height:1.9}
.login-foot{margin-top:16px;font-size:11.5px;color:#98a2b3;border-top:1px solid var(--border);padding-top:14px}
.err{color:var(--danger);font-size:13px;min-height:16px;margin-top:8px}

/* ===== APP SHELL ===== */
.shell{display:flex;min-height:100vh}
.sidebar{width:246px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;gap:11px;align-items:center;padding:18px 18px 14px}
.sb-brand img{height:42px}
.sb-brand b{font-size:13px;color:var(--brand);line-height:1.3}
.sb-brand span{font-size:11px;color:var(--muted)}
.nav{padding:8px 12px;display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;cursor:pointer;font-weight:600;font-size:13.5px;color:#475467;transition:.12s}
.nav-item .ic{font-size:17px;width:20px;text-align:center}
.nav-item:hover{background:var(--brand-050);color:var(--brand)}
.nav-item.active{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.sb-foot{padding:14px 18px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}

/* Topbar */
.topbar{height:62px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50}
.topbar h1{font-size:18px;color:var(--text)}
.top-actions{display:flex;align-items:center;gap:14px}
.bell{position:relative;cursor:pointer;font-size:20px;padding:6px;border-radius:9px}
.bell:hover{background:var(--surface-2)}
.bell .dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;background:var(--red);color:#fff;border-radius:9px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px}
.user-chip{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:22px;padding:5px 6px 5px 13px;font-size:13px}
.user-chip .who b{display:block;font-size:12.5px;line-height:1.2}
.user-chip .who span{font-size:11px;color:var(--muted)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.logout{color:var(--danger);cursor:pointer;font-size:12px;font-weight:600;margin-left:2px}

/* Content */
.content{padding:24px;max-width:1500px;width:100%;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.card h3.section{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-sub{font-size:12.5px;color:var(--muted);font-weight:500}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.kpi.g::before{background:var(--green)} .kpi.r::before{background:var(--danger)} .kpi.a::before{background:var(--amber)}
.kpi .lbl{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .val{font-size:30px;font-weight:700;color:var(--text);margin-top:6px;line-height:1}
.kpi .val.g{color:var(--green)} .kpi .val.r{color:var(--danger)} .kpi .val.b{color:var(--brand)}
.kpi .sub{font-size:11.5px;color:var(--muted);margin-top:4px}
.bar{height:7px;background:var(--surface-2);border-radius:5px;overflow:hidden;margin-top:10px}
.bar>i{display:block;height:100%;background:var(--brand);border-radius:5px}

/* Filters */
.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.filters .field{margin:0;flex:1;min-width:150px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.seg button{background:none;border:none;padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--brand);color:#fff}

/* Table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:var(--surface-2);color:#475467;text-align:left;padding:12px 14px;font-weight:600;font-size:12.5px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tr.clickable:hover{background:var(--brand-050);cursor:pointer}

/* Badges */
.badge{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;display:inline-block;white-space:nowrap}
.s-HOAN_THANH{background:var(--green)} .s-DUNG_TIEN_DO{background:var(--brand)}
.s-NGUY_CO_CHAM{background:var(--amber);color:#4a3600} .s-CHAM_TIEN_DO{background:var(--danger)} .s-none{background:#98a2b3}
.pill{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--border);background:#fff;color:#475467;display:inline-block}
.pill.PENDING_VERIFY{background:#fff8e6;border-color:#f6e2a8;color:#8a6100}
.pill.APPROVED{background:#e7f6ee;border-color:#b6e3ca;color:#12693f}
.pill.RETURNED{background:#fdecee;border-color:#f4c2c8;color:#a4162a}
.pri-URGENT{background:var(--red);color:#fff} .pri-HIGH{background:var(--amber);color:#4a3600} .pri-NORMAL{background:var(--surface-2);color:#475467;border:1px solid var(--border)}

/* Todo / directive lists */
.stack{display:flex;flex-direction:column;gap:12px}
.item{border:1px solid var(--border);border-radius:12px;padding:13px 15px;background:#fff}
.item.acc{border-left:4px solid var(--brand)}
.item .t{font-weight:600;font-size:13.5px}
.item .m{font-size:12px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.todo-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.todo-row:last-child{border-bottom:none}
.todo-row .grow{flex:1}
.todo-row.done .grow{text-decoration:line-through;color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(15,27,45,.55);display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;z-index:1000;overflow:auto;backdrop-filter:blur(2px)}
.modal{background:#fff;width:100%;max-width:920px;border-radius:18px;box-shadow:0 24px 70px rgba(6,31,57,.4);overflow:hidden}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--border);position:relative;background:var(--surface-2)}
.modal-head h3{font-size:16px;color:var(--brand);padding-right:34px}
.modal-head .sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.modal-body{padding:22px 24px;max-height:74vh;overflow:auto}
.close{position:absolute;top:16px;right:18px;font-size:22px;cursor:pointer;color:#98a2b3;line-height:1}
.close:hover{color:var(--danger)}
.col h4{font-size:13.5px;color:var(--brand);border-bottom:2px solid var(--brand-100);padding-bottom:7px;margin-bottom:12px}
.hist{border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:10px;padding:11px 13px;margin-bottom:10px;background:var(--surface-2)}
.hist .meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.issue{background:#fdecee;color:#a4162a;border-left:3px solid var(--danger);border-radius:7px;padding:7px 9px;margin-top:6px;font-size:12px}
.check-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.check-item:last-child{border-bottom:none}
.check-item .grow{flex:1}
.check-item .desc{font-size:12px;color:var(--muted);margin-top:3px}
.check-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}

/* Khối thu gọn trong modal nhiệm vụ — giảm tải nội dung, mở khi cần */
.fold{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);margin-bottom:10px}
.fold>summary{cursor:pointer;list-style:none;padding:11px 13px;font-size:13px;font-weight:600;color:var(--brand);
  display:flex;align-items:center;gap:8px;user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:'▸';font-size:11px;color:var(--muted);transition:transform .15s}
.fold[open]>summary::before{transform:rotate(90deg)}
.fold>summary:hover{background:var(--brand-100);border-radius:10px}
.fold-badge{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:1px 9px}
.fold-body{padding:0 13px 13px}

/* Ô bắt buộc + gợi ý tiến độ tự tính từ checklist */
.req{color:var(--danger);font-weight:700}
.field input.invalid,.field textarea.invalid{border-color:var(--danger);background:#fff5f6}
.sync-note{background:#fff8e6;border:1px solid var(--amber);border-left:3px solid var(--amber);color:#6b4e00;
  border-radius:9px;padding:9px 11px;margin-bottom:12px;font-size:12.5px;line-height:1.5}

/* Notification panel */
.notif{position:absolute;top:56px;right:20px;width:360px;max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);z-index:200}
.notif-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px}
.notif-item.unread{background:var(--brand-050)}
.notif-item .nt{font-weight:600}
.notif-item .nb{color:var(--muted);font-size:12px;margin-top:3px}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:820px){.sidebar{display:none}.content{padding:16px}}

/* ===== Nhận diện Đoàn: nhấn đỏ cờ ===== */
:root{ --doan-red:#d81f2a; --doan-red-700:#a5121d; --doan-yellow:#ffcd00; }
.topbar{border-top:3px solid var(--doan-red)}
.sb-brand{border-bottom:1px solid var(--border);position:relative}
.sb-brand::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:3px;background:linear-gradient(90deg,var(--doan-red),var(--doan-yellow))}
.login-card{border-top:5px solid var(--doan-red)}
.badge.pri-URGENT,.pri-URGENT{background:var(--doan-red)!important;color:#fff!important}
.kpi.brand::before{background:var(--doan-red)}
.avatar{background:linear-gradient(135deg,var(--brand),var(--doan-red))}

/* ===== Toast (thay alert) ===== */
#toastWrap{position:fixed;top:18px;right:18px;z-index:3000;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{background:#fff;border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:12px;box-shadow:0 10px 30px rgba(16,32,64,.18);padding:12px 14px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;opacity:0}
.toast.ok{border-left-color:var(--green)} .toast.err{border-left-color:var(--danger)} .toast.info{border-left-color:var(--brand)}
.toast .ti{font-size:16px;line-height:1.3}
.toast .tx b{display:block;margin-bottom:2px}
.toast .tx span{color:var(--muted);font-size:12.5px}

/* ===== Đánh bóng nhẹ (Be Vietnam Pro) ===== */
.kpi .val,.stat-card .num,table td,table th,.bar+span{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
h1,.topbar h1,.sb-brand b,.login-card h2{letter-spacing:-0.3px}
.btn,.badge,.pill{letter-spacing:0}
.card h3.section{letter-spacing:-0.2px}
.kpi{cursor:pointer;transition:box-shadow .15s,transform .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}
.kpi:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(16,32,64,.12)}
.kpi.active{outline-color:var(--brand)}
tr.clickable td{transition:background .12s}

/* ===== Motion setup: ẩn nhẹ trước khi GSAP vào (tránh nháy) ===== */
.will-anim{opacity:0}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} .will-anim{opacity:1!important} }