/* System font stack — không cần Inter woff2 (-280KB) */
body, html { margin:0; padding:0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif; }
/* Dương 03/07/2026 — màn hình LOAD đồng bộ với index.html (nền kem, logo navy+indigo). */
.boot { position:fixed; inset:0; background:#faf9f5; color:#14304e; display:flex; align-items:center; justify-content:center; font-size:14px; font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
:root[data-theme="dark"] .boot { background:#0e1626; color:#e8edf4; }
.gantt .grid-background {
  fill: none;
}
.gantt .grid-header {
  fill: #ffffff;
  stroke: #e0e0e0;
  stroke-width: 1.4;
}
.gantt .grid-row {
  fill: #ffffff;
}
.gantt .grid-row:nth-child(even) {
  fill: #f5f5f5;
}
.gantt .row-line {
  stroke: #ebeff2;
}
.gantt .tick {
  stroke: #e0e0e0;
  stroke-width: 0.2;
}
.gantt .tick.thick {
  stroke-width: 0.4;
}
.gantt .today-highlight {
  fill: #fcf8e3;
  opacity: 0.5;
}
.gantt .arrow {
  fill: none;
  stroke: #666;
  stroke-width: 1.4;
}
.gantt .bar {
  fill: #b8c2cc;
  stroke: #8D99A6;
  stroke-width: 0;
  transition: stroke-width 0.3s ease;
  user-select: none;
}
.gantt .bar-progress {
  fill: #a3a3ff;
}
.gantt .bar-invalid {
  fill: transparent;
  stroke: #8D99A6;
  stroke-width: 1;
  stroke-dasharray: 5;
}
.gantt .bar-invalid ~ .bar-label {
  fill: #555;
}
.gantt .bar-label {
  fill: #fff;
  dominant-baseline: central;
  text-anchor: middle;
  font-size: 12px;
  font-weight: lighter;
}
.gantt .bar-label.big {
  fill: #555;
  text-anchor: start;
}
.gantt .handle {
  fill: #ddd;
  cursor: ew-resize;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.gantt .bar-wrapper {
  cursor: pointer;
  outline: none;
}
.gantt .bar-wrapper:hover .bar {
  fill: #a9b5c1;
}
.gantt .bar-wrapper:hover .bar-progress {
  fill: #8a8aff;
}
.gantt .bar-wrapper:hover .handle {
  visibility: visible;
  opacity: 1;
}
.gantt .bar-wrapper.active .bar {
  fill: #a9b5c1;
}
.gantt .bar-wrapper.active .bar-progress {
  fill: #8a8aff;
}
.gantt .lower-text, .gantt .upper-text {
  font-size: 12px;
  text-anchor: middle;
}
.gantt .upper-text {
  fill: #555;
}
.gantt .lower-text {
  fill: #333;
}
.gantt .hide {
  display: none;
}

.gantt-container {
  position: relative;
  overflow: auto;
  font-size: 12px;
}
.gantt-container .popup-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  padding: 0;
  color: #959da5;
  border-radius: 3px;
}
.gantt-container .popup-wrapper .title {
  border-bottom: 3px solid #a3a3ff;
  padding: 10px;
}
.gantt-container .popup-wrapper .subtitle {
  padding: 10px;
  color: #dfe2e5;
}
.gantt-container .popup-wrapper .pointer {
  position: absolute;
  height: 5px;
  margin: 0 0 0 -5px;
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}
/* QLDA v2 — Compact styles. Light blue office vibe, less chrome.
 * Tokens compatible with v1 design system but trimmed. */

:root {
  /* Colors — match v1.1 Phú Thạnh palette */
  --primary: #1F4E79;
  --primary-light: #DEEBF7;
  --primary-dark: #15375A;
  --secondary: #2E75B6;
  --brand-soft: #EDF2FD;
  --brand-soft-2: #DCE6FA;

  --bg: #F5F7FA;
  --bg-elev: #FFFFFF;
  --bg-sunken: #EDF1F8;
  --bg-hover: #F8FAFD;
  --card: #FFFFFF;
  --border: #E5EAF2;
  --border-strong: #CBD5E1;
  --divider: #EEF2F7;

  --text: #0F172A;
  --text-mid: #475569;
  --text-dim: #64748B;
  --text-fade: #94A3B8;

  --success: #548235;
  --success-soft: #E2EFDA;
  --warning: #C65911;
  --warning-soft: #FCE4D6;
  --danger: #C00000;
  --danger-soft: #F8D7DA;
  --info: #2E75B6;
  --info-soft: #DEEBF7;
  --violet: #6B5BAB;
  --violet-soft: #EDE9FE;

  /* Phase colors */
  --p0: #595959; --p1: #4472C4; --p2: #5B9BD5; --p3: #70AD47;
  --p4: #FFC000; --p5: #ED7D31; --p6: #548235;

  --r-sm: 6px; --r-md: 8px; --r-lg: 10px;
  --shadow-1: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-2: 0 2px 8px rgba(15,23,42,0.08);
  --shadow-3: 0 8px 24px rgba(15,23,42,0.12);

  --font: 'Inter', -apple-system, "Segoe UI", "Be Vietnam Pro", sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --header-h: 52px;
  --sidebar-w: 220px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

.app { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) 1fr; }

/* ── Sidebar ── */
.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 12px 10px;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.sidebar-brand .logo {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.sidebar-brand .name { font-weight: 700; font-size: 13px; color: var(--text); line-height: 1.1; }
.sidebar-brand .sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

.nav-section { margin-top: 6px; }
.nav-section .lbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-fade); padding: 8px 10px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text-mid);
  font-size: 12.5px; font-weight: 500;
  border: none; background: transparent;
  width: 100%; text-align: left;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--primary); font-weight: 600; }
.nav-item .ni-icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.85; }
.nav-item .badge { margin-left: auto; background: var(--primary); color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9px; min-width: 18px; text-align: center; }
.nav-item .badge.danger { background: var(--danger); }
/* Chống nhãn navbar TRÀN/CHỒNG icon ở MỌI bề rộng hẹp (gốc: flex con min-width:auto không co lại).
   Cho phép co + cắt gọn 1 dòng; sidebar ẩn tràn ngang. Áp mọi state, không phụ thuộc breakpoint. */
.sidebar { overflow-x: hidden; }
.nav-item { overflow: hidden; }
.nav-item > span:not(.ni-icon), .nav-section .lbl {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-foot {
  margin-top: auto;
  padding: 10px 6px 0;
  border-top: 1px solid var(--divider);
}
.user-chip { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 7px; }
.user-chip .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
}
.user-chip .nm { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.1; }
.user-chip .rl { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* ── Main ── */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  display: flex; align-items: center;
  padding: 0 22px;
  gap: 14px;
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
/* Hamburger chỉ hiện ở màn hình nhỏ (mặc định ẩn trên desktop) */
.mobnav-burger { display: none; }
.topbar .crumbs { font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; align-items: center; }
.topbar .crumbs a { color: var(--text-dim); text-decoration: none; cursor: pointer; }
.topbar .crumbs a:hover { color: var(--primary); }
.topbar .crumbs .sep { color: var(--text-fade); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Thanh tìm kiếm Dashboard GIÃN HẾT chiều ngang còn lại (dễ thao tác). Scope #root để KHÔNG đụng
   topbar Công văn (nằm ở #cv-host ngoài #root, đã full-width riêng) và ô tìm trong modal.
   Bỏ margin-left:auto + cho topbar-right flex:1 (auto-margin sẽ vô hiệu flex-grow nên phải bỏ). */
#root .topbar-right { flex: 1; margin-left: 0; }
#root .topbar-right .search-box { flex: 1 1 auto; min-width: 0; width: auto; }

.icon-btn {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-mid);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.icon-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.icon-btn .dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--bg-elev);
}

.search-box {
  display: flex; align-items: center;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  width: 240px;
  gap: 7px;
}
.search-box input {
  background: transparent; border: none; outline: none;
  flex: 1; font-size: 12px; color: var(--text);
}
.search-box input::placeholder { color: var(--text-fade); }
.search-box .k {
  font-family: var(--mono); font-size: 9px; color: var(--text-dim);
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 1px 4px; border-radius: 3px;
}

.today-pill {
  background: var(--brand-soft); color: var(--primary);
  padding: 4px 12px; border-radius: 14px;
  font-weight: 600; font-size: 11px;
  display: flex; align-items: center; gap: 5px;
}

.content { padding: 20px 22px; flex: 1; min-width: 0; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text-mid);
  transition: all 0.12s;
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text); }
.btn.primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: white; }
.btn.success { background: var(--success); color: white; border-color: var(--success); }
.btn.success:hover { background: #6E9B45; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg-hover); }
.btn.sm { padding: 4px 9px; font-size: 11px; }

/* ── Cards ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.card.flush { padding: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.card-head h2 {
  margin: 0; font-size: 13px; font-weight: 700;
  color: var(--text); display: flex; align-items: center; gap: 7px;
}
.card-head .h-sub { font-size: 11px; color: var(--text-dim); font-weight: 400; }

/* ── Source bar ── */
.source-bar {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-mid);
}
.source-bar .src-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: srcPulse 2s infinite;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(84, 130, 53, 0.15);
}
.source-bar.sample .src-dot { background: var(--warning); box-shadow: 0 0 0 3px rgba(198, 89, 17, 0.15); }
@keyframes srcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.source-bar .src-text { flex: 1; }
.source-bar .src-text b { color: var(--primary); font-weight: 700; }
.source-bar .link-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.source-bar .link-btn:hover { background: var(--brand-soft); }
.source-bar .link-btn:disabled { opacity: 0.5; cursor: wait; }
.source-bar .link-btn:disabled:hover { background: none; }

/* ── KPI Strip ── */
.kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.kpi.success { border-left-color: var(--success); }
.kpi.warning { border-left-color: var(--warning); }
.kpi.danger { border-left-color: var(--danger); }
.kpi.money { border-left-color: var(--violet); }
.kpi .label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; letter-spacing: 0.4px; }
.kpi .value { font-size: 22px; font-weight: 700; color: var(--text); margin-top: 4px; letter-spacing: -0.02em; }
.kpi .value .unit { font-size: 11px; color: var(--text-dim); font-weight: 500; margin-left: 3px; }
.kpi.danger .value { color: var(--danger); }
.kpi.warning .value { color: var(--warning); }
.kpi.success .value { color: var(--success); }
.kpi.money .value { color: var(--violet); }
.kpi .sub { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; }

/* ── Badges + chips ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.badge.in-progress { background: var(--info-soft); color: var(--info); }
.badge.delayed { background: var(--danger-soft); color: var(--danger); }
.badge.planning { background: var(--bg-sunken); color: var(--text-dim); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.paused { background: #e8eaed; color: #5b6775; }

/* Tạm dừng — card accent + edit-form fields (Dương) */
.proj-card.status-paused { border-left-color: #8a97a6 !important; }
.pef-field { display: flex; flex-direction: column; gap: 5px; }
.pef-label { font-size: 11.5px; font-weight: 600; color: var(--text-mid); }
.pef-sub { font-size: 10.5px; color: var(--text-dim); }
.pef-input {
  font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-elev); color: var(--text);
  width: 100%; box-sizing: border-box;
}
.pef-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,78,121,0.12); }
.pef-hint { font-size: 11.5px; color: var(--text-mid); background: #f1f3f5; border-radius: 7px; padding: 9px 11px; line-height: 1.5; }

/* Chọn cán bộ quản lý — lưu EMAIL, hiện TÊN. Bấm để bật/tắt, chọn được nhiều người. */
.pef-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-elev); }
.pef-chip {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-sunken); color: var(--text-mid);
}
.pef-chip:hover { border-color: var(--primary); }
.pef-chip.is-on { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.pef-chip.is-legacy { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.badge.done { background: var(--success-soft); color: var(--success); }
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.phase-tag {
  display: inline-block; font-size: 9.5px; padding: 2px 6px; border-radius: 3px;
  font-weight: 700; color: white;
}
.phase-tag.p0 { background: var(--p0); } .phase-tag.p1 { background: var(--p1); }
.phase-tag.p2 { background: var(--p2); } .phase-tag.p3 { background: var(--p3); }
.phase-tag.p4 { background: var(--p4); color: #333; } .phase-tag.p5 { background: var(--p5); }
.phase-tag.p6 { background: var(--p6); }

/* ── Progress bars ── */
.pbar {
  position: relative; height: 5px;
  background: var(--bg-sunken);
  border-radius: 999px; overflow: hidden;
}
.pbar > .fill { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 999px; }
.pbar.tall { height: 7px; }
/* Dương: vạch kế hoạch — rõ hơn (cao + dashed + có notch ▼ ở đỉnh). Hover hiện chữ "KH". */
.pbar > .planned-marker {
  position: absolute; top: -4px; bottom: -4px;
  width: 0; border-left: 2px dashed var(--text-mid);
  z-index: 2;
  pointer-events: auto;
}
.pbar > .planned-marker::before {
  content: '';
  position: absolute;
  top: -3px; left: -4px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-mid);
}
.pbar > .planned-marker::after {
  content: 'KH';
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px; font-weight: 700; color: var(--text-mid);
  background: var(--bg-elev);
  padding: 1px 4px; border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.proj-card:hover .pbar > .planned-marker::after,
.pbar > .planned-marker:hover::after { opacity: 1; }
.pbar.tall > .planned-marker { top: -5px; bottom: -5px; }
.pbar.danger > .fill { background: var(--danger); }
.pbar.warning > .fill { background: var(--warning); }
.pbar.success > .fill { background: var(--success); }

/* ── Project Cards (compact) ── */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.proj-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-md);
  padding: 13px 14px;
  cursor: pointer;
  transition: all 0.12s;
  display: flex; flex-direction: column; gap: 9px;
}
.proj-card.kind-school { border-left-color: var(--primary); }
.proj-card.kind-road { border-left-color: var(--violet); }
.proj-card.kind-alley { border-left-color: var(--info); }
.proj-card.status-delayed { border-left-color: var(--danger) !important; }
.proj-card.status-warning { border-left-color: var(--warning) !important; }
.proj-card.is-late { box-shadow: 0 0 0 1px rgba(192,0,0,0.18), 0 4px 12px rgba(192,0,0,0.06); }
.proj-card.is-late .ph h3 { color: var(--danger); }
.proj-card .next-mile-date.overdue { color: var(--danger); font-weight: 600; }
.proj-card .next-mile-mile.overdue::before { content: '⚠ '; color: var(--danger); font-weight: 700; }
.proj-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.proj-card .ph { display: flex; align-items: flex-start; gap: 8px; }
.proj-card .ph h3 {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--text);
  line-height: 1.25; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-card .code-pill {
  background: var(--brand-soft); color: var(--primary);
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  white-space: nowrap;
}
.proj-card .meta { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.proj-card .next-mile { font-size: 11px; color: var(--text-dim); padding-top: 6px; border-top: 1px dashed var(--border); }
.proj-card .next-mile strong { color: var(--warning); }

/* ── Today list (compact) ── */
.task-row {
  display: grid; grid-template-columns: 44px 28px 1fr 70px;
  gap: 9px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
}
.task-row:last-child { border-bottom: none; }
.task-row .time { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.task-row .kindico {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.task-row .kindico.approval { background: var(--warning-soft); color: var(--warning); }
.task-row .kindico.meeting { background: var(--brand-soft); color: var(--primary); }
.task-row .kindico.site { background: var(--success-soft); color: var(--success); }
.task-row .kindico.reply { background: var(--violet-soft); color: var(--violet); }
.task-row .ti .tt { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.3; }
.task-row .ti .ts { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.task-row .amt { font-size: 11px; font-weight: 700; color: var(--text-mid); text-align: right; }

/* ── Alert rows ── */
.alert-row {
  display: flex; gap: 9px; padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  cursor: pointer;
}
.alert-row .lvl { width: 4px; align-self: stretch; border-radius: 999px; background: var(--text-fade); flex: 0 0 4px; }
.alert-row.danger .lvl { background: var(--danger); }
.alert-row.warning .lvl { background: var(--warning); }
.alert-row.info .lvl { background: var(--info); }
.alert-row .ti .tt { font-size: 11.5px; font-weight: 700; color: var(--text); }
.alert-row .ti .pj { font-size: 10.5px; color: var(--text-mid); font-weight: 600; margin-top: 1px; }
.alert-row .ti .td { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }

/* ── Financial table ── */
.fin-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.fin-table thead th {
  background: var(--primary); color: white; padding: 7px 9px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.fin-table thead th.num { text-align: right; }
.fin-table tbody td { padding: 7px 9px; border-bottom: 1px solid var(--divider); }
.fin-table tbody td.num { text-align: right; font-family: var(--mono); font-weight: 600; }
.fin-table tbody tr { cursor: pointer; }
.fin-table tbody tr:hover { background: var(--brand-soft); }
.fin-table tbody tr.school td { background: rgba(31, 78, 121, 0.04); }
.fin-table tbody tr.school:hover td { background: var(--brand-soft); }
.fin-table tfoot td { padding: 9px; font-weight: 700; background: var(--bg-sunken); border-top: 2px solid var(--primary); font-size: 11.5px; }
.fin-table tfoot td.num { text-align: right; font-family: var(--mono); }
.fin-table .ct-code { font-weight: 700; color: var(--primary); }
.fin-table .pct-bar { display: inline-flex; align-items: center; gap: 5px; min-width: 90px; }
.fin-table .pct-bar .bar { flex: 1; height: 5px; background: var(--bg-sunken); border-radius: 3px; overflow: hidden; min-width: 50px; }
.fin-table .pct-bar .fill { height: 100%; background: var(--success); }
.fin-table .pct-bar .fill.low { background: var(--warning); }
.fin-table .pct-bar .fill.zero { background: var(--border); }
.fin-table .pct-bar span { font-size: 10px; color: var(--text-dim); width: 30px; text-align: right; }

/* ── Financial Chart (horizontal stacked bars) ── */
.fin-chart {
  display: flex; flex-direction: column; gap: 10px;
}

.fin-summary {
  background: linear-gradient(180deg, var(--bg-sunken) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.fin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 10px;
}
.fin-summary-cell { display: flex; flex-direction: column; gap: 2px; }
.fin-summary-cell .label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; letter-spacing: 0.3px; }
.fin-summary-cell .val { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fin-summary-cell .sub { font-size: 10.5px; color: var(--text-dim); }

.fin-summary-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.fin-summary-bar .seg { height: 100%; cursor: help; }
.fin-summary-bar .seg.paid { background: var(--success); }
.fin-summary-bar .seg.con { background: var(--info); }
.fin-summary-bar .seg.open { background: transparent; }

.fin-chart-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-mid);
  padding: 2px 4px;
  align-items: center;
}
.fin-chart-legend .item { display: flex; align-items: center; gap: 5px; }
.fin-chart-legend .sw { width: 14px; height: 10px; border-radius: 2px; }
.fin-chart-legend .sw.paid { background: var(--success); }
.fin-chart-legend .sw.con { background: var(--info); }
.fin-chart-legend .sw.open { background: var(--bg-sunken); border: 1px solid var(--border); }

.fin-bar-list { display: flex; flex-direction: column; gap: 2px; }

.fin-bar-row {
  display: grid;
  grid-template-columns: 280px 1fr 110px;
  gap: 12px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.fin-bar-row:hover { background: var(--brand-soft); }
.fin-bar-row:hover .fin-bar-bg { box-shadow: 0 1px 4px rgba(31,78,121,0.18); }

.fin-bar-label {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.fin-bar-label .ct-code {
  background: var(--brand-soft); color: var(--primary);
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 3px; white-space: nowrap; flex: 0 0 auto;
}
.fin-bar-label .ct-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-bar-label .phase-tag { flex: 0 0 auto; }

.fin-bar-track {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  min-width: 0;
}
.fin-bar-bg {
  position: relative;
  height: 100%;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-width: 30px;
  transition: box-shadow 0.12s;
}
.fin-bar-paid {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--success);
}
.fin-bar-con {
  position: absolute; top: 0; bottom: 0;
  background: var(--info);
  opacity: 0.65;
}
.fin-bar-inline {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
  pointer-events: none;
  white-space: nowrap;
}
.fin-bar-inline .pct {
  font-weight: 500;
  color: var(--text-dim);
}

.fin-bar-nums {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fin-bar-nums .n-paid {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
  font-family: var(--mono);
}
.fin-bar-nums .n-remain {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 1px;
}

/* ── Expand link (Xem thêm / Thu gọn) ── */
.expand-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 12px;
  background: var(--bg-sunken);
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.expand-link:hover {
  background: var(--brand-soft);
  border-style: solid;
  border-color: var(--primary);
}

/* ── Year tabs (Project Catalog) ── */
.year-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.year-tab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.12s;
}
.year-tab:hover { border-color: var(--primary); background: var(--bg-hover); }
.year-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(31, 78, 121, 0.25);
}
.year-tab .y-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.85;
}
.year-tab.active .y-lbl { opacity: 1; }
.year-tab .y-stat { font-size: 12px; font-weight: 500; }
.year-tab .y-stat strong { font-size: 16px; font-weight: 700; }

/* ── Inspections card (Kiểm tra & thủ tục) — MINIMAL ── */
.insp-list {
  display: flex;
  flex-direction: column;
}
.insp-row {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.insp-row:last-child { border-bottom: none; }

.insp-mark {
  align-self: stretch;
  background: var(--border);
  border-radius: 999px;
  min-height: 32px;
}
.insp-row.is-missing .insp-mark { background: var(--danger); }
.insp-row.is-overdue .insp-mark { background: var(--danger); }

.insp-body { min-width: 0; }

.insp-line1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.insp-pj {
  background: var(--bg-sunken);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--mono);
  flex: 0 0 auto;
}
.insp-pj:hover { background: var(--primary); color: white; }
.insp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.insp-line2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  align-items: center;
}
.insp-line2 .danger-text { color: var(--danger); font-weight: 600; }
.insp-line2 .warn-text { color: var(--warning); font-weight: 600; }

.insp-status-mini {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  padding-left: 12px;
  border-left: 1px solid var(--divider);
}
.insp-status-mini.status-ready { color: var(--success); }
.insp-status-mini.status-missing { color: var(--danger); }
.insp-status-mini.status-reviewing { color: var(--text-mid); }
.insp-status-mini.status-waiting { color: var(--text-dim); }

/* ── Data Entry Banner ── */
.data-banner {
  background: linear-gradient(135deg, #F0F6FC 0%, #E8F1FB 100%);
  border: 1px solid var(--brand-soft-2);
  border-radius: 10px;
  padding: 14px 16px;
}
.data-banner-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.data-banner-title {
  font-size: 14px; font-weight: 700; color: var(--primary);
  display: flex; align-items: center; gap: 6px;
}
.data-banner-sub { font-size: 12px; color: var(--text-mid); margin-top: 2px; line-height: 1.5; max-width: 700px; }
.data-banner-sub b { color: var(--primary); font-weight: 700; }

.data-banner-bar {
  display: flex; height: 22px;
  border-radius: 6px; overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.data-banner-bar .seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  color: white;
  cursor: help;
  overflow: hidden; white-space: nowrap;
  padding: 0 6px;
}
.data-banner-bar .seg.auto   { background: var(--success); }
.data-banner-bar .seg.file   { background: var(--info); }
.data-banner-bar .seg.msg    { background: var(--violet); }
.data-banner-bar .seg.manual { background: var(--warning); }

.data-banner-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.data-banner-cells .cell {
  background: white;
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-dim);
  border-radius: 6px;
  padding: 8px 10px;
}
.data-banner-cells .cell.auto   { border-left-color: var(--success); }
.data-banner-cells .cell.file   { border-left-color: var(--info); }
.data-banner-cells .cell.msg    { border-left-color: var(--violet); }
.data-banner-cells .cell.manual { border-left-color: var(--warning); background: #FFFBF0; }
.data-banner-cells .cell-num {
  font-size: 22px; font-weight: 700;
  color: var(--text); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.data-banner-cells .cell.manual .cell-num { color: var(--warning); }
.data-banner-cells .cell.auto .cell-num { color: var(--success); }
.data-banner-cells .cell.file .cell-num { color: var(--info); }
.data-banner-cells .cell.msg .cell-num { color: var(--violet); }
.data-banner-cells .cell-lbl { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.data-banner-cells .cell-detail { font-size: 10.5px; color: var(--text-dim); line-height: 1.4; }
.data-banner-cells .cell-detail b { color: var(--text); }

/* ── Wizard ── */
.wizard-steps {
  display: flex;
  padding: 12px 22px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.wizard-step {
  display: flex; align-items: center; gap: 6px;
  flex: 1;
  font-size: 11.5px;
  color: var(--text-dim);
  font-weight: 600;
}
.wizard-step .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.wizard-step.active { color: var(--primary); }
.wizard-step.active .num { background: var(--primary); color: white; }
.wizard-step.done { color: var(--success); }
.wizard-step.done .num { background: var(--success); color: white; }

.wizard-form { display: flex; flex-direction: column; gap: 14px; }
.wizard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.wizard-field { display: flex; flex-direction: column; gap: 5px; }
.wizard-field label { font-size: 12px; font-weight: 600; color: var(--text); }
.wizard-field label .req { color: var(--danger); }
.wizard-field input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px;
  background: white;
}
.wizard-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-soft); }

.kind-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kind-card {
  background: white; border: 2px solid var(--border);
  border-radius: 8px; padding: 12px 8px;
  cursor: pointer; transition: all 0.12s;
  font-family: inherit; text-align: center;
}
.kind-card:hover { border-color: var(--primary); }
.kind-card.active { border-color: var(--primary); background: var(--brand-soft); }
.kind-card .e { font-size: 24px; }
.kind-card .l { font-size: 11.5px; font-weight: 700; color: var(--text); margin-top: 3px; }
.kind-card .d { font-size: 10px; color: var(--text-dim); margin-top: 3px; }

.wizard-hint {
  background: var(--brand-soft);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--primary);
  border-left: 3px solid var(--primary);
}

.wizard-pdf { display: flex; flex-direction: column; gap: 10px; }
.pdf-drop {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 26px 16px;
  text-align: center;
  background: var(--bg-sunken);
  transition: border-color .15s, background .15s;
}
.pdf-drop.drag-active {
  border-color: var(--primary);
  background: var(--primary-soft, rgba(59,130,246,0.08));
}
.pdf-result {
  background: var(--success-soft);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  margin-top: 10px;
}
.pdf-result-head { font-size: 12px; font-weight: 700; color: var(--success); margin-bottom: 6px; }
.pdf-result-rows { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pdf-result-rows .auto-tag {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  background: var(--success); color: white;
  padding: 1px 5px; border-radius: 3px; margin-left: 4px;
}

.wizard-preview { display: flex; flex-direction: column; gap: 12px; }
.prev-head {
  display: flex; align-items: center; gap: 12px;
  background: var(--brand-soft);
  border-radius: 8px; padding: 12px 14px;
}
.prev-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.prev-stat {
  background: white; border: 1px solid var(--border);
  border-radius: 6px; padding: 10px;
  text-align: center;
}
.prev-stat .v { font-size: 20px; font-weight: 700; color: var(--primary); }
.prev-stat .l { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }

.prev-section {
  background: var(--bg-sunken);
  border-radius: 6px; padding: 10px 12px;
}
.prev-section-head {
  font-size: 12px; font-weight: 700; color: var(--primary);
  margin-bottom: 6px;
}
.prev-list { margin: 0; padding-left: 22px; font-size: 11.5px; color: var(--text-mid); line-height: 1.6; }
.prev-list b { color: var(--text); }

/* ── Payments tab — 4 KPI cards ── */
.pay-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pay-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.pay-kpi .label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.pay-kpi .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pay-kpi.success .value { color: var(--success); }
.pay-kpi.warning .value { color: var(--warning); }
.pay-kpi.danger .value { color: var(--danger); }
.pay-kpi .sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ── Diary tab ── */
.diary-list { display: flex; flex-direction: column; gap: 0; }
.diary-row {
  display: grid;
  grid-template-columns: 44px 24px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
}
.diary-row:last-child { border-bottom: none; }

.diary-date {
  text-align: center;
  padding-top: 2px;
}
.diary-date .d {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.diary-date .m {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
  font-weight: 600;
}

.diary-ico {
  padding-top: 3px;
}

.diary-body { min-width: 0; }
.diary-head {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  margin-bottom: 4px;
}
.diary-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.diary-by { font-size: 10.5px; color: var(--text-dim); }
.diary-src { font-size: 10px; color: var(--text-fade); font-style: italic; }

.diary-text {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
}
.diary-photos {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.diary-photo {
  width: 56px;
  height: 42px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-fade);
}

/* ── Mobile App promo card ── */
.mobile-promo { padding: 0; overflow: hidden; }
.mobile-promo .mp-head {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--divider);
}
.mp-banner {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  padding: 14px 16px;
}
.mp-banner-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.mp-banner-sub { font-size: 11px; opacity: 0.95; line-height: 1.5; margin-bottom: 10px; }

.mp-stats { padding: 12px 14px; font-size: 11.5px; }
.mp-stat-title { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.mp-stat-row {
  padding-left: 10px;
  border-left: 2px solid var(--border);
  color: var(--text-dim);
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.mp-stat-row.recent { border-left-color: var(--primary); color: var(--text); font-weight: 500; }

/* ── AI Chat Floater (như v1) ── */
.ai-floater {
  position: fixed;
  right: 20px;
  bottom: 70px; /* above inbox-fab */
  width: 360px;
  max-height: 70vh;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.18), 0 4px 12px rgba(15,23,42,0.10);
  display: flex;
  flex-direction: column;
  z-index: 95;
  overflow: hidden;
  animation: aiFloaterIn 0.2s ease-out;
}
@keyframes aiFloaterIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg-elev) 80%);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ai-av {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: white;
  display: flex; align-items: center; justify-content: center;
}
.ai-title { flex: 1; }
.ai-title .t { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.1; }
.ai-title .s { font-size: 10.5px; color: var(--success); font-weight: 600; margin-top: 2px; }
.ai-close {
  background: transparent;
  border: none;
  width: 26px; height: 26px;
  border-radius: 6px;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ai-close:hover { background: var(--bg-hover); color: var(--text); }

.ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 320px;
}
.ai-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
.ai-msg.user {
  background: var(--primary);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ai-msg.ai {
  background: var(--bg-sunken);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.tdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: tdot 1s infinite ease-in-out;
}
@keyframes tdot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.3); }
}

.ai-suggested {
  padding: 8px 12px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-top: 1px solid var(--divider);
}
.ai-sugg {
  font-size: 10.5px;
  color: var(--text-mid);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
.ai-sugg:hover { background: var(--brand-soft); border-color: var(--primary); color: var(--primary); }

.ai-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--divider);
  display: flex;
  gap: 6px;
  align-items: center;
}
.ai-foot input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  background: var(--bg);
  outline: none;
}
.ai-foot input:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px var(--brand-soft); }
.ai-send {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-send:hover:not(:disabled) { background: var(--primary-dark); }

.ai-foot-hint {
  padding: 6px 12px 8px;
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: center;
  background: var(--bg);
}
.ai-foot-hint button {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: underline;
}

/* ── Search autocomplete ── */
.search-box { position: relative; }
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  z-index: 99;
  overflow: hidden;
  max-height: 440px;
  overflow-y: auto;
}
.search-empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}
.search-empty b { color: var(--text); }
.search-hint-btn {
  display: block;
  margin: 10px auto 0;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-2);
  color: var(--primary);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.search-hint-btn:hover { background: var(--primary); color: white; }

.search-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  align-items: flex-start;
  border-bottom: 1px solid var(--divider);
}
.search-item:last-of-type { border-bottom: none; }
.search-item.active { background: var(--brand-soft); }
.search-item-icon { padding-top: 2px; }
.search-item-body { min-width: 0; }
.search-item-line1 {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text); flex-wrap: wrap;
}
.search-item-line1 mark {
  background: rgba(255, 200, 0, 0.4);
  color: inherit; padding: 0 1px; border-radius: 2px;
}
.search-code {
  background: var(--bg-sunken);
  color: var(--primary);
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  font-family: var(--mono);
  flex: 0 0 auto;
}
.search-item.active .search-code { background: white; }
.search-item-line2 {
  display: flex; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  margin-top: 3px; flex-wrap: wrap;
}
.search-type { font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; font-size: 10px; }

.search-foot {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-top: 1px solid var(--divider);
  background: var(--bg-sunken);
  font-size: 10.5px;
  color: var(--text-dim);
}
.search-foot kbd {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
}

/* ── Upload zone (Packages tab) ── */
.upload-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, #F0F6FC 100%);
  border: 1px dashed var(--primary);
  border-radius: 10px;
}
.upload-icon { font-size: 32px; flex: 0 0 auto; }
.upload-body { flex: 1; min-width: 0; }
.upload-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.upload-sub { font-size: 11.5px; color: var(--text-mid); line-height: 1.5; }

/* ── Detection preview card ── */
.detect-card {
  background: var(--card);
  border: 1px solid var(--success);
  border-left: 4px solid var(--success);
  border-radius: 10px;
  padding: 14px 16px;
}
.detect-card.detect-warn { border-color: var(--warning); border-left-color: var(--warning); background: var(--warning-soft); }

.detect-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.detect-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--warning);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex: 0 0 auto;
}
.detect-icon.success { background: var(--success); }
.detect-title { flex: 1; min-width: 0; }
.detect-title .t { font-size: 13px; font-weight: 700; color: var(--text); }
.detect-title .s { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }

.detect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.detect-comp {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.detect-comp.found { border-color: var(--success); background: var(--success-soft); }
.detect-comp.missing { opacity: 0.55; }
.detect-comp .comp-head {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px;
  margin-bottom: 4px;
}
.detect-comp .comp-icon { font-size: 14px; }
.detect-comp .comp-label { font-weight: 700; color: var(--text); flex: 1; }
.detect-comp .comp-check { color: var(--success); font-weight: 700; }
.detect-comp .comp-x { color: var(--text-fade); }
.detect-comp .comp-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.detect-comp.missing .comp-val { color: var(--text-fade); font-weight: 500; font-size: 11px; }

.detect-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-radius: 6px;
  margin-bottom: 12px;
}
.detect-totals .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; }
.detect-totals .val { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }

.detect-rows {
  margin-bottom: 10px;
  background: var(--bg-sunken);
  border-radius: 6px;
  padding: 8px 10px;
}
.detect-rows summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
}
.detect-rows table { width: 100%; margin-top: 8px; font-size: 11px; }
.detect-rows table th { background: var(--bg-elev); color: var(--text-dim); padding: 5px 8px; text-align: left; font-size: 10px; }
.detect-rows table td { padding: 5px 8px; border-bottom: 1px solid var(--divider); font-size: 11px; }
.detect-rows .subtle { color: var(--text-dim); }

.detect-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ── Ingest page ── */
.ingest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.source-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: all 0.12s;
}
.source-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }

/* ── Weekly Calendar page ── */
.cal-src-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 9px;
  background: white; border-radius: 12px;
  border: 1px solid var(--border);
  font-weight: 600;
}
.cal-src-dot { width: 8px; height: 8px; border-radius: 50%; }

.cal-source-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 7px;
}
.cal-source-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text);
}
.cal-source-head span {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
}
.cal-source-body {
  font-size: 11.5px; color: var(--text-mid);
  line-height: 1.5;
}
.cal-source-body b { color: var(--text); }
.cal-source-body code {
  background: var(--bg-sunken); padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 10.5px;
}
.cal-source-card .btn { align-self: flex-start; }

/* ── Event Form ── */
.ef-form { display: flex; flex-direction: column; gap: 12px; }
.ef-row { display: flex; gap: 10px; }
/* min-width:0 → cho phép field CO lại; nếu không, <select> có option tên công trình DÀI
   sẽ giữ min-content width lớn (lỗi flexbox min-width:auto) → tràn ngang modal Sửa sự kiện. */
.ef-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ef-field label { font-size: 11px; font-weight: 600; color: var(--text-mid); }
.ef-field input, .ef-field select {
  padding: 7px 10px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; background: white; outline: none;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
/* Giá trị đang chọn (tên CT dài) cắt gọn bằng "…" thay vì tràn ra ngoài ô. */
.ef-field select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-field input:focus, .ef-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-soft); }
.ef-actions { display: flex; gap: 6px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--divider); }

/* ── Weekly Report Modal ── */
.report-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.report-thinking {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px;
  background: var(--brand-soft);
  border: 1px dashed var(--brand-soft-2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--primary);
}

.report-body {
  background: white;
  padding: 24px 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Times New Roman", "Be Vietnam Pro", serif;
  font-size: 14px;
  line-height: 1.7;
  color: #000;
  max-height: 60vh;
  overflow-y: auto;
}
.report-body h1 {
  font-size: 17px; text-align: center; color: var(--primary);
  text-transform: uppercase; margin: 0 0 16px;
}
.report-body h2 {
  font-size: 14px; color: var(--primary); font-weight: 700;
  text-transform: uppercase; margin: 16px 0 8px;
  letter-spacing: 0.3px;
}
.report-body p { margin: 6px 0; text-align: justify; }
.report-body ul { margin: 6px 0 6px 24px; }
.report-body li { margin: 3px 0; }

.report-meta {
  margin-top: 10px;
  padding: 6px 10px;
  background: var(--brand-soft);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-mid);
}

/* ── Boss Mobile View ── */
.boss-mobile {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
}

.boss-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
}
.boss-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.boss-greeting { flex: 1; }
.boss-greeting .g { font-size: 15px; font-weight: 700; }
.boss-greeting .d { font-size: 11px; opacity: 0.85; }
.boss-icon-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 36px; height: 36px;
  border-radius: 10px;
  font-size: 18px;
  position: relative;
}
.boss-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
  min-width: 18px;
}

.boss-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  background-clip: padding-box;
  margin-top: -1px;
}
.boss-kpi {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 12px;
  color: white;
  cursor: pointer;
}
.boss-kpi.danger { background: rgba(192,0,0,0.6); }
.boss-kpi.money { background: rgba(107,91,171,0.5); }
.boss-kpi .v { font-size: 22px; font-weight: 700; }
.boss-kpi .v .u { font-size: 12px; opacity: 0.85; margin-left: 2px; }
.boss-kpi .l { font-size: 11px; opacity: 0.9; }

.boss-tabs {
  display: flex;
  padding: 0 16px;
  background: white;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
  gap: 0;
}
.boss-tab {
  flex: 1;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
}
.boss-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.boss-content {
  flex: 1;
  padding: 14px 16px 90px;
}
.boss-section { margin-bottom: 18px; }
.boss-section-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.boss-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.boss-card-approve { border-left: 4px solid var(--warning); background: #FFFBF0; }
.boss-card-danger { border-left: 4px solid var(--danger); background: #FFF5F5; }

.boss-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.boss-pj {
  background: var(--brand-soft);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--mono);
}
.boss-deadline {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 600;
}
.boss-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.35;
}
.boss-card-detail {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.45;
}
.boss-card-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--warning);
  margin-top: 6px;
}
.boss-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.boss-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.boss-btn.approve { background: var(--success); color: white; }
.boss-btn.defer { background: var(--bg-sunken); color: var(--text); }

.boss-progress-row {
  display: grid;
  grid-template-columns: 1fr 80px 40px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
}
.boss-progress-info { display: flex; align-items: center; gap: 6px; min-width: 0; }
.boss-progress-name {
  font-size: 12.5px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boss-progress-bar {
  height: 6px;
  background: var(--bg-sunken);
  border-radius: 3px;
  overflow: hidden;
}
.boss-progress-bar .fill {
  height: 100%;
  background: var(--success);
}
.boss-progress-bar .fill.danger { background: var(--danger); }
.boss-progress-pct {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  text-align: right;
}
.boss-tag-danger {
  font-size: 9px;
  background: var(--danger);
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}

.boss-fin-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.boss-fin-cell {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.boss-fin-cell .l { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; }
.boss-fin-cell .v { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 2px; }

.boss-fin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
}
.boss-fin-amount {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--success);
}

.boss-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  width: 100%;
  padding: 12px 16px;
  background: white;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.boss-fab {
  flex: 1;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
/* ── Login screen ── */
.login-screen {
  min-height: 100vh;
  background: linear-gradient(135deg, #1F4E79 0%, #2E75B6 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
  font-family: var(--font);
}
.login-card {
  background: white;
  width: 100%; max-width: 460px;
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--divider); }
.login-logo {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--secondary), var(--primary), var(--primary-dark));
  color: white; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
.login-brand-text .t { font-weight: 800; font-size: 18px; color: var(--text); }
.login-brand-text .s { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.login-title { font-size: 22px; font-weight: 700; color: var(--text); }
.login-subtitle { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; margin-bottom: 18px; }

.login-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.login-field label { font-size: 11.5px; font-weight: 600; color: var(--text-mid); margin-bottom: 4px; display: block; }
.login-field input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13.5px; font-family: inherit;
  outline: none; background: var(--bg);
}
.login-field input:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px var(--brand-soft); }
.login-error {
  background: var(--danger-soft); color: var(--danger);
  padding: 7px 11px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
}
.login-btn {
  background: var(--primary); color: white;
  border: none; border-radius: 8px;
  padding: 11px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; margin-top: 4px;
}
.login-btn:hover { background: var(--primary-dark); }

.login-help { padding-top: 18px; border-top: 1px solid var(--divider); }
.login-help-title { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.login-help-title code { background: var(--bg-sunken); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--primary); }
.login-users { display: flex; flex-direction: column; gap: 4px; }
.login-user-btn {
  display: grid;
  grid-template-columns: 1fr 70px 60px 80px;
  gap: 8px; align-items: center;
  padding: 7px 10px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 11.5px;
  text-align: left;
}
.login-user-btn:hover { background: var(--brand-soft); border-color: var(--primary); }
.lu-name { font-weight: 600; color: var(--text); }
.lu-role { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-align: center; text-transform: uppercase; letter-spacing: 0.3px; }
.lu-user { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }
.lu-proj { font-size: 10px; color: var(--text-dim); text-align: right; }

.login-footer { color: rgba(255,255,255,0.7); font-size: 11px; margin-top: 16px; }

/* ── Notices card (unified) ── */
.notices-card { padding: 12px 14px; }
.notices-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  background: var(--bg-sunken);
  padding: 2px;
  border-radius: 6px;
}
.notice-tab {
  flex: 1;
  padding: 4px 6px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
}
.notice-tab.active { background: white; color: var(--primary); }

.notice-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
}
.notice-row:last-child { border-bottom: none; }
.notice-row .notice-body {
  flex: 1;
  text-align: left;
  background: transparent;
  border: none;
  padding: 4px 6px;
  border-left: 3px solid var(--text-fade);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
}
.notice-row.danger .notice-body { border-left-color: var(--danger); }
.notice-row.warning .notice-body { border-left-color: var(--warning); }
.notice-row.info .notice-body { border-left-color: var(--primary); }
.notice-row .notice-body:hover { background: var(--bg-hover); }
.notice-meta {
  display: flex; align-items: center; gap: 5px; margin-bottom: 3px;
  font-size: 10px;
}
.notice-tag {
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase;
}
.notice-tag.a { background: var(--danger-soft); color: var(--danger); }
.notice-tag.c { background: var(--brand-soft); color: var(--primary); }
.notice-tag.m { background: var(--violet-soft); color: var(--violet); }
.notice-pj {
  background: var(--bg-sunken); color: var(--text-mid);
  padding: 1px 6px; border-radius: 3px;
  font-size: 10.5px; font-weight: 600;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}
.notice-title {
  font-size: 12px; font-weight: 600;
  color: var(--text); line-height: 1.35;
  word-wrap: break-word;
}
.notice-author {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--text-mid);
  margin-top: 3px;
}
.notice-author > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-detail {
  font-size: 10.5px; color: var(--text-dim);
  margin-top: 2px; line-height: 1.4;
}
.notice-source {
  font-size: 9.5px; color: var(--text-fade);
  font-style: italic; margin-top: 2px;
}

.notice-actions {
  display: flex; align-items: flex-start;
  padding: 2px 0 0 6px;
}
.notice-mini {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.notice-mini:hover { background: var(--success); color: white; border-color: var(--success); }

.notices-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-dim);
}

/* ── Today list with tick ── */
.task-row .tick {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: white;
  cursor: pointer;
  color: var(--success);
  font-weight: 800;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.task-row .tick:hover { border-color: var(--success); }
.task-done .tick { background: var(--success); border-color: var(--success); color: white; }
.task-done .tt { text-decoration: line-through; color: var(--text-dim); }
.task-done .ts { color: var(--text-fade); }
/* Dương: nút tick trong panel "Việc tồn đọng" — tròn giống nút lịch (.task-row .tick) */
.tos-backlog-tick {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); background: #fff;
  cursor: pointer; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--success);
  line-height: 1; transition: background 0.12s, border-color 0.12s;
}
.tos-backlog-tick:hover { border-color: var(--success); background: var(--success); color: #fff; }
.tos-done-tick { background: var(--success); border-color: var(--success); color: #fff; }
.tos-done-tick:hover { background: #fff; color: var(--success); }
.task-row .task-level-toggle { display: flex; align-items: center; justify-content: center; }
.task-row .level-chip {
  padding: 3px 12px; border-radius: 14px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.task-row .level-chip.level-normal { background: var(--bg-sunken); color: var(--text-mid); }
.task-row .level-chip.level-normal:hover { background: var(--brand-soft); color: var(--primary); border-color: var(--primary); }
.task-row .level-chip.level-notice {
  background: var(--warning); color: #fff; border-color: var(--warning);
}
.task-row .level-chip.level-notice:hover { opacity: 0.9; }
.task-row .task-assignees {
  display: flex; align-items: center; gap: 4px; padding-left: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-row .task-actions { display: flex; align-items: center; }
.task-row .task-mini-btn {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
}
.task-row .task-mini-btn:hover { background: var(--brand-soft); border-color: var(--primary); color: var(--primary); }

/* Task row — project name first */
.task-row .task-clickable {
  cursor: pointer;
  border-radius: 5px;
  padding: 4px 6px;
  margin-left: -6px;
}
.task-row .task-clickable:hover { background: var(--brand-soft); }
.task-row .task-pj {
  font-weight: 700;
  color: var(--primary);
  font-size: 12px;
}
.task-row .task-no-pj {
  font-style: italic;
  color: var(--text-fade);
  font-size: 10.5px;
}
.task-row .task-dur { color: var(--text-dim); font-size: 10.5px; }
.task-row .tt {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  margin-top: 1px;
  line-height: 1.35;
}
.task-done .task-pj { color: var(--text-fade); }
.task-done .tt { color: var(--text-fade); text-decoration: line-through; }

/* ── How-to-input hint inside Today card ── */
.howto-hint {
  background: var(--brand-soft);
  border-left: 3px solid var(--primary);
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--text-mid);
  margin-bottom: 8px;
  line-height: 1.5;
}
.howto-hint b { color: var(--primary); font-weight: 700; }
.howto-hint code {
  background: white; padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 10.5px;
}
.howto-hint ol { margin: 6px 0 6px 18px; padding: 0; }
.howto-hint li { margin: 2px 0; }

/* ── Gantt Popup Edit (inline date editing) ── */
.gantt-popup-edit {
  background: white;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  font-size: 12px;
  min-width: 280px;
  font-family: var(--font);
}
.gpe-title { font-weight: 700; color: var(--primary); margin-bottom: 4px; font-size: 13px; }
.gpe-sub { font-size: 10.5px; color: var(--text-dim); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--divider); }
.gpe-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}
.gpe-row label { font-size: 11px; color: var(--text-mid); font-weight: 600; }
.gpe-input {
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  background: var(--bg);
  outline: none;
}
.gpe-input:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 2px var(--brand-soft); }
.gpe-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--divider); }
.gpe-btn { flex: 1; padding: 6px; font-size: 11.5px; font-weight: 600; border-radius: 5px; cursor: pointer; font-family: inherit; }
.gpe-cancel { background: var(--bg-sunken); border: 1px solid var(--border); color: var(--text-mid); }
.gpe-save { background: var(--success); border: 1px solid var(--success); color: white; }
.gpe-save:hover { background: #6E9B45; }
.gpe-hint { font-size: 10px; color: var(--text-dim); margin-top: 6px; font-style: italic; line-height: 1.4; }

.gpe-toast {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--success);
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-2);
  z-index: 999;
  animation: gpeToastIn 0.25s ease-out;
}
@keyframes gpeToastIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Gantt Empty State (AI generate) ── */
.gantt-empty {
  padding: 30px 24px;
  text-align: center;
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg) 100%);
  border-radius: 10px;
  border: 1px dashed var(--brand-soft-2);
}
.gantt-empty-icon { font-size: 48px; opacity: 0.5; }
.gantt-empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 8px; }
.gantt-empty-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.gantt-empty-actions {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin-top: 18px;
}
.gantt-empty-thinking {
  display: flex; gap: 14px;
  background: white; border: 1px solid var(--brand-soft-2);
  padding: 16px 18px; border-radius: 10px;
  margin-top: 18px; text-align: left;
  align-items: flex-start;
}
.thinking-text {
  margin: 4px 0 0; font-family: var(--mono);
  font-size: 11px; color: var(--text-mid);
  background: var(--bg-sunken); padding: 8px 10px; border-radius: 5px;
  white-space: pre-wrap;
}

.gantt-preview {
  background: white; border: 1px solid var(--border);
  border-radius: 10px; margin-top: 16px; text-align: left;
  overflow: hidden;
}
.gantt-preview-head {
  display: flex; gap: 10px; justify-content: space-between;
  padding: 12px 14px; background: var(--success-soft);
  border-bottom: 1px solid var(--success);
  align-items: flex-start; flex-wrap: wrap;
}
.gantt-preview-table { width: 100%; font-size: 11.5px; }
.gantt-preview-table th {
  background: var(--bg-sunken); color: var(--text-dim);
  padding: 6px 8px; font-size: 10px; text-align: left;
  font-weight: 700; text-transform: uppercase;
}
.gantt-preview-table th.num { text-align: right; }
.gantt-preview-table td { padding: 6px 8px; border-bottom: 1px solid var(--divider); }
.gantt-preview-table td.num { text-align: right; font-family: var(--mono); }
.gantt-preview-table tr.critical td { background: rgba(192,0,0,0.04); }
.gantt-preview-table tr.critical td:first-child { border-left: 3px solid var(--danger); }

/* ── Filter chips ── */
.filter-row { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-chip {
  padding: 4px 11px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; font-size: 11px; transition: all 0.12s; font-family: inherit;
}
.filter-chip:hover { border-color: var(--primary); }
.filter-chip.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ── Constraint list ── */
.constraint-list { display: grid; gap: 7px; }
.constraint-item {
  display: grid; grid-template-columns: 70px 100px 1fr 130px 80px;
  gap: 10px; align-items: center;
  padding: 9px 12px;
  background: var(--warning-soft);
  border-radius: 6px;
  border-left: 4px solid var(--warning);
}
.constraint-item.active { background: var(--brand-soft); border-left-color: var(--primary); }
.constraint-item.tracking { background: var(--success-soft); border-left-color: var(--info); }
.constraint-item .id { font-weight: 700; color: var(--primary); font-size: 11px; }
.constraint-item .type { font-size: 10px; padding: 2px 7px; background: white; border-radius: 9px; text-align: center; font-weight: 600; }
.constraint-item .desc { font-size: 11.5px; line-height: 1.45; }
.constraint-item .desc .src { display: block; font-size: 10px; color: var(--text-dim); margin-top: 2px; font-style: italic; }
.constraint-item .apply { font-size: 10.5px; color: var(--text-dim); }
.constraint-item .status {
  font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 9px; text-align: center; color: white;
}
.constraint-item .status.active { background: var(--primary); }
.constraint-item .status.tracking { background: var(--info); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: white; border-radius: 10px;
  max-width: 1380px; width: 100%; max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-3);
}
.modal-header {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: start;
  position: sticky; top: 0; background: white; z-index: 10; gap: 12px;
}
.modal-title h2 { margin: 0; font-size: 16px; color: var(--primary); font-weight: 700; }
.modal-title .sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.modal-close {
  font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--text-dim); background: none; border: none; padding: 4px 10px;
}
.modal-close:hover { color: var(--danger); }
.modal-tabs {
  display: flex; gap: 0; padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: white; position: sticky; top: 56px; z-index: 9;
}
.modal-tab {
  padding: 9px 14px; cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 600; font-size: 12px; color: var(--text-dim);
  background: none; border-left: none; border-right: none; border-top: none;
}
.modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.modal-body { padding: 16px 20px; }

/* ── Tables inside modal ── */
.modal table { width: 100%; border-collapse: collapse; font-size: 12px; }
.modal table th { background: var(--primary); color: white; padding: 7px 9px; text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.modal table td { padding: 8px 9px; border-bottom: 1px solid var(--divider); font-size: 12px; }
.modal table tr:hover td { background: var(--bg-hover); }
.modal table .num { text-align: right; font-family: var(--mono); font-weight: 600; }

/* ── Frappe Gantt overrides ── */
#ganttContainer { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; background: white; }
#ganttContainer svg { font-family: var(--font) !important; }
.gantt .bar { fill: var(--secondary) !important; }
.gantt .bar-progress { fill: var(--primary) !important; }
.gantt .grid-header { fill: var(--primary) !important; }
.gantt .grid-row { fill: white !important; }
.gantt .grid-row:nth-child(even) { fill: #FAFBFC !important; }
.gantt .row-line { stroke: var(--divider) !important; }
.gantt .tick { stroke: var(--border) !important; }
.gantt .today-highlight { fill: rgba(192, 0, 0, 0.08) !important; }
.gantt .arrow { stroke: var(--text-dim) !important; stroke-width: 1.2 !important; }
.gantt-container .upper-text, .gantt-container .lower-text { fill: white !important; font-size: 11px !important; font-weight: 600 !important; }
.gantt-bar-label { fill: white !important; font-size: 11px !important; font-weight: 600 !important; }
.gantt .bar-wrapper.phase-0 .bar { fill: var(--p0) !important; }
.gantt .bar-wrapper.phase-1 .bar { fill: var(--p1) !important; }
.gantt .bar-wrapper.phase-2 .bar { fill: var(--p2) !important; }
.gantt .bar-wrapper.phase-3 .bar { fill: var(--p3) !important; }
.gantt .bar-wrapper.phase-4 .bar { fill: var(--p4) !important; }
.gantt .bar-wrapper.phase-5 .bar { fill: var(--p5) !important; }
.gantt .bar-wrapper.phase-6 .bar { fill: var(--p6) !important; }
.gantt .bar-wrapper.phase-0 .bar-progress { fill: #2F2F2F !important; }
.gantt .bar-wrapper.phase-1 .bar-progress { fill: #2D4F8E !important; }
.gantt .bar-wrapper.phase-2 .bar-progress { fill: var(--primary) !important; }
.gantt .bar-wrapper.phase-3 .bar-progress { fill: #4A7530 !important; }
.gantt .bar-wrapper.phase-4 .bar-progress { fill: #B8870A !important; }
.gantt .bar-wrapper.phase-5 .bar-progress { fill: #B0571E !important; }
.gantt .bar-wrapper.phase-6 .bar-progress { fill: #3F6228 !important; }
.gantt .bar-wrapper.critical .bar { stroke: var(--danger) !important; stroke-width: 2 !important; }

.gantt-legend { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--bg-sunken); border-radius: 6px; margin-bottom: 10px; font-size: 10.5px; align-items: center; }
.gantt-legend .item { display: flex; align-items: center; gap: 4px; }
.gantt-legend .box { width: 12px; height: 10px; border-radius: 2px; }
.gantt-view-toggle { display: inline-flex; gap: 2px; background: var(--bg-sunken); padding: 2px; border-radius: 5px; }
.gantt-view-toggle button { padding: 4px 10px; font-size: 10.5px; border: none; background: transparent; cursor: pointer; border-radius: 4px; font-weight: 600; color: var(--text-dim); }
.gantt-view-toggle button.active { background: var(--primary); color: white; }

/* ── Inbox panel ── */
.inbox-fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 90;
  background: var(--primary); color: white;
  padding: 12px 18px; border-radius: 24px;
  box-shadow: var(--shadow-3);
  cursor: pointer; font-weight: 600; font-size: 12px;
  border: none; display: flex; align-items: center; gap: 8px;
  transition: all 0.15s;
}
.inbox-fab:hover { background: var(--primary-dark); transform: translateY(-1px); }
.inbox-fab .ico { font-size: 14px; }

.inbox-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 250; display: none; }
.inbox-backdrop.show { display: block; }

.inbox-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 460px; max-width: 100vw;
  background: white;
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  z-index: 300;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s ease-out;
}
.inbox-panel.open { transform: translateX(0); }

.inbox-header {
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  position: relative;
}
.inbox-header h2 { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.inbox-header .sub { font-size: 10.5px; opacity: 0.9; margin-top: 2px; }
.inbox-header .close {
  position: absolute; top: 10px; right: 12px;
  background: rgba(255,255,255,0.2); border: none; color: white;
  width: 26px; height: 26px; border-radius: 5px; font-size: 16px; cursor: pointer;
}

.inbox-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.inbox-step { margin-bottom: 14px; }
.inbox-step-label {
  font-size: 10px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.inbox-step-label .num {
  background: var(--primary); color: white;
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
}
.inbox-mode-btn {
  background: var(--brand-soft);
  color: var(--primary);
  border: 1px solid var(--brand-soft-2);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-left: auto;
}
.inbox-mode-btn:hover { background: var(--primary); color: white; }
.inbox-textarea {
  width: 100%; min-height: 100px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 12.5px; line-height: 1.5;
  background: var(--bg); resize: vertical; color: var(--text);
}
.inbox-textarea:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 3px var(--brand-soft); }

.inbox-samples { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.inbox-sample-btn {
  text-align: left; padding: 5px 9px;
  background: var(--bg-sunken); border: 1px solid var(--divider);
  border-radius: 4px; cursor: pointer;
  font-size: 10.5px; color: var(--text-dim); font-family: inherit;
  transition: all 0.12s;
}
.inbox-sample-btn:hover { background: var(--brand-soft); color: var(--primary); border-color: var(--primary); }

.inbox-analyze-btn {
  width: 100%; padding: 9px;
  background: var(--primary); color: white;
  border: none; border-radius: 6px;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 8px;
}
.inbox-analyze-btn:hover { background: var(--primary-dark); }
.inbox-analyze-btn:disabled { background: var(--text-fade); cursor: not-allowed; }

.inbox-thinking {
  padding: 14px; background: var(--brand-soft); border-radius: 6px;
  display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--primary);
}
.inbox-thinking .spin {
  width: 14px; height: 14px;
  border: 2px solid var(--primary); border-top-color: transparent;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.inbox-summary {
  padding: 10px 12px; background: var(--brand-soft);
  border-radius: 6px; font-size: 11.5px; line-height: 1.5;
  color: var(--text); border-left: 3px solid var(--primary);
}
.inbox-summary b { color: var(--primary); }

.inbox-changes { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.change-card {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 11px; background: white;
}
.change-card.approved { background: var(--success-soft); border-color: var(--success); }
.change-card.rejected { opacity: 0.5; background: var(--bg-sunken); }
.change-card .ch-head { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
.change-card .ch-type {
  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.change-card .ch-type.progress { background: var(--primary); color: white; }
.change-card .ch-type.delay { background: var(--danger); color: white; }
.change-card .ch-type.constraint_add, .change-card .ch-type.constraint_remove { background: var(--warning); color: white; }
.change-card .ch-type.payment { background: var(--violet); color: white; }
.change-card .ch-type.milestone { background: var(--success); color: white; }
.change-card .ch-type.note { background: var(--text-dim); color: white; }
.change-card .ch-conf { font-size: 10px; color: var(--text-dim); margin-left: auto; }
.change-card .ch-target { font-weight: 700; color: var(--primary); font-size: 11px; }
.change-card .ch-desc { font-size: 11.5px; line-height: 1.45; color: var(--text); margin-top: 3px; }
.change-card .ch-diff {
  display: flex; gap: 5px; align-items: center;
  font-size: 10.5px; font-family: var(--mono); margin-top: 4px;
  padding: 4px 7px; background: var(--bg-sunken); border-radius: 4px;
}
.change-card .ch-diff .old { color: var(--text-dim); text-decoration: line-through; }
.change-card .ch-diff .new { color: var(--success); font-weight: 700; }
.change-card .ch-actions { display: flex; gap: 5px; margin-top: 6px; }
.change-card .ch-btn {
  flex: 1; padding: 4px 7px; font-size: 10.5px; font-weight: 600; border-radius: 4px;
  border: 1px solid; cursor: pointer; font-family: inherit;
}
.change-card .ch-btn.approve { background: var(--success); color: white; border-color: var(--success); }
.change-card .ch-btn.reject { background: white; color: var(--text-dim); border-color: var(--border); }
.change-card.approved .ch-actions { display: none; }
.change-card.approved .ch-status { font-size: 10.5px; color: var(--success); font-weight: 700; margin-top: 5px; }

/* ── Drop overlay ── */
.drop-overlay {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  background: rgba(31, 78, 121, 0.85);
  display: none; align-items: center; justify-content: center;
  color: white; font-size: 22px; font-weight: 700;
}
.drop-overlay.show { display: flex; }
.drop-overlay .inner { border: 4px dashed white; border-radius: 14px; padding: 50px 70px; text-align: center; }
.drop-overlay .ico { font-size: 56px; margin-bottom: 10px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Utilities ── */
.row { display: flex; gap: 12px; }
.row.tight { gap: 6px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
.subtle { color: var(--text-dim); }
.fade { color: var(--text-fade); }
.danger-text { color: var(--danger); }
.ok-text { color: var(--success); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
hr.div { border: none; border-top: 1px solid var(--divider); margin: 10px 0; }

.boot { display: flex; align-items: center; justify-content: center; height: 100vh; color: var(--text-dim); font-size: 12px; }

/* Tweaks panel override */
.twk-panel { background: rgba(255,255,255,0.92) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }

/* Responsive */
@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  /* Màn hình nhỏ: content full-width; navbar là DRAWER phủ, bấm ☰ (tiêu đề) mở.
     1 CỘT (không "0 1fr"): sidebar giờ LUÔN position:fixed → RA KHỎI luồng grid, nên nếu để "0 1fr"
     thì .main (grid item DUY NHẤT còn lại) rơi vào cột 1 (0px) → TRẮNG MÀN. Dùng 1fr → main full. */
  .app { grid-template-columns: 1fr !important; }
  /* DRAWER MƯỢT (giống chuông thông báo .ntf-panel): sidebar LUÔN là panel cố định 252px, DỊCH RA
     NGOÀI màn khi đóng (translateX(-100%)) và TRƯỢT VÀO khi mở — dùng TRANSITION nên ĐÓNG & MỞ đều
     mượt. Trước đây đổi width/position 0↔252 (không transition được) nên khựng. Nhãn LUÔN hiện (drawer
     đủ rộng) → bỏ hết ẩn/hiện nhãn phức tạp. Khi đóng, translateX(-100%) đưa hẳn ra ngoài nên không
     che/chặn nội dung (pointer-events của backdrop cũng tắt). */
  .sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 200;
    width: 252px !important; max-width: 84vw; min-width: 0 !important;
    overflow-x: hidden !important; overflow-y: auto !important;
    border-right: none !important; visibility: visible !important;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .18); will-change: transform;
  }
  .app.mobnav-open .sidebar { transform: translateX(0); }
  .sidebar .nav-item { justify-content: flex-start; padding: 8px 12px; }
  .sidebar .sidebar-brand { justify-content: flex-start; }
  .sidebar .nav-item .badge { display: inline-flex; align-items: center; width: auto; flex: 0 0 auto; }
  /* Backdrop LUÔN có, MỜ DẦN 2 chiều (opacity transition) → đóng cũng mượt; đóng thì tắt pointer-events. */
  .app::before {
    content: ""; position: fixed; inset: 0; z-index: 150; background: rgba(15, 23, 42, .42);
    opacity: 0; pointer-events: none; transition: opacity .26s ease;
  }
  .app.mobnav-open::before { opacity: 1; pointer-events: auto; }
  /* Dương 03/07/2026 — TOPBAR mobile: gọn, chuyên nghiệp. ☰ thành nút icon; ẩn breadcrumb (trùng
     với tiêu đề); tiêu đề rõ; ô tìm kiếm xuống hàng full; hàng nút (ngày/chuông/tối/lọc) canh gọn. */
  .topbar { flex-wrap: wrap; height: auto; min-height: 0; padding: 9px 13px; gap: 9px 10px; box-shadow: 0 1px 0 var(--border); }
  .topbar h1 { cursor: pointer; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px; font-size: 15.5px; font-weight: 700; }
  .mobnav-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft, #eef2fe); color: var(--primary); font-size: 18px; line-height: 1; flex: none; }
  .topbar .crumbs { display: none; }
  /* #5 (đợt-cuối) — PHẢI dùng #root để THẮNG rule "#root .topbar-right{flex:1}" (line ~294, ID-specificity
     cao hơn) — trước đây .topbar-right{flex:1 1 100%} bị đè nên KHÔNG xuống hàng đủ bề ngang → ô tìm kiếm
     tràn/đè, ngày+chuông+icon bị chật/cắt ở mép phải trên màn nhỏ. */
  #root .topbar-right { flex: 1 1 100%; order: 3; margin-left: 0; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
  #root .topbar-right .search-box { flex: 1 1 100%; width: 100% !important; max-width: none; }
  /* <input> có bề ngang nội tại ~200px → min-content của .search-box ≈ 270px. Với min-width:auto
     (mặc định của flex item) ô tìm kiếm KHÔNG co được, tràn khỏi topbar trên máy ≤300px.
     Đặt min-width:0 để co theo bề ngang thật. */
  #root .topbar-right .search-box { min-width: 0; }
  #root .topbar-right .search-box input { min-width: 0; width: 100%; }
  /* #5 — Màn nhỏ đỡ CO CỤM: ẩn gợi ý phím ⌘K (mobile không có bàn phím → chỉ chật chỗ, che input),
     ô tìm kiếm cao thoáng dễ chạm; hàng nút (ngày/chuông/tối/lọc) canh phải, không chèn ô tìm kiếm. */
  #root .topbar-right .search-box .k { display: none !important; }
  #root .topbar-right .search-box { padding-top: 8px; padding-bottom: 8px; }
  #root .topbar-right > :not(.search-box) { flex: 0 0 auto; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }

  /* ── Chống TRÀN CHỮ trên mobile (agenda/lịch/ghi chú) ── */
  /* Không cho trang cuộn ngang + box tràn ra ngoài */
  html, body, .app, .main, .content { overflow-x: hidden; max-width: 100vw; }
  .card, .card * { max-width: 100%; }
  /* Hàng việc "Hôm nay" là grid 7 cột cứng → mobile chuyển FLEX WRAP, tiêu đề xuống dòng riêng full width */
  .task-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; grid-template-columns: none !important; }
  .task-row .ti { flex: 1 1 100%; min-width: 0; }
  .task-row .tt, .task-row .ts { white-space: normal; overflow-wrap: anywhere; word-break: normal; }
  /* Đảm bảo mọi flex con trong card có thể co lại (không ép chữ vỡ dọc) */
  .upcoming-events > *, .notice-row, .note-row, .cal-event, .agenda-row { min-width: 0; }
  .notice-title, .note-title, .cal-event .title { white-space: normal; overflow-wrap: anywhere; }
  /* Thẻ công trình 1 cột. PHẢI là minmax(0,1fr) chứ KHÔNG phải 1fr: "1fr" = "minmax(auto,1fr)",
     mà đáy "auto" = min-content của thẻ. Hàng .phase-prominent trong thẻ có .phase-text nowrap
     nên min-content của thẻ ≈ 324px → cột không chịu co dưới 324px và thẻ tràn khỏi máy ≤360px
     (mã CT, chip pha, "trễ N ngày" bị cắt). Đặt đáy = 0 để cột co theo bề ngang thật. */
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
  .proj-card { min-width: 0; }
}


/* ════════════════════════════════════════════════════════════════
 * UI SETTINGS — Theme, density, accent — applied via [data-theme]
 * ════════════════════════════════════════════════════════════ */

/* Density */
:root[data-density="compact"] { --header-h: 46px; }
:root[data-density="compact"] body { font-size: 12px; }
:root[data-density="compact"] .card-head { padding: 8px 10px; }
:root[data-density="compact"] .kpi { padding: 8px 10px; }
:root[data-density="compact"] .task-row { padding: 6px 8px; }
:root[data-density="comfortable"] body { font-size: 14px; }
:root[data-density="comfortable"] .card-head { padding: 16px 18px; }
:root[data-density="comfortable"] .kpi { padding: 16px 18px; }
:root[data-density="comfortable"] .task-row { padding: 12px 14px; }

/* Dark theme */
:root[data-theme="dark"] {
  --bg: #0B1220;
  --bg-elev: #131C2E;
  --bg-sunken: #0F1727;
  --bg-hover: #1A2438;
  --card: #131C2E;
  --border: #25304A;
  --border-strong: #3A4A6C;
  --divider: #1E283D;

  --text: #E5ECF8;
  --text-mid: #BAC5DA;
  --text-dim: #8896B4;
  --text-fade: #5A6789;

  --primary-light: #1E3050;
  --brand-soft: #1A2640;
  --brand-soft-2: #233155;
  --success-soft: rgba(84,130,53,0.18);
  --warning-soft: rgba(198,89,17,0.18);
  --danger-soft: rgba(192,0,0,0.18);
  --info-soft: rgba(46,117,182,0.20);
  --violet-soft: rgba(107,91,171,0.20);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.50);
  --shadow-3: 0 12px 30px rgba(0,0,0,0.55);

  color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .sidebar { background: #0E1626; border-right: 1px solid var(--border); }
:root[data-theme="dark"] .topbar { background: rgba(19,28,46,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
:root[data-theme="dark"] .card { background: var(--card); border-color: var(--border); }
:root[data-theme="dark"] .modal { background: var(--card); }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select {
  background: var(--bg-sunken); color: var(--text); border-color: var(--border);
}
:root[data-theme="dark"] .btn { background: var(--bg-sunken); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] .btn:hover { background: var(--bg-hover); }
:root[data-theme="dark"] .btn.primary { background: var(--primary); color: white; border-color: var(--primary); }
:root[data-theme="dark"] .filter-chip { background: var(--bg-sunken); color: var(--text-mid); border-color: var(--border); }
:root[data-theme="dark"] .filter-chip.active { background: var(--primary); color: white; border-color: var(--primary); }
:root[data-theme="dark"] table th { background: var(--bg-sunken); color: var(--text-dim); }
:root[data-theme="dark"] table tr:hover td { background: var(--bg-hover); }
:root[data-theme="dark"] .source-bar { background: var(--bg-sunken); border-color: var(--border); }
:root[data-theme="dark"] .gantt-popup-edit { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .gantt-popup-edit input { background: var(--bg-sunken); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] #ganttContainer { background: var(--card); border-color: var(--border); }
:root[data-theme="dark"] .gantt .grid-row { fill: #131C2E !important; }
:root[data-theme="dark"] .gantt .grid-row:nth-child(even) { fill: #0F1727 !important; }
:root[data-theme="dark"] .gantt .tick { stroke: var(--border) !important; }
:root[data-theme="dark"] .gantt-container .lower-text { fill: var(--text-mid) !important; }

/* Phase band click → chỉnh tiến độ pha (Dương) */
.phase-band-clickable:hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(31,78,121,0.15);
  transform: translateY(-1px);
}
.phase-band-clickable:active { transform: translateY(0); }

/* ───── COMPACT — Dương: thu hẹp tất cả các phần (TodayCard + Overview + Gantt) ───── */
/* TodayCard card-head — title + scope buttons gọn hơn */
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .card-head {
  padding: 6px 12px !important; gap: 8px;
  min-height: unset !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .card-head h2 {
  font-size: 12.5px !important; margin: 0 !important;
  display: inline-flex; align-items: center; gap: 5px;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .today-scope-seg button {
  padding: 3px 8px !important; font-size: 11px !important;
}

/* today-overview-strip — KPI numbers nhỏ hơn, less padding */
.today-overview-strip {
  padding: 6px 12px !important; gap: 10px !important;
  border-top: 1px solid var(--divider);
}
.today-overview-strip .tos-cell { padding: 2px 6px !important; }
.today-overview-strip .tos-num { font-size: 16px !important; line-height: 1.1 !important; }
.today-overview-strip .tos-num small { font-size: 10px !important; }
.today-overview-strip .tos-lbl { font-size: 9.5px !important; letter-spacing: 0.2px; }
.today-overview-strip .tos-progress-num { font-size: 13px !important; }
.today-overview-strip .tos-progress-bar { height: 4px !important; min-width: 60px !important; }

/* OverviewTab — status banner gọn lại */
.ov-status-banner {
  padding: 8px 12px !important; gap: 10px !important;
}
.ov-status-banner > div:first-child > div:first-child {
  margin-bottom: 2px !important;
}
/* Tile names smaller */
.ov-tri { gap: 8px !important; }
.ov-tri .ov-tile { padding: 8px 10px !important; min-height: unset !important; }
.ov-tri .ov-tile .ov-label { font-size: 10.5px !important; margin-bottom: 4px !important; }
.ov-tri .ov-tile .ov-phase-name, .ov-tri .ov-tile .ov-mile-name { font-size: 13px !important; }
.ov-tri .ov-tile .ov-phase-sub, .ov-tri .ov-tile .ov-mile-date { font-size: 10.5px !important; }
.ov-grid-2 { gap: 10px !important; }
.ov-grid-2 .card { padding: 10px 12px !important; }
.ov-grid-2 .card-head { margin-bottom: 6px !important; }
.ov-grid-2 .card-head h2 { font-size: 12.5px !important; }
.ov-grid-2 .ov-fin-row, .ov-grid-2 .ov-info-row { padding: 3px 0 !important; font-size: 11.5px !important; }

/* SimplePhaseView (schedule-unified card) — compact phase timeline */
.schedule-unified { padding: 0 !important; }
.schedule-unified > .card-head { padding: 8px 12px !important; }
.schedule-unified .card-head h2 { font-size: 13px !important; }
.schedule-unified > div:not(.card-head) { padding: 0 12px 8px !important; }

/* ───── TODAY CARD COMPACT + hide day label (Dương) ───── */
/* Ẩn section header "Ngày mai · Thứ 6 22/5" — chỉ giữ giờ phút trong row */
.upcoming-day-label { display: none !important; }
.upcoming-day { padding: 0 !important; border-top: none !important; }
.upcoming-list { gap: 4px !important; }
/* TodayCard chiếm ít diện tích hơn */
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .today-overview-strip {
  padding: 8px 12px !important;
  gap: 12px !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .tos-num { font-size: 18px !important; }
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .tos-lbl { font-size: 10px !important; }
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-empty { padding: 6px 4px !important; }
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-head {
  padding: 4px 0 !important; font-size: 11px !important; margin-bottom: 4px !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .card-head { padding: 8px 12px !important; }
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .card-head h2 { font-size: 13px !important; }
/* Row mỏng hơn */
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-event-row {
  padding: 5px 8px !important; gap: 8px !important; margin-bottom: 3px !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-event-row .ue-time {
  min-width: 42px !important; padding: 1px 5px !important; font-size: 10.5px !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-event-row .ue-title { font-size: 12px !important; }
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-event-row .ue-main { gap: 1px !important; }
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-event-row .ue-level {
  font-size: 9px !important; padding: 0 5px !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-event-row .ue-meta { font-size: 10px !important; gap: 4px !important; }
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-event-row .ue-done {
  width: 16px !important; height: 16px !important; font-size: 10px !important;
}
/* Ẩn howto-hint mặc định (chiếm chỗ) — giữ nguyên logic, chỉ ẩn nếu chưa từng mở */
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .howto-hint {
  font-size: 11px !important; padding: 6px 10px !important;
}

/* ───── DARK MODE — new components (Dương) ───── */
:root[data-theme="dark"] .ov-status-banner {
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-sunken) 100%) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .upcoming-event-row {
  background: var(--bg-sunken) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
:root[data-theme="dark"] .upcoming-event-row:hover {
  background: var(--bg-hover) !important;
}
:root[data-theme="dark"] .upcoming-event-row .ue-time {
  background: var(--bg) !important;
  color: var(--text-mid) !important;
}
:root[data-theme="dark"] .upcoming-event-row .ue-title { color: var(--text); }
:root[data-theme="dark"] .upcoming-event-row .ue-level.ue-lvl-urgent { background: rgba(239,68,68,0.18); color: #fca5a5; }
:root[data-theme="dark"] .upcoming-event-row .ue-level.ue-lvl-soon { background: rgba(245,158,11,0.18); color: #fcd34d; }
:root[data-theme="dark"] .upcoming-event-row .ue-level.ue-lvl-official { background: rgba(59,130,246,0.18); color: #93c5fd; }
:root[data-theme="dark"] .upcoming-event-row .ue-level.ue-lvl-normal { background: var(--bg) !important; color: var(--text-dim) !important; }
:root[data-theme="dark"] .upcoming-event-row .ue-att {
  background: rgba(59,130,246,0.18) !important; color: #93c5fd !important;
}
:root[data-theme="dark"] .upcoming-event-row .ue-meta .ue-project {
  background: rgba(59,130,246,0.18) !important; color: #93c5fd !important;
}
:root[data-theme="dark"] .ov-notes-empty {
  background: var(--bg-sunken) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .ov-notes-composer textarea {
  background: var(--bg-sunken) !important; color: var(--text); border-color: var(--border);
}
:root[data-theme="dark"] .ov-notes-composer textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
/* Status pills in OverviewTab status banner — keep accessible in dark */
:root[data-theme="dark"] [class*="ov-status-banner"] [style*="background: rgb(254, 226, 226)"],
:root[data-theme="dark"] [class*="ov-status-banner"] [style*="#fee2e2"] {
  background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important;
}
:root[data-theme="dark"] [class*="ov-status-banner"] [style*="#fef3c7"] {
  background: rgba(245,158,11,0.18) !important; color: #fcd34d !important;
}
:root[data-theme="dark"] [class*="ov-status-banner"] [style*="#dbeafe"] {
  background: rgba(59,130,246,0.18) !important; color: #93c5fd !important;
}
:root[data-theme="dark"] [class*="ov-status-banner"] [style*="#dcfce7"] {
  background: rgba(34,197,94,0.18) !important; color: #86efac !important;
}
/* PackagesTab manual form */
:root[data-theme="dark"] .upload-zone {
  background: var(--bg-sunken) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .upload-zone .upload-title { color: var(--text); }
:root[data-theme="dark"] .upload-zone .upload-sub { color: var(--text-dim); }
/* TodayCard min-height — tránh layout jump khi đổi scope */
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .upcoming-empty,
.card[data-comment-anchor="f6e5e5af79-div-164-5"] > .col > [class*="task-row"]:first-child {
  min-height: 60px;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] {
  contain: layout;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .today-scope-seg button {
  /* Prevent button-content layout shifting */
  white-space: nowrap;
}
/* Dark mode for sync-banner cal-sync-status pills */
:root[data-theme="dark"] .cal-sync-status span[style*="#e6f7ed"] {
  background: rgba(34,197,94,0.18) !important; color: #86efac !important;
}
:root[data-theme="dark"] .cal-sync-status span[style*="#fde8e8"] {
  background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important;
}
:root[data-theme="dark"] .cal-sync-status span[style*="#fff7e6"] {
  background: rgba(245,158,11,0.18) !important; color: #fcd34d !important;
}

/* Sidebar collapsed — CHỈ áp dụng desktop (≥769px).
   Mobile ≤768px dùng .mobnav-open (drawer off-canvas), KHÔNG dùng data-sidebar="collapsed".
   Nếu để rule này rò xuống mobile, "width:60px !important" sẽ đè drawer 252px → kẹt hẹp, nhãn chữ tràn che nội dung. */
@media (min-width: 769px) {
.app[data-sidebar="collapsed"] .sidebar { width: 60px; }
.app[data-sidebar="collapsed"] .sidebar-brand > div:last-child,
.app[data-sidebar="collapsed"] .nav-section .lbl,
.app[data-sidebar="collapsed"] .nav-item .badge,
.app[data-sidebar="collapsed"] .nav-item > span:last-child,
.app[data-sidebar="collapsed"] .user-chip .nm,
.app[data-sidebar="collapsed"] .user-chip .rl,
.app[data-sidebar="collapsed"] .sidebar-foot > div:last-child { display: none; }
.app[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 8px; }
.app[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; }
.app[data-sidebar="collapsed"] .user-chip { justify-content: center; padding: 6px; }
.app[data-sidebar="collapsed"] { grid-template-columns: 60px 1fr; }
.app[data-sidebar="collapsed"] .main { margin-left: 0; }
/* Dương: thu gọn (DESKTOP) = dải CHỈ ICON 60px. overflow-y:auto để mục dưới cùng không "lấp ló"/tràn. */
.app[data-sidebar="collapsed"] .sidebar { width: 60px !important; overflow-x: hidden; overflow-y: auto; }
.app[data-sidebar="collapsed"] .nav-item > span:not(.ni-icon),
.app[data-sidebar="collapsed"] .nav-section .lbl,
.app[data-sidebar="collapsed"] .nav-item .badge,
.app[data-sidebar="collapsed"] .sidebar-brand > div:not(.logo),
.app[data-sidebar="collapsed"] .user-chip .nm,
.app[data-sidebar="collapsed"] .user-chip .rl { display: none !important; }
.app[data-sidebar="collapsed"] .nav-item .ni-icon { display: inline-flex !important; }
}

/* ════════════════════════════════════════════════════════════════
 * SETTINGS PAGE
 * ════════════════════════════════════════════════════════════ */

.settings-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: linear-gradient(135deg, var(--brand-soft), var(--brand-soft-2));
  border: 1px solid var(--border); border-radius: 10px;
}
.settings-hero .sh-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: white;
  box-shadow: var(--shadow-1);
}
.settings-hero h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.settings-hero .sh-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) {
  .settings-grid { grid-template-columns: 1fr; }
}

.settings-rows { display: flex; flex-direction: column; padding: 4px 0; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 4px; border-bottom: 1px dashed var(--divider);
  font-size: 12.5px;
}
.setting-row:last-child { border-bottom: none; }
.setting-row .lbl { color: var(--text-dim); }
.setting-row .val { font-weight: 600; color: var(--text); text-align: right; }
.setting-row .link-btn { font-size: 11px; padding: 2px 6px; }

/* ────────────────────────────────────────────────────────────────
 * UI Switch (used by toggles in Settings page + interface panel)
 * ──────────────────────────────────────────────────────────── */
.ui-switch {
  display: inline-block; position: relative;
  width: 36px; height: 20px; border-radius: 999px;
  background: var(--border-strong); cursor: pointer;
  transition: background 0.18s ease; flex-shrink: 0;
}
.ui-switch .knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.18s ease;
}
.ui-switch.on { background: var(--primary); }
.ui-switch.on .knob { transform: translateX(16px); }

/* ════════════════════════════════════════════════════════════════
 * INTERFACE TWEAKS PANEL — slide-in from right
 * ════════════════════════════════════════════════════════════ */

.iface-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.40);
  z-index: 90; animation: ifaceFadeIn 0.18s ease;
}
@keyframes ifaceFadeIn { from { opacity: 0; } to { opacity: 1; } }

.iface-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 92vw;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  z-index: 91;
  transform: translateX(102%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
}
.iface-panel.open { transform: translateX(0); }

.iface-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--bg-elev) 100%);
}
.iface-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.iface-head small { color: var(--text-dim); font-size: 11px; }

.iface-body {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 20px;
  display: flex; flex-direction: column; gap: 18px;
}

.iface-section { display: flex; flex-direction: column; gap: 8px; }
.iface-section-title {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Segmented control (Sáng/Tối, density, fontSize) */
.seg-group {
  display: flex; gap: 0;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 2px;
}
.seg-group button {
  flex: 1; padding: 6px 8px;
  border: none; background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-dim); cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all 0.15s ease;
}
.seg-group button:hover { color: var(--text); }
.seg-group button.active {
  background: var(--bg-elev);
  color: var(--primary);
  box-shadow: var(--shadow-1);
}

/* Color swatches */
.color-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.color-swatch {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border: 2px solid var(--border);
  border-radius: 8px; cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.color-swatch:hover { transform: scale(1.05); }
.color-swatch.active { border-color: var(--text); }
.color-swatch .check {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Toggle line inside iface panel */
.iface-toggle-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; cursor: pointer;
  font-size: 12.5px; color: var(--text);
  border-bottom: 1px dashed var(--divider);
}
.iface-toggle-line:last-child { border-bottom: none; }
.iface-toggle-line:hover { color: var(--primary); }


/* ════════════════════════════════════════════════════════════════
 * COMMENT-DRIVEN ADDITIONS — Dương feedback batch
 * ════════════════════════════════════════════════════════════ */

/* Empty progress bar state — "chưa setup" */
.pbar.pbar-empty {
  background: var(--bg-sunken);
  border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center;
}
.pbar.pbar-empty .pbar-empty-hint {
  font-size: 9.5px; color: var(--text-fade);
  font-weight: 600; letter-spacing: 0.2px;
}
.pbar.pbar-empty.tall { padding: 1px 0; }

/* ProjectCard — phase prominent at bottom */
.proj-card .phase-prominent {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--divider);
  margin-bottom: 4px;
}
.proj-card .phase-prominent .phase-text {
  font-size: 11.5px; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-card .phase-prominent .spacer { flex: 1; }
.proj-card .next-mile-mile {
  font-size: 10.5px; color: var(--text-mid);
}
.proj-card .next-mile-mile strong { color: var(--text); font-size: 11.5px; }
.proj-card .next-mile-date { color: var(--text-dim); }

/* FinChart bar label — name first, code as small badge */
.fin-bar-label .ct-name {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  order: 1;
}
.fin-bar-label .ct-code {
  font-size: 9.5px; padding: 1px 5px;
  order: 2;
}
.fin-bar-label .phase-tag { order: 3; }

/* Today scope segmented control (Hôm nay / Tuần này / Tuần tới / Tháng tới) */
.today-scope-seg {
  display: inline-flex; gap: 0;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 2px;
}
.today-scope-seg button {
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  border: none; background: transparent;
  color: var(--text-dim); cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.today-scope-seg button.active {
  background: var(--bg-elev);
  color: var(--primary);
  box-shadow: var(--shadow-1);
}

/* Task row level selector (Bình thường / Lưu ý) */
.task-level-seg {
  display: inline-flex; gap: 0;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 4px; padding: 1px;
  flex-shrink: 0;
}
.task-level-seg button {
  padding: 3px 7px;
  font-size: 10px; font-weight: 600;
  border: none; background: transparent;
  color: var(--text-dim); cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
  white-space: nowrap;
}
.task-level-seg button.active {
  background: var(--bg-elev); color: var(--text);
  box-shadow: var(--shadow-1);
}
.task-level-seg button.active.notice {
  background: var(--warning-soft); color: var(--warning);
}

/* Task row variants */
.task-row.task-notice {
  background: linear-gradient(90deg, rgba(198,89,17,0.06) 0%, transparent 100%);
  border-left: 2px solid var(--warning);
}
.task-row.task-overdue {
  background: linear-gradient(90deg, rgba(192,0,0,0.05) 0%, transparent 100%);
  border-left: 2px solid var(--danger);
}

/* Calendar empty slot — clickable to add event */
.cal-slot { position: relative; transition: background 0.12s; }
.cal-slot:hover { background: var(--brand-soft); }
.cal-slot .cal-slot-plus {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--primary); font-weight: 700;
  opacity: 0; transition: opacity 0.15s ease;
  pointer-events: none;
}
.cal-slot:hover .cal-slot-plus { opacity: 0.5; }

/* ────────────────────────────────────────────────────────────────
 * Project Status Donut (in NoticesCard)
 * ──────────────────────────────────────────────────────────── */
.proj-donut {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
}
.donut-svg {
  position: relative;
  width: 110px; height: 110px;
  flex-shrink: 0;
}
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
}
.donut-total {
  font-size: 24px; font-weight: 800; color: var(--text);
}
.donut-label {
  font-size: 10px; color: var(--text-dim);
  margin-top: 3px; text-transform: uppercase; letter-spacing: 0.4px;
}
.donut-legend {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.donut-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
}
.donut-row .dot {
  width: 10px; height: 10px; border-radius: 2px;
  flex-shrink: 0;
}
.donut-row .label { flex: 1; color: var(--text-mid); }
.donut-row .count { font-weight: 700; color: var(--text); font-family: var(--mono); }

/* ────────────────────────────────────────────────────────────────
 * Flagged tasks (in NoticesCard above existing notices)
 * ──────────────────────────────────────────────────────────── */
.flagged-tasks {
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(198,89,17,0.06) 0%, transparent 100%);
  border-bottom: 1px solid var(--divider);
}
.flagged-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--warning); text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.flagged-head .flagged-count {
  margin-left: auto;
  background: var(--warning); color: white;
  padding: 1px 6px; border-radius: 10px;
  font-size: 10px;
}
.flagged-row {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--divider);
}
.flagged-row:last-child { border-bottom: none; }
.flagged-tick, .flagged-unflag {
  width: 22px; height: 22px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev); border-radius: 4px;
  cursor: pointer; font-size: 12px;
  color: var(--text-dim); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.flagged-tick:hover { background: var(--success); color: white; border-color: var(--success); }
.flagged-unflag:hover { background: var(--bg-sunken); color: var(--text); }
.flagged-body { flex: 1; min-width: 0; cursor: pointer; }
.flagged-meta {
  display: flex; gap: 6px; align-items: center;
  font-size: 9.5px; color: var(--text-dim);
  margin-bottom: 1px;
}
.flagged-time { font-family: var(--mono); }
.flagged-title {
  font-size: 11.5px; color: var(--text);
  line-height: 1.3;
}

/* ────────────────────────────────────────────────────────────────
 * Current Task Picker (in InfoTab)
 * ──────────────────────────────────────────────────────────── */
.ct-picker {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ct-picker-section { display: flex; flex-direction: column; gap: 5px; }
.ct-picker-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ct-picker-select {
  padding: 6px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-elev); color: var(--text);
  font-family: inherit;
}
.ct-picker-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ct-picker-chip {
  padding: 4px 9px; font-size: 11px; font-weight: 600;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer;
  color: var(--text-mid); font-family: inherit;
  transition: all 0.12s;
}
.ct-picker-chip:hover { border-color: var(--primary); color: var(--primary); }
.ct-picker-chip.active {
  background: var(--primary); color: white; border-color: var(--primary);
}
.ct-picker-input {
  width: 100%; padding: 7px 9px;
  font-family: inherit; font-size: 12px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-elev); color: var(--text);
  resize: vertical;
}
.ct-picker-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  padding-top: 6px; border-top: 1px solid var(--border);
}


/* ════════════════════════════════════════════════════════════════
 * COMMENT BATCH #3 — Phase progress · Donut redesign · AI inline cmd
 * ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
 * Phase Progress Table
 * ──────────────────────────────────────────────────────────── */
.phase-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.phase-table th {
  background: var(--bg-sunken); color: var(--text-dim);
  padding: 7px 10px; font-size: 10px; text-align: left;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
.phase-table th.num { text-align: right; }
.phase-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.phase-table td.num { text-align: right; font-family: var(--mono); }
.phase-table tbody tr { cursor: pointer; transition: background 0.12s; }
.phase-table tbody tr:hover { background: var(--brand-soft); }
.phase-table tbody tr.row-overdue { background: rgba(192,0,0,0.04); }
.phase-table tbody tr.row-overdue:hover { background: rgba(192,0,0,0.08); }
.phase-table .ct-code {
  background: var(--brand-soft); color: var(--primary);
  font-size: 9.5px; font-weight: 700; padding: 1px 5px;
  border-radius: 3px;
}

.phase-time-bar { display: flex; align-items: center; gap: 6px; }
.phase-time-bar .bar {
  position: relative; flex: 1; height: 8px;
  background: var(--bg-sunken); border-radius: 4px; overflow: hidden;
  min-width: 60px;
}
.phase-time-bar .bar .fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--success); border-radius: 4px;
}
.phase-time-bar .bar .fill.warn { background: var(--warning); }
.phase-time-bar .bar .fill.over { background: var(--danger); }
.phase-time-bar .bar .fill-over {
  position: absolute; top: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, var(--danger) 0 4px, #8a0000 4px 8px);
  border-radius: 0 4px 4px 0;
}
.phase-time-bar > span {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--text-mid); min-width: 36px; text-align: right;
}

/* ────────────────────────────────────────────────────────────────
 * Donut redesign — clickable rows with bar + sub label
 * ──────────────────────────────────────────────────────────── */
.proj-donut {
  display: flex; align-items: center; gap: 16px;
  padding: 14px;
  border-bottom: 1px solid var(--divider);
}
.donut-svg {
  position: relative;
  width: 124px; height: 124px;
  flex-shrink: 0;
}
.donut-center { line-height: 1; }
.donut-total { font-size: 28px; font-weight: 800; color: var(--text); }
.donut-label { font-size: 10px; color: var(--text-dim); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }

.donut-legend {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.donut-row {
  display: flex; align-items: stretch; gap: 8px;
  padding: 6px 8px 6px 0;
  border: none; background: transparent; cursor: pointer;
  border-radius: 5px;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
}
.donut-row:hover { background: var(--bg-sunken); }
.donut-row-bar {
  width: 4px; border-radius: 2px;
  flex-shrink: 0;
}
.donut-row-body { flex: 1; min-width: 0; line-height: 1.25; }
.donut-row-line1 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.donut-row-label {
  font-size: 12px; font-weight: 600; color: var(--text);
}
.donut-row-count {
  font-size: 16px; font-weight: 800; color: var(--text);
  font-family: var(--mono);
}
.donut-row-sub {
  font-size: 10.5px; color: var(--text-dim);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.donut-row-arrow {
  align-self: center;
  font-size: 18px; color: var(--text-fade);
  opacity: 0; transition: opacity 0.15s, transform 0.15s;
}
.donut-row:hover .donut-row-arrow { opacity: 1; transform: translateX(2px); color: var(--primary); }

/* ────────────────────────────────────────────────────────────────
 * AI Chat — inline command confirm cards (no inbox needed)
 * ──────────────────────────────────────────────────────────── */
.ai-changes {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.ai-change-card {
  background: var(--bg-elev);
  border: 1px solid var(--brand-soft-2);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text);
}
.ai-change-card.applied {
  border-color: var(--success);
  border-left-color: var(--success);
  background: var(--success-soft);
}
.ai-change-card.rejected {
  opacity: 0.5;
  background: var(--bg-sunken);
}
.acc-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.acc-type {
  background: var(--primary); color: white;
  padding: 1px 7px; border-radius: 3px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.acc-pj {
  font-size: 10.5px; font-weight: 600;
  color: var(--primary);
}
.acc-body { font-size: 11.5px; line-height: 1.4; color: var(--text); }
.acc-body b { color: var(--text); font-weight: 700; }
.acc-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--divider);
}
.acc-btn {
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer;
  font-family: inherit;
  background: var(--bg-elev);
  color: var(--text-mid);
}
.acc-btn.apply {
  background: var(--success); color: white; border-color: var(--success);
}
.acc-btn.apply:hover { background: #6E9B45; }
.acc-btn.reject:hover { background: var(--bg-sunken); color: var(--danger); border-color: var(--danger); }
.acc-applied {
  color: var(--success); font-weight: 700; font-size: 11px;
}
.acc-rejected {
  color: var(--text-dim); font-weight: 600; font-size: 11px;
}

/* AI inline toast */
.ai-toast {
  position: sticky; bottom: 0;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  animation: aiToastIn 0.2s ease;
}
.ai-toast.success {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
}
.ai-toast.error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
}
@keyframes aiToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* SettingRow editable affordance */
.setting-row.is-editable { cursor: pointer; }
.setting-row.is-editable:hover { background: var(--bg-hover); border-radius: 4px; padding-left: 4px; padding-right: 4px; }
.setting-edit-pencil {
  color: var(--text-fade); font-size: 12px;
  opacity: 0; transition: opacity 0.15s;
}
.setting-row.is-editable:hover .setting-edit-pencil { opacity: 1; color: var(--primary); }


/* ════════════════════════════════════════════════════════════════
 * CALENDAR SYNC — Dương: feedback đồng bộ 2 chiều với Google Sheet
 * ════════════════════════════════════════════════════════════ */

.cal-sync-banner {
  /* Dương: ẩn banner sync — hoạt động ngầm, không cần hiển thị
     (vẫn giữ DOM để các listener/test button không bị broken khi cần debug) */
  display: none !important;
}
.cal-sync-banner.qup-show {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--success-soft) 0%, var(--brand-soft) 100%);
  border: 1px solid var(--success);
  border-radius: 8px;
}
.cal-sync-icon { font-size: 22px; flex-shrink: 0; animation: spinPulse 3s linear infinite; }
@keyframes spinPulse {
  0%, 90% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.cal-sync-body { flex: 1; min-width: 0; line-height: 1.35; }
.cal-sync-title { font-size: 12.5px; color: var(--text); }
.cal-sync-title code {
  background: rgba(255,255,255,0.7); padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 11px; color: var(--success);
}
.cal-sync-sub { font-size: 11px; color: var(--text-mid); margin-top: 2px; }

.cal-sync-toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  background: var(--success); color: white;
  box-shadow: var(--shadow-3);
  z-index: 95;
  animation: calToastIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 380px;
}
.cal-sync-toast.warning { background: var(--warning); }
.cal-sync-toast.error { background: var(--danger); }
@keyframes calToastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sync badge in upper-right corner of each event */
.cal-event { position: absolute; }
.cal-event-sync {
  position: absolute; top: 2px; right: 3px;
  font-size: 9px; line-height: 1;
  color: var(--success); font-weight: 700;
  background: rgba(255,255,255,0.85);
  padding: 1px 3px; border-radius: 3px;
}
.cal-event.pending-sync {
  background: linear-gradient(90deg, var(--warning-soft) 0%, var(--bg-elev) 100%) !important;
  animation: pendingPulse 1s ease-in-out infinite alternate;
}
.cal-event.pending-sync .cal-event-sync {
  color: var(--warning);
}
.cal-event.cal-event-done {
  opacity: 0.55;
  background: var(--success-soft) !important;
  border-left-color: var(--success) !important;
}
.cal-event.cal-event-done .cal-event-title,
.cal-event.cal-event-done .cal-event-time {
  text-decoration: line-through;
}
.cal-event.cal-event-done::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 4px;
  color: var(--success);
  font-weight: 700;
  font-size: 12px;
}
/* Dương 03/07/2026 — Highlight LỊCH mạnh & rõ hơn: trước đây chỉ phóng to nhẹ (scale 1→1.04) nên
   "nhấp nháy" khó thấy. Nay dùng viền BÊN TRONG (inset) + thanh nhấn trái đậm + nền → nổi bật, ổn định. */
.cal-event.cal-event-highlight {
  background: var(--brand-soft-2) !important;
  box-shadow: inset 0 0 0 2px var(--primary), inset 6px 0 0 var(--primary), 0 8px 22px -8px rgba(31,78,121,0.6) !important;
  border-radius: 8px;
  position: relative;
  z-index: 20;
  animation: qldaFlashPulse 0.7s ease-in-out 6 alternate;
}
/* Dương #2: Highlight CHUNG khi điều hướng chéo (thông báo → nội dung, lịch tổng quát → chi tiết,
   ghi chú, công văn…). Dùng qua window.QLDA_flashHighlight(el|selector).
   Dương 03/07/2026 — viền vẽ BÊN TRONG (inset) + thanh nhấn trái, thay cho ring bên ngoài dễ bị
   container overflow CẮT hoặc hàng danh sách kế bên ĐÈ lên → khắc phục highlight "bị che lấp";
   nền + đổ bóng đậm hơn cho rõ. */
.qlda-flash-target {
  background: var(--brand-soft-2) !important;
  box-shadow: inset 0 0 0 2px var(--primary), inset 6px 0 0 var(--primary), 0 8px 22px -8px rgba(31,78,121,0.6) !important;
  border-radius: 8px !important;
  position: relative;
  z-index: 30 !important;
  animation: qldaFlashPulse 0.7s ease-in-out 6 alternate;
  transition: background 0.3s, box-shadow 0.3s;
}
@keyframes qldaFlashPulse {
  from { box-shadow: inset 0 0 0 2px var(--primary), inset 6px 0 0 var(--primary), 0 0 0 0 rgba(31,78,121,0); }
  to   { box-shadow: inset 0 0 0 3px var(--primary), inset 7px 0 0 var(--primary), 0 0 0 7px rgba(31,78,121,0.34); }
}
@keyframes pendingPulse {
  from { box-shadow: 0 0 0 0 rgba(198,89,17,0.4); }
  to { box-shadow: 0 0 0 4px rgba(198,89,17,0); }
}


/* ── EventForm — auto-suggest project from title (Dương) ─────────── */
.ef-sugg {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 6px; padding: 7px 10px;
  background: var(--brand-soft);
  border: 1px dashed var(--brand-soft-2);
  border-radius: 6px;
  font-size: 11.5px;
}
.ef-sugg-icon { font-size: 14px; }
.ef-sugg-label { font-weight: 600; color: var(--primary); }
.ef-sugg-chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ef-sugg-chip {
  padding: 3px 8px; font-size: 11px; font-weight: 600;
  background: white; border: 1px solid var(--brand-soft-2);
  border-radius: 12px; cursor: pointer;
  color: var(--text); font-family: inherit;
  transition: all 0.12s;
  display: inline-flex; align-items: center; gap: 4px;
}
.ef-sugg-chip:hover { border-color: var(--primary); background: var(--primary); color: white; }
.ef-sugg-chip:hover .ef-sugg-code { background: rgba(255,255,255,0.2); color: white; }
.ef-sugg-chip.strong {
  background: var(--primary); color: white; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,78,121,0.15);
  animation: ef-sugg-pulse 1.4s ease-in-out infinite;
}
.ef-sugg-chip.strong .ef-sugg-code { background: rgba(255,255,255,0.25); color: white; }
@keyframes ef-sugg-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(31,78,121,0.15); }
  50% { box-shadow: 0 0 0 5px rgba(31,78,121,0.05); }
}
.ef-sugg-code {
  background: var(--brand-soft-2); color: var(--primary);
  padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 9.5px;
}

.ef-sugg-applied {
  background: var(--success-soft);
  border: 1px solid var(--success);
  color: var(--success);
}
.ef-sugg-applied b { color: var(--success); }
.ef-sugg-clear {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-mid); font-size: 11px; font-family: inherit;
  text-decoration: underline;
}
.ef-sugg-clear:hover { color: var(--danger); }


/* Topbar sync status pill */
.sync-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--text-mid);
}
.sync-pill small { font-size: 11px; font-weight: 600; }
.sync-pill:hover { background: var(--bg-sunken); }
.sync-pill.ok { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.sync-pill.pending { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); animation: syncPulse 1.4s ease-in-out infinite; }
.sync-pill.unset { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
@keyframes syncPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Calendar event selection mode */
.cal-event.selectable { cursor: cell; }
.cal-event.selectable:hover { outline: 2px solid var(--primary); }
.cal-event.selected { outline: 2px solid var(--danger); }
.cal-event-checkbox {
  position: absolute; top: 2px; right: 3px;
  font-size: 13px; line-height: 1;
  color: var(--danger); font-weight: 700;
}


/* Quick input bar in ProjectModal — Dương: nhập nhanh lệnh AI */
.quick-input-bar {
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--bg-elev) 100%);
  border-bottom: 1px solid var(--brand-soft-2);
  display: flex; flex-direction: column; gap: 8px;
}
.quick-input-bar textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 12.5px; resize: vertical;
  background: white;
}
.quick-input-actions { display: flex; gap: 6px; justify-content: flex-end; }
.quick-input-err {
  font-size: 11.5px; color: var(--danger);
  padding: 6px 10px; background: var(--danger-soft); border-radius: 4px;
}
.quick-input-results {
  background: white; border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px;
}
.quick-result-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px dashed var(--divider);
  font-size: 11.5px;
}
.quick-result-row:last-child { border-bottom: none; }
.quick-result-row.applied { opacity: 0.6; }
.qrr-body { flex: 1; min-width: 0; }
.qrr-body code { font-family: var(--mono); font-size: 11px; background: var(--bg-sunken); padding: 1px 5px; border-radius: 3px; }
.qrr-note { color: var(--text-dim); font-size: 10.5px; }
.qrr-applied { color: var(--success); font-weight: 700; font-size: 11px; }

/* Gantt popup — pha select + critical toggle + delete */
.gpe-phase-select { padding: 4px 6px; font-size: 11.5px; font-family: inherit; border: 1px solid var(--border); border-radius: 4px; }
.gpe-row-toggle input { width: auto; }
.gpe-delete { background: transparent; border: 1px solid var(--danger); color: var(--danger); padding: 4px 10px; }
.gpe-delete:hover { background: var(--danger); color: white; }


/* Việc đang làm panel ở đầu tab Tiến độ (Dương) */
.ct-panel {
  display: flex; flex-direction: column;
  gap: 0;
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--brand-soft-2);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  overflow: hidden;
}
.ct-panel-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
}
.ct-panel-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(31,78,121,0.15);
  animation: ctPulse 2s ease-in-out infinite;
}
@keyframes ctPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(31,78,121,0.15); }
  50% { box-shadow: 0 0 0 8px rgba(31,78,121,0.05); }
}
.ct-panel-meta { flex: 1; min-width: 0; }
.ct-panel-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ct-panel-phase-name { color: var(--text); font-weight: 600; }
.ct-panel-task {
  font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.35;
}
.ct-panel-unit {
  margin-top: 6px;
  font-size: 11.5px; color: var(--text-mid);
}
.ct-panel-edit {
  border-top: 1px solid var(--brand-soft-2);
  background: rgba(255,255,255,0.5);
  padding: 8px 12px;
}


/* Event assignees (Dương) */
.ef-assignees { display: flex; gap: 5px; flex-wrap: wrap; padding: 4px 0; }
.ef-assignee-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text-mid);
  border-radius: 18px; cursor: pointer; font-family: inherit;
  font-size: 11.5px;
  transition: all 0.15s;
}
.ef-assignee-chip:hover { border-color: var(--primary); }
.ef-assignee-chip.on {
  background: var(--primary); color: white; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,78,121,0.15);
}
.ef-assignee-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}
.ef-assignee-chip.on .ef-assignee-av {
  background: rgba(255,255,255,0.25); color: white;
}
.ef-assignee-check { font-size: 11px; margin-left: 2px; }

/* Notification dropdown */
.notif-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 21px; height: 21px;
  background: var(--danger); color: white;
  border-radius: 11px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid white;
  animation: notifPulse 1.5s ease-in-out infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 440px; max-height: 560px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-3);
  z-index: 95;
  display: flex; flex-direction: column;
  animation: notifIn 0.18s ease;
}
@keyframes notifIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  font-size: 12px; font-weight: 700; color: var(--text);
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--bg-elev) 100%);
}
.notif-head small { font-weight: 500; color: var(--text-dim); font-size: 10.5px; }
.notif-list { flex: 1; overflow-y: auto; max-height: 440px; }
.notif-item {
  width: 100%; display: flex; gap: 10px;
  padding: 10px 14px;
  border: none; background: transparent; cursor: pointer;
  border-bottom: 1px solid var(--divider);
  text-align: left; font-family: inherit;
  transition: background 0.12s;
}
/* Ghi chú (trang Lịch & Ghi chú): nút sửa/xoá ẩn, hiện khi rê vào dòng */
.gc-note-row .gc-note-actions { opacity: 0; transition: opacity .12s; }
.gc-note-row:hover .gc-note-actions, .gc-note-actions:focus-within { opacity: 1; }
@media (hover: none) { .gc-note-row .gc-note-actions { opacity: 1; } }

.notif-item { align-items: flex-start; padding-right: 30px; }
.notif-item:hover { background: var(--bg-sunken); }
.notif-item.today { background: linear-gradient(90deg, var(--danger-soft) 0%, var(--bg-elev) 60%); }
.notif-item.tomorrow { background: linear-gradient(90deg, var(--warning-soft) 0%, var(--bg-elev) 60%); }
/* Tin CHƯA đọc: nền nổi + tiêu đề đậm; tin đã đọc: mờ nhẹ */
.notif-item.unread .notif-title { font-weight: 800; }
.notif-item:not(.unread) { opacity: 0.72; }
.notif-item:not(.unread):hover { opacity: 1; }
/* Nút xoá thông báo — góc phải, ẩn nhẹ, hiện rõ khi hover dòng */
.notif-del {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.notif-item:hover .notif-del { opacity: 1; }
.notif-del:hover { background: var(--danger-soft); color: var(--danger); }
.notif-date {
  flex-shrink: 0; text-align: center; min-width: 44px;
  padding-right: 8px; border-right: 1px solid var(--divider);
}
.notif-date .d { font-size: 16px; font-weight: 700; color: var(--text); }
.notif-date .t { font-size: 10px; color: var(--text-dim); font-family: var(--mono); margin-top: 2px; }
.notif-body { flex: 1; min-width: 0; line-height: 1.35; }
.notif-title { font-size: 14px; font-weight: 600; color: var(--text); }
.notif-meta {
  margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-dim);
}
.notif-pill {
  padding: 1px 6px; border-radius: 3px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.notif-pill.today { background: var(--danger); color: white; }
.notif-pill.tomorrow { background: var(--warning); color: white; }
.notif-pj {
  background: var(--brand-soft); color: var(--primary);
  padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.notif-foot {
  padding: 8px;
  border-top: 1px solid var(--divider);
  background: var(--bg-sunken);
}

/* ── Toast thông báo nổi (GĐ4a) ── */
.notif-toast-wrap {
  position: fixed; bottom: 80px; right: 20px;
  z-index: 9600; display: flex; flex-direction: column; gap: 10px;
  max-width: 360px; pointer-events: none;
}
.notif-toast {
  pointer-events: auto;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--info);
  border-radius: 10px; box-shadow: var(--shadow-3);
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer;
}
@keyframes qldaSlideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.notif-toast.qlda-slide-in { animation: qldaSlideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.notif-toast:hover { background: var(--bg-sunken); }
.notif-toast-ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
.notif-toast-body { flex: 1; min-width: 0; }
.notif-toast-title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.notif-toast-detail {
  font-size: 12px; color: var(--text-dim); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-toast-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 16px; line-height: 1; padding: 0 2px;
  font-family: inherit;
}
.notif-toast-close:hover { color: var(--text); }
@media (max-width: 768px) {
  .notif-toast-wrap { left: 8px; right: 8px; bottom: 8px; max-width: none; }
}


/* KPI strip rework — clickable + progress + mini bars (Dương) */
.kpi.clickable {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-family: inherit;
  text-align: left;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.kpi.clickable:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: var(--shadow-2);
}
.kpi.clickable:active { transform: translateY(0); }

.kpi-mini-bar {
  display: flex; gap: 2px; height: 5px; margin: 6px 0 4px;
  border-radius: 3px; overflow: hidden;
  background: var(--bg-sunken);
}
.kpi-mini-bar .seg { border-radius: 0; }
.kpi-mini-bar .seg.success { background: var(--success); }
.kpi-mini-bar .seg.danger { background: var(--danger); }
.kpi-mini-bar .seg.muted { background: var(--text-fade); }

.kpi-progress {
  height: 5px; margin: 6px 0 4px;
  background: var(--bg-sunken); border-radius: 3px;
  overflow: hidden;
}
.kpi-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--success) 0%, #79a868 100%);
  transition: width 0.4s ease;
}

.kpi-sub-grid {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.kpi-sub-grid > span { white-space: nowrap; }
.kpi .sub .ok { color: var(--success); font-weight: 700; }
.kpi .sub .bad { color: var(--danger); font-weight: 700; }
.kpi .sub .muted { color: var(--text-dim); }

/* KPI value với unit nhỏ bên cạnh */
.kpi .value { display: flex; align-items: baseline; gap: 4px; }
.kpi .value .unit {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.3px;
}


/* ════════════════════════════════════════════════════════════════
 * PM TOOLBAR cho tab Tiến độ (Dương)
 * ════════════════════════════════════════════════════════════ */

.gantt-pm-toolbar {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Stats banner */
.gantt-stats {
  display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg-sunken);
  border-radius: 6px;
}
.gantt-stat-cell {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4px 10px;
  border-right: 1px solid var(--divider);
  min-width: 60px;
}
.gantt-stat-cell:last-child { border-right: none; }
.gantt-stat-cell .gs-num {
  font-size: 18px; font-weight: 800; line-height: 1;
  color: var(--text);
  display: flex; align-items: baseline; gap: 3px;
}
.gantt-stat-cell .gs-num small {
  font-size: 10px; font-weight: 500; color: var(--text-dim);
}
.gantt-stat-cell .gs-lbl {
  font-size: 9.5px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-top: 3px; font-weight: 600;
}
.gantt-stat-cell.ok .gs-num { color: var(--success); }
.gantt-stat-cell.active .gs-num { color: var(--info); }
.gantt-stat-cell.todo .gs-num { color: var(--text-dim); }
.gantt-stat-cell.critical .gs-num { color: var(--danger); }
.gantt-stat-cell.overdue .gs-num { color: var(--danger); }
.gantt-stat-cell.overdue { background: var(--danger-soft); border-radius: 4px; }
.gantt-stat-spacer { flex: 1; border: none; min-width: 0; }
.gantt-stat-cell.summary { min-width: 150px; }
.gantt-stat-cell.summary .gs-num { color: var(--primary); font-size: 22px; }
.gs-progress { height: 4px; background: var(--bg-elev); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.gs-progress-fill { height: 100%; background: linear-gradient(90deg, var(--success), #79a868); transition: width 0.4s; }
.gantt-stat-cell.time .gs-num { color: var(--warning); }

/* Toolbar row */
.gantt-toolbar-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.gantt-search {
  flex: 0 1 220px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit; font-size: 12px;
  background: white;
}
.gantt-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-soft); }
.gantt-filter-select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit; font-size: 12px;
  background: white; cursor: pointer;
}
.gantt-filter-info {
  font-size: 11px; color: var(--text-dim); font-weight: 600;
  background: var(--brand-soft); padding: 2px 8px; border-radius: 12px;
}

.gantt-foot-hint {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--bg-sunken);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-dim);
}

/* Legend as clickable chips */
.legend-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; cursor: pointer;
  font-size: 10.5px; color: var(--text-mid); font-family: inherit;
}
.legend-chip:hover { background: var(--bg-sunken); border-color: var(--border); }
.legend-chip.active {
  background: var(--brand-soft); border-color: var(--primary); color: var(--primary); font-weight: 700;
}
.legend-chip .box { width: 12px; height: 10px; border-radius: 2px; }

/* Checkbox label */
.ef-check {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.ef-check input { width: auto; }


/* ════════════════════════════════════════════════════════════════
 * OVERVIEW TAB (Dương)
 * ════════════════════════════════════════════════════════════ */
.ov-tri {
  display: grid; grid-template-columns: 220px 1fr 1fr; gap: 12px;
}
@media (max-width: 800px) { .ov-tri { grid-template-columns: 1fr; } }
.ov-tile {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ov-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-2); }
.ov-tile .ov-label {
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.ov-tile-body { display: flex; justify-content: center; align-items: center; padding: 4px 0; }
.ov-phase-name { font-size: 18px; font-weight: 800; color: var(--text); }
.ov-phase-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.ov-mile-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ov-mile-date { font-size: 11.5px; color: var(--primary); margin-top: 4px; font-weight: 600; }
.ov-mile-date.overdue { color: var(--danger); }

.ov-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .ov-grid-2 { grid-template-columns: 1fr; } }

.ov-fin, .ov-info { padding: 4px 0; display: flex; flex-direction: column; gap: 0; }
.ov-fin-row, .ov-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px; border-bottom: 1px dashed var(--divider);
  font-size: 12.5px;
}
.ov-fin-row:last-child, .ov-info-row:last-child { border-bottom: none; }
.ov-fin-row span, .ov-info-row span { color: var(--text-dim); }
.ov-fin-bar {
  display: flex; height: 6px; margin-top: 10px;
  background: var(--bg-sunken); border-radius: 3px; overflow: hidden;
}
.ov-fin-bar .seg.paid { background: var(--success); }
.ov-fin-bar .seg.con { background: var(--info); }
.ov-fin-bar-lbl { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; text-align: right; }

.ov-info-block {
  margin-top: 8px; padding: 10px;
  background: var(--brand-soft);
  border-left: 3px solid var(--primary);
  border-radius: 0 6px 6px 0;
}
.ov-info-block-label { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
.ov-info-block-text { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.ov-info-block-sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

.ov-risks {
  margin: 0; padding: 0 0 0 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.ov-risks li { font-size: 12px; color: var(--text); }

/* Documents table */
.docs-table { width: 100%; border-collapse: collapse; }
.docs-table th {
  background: var(--bg-sunken); color: var(--text-dim);
  padding: 9px 12px; font-size: 10.5px;
  text-align: left; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
.docs-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  font-size: 12.5px;
}
.docs-table tr:hover td { background: var(--bg-sunken); }
.docs-table .num { text-align: right; font-family: var(--mono); font-size: 11.5px; }
.doc-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px; font-weight: 700;
  color: white;
  font-family: var(--mono);
  letter-spacing: 0.3px;
}


/* Drive folder banner & docs stats (Dương) */
.drive-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, #f0f4ff 100%);
  border: 1px solid var(--brand-soft-2);
  border-radius: 8px;
}
.drive-banner-icon {
  font-size: 28px; flex-shrink: 0;
}
.drive-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.drive-banner-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.drive-status {
  font-size: 10.5px; font-weight: 600; color: var(--success);
  background: var(--success-soft); padding: 2px 7px; border-radius: 10px;
}
.drive-input-row { display: flex; gap: 6px; align-items: center; }
.drive-input {
  flex: 1; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  font-family: var(--mono); font-size: 11.5px;
  background: white;
}
.drive-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-soft); }
.drive-link-row {
  display: flex; gap: 6px; align-items: center;
  font-family: var(--mono); font-size: 11.5px;
}
.drive-link {
  flex: 1; min-width: 0;
  color: var(--primary); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 8px; background: white; border-radius: 4px;
  border: 1px solid var(--border);
}
.drive-link:hover { text-decoration: underline; }
.drive-meta { font-size: 11.5px; color: var(--text-dim); }
.drive-meta b { color: var(--text); }

.docs-stats {
  display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-sunken);
  border-radius: 6px;
}
.docs-stat-total {
  font-size: 20px; font-weight: 800; color: var(--primary);
  display: flex; align-items: baseline; gap: 5px;
  padding-right: 12px; border-right: 1px solid var(--divider);
}
.docs-stat-total small { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.docs-stat-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
  font-size: 12px; color: var(--text-mid);
}

.doc-src {
  display: inline-block;
  padding: 2px 7px; border-radius: 3px;
  font-size: 10px; font-weight: 600;
}
.doc-src.drive { background: rgba(31,78,121,0.1); color: var(--primary); }
.doc-src.manual { background: var(--bg-sunken); color: var(--text-mid); }


/* Docs row clickable + name as link (Dương) */
.docs-row-clickable { cursor: pointer; }
.docs-row-clickable:hover td { background: var(--brand-soft); }
.doc-name-link {
  color: var(--text);
  text-decoration: none;
}
.doc-name-link:hover { color: var(--primary); text-decoration: underline; }


/* Auto-derived progress tile (Dương) */
.ov-auto-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9.5px; font-weight: 700;
  color: var(--primary);
  background: var(--brand-soft);
  border: 1px dashed var(--brand-soft-2);
  border-radius: 8px;
}
.ov-tile-foot {
  text-align: center;
  font-size: 11px;
  margin-top: 6px;
  min-height: 16px;
}


/* Simple Phase View (Dương: tiến độ nhỏ đơn giản) */
.phase-now-pill {
  font-size: 11px; font-weight: 600; color: var(--success);
  background: var(--success-soft); padding: 2px 10px; border-radius: 12px;
}

.simple-phase-row {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding: 4px 0;
}
.simple-phase-cell {
  position: relative;
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--bg-sunken);
  transition: all 0.2s;
}
.simple-phase-cell.done { background: var(--success-soft); }
.simple-phase-cell.done .simple-phase-name { color: var(--success); }
.simple-phase-cell.active {
  background: var(--brand-soft);
  border: 2px solid var(--primary);
  padding: 12px 14px;
}
.simple-phase-cell.active .simple-phase-name { color: var(--primary); }
.simple-phase-cell.todo { opacity: 0.55; }
.simple-phase-cell.todo .simple-phase-name { color: var(--text-dim); }
.simple-phase-marker {
  position: absolute; left: 40%; top: -2px; bottom: -2px; width: 3px;
  background: var(--danger);
  border-radius: 2px;
}
.simple-phase-name {
  font-size: 11.5px; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.simple-phase-desc {
  font-size: 11px; color: var(--text-mid); line-height: 1.3;
}

/* Mốc quan trọng table */
.milestones-table { width: 100%; border-collapse: collapse; }
.milestones-table th {
  background: var(--bg-sunken); color: var(--text-dim);
  padding: 9px 14px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
.milestones-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  font-size: 12.5px; vertical-align: middle;
}
.milestones-table tr:hover td { background: var(--bg-sunken); }
.ms-date-input {
  padding: 4px 8px; border: 1px solid transparent; background: transparent;
  font-family: var(--mono); font-size: 12px; color: var(--text);
  border-radius: 4px; cursor: pointer;
}
.ms-date-input:hover { border-color: var(--border); background: white; }
.ms-date-input:focus { outline: none; border-color: var(--primary); background: white; }
.ms-status-pill {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px; font-weight: 600;
  border: none; cursor: pointer; font-family: inherit;
  transition: opacity 0.15s;
}
.ms-status-pill:hover { opacity: 0.8; }
.ms-status-pill.done { background: var(--success-soft); color: var(--success); }
.ms-status-pill.doing { background: var(--info-soft); color: var(--info); }
.ms-status-pill.plan { background: var(--warning-soft); color: var(--warning); }
.ms-status-pill.late { background: var(--danger-soft); color: var(--danger); }


/* Inbox change card — edit mode (Dương) */
.ch-btn.edit { background: var(--brand-soft); color: var(--primary); border: 1px solid var(--brand-soft-2); }
.ch-btn.edit:hover { background: var(--primary); color: white; border-color: var(--primary); }
.ch-edit {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 0;
}
.ch-edit label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  color: var(--text-dim); letter-spacing: 0.4px;
  margin-top: 4px;
}
.ch-edit input, .ch-edit textarea {
  padding: 5px 8px;
  font-size: 11.5px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px;
  background: white;
}
.ch-edit input:focus, .ch-edit textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--brand-soft);
}


/* Project notes (Dương: ghi chú từ tin nhắn) */
.proj-notes-list {
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 0;
}
.proj-note-item {
  padding: 8px 12px;
  background: var(--info-soft);
  border-left: 3px solid var(--info);
  border-radius: 0 6px 6px 0;
}
.proj-note-text {
  font-size: 12.5px; color: var(--text); line-height: 1.4;
}
.proj-note-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 4px;
  font-size: 10.5px; color: var(--text-dim);
}
.proj-note-conf {
  background: var(--bg-elev); padding: 1px 6px;
  border-radius: 8px; color: var(--info); font-weight: 600;
}


/* Auto-derived progress badge on ProjectCard (Dương) */
.auto-derive-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  font-size: 9px; font-weight: 700;
  color: var(--primary);
  background: var(--brand-soft);
  border: 1px dashed var(--brand-soft-2);
  border-radius: 6px;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}
.ok-text { color: var(--success); font-weight: 700; }
.danger-text { color: var(--danger); font-weight: 700; }


/* Notes tab (Dương: ghi chú) */
.notes-add-box {
  padding: 14px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--brand-soft-2);
  border-radius: 8px;
}
.notes-add-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.notes-add-head h3 {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--text);
}
.notes-add-row {
  display: flex; gap: 8px;
}
.notes-add-row textarea {
  flex: 1; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  font-family: inherit; font-size: 12.5px; resize: vertical;
  background: white;
}
.notes-add-row textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--brand-soft); }

.notes-list {
  display: flex; flex-direction: column; gap: 6px;
}
.note-card {
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--divider);
  border-left: 3px solid var(--info);
  border-radius: 0 6px 6px 0;
  transition: all 0.15s;
}
.note-card:hover { border-color: var(--brand-soft-2); }
.note-card.risk { border-left-color: var(--warning); background: linear-gradient(90deg, var(--warning-soft) 0%, var(--bg-elev) 30%); }
.note-content {
  font-size: 12.5px; color: var(--text); line-height: 1.4;
  display: flex; gap: 6px;
}
.note-risk-tag { color: var(--warning); font-weight: 700; flex-shrink: 0; }
.note-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 6px;
  font-size: 10.5px; color: var(--text-dim);
}
.note-conf {
  background: var(--brand-soft); color: var(--primary);
  padding: 1px 6px; border-radius: 8px; font-weight: 600;
}
.note-mini {
  padding: 2px 7px;
  border: 1px solid var(--border); background: var(--bg-elev);
  border-radius: 3px; cursor: pointer;
  font-size: 10px; color: var(--text-mid); font-family: inherit;
  transition: all 0.12s;
}
.note-mini:hover { background: var(--brand-soft); color: var(--primary); border-color: var(--brand-soft-2); }
.note-mini.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

.note-edit textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--primary); border-radius: 5px;
  font-family: inherit; font-size: 12.5px;
  background: white; resize: vertical;
}
.note-edit .note-actions { display: flex; gap: 5px; margin-top: 6px; justify-content: flex-end; }


/* Empty-today with upcoming events (Dương) */
.upcoming-empty { padding: 12px 14px; }
.upcoming-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--text-mid); font-weight: 600;
  margin-bottom: 8px;
}
.upcoming-list { display: flex; flex-direction: column; gap: 8px; }
.upcoming-day {
  padding: 6px 0;
  border-top: 1px dashed var(--divider);
}
.upcoming-day:first-child { border-top: none; padding-top: 0; }
.upcoming-day-label {
  font-size: 11px; font-weight: 700;
  color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 5px;
}
.upcoming-event-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: var(--bg-sunken);
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 3px;
}
.upcoming-event-row .ue-time {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--text-dim); min-width: 40px; white-space: nowrap;
  /* Nhóm 8.2 — NGÀY trên, GIỜ dưới (2 dòng) để tận dụng khoảng trống + nhường bề ngang cho tiêu đề. */
  display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; align-self: flex-start;
}
.upcoming-event-row .ue-time-date { color: var(--text-mid, var(--text)); }
.upcoming-event-row .ue-time-hm { font-size: 10px; opacity: .85; }
.upcoming-event-row .ue-title { flex: 1; color: var(--text); }
.upcoming-event-row .ue-project {
  background: var(--brand-soft); color: var(--primary);
  padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
}


/* Today overview strip (Dương: tổng thể nhanh) */
.today-overview-strip {
  display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--bg-sunken) 0%, var(--bg-elev) 100%);
  border-bottom: 1px solid var(--divider);
  margin: 0 0 6px;
}
.tos-cell {
  padding: 5px 12px;
  border-right: 1px solid var(--divider);
  display: flex; flex-direction: column; justify-content: center;
  border: none;
  background: transparent; cursor: default;
  font-family: inherit; text-align: left;
}
.tos-cell:last-child { border-right: none; }
.tos-cell .tos-num {
  font-size: 18px; font-weight: 800; line-height: 1;
  color: var(--text);
  display: flex; align-items: baseline; gap: 2px;
}
.tos-cell .tos-num small {
  font-size: 11px; font-weight: 500; color: var(--text-dim);
}
.tos-cell .tos-lbl {
  font-size: 9.5px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-top: 4px; font-weight: 600;
}
.tos-cell.danger .tos-num { color: var(--danger); }
.tos-cell.danger .tos-lbl { color: var(--danger); }
.tos-cell.warning .tos-num { color: var(--warning); }
.tos-cell.ok .tos-num { color: var(--success); }
.tos-clickable {
  cursor: pointer; border-radius: 5px;
  transition: background 0.12s;
}
.tos-clickable:hover { background: var(--brand-soft); }
.tos-spacer { flex: 1; border: none; }
.tos-progress-block {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 140px;
  padding-left: 12px; border-left: 1px solid var(--divider);
}
.tos-progress-num {
  font-size: 18px; font-weight: 800; color: var(--primary);
  line-height: 1;
}
.tos-progress-bar {
  height: 5px; margin-top: 6px;
  background: var(--bg-sunken); border-radius: 3px;
  overflow: hidden;
}
.tos-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #79a868);
  transition: width 0.4s;
}


/* Comment batch — Dương: task-row + AI chat edit */
.task-row{padding:10px 14px!important;border-radius:6px!important;margin:0 -6px 2px!important;border:1px solid transparent!important;border-bottom:1px solid var(--divider)!important;transition:background .12s,border-color .12s,box-shadow .12s!important}
.task-row:hover{background:var(--bg-hover)!important;border-color:var(--brand-soft-2)!important;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.task-row .tick{width:20px!important;height:20px!important;border-width:2px!important;font-weight:700}
.task-row .kindico{width:28px!important;height:28px!important;border-radius:8px!important;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.task-row .time{font-weight:700!important;padding:2px 8px!important;background:var(--bg-sunken);border-radius:10px!important;text-align:center;min-width:44px}
.task-row .tt{font-size:12.5px!important;font-weight:600!important;line-height:1.4!important}
.task-row .ts{margin-top:3px!important}
.task-row .task-pj{background:var(--brand-soft)!important;padding:1px 7px!important;border-radius:4px!important;font-size:10.5px!important;font-weight:700!important;margin-right:4px}
.task-row.task-notice{background:linear-gradient(90deg,rgba(198,89,17,.1) 0,rgba(198,89,17,.02) 60%,transparent 100%)!important;border-left:3px solid var(--warning)!important}
.task-row.task-overdue{background:linear-gradient(90deg,rgba(192,0,0,.08) 0,rgba(192,0,0,.02) 60%,transparent 100%)!important;border-left:3px solid var(--danger)!important}
.task-row.task-done{background:linear-gradient(90deg,rgba(84,130,53,.05) 0,transparent 100%)!important;opacity:.75}
.task-row .task-mini-btn{opacity:.45;transition:opacity .15s}
.task-row:hover .task-mini-btn{opacity:1}
.task-row .level-chip{padding:4px 11px!important;font-size:10.5px!important;border-width:1.5px!important}
.ai-msg{position:relative}
.ai-msg .msg-tools{position:absolute;top:-10px;right:4px;display:none;gap:2px;background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:2px;box-shadow:var(--shadow-2);z-index:5}
.ai-msg:hover .msg-tools{display:flex}
.ai-msg .msg-tool{width:22px;height:22px;border:none;background:transparent;border-radius:4px;font-size:11px;cursor:pointer;color:var(--text-mid);display:flex;align-items:center;justify-content:center}
.ai-msg .msg-tool:hover{background:var(--brand-soft);color:var(--primary)}
.ai-msg .msg-tool.danger:hover{background:var(--danger-soft);color:var(--danger)}
.ai-msg textarea.msg-edit-area{width:100%;margin-top:4px;padding:6px 8px;border:1px solid var(--primary);border-radius:5px;font-family:inherit;font-size:12.5px;background:#fff;color:var(--text);resize:vertical;min-height:56px}
.ai-msg .msg-edit-actions{display:flex;gap:6px;margin-top:6px;justify-content:flex-end}
.ai-msg .msg-edit-actions button{padding:3px 12px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--bg-elev);color:var(--text-mid);border-radius:4px;cursor:pointer;font-family:inherit}
.ai-msg .msg-edit-actions button.save{background:var(--success);color:#fff;border-color:var(--success)}


/* PM Tab merge — Dương: gộp 2 card Tiến độ + cho kéo sort milestone */
.modal .col > div.gantt-merged-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.modal .col > div.gantt-merged-wrap > .card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.modal .col > div.gantt-merged-wrap > .card + .card {
  border-top: 1px solid var(--divider) !important;
}
.milestones-table tbody tr {
  cursor: grab;
  transition: background 0.12s;
}
.milestones-table tbody tr.ms-dragging {
  opacity: 0.4;
  background: var(--brand-soft) !important;
}
.milestones-table tbody tr.ms-drop-over {
  border-top: 2px solid var(--primary);
}
.milestones-table tbody tr:active { cursor: grabbing; }
.ms-drag-handle {
  display: inline-block;
  width: 14px; text-align: center;
  color: var(--text-fade);
  font-size: 14px;
  cursor: grab;
  margin-right: 4px;
  user-select: none;
}
.ms-drag-handle:hover { color: var(--primary); }


/* Batch v3 — Dương: doc reader + pkg contract upload + today polish */

/* --- TodayCard polish --- */
.card[data-comment-anchor="f6e5e5af79-div-164-5"] {
  background: linear-gradient(180deg, var(--bg-elev) 0%, #fafbfd 100%) !important;
  border: 1px solid var(--brand-soft-2) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.05) !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] > .card-head {
  background: linear-gradient(90deg, var(--brand-soft) 0%, transparent 60%) !important;
  border-bottom: 1px solid var(--brand-soft-2) !important;
  padding: 14px 18px !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] > .card-head h2 {
  font-size: 14px !important; font-weight: 700 !important; color: var(--primary) !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] > .card-head .h-sub {
  font-weight: 500 !important; color: var(--text-mid) !important; font-size: 11.5px !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .today-overview-strip {
  border-radius: 0 !important;
  background: rgba(31,78,121,0.03) !important;
  padding: 12px 18px !important;
}
.card[data-comment-anchor="f6e5e5af79-div-164-5"] .today-overview-strip .tos-cell {
  padding: 6px 14px !important;
}

/* --- Document Reader button + classification --- */
.docs-table tr td:first-child { position: relative; }
.docs-row-actions {
  display: inline-flex; gap: 4px; margin-left: 8px;
  opacity: 0; transition: opacity 0.15s;
}
.docs-table tr:hover .docs-row-actions { opacity: 1; }
.docs-row-actions button {
  padding: 2px 8px; font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text-mid); border-radius: 4px; cursor: pointer;
  font-family: inherit;
}
.docs-row-actions button:hover { background: var(--brand-soft); color: var(--primary); border-color: var(--primary); }
.docs-row-actions button.doc-read-btn { background: var(--primary); color: white; border-color: var(--primary); }
.docs-row-actions button.doc-read-btn:hover { background: var(--primary-dark, var(--primary)); opacity: 0.9; }

.doc-class-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 10px;
  font-size: 9.5px; font-weight: 700;
  background: var(--success-soft); color: var(--success);
  border: 1px solid var(--success);
}
.doc-class-badge.contract { background: var(--brand-soft); color: var(--primary); border-color: var(--primary); }
.doc-class-badge.decision { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.doc-class-badge.report { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.doc-class-badge.drawing { background: rgba(176,87,30,0.15); color: #B0571E; border-color: #B0571E; }

/* "Read all & filter" toolbar on Documents tab */
.docs-bulk-toolbar {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--brand-soft), var(--bg-elev));
  border: 1px solid var(--brand-soft-2);
  border-radius: 8px;
}
.docs-bulk-toolbar .icon { font-size: 22px; }
.docs-bulk-toolbar .body { flex: 1; font-size: 12px; line-height: 1.4; }
.docs-bulk-toolbar .body .title { font-weight: 700; color: var(--primary); }
.docs-bulk-toolbar .body .sub { color: var(--text-dim); font-size: 11px; margin-top: 2px; }

/* --- Detect card: contract upload per package --- */
.detect-card .pkg-contract-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; margin-top: 5px;
  background: rgba(31,78,121,0.04);
  border-radius: 4px;
  border-top: 1px dashed var(--divider);
}
.detect-card .pkg-contract-row .lbl {
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.detect-card .pkg-contract-row .url-input {
  flex: 1; padding: 4px 8px;
  font-size: 10.5px; font-family: var(--mono);
  border: 1px solid var(--border); border-radius: 3px;
  background: white;
}
.detect-card .pkg-contract-row .upload-btn {
  padding: 3px 8px; font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text-mid); border-radius: 4px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.detect-card .pkg-contract-row .upload-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
.detect-card .pkg-contract-row.has-contract {
  background: rgba(84,130,53,0.08);
  border-top-color: var(--success);
}
.detect-card .pkg-contract-row.has-contract .lbl::before { content: "✓ "; color: var(--success); }


/* Notes-merge — Dương: bỏ tab Ghi chú riêng, gắn vào cuối Tổng quan */
.modal-tabs .modal-tab.notes-tab-hidden { display: none !important; }
.ov-notes-section {
  margin-top: 14px;
  border: 1px solid var(--info);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--info-soft) 0%, var(--bg-elev) 30%);
  overflow: hidden;
}
.ov-notes-section > .ov-notes-head {
  padding: 10px 14px;
  background: var(--info);
  color: white;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: space-between;
}
.ov-notes-section > .ov-notes-body {
  padding: 12px;
}


/* AI confirm buttons — Dương: nút sửa nhanh + xác nhận trong AI chat */
.ai-msg.ai .ai-confirm-bar {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--divider);
}
.ai-msg.ai .ai-quick-btn {
  padding: 5px 10px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  background: white; color: var(--text-mid);
  border-radius: 4px; cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.ai-msg.ai .ai-quick-btn:hover {
  background: var(--brand-soft); color: var(--primary); border-color: var(--primary);
}
.ai-msg.ai .ai-confirm-btn {
  padding: 6px 16px !important;
  font-size: 12px !important; font-weight: 700;
  background: var(--success); color: white; border-color: var(--success);
  margin-left: auto;
  box-shadow: 0 2px 6px rgba(84,130,53,0.3);
}
.ai-msg.ai .ai-confirm-btn:hover { background: #6E9B45; transform: translateY(-1px); }
.ai-msg.ai .ai-reject-btn {
  background: var(--danger-soft); color: var(--danger); border-color: var(--danger);
}
.ai-msg.ai .ai-reject-btn:hover { background: var(--danger); color: white; }
.ai-msg.ai.ai-confirmed { opacity: 0.7; }
.ai-msg.ai.ai-confirmed .ai-confirm-bar { display: none; }
.ai-msg.ai.ai-confirmed::after {
  content: "✓ Đã xác nhận"; display: inline-block;
  margin-top: 8px; padding: 3px 10px; border-radius: 12px;
  font-size: 10.5px; font-weight: 700;
  background: var(--success-soft); color: var(--success);
}


/* All-7 batch — Dương */

/* 1. AI context suggestions ngay phía trên ô input */
.ai-floater .ai-context-sugg {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 6px 10px;
  background: linear-gradient(180deg, transparent, var(--brand-soft));
  border-top: 1px solid var(--divider);
}
.ai-floater .ai-context-sugg button {
  padding: 3px 9px; font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--brand-soft-2); background: white;
  color: var(--primary); border-radius: 12px; cursor: pointer;
  font-family: inherit;
}
.ai-floater .ai-context-sugg button:hover { background: var(--primary); color: white; }

/* 2. Gantt drag-handle visible hint */
.gantt .bar-wrapper:hover .bar { filter: brightness(1.05); }
.gantt-drag-hint {
  position: fixed; pointer-events: none;
  background: var(--primary); color: white;
  padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  box-shadow: var(--shadow-2);
  z-index: 9999; display: none;
}

/* 3. Gói thầu — Add Quick btn */
.pkg-quick-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; font-size: 11px; font-weight: 600;
  background: var(--success); color: white; border: none;
  border-radius: 4px; cursor: pointer; font-family: inherit;
  margin-left: auto;
}
.pkg-quick-add:hover { background: #6E9B45; }

/* 4. PL03A approval flow chip */
.pay-approval-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700;
  margin-left: 6px;
}
.pay-approval-chip.step1 { background: var(--brand-soft); color: var(--primary); }
.pay-approval-chip.step2 { background: var(--warning-soft); color: var(--warning); }
.pay-approval-chip.step3 { background: var(--success-soft); color: var(--success); }

/* 5. Drag-drop upload overlay on Documents */
.docs-table.drag-over {
  outline: 3px dashed var(--primary);
  outline-offset: -3px;
  background: var(--brand-soft);
}
.docs-drop-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31,78,121,0.08);
  pointer-events: none; z-index: 5;
  font-size: 16px; font-weight: 700; color: var(--primary);
}

/* 6. Report sign+send buttons */
.report-sign-bar {
  display: flex; gap: 6px; margin-top: 10px;
  padding: 10px; border-top: 2px solid var(--divider);
  background: var(--bg-sunken); border-radius: 0 0 8px 8px;
}
.report-sign-bar .btn { padding: 6px 14px !important; font-size: 12px; }

/* 7. Dashboard hot-list widget */
.hot-list-widget {
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--danger-soft), var(--bg-elev));
  padding: 12px 14px;
  margin-bottom: 14px;
}
.hot-list-widget .hl-head {
  font-size: 13px; font-weight: 700; color: var(--danger);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.hot-list-widget .hl-item {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(192,0,0,0.2);
  font-size: 12px;
  display: flex; gap: 8px; align-items: center;
}
.hot-list-widget .hl-item:last-child { border-bottom: none; }
.hot-list-widget .hl-pj {
  background: var(--danger); color: white;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; font-family: var(--mono);
}
.hot-list-widget .hl-text { flex: 1; color: var(--text); }
.hot-list-widget .hl-day { font-size: 10.5px; color: var(--danger); font-weight: 700; white-space: nowrap; }


/* Inline notes + visible edit btn — Dương */
/* AI message edit/copy/del buttons — luôn hiển thị mờ, đậm khi hover */
.ai-msg .msg-tools { display: flex !important; opacity: 0.55; }
.ai-msg:hover .msg-tools { opacity: 1; }
.ai-msg .msg-tools .msg-tool {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
}

/* Inline notes composer trong Tổng quan */
.ov-notes-composer { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.ov-notes-composer textarea {
  width: 100%; min-height: 60px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  font-family: inherit; font-size: 12.5px; resize: vertical;
  background: white;
}
.ov-notes-composer textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--brand-soft); }
.ov-notes-composer .actions { display: flex; gap: 6px; justify-content: flex-end; }
.ov-notes-composer .actions button {
  padding: 5px 14px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text-mid); border-radius: 4px; cursor: pointer;
  font-family: inherit;
}
.ov-notes-composer .actions button.save {
  background: var(--primary); color: white; border-color: var(--primary);
}
.ov-notes-list-inline { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ov-notes-list-inline .note {
  padding: 7px 10px; background: var(--info-soft);
  border-left: 3px solid var(--info); border-radius: 0 5px 5px 0;
  font-size: 12px; color: var(--text); position: relative;
}
.ov-notes-list-inline .note .meta {
  font-size: 10px; color: var(--text-dim); margin-top: 3px;
}
.ov-notes-list-inline .note .del {
  position: absolute; top: 4px; right: 6px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-fade); font-size: 11px;
}
.ov-notes-list-inline .note .del:hover { color: var(--danger); }


/* Consolidate AI vs Inbox — Dương: chỉ giữ AI, ẩn Inbox FAB + sidebar item */
.inbox-fab { display: none !important; }
.nav-section .nav-item.inbox-nav-hidden { display: none !important; }
.ai-foot-hint {
  background: var(--brand-soft) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  border-top: 1px solid var(--brand-soft-2) !important;
}
.ai-foot-hint button {
  font-weight: 700 !important;
  color: var(--primary) !important;
  text-decoration: underline;
}


/* AI msg edit v2 — Dương: ghi đè bằng MarkdownToHtml */
.ai-msg-editing { padding: 8px !important; background: var(--brand-soft) !important; border: 2px solid var(--primary) !important; border-radius: 8px; }
.ai-msg-editing > *:not(.msg-edit-area):not(.msg-edit-actions):not(.msg-tools) { display: none !important; }
.ai-msg .msg-edit-area-v2 {
  display: block; width: 100%; min-height: 80px;
  padding: 8px 10px;
  border: 1px solid var(--primary); border-radius: 5px;
  font-family: inherit; font-size: 12.5px;
  background: white; color: var(--text);
  resize: vertical;
}
.ai-msg .msg-edit-actions-v2 {
  display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end;
}
.ai-msg .msg-edit-actions-v2 button {
  padding: 5px 14px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text-mid); border-radius: 4px; cursor: pointer;
  font-family: inherit;
}
.ai-msg .msg-edit-actions-v2 button.save {
  background: var(--success); color: white; border-color: var(--success);
}
.ai-msg .msg-edit-actions-v2 button.resend {
  background: var(--primary); color: white; border-color: var(--primary);
}


/* AI btn to FAB — Dương: di chuyển nút AI xuống góc dưới phải */
.icon-btn[title*="AI"], .icon-btn[title*="Cl"][title*="Artifact"] {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--primary), #2D6BB5) !important;
  color: white !important;
  box-shadow: 0 6px 20px rgba(31,78,121,0.45), 0 0 0 4px rgba(31,78,121,0.12) !important;
  border: none !important;
  z-index: 80 !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
  cursor: pointer;
}
.icon-btn[title*="AI"]:hover, .icon-btn[title*="Cl"][title*="Artifact"]:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 10px 26px rgba(31,78,121,0.55), 0 0 0 6px rgba(31,78,121,0.18) !important;
}
.icon-btn[title*="AI"] svg, .icon-btn[title*="Cl"][title*="Artifact"] svg {
  width: 24px !important; height: 24px !important;
}
.icon-btn[title*="AI"]::after, .icon-btn[title*="Cl"][title*="Artifact"]::after {
  content: ""; position: absolute;
  inset: -4px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #2D6BB5);
  opacity: 0.25; z-index: -1;
  animation: aiFabPulse 2s ease-in-out infinite;
}
@keyframes aiFabPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.18); opacity: 0; }
}

/* Đẩy AI floater (chat panel) lên trên FAB chứ không che FAB */
.ai-floater {
  bottom: 96px !important;
}


/* Hide hot-list — Dương: không cần thiết */
.hot-list-widget { display: none !important; }


/* AI edit modal v3 — Dương */
.ai-edit-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  animation: aiEditFadeIn 0.15s ease;
}
@keyframes aiEditFadeIn { from {opacity:0} to {opacity:1} }
.ai-edit-modal .box {
  background: white; border-radius: 10px;
  width: 520px; max-width: 90vw;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  overflow: hidden;
}
.ai-edit-modal .hd {
  padding: 12px 16px;
  background: var(--primary); color: white;
  font-weight: 700; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.ai-edit-modal .hd .x {
  background: rgba(255,255,255,0.18); border: none;
  width: 26px; height: 26px; border-radius: 5px;
  color: white; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ai-edit-modal .bd { padding: 16px; }
.ai-edit-modal textarea {
  width: 100%; min-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px;
  resize: vertical; box-sizing: border-box;
}
.ai-edit-modal textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-soft); }
.ai-edit-modal .ft {
  padding: 12px 16px;
  background: var(--bg-sunken);
  border-top: 1px solid var(--divider);
  display: flex; gap: 8px; justify-content: flex-end;
}
.ai-edit-modal .ft button {
  padding: 7px 16px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 5px;
  font-family: inherit; cursor: pointer;
  background: var(--bg-elev); color: var(--text-mid);
}
.ai-edit-modal .ft button.copy { background: var(--brand-soft); color: var(--primary); border-color: var(--brand-soft-2); }
.ai-edit-modal .ft button.resend { background: var(--primary); color: white; border-color: var(--primary); }


/* Revert: keep Inbox, hide AI — Dương */
/* Dương: ẨN nút nổi "Hộp thư báo cáo" theo yêu cầu (đổi từ flex → none). */
.inbox-fab { display: none !important; }
.nav-section .nav-item.inbox-nav-hidden { display: flex !important; }

/* Ẩn AI: nút FAB AI + chat panel */
.icon-btn[title*="AI"], .icon-btn[title*="Cl"][title*="Artifact"] { display: none !important; }
.ai-floater { display: none !important; }
/* Ẩn nav item AI nếu có */
.nav-section .nav-item.ai-nav-hidden { display: none !important; }


/* TodayCard click→calendar + assignees — Dương */
.task-row { cursor: pointer; }
.task-row .ti.task-clickable { pointer-events: auto; }
.task-row .ti.task-clickable:hover { background: transparent; }
.task-followers {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  padding: 1px 6px 1px 4px;
  background: var(--bg-sunken);
  border-radius: 10px;
  font-size: 10px; color: var(--text-mid);
}
.task-followers .avs { display: inline-flex; }
.task-followers .av {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--primary); color: white;
  font-size: 8.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid white;
  margin-left: -4px;
}
.task-followers .av:first-child { margin-left: 0; }
/* GĐ4b: màu avatar set inline theo username (hash ổn định) — bỏ màu cố định theo index */
.task-followers .av.b2,
.task-followers .av.b3,
.task-followers .av.b4 { background: inherit; }


/* Modal polish v2 — Dương: format ngày, spacing CBQL, ẩn TEST từ Apps Script */
.ov-mile-date { font-variant-numeric: tabular-nums; }
.ov-info-block-text { white-space: pre-line; }
.ov-info-row .val { line-height: 1.5; }
.ov-fin-row b { font-variant-numeric: tabular-nums; }
.ov-fin-row b:empty::after { content: 'Chưa có'; color: var(--text-fade); font-style: italic; font-weight: 400; }
.quick-input-bar .err {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  color: var(--warning);
  padding: 6px 10px;
  font-size: 11.5px;
  border-radius: 5px;
  margin-top: 4px;
}


/* Upcoming events click+done — Dương */
.upcoming-event-row { cursor: pointer; transition: background 0.12s; }
.upcoming-event-row:hover { background: var(--brand-soft) !important; }
.upcoming-event-row .ue-done {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: transparent;
  flex-shrink: 0;
  transition: all 0.15s;
}
.upcoming-event-row .ue-done:hover { border-color: var(--success); }
.upcoming-event-row .ue-done.done {
  background: var(--success); border-color: var(--success); color: white;
}
.upcoming-event-row.is-done .ue-title {
  text-decoration: line-through; color: var(--text-dim);
}
.upcoming-event-row.is-done { opacity: 0.6; }

/* Upcoming row v2 — Dương: chuyên nghiệp + assignees + level */
.upcoming-event-row {
  padding: 8px 10px !important;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 5px;
  border-left-width: 3px;
}
.upcoming-event-row:hover {
  background: var(--brand-soft) !important;
  border-color: var(--brand-soft-2);
  box-shadow: 0 1px 4px rgba(15,23,42,.06);
}
.upcoming-event-row.ue-lvl-urgent { border-left-color: var(--danger); }
.upcoming-event-row.ue-lvl-soon { border-left-color: var(--warning); }
.upcoming-event-row.ue-lvl-official { border-left-color: var(--info); }
.upcoming-event-row.ue-lvl-normal { border-left-color: var(--text-dim); }
.upcoming-event-row .ue-time {
  min-width: 46px !important;
  padding: 2px 7px;
  background: var(--bg-sunken);
  border-radius: 5px;
  font-size: 11px !important;
  text-align: center;
  margin-top: 1px;
}
.upcoming-event-row .ue-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.upcoming-event-row .ue-title-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.upcoming-event-row .ue-title {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0;
}
/* Tên công trình (chip) trong dòng "Sắp tới": RÚT GỌN khi quá dài — cắt bằng "…",
   tên đầy đủ vẫn ở tooltip (title). Trước đây chip không giới hạn bề ngang nên tên dài
   chiếm hết chỗ, ép tiêu đề bên trái bẻ dọc từng chữ. */
.upcoming-event-row .ue-project-chip {
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  flex-shrink: 1;
  min-width: 0;
}
.upcoming-event-row .ue-level {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 7px; border-radius: 10px;
  text-transform: uppercase; flex-shrink: 0;
}
.upcoming-event-row .ue-level.ue-lvl-urgent { background: #fee2e2; color: #b91c1c; }
.upcoming-event-row .ue-level.ue-lvl-soon { background: #fef3c7; color: #b45309; }
.upcoming-event-row .ue-level.ue-lvl-official { background: #dbeafe; color: #1e40af; }
.upcoming-event-row .ue-level.ue-lvl-normal { background: var(--bg-sunken); color: var(--text-dim); }
.upcoming-event-row .ue-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--text-dim);
}
.upcoming-event-row .ue-meta .ue-project {
  padding: 1px 6px; border-radius: 3px;
  background: var(--brand-soft); color: var(--primary);
  font-weight: 700; font-size: 10px;
}
.upcoming-event-row .ue-att {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(59,130,246,0.08); color: #1e40af;
  font-weight: 500;
}
.upcoming-event-row .ue-att-ico { font-size: 10px; opacity: 0.8; }

/* ── Dương 04/07/2026 — GÁN THÀNH VIÊN DÙNG CHUNG (QLDA.assigneesHtml) ──
   Chip avatar+tên: ĐÃ XEM = sáng rõ; CHƯA XEM = mờ + xám. Dùng chung ở công văn/lịch/ghi chú. */
.qa-assignees { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.qa-assignees .qa-ico { opacity: .6; font-size: 11px; line-height: 1; }
.qa-chip { display: inline-flex; align-items: center; transition: opacity .16s ease, filter .16s ease; }
/* Chưa xem = logo XÁM (khử màu hoàn toàn) + hơi mờ; đã xem = sáng rõ, đủ màu. */
.qa-chip.is-unseen { opacity: .5; filter: grayscale(1); }
.qa-chip.is-seen { opacity: 1; filter: none; }
.qa-more { font-size: 11px; font-weight: 600; color: var(--text-dim); }
/* Lịch tuần: ô sự kiện nhỏ → avatar sát nhau, gọn */
.cal-event-assignees .qa-assignees { gap: 3px; }
.upcoming-event-row .ue-place {
  color: var(--text-mid); font-style: italic;
}
.upcoming-event-row .ue-done {
  margin-top: 1px; flex-shrink: 0;
  width: 20px !important; height: 20px !important;
  border-width: 2px !important;
}


.sync-diag {
  position: fixed; bottom: 90px; right: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: var(--shadow-3);
  z-index: 70;
  max-width: 320px;
  font-size: 12px;
}
.sync-diag.ok { border-color: var(--success); }
.sync-diag h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--warning); }
.sync-diag.ok h4 { color: var(--success); }
.sync-diag ul { margin: 4px 0; padding-left: 18px; font-size: 11px; }
.sync-diag .x { position: absolute; top: 4px; right: 6px; cursor: pointer; color: var(--text-fade); border: none; background: none; }
.sync-diag button.act { padding: 4px 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--primary); background: var(--primary); color: white; border-radius: 4px; cursor: pointer; margin-top: 4px; }


/* ── RecentActivityCard — hoạt động gần đây cho dashboard ── */
.recent-activity-card { padding: 0; overflow: hidden; }
.recent-activity-card > .card-head { padding: 14px 16px 10px; }
.recent-activity-card .filter-row { margin-top: 8px; }
.ra-feed { display: flex; flex-direction: column; max-height: 480px; overflow-y: auto; }
.ra-row {
  display: flex; gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--divider);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.ra-row:hover { background: var(--bg-hover, var(--brand-soft)); }
.ra-row:first-child { border-top: none; }
.ra-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  color: white;
  font-size: 13px; font-weight: 700;
  line-height: 1;
}
.ra-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ra-row-1 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.ra-proj { font-weight: 700; font-family: var(--mono); font-size: 11px; background: var(--brand-soft); color: var(--primary); padding: 1px 6px; border-radius: 3px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.ra-action { font-weight: 600; color: var(--text); }
.ra-field { font-size: 11px; color: var(--text-dim); background: var(--bg-sunken, #f1f1f3); padding: 1px 6px; border-radius: 3px; font-family: var(--mono); }
.ra-change { font-size: 11.5px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ra-old { color: var(--text-dim); text-decoration: line-through; font-family: var(--mono); }
.ra-arrow { color: var(--text-dim); }
.ra-new { color: var(--success); font-weight: 600; font-family: var(--mono); }
.ra-reason { font-size: 11.5px; color: var(--text-mid); font-style: italic; padding-left: 8px; border-left: 2px solid var(--divider); }
.ra-meta { font-size: 10.5px; color: var(--text-dim); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.ra-user { font-weight: 600; }
.ra-time { font-variant-numeric: tabular-nums; }
.ra-task { font-family: var(--mono); }
.ra-empty {
  padding: 32px 20px; text-align: center;
  border-top: 1px solid var(--divider);
}
.ra-empty-icon { font-size: 28px; opacity: 0.5; }
.ra-empty-title { font-weight: 700; color: var(--text); margin-top: 8px; }
.ra-empty-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
/* Dương: thông báo gọn — 2 dòng ngắn, giảm chiều dài trang */
.ra-feed { max-height: 360px; }
.ra-row { padding: 8px 16px !important; }
.ra-body { gap: 2px !important; }
.ra-row-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-wrap: nowrap !important; }
.ra-change { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-wrap: nowrap !important; }
.ra-reason { display: none; }
.ra-row .ra-meta { font-size: 10px; }
.ra-more {
  padding: 10px 16px; font-size: 11.5px; color: var(--text-dim); text-align: center;
  border-top: 1px solid var(--divider);
  background: var(--bg-sunken, #fafafa);
}

/* ── Hoạt động gần đây trên máy hẹp (≤480px) — KHÔNG cắt mất chữ ──
   .ra-row-1 / .ra-change là FLEX container, mà text-overflow:ellipsis KHÔNG áp dụng cho
   flex item con → các chip (.ra-field, .ra-new, .ra-action) bị overflow:hidden cắt CỤT,
   không có dấu "…", cũng không cuộn ngang tới được → mất chữ hẳn. Đã đo ở 390px: 8 chỗ
   mất chữ (kể cả "Hiệu chỉnh" → "Hiệu chỉ"), ở 280px: 11 chỗ.
   Ý đồ "gọn 1 dòng" ở trên vẫn giữ cho desktop; máy hẹp cho xuống dòng để đọc đủ.
   Dòng vẫn có trần (69–124px) và .ra-feed max-height:360px cuộn dọc → không làm dài trang. */
@media (max-width: 480px) {
  .ra-row-1, .ra-change {
    white-space: normal !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  .ra-row-1 > *, .ra-change > * { min-width: 0; overflow-wrap: anywhere; }
}

/* ════════════════════════════════════════════════════════════════
 * MOBILE ENHANCEMENTS — Nâng cấp cảm ứng & bảng biểu (thêm mới)
 * Phạm vi: chỉ áp dụng cho màn hình ≤ 768px. Không đổi giao diện desktop.
 * Bổ sung cho lớp responsive sẵn có ở trên (sidebar off-canvas đã có).
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Touch targets ≥ 44px ── */
  .btn { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  .btn.sm { min-height: 38px; padding: 8px 12px; font-size: 12px; }
  input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    min-height: 44px; font-size: 16px; /* ≥16px: chặn iOS auto-zoom khi focus */
  }
  .filter-chip { min-height: 36px; display: inline-flex; align-items: center; }
  .nav-item { min-height: 44px; }
  .modal-close { min-width: 44px; min-height: 44px; }

  /* ── 2. Bảng cuộn ngang mượt ── */
  .modal-body, .card { -webkit-overflow-scrolling: touch; }
  .modal-body { overflow-x: auto; }
  .modal table, .card table { min-width: 560px; }

  /* ── 3. Freeze cột đầu khi vuốt ngang ── */
  .modal-body table th:first-child,
  .modal-body table td:first-child { position: sticky; left: 0; z-index: 2; }
  .modal-body table td:first-child { background: var(--card); }
  .modal-body table tr:hover td:first-child { background: var(--bg-hover); }
  .modal-body table th:first-child { z-index: 3; }

  /* ── 4. Modal ≈95vw / 95vh ── */
  .modal-overlay { padding: 12px; align-items: flex-start; }
  .modal { width: 95vw; max-width: 95vw; max-height: 95vh; border-radius: 12px; }
  .modal-tabs { top: 52px; overflow-x: auto; flex-wrap: nowrap; }
  .modal-tab { white-space: nowrap; }
  .modal-body { padding: 14px 14px; }

  /* ── 5. Lưới nhiều cột → 1 cột ── */
  .wizard-row, .fin-summary-grid, .pay-kpis, .detect-grid, .detect-totals,
  .boss-kpi-row, .boss-fin-summary, .prev-stats, .data-banner-cells,
  .gpe-row, .fin-bar-row { grid-template-columns: 1fr !important; }
  .kind-picker { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-strip { grid-template-columns: 1fr 1fr !important; }
  /* "1fr" = "minmax(auto,1fr)", đáy "auto" = min-content của ô KPI (~82px + padding) → dưới
     ~300px hai cột không co được nữa, lưới rộng hơn khung và ô KPI bị cắt (đo ở 240px: tràn
     24px, 2 cột lệch nhau 123/108 thay vì bằng nhau). min-width:0 cho ô co đúng bề ngang. */
  .kpi-strip .kpi { min-width: 0; }
  .constraint-item, .login-user-btn { grid-template-columns: 1fr !important; gap: 6px !important; }
}


/* ════════════════════════════════════════════════════════════════
 * RESPONSIVE TRUNG GIAN (tablet / laptop hẹp) — tránh che lấp cột phải
 * Dashboard có lưới [nội dung | cột phải 320px]. Ở bề ngang < 1280px,
 * cột phải bị tràn/che → xếp xuống dưới 1 cột.
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .dash-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .fin-summary-grid, .pay-kpis, .prev-stats, .data-banner-cells,
  .detect-grid, .detect-totals, .boss-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Vùng 769–1024px: sidebar thu về chế độ icon hẹp như mobile để chừa chỗ nội dung */
@media (min-width: 769px) and (max-width: 1024px) {
  .app { grid-template-columns: 64px 1fr; }
  .app[data-sidebar="collapsed"] { grid-template-columns: 64px 1fr; }
  /* Sidebar 64px ở dải này = CHỈ ICON: ẩn nhãn (giống mobile/collapsed) → KHÔNG tràn/chồng/cắt chữ.
     (Trước đây chỉ ép width 64px mà quên ẩn nhãn → nhãn tràn ra đè icon ở nửa màn hình 27".) */
  .sidebar { width: 64px; overflow: hidden; }
  .sidebar .nav-item > span:not(.ni-icon),
  .sidebar .nav-section .lbl,
  .sidebar .nav-item .badge,
  .sidebar .sidebar-brand > div:not(.logo),
  .sidebar .user-chip .nm,
  .sidebar .user-chip .rl,
  .sidebar .sidebar-foot > div:last-child { display: none !important; }
  .sidebar .nav-item { justify-content: center; padding: 8px; }
  .sidebar .sidebar-brand { justify-content: center; }
  .sidebar .user-chip { justify-content: center; }

  /* Dương 03/07/2026 — MỞ ĐƯỢC MENU ĐẦY ĐỦ ở dải 769–1024px (vd màn 27" chia đôi).
     TRƯỚC: dải này khoá cứng rail 64px cho CẢ expanded/collapsed → bấm gì cũng không mở
     được nav đầy đủ (bấm logo chỉ đổi data-sidebar mà cả 2 state đều = 64px; drawer mobnav
     lại chỉ có CSS ở ≤768px). NAY: rail 64px vẫn là MẶC ĐỊNH (nội dung rộng), nhưng bấm ☰
     ở tiêu đề (hoặc logo Ban) mở DRAWER PHỦ đầy đủ nhãn — giống mobile. */
  .mobnav-burger { display: inline-flex; font-size: 18px; line-height: 1; color: var(--primary); cursor: pointer; }
  .app.mobnav-open .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 200; width: 252px !important; max-width: 84vw; overflow: auto !important; visibility: visible !important; box-shadow: 4px 0 24px rgba(0, 0, 0, .18); }
  .app.mobnav-open .sidebar .nav-section .lbl,
  .app.mobnav-open .sidebar .sidebar-brand > div:not(.logo),
  .app.mobnav-open .sidebar .user-chip .nm,
  .app.mobnav-open .sidebar .user-chip .rl,
  .app.mobnav-open .sidebar .sidebar-foot > div:last-child { display: block !important; }
  .app.mobnav-open .sidebar .nav-item > span:not(.ni-icon) { display: flex !important; }
  .app.mobnav-open .sidebar .nav-item .badge { display: inline-flex !important; align-items: center; width: auto !important; flex: 0 0 auto; }
  .app.mobnav-open .sidebar .nav-item { justify-content: flex-start; padding: 8px 12px; }
  .app.mobnav-open .sidebar .sidebar-brand { justify-content: flex-start; }
  .app.mobnav-open .sidebar .user-chip { justify-content: flex-start; }
  .app.mobnav-open::before { content: ""; position: fixed; inset: 0; z-index: 150; background: rgba(15, 23, 42, .42); }
}

/* ══ Drawer trượt MƯỢT (Dương 03/07/2026).
   • ≤768px (điện thoại): dùng TRANSITION 2 CHIỀU (xem @media max-width:768px) — sidebar LUÔN là panel
     cố định, translateX(-100%)↔0 → ĐÓNG/MỞ đều mượt (giống chuông thông báo .ntf-panel).
   • 769–1024px: sidebar vừa đổi sang position:fixed khi mở nên transition thiếu giá trị "from" → dùng
     ANIMATION (keyframes) cho lần MỞ (đóng tức thì — chấp nhận được ở dải này). ══ */
@keyframes qlda-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes qlda-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 769px) and (max-width: 1024px) {
  .app.mobnav-open .sidebar { animation: qlda-drawer-in .24s cubic-bezier(.32, .72, 0, 1); will-change: transform; }
  .app.mobnav-open::before { animation: qlda-backdrop-in .24s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .app.mobnav-open .sidebar { animation: none !important; transition: none !important; }
  .app.mobnav-open::before { animation: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
 * ẨN thanh trạng thái nguồn dữ liệu ("Dữ liệu máy chủ (SQL) · … ·
 * Đồng bộ ngay / Load Excel local / Mở trên Drive / Check sync").
 * Theo yêu cầu: KHÔNG bao giờ hiện trên trang. Đồng bộ vẫn chạy nền.
 * ════════════════════════════════════════════════════════════ */
.source-bar { display: none !important; }
.sync-diag-btn { display: none !important; }

/* ════════════════════════════════════════════════════════════════
 * GĐ2 — Responsive trang chính ≤768px (điện thoại).
 *  - Cột phải (Ghi chú + Nhật ký) bỏ sticky + xuống dưới, 1 cột 100%.
 *  - Mọi card thân dưới chiếm full width, không tràn ngang.
 *  - Bảng tiến độ/tài chính cuộn ngang trong card.
 *  - Nội dung ghi chú/nhật ký xuống dòng, không vỡ layout.
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dash-grid > .dash-right {
    position: static !important;
    top: auto !important;
    align-self: stretch !important;
    width: 100% !important;
  }
  .dash-grid > .col { width: 100%; min-width: 0; }
  .dash-grid .card { width: 100%; box-sizing: border-box; }

  .dash-grid .card table { min-width: 560px; }
  #ganttContainer { overflow-x: auto; }

  .dash-right .card, .dash-right .card * { min-width: 0; }
  .dash-right .card { word-wrap: break-word; overflow-wrap: break-word; }
}

.modal.modal-xl {
  max-width: 98vw;
  width: 98vw;
  height: 96vh;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
}
.modal.modal-xl .modal-body {
  flex: 1;
  overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════
 * MÀN HÌNH RẤT HẸP (≤480px) — chống tràn & mất chữ
 * Đo trên máy thật 280px (Galaxy Fold gập) và 320px (iPhone SE).
 * Các trang này đặt kích thước CỨNG bằng inline style trong React, nên chỉ
 * ghi đè được bằng !important. Từ 390px trở lên KHÔNG bị ảnh hưởng (đã đo:
 * 0 lỗi tràn), desktop cũng không đụng tới vì nằm trong @media.
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Trang "Công việc và ghi chú" — 3 cột đặt min-width cứng 200/300/320px
     bằng inline style → không co được, tràn khỏi máy ≤320px (đo ở 280px: 16 chỗ
     tràn, chỗ nặng nhất 70px). Cho các cột co theo bề ngang thật; flex-basis sẵn
     có sẽ tự đẩy chúng xuống thành 1 cột. ── */
  .content [style*="min-width: 320px"],
  .content [style*="min-width: 300px"],
  .content [style*="min-width: 200px"] { min-width: 0 !important; }

  /* ── Hàng lọc "📅 từ ngày → đến ngày": inline-flex + nowrap, 2 ô <input type=date>
     rộng nội tại ~120px → tổng 311px, tràn máy ≤320px. Cho xuống hàng, ô ngày vẫn
     giữ ≥118px để đọc đủ dd/mm/yyyy. ── */
  .content div:has(> input[type="date"]) { flex-wrap: wrap !important; max-width: 100%; }
  .content input[type="date"] { min-width: 0; flex: 1 1 118px; }

  /* ── Thanh công cụ "Lịch tuần": flex nowrap (inline style) chứa tiêu đề + bộ chọn
     Năm/Tháng/Tuần/Lịch biểu + 4 nút → cần ~586px nhưng chỉ có 236px. Hậu quả: bộ chọn
     bị bóp còn 2px (KHÔNG bấm được, coi như mất chức năng) và các nút tràn khỏi màn hình.
     Cho thanh xuống hàng; bộ chọn không bị bóp mà tự xuống hàng trong khung. ── */
  .content div[style*="display: flex"]:has(> .btn.sm) { flex-wrap: wrap !important; }
  .content div[style*="inline-flex"]:has(> .btn.sm) {
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* ── Hàng ghi chú: `justify-content: space-between` + nowrap, cụm nút thao tác
     (.gc-note-actions, 64px) giành mất nửa chỗ → sau khi bỏ min-width:200px ở trên,
     ô nội dung ghi chú co còn 71px (≈10 ký tự/dòng, cao 637px — một cột chữ dựng
     đứng). Cho xuống hàng để ghi chú chiếm trọn bề ngang (135px, ≈19 ký tự/dòng,
     cao 382px). overflow-wrap để mã văn bản dài kiểu "3510/UBND-DA" không tràn hộp. ── */
  .content div:has(> .gc-note-actions) { flex-wrap: wrap !important; }
  .content div:has(> .gc-note-actions) > [style*="min-width: 200px"] { flex: 1 1 100% !important; }
  .gc-note-actions { margin-left: auto; }
  .content [style*="min-width: 200px"] { overflow-wrap: anywhere; }
}

/* ════════════════════════════════════════════════════════════════
 * LƯỚI LỊCH TUẦN — chỉ dưới 341px mới mất ngày, KHÔNG đụng máy 360/390px
 *
 * Lưới dùng inline `grid-template-columns: 50px repeat(7, 1fr)`. Lại đúng bẫy
 * "1fr" = "minmax(auto,1fr)": đáy auto = min-content ô ngày (~35px) nên 7 cột không
 * co dưới 35px → lưới cần 50 + 7×35 = 295px. Khung lịch = bề ngang máy − 46px.
 * Vậy CHỈ khi máy < 341px thì lưới mới rộng hơn khung, và .card.flush có
 * `overflow: hidden` (inline) nên phần thừa bị CẮT CỨNG, không cuộn tới được:
 * đo ở 280px → "Thứ 7" hiện 24%, "CN" hiện 0% (mất hẳn 2 ngày cuối tuần).
 *
 * Ngưỡng 340px là CỐ Ý. Ở 360/390px lưới vừa khít (đã đo: cả 7 ngày hiện 100% ở cột
 * 42px) → KHÔNG áp dụng, để giữ nguyên cái nhìn tổng thể cả tuần; ép cuộn ngang ở đó
 * là làm hỏng trải nghiệm đang tốt.
 *
 * Dưới 341px: cột ngày tối thiểu 88px (chip sự kiện ~83px — đọc được, thay vì 21px
 * không đọc nổi) + cho card cuộn ngang để vuốt tới Thứ 7/CN. Header và phần giờ nằm
 * CHUNG một khung cuộn nên luôn khớp cột (đã kiểm ở scrollLeft 0/100/250/hết).
 * KHÔNG dùng `width: max-content` cho lưới: header sẽ co theo max-content thành 362px
 * trong khi phần thân giữ 234px → LỆCH CỘT. Để ô con tràn khỏi hộp lưới mới khớp.
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 340px) {
  .card.flush:has(div[style*="repeat(7, 1fr)"]) { overflow-x: auto !important; }
  .card.flush div[style*="repeat(7, 1fr)"] {
    grid-template-columns: 44px repeat(7, minmax(88px, 1fr)) !important;
    max-width: none !important;
  }
}