:root {
  --primary: #5B4FE9;
  --primary-dark: #4A3FD1;
  --primary-light: #EFEDFE;
  --ink: #14162B;
  --ink-soft: #565A74;
  --ink-muted: #9195AB;
  --line: #E7E8F2;
  --line-soft: #F1F2F8;
  --surface: #FFFFFF;
  --page-bg: #F7F7FB;
  --sidebar-bg: #17172B;
  --sidebar-line: #2A2B44;
  --sidebar-text: #B4B5D1;
  --sidebar-text-active: #FFFFFF;
  --success: #17915A;
  --success-bg: #E7F7EF;
  --amber: #B4740E;
  --amber-bg: #FCF1DC;
  --info: #2A6FD6;
  --info-bg: #E8F0FD;
  --danger: #D0342C;
  --danger-bg: #FCEAEA;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(20,22,43,0.04), 0 1px 1px rgba(20,22,43,0.03);
  --shadow-md: 0 10px 28px rgba(20,22,43,0.08), 0 2px 6px rgba(20,22,43,0.04);
  --shadow-lg: 0 24px 56px rgba(20,22,43,0.16), 0 6px 16px rgba(20,22,43,0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.screen { min-height: 100vh; }
.icon { flex-shrink: 0; }

/* ---------- logo ---------- */
.logo-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), #8B7CF6);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 13px; letter-spacing: 0.02em;
  flex-shrink: 0;
}
.logo-mark.lg { width: 56px; height: 56px; font-size: 19px; border-radius: 15px; }

/* ================= AUTH SCREEN ================= */
#auth-screen { padding: 0; }
.auth-split { display: flex; min-height: 100vh; }

.auth-visual {
  flex: 1.1;
  background: radial-gradient(1100px 700px at 20% 15%, #6355F2 0%, #4A3FD1 45%, #2E2680 100%);
  display: flex; align-items: center; justify-content: center; padding: 60px;
  position: relative; overflow: hidden;
}
.auth-visual::before {
  content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,255,255,0.06); top: -180px; right: -140px;
}
.auth-visual::after {
  content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255,255,255,0.05); bottom: -120px; left: -80px;
}
.auth-visual-inner { position: relative; max-width: 380px; color: #fff; }
.auth-visual .logo-mark.lg { background: rgba(255,255,255,0.16); margin-bottom: 24px; }
.auth-visual-title { font-size: 30px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.01em; }
.auth-visual-text { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0 0 28px; }
.auth-visual-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-visual-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.92); }
.auth-visual-list .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; }

.auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--surface); padding: 40px; }
.auth-box { width: 100%; max-width: 360px; }
.auth-box h1 { font-size: 24px; font-weight: 600; margin: 0 0 6px; color: var(--ink); letter-spacing: -0.01em; }
.auth-subtitle { font-size: 14px; color: var(--ink-muted); margin: 0 0 24px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; margin-top: 8px; }
.auth-form label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 12px 0 6px; }
.auth-form input {
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 14px; font-family: inherit; transition: border-color .15s, box-shadow .15s;
  background: #FBFBFE;
}
.auth-form input:focus {
  outline: none; border-color: var(--primary); background: #fff;
  box-shadow: 0 0 0 4px var(--primary-light);
}
.error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; font-weight: 500; }

@media (max-width: 860px) { .auth-visual { display: none; } }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin-bottom: 4px; }
.tab-btn {
  background: none; border: none; padding: 10px 4px; margin-right: 22px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-muted); border-bottom: 2.5px solid transparent;
  transition: color .15s, border-color .15s; font-family: inherit;
}
.tab-btn:hover { color: var(--ink-soft); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- buttons ---------- */
.btn-primary {
  background: var(--primary); color: #fff; border: none; padding: 8px 16px;
  border-radius: 9px; font-size: 13.5px; cursor: pointer; font-weight: 600;
  font-family: inherit; box-shadow: 0 1px 2px rgba(91,79,233,0.24);
  transition: background .15s, transform .1s, box-shadow .15s;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; height: 36px;
}
.btn-primary .icon { width: 15px; height: 15px; }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 3px 10px rgba(91,79,233,0.3); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background: var(--line); color: var(--ink-muted); box-shadow: none; cursor: not-allowed; }
.btn-primary.danger { background: var(--danger); box-shadow: 0 1px 2px rgba(208,52,44,0.24); }
.btn-primary.danger:hover { background: #B02A23; box-shadow: 0 3px 10px rgba(208,52,44,0.3); }
.btn-primary.danger:disabled { background: var(--line); color: var(--ink-muted); box-shadow: none; }
.btn-block { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; margin-top: 20px; height: auto; }

.btn-ghost {
  background: transparent; border: 1px solid var(--line); padding: 8px 14px;
  border-radius: 9px; font-size: 13.5px; cursor: pointer; color: var(--ink-soft);
  font-family: inherit; font-weight: 500; transition: background .15s, border-color .15s, color .15s;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; height: 36px;
}
.btn-ghost .icon { width: 15px; height: 15px; }
.btn-ghost:hover { background: var(--line-soft); border-color: #D5D8E5; color: var(--ink); }
.btn-ghost.danger { color: var(--danger); border-color: var(--danger-bg); }
.btn-ghost.danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.back-link {
  background: none; border: none; padding: 0; margin-bottom: 10px; cursor: pointer;
  color: var(--ink-muted); font-size: 13px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px; transition: color .15s;
}
.back-link:hover { color: var(--primary); }

.icon-btn {
  background: none; border: none; cursor: pointer; color: var(--ink-muted);
  width: 30px; height: 30px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--line-soft); color: var(--ink-soft); }
.icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }
.icon-btn.with-label {
  width: auto; padding: 4px 10px 4px 8px; gap: 4px; font-size: 12px; font-weight: 500;
  font-family: inherit; color: var(--ink-muted); border: 1px solid var(--line);
}
.icon-btn.with-label:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }

/* ================= APP SHELL (sidebar) ================= */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh;
  transition: width .16s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 26px; }
.brand-name { font-weight: 600; font-size: 15.5px; color: #fff; letter-spacing: -0.01em; }
.sidebar-collapse-btn {
  margin-left: auto; background: none; border: none; color: var(--sidebar-text); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ---------- sidebar THU GON (chi desktop, xem app.js applySidebarCollapsed) - mac
   dinh chi hien icon de tiet kiem khong gian, bam nut o dau de mo rong xem ten day
   du. Khong dung display:none cho .sidebar-collapse-btn/logo vi 2 thu nay PHAI luon
   hien ca luc thu gon (la cach duy nhat de mo rong lai). ---------- */
.sidebar.collapsed { width: 76px; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .company-switcher-box,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .user-info,
.sidebar.collapsed .logout-link { display: none; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sidebar-collapse-btn { margin-left: 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .nav-item svg { margin: 0; }
.sidebar.collapsed .user-card { justify-content: center; padding: 6px 0; }

.company-switcher-box { padding: 0 8px 18px; }
.company-switcher-box .roles-box-label { color: var(--sidebar-text); margin-bottom: 8px; }
.company-switcher-box select {
  width: 100%; padding: 8px 10px; border-radius: var(--radius); border: 1.5px solid var(--sidebar-line);
  background: #21223A; color: #fff; font-size: 13px; font-family: inherit; cursor: pointer;
}
.company-switcher-box select:focus { outline: none; border-color: var(--primary); }
.company-switcher-box .field-hint { color: var(--sidebar-text); margin-top: 8px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px; background: none; border: none;
  padding: 10px 12px; border-radius: 9px; cursor: pointer; text-align: left;
  color: var(--sidebar-text); font-size: 13.5px; font-weight: 600; font-family: inherit;
  transition: background .15s, color .15s;
}
.nav-item svg { flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-item.active svg { opacity: 1; }

.sidebar-footer { border-top: 1px solid var(--sidebar-line); padding-top: 14px; margin-top: 14px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.user-info { min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-link {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--sidebar-text); font-size: 12px; font-weight: 500; margin-top: 1px;
}
.logout-link:hover { color: #fff; text-decoration: underline; }

.main-content { flex: 1; min-width: 0; }
/* max-width truoc la 1180px - qua hep cho cac bang nhieu cot (VD Quan tri tai
   khoan) tren man hinh rong, khien bang luon phai cuon ngang du cua so con
   thua rat nhieu khoang trong. Nang len 1600px de bang co the "no ra" dung
   theo do rong cua so tren man hinh lon, van can giua (margin:auto) tren man
   hinh sieu rong hon nua. */
.container { max-width: 1600px; margin: 0 auto; padding: 36px 40px; }

/* ---------- avatars ---------- */
.avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 500; color: #fff; flex-shrink: 0;
}
.avatar { width: 36px; height: 36px; font-size: 13px; }
.avatar.xs { width: 22px; height: 22px; font-size: 10px; }
.avatar.md { width: 44px; height: 44px; font-size: 15px; }
.av-purple { background: linear-gradient(135deg,#7C6CF0,#5B4FE9); }
.av-teal { background: linear-gradient(135deg,#2FBF9F,#17915A); }
.av-coral { background: linear-gradient(135deg,#F0997B,#D85A30); }
.av-blue { background: linear-gradient(135deg,#5AA9F0,#2C6FD8); }
.av-amber { background: linear-gradient(135deg,#F5B14C,#D98A17); }
.av-pink { background: linear-gradient(135deg,#ED93B1,#D4537E); }

/* ---------- page header ---------- */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 20px; }
.page-title { font-size: 24px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.page-subtitle { font-size: 13.5px; color: var(--ink-muted); margin: 5px 0 0; }
.section-title { font-size: 15px; font-weight: 500; color: var(--ink); margin: 30px 0 12px; }

/* ---------- empty state ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 20px; text-align: center; background: var(--surface); border-radius: var(--radius-lg);
  border: 1.5px dashed var(--line);
}
.empty-icon { color: var(--ink-muted); margin-bottom: 14px; opacity: 0.7; }
.empty-title { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.empty-hint { font-size: 13px; color: var(--ink-muted); max-width: 320px; }
.empty-cell { color: var(--ink-muted); white-space: normal !important; padding: 20px 16px !important; }

/* ---------- projects ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.project-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 22px; cursor: pointer;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft);
  transition: box-shadow .18s, border-color .18s, transform .12s;
  position: relative;
}
.project-card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.project-card-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.project-card-top .project-card-icon { margin-bottom: 0; }
.project-card-top .project-card-icon.pci-todo { background: var(--line-soft); color: var(--ink-muted); }
.project-card-top .project-card-icon.pci-progress { background: var(--amber-bg); color: var(--amber); }
.project-card-top .project-card-icon.pci-done { background: var(--success-bg); color: var(--success); }
.project-card h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.project-card .meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.project-card .meta.muted { color: var(--ink-muted); }
.project-card .project-card-note { font-size: 11px; font-style: italic; }

/* ---------- staff grid ---------- */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
.staff-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 20px; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); position: relative;
  transition: box-shadow .18s, transform .12s;
}
.staff-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.staff-card .avatar { margin: 0 auto 12px; }
.staff-name { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.staff-card .card-del { position: absolute; top: 12px; right: 12px; }
.staff-card .meta { margin-top: 8px; }
.staff-card .task-tags { justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* ---------- tags / badges ---------- */
.tag-role {
  display: inline-block; font-size: 12px; font-weight: 500; color: var(--ink-soft);
  background: var(--line-soft); padding: 3px 10px; border-radius: 6px;
}
.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.badge-done { background: var(--success-bg); color: var(--success); }
.badge-progress { background: var(--amber-bg); color: var(--amber); }
.badge-signing { background: var(--info-bg); color: var(--info); }
.badge-todo { background: var(--line-soft); color: var(--ink-muted); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
/* Ly do tre (ghi chu cua task) di KEM ben canh badge "Tre X ngay" - de ngoai
   badge do, mau nhat + nghieng de chi rieng cum "Tre X ngay" bi to do, ghi
   chu chi la thong tin them khong can gay chu y bang mau do (do rieng het
   ca dong se roi mat). */
.late-reason { display: inline-block; margin-left: 6px; font-size: 12px; font-style: italic; color: var(--ink-muted); }
.badge-loai { padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.badge-fulltime { background: var(--primary-light); color: var(--primary-dark); }
.badge-freelance { background: #FDF0E6; color: #B85C1E; }

/* ---------- phase groups (thay bang phang) ---------- */
.phase-group { margin-bottom: 22px; }
.phase-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; }
.phase-title-group, .subphase-title-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.phase-title { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0; }
.phase-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-muted); font-weight: 500; }
.phase-need-badge, .phase-ok-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-weight: 500; font-size: 12px;
}
.phase-need-badge { background: var(--danger-bg); color: var(--danger); }
.phase-ok-badge { background: var(--success-bg); color: var(--success); }

/* .subphase-block dai dien cho MOI heading khong phai cap cao nhat (Muc, muc con cua
   muc...) - long duoc vao nhau khong gioi han cap, moi cap tu cong don padding-left
   nen thut vao dan theo do sau, khong can tinh depth thu cong. */
.subphase-block { margin: 0 0 14px; padding-left: 26px; border-left: 2px solid var(--line-soft); }
.subphase-block:last-child { margin-bottom: 0; }
.subphase-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.subphase-title {
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 0;
  display: flex; align-items: center; gap: 6px;
}
.subphase-title::before { content: ""; width: 3px; height: 12px; background: var(--primary); border-radius: 2px; display: inline-block; }
.subphase-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-muted); font-weight: 500; }

/* ---------- keo-tha HEADING (xem wireHeadingDragDrop o app.js) ----------
   draggable="true" dat THANG len ca thanh tieu de (.phase-header/.subphase-header,
   xem renderHeadingNode) - can "user-select: none" di kem, cung ly do nhu task
   (xem ghi chu o .task-row[draggable] phia tren). Tai su dung TEN CLASS giong
   task (.dragging/.drag-insert-before/.drag-insert-end/.drag-over-copy) nhung
   gan len phan tu heading (.phase-group/.subphase-block/.heading-body/
   #phase-groups) - can khai bao rieng vi CSS truoc chi nham vao .task-row/
   .task-list. .drag-reparent-target = dang tha THANG LEN TIEU DE 1 heading
   (se thanh heading CON cua no) - khac voi .drag-insert-before (doi cho voi
   heading ANH EM). */
.phase-header[draggable="true"], .subphase-header[draggable="true"] {
  cursor: grab; user-select: none; -webkit-user-drag: element;
}
.phase-header[draggable="true"]:active, .subphase-header[draggable="true"]:active { cursor: grabbing; }
.phase-group.dragging, .subphase-block.dragging { opacity: 0.35; }
.phase-group.drag-insert-before, .subphase-block.drag-insert-before { border-top: 3px solid var(--primary); padding-top: 8px; }
.heading-body.drag-insert-end, #phase-groups.drag-insert-end {
  box-shadow: inset 0 -3px 0 var(--primary); border-radius: var(--radius); min-height: 24px;
}
.heading-body.drag-over-copy, #phase-groups.drag-over-copy, .phase-header.drag-over-copy, .subphase-header.drag-over-copy {
  background: var(--primary-bg, #EEEDFC);
}
.phase-header.drag-reparent-target, .subphase-header.drag-reparent-target {
  background: var(--primary-bg, #EEEDFC); outline: 2px dashed var(--primary); outline-offset: 2px; border-radius: var(--radius);
}
.subphase-empty {
  font-size: 12.5px; color: var(--ink-muted); padding: 12px 16px; background: var(--surface);
  border: 1.5px dashed var(--line); border-radius: var(--radius); margin: 0 0 14px;
}

/* ---------- dong bao cao co the bam de nhay thang vao du an ---------- */
tr.report-row-link { cursor: pointer; }
tr.report-row-link:hover { background: var(--surface-hover, #F4F4FD); }
@keyframes task-row-flash-anim {
  0%, 100% { background: transparent; }
  20%, 80% { background: var(--primary-bg, #EEEDFC); }
}
.task-row-highlight { animation: task-row-flash-anim 1.8s ease; }

/* ---------- thu gon / mo rong heading ---------- */
.collapse-toggle { flex-shrink: 0; width: 24px; height: 24px; color: var(--ink-muted); }
.collapse-toggle svg { transition: transform .15s ease; }
.phase-group.collapsed .collapse-toggle svg,
.subphase-block.collapsed .collapse-toggle svg { transform: rotate(-90deg); }
.phase-group.collapsed .heading-body,
.subphase-block.collapsed .heading-body { display: none; }

/* Task nam duoi 1 heading duoc thut vao so voi tieu de heading do (giong cach
   subphase-block thut vao so voi heading cha) - de nhin ro task nao thuoc
   heading nao, khong bi le bang voi tieu de heading. */
.task-list {
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm); overflow: hidden;
  margin-left: 40px;
}
/* task-list co the RONG (heading moi tao, hoac heading chi co heading con ma
   khong co task truc tiep) - van phai giu lai lam vung tha (drop zone) cho
   keo-tha task khac vao, nhung KHONG duoc hien thanh 1 O TRONG co vien/bong do
   nhin roi mat (nhat la khi heading do khong he co task truc tiep, chi la cai
   khung rong nam giua cac heading con) - nen bo het bong/vien/nen, chi giu
   chieu cao toi thieu de van "vin" duoc chuot vao khi keo-tha. */
.task-list:empty { min-height: 10px; background: none; border: none; box-shadow: none; }
.task-row {
  display: grid;
  grid-template-columns: 2.7fr 0.95fr 1.3fr 0.9fr auto;
  align-items: center; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  transition: background .1s;
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: #FAFAFD; }

/* ---------- keo-tha task (giua cac heading, doi cho trong cung heading) ----------
   - .task-row[draggable] duoc bat khi CURRENT_PROJECT.can_edit (xem taskRowHtml) -
     dat THANG len ca hang (khong qua tay cam rieng) nen phai "user-select: none"
     de tranh Chrome/Edge hieu nham keo la boi den chon chu thay vi khoi dong
     keo-tha (bug tung gap khi thu lam theo cach nay lan dau).
   - .dragging: row dang duoc keo (mo di de de phan biet voi cac row con lai).
   - .drag-insert-before: row se hien ra NGAY DUOI vi tri se tha vao (vach ke tren dau row).
   - .task-list.drag-insert-end: tha vao CUOI danh sach (khong co row nao o duoi de gan vach ke). */
.task-row[draggable="true"] { cursor: grab; user-select: none; -webkit-user-drag: element; touch-action: none; }
.task-row[draggable="true"]:active { cursor: grabbing; }
.task-row.dragging { opacity: 0.35; cursor: grabbing; }
.task-row.drag-insert-before { border-top: 3px solid var(--primary); }
.task-list.drag-insert-end { box-shadow: var(--shadow-sm), inset 0 -3px 0 var(--primary); }
.task-list.drag-over-copy { background: var(--primary-bg, #EEEDFC); }
.task-row.needs-assign { background: linear-gradient(90deg, rgba(208,52,44,0.03), transparent 30%); }
/* Task qua han (chua Hoan thanh MA het deadline start+duration) - to mau do ro rang de
   nhin sao la biet ngay, khong lan voi mau nhat cua .needs-assign o tren. */
.task-row.task-row-overdue { background: var(--danger-bg); border-left: 4px solid var(--danger); padding-left: 14px; }
.task-row.task-row-overdue .task-content { color: var(--danger); }
.task-row.task-row-overdue:hover { background: #FBD9D6; }

.task-cell-label { font-size: 10.5px; color: var(--ink-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.task-cell-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.task-cell-main { min-width: 0; align-self: center; }
.task-content {
  font-size: 13.5px; font-weight: 400; color: var(--ink); margin-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-note {
  display: flex; align-items: flex-start; gap: 5px; font-size: 12px; font-style: italic;
  color: var(--ink-soft); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.task-note svg { flex-shrink: 0; margin-top: 1px; }
.task-tags { display: flex; align-items: center; gap: 6px; }
.task-cell-date, .task-cell-effort { font-size: 13px; color: var(--ink-soft); font-weight: 500; }

.assignee { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.chip-unassigned {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
  color: var(--danger); background: var(--danger-bg); padding: 4px 10px; border-radius: 100px;
}
.task-cell-actions { display: flex; gap: 2px; justify-self: end; }

/* ---------- dong hien thi 1 CHUYEN MON trong task-row (co the co nhieu dong,
   moi dong = 1 vai tro can trong task) - mau do neu con thieu nguoi dung loai,
   giup nhin thay NGAY chuyen mon nao dang trong thay vi chi biet task "co nguoi"
   noi chung. Xem taskRowHtml/requirementLineHtml trong app.js. ---------- */
.task-req-lines { display: flex; flex-direction: column; gap: 6px; }
.req-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 8px; border-radius: 8px; }
.req-line-missing { background: var(--danger-bg); }
.req-line-people { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .task-row { grid-template-columns: 1fr; gap: 8px; }
  .task-cell-actions { justify-self: start; }
}

/* ---------- Che do "Thu gon" WBS (checkbox #tf-compact) - chi hien Bat dau +
   Trang thai tren 1 dong gon, an nut menu/role yeu cau/nguoi thuc hien/thoi
   luong de nhin nhanh khong roi mat khi khong can sua. Xem applyWbsCompact()
   trong app.js. ---------- */
#phase-groups.wbs-compact .task-row {
  grid-template-columns: 2.2fr 0.95fr 0.9fr;
  padding: 9px 18px;
  gap: 18px;
}
#phase-groups.wbs-compact .task-req-lines,
#phase-groups.wbs-compact .task-note,
#phase-groups.wbs-compact .task-cell-effort,
#phase-groups.wbs-compact .task-cell-actions {
  display: none;
}
#phase-groups.wbs-compact .task-content { margin-bottom: 0; }
#phase-groups.wbs-compact .task-cell-status { flex-direction: row; align-items: center; }
/* Thu gon ca heading: an luon menu (sua/them task/them heading con/xoa) va
   nut di chuyen len/xuong cua heading - chi con ten heading + so task + badge
   du/thieu nguoi, dung nhu yeu cau "bo ca menu, move up, move down". */
#phase-groups.wbs-compact .move-up-heading-btn,
#phase-groups.wbs-compact .move-down-heading-btn,
#phase-groups.wbs-compact .edit-heading-btn,
#phase-groups.wbs-compact .add-task-to-heading-btn,
#phase-groups.wbs-compact .add-child-heading-btn,
#phase-groups.wbs-compact .del-heading-btn {
  display: none;
}

/* ---------- task modal: danh sach nhieu "chuyen mon can" (task-requirements) ---------- */
.task-req-row {
  border: 1.5px solid var(--line-soft); border-radius: var(--radius); padding: 14px;
  margin-bottom: 12px; background: #FBFBFE;
}
.task-req-row .input-row { margin-top: 0; }
.input-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.input-row-4 { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 12px; }
.task-req-remove-btn { margin-top: 12px; }

/* ---------- tables (Ke hoach tuyen dung) ---------- */
.table-wrap {
  overflow-x: auto; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); margin-bottom: 24px;
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
th {
  background: var(--page-bg); color: var(--ink-soft); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1.5px solid var(--line);
}
tbody tr:hover { background: #FAFAFD; }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: center; font-variant-numeric: tabular-nums; }
td.num.strong { font-weight: 500; color: var(--primary-dark); font-size: 14.5px; }
td.num[title] { cursor: help; text-decoration: underline dotted var(--line); text-underline-offset: 3px; }
.table-hint { font-size: 12.5px; color: var(--ink-muted); margin: -6px 0 12px; }

/* ---------- "can cho du an" chips trong bang tuyen dung ---------- */
.proj-cell { white-space: normal !important; }
.proj-chip {
  display: inline-block; font-size: 11.5px; font-weight: 500; color: var(--ink-soft);
  background: var(--line-soft); padding: 2px 9px; border-radius: 6px; margin: 2px 4px 2px 0;
}
.proj-chip-empty { color: var(--ink-muted); font-size: 12.5px; }

/* ---------- bieu do (Ke hoach tuyen dung) ---------- */
.chart-box {
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 24px;
}
.hbar-chart { display: flex; flex-direction: column; gap: 14px; }
.hbar-row { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 14px; }
.hbar-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.hbar-track { background: var(--line-soft); border-radius: 100px; height: 10px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 100px; transition: width .3s ease; }
.hbar-value { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- dashboard du an (tab "Dashboard", mac dinh khi mo 1 du an) ---------- */
.dash-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.dash-kpi-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.dash-kpi-value { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.dash-kpi-value.dash-kpi-success { color: var(--success); }
.dash-kpi-value.dash-kpi-amber { color: var(--amber); }
.dash-kpi-value.dash-kpi-danger { color: var(--danger); }
.dash-kpi-label { font-size: 12.5px; color: var(--ink-muted); margin-top: 4px; font-weight: 500; }
@media (max-width: 1000px) { .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } }

#dash-progress-chart .hbar-label,
#dash-status-chart .hbar-label { width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dash-progress-chart .hbar-row,
#dash-status-chart .hbar-row { grid-template-columns: 260px 1fr 44px; }
.dash-pct-pill { display: inline-block; padding: 3px 12px; border-radius: 100px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-pct-success { background: var(--success-bg); color: var(--success); }
.dash-pct-amber { background: var(--amber-bg); color: var(--amber); }
.dash-pct-danger { background: var(--danger-bg); color: var(--danger); }
.dash-pct-success-bg { background: var(--success); }
.dash-pct-amber-bg { background: var(--amber); }
.dash-pct-danger-bg { background: var(--danger); }

/* ---------- DASHBOARD CA NHAN (trang landing dau tien - khung theo tai khoan,
   du lieu theo cong ty dang chon o sidebar, xem view-dashboard trong index.html) ---------- */
/* Truoc dung CSS Grid thuong (display:grid) - nhuoc diem: MOI HANG phai cao
   bang the CAO NHAT trong hang do (VD widget "Danh sach task qua han" dai ra
   thi ca hang bi keo dai theo, day widget hang sau xuong rat xa, de lo khoang
   trong lon). Doi sang CSS multi-column (kieu "masonry"/Pinterest) - moi cot
   tu xep chong cac the theo chieu cao THAT SU cua rieng no, khong phu thuoc
   cot ben canh, het hoan toan khoang trong bat thuong. column-width:320px de
   trinh duyet tu tinh so cot vua man hinh (tuong tu auto-fill minmax truoc).
   Luu y: thu tu hien thi la DOC THEO TUNG COT (het cot 1 moi sang cot 2), hoi
   khac so voi grid cu (ngang truoc doc sau) nhung la danh doi hop ly de khong
   con khoang trong. */
.dashboard-widget-grid {
  column-width: 320px; column-gap: 18px;
}
.dash-widget-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 18px; overflow: hidden;
}
.dash-widget-card.dash-widget-kpi { display: flex; flex-direction: column; justify-content: center; min-height: 108px; }
.dash-widget-title {
  font-size: 12.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: 0.03em; margin-bottom: 12px;
}
.dash-widget-kpi .dash-widget-title { margin-bottom: 8px; }
.dash-widget-kpi-value { font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.dash-widget-loading, .dash-widget-empty { font-size: 13px; color: var(--ink-muted); padding: 4px 0; }
.dash-widget-list { display: flex; flex-direction: column; gap: 12px; }
.dash-widget-list-item { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.dash-widget-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.dash-widget-list-item-link { cursor: pointer; margin: 0 -8px; padding: 4px 8px 12px; border-radius: 6px; }
.dash-widget-list-item-link:hover { background: var(--surface-hover, #F4F4FD); }
.dash-widget-list-title {
  font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-widget-list-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.dash-widget-list-meta { font-size: 12px; color: var(--danger); font-weight: 600; margin-top: 3px; }
/* "extra" (VD ghi chu ly do tre) hien RIENG voi "meta" o tren, mau nhat hon va
   KHONG in dam - tranh to do ca dong khi meta la canh bao (VD "Tre X ngay")
   con extra chi la thong tin bo sung, khong phai canh bao. */
.dash-widget-list-extra { font-size: 11.5px; color: var(--ink-muted); font-style: italic; margin-top: 2px; }
.dash-widget-list-more { font-size: 12px; color: var(--ink-muted); text-align: center; padding-top: 2px; }
.dash-widget-bar .hbar-row { grid-template-columns: 96px 1fr 34px; gap: 10px; }
.dash-widget-bar .hbar-label { width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- widget kieu bieu do tron (donut, VD kpi_late_rate) ---------- */
.dash-widget-card.dash-widget-pie { display: flex; flex-direction: column; justify-content: center; min-height: 108px; }
.dash-pie-wrap { display: flex; align-items: center; gap: 22px; }
.dash-pie-donut {
  position: relative; width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
}
.dash-pie-donut-hole {
  position: absolute; top: 13px; left: 13px; width: 66px; height: 66px; border-radius: 50%;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
}
.dash-pie-donut-pct { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.dash-pie-legend { display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; min-width: 0; }
.dash-pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.dash-pie-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.dash-pie-legend-item span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-pie-legend-value { font-weight: 700; color: var(--ink); margin-left: auto; padding-left: 8px; }

/* ---------- WIDGET PICKER (modal "Quan tri dashboard" - chon widget kieu 2 cot) ---------- */
.widget-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.widget-picker-col-title {
  font-size: 11.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: 0.03em; margin-bottom: 8px;
}
.widget-picker-list {
  border: 1px solid var(--line-soft); border-radius: var(--radius); max-height: 320px; overflow-y: auto;
  background: #FBFBFE;
}
.widget-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft);
}
.widget-picker-item:last-child { border-bottom: none; }
.widget-picker-item-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.widget-picker-empty { padding: 14px 12px; font-size: 12.5px; color: var(--ink-muted); }
@media (max-width: 640px) { .widget-picker { grid-template-columns: 1fr; } }

.fl-chart-svg { width: 100%; height: 230px; display: block; }
.chart-axis-line { stroke: var(--line); stroke-width: 1; }
.chart-axis-label { font-size: 10px; fill: var(--ink-muted); font-family: 'Inter', sans-serif; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,22,43,0.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  animation: fadeIn .12s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface); border-radius: var(--radius-lg); padding: 28px;
  width: 460px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.modal.modal-wide { width: 760px; }
.modal h3 { margin: 0 0 16px; color: var(--ink); font-size: 17px; font-weight: 600; }
/* .settings-form (trang "Cai dat", NGOAI modal - xem view-settings) dung
   CHUNG bo style label/input/select/textarea/checkbox voi .modal, de khong
   phai viet lai tu dau - ca 2 deu la "form nhap cau hinh" giong nhau. */
.modal label, .settings-form label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.modal input, .modal select, .modal textarea, .settings-form input, .settings-form select, .settings-form textarea {
  width: 100%; padding: 10px 13px; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 14px; font-family: inherit; background: #FBFBFE; transition: border-color .15s, box-shadow .15s;
}
.modal label.checkbox-field, .settings-form label.checkbox-field {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 4px; text-transform: none; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.modal label.checkbox-field input[type="checkbox"], .settings-form label.checkbox-field input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; padding: 0; margin: 0;
  border: 1.5px solid var(--line); background: #FBFBFE; accent-color: var(--primary); cursor: pointer;
}
.modal textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.modal input:focus, .modal select:focus, .modal textarea:focus,
.settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus {
  outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px var(--primary-light);
}
.settings-form { max-width: 640px; }
.settings-form code { font-size: 12px; background: var(--line-soft); padding: 1px 5px; border-radius: 4px; }
.settings-form-result { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; }
.settings-form-result.ok { background: var(--success-bg); color: var(--success); }
.settings-form-result.fail { background: var(--danger-bg); color: var(--danger); }
.modal input[type="range"] {
  width: 100%; padding: 0; border: none; background: transparent;
  height: 32px; accent-color: var(--primary); cursor: pointer;
}
.modal input[type="range"]:focus { box-shadow: none; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-row-3 .span-2 { grid-column: span 2; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.field-hint { font-size: 12px; color: var(--ink-muted); margin: 4px 0 0; }
.warning-box {
  background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(208,52,44,0.25);
  border-radius: 9px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 4px;
}

/* ---------- roles box ---------- */
.roles-box {
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm); padding: 18px 20px; margin-bottom: 22px;
}
.roles-box-label { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.role-chips-empty { font-size: 13px; color: var(--ink-muted); }
.role-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--primary-light); color: var(--primary-dark);
  font-size: 12.5px; font-weight: 600; padding: 5px 6px 5px 12px; border-radius: 100px;
}
.role-chip button {
  background: rgba(74,63,209,0.12); border: none; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--primary-dark);
  transition: background .15s;
}
.role-chip button:hover { background: rgba(74,63,209,0.24); }

/* ---------- backup / restore du lieu (Quan tri tai khoan) ---------- */
.backup-box { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.backup-action {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.backup-action-title { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.backup-action .field-hint { margin: 0 0 10px; max-width: 520px; }
.backup-action input[type="file"] { font-size: 13px; font-family: inherit; color: var(--ink-soft); }
.backup-action button { flex-shrink: 0; }

/* ---------- staff picker (chon nguoi phu trach task - chip bam chon) ----------
   Luu y: cac selector duoi day PHAI co it nhat 2 class (vd ".staff-picker
   .staff-pick-chip") de thang duoc ".modal label" / ".modal input" (dinh nghia
   o tren, cung la 1-class+1-element = do dac hieu ngang bang "label"/"input"
   don le) - neu chi dung 1 class nhu ".staff-pick-chip" se BI "modal label {
   display:block }" de mat, vo layout (da gap loi nay 1 lan). */
.staff-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-picker .staff-pick-chip {
  position: relative; display: inline-flex !important; align-items: center; gap: 8px;
  padding: 6px 30px 6px 6px; border-radius: 100px; border: 1.5px solid var(--line-soft);
  background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s;
  margin: 0;
}
.staff-picker .staff-pick-chip:hover { border-color: var(--primary); }
.staff-picker .staff-pick-chip input {
  position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; pointer-events: none;
}
.staff-picker .staff-pick-avatar {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.staff-picker .staff-pick-text { display: flex; flex-direction: column; line-height: 1.25; }
.staff-picker .staff-pick-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.staff-picker .staff-pick-role { font-size: 11px; color: var(--ink-muted); }
.staff-picker .staff-pick-check {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: transparent;
  background: var(--surface); transition: background .12s, border-color .12s, color .12s;
}
.staff-picker .staff-pick-chip.checked {
  border-color: var(--primary); background: var(--primary-light);
}
.staff-picker .staff-pick-chip.checked .staff-pick-check {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ---------- role picker (chon vai tro cong viec cho nhan su - chip bam chon) ---------- */
.role-pick-list { display: flex; flex-wrap: wrap; gap: 8px; }
.role-pick-list .role-pick-chip {
  position: relative; display: inline-flex !important; align-items: center; padding: 6px 14px; border-radius: 100px;
  border: 1.5px solid var(--line-soft); background: var(--surface); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft); transition: border-color .12s, background .12s, color .12s;
}
.role-pick-list .role-pick-chip:hover { border-color: var(--primary); }
.role-pick-list .role-pick-chip input {
  position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; pointer-events: none;
}
.role-pick-list .role-pick-chip.checked { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }

.role-add-form { display: flex; gap: 8px; }
.role-add-form input {
  flex: 1; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 13.5px; font-family: inherit; background: #FBFBFE;
}
.role-add-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.btn-ghost.small { padding: 6px 12px; font-size: 12.5px; height: 30px; }

/* ---------- header actions / view toggle ---------- */
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-actions .btn-primary { margin-left: 6px; }
.view-toggle { display: flex; background: var(--line-soft); border-radius: 9px; padding: 3px; margin-right: 6px; height: 36px; box-sizing: border-box; }
.toggle-btn {
  background: none; border: none; padding: 0 14px; border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink-muted); font-family: inherit; transition: background .15s, color .15s;
}
.toggle-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- filter bar (danh sach du an / danh sach task trong du an) ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px;
}
.filter-bar input[type="text"], .filter-bar select {
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 13.5px; font-family: inherit; background: var(--surface); color: var(--ink);
  transition: border-color .15s;
}
.filter-bar input[type="text"] { flex: 1 1 220px; min-width: 160px; }
.filter-bar select { flex: 0 0 auto; }
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--primary); }
.filter-bar .filter-checkbox {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft);
  font-weight: 500; white-space: nowrap; cursor: pointer;
}
.filter-bar .filter-checkbox input[type="number"] {
  width: 48px; padding: 6px 4px; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 13.5px; font-family: inherit; background: var(--surface); color: var(--ink);
  text-align: center; transition: border-color .15s;
}
.filter-bar .filter-checkbox input[type="number"]:focus { outline: none; border-color: var(--primary); }

/* ---------- bao cao effort nhan su ---------- */
.wl-ok-banner {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--success-bg);
  color: var(--success); border-radius: var(--radius-lg); font-size: 13.5px; font-weight: 500; margin-bottom: 20px;
}
.wl-alert-card {
  padding: 12px 18px; border-radius: var(--radius); margin-bottom: 10px; border-left: 4px solid transparent;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.wl-alert-overloaded { border-left-color: var(--danger); background: var(--danger-bg); }
.wl-alert-underutilized { border-left-color: var(--amber); background: var(--amber-bg); }
.wl-alert-name { font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 3px; }
.wl-alert-text { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
#workload-table td.wl-cell { text-align: center; padding: 10px 12px; border-radius: 6px; }
.wl-cell-over { background: var(--danger-bg); }
.wl-cell-idle { background: #EAF2FE; }
.wl-cell-week-spike { background: repeating-linear-gradient(135deg, var(--danger-bg), var(--danger-bg) 6px, #fff 6px, #fff 12px); border: 1px dashed var(--danger); }
.wl-cell-week-spike .wl-eff, .wl-cell-week-spike .wl-pct { color: var(--danger); }
.wl-eff { font-size: 13px; font-weight: 600; color: var(--ink); }
.wl-pct { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }
.wl-cell-over .wl-eff, .wl-cell-over .wl-pct { color: var(--danger); }

/* cot tuan (nho hon, chi hien % - phan biet voi cot tong thang ben canh) */
#workload-table td.wl-cell-week { padding: 8px 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); border-radius: 4px; }
#workload-table th.wl-week-th { font-size: 11px; font-weight: 500; color: var(--ink-muted); padding: 6px 6px; }
#workload-table th.wl-month-total-th, #workload-table td.wl-cell:not(.wl-cell-week) {
  border-left: 2px solid var(--line);
}
#workload-table th.wl-month-total-th { font-weight: 600; color: var(--ink); }

/* ---------- viec trong tuan ---------- */
.week-nav {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.week-nav-label { font-size: 14.5px; font-weight: 600; color: var(--ink); min-width: 200px; }
.week-nav input[type="date"] {
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 13.5px; font-family: inherit; background: var(--surface); color: var(--ink);
}
#weekly-table tr.wk-row-overdue,
#dl-overdue-table tr.wk-row-overdue,
#dash-people-table tr.wk-row-overdue { background: var(--danger-bg); }
#weekly-table tr.wk-row-overdue:hover,
#dl-overdue-table tr.wk-row-overdue:hover,
#dash-people-table tr.wk-row-overdue:hover { background: var(--danger-bg); }

/* ---------- Viec trong tuan / Viec qua han: rut gon cot Du an/Task bang "...",
   cot Nguoi phu trach thi NGAT DONG thay vi rut gon (de van thay het ten) - ap
   dung chung cho ca 3 bang (weekly + 2 bang qua han/sap qua han) de dong bo. ---------- */
#weekly-table td.wk-cell-ellipsis,
#dl-overdue-table td.wk-cell-ellipsis,
#dl-upcoming-table td.wk-cell-ellipsis {
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#weekly-table td.wk-cell-task,
#dl-overdue-table td.wk-cell-task,
#dl-upcoming-table td.wk-cell-task { max-width: 260px; }
#weekly-table td.wk-cell-task .task-content,
#dl-overdue-table td.wk-cell-task .task-content,
#dl-upcoming-table td.wk-cell-task .task-content { max-width: 100%; }
#weekly-table td.wk-cell-wrap,
#dl-overdue-table td.wk-cell-wrap,
#dl-upcoming-table td.wk-cell-wrap {
  max-width: 150px; white-space: normal; word-break: break-word; line-height: 1.5;
}

/* ---------- gantt ---------- */
.gantt-wrap {
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm); padding: 20px; overflow-x: auto;
}
.gantt-wrap .empty-state { border: none; box-shadow: none; padding: 40px 20px; }
.gantt-container .grid-header { fill: var(--page-bg); }
.gantt-container .grid-row { fill: #fff; }
.gantt-container .row-line { stroke: var(--line-soft); }
.gantt-container .tick { stroke: var(--line-soft); }
.gantt-container .today-highlight { fill: var(--primary-light); }
.gantt-container .bar { fill: var(--primary-light); stroke: var(--primary); stroke-width: 0; rx: 4; ry: 4; }
.gantt-container .bar-progress { fill: var(--primary); }
.gantt-container .bar-label { fill: var(--ink); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; }
.gantt-container .bar-wrapper.gantt-done .bar-progress { fill: var(--success); }
.gantt-container .bar-wrapper.gantt-done .bar { fill: var(--success-bg); }
.gantt-container .bar-wrapper.gantt-progress .bar-progress { fill: var(--amber); }
.gantt-container .bar-wrapper.gantt-progress .bar { fill: var(--amber-bg); }
.gantt-container .bar-wrapper.gantt-signing .bar-progress { fill: var(--info); }
.gantt-container .bar-wrapper.gantt-signing .bar { fill: var(--info-bg); }
.gantt-container .bar-wrapper.gantt-todo .bar { fill: var(--line-soft); }
.gantt-container .bar-wrapper.gantt-todo .bar-progress { fill: var(--ink-muted); }
/* Task qua han tren Gantt - do ruc toan bo thanh (khong chi phan progress) de noi bat
   len ngay giua cac thanh khac, kem vien do dam hon de cang de nhan ra. */
.gantt-container .bar-wrapper.gantt-overdue .bar { fill: #F5A9A4; stroke: var(--danger); stroke-width: 1.5; }
.gantt-container .bar-wrapper.gantt-overdue .bar-progress { fill: var(--danger); }
.gantt-container .bar-wrapper.gantt-overdue .bar-label { fill: var(--danger); font-weight: 700; }
.gantt-container .bar-wrapper.gantt-overdue .bar-label.big { fill: var(--danger); }
/* Thanh dai dien cho Heading (Pha/Muc/...) - ngay = min/max cua task ben trong, khong
   phai task that nen to va dam mau hon de phan biet voi thanh task thuong. */
.gantt-container .bar-wrapper.gantt-heading .bar { fill: var(--ink-soft); rx: 3; ry: 3; }
.gantt-container .bar-wrapper.gantt-heading .bar-progress { fill: transparent; }
/* label nam TRONG thanh (khong co class .big) thi chu trang; neu thanh qua ngan, thu vien
   tu day label ra NGOAI va them class .big - luc do phai giu chu toi (nen trang phia sau). */
.gantt-container .bar-wrapper.gantt-heading .bar-label { font-weight: 600; fill: #fff; }
.gantt-container .bar-wrapper.gantt-heading .bar-label.big { fill: var(--ink); }
.gantt-container .bar-wrapper.gantt-heading { opacity: 0.96; }
.gantt-popup { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.gantt-popup strong { color: var(--ink); font-size: 13px; }

/* ================================================================
   MOBILE RESPONSIVE (dien thoai, kho <=768px) - KHONG dong den layout
   desktop hien co, chi override khi man hinh nho. Sidebar tren desktop
   la cot co dinh ben trai; tren mobile no bien thanh drawer truot tu
   trai, mo/dong qua nut hamburger (xem app.js: openMobileMenu/closeMobileMenu).
   ================================================================ */
.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }
.mobile-menu-close { display: none; }
.logo-mark.sm { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }

@media (max-width: 768px) {
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 40;
    background: var(--sidebar-bg); padding: 12px 16px;
    box-shadow: var(--shadow-md);
  }
  .mobile-menu-btn {
    background: none; border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; padding: 0;
  }
  .mobile-menu-btn:active { background: rgba(255,255,255,0.12); }
  .mobile-topbar-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 15px; }

  .app-shell { flex-direction: column; min-height: auto; }

  .sidebar,
  .sidebar.collapsed {
    position: fixed; top: 0; left: 0; height: 100vh; width: 82vw; max-width: 300px;
    z-index: 65; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* Nut/trang thai "thu gon" chi danh cho desktop (xem khoi CSS ".sidebar.collapsed"
     o phia tren) - tren mobile sidebar la drawer day du, luon hien het chu/select
     du co class "collapsed" hay khong (JS ap dung collapsed mac dinh khong phan
     biet man hinh). An nut thu gon va ep hien lai moi thu bang !important. */
  .sidebar-collapse-btn { display: none !important; }
  .sidebar.collapsed .sidebar-brand { justify-content: flex-start; padding-left: 8px; padding-right: 8px; }
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .company-switcher-box,
  .sidebar.collapsed .user-info { display: block !important; }
  .sidebar.collapsed .nav-item span { display: inline !important; }
  .sidebar.collapsed .logout-link { display: inline-block !important; }
  .sidebar.collapsed .nav-item { justify-content: flex-start !important; padding: 10px 12px !important; }
  .sidebar.collapsed .user-card { justify-content: flex-start !important; padding: 6px 8px !important; }

  .mobile-menu-close {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; background: none; border: none; color: var(--sidebar-text);
    font-size: 20px; width: 30px; height: 30px; cursor: pointer; flex-shrink: 0;
  }
  .mobile-menu-close:hover { color: #fff; }

  .sidebar-overlay {
    display: block; position: fixed; inset: 0; background: rgba(20,22,43,0.5); z-index: 60;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

  .main-content { width: 100%; min-width: 0; }
  .container { padding: 18px 14px; max-width: 100%; }

  .page-header { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
  .page-header .header-actions { flex-wrap: wrap; }
  .page-title { font-size: 20px; }

  .modal-overlay { padding: 16px; }
  .modal { width: 100%; max-width: 460px; padding: 20px; max-height: 85vh; }
  .modal.modal-wide { width: 100%; max-width: 620px; }
  .input-row { grid-template-columns: 1fr; }

  .week-nav { flex-wrap: wrap; gap: 8px; }
  .week-nav-label { min-width: 0; flex: 1 1 auto; }

  .backup-action { flex-direction: column; align-items: stretch; gap: 14px; }

  .filter-bar input[type="text"] { flex: 1 1 100%; }

  th, td { padding: 10px 12px; font-size: 12.5px; }

  .project-grid, .staff-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }

  .task-list { margin-left: 0; }
  .subphase-block { padding-left: 14px; }

  .auth-form-side { padding: 24px; }
  .auth-box { max-width: none; }
}

@media (max-width: 420px) {
  .project-grid, .staff-grid { grid-template-columns: 1fr; }
}