:root {
  --surface-0: #f4f3ef;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --text-primary: #1c1c1a;
  --text-secondary: #5f5e5a;
  --text-muted: #6b6a64; /* 07/10/2026: đậm hơn (#8a8983 cũ tương phản ~3,5:1, dưới chuẩn 4,5:1) */
  --border: #e3e1d9;
  --card-border: #e5e2dc;
  --border-strong: #c9c7bd;
  --accent: #d9720c;
  --accent-bg: #fdead1;
  --accent-text: #8a4a08;
  --navy: #16325c;
  --navy-2: #1e4b8a;
  --navy-soft: #eef3fa;
  --danger: #a32d2d;
  --radius: 8px;
  --radius-lg: 12px;
  /* Container chuẩn dùng chung cho thanh menu (.tabbar) và nội dung mọi
     tab (.content) — CODEX "CỐ ĐỊNH KHUNG TOÀN BỘ APP" 12/09/2026: đổi
     giá trị ở đây là đổi cho CẢ HAI, không sợ 2 nơi lệch nhau. */
  --app-max-width: 1320px;
  --app-side-padding: 16px;
}

* { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--surface-0);
  color: var(--text-primary);
  overflow-x: hidden;
  overflow-y: scroll;
}

h1, h2, h3 { font-weight: 500; margin: 0 0 0.5rem; }
h3 { font-size: 16px; font-weight: 700; }

label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 10px 0 4px;
}

input, select, textarea, button {
  font-family: inherit;
  font-size: 14px;
}

input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text-primary);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

button {
  cursor: pointer;
  border-radius: var(--radius);
  padding: 8px 14px;
  border: 0.5px solid var(--border-strong);
  background: var(--surface-1);
}
button:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
}
.btn-primary.full { width: 100%; margin-top: 16px; }
.full { width: 100%; box-sizing: border-box; }

.btn-primary-sm {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.btn-ghost {
  background: transparent;
  border: 0.5px solid var(--border-strong);
}

.btn-danger {
  background: transparent;
  border: 0.5px solid var(--danger);
  color: var(--danger);
}
.btn-danger.full { width: 100%; }
.btn-danger:hover { background: #fcebeb; }

.error-msg {
  background: #fcebeb;
  color: var(--danger);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 10px;
}

/* ---------- Banner dùng thử ---------- */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--accent-bg);
  color: var(--accent-text);
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
  text-align: center;
}

/* ---------- Auth screen ---------- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.auth-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 14px;
}
.auth-switch a { color: var(--accent); text-decoration: none; }

/* ---------- Auth screen: bố cục 2 cột (panel thương hiệu + form) ---------- */
.auth-shell {
  width: 100%;
  max-width: 860px;
  min-height: 520px;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(28,28,26,.04), 0 16px 40px -12px rgba(28,28,26,.18);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
}

.auth-brand-panel {
  position: relative;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 55%, #2a5ba3 100%);
  color: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-brand-panel::before {
  content: "";
  position: absolute;
  inset: -60px -60px auto auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(217,114,12,.35), transparent 70%);
  border-radius: 50%;
}
.auth-brand-panel::after {
  content: "";
  position: absolute;
  inset: auto auto -80px -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  border-radius: 50%;
}
.auth-brand-top { position: relative; z-index: 1; }
.auth-brand-logo {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--accent), #f0973c);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(217,114,12,.4);
  margin-bottom: 22px;
}
.auth-brand-logo svg { width: 24px; height: 24px; }
.auth-brand-panel h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 10px;
  line-height: 1.25;
}
.auth-brand-lead {
  font-size: 13.5px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}
.auth-brand-features {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 14px;
  margin: 30px 0;
}
.auth-feature-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.92);
}
.auth-feature-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
}
.auth-feature-icon svg { width: 15px; height: 15px; stroke: #fff; }
.auth-brand-quote {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 16px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.auth-form-panel {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.auth-form-panel .auth-sub { margin: 0 0 22px; }

.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap svg {
  position: absolute; left: 12px;
  width: 16px; height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.auth-input-wrap input {
  padding-left: 38px;
  border-radius: 10px;
  background: var(--surface-0);
}
.auth-input-wrap input:focus {
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.auth-form-panel .btn-primary.full {
  background: linear-gradient(135deg, var(--accent), #c8650a);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(217,114,12,.55);
}
.auth-form-panel .btn-primary.full:hover { box-shadow: 0 10px 22px -6px rgba(217,114,12,.65); }

.auth-trust-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.auth-trust-row svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

/* Điện thoại: gập về 1 cột, ẩn bớt phần giới thiệu để form là trọng tâm */
@media (max-width: 720px) {
  .auth-screen { padding: 0; align-items: flex-start; }
  .auth-shell {
    grid-template-columns: 1fr;
    max-width: 480px;
    min-height: 0;
    margin: 32px auto 24px;
    border-radius: 14px;
  }
  .auth-brand-panel { padding: 26px 24px 22px; }
  .auth-brand-panel::after { display: none; }
  .auth-brand-features { display: none; }
  .auth-brand-quote { display: none; }
  .auth-brand-panel h1 { font-size: 19px; }
  .auth-brand-lead { font-size: 12.5px; }
  .auth-form-panel { padding: 26px 24px 30px; }
}

/* ---------- App shell ---------- */
.app-screen { min-height: 100vh; }

/* Thanh tiêu đề: nền xanh navy đậm, tách hẳn khỏi vùng nội dung; tên dự án
   đang xem in đậm cỡ lớn để không bao giờ nhầm đang đứng ở dự án nào. */
.topbar {
  background: var(--navy);
  color: #fff;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 11px 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 10px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.tb-icon { width: 15px; height: 15px; flex-shrink: 0; }

.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}
.topbar-btn:hover { background: rgba(255, 255, 255, 0.2); }
.topbar-btn-primary { background: var(--accent); border-color: var(--accent); }
.topbar-btn-primary:hover { background: #c4650a; }

/* Nút .btn-ghost dùng chung (màn hình "Tổng quan các dự án" cũng nằm trong
   .topbar) — trên nền navy phải đổi sang viền/chữ trắng mới đọc được. */
.topbar .btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.topbar .btn-ghost:hover { background: rgba(255, 255, 255, 0.2); }

.topbar-divider { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.22); }
.topbar-actions { display: flex; align-items: center; gap: 7px; }

/* Khối tên dự án. Ô <select> thật được đặt chồng trong suốt lên trên khối chữ
   (opacity:0) nên vẫn bấm/chọn được y như cũ — kể cả menu chọn native trên
   điện thoại — mà giao diện hiển thị là dòng chữ to bên dưới. */
.topbar-project { position: relative; min-width: 0; max-width: 320px; }
.topbar-project-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}
.topbar-project-pick { display: flex; align-items: center; gap: 7px; margin-top: 1px; }
.topbar-project-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-project-pick .tb-icon { color: rgba(255, 255, 255, 0.75); }
.topbar-project-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
}

.topbar-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}
.topbar-user { display: inline-flex; align-items: center; gap: 7px; }
.topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  text-transform: uppercase;
}
.user-email { font-size: 12px; color: rgba(255, 255, 255, 0.8); }

@media (max-width: 860px) {
  .topbar-inner { padding: 9px 12px; gap: 8px; }
  .topbar-clock { display: none; }
  .user-email { display: none; }
  .topbar-project { max-width: 190px; }
  .topbar-project-name { font-size: 14.5px; }
}
@media (max-width: 560px) {
  /* Trên điện thoại chỉ giữ icon cho các nút để dành chỗ cho tên dự án */
  .topbar-btn-text { display: none; }
  .topbar-btn { padding: 8px 10px; }
  .topbar-divider { display: none; }
}

.password-field-wrap { position: relative; }
.password-field-wrap input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.password-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
}
.password-toggle-btn svg { width: 18px; height: 18px; }

/* Khối header + thanh tab của màn hình chi tiết dự án: dính (sticky) lại ở đầu trang khi cuộn xuống, để luôn thấy tên dự án + chuyển tab nhanh mà không cần cuộn ngược lên. */
.app-topnav-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Thanh tab: nền trắng, mỗi tab có icon; tab đang chọn gạch chân cam đậm. */
.tabbar {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  width: calc(100% - 2 * var(--app-side-padding));
  /* 23/09/2026: thanh menu rộng ĐÚNG bằng vùng nội dung bên dưới (không tràn 2 bên). */
  max-width: calc(var(--app-max-width) - 2 * var(--app-side-padding));
  margin: 0 auto;
  padding: 0;
  min-height: 68px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
}
.tabbar::-webkit-scrollbar { height: 0; }
@media (min-width: 1100px) {
  /* "safe center": căn giữa khi các tab vừa đủ chỗ, nhưng khi tổng bề rộng
     tab vượt màn hình thì tự quay về căn trái — nếu dùng "center" thường,
     phần tràn bị cắt cả 2 đầu và không cuộn về tab đầu tiên được. */
  .tabbar { justify-content: flex-start; justify-content: safe center; }
}
.tab-btn {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 6px 7px;
  border-radius: 8px;
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: 500;
  font-size: 13px;
  flex-shrink: 0;
  cursor: pointer;
}
.tab-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; flex-shrink: 0; font-style: normal; }
.tab-label { white-space: nowrap; text-align: center; line-height: 1.2; }
.tab-btn:hover { color: var(--text-primary); background: #faf9f6; }
/* CODEX (22/09/2026, "CHINH TAB ACTIVE TREN THANH MENU"): truoc day nen cam
   nhat cua tab active phu theo chieu cao DAY DU cua .tabbar (do .tab-btn ke
   thua align-items:stretch tu .tabbar cha) - nhin nhu 1 MANG cam nhat cao
   sat toan thanh menu, khong giong 1 cai nut/tab gon gang. Sua bang
   align-self: center o .tab-btn (bo stretch, chi cao vua du noi dung +
   padding) - active gio la 1 pill bo tron DU 4 goc, gon quanh icon+chu,
   khong doi min-height/kich thuoc cua .tabbar. Dong thoi doi nen active tu
   cam NHAT (--accent-bg) sang cam DAM (--accent, #d9720c) + chu/icon trang
   de tuong phan ro hon han (chu nau cam tren nen cam nhat truoc day tuong
   phan thap, kho nhan ra khi luot nhanh). */
.tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-bottom-color: transparent;
  border-radius: 8px;
  font-weight: 700;
}
.tab-btn.active .tab-icon { color: #fff; }
.tab-btn-admin { color: var(--navy-2); }
.tab-btn-admin .tab-icon { color: var(--navy-2); }

/* Huy hiệu số việc chưa xử lý trên tab "Vấn đề cần xử lý" */
.tab-badge {
  background: #fbe2e2;
  color: #9c1f1f;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
  line-height: 1.5;
}

.content { width: 100%; box-sizing: border-box; padding: 16px var(--app-side-padding); max-width: var(--app-max-width); margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.card {
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.tagline-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface-1);
  border: 0.5px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  margin-bottom: 16px;
}
.tagline-bar .tagline-main { font-size: 13px; font-weight: 500; margin: 0; }
.tagline-bar .tagline-sub { font-size: 12px; color: var(--text-muted); margin: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .section-header { flex-direction: column; align-items: stretch; }
  .section-header > div { width: 100%; }
  .section-header > div input[type="text"] { max-width: none !important; flex: 1 1 100%; }
  .section-header > div .btn-primary, .section-header > div .btn-ghost { flex: 1; }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.metric-grid-3 { grid-template-columns: repeat(3, 1fr); }
.metric-grid-2 { grid-template-columns: repeat(2, 1fr); }
.metric-grid-2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .metric-grid, .metric-grid-3, .metric-grid-2x2 { grid-template-columns: repeat(2, 1fr); }
  .metric-grid-2 { grid-template-columns: 1fr; }
}
.metric-card {
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.metric-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.metric-value { font-size: 19px; font-weight: 500; margin-top: 4px; }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.data-table th, .data-table td { text-align: left; padding: 9px 10px; border-top: 0.5px solid var(--border); }
.data-table thead th { border-top: none; color: var(--accent-text); font-weight: 500; background: var(--accent-bg); text-align: center; }
.data-table td.num, .data-table th.num { text-align: right; white-space: nowrap; }
.data-table td.center, .data-table th.center { text-align: center; }
.data-table tfoot td { font-weight: 500; color: var(--accent-text); background: var(--accent-bg); border-top: 0.5px solid var(--accent); }
.data-table td.nowrap { white-space: nowrap; }

/* ================== Bộ lọc bảng Nhật ký (12/09/2026) — CODEX "CHỈNH TAB
   NHẬT KÝ". Class riêng .log-filter-bar, chỉ dùng ở #tab-logs, không đụng
   .inline-form/.section-header đang dùng chung cho các tab khác. ================== */
.log-filter-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 12px;
  align-items: end;
}
.log-filter-bar label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
@media (max-width: 1180px) { .log-filter-bar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .log-filter-bar { grid-template-columns: repeat(2, 1fr); } }

.progress-bar { background: var(--surface-0); border-radius: 6px; height: 6px; overflow: hidden; min-width: 60px; }
.progress-fill { height: 100%; background: var(--accent); }

/* ---- Tổng quan: KPI có icon, cảnh báo, mốc tiến độ, biểu đồ tròn ---- */
.metric-card-accent { position: relative; overflow: hidden; padding-left: 14px; }
.metric-card-accent::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--m-accent, var(--accent));
}
.metric-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.metric-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: var(--m-accent-bg, var(--accent-bg));
  flex-shrink: 0;
}
.metric-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.metric-sub b { color: var(--text-secondary); font-weight: 600; }

/* ---- 4 ô tổng hợp đầu trang Vật tư (thay banner "Tổng giá trị dự toán"
   cũ) — CODEX "TỐI ƯU TRANG VẬT TƯ". Giá trị dự toán/Đã sử dụng/Còn lại
   dùng cam nhấn như phần còn lại của app; riêng "Sắp hết" dùng đỏ cảnh báo
   (--danger), đúng quy ước "cam = bình thường, đỏ = cảnh báo" áp dụng cho
   cả progress bar bên dưới (xem .material-usage-label/.progress-fill-*). ---- */
.materials-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 12px;
}
@media (max-width: 820px) { .materials-summary-grid { grid-template-columns: repeat(2, 1fr); } }
.materials-summary-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px 11px 12px;
  min-width: 0;
}
.materials-summary-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent);
}
.materials-summary-card.msc-warn::before { background: var(--danger); }
.msc-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--accent-bg);
}
.materials-summary-card.msc-warn .msc-icon { background: var(--danger-bg, #fcebeb); }
.msc-text { min-width: 0; }
.msc-label {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.2px; white-space: nowrap;
}
.msc-value {
  font-size: 18px; font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.2px; margin-top: 1px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.materials-summary-card.msc-warn .msc-value { color: var(--danger); }
@media (max-width: 480px) { .msc-value { font-size: 15.5px; } }

/* ---- Khối hướng dẫn thu gọn (click để mở), dùng thẻ <details> gốc,
   không cần JS — CODEX "TINH GỌN TAB VẬT TƯ" 12/09/2026. Hiện chỉ áp dụng
   cho #tab-materials; component viết chung để tái dùng cho tab khác sau
   này nếu cần, không tự động áp dụng cho các đoạn hướng dẫn khác. */
.tab-help { margin: -6px 0 12px; }
.tab-help summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
}
.tab-help summary::-webkit-details-marker { display: none; }
.tab-help summary::after {
  content: "\25B8";
  font-size: 11px;
  color: var(--text-muted);
  transition: transform .15s;
  margin-left: 2px;
}
.tab-help[open] summary::after { transform: rotate(90deg); }
.tab-help p {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  margin: 8px 2px 0;
}

/* ---- Tab Vật tư: 2 rule nền trắng + header xám riêng của đợt "TINH GỌN
   TAB VẬT TƯ" (12/09/2026) đã BỊ BỎ ở đợt "ĐỒNG BỘ NỀN TOÀN BỘ CÁC TAB"
   (13/09/2026) — anh Nhật yêu cầu KHÔNG tab nào được tự dùng nền/header
   khác biệt, kể cả Vật tư. Nền trang + header bảng của tab này giờ dùng
   lại ĐÚNG rule chung như 11 tab khác (xem khối "ĐỒNG BỘ NỀN TOÀN BỘ CÁC
   TAB" bên dưới cuối file). Phần còn lại của đợt "TINH GỌN TAB VẬT TƯ"
   (đổi tên cột, khối hướng dẫn thu gọn .tab-help, tên nhãn banner) KHÔNG
   đổi, vẫn giữ nguyên. */

/* ================== CODEX "TỐI ƯU TRANG VẬT TƯ" (12/09/2026) — thu gọn
   phần đầu trang, thay banner tổng bằng 4 ô (xem .materials-summary-grid
   phía trên), thêm bộ lọc trên bảng, đồng bộ chiều cao dòng + tên đậm +
   Mã hiệu/ĐVT căn giữa (canh giữa qua class "center" có sẵn ở <th>/<td>,
   không cần CSS riêng). Chỉ áp dụng cho #tab-materials, không đụng tab
   khác. ================== */
#tab-materials .tab-title-row { margin-bottom: 12px; }
#materials-search { max-width: none; }

.materials-filter-bar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr;
  gap: 10px;
  margin: 0 0 12px;
  align-items: end;
}
.materials-filter-bar label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.materials-filter-bar .toggle-group { margin-top: 0; }
.materials-filter-bar .toggle-btn { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }
@media (max-width: 760px) { .materials-filter-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .materials-filter-bar { grid-template-columns: 1fr; } }

/* Chiều cao dòng đồng đều: canh giữa mọi ô theo chiều dọc thay vì mặc định
   canh trên — nội dung cao thấp khác nhau (input đơn giá, thanh %,
   nút Sửa/Xoá) vẫn nằm giữa dòng, không lệch nhau giữa các dòng. */
#tab-materials .data-table td { vertical-align: middle; }
.material-name-cell { font-weight: 600; }

/* Ghi chú: mặc định chỉ hiển thị chữ (hoặc dấu — nếu trống) kèm 1 link nhỏ
   "Sửa" — bấm vào mới đổi ô đó thành ô nhập, lưu xong tự quay lại dạng chữ.
   Khác hành vi trước đây (luôn là ô nhập sẵn) — đúng yêu cầu "chỉ chuyển
   thành input khi bấm Sửa". */
.material-note-cell { white-space: normal; }
.material-note-empty { color: var(--text-muted); }
.material-note-edit-link {
  margin-left: 8px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.material-note-edit-link:hover { color: var(--accent-text); }

/* % đã dùng: cam (mặc định, dùng .progress-fill gốc) = bình thường; đỏ =
   gần hết/đã hết. "Đã hết" hiện rõ chữ "100% / Đã hết" thay vì chỉ số %. */
.material-usage-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.material-usage-label.is-near { color: var(--danger); font-weight: 700; }
.material-usage-label.is-out { color: var(--danger); font-weight: 800; }
.progress-fill-near, .progress-fill-out { background: var(--danger); }

.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 760px) { .insight-grid { grid-template-columns: 1fr; } }
/* CODEX "NÉN TRANG TỔNG QUAN" (22/09/2026): giảm padding cảnh báo — nội
   dung cảnh báo tiến độ (insight-schedule) giờ chỉ còn 2 dòng ngắn thay vì
   1 đoạn văn dài, nên card đã tự thấp hơn nhiều; giảm thêm padding cho gọn
   hẳn, không đụng font-size (insight-title/insight-text giữ nguyên). */
.insight-card {
  border-radius: var(--radius); padding: 9px 14px;
  display: flex; gap: 10px;
  border: 0.5px solid var(--border);
}
.insight-card.insight-warning { background: #fff8ea; border-color: #f3dfa8; }
.insight-card.insight-info { background: #eef5fc; border-color: #c9dff3; }
.insight-icon { font-size: 18px; line-height: 1.1; }
.insight-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; color: var(--text-primary); }
.insight-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.insight-text b { color: var(--text-primary); }

/* ================== Tổng quan (Dashboard) — nâng cấp bố cục 4 hàng
   (11/09/2026). Mọi override chữ/viền ở đây chỉ áp dụng bên trong
   #tab-dashboard để không ảnh hưởng các tab khác dùng chung .card/
   .metric-card/.data-table. ================== */
.metric-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 1180px) { .metric-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .metric-grid-5 { grid-template-columns: repeat(2, 1fr); } }
/* Giãn khoảng cách trong 5 KPI đầu trang cho thoáng hơn (12/09/2026) —
   CHỈ áp dụng cho .metric-card trong .metric-grid-5, không đụng
   .metric-card ở các khối khác (Tiến độ thời gian, các tab khác...). */
/* CODEX "NÉN TRANG TỔNG QUAN" (22/09/2026): giảm padding TRÊN/DƯỚI + các
   khoảng cách dọc bên trong 5 KPI đầu trang ~20-25% chiều cao card, KHÔNG
   đụng font-size (giữ nguyên .metric-value/.metric-label/.metric-sub) — 5
   card vẫn cao bằng nhau nhờ .metric-grid-5 đã có sẵn align-items:stretch,
   không cần sửa thêm. */
.metric-grid-5 .metric-card { padding: 10px 20px; }
.metric-grid-5 .metric-top { margin-bottom: 4px; }
.metric-grid-5 .metric-sub { margin-top: 4px; }
#tab-dashboard .metric-grid-2x2 .metric-card,
#tab-dashboard .metric-grid-3 .metric-card,
#tab-dashboard .metric-grid-2 .metric-card {
  padding: 15px;
}

.dash-row-progress { display: grid; grid-template-columns: 1fr 1.2fr 0.9fr; gap: 16px; margin-bottom: 14px; align-items: stretch; }
/* align-items:stretch (khai báo ở trên) đã tự làm 3 card "Tiến độ thời
   gian" | "Tiến độ khối lượng" | "Vấn đề cần xử lý" LUÔN cao bằng nhau
   (bằng card cao nhất trong hàng) — không cần thêm CSS riêng cho việc này.
   CODEX "NÉN TRANG TỔNG QUAN" (22/09/2026): giảm padding + margin tiêu đề
   của riêng 3 card này để bớt khoảng trắng, không đụng font-size. */
.dash-row-progress > .card { margin-bottom: 0; padding: 10px 16px 8px; }
.dash-row-progress > .card h3 { margin: 0 0 6px; }
/* 23/09/2026: nén chiều cao hàng 3 khối tiến độ / vấn đề */
.dash-row-progress .timeline-track { margin: 8px 0 4px; }
.dash-row-progress #work-progress-body .metric-sub { margin-top: 4px !important; }
.dash-row-progress #issue-summary-card .section-header { margin-bottom: 6px !important; }
.dash-row-progress #issue-summary-card .issue-empty, .dash-row-progress #issue-summary-card [class*="empty"] { padding: 7px 12px; }
@media (max-width: 1180px) { .dash-row-progress { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .dash-row-progress { grid-template-columns: 1fr; } }

.dash-row-cost { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.dash-row-cost > .card { margin-bottom: 0; }
@media (max-width: 1180px) { .dash-row-cost { grid-template-columns: 1fr; } }

.dash-2col-b { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-2col-b > .card { margin-bottom: 0; }
@media (max-width: 860px) { .dash-2col-b { grid-template-columns: 1fr; } }

/* Card trắng bo góc nhẹ hơn + viền mảnh/nhạt hơn, chữ số liệu to hơn — chỉ
   trong phạm vi trang Tổng quan. */
#tab-dashboard .card {
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(30,25,10,.05);
  border-radius: var(--radius);
}
#tab-dashboard .metric-card {
  border-color: var(--border);
  border-radius: var(--radius);
}
#tab-dashboard .card h3 { font-size: 16.5px; }
#tab-dashboard .metric-value { font-size: 22px; font-weight: 700; white-space: nowrap; margin-top: 8px; }
/* CODEX "NÉN TRANG TỔNG QUAN" (22/09/2026): độ đặc trưng cao hơn rule trên
   (thêm .metric-grid-5) để ghi đè riêng margin-top cho 5 KPI đầu trang —
   không đụng font-size, chỉ giảm khoảng cách phía trên số liệu. */
#tab-dashboard .metric-grid-5 .metric-value { margin-top: 4px; }
#tab-dashboard .metric-label { font-size: 13px; }
#tab-dashboard .metric-sub { font-size: 13px; }
/* CODEX "LÀM ĐẬM 5 KPI TỔNG QUAN" (22/09/2026): chỉ riêng 5 KPI đầu
   Dashboard (.metric-grid-5 bên trong #tab-dashboard — KHÔNG đụng
   .metric-grid-5 dùng lại ở Nhật ký, KHÔNG đụng .metric-label của
   #debt-card vì đã có rule riêng cụ thể hơn từ trước). Icon container
   26px->31px + icon 13px->19px cần bù trừ padding/margin để 5 card KHÔNG
   đổi chiều cao (xem mục 6, bài học "tăng icon phải bù padding"). */
#tab-dashboard .metric-grid-5 .metric-card { padding: 8px 20px; }
#tab-dashboard .metric-grid-5 .metric-top { margin-bottom: 3px; }
#tab-dashboard .metric-grid-5 .metric-icon {
  width: 31px; height: 31px;
  border-radius: 8px;
  font-size: 19px;
  filter: saturate(1.4);
}
#tab-dashboard .metric-grid-5 .metric-label {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}
#tab-dashboard .data-table { font-size: 13px; min-width: 0; table-layout: fixed; }
#tab-dashboard .data-table th, #tab-dashboard .data-table td { padding: 6px 6px; overflow-wrap: break-word; }
#tab-dashboard .data-table td.num, #tab-dashboard .data-table th.num {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
#tab-dashboard .data-table th:first-child, #tab-dashboard .data-table td:first-child { width: 31%; white-space: nowrap; }
@media (min-width: 641px) {
  #tab-dashboard #cost-summary-card .data-table th:nth-child(2) { width: 12%; }
  #tab-dashboard #cost-summary-card .data-table th:nth-child(3),
  #tab-dashboard #cost-summary-card .data-table th:nth-child(4),
  #tab-dashboard #cost-summary-card .data-table th:nth-child(5) { width: 19%; }
  #tab-dashboard #cost-summary-card .cat-icon { margin-right: 6px; }
}
/* 23/09/2026: tên hạng mục chi phí luôn nằm 1 dòng (không nhảy dòng "Máy thi / công"). */
@media (min-width: 641px) { #tab-dashboard .data-table td:first-child .cat-name { white-space: nowrap; } }
#tab-dashboard .data-table .cat-name { font-size: 14.5px; font-weight: 600; color: #1F2937; }
#tab-dashboard .data-table tbody td.num { font-weight: 600; }
#tab-dashboard .data-table tfoot td { font-weight: 700; }
#cost-summary-card h3 { font-size: 17.5px; }

/* Header rút gọn trên mobile: "Lũy kế tháng" -> "Tháng", "Lũy kế dự án" ->
   "Dự án", "% giá trị HĐ" -> "% HĐ" (nội dung đã có sẵn cả 2 bản trong
   HTML, chỉ ẩn/hiện bằng CSS theo độ rộng màn hình — không đổi dữ liệu). */
#tab-dashboard .data-table .th-short { display: none; }

/* ---- Bảng "Tổng hợp chi phí theo hạng mục" trên mobile (12/09/2026) ----
   Ưu tiên: số tiền/% KHÔNG BAO GIỜ xuống dòng (nowrap tuyệt đối, không bị
   overflow-wrap phá vỡ giữa chừng); cột "Hạng mục" được phép xuống tối đa
   2 dòng; nếu vẫn không đủ chỗ thì cho bảng cuộn ngang nhẹ (đã có sẵn
   overflow-x:auto từ .table-wrap gốc) thay vì ép số xuống dòng. */
@media (max-width: 640px) {
  #tab-dashboard .data-table { font-size: 12px; table-layout: auto; min-width: 0; }
  #tab-dashboard .data-table th, #tab-dashboard .data-table td { padding: 6px 4px; }
  #tab-dashboard .data-table td.num, #tab-dashboard .data-table th.num {
    font-size: 11px;
    text-align: right;
  }
  #tab-dashboard .data-table th:first-child, #tab-dashboard .data-table td:first-child {
    width: 104px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Tên hạng mục tối đa 2 dòng, dư thì "...", đặt line-clamp trên 1 span
     RIÊNG bên trong ô (không đặt thẳng lên <td>) vì <td> mặc định
     display:table-cell, xung đột với display:-webkit-box cần cho
     line-clamp -> đặt lên <td> trực tiếp sẽ không hoạt động đúng. */
  #tab-dashboard .data-table td:first-child .cat-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  #tab-dashboard .data-table .th-full { display: none; }
  #tab-dashboard .data-table .th-short { display: inline; }
  #tab-dashboard .table-wrap { scrollbar-width: none; }
  #tab-dashboard .table-wrap::-webkit-scrollbar { height: 0; }
}
#tab-dashboard .metric-card { container-type: inline-size; }
@container (max-width: 150px) {
  #tab-dashboard .metric-value { font-size: 18px; }
}
@container (max-width: 118px) {
  #tab-dashboard .metric-value { font-size: 15px; }
}

.work-progress-empty { font-size: 13px; color: var(--text-muted); padding: 4px 0 2px; }

/* ---- Công nợ & dòng tiền ---- */
#debt-card h3 { display: flex; align-items: center; gap: 7px; }
.debt-emoji { font-size: 17px; line-height: 1; display: inline-block; }
.debt-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 9px 0; border-top: 0.5px solid var(--border);
}
.debt-row:first-child { border-top: none; }
.debt-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.debt-value { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.debt-value.tone-good { color: #1e7d34; }
.debt-value.tone-warn { color: var(--accent-text); }
.debt-value.tone-danger { color: var(--danger); }
.debt-row-ncc .debt-value.tone-warn { color: var(--accent); }
.debt-divider { border-top: 0.5px dashed var(--border); margin: 12px 0 10px; }
.debt-subheading { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
#debt-card .metric-label { display: flex; align-items: center; gap: 7px; }
#debt-card .metric-value { color: var(--navy); }

/* ---- Vấn đề cần xử lý (tóm tắt trên Tổng quan) ---- */
.issue-summary-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.issue-summary-count { font-size: 27px; font-weight: 800; line-height: 1; }
.issue-summary-count.tone-danger { color: var(--danger); }
.issue-summary-count.tone-good { color: #1e7d34; }
.issue-summary-label { font-size: 12.5px; color: var(--text-muted); }
.issue-summary-empty {
  font-size: 13px; color: #1e7d34; background: #e6f4ea;
  border-radius: var(--radius); padding: 10px 12px;
}
.issue-mini-row { padding: 8px 0; border-top: 0.5px solid var(--border); }
.issue-mini-row:first-child { border-top: none; }
.issue-mini-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.issue-mini-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.issue-view-all {
  font-size: 12px; font-weight: 600; color: var(--accent-text);
  margin-top: 10px; padding-top: 8px; border-top: 0.5px solid var(--border);
}

/* ---- Nhắc việc ---- */
.reminder-row { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; border-top: 0.5px solid var(--border); }
.reminder-row:first-child { border-top: none; }
.reminder-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.reminder-dot.tone-danger { background: var(--danger); }
.reminder-dot.tone-warn { background: var(--accent); }
.reminder-dot.tone-info { background: #2a78d6; }
.reminder-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.reminder-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.reminder-empty {
  font-size: 13px; color: #1e7d34; background: #e6f4ea;
  border-radius: var(--radius); padding: 10px 12px;
}

/* CODEX "NÉN TRANG TỔNG QUAN" (22/09/2026): thêm 2 class compact thay cho
   4 card (Tiến độ thời gian) / 3 card (Tiến độ khối lượng) con lớn cũ —
   dùng chung 1 kiểu "dòng gọn có dấu | ngăn cách" cho cả 2 nơi. */
/* 23/09/2026: khối đầu 2 card tiến độ cao bằng nhau -> thanh cam & thanh xanh nằm cùng 1 hàng. */
.progress-head { min-height: 44px; }
@media (max-width: 760px) { .progress-head { min-height: 0; } }
.progress-compact-dates { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.progress-compact-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
}
.progress-compact-stats b { color: var(--text-primary); font-weight: 700; }
.progress-compact-sep { color: var(--text-muted); }

.timeline-track {
  position: relative;
  height: 10px;
  background: var(--surface-0);
  border-radius: 99px;
  margin: 10px 0 6px;
}
.timeline-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--accent); }
.timeline-marker { position: absolute; top: -4px; transform: translateX(-50%); text-align: center; }
.timeline-marker-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-primary);
  border: 2px solid var(--surface-1);
  margin: 0 auto;
}
/* Nhãn chấm mốc "Hôm nay" trên track tiến độ + nhãn tâm donut (bên dưới,
   .donut-label) là 2 ngoại lệ CHỦ Ý vẫn < 12px — xem ghi chú kỹ thuật dự án,
   mục "Chỉnh typography dashboard" (12/09/2026) để biết lý do (không đủ
   chỗ vật lý trong widget rất nhỏ). */
.timeline-marker-label { font-size: 11px; font-weight: 700; white-space: nowrap; margin-top: 2px; color: var(--text-primary); }
.timeline-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }

.cost-layout { display: grid; grid-template-columns: 138px 1fr; gap: 14px; align-items: center; }
@media (max-width: 760px) { .cost-layout { grid-template-columns: 1fr; } }
.donut-wrap { display: flex; justify-content: center; }
.donut {
  width: 136px; height: 136px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.donut-hole {
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--surface-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-value { font-size: 13px; font-weight: 700; text-align: center; padding: 0 4px; white-space: nowrap; }
.donut-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.section-note { font-size: 12px; color: var(--text-muted); }

.list-simple { display: flex; flex-direction: column; }
.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 0.5px solid var(--border);
  gap: 8px;
}
.list-row:first-child { border-top: none; }
.list-row-title { font-size: 13px; }
.list-row-sub { font-size: 12px; color: var(--text-muted); }

.inline-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
  align-items: end;
}
@media (max-width: 640px) { .inline-form { grid-template-columns: 1fr; } }

/* Mũi thi công / Máy móc thiết bị / Nhân lực — đặt gọn cạnh nhau ngay dưới
   "Tóm tắt nội dung thi công" cho gọn mắt, thu về 1 cột trên điện thoại. */
.report-extra-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .report-extra-fields { grid-template-columns: 1fr; } }

/* Khối "Thông tin đơn vị lập báo cáo" — thu gọn mặc định (details/summary),
   bấm mới mở để sửa; vẫn in đầy đủ trên PDF dù đang đóng vì bản in đọc thẳng
   từ dữ liệu project, không phụ thuộc trạng thái đóng/mở trên màn hình. */
.letterhead-details summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
.letterhead-details summary::-webkit-details-marker { display: none; }
.letterhead-details summary h3 { display: inline; }
.letterhead-details summary::after {
  content: "\25B8";
  font-size: 12px;
  color: var(--text-muted);
  transition: transform .15s;
  margin-left: 8px;
}
.letterhead-details[open] summary::after { transform: rotate(90deg); }
.letterhead-details[open] summary { margin-bottom: 12px; }
.letterhead-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 10px;
}
@media (max-width: 640px) { .letterhead-hint { display: block; margin-left: 0; margin-top: 2px; } }

.report-pdf-sign-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 16px;
  overflow-y: auto;
  z-index: 50;
}
.modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: 16px 20px 20px;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 10px;
}
.modal-header h3 { margin: 0; }

.material-box {
  background: var(--accent-bg);
  border-radius: var(--radius);
  padding: 10px;
  margin-top: 10px;
}
.material-box-head { display: flex; justify-content: space-between; align-items: center; }
.material-box-head label { margin: 0; color: var(--accent-text); }
.material-box-head a { font-size: 12px; color: var(--accent-text); }
.row-2 { display: flex; gap: 8px; margin-top: 8px; }
.quick-material-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.toggle-group { display: flex; gap: 8px; margin-top: 4px; }
.toggle-btn { flex: 1; padding: 8px; }
.toggle-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); }

/* ---------- Danh sách "Người thực hiện" dùng nhanh (tự thêm theo từng công ty) ---------- */
.performer-quick { flex-wrap: wrap; }
.performer-quick .toggle-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.performer-quick .toggle-btn .performer-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
}
.performer-quick .toggle-btn .performer-remove:hover { color: var(--danger); }
.performer-quick .toggle-btn.active .performer-remove { color: var(--accent-text); }
.performer-add-row { display: flex; gap: 8px; margin-top: 8px; }
.performer-add-row input { flex: 1; }
.performer-add-row button { flex-shrink: 0; white-space: nowrap; }

/* ---------- Ghi chú tự do (VD: tab Nhà cung cấp) ---------- */
.note-row { display: flex; gap: 8px; margin: 10px 0 14px; }
.note-row input {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-0);
}
.note-row button { flex-shrink: 0; white-space: nowrap; }

.badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-urgent { background: #fcebeb; color: var(--danger); }
.badge-normal { background: var(--surface-0); color: var(--text-secondary); }
.badge-signed { background: #e6f4ea; color: #1e7d34; }
.badge-unsigned { background: var(--surface-0); color: var(--text-secondary); }
.badge-ordered { background: var(--accent-bg); color: var(--accent-text); }
.badge-inprogress { background: var(--accent-bg); color: var(--accent-text); }
.badge-category { font-weight: 700; }

.status-select {
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid;
  cursor: pointer;
  min-width: 128px;
  width: auto;
}
.status-select.status-active { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent); }
.status-select.status-done { background: #e6f4ea; color: #1e7d34; border-color: #1e7d34; }
.status-select.status-pending { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent); }
.quality-status-select, .quality-check-select { min-width: 90px; width: 90px; font-size: 11px; padding: 4px 3px; }
.quality-date-input { width: 100px; padding: 4px 4px; height: 30px; font-size: 12px; }
.quality-note-input { width: 110px; padding: 4px 6px; height: 30px; }
/* Bảng Hồ sơ chất lượng có nhiều cột — thu gọn khoảng đệm để bảng vừa khung hơn */
#tab-documents .data-table th, #tab-documents .data-table td { padding: 6px 4px; font-size: 12.5px; }

.btn-detail {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.btn-detail:active { transform: scale(0.97); }

.cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent-bg);
  color: var(--accent-text);
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.cat-icon svg { width: 18px; height: 18px; stroke-width: 2.4; }

.appendix-header-row td { background: var(--surface-0); font-weight: 500; }
.appendix-qty-input { width: 90px; text-align: right; padding: 4px 6px; height: 30px; }

.report-qty-input { width: 90px; text-align: right; padding: 4px 6px; height: 30px; }
.report-lk-cell.lk-flash { animation: lkflash 0.9s ease; border-radius: 4px; }
@keyframes lkflash {
  0% { background: var(--accent-bg); color: var(--accent-text); }
  100% { background: transparent; }
}

.material-header-row td { background: var(--surface-0); font-weight: 500; }
.subctr-item-header-row td { background: var(--surface-0); font-weight: 500; }
.material-note-input { width: 150px; padding: 4px 6px; height: 30px; }

/* Nút Sửa/Xoá (01/09/2026): đổi từ chữ nhỏ 12px sang nút bấm có khung/nền,
   diện tích chạm lớn hơn (tối thiểu ~34px cao) — vẫn giữ nguyên class name
   .edit-link/.delete-link vì toàn bộ app.js đang gắn addEventListener theo
   2 class này ở rất nhiều bảng, đổi CSS thôi để không phải sửa lại từng nơi. */
.edit-link, .delete-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* 30/09/2026: Sửa = cam (hợp tông chung), Xoá = đỏ (cố định, không đổi theo màu ngũ hành).
   Hover: đổ màu đậm + nhấc nhẹ + bóng đổ; điện thoại: nhấn (:active) lún xuống. */
.edit-link {
  color: var(--accent-text);
  background: var(--accent-bg);
  border-color: #f1d5a8;
}
.edit-link:hover {
  background: #E08A1E; color: #fff; border-color: #E08A1E; text-decoration: none;
  transform: translateY(-2px); box-shadow: 0 6px 12px -4px rgba(224,138,30,.55);
}

.delete-link {
  color: #A32D2D;
  background: #FCEBEB;
  border-color: #F09595;
  margin-left: 8px;
}
.delete-link:hover {
  background: #E24B4A; color: #fff; border-color: #E24B4A; text-decoration: none;
  transform: translateY(-2px); box-shadow: 0 6px 12px -4px rgba(226,75,74,.55);
}
.edit-link:active, .delete-link:active { transform: translateY(0) scale(.95); box-shadow: none; }
.edit-link:active { background: #E08A1E; color: #fff; }
.delete-link:active { background: #E24B4A; color: #fff; }
.edit-link:focus-visible { outline: 2px solid #E08A1E; outline-offset: 2px; }
.delete-link:focus-visible { outline: 2px solid #E24B4A; outline-offset: 2px; }
@media (hover: none) {
  .edit-link:hover:not(:active) { background: var(--accent-bg); color: var(--accent-text); border-color: #f1d5a8; transform: none; box-shadow: none; }
  .delete-link:hover:not(:active) { background: #FCEBEB; color: #A32D2D; border-color: #F09595; transform: none; box-shadow: none; }
}

/* Giữ 2 nút Sửa/Xoá luôn nằm 1 hàng ngang, không bị xuống dòng khi cột hẹp
   (bug gặp thật 01/09/2026 ở bảng Nhà cung cấp và các bảng khác) — ô chứa
   2 nút này luôn là ô cuối cùng mỗi hàng, dùng :has() để không phải sửa
   HTML/JS ở từng hàm render. */
.data-table td:has(> .edit-link) { white-space: nowrap; }

/* ---------- Tổng quan các dự án (trang danh sách nhiều dự án) ---------- */
.pf-icon { width: 15px; height: 15px; flex-shrink: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }

/* Ô lọc "Xem tổng quan theo năm" — CODEX "TỔNG QUAN THEO NĂM" (14/09/2026) */
.pf-year-filter-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px;
}
.pf-year-filter-row label { font-size: 13px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.pf-year-filter-row select#pf-year-filter {
  font-size: 14px; font-weight: 700; padding: 7px 30px 7px 12px; border-radius: 8px;
  border: 1.5px solid var(--accent); color: var(--accent-text); background: var(--accent-bg);
  cursor: pointer;
}
.pf-year-filter-row .pf-year-note { font-size: 12px; color: var(--text-muted); margin-left: auto; }
@media (max-width: 820px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card {
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k-accent, var(--accent)); }
.kpi-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; padding-left: 6px; }
.kpi-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--k-accent-bg, var(--accent-bg)); font-size: 14px; flex-shrink: 0;
}
.kpi-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.kpi-value {
  font-size: 21px; font-weight: 800; padding-left: 6px; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* CODEX (19/09/2026): số tiền tổng (VD "16.396.000.000 đ") bị nhảy dòng
   trong thẻ KPI trên điện thoại (2 thẻ/hàng, xem @media 820px ở trên) —
   giảm dần cỡ chữ theo màn hình hẹp, giống đúng cách đã làm cho
   .msc-value (Vật tư) — ưu tiên chữ nhỏ lại hơn là bị cắt/nhảy dòng. */
@media (max-width: 480px) { .kpi-value { font-size: 16px; } }
@media (max-width: 360px) { .kpi-value { font-size: 14px; } }
.kpi-sub { font-size: 12px; color: var(--text-muted); padding-left: 6px; margin-top: 3px; }

table.pf-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1250px; table-layout: fixed; }
table.pf-table thead th {
  text-align: left; padding: 9px 10px; font-weight: 700; color: var(--navy);
  background: var(--navy-soft); border-bottom: 2px solid var(--navy); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.2px; white-space: nowrap;
}
/* CODEX (19/09/2026): thêm nowrap — cột 125px trước đây không đủ chỗ cho
   số tiền lớn (VD "16.396.000.000 đ"), làm chữ bị bóp/nhảy dòng trong 1 ô. */
table.pf-table th.num, table.pf-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.pf-table td { padding: 11px 10px; border-bottom: 0.5px solid var(--border); vertical-align: middle; }
table.pf-table tbody tr:hover { background: #faf9f6; }

/* Bề rộng cố định từng cột (table-layout:fixed) để chữ không bị bóp xuống
   còn 1 từ/dòng khi cột "Dự án" hay bảng "Tổng quan tài chính" bị hẹp lại. */
table.pf-table th:nth-child(1), table.pf-table td:nth-child(1) { width: 60px; }
table.pf-table th:nth-child(2), table.pf-table td:nth-child(2) { width: 190px; }
table.pf-table th:nth-child(3), table.pf-table td:nth-child(3) { width: 130px; }
table.pf-table th:nth-child(4), table.pf-table td:nth-child(4),
table.pf-table th:nth-child(5), table.pf-table td:nth-child(5),
table.pf-table th:nth-child(6), table.pf-table td:nth-child(6) { width: 148px; }
table.pf-table th:nth-child(7), table.pf-table td:nth-child(7),
table.pf-table th:nth-child(8), table.pf-table td:nth-child(8) { width: 74px; }
table.pf-table th:nth-child(7), table.pf-table th:nth-child(8) { white-space: normal; line-height: 1.25; }
table.pf-table th:nth-child(9), table.pf-table td:nth-child(9) { width: 150px; }
table.pf-table th:nth-child(10), table.pf-table td:nth-child(10) { width: 100px; }

.proj-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.proj-info { min-width: 0; overflow: hidden; }
.proj-name { overflow-wrap: break-word; }
.proj-icon {
  width: 32px; height: 32px; border-radius: 8px; background: var(--accent-bg); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.proj-icon .pf-icon { width: 16px; height: 16px; }
.proj-name { font-weight: 700; }
.proj-flag { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; margin-top: 2px; }
.proj-flag .pf-icon { width: 12px; height: 12px; }
.proj-flag.late { color: #c0392b; }
.proj-flag.behind { color: #c9860a; }
.proj-flag.ontrack { color: #2f9e5c; }

.subctr-warn-banner {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fff8ea; border: 1px solid #f3dfa8; border-radius: 8px;
  padding: 10px 12px; margin: 0 0 14px; font-size: 12.5px; color: #8a6100;
}
.subctr-warn-banner b { color: #8a6100; }
.subctr-warn-banner.severe { background: #fbe2e2; border-color: #f0b8b8; color: var(--danger); }
.subctr-warn-banner.severe b { color: var(--danger); }

.subctr-summary-grid { margin-bottom: 14px; }

.status-pill-wrap { position: relative; display: inline-block; }
.status-pill.status-select {
  appearance: none; -webkit-appearance: none; border: none; border-radius: 99px;
  padding: 6px 28px 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; min-width: 0; width: auto;
}
.status-pill.status-select.active { background: #fff1d6; color: #8a5a00; }
.status-pill.status-select.done { background: #e5f6ec; color: #2f9e5c; }
.status-pill-wrap::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg); pointer-events: none; color: inherit; opacity: 0.6;
}

.dual-progress { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.dp-row { display: flex; align-items: center; gap: 7px; }
.dp-label { font-size: 9px; color: var(--text-muted); font-weight: 700; width: 44px; flex-shrink: 0; }
.dp-track { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-0); overflow: hidden; }
.dp-fill { display: block; height: 100%; border-radius: 99px; }
.dp-fill.cost { background: var(--accent); }
.dp-fill.time { background: var(--navy-2); }
.dp-val { font-size: 12px; font-weight: 700; width: 36px; text-align: right; flex-shrink: 0; }

table.pf-table .btn-detail {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--navy); color: #fff; border: none;
  padding: 7px 13px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
table.pf-table .btn-detail:hover { background: var(--navy-2); }
table.pf-table .btn-detail .pf-icon { width: 12px; height: 12px; }

table.pf-table .total-row td {
  font-weight: 800; background: var(--navy-soft); border-top: 2px solid var(--navy); border-bottom: none; color: var(--navy);
}

/* ---------- Vòng tròn % Khối lượng / Thời gian trong bảng dự án ---------- */
.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ring { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ring-inner { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-1); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.ring-label { font-size: 9px; color: var(--text-muted); }

/* ---------- Khối "Cảnh báo" (Tổng quan các dự án) ---------- */
.alert-list { display: flex; flex-direction: column; gap: 9px; }
.alert-item { display: flex; gap: 9px; align-items: flex-start; border-radius: 9px; padding: 9px 10px; cursor: pointer; }
.alert-item.sev-high { background: #fbe2e2; }
.alert-item.sev-mid { background: #fff8ea; }
.alert-item.sev-empty { background: var(--surface-0); color: var(--text-muted); font-size: 12.5px; cursor: default; }
.alert-icon { font-size: 13px; line-height: 1.4; }
.alert-title { font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.alert-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Xuất báo cáo PDF (in) ---------- */
#print-report { display: none; }
@media print {
  /* @page { margin: 0 } bỏ được tiêu đề/URL/số trang mà trình duyệt tự
     chèn vào lề trên-dưới khi in (Chrome/Edge chỉ vẽ phần "Headers and
     footers" vào đúng vùng lề trang — lề = 0 thì không còn chỗ để vẽ nữa).
     Bù lại khoảng trắng quanh nội dung bằng padding của #print-report bên
     dưới, không dùng lề trang mặc định nữa. Một số trình duyệt vẫn giữ tuỳ
     chọn "Tiêu đề và chân trang" trong hộp thoại in — nếu vẫn thấy, anh bỏ
     tick mục đó trong hộp thoại in (biểu tượng mũi tên "Xem thêm cài đặt"). */
  @page { size: auto; margin: 0; }

  /* Ẩn hẳn (display:none) mọi phần tử khác ngoài #print-report — dùng
     visibility:hidden trước đây khiến các khối rất dài (bảng dữ liệu ẩn)
     vẫn chiếm chỗ trong layout, sinh ra (các) trang trắng thừa ở cuối bản in. */
  body > *:not(#print-report) { display: none !important; }
  #print-report {
    display: block !important;
    width: 100%;
    padding: 14mm 12mm;
    box-sizing: border-box;
  }
  /* Ép trình duyệt in đúng màu nền/chữ trắng của các khối có tô màu — mặc
     định Chrome bỏ hết nền khi in để tiết kiệm mực. */
  #print-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  #print-report h1 { font-size: 18px; margin: 0 0 4px; }
  #print-report h2 { font-size: 14px; margin: 18px 0 6px; }
  #print-report p.print-sub { font-size: 11px; color: #444; margin: 0 0 12px; }
  #print-report p.print-multiline { white-space: pre-line; line-height: 1.5; }

  /* Khung viền xanh bao toàn bộ văn bản báo cáo */
  #print-report .print-doc {
    border: 1.5px solid #16325c;
    border-radius: 10px;
    padding: 14px 16px 16px;
  }

  #print-report .print-icon-circle {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  #print-report .print-icon-circle svg { width: 11px; height: 11px; }
  #print-report .print-icon-circle.tone-navy { background: #16325c; color: #fff; }
  #print-report .print-icon-circle.tone-orange { background: #fff1e2; color: #f4801f; }
  #print-report .print-icon-circle.tone-green { background: #e5f6ec; color: #2f9e5c; }

  /* Quốc hiệu / đơn vị lập báo cáo (góc trên bên trái) + số văn bản, ngày
     tháng (góc trên bên phải) — theo mẫu công văn "BÁO CÁO KHỐI LƯỢNG THI
     CÔNG". Chỉ hiện khi đã điền ở khối "Thông tin đơn vị lập báo cáo". */
  #print-report .print-letterhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1.5px solid #16325c;
    padding-bottom: 8px;
    margin-bottom: 6px;
  }
  #print-report .print-org-name {
    font-weight: 700;
    font-size: 14px;
    color: #16325c;
    text-transform: uppercase;
    line-height: 1.25;
  }
  #print-report .print-org-sub {
    font-size: 10px;
    color: #444;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  #print-report .print-org-sub svg { width: 10px; height: 10px; color: #16325c; flex-shrink: 0; }
  #print-report .print-doc-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    white-space: nowrap;
  }
  #print-report .print-pill {
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 9.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  #print-report .print-pill svg { width: 10px; height: 10px; flex-shrink: 0; }
  #print-report .print-pill-dark { background: #16325c !important; color: #fff; }
  #print-report .print-pill-light { background: #fff; color: #16325c; border: 1px solid #16325c; }

  #print-report .print-title {
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin: 12px 0 2px;
  }
  #print-report .print-title-sub {
    text-align: center;
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    color: #f4801f;
    margin: 0 0 14px;
  }

  /* Khung "Dự án/Gói thầu, Hợp đồng số, Hạng mục theo dõi..." 2 cột, mỗi ô
     có icon tròn bên trái + gạch chấm phía dưới kiểu biểu mẫu. */
  #print-report .print-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
    row-gap: 8px;
    margin-bottom: 14px;
  }
  #print-report .print-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dotted #bbb;
    padding-bottom: 5px;
  }
  #print-report .print-meta-icon { width: 22px; height: 22px; }
  #print-report .print-meta-icon svg { width: 12px; height: 12px; }
  #print-report .print-info-label {
    font-weight: 700;
    font-size: 8.5px;
    color: #16325c;
    text-transform: uppercase;
    letter-spacing: 0.2px;
  }
  #print-report .print-info-value { font-size: 10.5px; font-weight: 600; margin-top: 1px; }

  /* 2 khung tóm tắt song song: nội dung hợp đồng | nội dung thi công kỳ này */
  #print-report .print-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
    page-break-inside: avoid;
  }
  #print-report .print-box {
    border: 1px solid #16325c;
    border-radius: 8px;
    overflow: hidden;
  }
  #print-report .print-box-head {
    background: #eef3fa !important;
    border-bottom: 1px solid #16325c;
    padding: 5px 10px;
    font-size: 9px;
    font-weight: 800;
    color: #16325c;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  #print-report .print-box-head svg { width: 11px; height: 11px; flex-shrink: 0; }
  #print-report .print-box-body { padding: 8px 10px; }

  #print-report .print-contract-item { display: flex; gap: 7px; margin-bottom: 7px; }
  #print-report .print-contract-item:last-child { margin-bottom: 0; }
  #print-report .print-num-badge {
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #f4801f !important;
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  #print-report .print-c-title { font-size: 9.5px; font-weight: 700; }
  #print-report .print-c-detail { font-size: 8.5px; color: #444; margin-top: 2px; line-height: 1.45; }

  #print-report .print-period-summary {
    font-size: 9px;
    color: #333;
    line-height: 1.5;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px dashed #ddd;
  }
  #print-report .print-work-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed #e1e0d9;
  }
  #print-report .print-work-row:last-child { border-bottom: none; }
  #print-report .print-work-row .print-icon-circle { width: 24px; height: 24px; }
  #print-report .print-work-row .print-icon-circle svg { width: 13px; height: 13px; }
  #print-report .print-work-left { min-width: 74px; }
  #print-report .print-w-label {
    font-size: 8px;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.2px;
  }
  #print-report .print-w-count { font-size: 15px; font-weight: 800; line-height: 1.1; }
  #print-report .print-w-desc {
    font-size: 8.5px;
    color: #444;
    margin-left: auto;
    text-align: right;
    line-height: 1.45;
    max-width: 150px;
  }

  #print-report table.print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 4px;
    page-break-inside: auto;
  }
  #print-report table.print-table th,
  #print-report table.print-table td {
    border: 1px solid #ccc;
    padding: 3px 6px;
    font-size: 10px;
    text-align: left;
  }
  #print-report table.print-table th {
    background: #f4801f !important;
    color: #fff;
    font-weight: 800;
    text-align: center;
    border-color: #f4801f;
  }
  #print-report table.print-table td.num,
  #print-report table.print-table th.num { text-align: right; }
  #print-report table.print-table td.center,
  #print-report table.print-table th.center { text-align: center; }
  #print-report table.print-table td.print-work-name { padding-left: 14px; }
  #print-report table.print-table tr { page-break-inside: avoid; }
  #print-report table.print-table tr.print-total-row td {
    background: #f4801f !important;
    color: #fff;
    font-weight: bold;
  }
  #print-report table.print-table tr.print-group-row td {
    background: #f2f2ef !important;
    font-weight: bold;
    padding-left: 8px;
  }
  #print-report table.print-table tr.print-group-row {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  /* Cột "% KL": thanh mini + huy hiệu màu theo trạng thái */
  #print-report .print-pct-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
  }
  #print-report .print-mini-bar {
    width: 34px;
    height: 4px;
    border-radius: 99px;
    background: #e7e5dd !important;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-block;
  }
  #print-report .print-mini-fill { display: block; height: 100%; border-radius: 99px; }
  #print-report .print-mini-fill.zero { background: #c9c7bd !important; }
  #print-report .print-mini-fill.partial { background: #f4801f !important; }
  #print-report .print-mini-fill.late { background: #d03b3b !important; }
  #print-report .print-mini-fill.done { background: #2f9e5c !important; }
  #print-report .print-pct-badge {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 99px;
    min-width: 30px;
    text-align: center;
  }
  #print-report .print-pct-badge.zero { background: #eeeeea !important; color: #777; }
  #print-report .print-pct-badge.partial { background: #fff1d6 !important; color: #8a5a00; }
  #print-report .print-pct-badge.done { background: #e5f6ec !important; color: #2f9e5c; }

  /* Khối tổng kết cuối bảng: giá trị hợp đồng / đã thực hiện / tỷ lệ / tiến độ */
  #print-report .print-total-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
    page-break-inside: avoid;
  }
  #print-report .print-total-card {
    border: 1px solid #16325c;
    border-radius: 8px;
    padding: 7px 10px;
    background: #f7f9fc !important;
  }
  #print-report .print-total-label {
    font-size: 8px;
    font-weight: 700;
    color: #16325c;
    text-transform: uppercase;
    letter-spacing: 0.2px;
  }
  #print-report .print-total-value { font-size: 12.5px; font-weight: 800; margin-top: 2px; }
  #print-report .print-total-bar {
    height: 4px;
    border-radius: 99px;
    background: #e7e5dd !important;
    overflow: hidden;
    margin-top: 5px;
  }
  #print-report .print-total-note { font-size: 7.5px; color: #555; margin-top: 3px; line-height: 1.4; }

  /* 3 ô chữ ký cuối văn bản */
  #print-report .print-sign-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    margin-top: 18px;
    page-break-inside: avoid;
  }
  #print-report .print-sign-role {
    font-size: 10px;
    font-weight: 800;
    color: #16325c;
    text-transform: uppercase;
    letter-spacing: 0.2px;
  }
  #print-report .print-sign-icon {
    width: 26px; height: 26px;
    background: #eef3fa !important;
    color: #16325c;
    margin: 8px auto;
  }
  #print-report .print-sign-icon svg { width: 13px; height: 13px; }
  #print-report .print-sign-line {
    border-bottom: 1px dotted #bbb;
    width: 68%;
    margin: 14px auto 0;
  }
  #print-report .print-sign-sub { font-size: 8.5px; font-style: italic; color: #777; margin-top: 3px; }

  #print-report .print-footnote {
    font-size: 8.5px;
    color: #555;
    font-style: italic;
    text-align: center;
    margin-top: 12px;
  }

  /* ================= Báo cáo tổng hợp dự án (nút "Xuất PDF" tab Tổng quan) =================
     Dùng tiền tố .rp- (report) riêng để không đụng vào .print-* của bản Báo
     cáo khối lượng thi công — 2 bản in có cấu trúc khác nhau (nhiều mục hơn),
     nhưng cùng tông màu navy/cam cho đồng bộ. */
  #print-report .rp-doc { border: 1.5px solid #16325c; border-radius: 10px; overflow: hidden; }

  #print-report .rp-cover { background: #16325c; color: #fff; padding: 14px 16px 12px; }
  #print-report .rp-cover-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  #print-report .rp-cover-kicker { font-size: 8px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,.65); text-transform: uppercase; }
  #print-report .rp-cover-title { font-size: 15px; font-weight: 800; margin-top: 3px; }
  #print-report .rp-cover-meta { text-align: right; font-size: 8.5px; color: rgba(255,255,255,.75); line-height: 1.6; }
  #print-report .rp-cover-meta b { color: #fff; }

  #print-report .rp-kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; padding: 12px 14px 2px; }
  #print-report .rp-kpi-card { border: 1px solid #ccc; border-radius: 8px; padding: 8px 9px; position: relative; overflow: hidden; }
  #print-report .rp-kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rp-k-accent,#d9720c); }
  #print-report .rp-kpi-top { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; padding-left: 4px; }
  #print-report .rp-kpi-icon { width: 16px; height: 16px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: var(--rp-k-accent-bg,#fdead1); flex-shrink: 0; }
  #print-report .rp-kpi-icon svg { width: 9px; height: 9px; color: var(--rp-k-accent,#d9720c); }
  #print-report .rp-kpi-label { font-size: 7.5px; color: #777; font-weight: 700; }
  #print-report .rp-kpi-value { font-size: 11px; font-weight: 800; padding-left: 4px; }
  #print-report .rp-kpi-sub { font-size: 7px; color: #777; padding-left: 4px; margin-top: 1px; }

  #print-report .rp-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 8px 14px 2px; }
  #print-report .rp-insight { border-radius: 8px; padding: 7px 9px; display: flex; gap: 6px; border: 1px solid #eee; }
  #print-report .rp-insight.warn { background: #fff8ea !important; border-color: #f3dfa8; }
  #print-report .rp-insight.info { background: #eef5fc !important; border-color: #c9dff3; }
  #print-report .rp-insight-icon { font-size: 11px; line-height: 1.1; }
  #print-report .rp-insight-title { font-weight: 700; font-size: 8px; margin-bottom: 1px; }
  #print-report .rp-insight-text { font-size: 7.5px; color: #555; line-height: 1.4; }

  #print-report .rp-section-divider { height: 1px; background: #e3e1d9; margin: 4px 14px; }
  #print-report .rp-section { padding: 10px 14px 4px; page-break-inside: avoid; }
  #print-report .rp-section-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  #print-report .rp-section-icon { width: 18px; height: 18px; border-radius: 5px; background: var(--rp-icon-bg,#eef3fa); color: var(--rp-icon-color,#16325c); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  #print-report .rp-section-icon svg { width: 10px; height: 10px; }
  #print-report .rp-section-title { font-size: 9.5px; font-weight: 800; color: #16325c; }
  #print-report .rp-section-count { font-size: 8px; color: #777; margin-left: auto; font-weight: 600; }

  #print-report .rp-cost-layout { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; }
  #print-report .rp-donut-wrap { display: flex; justify-content: center; }
  #print-report .rp-donut { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  #print-report .rp-donut-hole { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  #print-report .rp-donut-value { font-size: 6.5px; font-weight: 800; text-align: center; }
  #print-report .rp-donut-label { font-size: 6px; color: #777; }

  #print-report table.rp-table { width: 100%; border-collapse: collapse; font-size: 8.5px; margin-bottom: 3px; }
  #print-report table.rp-table th { background: #d9720c !important; color: #fff; font-weight: 700; padding: 4px 6px; text-align: left; }
  #print-report table.rp-table th.num, #print-report table.rp-table td.num { text-align: right; }
  #print-report table.rp-table th.center, #print-report table.rp-table td.center { text-align: center; }
  #print-report table.rp-table td { padding: 4px 6px; border-bottom: 1px solid #e3e1d9; }
  #print-report table.rp-table tbody tr:nth-child(even) { background: #faf9f6 !important; }

  #print-report .rp-mini-bar-cell { display: flex; align-items: center; gap: 4px; }
  #print-report .rp-mini-bar-track { width: 30px; height: 4px; border-radius: 99px; background: #e7e5dd !important; overflow: hidden; flex-shrink: 0; display: inline-block; }
  #print-report .rp-mini-bar-fill { display: block; height: 100%; border-radius: 99px; }

  #print-report .rp-badge { display: inline-flex; align-items: center; font-size: 7px; font-weight: 700; padding: 1px 6px; border-radius: 99px; white-space: nowrap; }
  #print-report .rp-badge-good { background: #e5f6ec !important; color: #2f9e5c; }
  #print-report .rp-badge-warn { background: #fff1d6 !important; color: #8a5a00; }
  #print-report .rp-badge-bad { background: #fbe2e2 !important; color: #c0392b; }
  #print-report .rp-badge-neutral { background: #eeeeea !important; color: #777; }

  #print-report .rp-more-note { font-size: 7.5px; color: #777; font-style: italic; padding: 2px 0 4px; }

  #print-report .rp-footnote { font-size: 7.5px; color: #777; font-style: italic; text-align: center; padding: 10px 14px 12px; }
}

/* ===== Nhà thầu phụ ===== */
.subctr-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 2px; }
.subctr-back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 10px; }
.subctr-back svg { width: 15px; height: 15px; }
.subctr-detail-sub { font-size: 12.5px; color: var(--text-muted); margin: -4px 0 16px; }
.subctr-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.subctr-tabs .toggle-btn { flex: 0 0 auto; padding: 7px 16px; font-size: 13px; }
.subctr-subtab { display: none; }
.subctr-subtab.active { display: block; }

.drawer-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-top: 0.5px solid var(--border); gap: 10px; font-size: 13px; }
.drawer-row:first-child { border-top: none; }
.drawer-row .num { font-variant-numeric: tabular-nums; font-weight: 600; }

.item-drawer-overlay { position: fixed; inset: 0; background: rgba(28,28,26,.45); z-index: 60; }
.item-drawer {
  position: fixed; top: 0; right: 0;
  height: 100vh; width: min(400px, 100vw);
  background: var(--surface-1);
  border-left: 0.5px solid var(--border);
  box-shadow: -8px 0 30px rgba(0,0,0,.14);
  z-index: 61;
  padding: 18px;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
}
.item-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }
.item-drawer-head h3 { margin: 0; text-transform: uppercase; font-size: 15px; }
.item-drawer-close { background: transparent; border: none; padding: 4px; color: var(--text-muted); cursor: pointer; }
.item-drawer-close svg { width: 18px; height: 18px; }
.item-drawer-unit { font-size: 12.5px; color: var(--text-muted); margin: -4px 0 8px; }
.item-drawer .hr { height: 0.5px; background: var(--border); margin: 6px 0; }
.item-history-row { padding: 8px 0; border-top: 0.5px solid var(--border); font-size: 12.5px; }
.item-history-row:first-child { border-top: none; }
.item-history-main { display: flex; align-items: center; gap: 8px; }
.item-history-row .ih-date { color: var(--text-muted); width: 44px; flex-shrink: 0; }
.item-history-row .ih-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.item-history-row .ih-value { color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-left: auto; }
.item-history-sub { color: var(--text-muted); font-size: 12px; margin-top: 3px; padding-left: 52px; }

@media (max-width: 560px) {
  .item-drawer { width: 100vw; }
}

/* ================== CODEX "ĐỒNG BỘ UI TẤT CẢ TAB, TRỪ TỔNG QUAN"
   (12/09/2026) — component dùng CHUNG cho tiêu đề + header bảng của 11 tab
   còn lại (Nhật ký/Vật tư/Nhà thầu phụ/Nhà cung cấp/Kế hoạch nhập/Thanh
   toán/Báo cáo thi công/Phụ lục hợp đồng/Vấn đề/Hồ sơ chất lượng/Người
   dùng/Quản trị SaaS). KHÔNG đụng gì trong phạm vi #tab-dashboard — mọi rule
   dưới đây hoặc chỉ áp dụng cho class MỚI (không tab-dashboard nào dùng),
   hoặc CHỦ Ý loại trừ #tab-dashboard bằng :not(). ================== */

/* Tiêu đề mỗi tab: icon màu + tên tab 20px/700, cùng hàng với ô tìm
   kiếm/nút thao tác bên phải (kế thừa layout .section-header có sẵn, chỉ
   thêm phần icon+cỡ chữ qua 2 class mới .tab-title-row/.tab-title). */
.tab-title-row .tab-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tab-title-row { margin-bottom: 20px; }
.tab-title-row .tab-title h3 { font-size: 23px; font-weight: 700; margin: 0; }
.tab-title-icon { font-size: 21px; line-height: 1; flex-shrink: 0; }

/* CODEX "MÀU HEADER BẢNG TOÀN APP" (12/09/2026) — đổi lại header bảng
   sang nền cam kem rất nhạt cho MỌI tab TRỪ Tổng quan (thay cho nền xám
   trung tính của đợt "ĐỒNG BỘ UI TẤT CẢ TAB" ngay trước đó). Tổng quan
   giữ nguyên y hệt màu cam nhạt cũ (.data-table thead th gốc, không đổi)
   vì :not(#tab-dashboard) loại trừ hẳn, không match được vào trong đó. */
.tab-panel:not(#tab-dashboard) .data-table thead th {
  background: var(--accent-bg);
  color: #6b3906;
  font-weight: 600;
  padding: 11px 12px;
  border-bottom: 1.5px solid #f0c391;
}
/* Dòng Tổng cộng (tfoot): cam nhạt hơn header 1 chút để vẫn nổi bật rõ so
   với các dòng dữ liệu nền trắng bên trên, nhưng không lấn át header. */
.tab-panel:not(#tab-dashboard) .data-table tfoot td {
  background: #fdf2e0;
}

/* Nhóm chi phí Nhật ký dùng .badge tô màu theo CATEGORY_COLORS (đã có từ
   CODEX "CHỈNH TAB NHẬT KÝ") — không cần CSS riêng thêm ở đây, dùng lại
   đúng .badge gốc.

   Số tiền lớn trong .metric-card-accent (được tái dùng thêm cho Nhật ký/
   Thanh toán/Phụ lục hợp đồng ở đợt này) không tự nowrap ngoài phạm vi
   #tab-dashboard trước đây — thêm nowrap CHUNG (an toàn, không đụng
   #tab-dashboard vì nó đã tự nowrap riêng từ trước, 2 rule trùng nhau vô
   hại). */
.metric-card-accent .metric-value { white-space: nowrap; }

/* ================== CODEX "TĂNG ĐỘ RÕ CHỮ CHÍNH TOÀN APP" (12/09/2026) ==
   Chuẩn hoá độ đậm/màu chữ cho 12 tab chức năng (Nhật ký, Vật tư, Nhà thầu
   phụ, Nhà cung cấp, Kế hoạch nhập, Thanh toán, Báo cáo, Phụ lục, Vấn đề,
   Hồ sơ chất lượng, Người dùng, Quản trị SaaS) — TRỪ Tổng quan dự án và
   trang Tổng quan các dự án (không nằm trong .tab-panel nên tự động không
   bị ảnh hưởng). Không đổi layout/màu thương hiệu/nền — chỉ đậm hơn + màu
   tối hơn cho: nhãn KPI/card, tên chính trong bảng, số tiền/số lượng. */
.tab-panel:not(#tab-dashboard) .metric-label,
.tab-panel:not(#tab-dashboard) .kpi-label {
  color: var(--text-secondary);
  font-size: 13px;
}
/* Tên chính trong bảng (nhà thầu phụ / vật tư / nhà cung cấp / hạng mục /
   người dùng...) — đậm vừa để nổi bật hơn text phụ nhưng không lấn số liệu. */
.row-title-cell { font-weight: 600; color: var(--text-primary); }
/* Số tiền/số lượng chính (mọi cột .num đã dùng thống nhất toàn app) — đậm
   hơn để dễ đọc, không đổi căn lề/định dạng đang có. */
.tab-panel:not(#tab-dashboard) .data-table td.num { font-weight: 600; }

/* ================== CODEX "ĐỒNG BỘ NỀN TOÀN BỘ CÁC TAB" (13/09/2026) ==
   Thống nhất nền trang, card/KPI, header bảng và spacing cho 12 tab chức
   năng (Nhật ký, Vật tư, Nhà thầu phụ, Nhà cung cấp, Kế hoạch nhập, Thanh
   toán, Báo cáo thi công, Phụ lục HĐ, Vấn đề cần xử lý, Hồ sơ chất lượng,
   Người dùng, Quản trị SaaS) — TRỪ Tổng quan (:not(#tab-dashboard) loại
   trừ hẳn). Nền trang (var(--surface-0) của <body>) không cần đổi gì ở
   đây vì vốn đã là nền chung mặc định — chỉ cần XOÁ override nền trắng
   riêng của Vật tư (xem comment "ĐÃ BỊ BỎ" phía trên). Chỉ đổi màu nền/
   header/card/spacing — không đổi dữ liệu/chức năng/cột/logic. */
.tab-panel:not(#tab-dashboard) .data-table { background: var(--surface-1); }
.tab-panel:not(#tab-dashboard) .card,
.tab-panel:not(#tab-dashboard) .metric-card,
.tab-panel:not(#tab-dashboard) .kpi-card,
.tab-panel:not(#tab-dashboard) .materials-summary-card {
  border-radius: 10px;
  border-color: var(--card-border);
}

/* ================== CODEX "CHẾ ĐỘ XEM ĐIỆN THOẠI / MÁY TÍNH" (18/09/2026,
   SỬA LẠI 19/09/2026 theo phản hồi anh Nhật — chuyển từ nút tròn nổi góc dưới
   sang 2 nút nhỏ 📱/🖥️ ngay trong thanh đầu, cạnh tiêu đề/thanh công cụ) ==
   .view-mode-switch CHỈ hiện trên màn hình hẹp (điện thoại/máy tính bảng,
   <=900px) — máy tính không cần vì đã luôn là bố cục desktop. 2 instance
   trong index.html (topbar Tổng quan các dự án, topbar khi xem 1 dự án) dùng
   chung 1 class, đồng bộ trạng thái active qua JS (xem app.js,
   initViewModeSwitch()). Bấm nút KHÔNG active sẽ lưu lựa chọn rồi TẢI LẠI
   TRANG — xem lý do trong app.js (đổi viewport lúc trang đã hiện ra không
   đáng tin cậy bằng đổi lại từ đầu mỗi lần tải trang, giống hệt cách nút
   "Xem như trên máy tính" của Chrome hoạt động). */
.view-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* CODEX (19/09/2026): tăng độ tương phản — bản trước quá mờ trên nền
     topbar navy, anh Nhật không nhận ra đây là 1 nút bấm được. */
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 2px;
  flex-shrink: 0;
}
.view-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.view-mode-btn.active {
  background: #fff;
  color: var(--accent-text);
}
/* CODEX (19/09/2026): KHÔNG dùng @media (min-width...) để ẩn nút này nữa —
   lỗi thật đã gặp: khi đang ở "chế độ máy tính" (viewport giả lập rộng
   1280px), chính @media này lại hiểu nhầm là màn hình rộng >900px nên TỰ ẨN
   LUÔN nút chuyển đổi, khiến người dùng bị KẸT ở chế độ máy tính, không còn
   cách nào bấm quay lại điện thoại (đúng lỗi anh Nhật gặp phải). Ẩn/hiện nút
   này giờ do JS quyết định dựa vào `screen.width` (kích thước MÀN HÌNH THẬT
   của máy, không đổi theo viewport giả lập) — xem app.js, initViewModeSwitch().
   Mặc định hiện sẵn (JS sẽ ẩn đi nếu phát hiện đúng là máy tính thật). */
.view-mode-switch { display: inline-flex; }

/* CODEX 23/09/2026 "QUẢN TRỊ CÔNG TY" (tab Quản trị SaaS) */
.saas-kpi-grid { margin-bottom: 12px; }
.saas-companies-table .saas-actions { white-space: nowrap; text-align: center; }
.saas-companies-table .saas-actions .btn-ghost { padding: 4px 8px; font-size: 12px; margin: 2px; }
.saas-companies-table .saas-c-delete { color: var(--danger); border-color: #f3c4c4; background: #fdf1f1; }
.saas-companies-table .saas-invite { letter-spacing: 1px; color: var(--accent-text); }
.saas-companies-table .saas-copy-code, .saas-companies-table .saas-reset-code { text-decoration: none; margin-left: 4px; font-size: 13px; }
.saas-row-selected td { background: var(--accent-bg) !important; }
.saas-filter-chip { font-size: 12px; background: var(--accent-bg); color: var(--accent-text); border-radius: 99px; padding: 5px 10px; white-space: nowrap; }
.saas-filter-chip a { margin-left: 6px; text-decoration: none; color: var(--danger); font-weight: 700; }

/* CODEX 23/09/2026 "TỐI ƯU TRANG NHẬT KÝ" */
#tab-logs .metric-grid-5 { gap: 12px; margin-bottom: 12px; }
#tab-logs .metric-grid-5 .metric-card { padding: 7px 16px 7px 18px !important; min-height: 0 !important; }
#tab-logs .metric-grid-5 .metric-top { margin-bottom: 2px; }
#tab-logs .metric-grid-5 .metric-value { margin-top: 0; line-height: 1.25; }
#tab-logs .metric-grid-5 .metric-sub { margin-top: 1px; }
#tab-logs .badge-category { font-size: 13.5px; padding: 4px 11px; }
#tab-logs .log-doc { font-weight: 600; white-space: nowrap; }
#tab-logs .log-doc-invoice { color: #1e7d34; }
#tab-logs .log-doc-other { color: var(--accent); }
#tab-logs .log-cost-empty { color: var(--text-muted); }
@media (min-width: 1181px) {
  .log-filter-bar { grid-template-columns: 2.4fr 1fr 1fr 1fr 1.15fr 0.85fr; }
}

/* ===== 25/09/2026: VAI TRÒ "CHỈ XEM" — ẩn mọi nút thêm/sửa/xoá/nhập =====
   (chặn thật nằm ở database; đây chỉ để giao diện gọn, không bấm nhầm) */
body.role-viewer #portfolio-new-project-btn, body.role-viewer #edit-project-btn, body.role-viewer #new-project-btn,
body.role-viewer #add-log-btn, body.role-viewer #materials-import-btn, body.role-viewer #add-material-btn,
body.role-viewer #add-subctr-btn, body.role-viewer #subctr-item-import-btn, body.role-viewer #subctr-item-delete-all-btn,
body.role-viewer #add-subctr-item-btn, body.role-viewer #add-supplier-btn, body.role-viewer #suppliers-note-save-btn,
body.role-viewer #add-plan-btn, body.role-viewer #add-report-btn, body.role-viewer #report-delete-btn,
body.role-viewer #appendix-import-btn, body.role-viewer #add-issue-btn, body.role-viewer #quality-import-btn,
body.role-viewer #add-subctr-payment-form, body.role-viewer #add-payment-form, body.role-viewer #subctr-log-form,
body.role-viewer .edit-link, body.role-viewer .delete-link { display: none !important; }
body.role-viewer .tab-panel table input, body.role-viewer .tab-panel table select, body.role-viewer .tab-panel table textarea,
body.role-viewer #portfolio-screen table select, body.role-viewer #suppliers-note,
body.role-viewer #tab-reports input:not([type="checkbox"]), body.role-viewer #tab-reports textarea {
  pointer-events: none; background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
#viewer-mode-pill {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  background: #16325c; color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 6px 12px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.18); pointer-events: none;
}

/* Ô chọn vai trò (tab Người dùng + Quản trị SaaS) */
.role-select { width: auto; padding: 4px 8px; font-size: 12.5px; font-weight: 600; border-radius: 8px; }
.role-select.role-admin { color: #1e7d34; background: #e6f4ea; }
.role-select.role-member { color: #1e4b8a; background: #eef3fa; }
.role-select.role-viewer { color: #8a4a08; background: var(--accent-bg); }

/* Sao lưu dữ liệu */
.backup-card { padding: 14px 16px; }
.backup-card-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.backup-card-inner > div { flex: 1 1 320px; }

/* Lịch sử chỉnh sửa */
.audit-filter-bar { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1fr 0.9fr 0.9fr; gap: 10px; margin-bottom: 10px; align-items: end; }
.audit-filter-bar label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
@media (max-width: 1000px) { .audit-filter-bar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .audit-filter-bar { grid-template-columns: repeat(2, 1fr); } }
.audit-table td { vertical-align: top; }
.audit-changes { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.audit-action { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.audit-INSERT { background: #e6f4ea; color: #1e7d34; }
.audit-UPDATE { background: #eef3fa; color: #1e4b8a; }
.audit-DELETE { background: #fbe2e2; color: #9c1f1f; }


/* ===================== 26/09/2026: RÀ SOÁT HIỂN THỊ ĐIỆN THOẠI ===================== */
.list-row-amount { white-space: nowrap; font-weight: 600; }
@media (max-width: 640px) {
  /* --- Bảng "Tổng hợp chi phí theo hạng mục": tên hạng mục KHÔNG bị cắt chữ,
         icon nằm cùng dòng với tên, cột % chỉ hiện số (bỏ thanh nhỏ) --- */
  #cost-summary-card .data-table { font-size: 12px; }
  #cost-summary-card .data-table th, #cost-summary-card .data-table td { padding: 7px 3px; }
  #cost-summary-card .data-table th:first-child, #cost-summary-card .data-table td:first-child { width: auto; white-space: nowrap; }
  #cost-summary-card .data-table td:first-child .cat-name {
    display: inline !important; -webkit-line-clamp: unset !important; line-clamp: unset !important;
    overflow: visible !important; white-space: nowrap; font-size: 12.5px;
  }
  #cost-summary-card .cat-icon { width: 22px; height: 22px; margin-right: 5px; border-radius: 6px; }
  #cost-summary-card .cat-icon svg { width: 14px; height: 14px; }
  #cost-summary-card .data-table td.num, #cost-summary-card .data-table th.num { font-size: 12px; }
  #cost-summary-card .data-table td:last-child .progress-bar { display: none; }
  #cost-summary-card .data-table td:last-child, #cost-summary-card .data-table th:last-child { text-align: right; white-space: nowrap; }
  #cost-summary-card .data-table td:last-child span { font-size: 12px !important; font-weight: 600; }
  #cost-summary-card .donut { width: 150px; height: 150px; }
  /* Cột "Hôm nay" ẩn trên điện thoại cho đủ chỗ (xem chi phí hôm nay ở ô KPI tab Nhật ký) */
  #cost-summary-card .data-table th:nth-child(2), #cost-summary-card .data-table td:nth-child(2) { display: none; }

  /* --- Mốc "Hôm nay" không đè lên chữ ngày bắt đầu/kết thúc --- */
  .timeline-labels { margin-top: 14px; font-size: 12px; gap: 8px; }
  .timeline-labels span:last-child { text-align: right; }

  /* --- 5 KPI xếp 2 cột: ô lẻ cuối cùng giãn hết hàng cho cân --- */
  .metric-grid-5 > .metric-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* --- Mọi bảng dữ liệu khác: cột chữ không bị bóp còn 1 chữ/dòng.
         Bảng rộng hơn màn hình thì vuốt ngang để xem tiếp. --- */
  .tab-panel:not(#tab-dashboard) .data-table th { min-width: 64px; white-space: normal; }
  .tab-panel:not(#tab-dashboard) .data-table td { min-width: 56px; }
  .tab-panel:not(#tab-dashboard) .data-table td.row-title-cell { min-width: 170px; }
  .tab-panel:not(#tab-dashboard) .data-table td.num { min-width: 90px; }
  .tab-panel:not(#tab-dashboard) .table-wrap {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--surface-1) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--surface-1) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) right center / 10px 100% no-repeat scroll;
  }

  /* --- Bảng Nhật ký: trên điện thoại hiện dạng THẺ, mỗi giao dịch 1 thẻ:
         dòng 1: Mô tả ........ Chi phí
         dòng 2: Ngày · Nhóm CP ...... Chứng từ
         dòng 3: Công ty thụ hưởng ... Người thực hiện
         dòng 4: nút Sửa / Xoá --- */
  #tab-logs .table-wrap { overflow: visible; background: none; }
  #tab-logs .logs-table { min-width: 0 !important; background: transparent !important; }
  #tab-logs .logs-table thead { display: none; }
  #tab-logs .logs-table, #tab-logs .logs-table tbody { display: block; width: 100%; }
  #tab-logs .logs-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;
    background: var(--surface-1);
    border: 1px solid var(--card-border, var(--border));
    border-radius: 12px; padding: 11px 12px; margin-bottom: 10px;
  }
  #tab-logs .logs-table tbody tr::before { content: ""; order: 3; flex-basis: 100%; height: 0; }
  #tab-logs .logs-table tbody tr::after { content: ""; order: 7; flex-basis: 100%; height: 0; }
  #tab-logs .logs-table tbody td { display: block; border: none !important; padding: 0 !important; min-width: 0 !important; text-align: left !important; background: transparent !important; }
  #tab-logs .logs-table tbody td:nth-child(3) { order: 1; flex: 1 1 0; font-weight: 700; font-size: 14px; line-height: 1.35; }
  #tab-logs .logs-table tbody td:nth-child(7) { order: 2; flex: 0 0 auto; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
  #tab-logs .logs-table tbody td:nth-child(1) { order: 4; font-size: 12.5px; color: var(--text-secondary); }
  #tab-logs .logs-table tbody td:nth-child(2) { order: 5; }
  #tab-logs .logs-table tbody td:nth-child(6) { order: 6; margin-left: auto; font-size: 12.5px; text-align: right !important; }
  #tab-logs .logs-table tbody td:nth-child(6) br { display: none; }
  #tab-logs .logs-table tbody td:nth-child(4) { order: 8; flex: 1 1 0; font-size: 12.5px; color: var(--text-muted); }
  #tab-logs .logs-table tbody td:nth-child(5) { order: 9; flex: 0 1 auto; font-size: 12.5px; color: var(--text-muted); text-align: right !important; }
  #tab-logs .logs-table tbody td:nth-child(8) { order: 10; flex-basis: 100%; display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; }
  #tab-logs .logs-table tbody td:nth-child(8):empty { display: none; }
  #tab-logs .logs-table tbody td[colspan] { flex-basis: 100%; text-align: center !important; }
  #tab-logs .badge-category { font-size: 12px; padding: 3px 9px; }
}
@media (max-width: 640px) {
  #tab-logs .logs-table tbody td:nth-child(6) br + span::before { content: " · "; }
}
@media (max-width: 640px) {
  .tab-panel:not(#tab-dashboard) .data-table td.material-name-cell { min-width: 150px; }
}

/* 26/09/2026: Ví dụ mẫu file Excel (hiện mờ khi bảng chưa có dữ liệu) */
.excel-sample { margin: 14px 0 6px; border: 1.5px dashed #c9c3b8; border-radius: 12px; padding: 12px 14px; background: #fcfbf8; }
.excel-sample-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.excel-sample-top > div { flex: 1 1 300px; }
.excel-sample-title { font-size: 13.5px; font-weight: 700; color: var(--text-secondary); letter-spacing: .2px; }
.excel-sample-note { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.excel-sample-dl { white-space: nowrap; padding: 6px 12px; font-size: 13px; }
.excel-sample-table-wrap { position: relative; overflow-x: auto; }
.excel-sample-table { width: 100%; border-collapse: collapse; font-size: 13px; opacity: .55; filter: saturate(.8); user-select: none; min-width: 520px; }
.excel-sample-table th { background: #1f3553; color: #fff; font-weight: 700; padding: 7px 10px; text-align: left; border: 1px solid #2d4668; white-space: nowrap; }
.excel-sample-table td { padding: 6px 10px; border: 1px solid #e3ded5; background: #fff; color: #333; }
.excel-sample-table td:first-child { font-family: ui-monospace, Consolas, monospace; text-align: right; width: 48px; }
.excel-sample-table td.num { text-align: right; font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
.excel-sample-table tr.excel-sample-group td { background: #f3f1ec; font-weight: 700; }
.excel-sample-watermark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: 54px; font-weight: 900; letter-spacing: 12px; color: rgba(217,114,12,.14); transform: rotate(-8deg);
}
body.role-viewer .excel-sample { display: none !important; }

/* 26/09/2026: thanh báo lỗi tải dữ liệu */
#load-error-banner {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 200;
  width: min(760px, calc(100% - 20px)); display: flex; align-items: center; gap: 10px;
  background: #fdecec; color: #8f1d1d; border: 1.5px solid #e9a3a3; border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.15); font-size: 13.5px; line-height: 1.45;
}
#load-error-banner .leb-msg { flex: 1; font-weight: 600; }
#load-error-banner .leb-retry { background: #c0392b; color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
#load-error-banner .leb-retry:disabled { opacity: .7; }
#load-error-banner .leb-close { background: transparent; border: none; color: #8f1d1d; font-size: 16px; cursor: pointer; padding: 4px; }

/* 26/09/2026: Rà soát hợp đồng Nhà cung cấp */
.sup-kpi-grid { margin-bottom: 12px; }
.sup-nocontract-box { background: #fff8ea; border: 1.5px solid #f0c774; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.sup-nc-title { font-weight: 700; color: #8a4a08; margin-bottom: 8px; font-size: 13.5px; }
.sup-nc-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px dashed #efd8a6; flex-wrap: wrap; }
.sup-nc-name { flex: 1 1 220px; display: flex; flex-direction: column; }
.sup-nc-name span { font-size: 12px; color: var(--text-muted); }
.sup-nc-amt { font-weight: 700; white-space: nowrap; }
.sup-nc-act { display: flex; gap: 6px; }
.sup-nc-act button { padding: 5px 10px; font-size: 12.5px; }
.sup-nc-foot { margin-top: 6px; font-size: 12px; }
.sup-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sup-filter-note { font-size: 12px; color: var(--text-muted); }
.suppliers-table .sup-match { color: #1e7d34; font-weight: 600; white-space: nowrap; }
.suppliers-table .sup-mismatch { color: #b35c00; font-weight: 700; white-space: nowrap; cursor: help; }
.suppliers-table .sup-diff { font-size: 12px; color: #b35c00; }
.suppliers-table .sup-shared { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.suppliers-table .sup-over { color: var(--danger); font-weight: 700; white-space: nowrap; }
.suppliers-table .sup-frame { font-size: 12px; color: #1e4b8a; background: #eef3fa; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.suppliers-table tr.sup-row-unsigned td { background: #fff5f5 !important; }
.badge-unsigned-alert { background: #fbe2e2; color: #9c1f1f; font-weight: 700; }
#sup-status-filter .toggle-btn { white-space: nowrap; }

/* 27/09/2026: màn hình đăng nhập */
#auth-error.is-info { background: #e6f4ea; color: #1e6b34; border: 1px solid #b8e0c4; }
.auth-input-wrap input.has-eye { padding-right: 42px; }
.auth-input-wrap .password-toggle-btn svg { position: static; left: auto; width: 18px; height: 18px; pointer-events: none; }
.auth-input-wrap .password-toggle-btn { pointer-events: auto; right: 6px; }
#signup-mode-toggle { margin-bottom: 12px; }

/* ===== 27/09/2026: TỔNG QUAN CÁC DỰ ÁN (viết lại) ===== */
.pf-kpi-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .pf-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* Ô chọn năm: gọn, trung tính (bỏ nền cam cũ) */
.pf-list-header { align-items: center; }
.pf-list-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-list-title h3 { margin: 0; }
select.pf-year-select {
  width: auto; min-width: 150px; padding: 6px 30px 6px 12px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 8px; background-color: var(--surface-1); color: var(--text-primary); cursor: pointer;
}
select.pf-year-select:hover { border-color: #b9c4d4; }
select.pf-year-select:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(30,75,138,.12); outline: none; }
.pf-year-note { font-size: 12px; color: var(--text-muted); }

/* Cột bảng mới: Năm | Dự án | Trạng thái | HĐ | Đã TT | Còn phải thu | CP | Lãi gộp | Tiến độ | nút */
table.pf-table { min-width: 1230px; }
table.pf-table th:nth-child(1), table.pf-table td:nth-child(1) { width: 52px; }
table.pf-table th:nth-child(2), table.pf-table td:nth-child(2) { width: 200px; }
table.pf-table th:nth-child(3), table.pf-table td:nth-child(3) { width: 128px; }
table.pf-table th:nth-child(4), table.pf-table td:nth-child(4),
table.pf-table th:nth-child(5), table.pf-table td:nth-child(5),
table.pf-table th:nth-child(6), table.pf-table td:nth-child(6),
table.pf-table th:nth-child(7), table.pf-table td:nth-child(7),
table.pf-table th:nth-child(8), table.pf-table td:nth-child(8) { width: 124px; }
table.pf-table th:nth-child(7), table.pf-table th:nth-child(8) { white-space: nowrap; }
table.pf-table th:nth-child(9), table.pf-table td:nth-child(9) { width: 190px; }
table.pf-table th:nth-child(10), table.pf-table td:nth-child(10) { width: 92px; }
table.pf-table th.pf-sort { cursor: pointer; user-select: none; }
table.pf-table th.pf-sort:hover { color: var(--navy-2); }
table.pf-table th.pf-sort.sorted[data-dir="asc"]::after { content: " ▲"; font-size: 9px; }
table.pf-table th.pf-sort.sorted[data-dir="desc"]::after { content: " ▼"; font-size: 9px; }
.pf-th-hint { font-weight: 500; font-size: 11px; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
table.pf-table tr.pf-row { cursor: pointer; }
.pf-profit-sub { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.pf-profit { font-weight: 700; }
.pf-profit.pos { color: #1e7d34; }
.pf-profit.low { color: #b35c00; }
.pf-profit.neg { color: var(--danger); }
.pf-recv-alert { color: #b3261e; font-weight: 700; }
.pf-recv-ok { font-size: 12px; font-weight: 600; color: #1e7d34; background: #e6f4ea; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.dual-progress.tri { gap: 4px; min-width: 0; }
.dual-progress.tri .dp-label { width: 58px; font-size: 11px; }
.dp-fill.work { background: #1baf7a; }
.dp-fill.late { background: var(--danger); }
.dp-na { font-size: 11px; color: var(--text-muted); font-style: italic; }
.pf-margin-setting { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pf-margin-setting input { width: 56px; padding: 3px 6px; font-size: 12px; text-align: center; }
/* thu gọn cho vừa khung 1.288px (không phải kéo ngang trên máy tính) */
table.pf-table { min-width: 1190px; }
table.pf-table td { padding-left: 8px; padding-right: 8px; }
table.pf-table th:nth-child(1), table.pf-table td:nth-child(1) { width: 46px; }
table.pf-table th:nth-child(2), table.pf-table td:nth-child(2) { width: 186px; }
table.pf-table th:nth-child(3), table.pf-table td:nth-child(3) { width: 122px; }
table.pf-table th:nth-child(4), table.pf-table td:nth-child(4),
table.pf-table th:nth-child(5), table.pf-table td:nth-child(5),
table.pf-table th:nth-child(6), table.pf-table td:nth-child(6),
table.pf-table th:nth-child(7), table.pf-table td:nth-child(7),
table.pf-table th:nth-child(8), table.pf-table td:nth-child(8) { width: 116px; }
table.pf-table th:nth-child(9), table.pf-table td:nth-child(9) { width: 176px; }
table.pf-table th:nth-child(10), table.pf-table td:nth-child(10) { width: 84px; }
table.pf-table .btn-detail { padding: 6px 8px; font-size: 12px; white-space: nowrap; }

/* 27/09/2026: Cảnh báo tiến độ + Nhắc việc cùng 1 hàng */
.dash-row-alerts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: stretch; }
.dash-row-alerts.no-insight { grid-template-columns: 1fr; }
.dash-row-alerts .insight-stack { grid-template-columns: 1fr; margin-bottom: 0; align-content: start; gap: 10px; }
.dash-row-alerts .reminder-card { margin: 0; padding: 10px 16px 8px; }
.reminder-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.reminder-head h3 { margin: 0; font-size: 15px; }
.reminder-count { background: #fbe2e2; color: #9c1f1f; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 99px; }
.reminder-count:empty { display: none; }
.dash-row-alerts .reminder-row { padding: 6px 0; }
.reminder-row.is-link { cursor: pointer; border-radius: 6px; }
.reminder-row.is-link:hover .reminder-text { color: var(--navy-2); text-decoration: underline; }
.reminder-more { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent-text); margin-top: 2px; }
.dash-row-alerts .reminder-empty { padding: 7px 12px; }
@media (max-width: 760px) { .dash-row-alerts { grid-template-columns: 1fr; } }
/* Hàng cảnh báo gọn: ô cảnh báo 1/3 (kéo cao bằng hàng), Nhắc việc 2/3 chia 2 cột */
.dash-row-alerts { grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr); }
.dash-row-alerts .insight-stack { align-content: stretch; }
.dash-row-alerts .insight-stack .insight-card { align-items: center; }
.dash-row-alerts #reminder-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.dash-row-alerts #reminder-list .reminder-row:nth-child(2) { border-top: none; }
.dash-row-alerts #reminder-list .reminder-empty { grid-column: 1 / -1; }
.dash-row-alerts.no-insight #reminder-list { grid-template-columns: repeat(3, 1fr); }
.dash-row-alerts.no-insight #reminder-list .reminder-row:nth-child(3) { border-top: none; }
@media (max-width: 760px) {
  .dash-row-alerts { grid-template-columns: 1fr; }
  .dash-row-alerts #reminder-list, .dash-row-alerts.no-insight #reminder-list { grid-template-columns: 1fr; }
  .dash-row-alerts #reminder-list .reminder-row:nth-child(2), .dash-row-alerts #reminder-list .reminder-row:nth-child(3) { border-top: 0.5px solid var(--border); }
}
.insight-extra { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #efd8a6; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
/* 27/09/2026: 4 ô tổng tab Vật tư bị cắt số tiền trên điện thoại ~375px */
@media (max-width: 480px) {
  .materials-summary-grid .msc-value { font-size: 13.5px; }
  .materials-summary-grid .msc-icon { width: 26px; height: 26px; font-size: 13px; }
  .materials-summary-grid .msc-card, .materials-summary-grid > * { gap: 7px; padding-left: 10px; padding-right: 8px; }
}

/* 27/09/2026: nhập nhật ký nhanh */
.fab-add-log {
  position: fixed; right: 18px; bottom: 20px; z-index: 55;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--accent), #c8650a); color: #fff;
  font-size: 32px; font-weight: 400; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px rgba(217,114,12,.45); display: flex; align-items: center; justify-content: center;
}
.fab-add-log:active { transform: scale(.94); }
@media (min-width: 901px) { .fab-add-log { width: 50px; height: 50px; font-size: 28px; } }
body.role-viewer .fab-add-log { display: none !important; }
.log-submit-row { display: flex; gap: 8px; margin-top: 14px; }
.log-submit-row .btn-primary { flex: 1.3; }
.log-submit-row .btn-ghost { flex: 1; white-space: nowrap; }
.log-beneficiary-hint { font-size: 12px; color: #1e6b34; min-height: 0; margin-top: 3px; }
.log-beneficiary-hint:empty { display: none; }
#log-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); z-index: 1000;
  background: #1e6b34; color: #fff; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: all .2s; max-width: calc(100% - 30px);
}
#log-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* nút + không đè lên form đang mở; thông báo "Đã lưu" hiện phía trên */
body:has(.modal-backdrop[style*="flex"]) .fab-add-log { display: none; }
#log-toast { bottom: auto; top: 14px; transform: translateX(-50%) translateY(-20px); }
#log-toast.show { transform: translateX(-50%) translateY(0); }

/* 27/09/2026: hướng dẫn tắt "Trang web cho máy tính" trên điện thoại.
   Trang đang hiện kiểu máy tính thu nhỏ nên chữ phải TO để đọc được. */
#rds-hint {
  position: fixed; left: 0; right: 0; top: 0; z-index: 3000;
  background: #fff8ea; border-bottom: 3px solid #d9720c; color: #5a3200;
  padding: 26px 34px; font-size: 30px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
#rds-hint .rds-title { font-weight: 700; margin-bottom: 12px; }
#rds-hint .rds-steps { font-size: 26px; }
#rds-hint button { margin-top: 16px; font-size: 28px; padding: 12px 28px; border-radius: 12px; border: none; background: #d9720c; color: #fff; font-weight: 700; }

/* ===== 27/09/2026: Nguồn lực & chi phí cố định ===== */
#res-card .section-header { align-items: flex-start; gap: 12px; }
.res-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; max-width: 760px; }
.res-error { background: #fdecec; color: #8f1d1d; border: 1px solid #e9a3a3; border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.res-kpi-grid { grid-template-columns: repeat(4, 1fr); margin: 10px 0 12px; }
@media (max-width: 1000px) { .res-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.res-groups { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 1100px) { .res-groups { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .res-groups { grid-template-columns: repeat(2, 1fr); } }
.res-group { display: flex; gap: 9px; align-items: center; background: var(--surface-0); border: 1px solid var(--card-border, var(--border)); border-radius: 10px; padding: 9px 11px; }
.res-g-icon { font-size: 22px; }
.res-g-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.res-g-val { font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.res-g-val span { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-left: 3px; }
.res-by-project { margin-bottom: 12px; }
.res-by-project:empty { display: none; }
.res-bp-title { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.res-bp-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.res-bp-row b { flex: 1 1 200px; }
.res-bp-cost { font-weight: 700; white-space: nowrap; }
.res-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.res-toolbar input[type=search] { max-width: 320px; }
.res-inactive-toggle { font-size: 12.5px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
.res-inactive-toggle input { width: auto; }
.res-table .res-note { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.res-table .res-idle { color: #b35c00; font-weight: 600; }
.res-table tr.res-inactive td { opacity: .55; }
.res-cat-toggle { flex-wrap: wrap; }
.res-cat-toggle .toggle-btn { flex: 1 1 45%; font-size: 12.5px; }
.res-calc { font-size: 12.5px; color: #1e6b34; margin-top: 4px; }
.res-active-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary); margin: 10px 0 4px; font-weight: 500; }
.res-active-row input { width: auto; margin-top: 2px; }
body.role-viewer #res-add-btn { display: none !important; }
/* 27/09/2026: ghi chú lãi trên giấy vs tiền đã thu */
.res-cash-note { background: #eef5fc; border: 1px solid #c9dff3; border-radius: 10px; padding: 10px 13px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 12px; }
.res-cash-note.neg { background: #fff4f2; border-color: #f0c2bb; }
.res-cash-note b.neg { color: var(--danger); }
.res-cash-note b.pos { color: #1e7d34; }

/* 27/09/2026: căn thẳng hàng các khe hở của Tổng quan theo lưới 5 cột của hàng KPI */
@media (min-width: 1181px) {
  .dash-row-alerts, .dash-row-progress, .dash-row-cost { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
  .dash-row-alerts > .insight-stack { grid-column: span 2; }
  .dash-row-alerts > .reminder-card { grid-column: span 3; }
  .dash-row-alerts.no-insight > .reminder-card { grid-column: 1 / -1; }
  #timeline-card, #work-progress-card { grid-column: span 2; }
  #issue-summary-card { grid-column: span 1; }
  #timeline-card[style*="none"] ~ #work-progress-card { grid-column: span 3; }
  #timeline-card[style*="none"] ~ #issue-summary-card { grid-column: span 2; }
  #cost-summary-card { grid-column: span 3; }
  #debt-card { grid-column: span 2; }
}

/* 27/09/2026: ngày đã thu tiền giữ lại BH / QT */
.retain-paid { margin-top: 6px; font-size: 13px; min-height: 22px; }
.retain-btn { border: 1px dashed var(--primary, #fa7120); background: transparent; color: var(--primary, #fa7120); border-radius: 8px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.retain-btn:hover { background: rgba(250,113,32,.08); }
.retain-link { border: 0; background: none; color: var(--muted, #6b7280); text-decoration: underline; font-size: 12.5px; cursor: pointer; padding: 0 4px; font-family: inherit; }
.retain-link.danger { color: var(--danger, #c0392b); }
.retain-ok { color: #15803d; font-weight: 600; }
.retain-wait { color: var(--muted, #6b7280); }
.metric-value.retain-done { color: var(--muted, #9ca3af) !important; text-decoration: line-through; }
.retain-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.retain-edit input[type=date] { padding: 3px 6px; font-size: 13px; border: 1px solid var(--border, #ddd); border-radius: 6px; }
.retain-paid { margin-top: 4px; font-size: 12px; min-height: 0; }
.retain-btn-sm { font-size: 12px; padding: 1px 7px; border-radius: 6px; line-height: 1.5; }
.retain-ok { font-size: 12px; }
.retain-link { font-size: 12px; }
.retain-edit input[type=date] { font-size: 12px; padding: 2px 4px; max-width: 130px; }
.retain-edit .retain-btn { font-size: 12px; padding: 1px 8px; }
.pf-retain-held { color: #b45309 !important; font-weight: 600; margin-top: 3px; }

/* 27/09/2026 (b): Nhắc việc thấp hơn — 3 cột trên máy tính, ô cảnh báo gọn lại */
@media (min-width: 1181px) {
  .dash-row-alerts #reminder-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  .dash-row-alerts #reminder-list .reminder-row:nth-child(-n+3) { border-top: none; }
  .dash-row-alerts #reminder-list .reminder-empty { grid-column: 1 / -1; }
}
.dash-row-alerts .reminder-card { padding: 8px 14px 6px; }
.dash-row-alerts .reminder-head { margin-bottom: 2px; }
.dash-row-alerts .reminder-row { padding: 4px 0; line-height: 1.35; }
.dash-row-alerts .insight-stack .insight-card { padding: 7px 12px; line-height: 1.4; }
.dash-row-alerts .insight-card .insight-text { font-size: 12.5px; }
.dash-row-alerts .insight-card [style*="dashed"], .dash-row-alerts .insight-card hr { margin-top: 4px !important; padding-top: 4px !important; }

/* 27/09/2026 (b): Danh sách dự án — gọn, thẳng hàng */
table.pf-table td { padding-top: 10px; padding-bottom: 10px; }
table.pf-table thead th { font-size: 12px; letter-spacing: .3px; }
table.pf-table td.num { font-size: 13.5px; font-weight: 600; color: var(--text, #1f2937); }
table.pf-table td.num .pf-profit-sub { font-size: 12px; font-weight: 500; line-height: 1.3; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.pf-table td.num .pf-retain-held { color: #b45309 !important; font-weight: 600; }
table.pf-table .pf-recv-ok { display: inline-block; font-size: 12px; padding: 1px 9px; }
table.pf-table .proj-cell { align-items: center; }
table.pf-table .proj-name { font-size: 13px; line-height: 1.3; }
table.pf-table .proj-flag { font-size: 12px; margin-top: 2px; }
/* trạng thái: pill cùng 1 độ rộng */
table.pf-table .status-pill-wrap { display: block; }
table.pf-table .status-pill.status-select { width: 100%; padding: 4px 24px 4px 10px; font-size: 12px; text-align: left; }
table.pf-table .status-pill-wrap::after { right: 9px; width: 6px; height: 6px; }
/* tiến độ: 3 cột cố định để thanh & % thẳng hàng; "chưa có PLHĐ" nằm đúng chỗ thanh */
table.pf-table .dual-progress.tri .dp-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 6px; align-items: center; }
table.pf-table .dual-progress.tri .dp-label { width: auto; font-size: 11px; }
table.pf-table .dual-progress.tri .dp-na { grid-column: 2 / 4; font-size: 11px; font-style: normal; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 1px; line-height: 1.2; }
table.pf-table .dual-progress.tri .dp-val { width: auto; font-size: 11px; }
/* nút Chi tiết nhẹ hơn, không lấn bảng */
table.pf-table .btn-detail { background: transparent; color: var(--navy-2, #1e4b8a); border: 1px solid #c9d4e3; padding: 5px 10px; font-size: 12px; border-radius: 7px; }
table.pf-table .btn-detail:hover { background: var(--navy, #1b2f55); color: #fff; border-color: var(--navy, #1b2f55); }
table.pf-table tbody tr:hover .btn-detail { border-color: var(--navy-2, #1e4b8a); }
table.pf-table .total-row td { font-size: 13.5px; }
.dash-row-alerts .insight-extra { margin-top: 5px !important; padding-top: 5px !important; font-size: 12px; }

/* 28/09/2026: Nguồn lực & chi phí cố định bị tràn ngang trên điện thoại —
   .res-g-val nowrap ("…đ/tháng · N mục") đẩy cột lưới rộng quá khung.
   Dùng minmax(0,1fr) để cột không bị nội dung kéo giãn, và cho phần
   "/tháng · N mục" xuống dòng riêng ở màn hình hẹp. */
.res-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.res-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.res-group > div { min-width: 0; }
@media (max-width: 1000px) { .res-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .res-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .res-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .res-group { padding: 8px 9px; gap: 7px; }
  .res-g-icon { font-size: 18px; }
  .res-g-label { font-size: 12px; line-height: 1.3; }
  .res-g-val { font-size: 13.5px; }
  .res-g-val span { display: block; margin-left: 0; }
  #res-card .kpi-sub { font-size: 12px; line-height: 1.35; }
  #res-card .kpi-label { font-size: 12px; line-height: 1.3; }
  .res-sub { font-size: 12px; }
  .res-cash-note { font-size: 12.5px; padding: 9px 10px; }
  .res-bp-row { gap: 4px 10px; }
  .res-bp-row b { flex: 1 1 100%; }
  .res-toolbar input[type=search] { max-width: none; flex: 1 1 100%; }
  #res-card { overflow-x: hidden; }
}
.res-m-icon, .res-m-unit { display: none; }
@media (max-width: 640px) {
  /* Bảng nguồn lực → dạng thẻ trên điện thoại */
  #res-card .table-wrap { overflow-x: visible; }
  .res-table { min-width: 0 !important; width: 100%; table-layout: auto; }
  .res-table thead { display: none; }
  .res-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
    grid-template-areas: "name cost" "desc cost" "where act";
    padding: 9px 4px; border-bottom: 1px solid var(--border);
  }
  .res-table tbody td { display: block; padding: 0 !important; border: 0 !important; white-space: normal; text-align: left; }
  .res-table .res-c-cat, .res-table .res-c-qty { display: none; }
  .res-table .res-c-name { grid-area: name; font-weight: 700; font-size: 14px; text-transform: none; }
  .res-table .res-c-desc { grid-area: desc; font-size: 12.5px; color: var(--text-secondary); }
  .res-table .res-c-where { grid-area: where; font-size: 12px; color: var(--text-muted); }
  .res-table .res-c-cost { grid-area: cost; text-align: right; font-weight: 700; white-space: nowrap; align-self: start; }
  .res-table .res-c-act { grid-area: act; text-align: right; white-space: nowrap; align-self: end; }
  .res-table .res-c-act a { min-height: 30px; padding: 4px 10px; font-size: 12px; }
  .res-table .res-m-icon { display: inline; margin-right: 5px; }
  .res-table .res-m-unit { display: inline; font-size: 12px; font-weight: 500; color: var(--text-muted); }
  .res-table tbody td[colspan] { grid-column: 1 / -1; text-align: center; }
  .res-table tfoot tr { display: flex; justify-content: space-between; padding: 10px 4px; }
  .res-table tfoot td { display: block; padding: 0 !important; border: 0 !important; font-weight: 700; }
  .res-table tfoot td:last-child { display: none; }
}

/* ====== 28/09/2026: RÀ SOÁT TRÀN / CHỮ BỊ ẨN TRÊN ĐIỆN THOẠI ====== */
@media (max-width: 640px) {
  /* 1. Danh sách dự án (Tổng quan các dự án) → dạng thẻ, không phải vuốt ngang */
  #portfolio-screen .table-wrap { overflow: visible; }
  table.pf-table { min-width: 0 !important; width: 100%; table-layout: auto !important; }
  table.pf-table thead, table.pf-table tfoot { display: none; }
  table.pf-table, table.pf-table tbody { display: block; width: 100%; }
  table.pf-table tbody tr.pf-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px;
    background: var(--surface-1); border: 1px solid var(--card-border, var(--border));
    border-radius: 12px; padding: 12px; margin-bottom: 10px;
  }
  table.pf-table tbody tr.pf-row td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; width: auto !important; text-align: left !important; white-space: normal; }
  table.pf-table tbody tr.pf-row td:nth-child(2) { grid-column: 1 / -1; order: 1; }
  table.pf-table tbody tr.pf-row td:nth-child(3) { order: 2; }
  table.pf-table tbody tr.pf-row td:nth-child(1) { order: 3; align-self: center; text-align: right !important; font-size: 12.5px; color: var(--text-muted); }
  table.pf-table tbody tr.pf-row td:nth-child(1)::before { content: "Khởi công năm "; }
  table.pf-table tbody tr.pf-row td:nth-child(n+4):nth-child(-n+8) { order: 4; font-weight: 700; font-size: 14px; }
  table.pf-table tbody tr.pf-row td:nth-child(n+4):nth-child(-n+8)::before { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 1px; }
  table.pf-table tbody tr.pf-row td:nth-child(4)::before { content: "Giá trị HĐ"; }
  table.pf-table tbody tr.pf-row td:nth-child(5)::before { content: "Đã thanh toán"; }
  table.pf-table tbody tr.pf-row td:nth-child(6)::before { content: "Còn phải thu"; }
  table.pf-table tbody tr.pf-row td:nth-child(7)::before { content: "Chi phí lũy kế"; }
  table.pf-table tbody tr.pf-row td:nth-child(8)::before { content: "Lãi gộp"; }
  table.pf-table tbody tr.pf-row td:nth-child(9) { grid-column: 1 / -1; order: 5; }
  table.pf-table tbody tr.pf-row td:nth-child(10) { grid-column: 1 / -1; order: 6; }
  table.pf-table tbody tr.pf-row td:nth-child(10) .btn-detail { width: 100%; justify-content: center; }
  table.pf-table tbody tr.pf-row .proj-name { font-size: 14.5px; }
  table.pf-table td.num .pf-profit-sub { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; min-height: 0; }
  table.pf-table tbody tr.pf-row .dual-progress { width: 100%; max-width: none; }

  /* 2. Bảng các tab: cột chữ (nội dung, tên, ghi chú) không bị bóp còn 1 chữ/dòng */
  .tab-panel:not(#tab-dashboard) .data-table td:not(.num):not(.center):not(:first-child) { min-width: 120px; }
  .tab-panel:not(#tab-dashboard) .data-table td.nowrap { min-width: 0; }

  /* 3. Nút lọc dạng chip (Vật tư, Nhà cung cấp...) xuống dòng thay vì tràn */
  .tab-panel .toggle-group { flex-wrap: wrap; }

  /* 4. Tên dự án trên thanh đầu: hiện 2 dòng thay vì cắt "..." */
  #project-name-display { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; font-size: 14px; }

  /* 5. Nhãn dưới thanh Tiến độ thời gian không bị cắt mép phải */
  .timeline-labels { flex-wrap: wrap; }
  .timeline-labels span { white-space: normal; }
}
@media (max-width: 420px) {
  /* 6. Số tiền lớn ở 5 KPI Tổng quan dự án không chạm mép thẻ */
  #tab-dashboard .metric-grid-5 .metric-value { font-size: 17px; }
  #tab-dashboard .metric-grid-5 > .metric-card:last-child:nth-child(odd) .metric-value { font-size: 21px; }
}
/* Dòng phụ "CĐT giữ lại ... BH/QT (7%)" trong danh sách dự án: cho xuống dòng thay vì cắt */
table.pf-table td.num .pf-profit-sub { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 640px) { .timeline-labels span { flex: 1 1 0; min-width: 0; } }

/* 28/09/2026 (mục 2): hoá đơn VAT đầu vào */
.pf-inv-warn { color: #b35c00; font-weight: 700; }
.sup-inv { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.sup-inv.ok { color: #1e7d34; }
.sup-inv.warn { color: #b35c00; }

/* 28/09/2026 (mục 6): dự toán nội bộ */
.budget-details { margin: 12px 0 4px; border: 1px dashed var(--border); border-radius: 10px; padding: 8px 10px; }
.budget-details summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--text-secondary); }
.budget-hint { font-size: 12px; color: var(--text-muted); margin: 6px 0 4px; line-height: 1.45; }
.budget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.budget-total { font-size: 12.5px; margin-top: 8px; color: var(--text-secondary); }
.budget-total .neg { color: var(--danger); } .budget-total .pos { color: #1e7d34; }
#budget-compare { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.bc-empty { font-size: 12.5px; color: var(--text-muted); }
.bc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.bc-total { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.bc-total.near { color: #b35c00; } .bc-total.over { color: var(--danger); }
.bc-row { margin-bottom: 8px; }
.bc-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 3px; }
.bc-cat { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.bc-cat i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.bc-num { color: var(--text-secondary); }
.bc-track { height: 7px; background: var(--surface-0); border-radius: 4px; overflow: hidden; }
.bc-fill { height: 100%; background: #1e7d34; border-radius: 4px; }
.bc-row.near .bc-fill { background: #eda100; } .bc-row.near .bc-num b { color: #b35c00; }
.bc-row.over .bc-fill { background: var(--danger); } .bc-row.over .bc-num b { color: var(--danger); }

/* 28/09/2026 (mục 5): nút Gửi Zalo */
.btn-zalo { background: #0068ff; color: #fff; border: 1px solid #0068ff; border-radius: 8px; padding: 7px 12px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn-zalo:hover { background: #0057d6; }
body.role-viewer .btn-zalo { display: inline-block; }
#zalo-range-toggle { margin-bottom: 10px; }
.zalo-text { width: 100%; font-size: 13.5px; line-height: 1.5; font-family: inherit; resize: vertical; }
.zalo-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.zalo-actions button { flex: 1 1 140px; }
.zalo-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.45; }

/* 28/09/2026 (mục 3): tạm ứng hợp đồng */
.p-advance-note { background: #fff8ec; border: 1px solid #f3d9a8; border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.55; margin: 0 0 10px; }
.p-advance-note .neg { color: #b35c00; } .p-advance-note .pos { color: #1e7d34; }
.pay-adv-badge { background: #fbedcf; color: #8a4a08; font-weight: 700; }
.pay-rec { font-size: 12px; color: #b35c00; font-weight: 600; }
.debt-row { flex-wrap: wrap; }
.debt-sub { flex-basis: 100%; font-size: 12px; color: var(--text-muted); margin-top: -2px; padding-left: 31px; }
/* 28/09/2026 (mục 4): giữ lại tiền nhà thầu phụ */
.subctr-ret-note { background: #eef5fc; border: 1px solid #c9dff3; border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.55; margin: 10px 0; }
.subctr-ret-note.muted { background: var(--surface-0); border-color: var(--border); color: var(--text-muted); }
.subctr-ret-note.due { background: #fff4f2; border-color: #f0c2bb; }
.subctr-ret-note.done { background: #e6f4ea; border-color: #b9dcc3; }

/* 28/09/2026 (mục 1): dự báo dòng tiền 8 tuần + đợt dự kiến thu */
.cf-balance-row { margin: 10px 0 12px; }
.cf-balance-row label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.cf-balance-input { display: flex; gap: 8px; max-width: 420px; }
.cf-balance-input input { flex: 1; min-width: 0; }
.cf-balance-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.cf-balance-note .neg, .cf-warn .neg { color: var(--danger); }
.cf-debt-box:empty { display: none; }
.cf-debt-box { background: var(--surface-0); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; font-size: 13px; }
.cf-debt-toggle { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.cf-debt-toggle input { width: auto; margin-top: 3px; }
.cf-debt-detail { font-size: 12px; color: var(--text-muted); margin: 3px 0 0 24px; }
.cf-weeks { display: flex; flex-direction: column; gap: 6px; }
.cf-week { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px 110px; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.cf-week.neg { background: #fff4f2; border-color: #f0c2bb; }
.cf-wk-label { display: flex; flex-direction: column; line-height: 1.25; }
.cf-wk-label span { font-size: 12px; color: var(--text-muted); }
.cf-wk-bars { display: flex; flex-direction: column; gap: 3px; }
.cf-bar { height: 7px; border-radius: 4px; min-width: 2px; }
.cf-bar.in { background: #1baf7a; } .cf-bar.out { background: #eb6834; }
.cf-wk-nums { display: flex; flex-direction: column; font-size: 12px; text-align: right; }
.cf-wk-nums .in { color: #1e7d34; } .cf-wk-nums .out { color: #b3471d; }
.cf-wk-bal { font-weight: 800; text-align: right; white-space: nowrap; }
.cf-week.neg .cf-wk-bal { color: var(--danger); }
.cf-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.cf-legend i { display: inline-block; width: 10px; height: 7px; border-radius: 3px; margin-right: 4px; }
.cf-legend i.in { background: #1baf7a; } .cf-legend i.out { background: #eb6834; }
.cf-warn { margin-top: 12px; background: #eef5fc; border: 1px solid #c9dff3; border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.6; }
.cf-warn.neg { background: #fff4f2; border-color: #f0c2bb; }
@media (max-width: 640px) {
  .cf-week { grid-template-columns: 78px minmax(0, 1fr) 92px; gap: 8px; padding: 7px 8px; }
  .cf-wk-bars { display: none; }
  .cf-wk-nums { text-align: left; }
  .cf-balance-input { max-width: none; }
}
.exp-hint { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.exp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.exp-main { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; }
.exp-main span { color: var(--text-muted); font-size: 12px; }
.exp-main .exp-late { color: #b35c00; font-weight: 700; }
.exp-amt { font-weight: 700; white-space: nowrap; }
.exp-act { display: flex; gap: 6px; }
.exp-act .btn-ghost { padding: 4px 10px; font-size: 12px; }
.exp-total { text-align: right; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--border); }
.exp-empty { font-size: 12.5px; color: var(--text-muted); padding: 4px 0 8px; }
body.role-viewer #exp-form, body.role-viewer .exp-act, body.role-viewer #cf-balance-save { display: none !important; }
/* Tên dự án dài trên thanh đầu (máy tính): hiện 2 dòng thay vì cắt "..." */
#project-name-display { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow: hidden; }

/* 29/09/2026: dự báo dòng tiền chia 2 cột (tuần 1–4 | tuần 5–8) */
.cf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.cf-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-cols .cf-week { grid-template-columns: 92px minmax(0, 1fr) 92px 78px; gap: 8px; }
@media (max-width: 900px) { .cf-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .cf-cols .cf-week { grid-template-columns: 78px minmax(0, 1fr) 92px; } }

/* 29/09/2026: dự báo dòng tiền — tóm tắt, ngày chi cố định, thêm nhanh, chi tiết tuần, dự kiến chi */
.cf-summary { font-size: 14.5px; font-weight: 700; background: #e6f4ea; border: 1px solid #b9dcc3; color: #1e5a2e; border-radius: 10px; padding: 9px 12px; margin: 10px 0 4px; }
.cf-summary.neg { background: #fff4f2; border-color: #f0c2bb; color: #8f1d1d; }
.cf-summary:empty { display: none; }
.cf-balance-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.cf-bal-field { flex: 1 1 320px; max-width: 460px; }
.cf-pay-field { flex: 0 1 240px; }
.cf-pay-field label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.cf-balance-note .warn { color: #b35c00; }
.cf-quick { margin: 4px 0 12px; border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; }
.cf-quick summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--accent-text, #8a4a08); }
.cf-quick-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; align-items: end; }
.cf-quick-form .toggle-group { grid-column: 1 / -1; }
.cf-debt-box { line-height: 1.6; }
.cf-week { cursor: pointer; }
.cf-week:hover { border-color: var(--border-strong, #cfcac1); }
.cf-caret { font-size: 12px; color: var(--text-muted); }
.cf-week-wrap.open .cf-week { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cf-wk-detail { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px; padding: 6px 10px 8px; background: var(--surface-0); }
.cf-it { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 12.5px; }
.cf-it:first-child { border-top: 0; }
.cf-it-l { display: flex; flex-direction: column; min-width: 0; }
.cf-it-l small { color: var(--text-muted); font-size: 12px; }
.cf-it-a { font-weight: 700; white-space: nowrap; }
.cf-it.in .cf-it-a, .cf-it.in b { color: #1e7d34; }
.cf-it.out .cf-it-a { color: #b3471d; }
.cf-it-empty { font-size: 12.5px; color: var(--text-muted); }
.exp-amt.out { color: #b3471d; }
.expay-form { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .expay-form { grid-template-columns: 1fr; } .cf-pay-field, .cf-bal-field { flex-basis: 100%; max-width: none; } }
body.role-viewer #expay-form, body.role-viewer .expay-done, body.role-viewer .expay-del, body.role-viewer #cf-quick, body.role-viewer #cf-payday { display: none !important; }
.cf-wk-nums .none { color: var(--text-muted); font-size: 12px; }

/* ===== 29/09/2026: BÁO CÁO TỔNG HỢP DỰ ÁN — BẢN MỚI (.rp-v2) ===== */
@media print {
  #print-report .rp-v2 { border: 0; border-radius: 0; overflow: visible; font-size: 8.5px; color: #1f2937; }
  #print-report .rp-v2 .rp-cover { border-radius: 10px; padding: 14px 16px; }
  #print-report .rp-v2 .rp-cover-title { font-size: 16px; line-height: 1.25; max-width: 460px; }
  #print-report .rp-status { display: inline-block; margin-top: 6px; font-size: 7.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
  #print-report .rp-status.active { background: #fdead1 !important; color: #8a4a08; }
  #print-report .rp-status.done { background: #d9f2e8 !important; color: #1e6b34; }
  #print-report .rp-cover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.2); }
  #print-report .rp-cover-grid span { display: block; font-size: 7px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .5px; }
  #print-report .rp-cover-grid b { display: block; font-size: 8.5px; color: #fff; font-weight: 600; line-height: 1.35; }
  #print-report .rp-v2 .rp-kpi-grid { padding: 10px 0 0; }
  #print-report .rp-v2 .rp-kpi-value { font-size: 11.5px; }
  #print-report .rp-prog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 2px 2px; }
  #print-report .rp-prog-top { display: flex; justify-content: space-between; font-size: 7.5px; font-weight: 700; color: #555; }
  #print-report .rp-prog-top b { font-size: 10px; color: #16325c; }
  #print-report .rp-prog-track { height: 6px; background: #eceae3 !important; border-radius: 99px; overflow: hidden; margin: 3px 0 2px; }
  #print-report .rp-prog-track span { display: block; height: 100%; border-radius: 99px; }
  #print-report .rp-prog-note { font-size: 7px; color: #888; }
  #print-report .rp-v2 .rp-insight-grid { padding: 8px 0 0; }
  #print-report .rp-attn { margin-top: 8px; border: 1px solid #f3dfa8; background: #fffaf0 !important; border-radius: 8px; padding: 7px 10px; column-count: 2; column-gap: 16px; }
  #print-report .rp-attn-title { font-weight: 800; font-size: 8.5px; color: #8a4a08; column-span: all; margin-bottom: 3px; }
  #print-report .rp-attn-row { display: flex; gap: 5px; break-inside: avoid; padding: 2px 0; font-size: 7.5px; line-height: 1.35; }
  #print-report .rp-attn-row small { display: block; color: #888; font-size: 6.8px; }
  #print-report .rp-attn-row b { font-weight: 600; }
  #print-report .rp-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; background: #2a78d6 !important; }
  #print-report .rp-dot.danger { background: #c0392b !important; } #print-report .rp-dot.warn { background: #eda100 !important; }
  #print-report .rp-v2 .rp-section { padding: 12px 0 2px; }
  #print-report .rp-v2 .rp-section.breakable { page-break-inside: auto; }
  #print-report .rp-v2 .rp-section-head { border-bottom: 1.5px solid #16325c; padding-bottom: 4px; }
  #print-report .rp-v2 .rp-section-title { font-size: 10.5px; }
  #print-report .rp-v2 table.rp-table th { background: #16325c !important; font-size: 7.8px; }
  #print-report .rp-v2 table.rp-table td { vertical-align: middle; }
  #print-report .rp-v2 table.rp-table thead { display: table-header-group; }
  #print-report .rp-v2 table.rp-table tr { page-break-inside: avoid; }
  #print-report .rp-v2 table.rp-table tfoot td { font-weight: 800; background: #fdf3e6 !important; border-top: 1.5px solid #d9720c; }
  #print-report .rp-v2 table.rp-table tr.rp-group td { background: #eef3fa !important; font-weight: 800; color: #16325c; }
  #print-report .rp-bar { display: flex; align-items: center; gap: 5px; min-width: 88px; }
  #print-report .rp-bar-track { flex: 1; height: 6px; background: #eceae3 !important; border-radius: 99px; overflow: hidden; min-width: 48px; }
  #print-report .rp-bar-fill { display: block; height: 100%; border-radius: 99px; }
  #print-report .rp-bar b { font-size: 7.8px; min-width: 30px; text-align: right; }
  #print-report .rp-bar-tag { display: flex; align-items: center; gap: 4px; }
  #print-report .rp-bar-tag .rp-bar { flex: 1; }
  #print-report .rp-muted { color: #999; font-size: 7px; }
  #print-report .rp-in { color: #1e7d34; font-weight: 700; } #print-report .rp-out { color: #b3471d; font-weight: 700; }
  #print-report .rp-note { font-size: 7.8px; color: #555; margin-top: 4px; }
  #print-report .rp-empty { font-size: 8px; color: #999; font-style: italic; padding: 4px 0; }
  #print-report .rp-two { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; align-items: start; }
  #print-report .rp-sub-title { font-size: 8px; font-weight: 800; color: #16325c; margin-bottom: 3px; }
  #print-report .rp-debt-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #e3e1d9; font-size: 8px; }
  #print-report .rp-debt-row small { display: block; color: #999; font-size: 6.8px; margin-left: 13px; }
  #print-report .rp-debt-row b { white-space: nowrap; }
  #print-report .rp-debt-row b.warn { color: #8a4a08; } #print-report .rp-debt-row b.bad { color: #c0392b; } #print-report .rp-debt-row b.good { color: #1e7d34; text-decoration: line-through; }
  #print-report .rp-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
  #print-report .rp-chips span { font-size: 7.3px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: #eef3fa !important; color: #16325c; }
  #print-report .rp-chips span.good { background: #e5f6ec !important; color: #2f9e5c; }
  #print-report .rp-chips span.warn { background: #fff1d6 !important; color: #8a5a00; }
  #print-report .rp-chips span.bad { background: #fbe2e2 !important; color: #c0392b; }
  #print-report .rp-v2 .rp-cost-layout { grid-template-columns: 96px 1fr; }
  #print-report .rp-v2 .rp-donut { width: 84px; height: 84px; }
  #print-report .rp-v2 .rp-donut-hole { width: 54px; height: 54px; }
  #print-report .rp-v2 .rp-donut-value { font-size: 8px; }
  #print-report .rp-v2 .rp-footnote { padding: 12px 0 0; }
}
@media print {
  #print-report .rp-v2 .rp-section-head, #print-report .rp-v2 .rp-chips { break-after: avoid; page-break-after: avoid; }
  #print-report .rp-v2 .rp-section.breakable .rp-section-head { break-inside: avoid; }
}
@media print { html, body, #print-report { background: #fff !important; } }

/* ===== 29/09/2026: sửa nhãn trạng thái bị cắt chữ ("Đang triển kha…") ===== */
table.pf-table th:nth-child(3), table.pf-table td:nth-child(3) { width: 150px; }
table.pf-table .status-pill.status-select { padding: 4px 22px 4px 9px; white-space: nowrap; text-overflow: clip; }
.status-pill.status-select { white-space: nowrap; }
@media print { #print-report .rp-v2 .rp-kpi-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== Bắt đầu nhanh ===== */
.qs-card { background: var(--surface-1); border: 1.5px solid #f3c98f; border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.qs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.qs-head b { font-size: 15px; display: block; }
.qs-head span { font-size: 12.5px; color: var(--text-muted); }
.qs-hide { background: none; border: 0; color: var(--text-muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 2px 4px; }
.qs-track { height: 7px; background: var(--surface-0); border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
.qs-track i { display: block; height: 100%; background: #1baf7a; border-radius: 99px; transition: width .3s; }
.qs-step { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--border); }
.qs-step:first-of-type { border-top: 0; }
.qs-ck { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-weight: 800; font-size: 13px; border: 1.5px solid var(--border); color: var(--text-muted); }
.qs-step.done .qs-ck { background: #e5f6ec; border-color: #b9dcc3; color: #1e7d34; }
.qs-step.next .qs-ck { background: var(--accent); border-color: var(--accent); color: #fff; }
.qs-tx { flex: 1; min-width: 0; }
.qs-tx div { font-size: 14px; font-weight: 600; }
.qs-tx small { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.qs-step.done .qs-tx div { color: var(--text-muted); text-decoration: line-through; font-weight: 500; }
.qs-go { white-space: nowrap; font-size: 13px; }
.qs-flash { animation: qsflash 0.8s ease-in-out 4; box-shadow: 0 0 0 4px rgba(217,114,12,.35); }
@keyframes qsflash { 50% { box-shadow: 0 0 0 8px rgba(217,114,12,.15); } }
@media (max-width: 640px) { .qs-step { flex-wrap: wrap; } .qs-go { width: 100%; margin-left: 36px; } }

/* ===== Màn hình Hôm nay + Bản tin tuần ===== */
.today-card { border: 1.5px solid #c9dff3; }
.td-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.td-head b { font-size: 16px; display: block; }
.td-head span { font-size: 12.5px; color: var(--text-muted); }
.td-bulletin-btn { white-space: nowrap; font-size: 13px; }
.td-bulletin { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: #eef5fc; border: 1px solid #c9dff3; border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
.td-b-act { display: flex; gap: 6px; align-items: center; }
.td-b-x { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px 8px; }
.td-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.td-tile { background: var(--surface-0); border-radius: 10px; padding: 9px 11px; min-width: 0; }
.td-tile span { display: block; font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.td-tile b { display: block; font-size: 16px; font-weight: 800; margin: 2px 0; overflow-wrap: anywhere; }
.td-tile small { font-size: 12px; color: var(--text-muted); }
.td-tile.out b { color: #b3471d; } .td-tile.in b { color: #1e7d34; }
.td-tasks-title { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.td-count { background: #fbe2e2; color: #a32d2d; font-size: 12px; padding: 1px 8px; border-radius: 99px; }
.td-task { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px dashed var(--border); cursor: pointer; border-radius: 6px; }
.td-task:hover { background: var(--surface-0); }
.td-task > div { flex: 1; min-width: 0; }
.td-t { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.td-task small { font-size: 12px; color: var(--text-muted); }
.td-go { color: var(--text-muted); font-size: 18px; }
.td-more { display: inline-block; font-size: 12.5px; margin-top: 6px; color: var(--accent-text, #8a4a08); font-weight: 600; }
.td-empty { font-size: 13px; color: #1e7d34; padding: 6px 0; }
@media (max-width: 820px) { .td-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .td-tile b { font-size: 14.5px; } .td-head b { font-size: 15px; } }

/* ===== 29/09/2026: MÀN ĐĂNG NHẬP MỚI — CHI PHÍ CÔNG TRÌNH ===== */
.auth-shell { max-width: 940px; min-height: 560px; }
.auth-brand-panel {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 60%, #244f8f 100%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  padding: 34px 34px 28px; justify-content: flex-start; gap: 18px;
}
.auth-brand-panel::before, .auth-brand-panel::after { display: none; }
.auth-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth-brand-row .auth-brand-logo { margin-bottom: 0; width: 42px; height: 42px; flex: none; }
.auth-brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.auth-brand-panel h1 { font-size: 19px; letter-spacing: .8px; margin: 0; font-weight: 800; }
.auth-headline { font-size: 23px; font-weight: 800; line-height: 1.3; margin: 0 0 8px; max-width: 400px; }
.auth-headline em { font-style: normal; color: #ffc46b; }
.auth-brand-lead { font-size: 13.5px; max-width: 380px; }
.auth-preview { position: relative; z-index: 1; background: #fff; color: #1f2937; border-radius: 12px; padding: 12px 14px 10px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); transform: rotate(-1deg); }
.ap-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.ap-pill { background: #fff1d6; color: #8a5a00; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.ap-bar { display: grid; grid-template-columns: 70px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; color: #555; margin: 4px 0; }
.ap-bar i { height: 7px; background: #eeece6; border-radius: 99px; overflow: hidden; display: block; }
.ap-bar u { display: block; height: 100%; border-radius: 99px; }
.ap-bar b { text-align: right; color: #16325c; }
.ap-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.ap-nums div { background: #f4f3ef; border-radius: 8px; padding: 6px 9px; }
.ap-nums span { display: block; font-size: 11px; color: #777; }
.ap-nums b { font-size: 15px; font-weight: 800; }
.ap-nums b.pos { color: #1e7d34; }
.ap-alert { margin-top: 8px; background: #fbe2e2; color: #8f1d1d; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 5px 9px; }
.ap-note { text-align: right; font-size: 11px; color: #aaa; margin-top: 4px; font-style: italic; }
.auth-chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; margin-top: auto; }
.auth-chips span { font-size: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 99px; }
.auth-form-panel .auth-sub { font-size: 14px; }
#to-forgot { text-align: right; margin-top: 10px; }
.auth-trial { display: block; margin-top: 18px; border: 1.5px dashed #f0b35f; background: #fff9f0; border-radius: 12px; padding: 11px 14px; text-decoration: none; color: var(--text-primary); transition: background .15s, border-color .15s; }
.auth-trial:hover { background: #fff3e0; border-color: var(--accent); }
.at-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.at-top b { color: #8a4a08; font-size: 14.5px; }
.at-go { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.at-sub { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.auth-zalo { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 16px; font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.auth-zalo b { color: #0068ff; }
.auth-zalo:hover b { text-decoration: underline; }
.auth-trust-row { margin-top: 14px; }
@media (max-width: 720px) {
  .auth-brand-panel { padding: 22px 22px 18px; gap: 0; }
  .auth-brand-row { margin-bottom: 12px; }
  .auth-brand-row .auth-brand-logo { width: 36px; height: 36px; }
  .auth-brand-panel h1 { font-size: 16px; }
  .auth-headline { font-size: 18px; margin-bottom: 4px; }
  .auth-preview, .auth-chips { display: none; }
}
.auth-headline { max-width: none; text-wrap: balance; }
/* 29/09/2026: logo 💰 của anh Nhật */
.auth-logo-emoji { background: linear-gradient(145deg, #fff4e0, #ffe2b8); box-shadow: 0 6px 16px rgba(217,114,12,.35); }
.auth-logo-emoji span { font-size: 24px; line-height: 1; }
@media (max-width: 720px) { .auth-logo-emoji span { font-size: 20px; } }
/* 29/09/2026: nút tính năng màn đăng nhập (bấm xem lợi ích) */
.auth-features { position: relative; z-index: 1; margin-top: auto; }
.auth-features .auth-chips { margin-top: 0; }
button.auth-chip { font: inherit; font-size: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 99px; cursor: pointer; transition: background .15s, border-color .15s; }
button.auth-chip:hover { background: rgba(255,255,255,.2); }
button.auth-chip.active { background: #ffc46b; border-color: #ffc46b; color: #3d2400; font-weight: 700; }
.auth-chip-desc { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.9); background: rgba(255,255,255,.08); border-left: 3px solid #ffc46b; border-radius: 0 8px 8px 0; padding: 7px 10px; min-height: 38px; }
@media (max-width: 720px) { .auth-features { display: none; } }

/* ===== 29/09/2026: Tổng quan các dự án chia 4 tab ===== */
.pf-tab-off { display: none !important; }
.pf-tabs { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; background: var(--surface-1); border: 1px solid var(--card-border, var(--border)); border-radius: 12px; padding: 9px 16px; font-size: 14.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: background .15s, border-color .15s; }
.pf-tab:hover { border-color: var(--accent); }
.pf-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px rgba(217,114,12,.6); }
.pf-tab-bd { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-0); color: var(--text-secondary); white-space: nowrap; }
.pf-tab-bd.red { background: #fbe2e2; color: #a32d2d; }
.pf-tab-bd.grn { background: #e5f6ec; color: #1e7d34; }
.pf-tab.active .pf-tab-bd { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 640px) { .pf-tab { padding: 8px 12px; font-size: 13.5px; } }
/* Hôm nay: hàng nút Đi tới dự án */
.td-goto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.td-goto > span { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-right: 2px; }
.td-proj { font: inherit; font-size: 12.5px; font-weight: 600; background: #eef5fc; border: 1px solid #c9dff3; color: #16325c; border-radius: 99px; padding: 5px 12px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-proj:hover { background: #dbe9fa; }
.td-proj.done { background: var(--surface-0); border-color: var(--border); color: var(--text-muted); font-weight: 500; }
.td-proj { white-space: normal; max-width: 100%; text-overflow: clip; border-radius: 12px; text-align: left; line-height: 1.35; }
@media (max-width: 640px) {
  .pf-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .pf-tab { flex-wrap: wrap; justify-content: center; gap: 4px 6px; padding: 8px 8px; text-align: center; }
  .pf-tab-bd { font-size: 12px; }
}

/* ===== 30/09/2026: màn "Đang tải" sau đăng nhập ===== */
.boot-loader { position: fixed; inset: 0; z-index: 9999; background: var(--surface-0); display: flex; align-items: center; justify-content: center; }
.bl-box { text-align: center; }
.bl-logo { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 16px; background: linear-gradient(145deg, #fff4e0, #ffcf8a); display: flex; align-items: center; justify-content: center; font-size: 34px; box-shadow: 0 10px 24px -8px rgba(217,114,12,.5); animation: blpulse 1.4s ease-in-out infinite; }
@keyframes blpulse { 50% { transform: scale(1.06); } }
.bl-name { font-weight: 800; letter-spacing: .8px; color: var(--navy); font-size: 15px; }
.bl-bar { width: 180px; height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; margin: 14px auto 8px; }
.bl-bar i { display: block; width: 40%; height: 100%; background: var(--accent); border-radius: 99px; animation: blmove 1.1s ease-in-out infinite; }
@keyframes blmove { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.bl-txt { font-size: 13px; color: var(--text-muted); }

/* ===== 30/09/2026: MÀU GIAO DIỆN NGŨ HÀNH ===== */
html[data-theme="kim"]  { --th-top: #3b4048; --th-acc: #a8842a; --th-acc-2: #8d6e20; --th-head-bg: #f3ecd9; --th-head-text: #5c4715; --th-head-line: #dcc893; }
html[data-theme="moc"]  { --th-top: #1f5a3a; --th-acc: #2f8f57; --th-acc-2: #257446; --th-head-bg: #e3f2e8; --th-head-text: #1d5a36; --th-head-line: #a9d6b8; }
html[data-theme="thuy"] { --th-top: #0e2f5a; --th-acc: #1f6fd1; --th-acc-2: #185bb0; --th-head-bg: #e1edfb; --th-head-text: #123f73; --th-head-line: #a9c9ef; }
html[data-theme="hoa"]  { --th-top: #6e2418; --th-acc: #d4542a; --th-acc-2: #b3441f; --th-head-bg: #fbe6dc; --th-head-text: #7a2a12; --th-head-line: #f0b9a2; }
html[data-theme="tho"]  { --th-top: #5a4128; --th-acc: #b9822f; --th-acc-2: #9a6b25; --th-head-bg: #f5ead9; --th-head-text: #6a4a1e; --th-head-line: #e0c79f; }
html[data-theme] .topbar { background: var(--th-top); }
html[data-theme] .tab-btn.active { background: var(--th-acc); }
html[data-theme] .pf-tab.active { background: var(--th-acc); border-color: var(--th-acc); box-shadow: 0 6px 14px -6px var(--th-acc); }
html[data-theme] .pf-tab:hover { border-color: var(--th-acc); }
html[data-theme] .data-table thead th,
html[data-theme] .tab-panel:not(#tab-dashboard) .data-table thead th { background: var(--th-head-bg); color: var(--th-head-text); border-bottom-color: var(--th-head-line); }
html[data-theme] table.pf-table thead th { background: var(--th-head-bg); color: var(--th-head-text); border-bottom-color: var(--th-top); }
html[data-theme] .btn-primary, html[data-theme] .topbar-btn-primary { background: var(--th-acc); border-color: var(--th-acc); }
html[data-theme] .btn-primary:hover { background: var(--th-acc-2); border-color: var(--th-acc-2); }

/* Nút 🎨 + hộp chọn màu */
.theme-btn { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.theme-btn:hover { background: rgba(255,255,255,.24); }
@media (max-width: 640px) { .theme-btn-txt { display: none; } .theme-btn { padding: 6px 9px; } }
.theme-menh label { font-size: 13px; font-weight: 700; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.theme-year-row { display: flex; gap: 8px; }
.theme-year-row input { flex: 1; min-width: 0; }
.theme-suggest { font-size: 13px; line-height: 1.55; margin: 8px 0 4px; }
.theme-suggest:empty { display: none; }
.theme-suggest .btn-ghost { margin-top: 6px; font-size: 12.5px; padding: 5px 10px; }
.theme-suggest .neg { color: var(--danger); }
.theme-lunar { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.theme-opt { display: flex; align-items: center; gap: 9px; text-align: left; background: var(--surface-1); border: 1.5px solid var(--border); border-radius: 12px; padding: 9px 10px; cursor: pointer; font: inherit; position: relative; }
.theme-opt:hover { border-color: var(--text-muted); }
.theme-opt.on { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.theme-prev { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; flex: none; }
.theme-prev i { flex: 1; }
.theme-lbl { display: flex; flex-direction: column; min-width: 0; }
.theme-lbl b { font-size: 14px; }
.theme-lbl small { font-size: 12px; color: var(--text-muted); }
.theme-tag { position: absolute; top: -8px; right: 8px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #fff1d6; color: #8a4a08; }
.theme-tag.alt { background: #e5f6ec; color: #1e7d34; }
.theme-tag.cur { background: var(--surface-0); color: var(--text-secondary); border: 1px solid var(--border); }
.theme-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 12px 0 0; }

/* ---------- 30/09/2026: Tab Người dùng — tab con, khoá thành viên, gói dịch vụ ---------- */
.utab-off { display: none !important; }
.users-subtabs { margin-top: 2px; }
.u-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-0, #f3f1ec); color: var(--text-secondary); white-space: nowrap; vertical-align: middle; }
.u-tag-lock { background: #fbe2e2; color: #a32d2d; }
.u-idle { color: #b86a0b; font-size: 12px; }
.u-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.u-plan { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--surface-0, #f3f1ec); color: var(--text-secondary); white-space: nowrap; }
.u-plan.grn { background: #e5f6ec; color: #1e7d34; }
.u-plan.org { background: #fdf0dc; color: #9a5a06; }
.u-plan.red { background: #fbe2e2; color: #a32d2d; }
tr.row-locked td { background: #faf8f5; color: var(--text-muted); }
tr.row-locked .row-title-cell { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
tr.row-locked .u-tag-lock { text-decoration: none; }

.plan-card, .co-card { padding: 18px 20px; margin-bottom: 16px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.plan-head h3 { margin: 0; font-size: 16px; }
.plan-main { background: var(--surface-0, #f7f5f0); border-radius: 12px; padding: 14px 16px; }
.plan-big { font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--text-primary); }
.plan-big.grn { color: #1e7d34; } .plan-big.org { color: #b86a0b; } .plan-big.red { color: #c0392b; }
.plan-date { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.plan-bar { height: 8px; border-radius: 99px; background: rgba(0,0,0,.07); margin: 12px 0 10px; overflow: hidden; }
.plan-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.plan-bar i.grn { background: #2e9b57; } .plan-bar i.org { background: #e08a1e; } .plan-bar i.red { background: #e24b4a; }
.plan-price { font-size: 13px; color: var(--text-secondary); }
.plan-warn { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fdf0dc; color: #7a4705; font-size: 13px; line-height: 1.45; }
.plan-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.plan-btn { text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; transition: transform .15s, box-shadow .15s, background .15s; }
a.plan-btn.btn-primary { background: #0068ff; color: #fff; border: 1px solid #0068ff; }
a.plan-btn.btn-primary:hover { background: #0052cc; transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(0,104,255,.6); }
a.plan-btn.btn-ghost { background: #fff; color: var(--text-primary); border: 1px solid var(--border); }
a.plan-btn.btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }
.plan-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.plan-bank { margin-top: 14px; border: 1px dashed var(--border); border-radius: 12px; padding: 12px 14px; }
.plan-bank-h { font-weight: 700; margin-bottom: 8px; }
.plan-bank-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; padding: 3px 0; }
.plan-bank-row span { color: var(--text-muted); min-width: 110px; }
.plan-copy { font-size: 12px; }
.co-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.co-grid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-grid span { font-size: 12px; color: var(--text-muted); }
.co-grid b { font-size: 14px; overflow-wrap: anywhere; }
.co-code { letter-spacing: 2px; color: var(--accent-text, #8a4a08); }
@media (max-width: 760px) { .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .plan-card, .co-card { padding: 14px; }
  .plan-big { font-size: 24px; }
  .plan-actions .plan-btn { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .users-table { min-width: 0 !important; }
  .users-table thead { display: none; }
  .users-table, .users-table tbody, .users-table tr, .users-table td { display: block; width: 100%; box-sizing: border-box; }
  .users-table tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 10px 12px; background: #fff; }
  .users-table tr.row-locked { background: #faf8f5; }
  .users-table td { border: 0 !important; padding: 4px 0 !important; text-align: left !important; background: transparent !important; }
  .users-table td.row-title-cell { font-size: 15px; padding-bottom: 6px !important; }
  .users-table td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .users-table td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--text-muted); font-weight: 400; flex: none; }
  .users-table td[data-label] > * { text-align: right; }
  .users-table td.u-actions { display: flex; gap: 8px; padding-top: 8px !important; white-space: normal !important; }
  .users-table td.u-actions:empty { display: none; }
  .users-table td.u-actions a { flex: 1; margin-left: 0 !important; }
}
@media (max-width: 640px) { .users-table .u-val .u-sub { margin-top: 1px; } .users-table .u-val .u-idle { display: block; } }

/* ---------- 30/09/2026: Vật tư — màu thanh %, chốt, giá bấm-để-sửa, lịch sử nhập ---------- */
.materials-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .materials-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .materials-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.materials-summary-card.msc-near::before { background: #e08a1e; }
.materials-summary-card.msc-near .msc-icon { background: #fdf0dc; }
.materials-summary-card.msc-near .msc-value { color: #b86a0b; }
.materials-summary-card.msc-zero::before { background: #2e9b57; }
.materials-summary-card.msc-zero .msc-icon { background: #e5f6ec; }
.materials-summary-card.msc-zero .msc-value { color: #1e7d34; }
.msc-sub { font-size: 12px; color: #1e7d34; font-weight: 600; margin-top: 2px; line-height: 1.3; }

.progress-fill.mat-bar-normal { background: #2a78d6; }
.progress-fill.mat-bar-near { background: #e08a1e; }
.progress-fill.mat-bar-full { background: #2e9b57; }
.progress-fill.mat-bar-over { background: var(--danger); }
.progress-fill.mat-bar-closed { background: #9aa0a8; }
.material-usage-label.is-normal { color: var(--text-muted); font-weight: 500; }
.material-usage-label.is-near { color: #b86a0b; font-weight: 700; }
.material-usage-label.is-full { color: #1e7d34; font-weight: 700; }
.material-usage-label.is-over { color: var(--danger); font-weight: 800; }
.material-usage-label.is-closed { color: #6b7079; font-weight: 700; }

.mat-name-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.25); cursor: pointer; }
.mat-name-link:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
.mat-nlog { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

.mat-price { display: inline-block; min-width: 90px; padding: 5px 8px; border-radius: 8px; border: 1px dashed transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.mat-price:hover { background: var(--accent-bg); border-color: #f1d5a8; }
.mat-price-empty { color: var(--text-muted); font-size: 12.5px; font-style: italic; border-color: var(--border); }
.mat-price-cell .material-price-input { width: 120px; text-align: right; }
body.role-viewer .mat-price { cursor: default; } body.role-viewer .mat-price:hover { background: none; border-color: transparent; }

.mat-remain-cell { white-space: nowrap; }
.mat-remain.neg { color: var(--danger); font-weight: 700; }
.mat-saved { font-size: 12px; color: #1e7d34; font-weight: 700; }
.mat-close-link { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.mat-close-link:hover { background: #6b7079; border-color: #6b7079; color: #fff; }
.mat-close-link.is-closed { border-style: dashed; color: var(--text-muted); }
tr.mat-row-closed td { background: #f7f7f5; }
tr.mat-row-closed .material-name-cell a { color: var(--text-secondary); }

.material-note-edit-link { text-decoration: none; }
.material-note-add { margin-left: 0; font-weight: 500; font-style: italic; opacity: .55; transition: opacity .15s; }
tr:hover .material-note-add { opacity: 1; }
@media (hover: none) { .material-note-add { opacity: .8; } }
body.role-viewer .material-note-edit-link, body.role-viewer .mat-close-link { display: none !important; }

.mh-modal { max-width: 920px; }
.mh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 12px; }
.mh-stats > div { background: var(--surface-0, #f7f5f0); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mh-stats span { font-size: 12px; color: var(--text-muted); }
.mh-stats b { font-size: 15px; overflow-wrap: anywhere; }
.mh-stats small { font-size: 12px; color: var(--text-muted); }
.mh-cmp { font-size: 12px !important; font-weight: 700; color: var(--text-secondary) !important; }
.mh-cmp.good { color: #1e7d34 !important; } .mh-cmp.bad { color: var(--danger) !important; }
.mh-closed { background: #f1f1ee; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #4d525a; margin-bottom: 10px; }
.mh-table tfoot td { font-weight: 700; background: var(--surface-0, #f7f5f0); }
.mh-inv { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #fdf0dc; color: #9a5a06; white-space: nowrap; }
.mh-inv.ok { background: #e5f6ec; color: #1e7d34; }
.mh-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px; }
@media (max-width: 640px) { .mh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .materials-summary-grid > .materials-summary-card:last-child:nth-child(odd) { grid-column: span 2; } }
.mh-table tfoot td:first-child { white-space: nowrap; }
.materials-filter-bar .toggle-group { flex-wrap: wrap; }

/* ---------- 30/09/2026: Bảng dạng THẺ trên điện thoại (table.mcard — gắn bởi mcardApply) ---------- */
@media (max-width: 640px) {
  .table-wrap:has(> table.mcard) { overflow: visible !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  table.mcard { min-width: 0 !important; width: 100% !important; background: transparent !important; table-layout: auto !important; }
  table.mcard thead { display: none; }
  table.mcard, table.mcard tbody { display: block; width: 100%; }
  table.mcard tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px;
    background: var(--surface-1); border: 1px solid var(--card-border, var(--border));
    border-radius: 12px; padding: 12px 13px; margin-bottom: 10px;
  }
  table.mcard tbody tr:hover { background: var(--surface-1); }
  table.mcard tbody td {
    display: block; border: none !important; padding: 0 !important; min-width: 0 !important; width: auto !important;
    text-align: left !important; background: transparent !important; white-space: normal !important; font-size: 13.5px;
  }
  table.mcard tbody td[data-label]::before {
    content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--text-muted);
    text-transform: none; letter-spacing: 0; margin-bottom: 1px;
  }
  table.mcard tbody td.mc-title { grid-column: 1 / -1; font-size: 15px; font-weight: 700; line-height: 1.35; padding-left: 0 !important; }
  table.mcard tbody td.mc-first { font-weight: 600; }
  table.mcard tbody td.mc-wide { grid-column: 1 / -1; }
  table.mcard tbody td.mc-hide { display: none !important; }
  table.mcard tbody td.mc-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; border-top: 1px dashed var(--border) !important; padding-top: 10px !important; }
  table.mcard tbody td.mc-actions:empty { display: none; }
  table.mcard tbody td.mc-actions a { flex: 1 1 0; max-width: 160px; }
  table.mcard tbody td .progress-bar { width: 100% !important; height: 8px; margin: 3px 0 2px; }
  table.mcard tbody td .badge { font-size: 12px; }
  /* dòng nhóm (đầu mục) + dòng "không có dữ liệu" */
  table.mcard tbody tr.mc-full { display: block; padding: 10px 12px; }
  table.mcard tbody tr.mc-full td { display: block; padding: 0 !important; }
  table.mcard tbody tr.material-header-row { background: var(--surface-0, #f3f1ec); border-style: dashed; font-weight: 700; margin-top: 14px; }
  table.mcard tbody tr.sup-row-unsigned { border-left: 4px solid var(--danger); }
  table.mcard tbody tr.mat-row-closed { background: #f7f7f5; }
  /* Vật tư: giá bấm-để-sửa + nút chốt gọn trong thẻ */
  #materials-table-body td.mat-price-cell .mat-price { min-width: 0; padding: 2px 6px; margin-left: -6px; }
  #materials-table-body td.mat-remain-cell .mat-close-link { margin-top: 4px; }
  #materials-table-body td.material-name-cell .mat-nlog { display: inline; margin-left: 6px; }
  #materials-table-body td.material-name-cell .mat-nlog::before { content: "· "; }

  /* Bảng khối lượng giữ kéo ngang: cố định cột tên khi vuốt */
  #appendix-table-body td.row-title-cell, #subctr-items-table-body td.row-title-cell, #quality-table-body td.row-title-cell {
    position: sticky; left: 0; z-index: 1; background: var(--surface-1) !important; box-shadow: 4px 0 6px -4px rgba(0,0,0,.18);
  }
  #appendix-table-body tr:nth-child(even) td.row-title-cell, #quality-table-body tr:nth-child(even) td.row-title-cell { background: var(--surface-1) !important; }
}
@media (max-width: 640px) {
  table.mcard tbody tr.sup-row-unsigned td, table.mcard tbody tr.sup-row-unsigned:hover td { background: transparent !important; }
  table.mcard tbody tr.sup-row-unsigned { background: #fffafa; }
  #subctr-table-body td.mc-title a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.3); }
}
@media (max-width: 640px) {
  #appendix-table-body td.row-title-cell, #subctr-items-table-body td.row-title-cell, #quality-table-body td.row-title-cell { min-width: 160px !important; width: 160px; font-size: 13px; line-height: 1.35; }
}

/* 30/09/2026: bộ lọc Vật tư cân đối trên 1 hàng (máy tính) */
@media (min-width: 1100px) {
  .materials-filter-bar { grid-template-columns: minmax(200px, 1fr) minmax(170px, 240px) auto; }
  .materials-filter-bar .toggle-group { flex-wrap: nowrap; gap: 6px; }
  .materials-filter-bar .toggle-btn { padding: 0 11px; height: 40px; font-size: 12.5px; white-space: nowrap; }
  .materials-filter-bar input, .materials-filter-bar select { height: 40px; }
}

/* ---------- 01/10/2026: Kế hoạch nhập — tách Chưa cấp / Đã cấp ---------- */
.plan-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 820px) { .plan-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.msc-sub2 { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
.plan-status-toggle { margin: 0 0 10px; flex-wrap: wrap; }
.plan-status-toggle .toggle-btn { flex: 0 0 auto; padding: 7px 14px; font-size: 13px; }
tr.plan-group-row td { background: var(--surface-0, #f3f1ec) !important; font-weight: 700; font-size: 13px; padding: 9px 12px !important; }
tr.plan-group-row td { display: table-cell; }
tr.plan-group-row .pg-meta { float: right; font-weight: 500; color: var(--text-secondary); }
tr.plan-group-row .pg-meta b { font-weight: 800; }
tr.plan-group-row.pg-pend td { background: #fdf0dc !important; color: #7a4705; border-left: 4px solid #e08a1e; }
tr.plan-group-row.pg-pend .pg-meta b { color: #9a5a06; }
tr.plan-group-row.pg-done td { background: #eef7f1 !important; color: #1e5a30; border-left: 4px solid #2e9b57; }
tr.plan-row-done td { color: var(--text-muted); }
tr.plan-row-done td.row-title-cell, tr.plan-row-done td.plan-amt { color: var(--text-secondary); font-weight: 500; }
.plan-due { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.plan-due.soon { color: #b86a0b; font-weight: 700; }
.plan-due.late { color: var(--danger); font-weight: 700; }
.plan-table tfoot tr.plan-foot-pending td { background: #fdf0dc; color: #7a4705; font-weight: 800; font-size: 14px; }
.plan-table tfoot tr.plan-foot-done td { background: #eef7f1; color: #1e5a30; font-weight: 600; }
.plan-table tfoot tr.plan-foot-all td { font-weight: 600; color: var(--text-secondary); }
@media (max-width: 640px) {
  table.mcard tbody tr.plan-group-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
  table.mcard tbody tr.plan-group-row td { display: block; width: 100%; border-left: 0 !important; padding: 0 !important; background: transparent !important; }
  table.mcard tbody tr.plan-group-row.pg-pend { background: #fdf0dc; border-left: 4px solid #e08a1e; }
  table.mcard tbody tr.plan-group-row.pg-done { background: #eef7f1; border-left: 4px solid #2e9b57; }
  table.mcard tbody tr.plan-row-done { opacity: .8; }
  .plan-table tfoot, .plan-table tfoot tr { display: block; }
  .plan-table tfoot tr { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; margin-bottom: 6px; }
  .plan-table tfoot td { display: block; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .plan-table tfoot td:empty { display: none; }
  .plan-table tfoot tr.plan-foot-pending { background: #fdf0dc; }
  .plan-table tfoot tr.plan-foot-done { background: #eef7f1; }
}
.plan-kpis .msc-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
#plan-table-body td.plan-amt { font-weight: 800; }
/* 01/10/2026: dòng tổng (tfoot) của bảng dạng thẻ — trước đây giữ độ rộng bảng cũ làm trang bị kéo ngang (vùng trắng bên phải) */
@media (max-width: 640px) {
  table.mcard tfoot { display: block; width: 100%; }
  table.mcard tfoot tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; width: 100%; box-sizing: border-box;
    background: var(--accent-bg, #fdf0dc); border-radius: 12px; padding: 10px 13px; margin-bottom: 8px; }
  table.mcard tfoot td { display: block; padding: 0 !important; border: 0 !important; background: transparent !important; min-width: 0 !important; width: auto !important; text-align: left !important; white-space: normal !important; }
  table.mcard tfoot td:first-child { flex-basis: 100%; font-weight: 800; }
  table.mcard tfoot td.mc-empty { display: none; }
  table.mcard tfoot td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); }
}
/* chặn mọi trường hợp còn sót: trang không bao giờ bị kéo ngang trên điện thoại */
@media (max-width: 640px) { html, body { overflow-x: clip; } }

/* 01/10/2026: Báo cáo thi công / Phụ lục HĐ — vượt KL hợp đồng + ghi chú báo cáo cũ */
.qty-over { color: #c0392b !important; font-weight: 700; }
.progress-fill.fill-over { background: #c0392b !important; }
.report-old-note { margin: 4px 0 10px; padding: 8px 12px; border-radius: 8px; background: #eef4fc; color: #1a3f7a; font-size: 12px; border: 1px solid #cfe0f5; }
.ax-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.ax-toolbar > * { white-space: nowrap; }
.ax-toolbar #appendix-search { max-width: 180px; }
.ax-toolbar #appendix-status-filter { max-width: 170px; }
@media (max-width: 640px) { .ax-toolbar { justify-content: stretch; } .ax-toolbar #appendix-search, .ax-toolbar #appendix-status-filter { max-width: none; flex: 1 1 45%; } }

/* 02/10/2026: Nhà thầu phụ — form nhập KL trong ngăn kéo + nút + KL + xuất Excel theo kỳ */
.subctr-log-form { margin: 8px 0; }
.subctr-log-form .slf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.subctr-log-form .slf-grid label { display: block; font-size: 12px; color: var(--text-muted); margin: 0 0 3px; }
.subctr-log-form .slf-grid input { width: 100%; min-width: 0; box-sizing: border-box; }
.subctr-log-form .slf-wide { grid-column: 1 / -1; }
.subctr-log-form #subctr-log-qty { font-weight: 700; text-align: right; }
.subctr-log-form .slf-hint { font-size: 12px; color: var(--text-secondary); min-height: 16px; margin: 6px 0 2px; }
.subctr-log-form .slf-actions { display: flex; gap: 8px; }
.subctr-log-form .slf-actions .btn-primary { flex: 1; }
.item-history-row.is-editing { background: var(--accent-bg, #fdead1); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.item-history-main .edit-link, .item-history-main .delete-link { font-size: 12px; }
.subctr-item-qty-btn { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 6px; background: #e6f4ea; color: #1e7d34; font-weight: 700; font-size: 12px; text-decoration: none; white-space: nowrap; }
.subctr-item-qty-btn:hover { background: #1e7d34; color: #fff; }
body.role-viewer .subctr-item-qty-btn { display: none !important; }
.subctr-items-total-row td { background: var(--accent-bg, #fdead1); }
.subctr-export-range { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.subctr-export-range input[type="date"] { width: 138px; padding: 5px 6px; }
@media (max-width: 640px) { .subctr-export-range { width: 100%; } .subctr-export-range input[type="date"] { flex: 1; width: auto; } }

/* ===== 02/10/2026: Giao diện mới tab Báo cáo thi công — nổi bật phần nhập KL ===== */
#tab-reports { --rp-acc: var(--th-acc, var(--accent)); }
.rp-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--th-top, #1a3f7a) 0%, #2b5aa0 100%); color: #fff;
  border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; box-shadow: 0 8px 22px -12px rgba(26,63,122,.6); }
.rp-hero-kicker { font-size: 12px; opacity: .85; letter-spacing: .3px; margin-bottom: 4px; }
.rp-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-switch-main { min-width: 200px; }
.rp-cur-title { font-size: 22px; font-weight: 800; line-height: 1.2; }
.rp-cur-sub { font-size: 12px; opacity: .9; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rp-cur-sub .badge { background: rgba(255,255,255,.18); color: #fff; }
.rp-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.rp-nav:hover:not(:disabled) { background: rgba(255,255,255,.3); }
.rp-nav:disabled { opacity: .3; cursor: default; }
.rp-select { max-width: 220px; background: rgba(255,255,255,.95); border-radius: 8px; font-size: 13px; }
.rp-new-btn { font-size: 15px; padding: 11px 18px; border-radius: 10px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
.rp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-actions-spacer { flex: 1; }
.rp-del-btn { background: transparent; border: none; color: #c0392b; font-size: 12.5px; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.rp-del-btn:hover { background: #fbe2e2; }
body.role-viewer .rp-del-btn, body.role-viewer .rp-new-btn { display: none !important; }

.rp-empty { text-align: center; padding: 34px 18px; }
.rp-empty-icon { font-size: 40px; }
.rp-empty-title { font-size: 18px; font-weight: 800; margin: 6px 0; }
.rp-empty-text { color: var(--text-muted); font-size: 13px; max-width: 460px; margin: 0 auto 14px; }

.rp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.rp-kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.rp-kpi-accent { border-color: var(--rp-acc); background: var(--accent-bg); }
.rp-kpi-label { font-size: 12px; color: var(--text-muted); }
.rp-kpi-value { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rp-kpi-bar { height: 5px; background: #eee; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.rp-kpi-bar span { display: block; height: 100%; background: #1e7d34; border-radius: 3px; width: 0; transition: width .3s; }

.rp-step { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #fff; background: var(--rp-acc); padding: 2px 8px; border-radius: 10px; }
.rp-optional { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.rp-entry-card { border: 2px solid var(--rp-acc); box-shadow: 0 10px 26px -16px var(--rp-acc); }
.rp-entry-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-entry-head h3 { margin: 4px 0 2px; font-size: 17px; }
.rp-entry-tip { font-size: 12.5px; color: var(--text-secondary); }
.rp-entry-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-entry-tools input { width: 190px; }
.rp-entry-tools select { width: 170px; }
.rp-entry-table th.rp-qty-th { background: var(--rp-acc) !important; color: #fff !important; }
.rp-entry-table td.rp-c-input { background: #fff8e1; }
.rp-entry-table .report-qty-input { width: 110px; height: 36px; font-size: 15px; font-weight: 700; text-align: right;
  border: 2px solid #f0c36d; background: #fffdf3; border-radius: 8px; }
.rp-entry-table .report-qty-input:focus { border-color: var(--rp-acc); background: #fff; box-shadow: 0 0 0 3px rgba(217,114,12,.18); outline: none; }
.rp-entry-table tr.rp-has-qty td { background: #eaf6ed; }
.rp-entry-table tr.rp-has-qty td.rp-c-input { background: #d7efdd; }
.rp-entry-table tr.rp-has-qty .report-qty-input { border-color: #1e7d34; color: #1e7d34; background: #fff; }
.rp-entry-table tbody tr:not(.appendix-header-row):hover td { background: #fdf3e3; }
.rp-entry-table .report-lk-cell { font-weight: 700; }

.rp-info-card h3 { font-size: 15px; }
.rp-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; margin-top: 8px; }
.rp-info-grid label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.rp-info-grid input, .rp-info-grid textarea { width: 100%; box-sizing: border-box; }
.rp-info-grid .rp-span-all { grid-column: 1 / -1; }
.rp-project-details summary h3 { font-size: 15px; margin: 0; }

@media (max-width: 900px) {
  .rp-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rp-hero { padding: 12px; }
  .rp-cur-title { font-size: 18px; }
  .rp-new-btn { width: 100%; }
  .rp-select { max-width: none; flex: 1 1 100%; }
  .rp-kpis { grid-template-columns: 1fr 1fr; }
  .rp-kpis .rp-kpi:last-child { grid-column: 1 / -1; }
  .rp-kpi-value { font-size: 16px; }
  .rp-entry-tools, .rp-entry-tools input, .rp-entry-tools select { width: 100%; }
  .rp-info-grid { grid-template-columns: 1fr; }
  /* Bảng nhập KL thành thẻ: tên hạng mục + ô nhập to */
  .rp-entry-table thead { display: none; }
  .rp-entry-table, .rp-entry-table tbody { display: block; width: 100%; }
  .rp-entry-table tr:not(.appendix-header-row) { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 8px;
    border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 8px 0; background: var(--surface-1); }
  .rp-entry-table tr.appendix-header-row { display: block; }
  .rp-entry-table tr.appendix-header-row td { display: block; padding: 8px 4px !important; border: none; }
  .rp-entry-table tr:not(.appendix-header-row) td { display: block; border: none; padding: 0 !important; text-align: left; background: transparent !important; }
  .rp-entry-table td.rp-c-stt { display: none; }
  .rp-entry-table td.rp-c-name { grid-column: 1 / -1; font-weight: 700; font-size: 14px; }
  .rp-entry-table td.rp-c-unit { grid-column: 1 / -1; color: var(--text-muted); font-size: 12px; }
  .rp-entry-table td.rp-c-unit::before { content: "ĐVT: "; }
  .rp-entry-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; }
  .rp-entry-table td.rp-c-input { grid-column: 1 / -1; order: 10; }
  .rp-entry-table td.rp-c-input .report-qty-input { width: 100%; height: 44px; font-size: 18px; }
  .rp-entry-table td.rp-pct { grid-column: 1 / -1; order: 11; }
  .rp-entry-table tr.rp-has-qty { border-color: #1e7d34; background: #eaf6ed; }
}

/* 02/10/2026 (2): phần CHỮ nhập liệu là trọng tâm */
.rp-text-card { border: 2px solid var(--rp-acc); box-shadow: 0 12px 28px -16px var(--rp-acc); }
.rp-text-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-text-head h3 { margin: 4px 0 2px; font-size: 18px; }
.rp-copy-prev { font-size: 13px; }
.rp-text-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.rp-text-grid .rp-span-all { grid-column: 1 / -1; }
.rp-text-grid .rp-f:nth-last-child(-n+3) { grid-column: auto; }
.rp-text-grid { grid-template-areas: none; }
@supports (display: grid) {
  .rp-text-grid { grid-template-columns: repeat(6, 1fr); }
  .rp-text-grid .rp-f { grid-column: span 3; }
  .rp-text-grid .rp-f.rp-span-all { grid-column: 1 / -1; }
  .rp-text-grid .rp-f:nth-last-child(-n+3) { grid-column: span 2; }
}
.rp-f { position: relative; }
.rp-f label { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary, #222); margin-bottom: 5px; }
.rp-f input, .rp-f textarea { width: 100%; box-sizing: border-box; font-size: 15px; padding: 10px 12px; border: 1.5px solid #cfd6df;
  border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; line-height: 1.45; }
.rp-f input { height: 44px; }
.rp-f textarea { resize: vertical; }
.rp-f.rp-f-main textarea { min-height: 120px; font-size: 15.5px; }
.rp-f input:focus, .rp-f textarea:focus { border-color: var(--rp-acc); box-shadow: 0 0 0 4px rgba(217,114,12,.16); outline: none; background: #fff; }
.rp-f.rp-empty-f input, .rp-f.rp-empty-f textarea { background: #fff8e1; border-color: #f0c36d; }
.rp-f.rp-empty-f input:focus, .rp-f.rp-empty-f textarea:focus { background: #fff; }
.rp-f::after { content: "✓ Đã lưu"; position: absolute; top: 0; right: 2px; font-size: 12px; font-weight: 700; color: #1e7d34; opacity: 0; transition: opacity .2s; }
.rp-f.rp-saved::after { opacity: 1; }
.rp-f.rp-saved input, .rp-f.rp-saved textarea { border-color: #1e7d34; }
.rp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rp-chips button { border: 1px solid var(--border); background: var(--surface-1); border-radius: 16px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.rp-chips button:hover { border-color: var(--rp-acc); background: var(--accent-bg); }
body.role-viewer .rp-chips, body.role-viewer .rp-copy-prev { display: none !important; }
.rp-step-2 { background: #6b7684; }
.rp-entry-card { border: 1px solid var(--border); box-shadow: none; }
.rp-info-grid > div { position: relative; }
.rp-info-grid > div.rp-saved::after { content: "✓ Đã lưu"; position: absolute; top: 0; right: 2px; font-size: 12px; font-weight: 700; color: #1e7d34; }
@media (max-width: 640px) {
  .rp-text-grid, .rp-text-grid .rp-f, .rp-text-grid .rp-f:nth-last-child(-n+3) { grid-column: 1 / -1 !important; }
  .rp-text-grid { grid-template-columns: 1fr; }
  .rp-f input, .rp-f textarea { font-size: 16px; }
  .rp-copy-prev { width: 100%; }
}
/* 02/10/2026 (3): sửa hiển thị điện thoại */
.rp-switch-main { flex: 1 1 200px; min-width: 0; }
@media (max-width: 640px) {
  .rp-hero-left { width: 100%; }
  .rp-switch-main { flex: 1 1 0; }
  .rp-switch .rp-nav { flex: 0 0 36px; }
  .rp-switch .rp-select { flex: 1 1 100%; order: 5; }
  #tab-reports .rp-entry-card .table-wrap { overflow: visible; }
  #tab-reports table.rp-entry-table { min-width: 0 !important; width: 100% !important; }
  #tab-reports .rp-entry-table tr:not(.appendix-header-row) td.rp-c-stt { display: none; }
  #tab-reports .rp-entry-table tr:not(.appendix-header-row) td.rp-c-name,
  #tab-reports .rp-entry-table tr:not(.appendix-header-row) td.rp-c-unit,
  #tab-reports .rp-entry-table tr:not(.appendix-header-row) td.rp-c-input,
  #tab-reports .rp-entry-table tr:not(.appendix-header-row) td.rp-pct { grid-column: 1 / -1; }
  #tab-reports .rp-entry-table tr:not(.appendix-header-row) td.rp-c-input .report-qty-input { width: 100%; box-sizing: border-box; }
  #tab-reports .rp-entry-table tr:not(.appendix-header-row) td.report-lk-cell { text-align: left; }
}

/* 06/10/2026: Tóm tắt HĐ (cả dự án) đứng đầu Bước 1, tách với phần riêng của kỳ */
.rp-f-project textarea { background: #f3f7fc; border-color: #b9cde6; min-height: 110px; }
.rp-scope-tag { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: #1a3f7a; background: #dbe9fa; padding: 1px 8px; border-radius: 10px; vertical-align: middle; }
.rp-period-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 4px 0 -2px; color: var(--rp-acc); font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.rp-period-divider::before, .rp-period-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
@media (max-width: 640px) { .rp-scope-tag { display: block; margin: 3px 0 0; width: fit-content; } }

/* ===== 06/10/2026: MÀU BẢNG TRUNG TÍNH (anh Nhật duyệt demo) =====
   Cam chỉ dùng cho nút chính (Nhập Excel, + Thêm, tab đang mở); màu còn lại
   chỉ để báo trạng thái (Sắp đủ, Vượt HĐ...). Tiêu đề bảng xám nhạt — chỉ áp
   cho màu MẶC ĐỊNH; ai chọn màu ngũ hành (🎨) vẫn giữ tiêu đề theo màu đã chọn. */
html:not([data-theme]) .data-table thead th,
html:not([data-theme]) .tab-panel:not(#tab-dashboard) .data-table thead th {
  background: #f3f5f7; color: #3d4651; font-weight: 600; border-bottom: 1.5px solid #dde2e8;
}
html:not([data-theme]) .tab-panel:not(#tab-dashboard) .data-table tfoot td,
html:not([data-theme]) .data-table tfoot td { background: #f6f7f9; }
.subctr-items-total-row td { background: #f6f7f9 !important; }
.data-table tbody tr:not(.appendix-header-row):not(.subctr-item-header-row):hover td { background: #fafbfc; }
#tab-reports .rp-entry-table tbody tr:not(.appendix-header-row):hover td { background: #fdf3e3; }

/* Nút Sửa / Xoá: nền trắng, trung tính — rê chuột mới đổ màu */
.edit-link { color: #3d4651; background: #fff; border-color: #d3d9e0; }
.edit-link:hover { background: #3d4651; color: #fff; border-color: #3d4651; box-shadow: 0 6px 12px -4px rgba(61,70,81,.45); }
.edit-link:active { background: #2b323a; color: #fff; }
.edit-link:focus-visible { outline-color: #3d4651; }
.delete-link { color: #b03a3a; background: #fff; border-color: #efc9c9; }
@media (hover: none) {
  .edit-link:hover:not(:active) { background: #fff; color: #3d4651; border-color: #d3d9e0; }
  .delete-link:hover:not(:active) { background: #fff; color: #b03a3a; border-color: #efc9c9; }
}

/* Ô lọc / lựa chọn đang chọn: nền đậm cùng màu thanh trên cùng, chữ trắng */
.toggle-btn.active { background: var(--th-top, var(--navy)); border-color: var(--th-top, var(--navy)); color: #fff; font-weight: 600; }
.performer-quick .toggle-btn.active .performer-remove { color: #fff; }

/* ===== 06/10/2026 (2): tiêu đề bảng xám ĐẬM hơn ===== */
html:not([data-theme]) .data-table thead th,
html:not([data-theme]) .tab-panel:not(#tab-dashboard) .data-table thead th {
  background: #e4e8ee; color: #262e38; border-bottom: 1.5px solid #c5ced8;
}
html:not([data-theme]) .tab-panel:not(#tab-dashboard) .data-table tfoot td,
html:not([data-theme]) .data-table tfoot td, .subctr-items-total-row td { background: #eef1f5 !important; }

/* Thanh tìm kiếm đặt ngay trên bảng (Nhà thầu phụ, Nhà cung cấp, Kế hoạch nhập) */
.list-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.list-tools .list-search { flex: 0 1 340px; min-width: 200px; height: 40px; padding: 8px 12px; border-radius: 10px; }
.list-tools .toggle-group { margin: 0; flex: 0 0 auto; }
.list-tools .toggle-group .toggle-btn { flex: 0 0 auto; padding: 8px 14px; }
.sup-filter-row.list-tools .sup-filter-note { flex: 1 1 260px; }
@media (max-width: 640px) { .list-tools .list-search { flex: 1 1 100%; } }

/* Khối đầu tab dính khi cuộn (máy tính) */
.tab-panel.sticky-on > .tab-sticky-head, #subctr-list-view.sticky-on > .tab-sticky-head {
  position: sticky; top: var(--sticky-top, 0); z-index: 25; padding-bottom: 2px;
  box-shadow: 0 8px 10px -10px rgba(0,0,0,.25);
}
.sticky-on .table-wrap.sticky-thead { overflow: visible; }
.sticky-on .table-wrap.sticky-thead > table > thead th {
  position: sticky; top: calc(var(--sticky-top, 0px) + var(--sticky-head-h, 0px)); z-index: 20;
}
.tab-panel.sticky-on > .tab-sticky-head, #subctr-list-view.sticky-on > .tab-sticky-head { padding-top: 8px; margin-top: -8px; }

/* ===== 06/10/2026 (3): GỌN CHIỀU CAO ===== */
/* Thanh menu tab: thấp hơn */
@media (min-width: 641px) {
  .tabbar { min-height: 54px; }
  .tab-btn { padding: 5px 8px; }
  .topbar-inner { padding-top: 8px; padding-bottom: 8px; }
}
/* Khối đầu tab đang dính (máy tính): thu gọn khoảng cách + ô số liệu */
.sticky-on > .tab-sticky-head .tab-title-row { margin-bottom: 10px !important; }
.sticky-on > .tab-sticky-head .tab-title-row .tab-title h3 { font-size: 20px; }
.sticky-on > .tab-sticky-head .tab-title-row .btn-primary { padding: 7px 14px; }
.sticky-on > .tab-sticky-head .metric-grid-5,
.sticky-on > .tab-sticky-head .kpi-grid,
.sticky-on > .tab-sticky-head .materials-summary-grid { gap: 10px !important; margin-bottom: 10px !important; }
.sticky-on > .tab-sticky-head .metric-card,
.sticky-on > .tab-sticky-head .kpi-card,
.sticky-on > .tab-sticky-head .materials-summary-card { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; }
.sticky-on > .tab-sticky-head .metric-top, .sticky-on > .tab-sticky-head .kpi-top { margin-bottom: 2px !important; }
.sticky-on > .tab-sticky-head .metric-icon, .sticky-on > .tab-sticky-head .kpi-icon { width: 22px !important; height: 22px !important; font-size: 12px !important; }
.sticky-on > .tab-sticky-head .msc-icon { transform: scale(.85); }
.sticky-on > .tab-sticky-head .metric-label, .sticky-on > .tab-sticky-head .kpi-label { font-size: 12.5px; }
.sticky-on > .tab-sticky-head .metric-sub { line-height: 1.2; }
.sticky-on > .tab-sticky-head .metric-value,
.sticky-on > .tab-sticky-head .kpi-value,
.sticky-on > .tab-sticky-head .msc-value { font-size: 18px !important; margin-top: 0 !important; line-height: 1.25; }
.sticky-on > .tab-sticky-head .metric-sub { margin-top: 1px !important; font-size: 12px; }
.sticky-on > .tab-sticky-head .log-filter-bar,
.sticky-on > .tab-sticky-head .materials-filter-bar,
.sticky-on > .tab-sticky-head .list-tools { margin-bottom: 8px !important; gap: 8px; }
.sticky-on > .tab-sticky-head .log-filter-bar label,
.sticky-on > .tab-sticky-head .materials-filter-bar label { margin-bottom: 2px !important; font-size: 12px; }
.sticky-on > .tab-sticky-head input:not([type="checkbox"]),
.sticky-on > .tab-sticky-head select,
.sticky-on > .tab-sticky-head .toggle-btn { height: 36px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
.sticky-on > .tab-sticky-head .tab-help { margin-bottom: 8px !important; }

/* Báo cáo thi công: đầu trang 1 hàng, nền xám như tiêu đề bảng */
#tab-reports .rp-hero { background: #e4e8ee; color: #262e38; box-shadow: none; border: 1px solid #c5ced8;
  padding: 8px 12px; border-radius: 12px; gap: 10px; margin-bottom: 12px; align-items: center; }
#tab-reports .rp-switch { flex: 1 1 auto; min-width: 0; gap: 8px; flex-wrap: nowrap; }
#tab-reports .rp-switch-main { flex: 0 1 auto; min-width: 0; }
#tab-reports .rp-cur-title { font-size: 18px; line-height: 1.2; color: #16202c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-reports .rp-cur-sub { font-size: 12px; margin-top: 1px; opacity: 1; color: #5b6673; flex-wrap: nowrap; white-space: nowrap; }
#tab-reports .rp-cur-sub .badge { background: #fff; color: #3d4651; border: 1px solid #c5ced8; padding: 0 7px; font-size: 12px; }
#tab-reports .rp-nav { width: 32px; height: 32px; font-size: 20px; color: #3d4651; background: #fff; border-color: #c5ced8; flex: 0 0 32px; }
#tab-reports .rp-nav:hover:not(:disabled) { background: #3d4651; color: #fff; }
#tab-reports .rp-select { max-width: 200px; height: 34px; background: #fff; border: 1px solid #c5ced8; }
.rp-hero-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.rp-hero-actions .btn-ghost, .rp-hero-actions .btn-zalo { height: 34px; padding: 0 12px; font-size: 13px; background-color: #fff; }
.rp-hero-actions .btn-zalo { background-color: #0068ff; color: #fff; }
.rp-hero-actions .report-pdf-sign-toggle { font-size: 12.5px; color: #3d4651; display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
.rp-hero-actions .rp-del-btn { height: 34px; width: 34px; padding: 0; border: 1px solid #efc9c9; background: #fff; border-radius: 8px; font-size: 14px; }
.rp-hero-actions .rp-del-btn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
#tab-reports .rp-new-btn { font-size: 14px; padding: 0 16px; height: 36px; border-radius: 9px; box-shadow: none; }
@media (max-width: 1100px) { #tab-reports .rp-hero { flex-wrap: wrap; } .rp-hero-actions { width: 100%; justify-content: flex-start; } #tab-reports .rp-new-btn { margin-left: auto; } }
@media (max-width: 640px) {
  #tab-reports .rp-switch { flex-wrap: wrap; }
  #tab-reports .rp-switch-main { flex: 1 1 0; }
  #tab-reports .rp-select { max-width: none; flex: 1 1 100%; order: 5; }
  #tab-reports .rp-cur-sub { white-space: normal; flex-wrap: wrap; }
  #tab-reports .rp-new-btn { width: 100%; margin-left: 0; order: 10; }
}

/* ===== 06/10/2026 (4): TỔNG QUAN DỰ ÁN — giảm chiều cao 2 hàng Cảnh báo/Nhắc việc + Tiến độ ===== */
@media (min-width: 761px) {
  /* Hàng 1: Nhắc việc 1 hàng 3 việc, chữ chính tối đa 2 dòng, dòng phụ 1 dòng */
  .dash-row-alerts { margin-bottom: 12px !important; }
  .dash-row-alerts .reminder-card { position: relative; padding: 8px 14px 6px !important; }
  .dash-row-alerts .reminder-head { margin-bottom: 0 !important; }
  .dash-row-alerts .reminder-head h3 { font-size: 15px; margin: 0; }
  .dash-row-alerts .reminder-more { position: absolute; top: 10px; right: 14px; margin: 0 !important; font-size: 12.5px; }
  .dash-row-alerts .reminder-row { padding: 4px 0 !important; }
  .dash-row-alerts .reminder-text { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dash-row-alerts .reminder-sub { font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-row-alerts .reminder-row > div { min-width: 0; }
  .dash-row-alerts .insight-stack .insight-card { padding: 6px 12px !important; }
  .dash-row-alerts .insight-card .insight-title { font-size: 13px; }
  .dash-row-alerts .insight-card .insight-text { font-size: 12px !important; line-height: 1.4; }

  /* Hàng 2: Tiến độ thời gian | Tiến độ khối lượng | Vấn đề */
  .dash-row-progress { margin-bottom: 12px !important; }
  .dash-row-progress > .card { padding: 8px 14px 6px !important; }
  .dash-row-progress > .card h3 { font-size: 15px; margin: 0 0 2px !important; }
  .dash-row-progress .progress-head { min-height: 0 !important; }
  .dash-row-progress .progress-compact-dates { font-size: 14px; }
  .dash-row-progress .progress-compact-stats { font-size: 12.5px; margin-top: 2px; }
  .dash-row-progress .timeline-track { height: 8px; margin: 16px 0 3px !important; }
  /* Nhãn "Hôm nay" đưa lên TRÊN thanh, không đè lên ngày ở dưới */
  .dash-row-progress .timeline-marker { top: -3px; }
  .dash-row-progress .timeline-marker-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin: 0 0 1px; }
  .dash-row-progress .timeline-labels { margin-top: 0 !important; font-size: 12px; }
  .dash-row-progress #work-progress-body .metric-sub { margin-top: 2px !important; font-size: 12px; }
  .dash-row-progress #issue-summary-card .section-header { margin-bottom: 4px !important; }
  .dash-row-progress #issue-summary-card .issue-empty,
  .dash-row-progress #issue-summary-card [class*="empty"] { padding: 5px 10px !important; font-size: 12.5px; }
  .dash-row-progress #issue-summary-card .issue-view-all { margin-top: 4px !important; padding-top: 4px !important; font-size: 12.5px; }
}

/* 06/10/2026 (5): ngày khởi công → hoàn thành lên cùng hàng tiêu đề, để thanh cam (thời gian)
   và thanh xanh (khối lượng) nằm NGANG HÀNG nhau */
.tl-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.tl-head-row h3 { margin: 0 !important; }
.tl-head-row .progress-compact-dates { font-size: 14px; font-weight: 700; white-space: nowrap; }
@media (min-width: 761px) {
  .dash-row-progress #timeline-card .tl-head-row { margin-bottom: 0; }
  .dash-row-progress #timeline-card .progress-head .progress-compact-stats,
  .dash-row-progress #work-progress-card .progress-head .progress-compact-stats { margin-top: 0; min-height: 20px; }
}

/* 06/10/2026 (6): Phụ lục HĐ — thanh công cụ 1 hàng, hướng dẫn thu gọn, đầu bảng dính khi cuộn */
.ax-head { flex-wrap: nowrap; }
.ax-head h3 { white-space: nowrap; margin: 0; }
@media (min-width: 1100px) {
  .ax-head .ax-toolbar { flex: 0 0 auto; flex-wrap: nowrap; }
  .ax-head .ax-toolbar #appendix-search { width: 190px; max-width: none; }
  .ax-head .ax-toolbar #appendix-status-filter { width: 160px; max-width: none; }
}
@media (max-width: 1099px) { .ax-head { flex-wrap: wrap; } }
#appendix-card .tab-help { margin: 0 0 10px; }
#appendix-card.sticky-on > .tab-sticky-head { position: sticky; top: var(--sticky-top, 0); z-index: 25; padding-top: 8px; margin-top: -8px; box-shadow: 0 8px 10px -10px rgba(0,0,0,.25); }
#appendix-card.sticky-on > .tab-sticky-head .section-header { margin-bottom: 8px; }

/* ===== 07/10/2026: DỄ ĐỌC + NÚT + TRÒN =====
   (4) Nút + tròn màu cam chỉ dùng trên ĐIỆN THOẠI — trên máy tính đã có nút "+ Thêm nhật ký",
       nút tròn đè lên cột Thao tác (che Sửa/Xoá dòng cuối). */
@media (min-width: 901px) { .fab-add-log { display: none !important; } }
/* (2) Chữ phụ/ghi chú xám: đậm hơn chút cho dễ đọc ngoài công trường */
.metric-sub, .kpi-sub, .msc-sub, .msc-sub2, .reminder-sub, .debt-sub, .mat-nlog, .item-history-sub { color: #66655f; }

/* ===== 07/10/2026 (mục 1): menu avatar + thanh dưới đáy điện thoại ===== */
.tabbar .tab-btn.tab-in-menu { display: none !important; }
.topbar-user.has-menu { cursor: pointer; border-radius: 99px; padding: 3px 8px 3px 3px; transition: background .15s; }
.topbar-user.has-menu:hover { background: rgba(255,255,255,.14); }
.topbar-user.has-menu::after { content: "▾"; font-size: 11px; opacity: .8; margin-left: 2px; }
.user-menu { position: fixed; z-index: 90; min-width: 230px; background: #fff; border: 1px solid #d3d9e0; border-radius: 12px;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.35); padding: 6px; display: none; }
.user-menu.open { display: block; }
.user-menu .um-head { padding: 8px 10px 6px; border-bottom: 1px solid #eef0f3; margin-bottom: 4px; }
.user-menu .um-email { font-size: 12px; color: #6b6a64; word-break: break-all; }
.user-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 10px; border-radius: 8px;
  font: inherit; font-size: 14px; color: #262e38; cursor: pointer; }
.user-menu button:hover { background: #f1f4f7; }
.user-menu .um-sep { height: 1px; background: #eef0f3; margin: 4px 0; }
.user-menu .um-danger { color: #b03a3a; }

.bottom-nav { display: none; }
.bn-sheet { display: none; }
@media (max-width: 640px) {
  #app-screen .tabbar { display: none !important; }
  #app-screen { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  #app-screen .fab-add-log { display: none !important; }
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff;
    border-top: 1px solid #d3d9e0; box-shadow: 0 -6px 18px -12px rgba(0,0,0,.35);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; }
  .bottom-nav button { flex: 1 1 0; background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
    font: inherit; font-size: 11px; font-weight: 600; color: #6b6a64; padding: 5px 2px; border-radius: 10px; cursor: pointer; min-height: 52px; justify-content: center; }
  .bottom-nav button .bn-ic { font-size: 20px; line-height: 1.1; filter: grayscale(.4); }
  .bottom-nav button.active { color: var(--th-acc, var(--accent)); }
  .bottom-nav button.active .bn-ic { filter: none; }
  .bottom-nav .bn-add { flex: 0 0 auto; }
  .bottom-nav .bn-add span { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--th-acc, var(--accent)), #c8650a);
    color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin-top: -18px;
    box-shadow: 0 6px 16px rgba(217,114,12,.45); border: 3px solid #fff; }
  .bn-sheet { display: block; position: fixed; inset: 0; z-index: 80; pointer-events: none; }
  .bn-sheet .bn-sheet-backdrop { position: absolute; inset: 0; background: rgba(20,24,30,.45); opacity: 0; transition: opacity .2s; }
  .bn-sheet .bn-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0;
    padding: 8px 14px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .22s ease; }
  .bn-sheet.open { pointer-events: auto; }
  .bn-sheet.open .bn-sheet-backdrop { opacity: 1; }
  .bn-sheet.open .bn-sheet-panel { transform: none; }
  .bn-sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: #d3d9e0; margin: 2px auto 8px; }
  .bn-sheet-title { font-weight: 700; font-size: 14px; color: #262e38; margin-bottom: 10px; }
  .bn-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bn-sheet-item { background: #f6f8fa; border: 1px solid #e3e6ea; border-radius: 12px; padding: 12px 4px; display: flex; flex-direction: column;
    align-items: center; gap: 4px; font: inherit; font-size: 12.5px; font-weight: 600; color: #262e38; text-align: center; cursor: pointer; line-height: 1.25; }
  .bn-sheet-item .bn-ic { font-size: 22px; }
  .bn-sheet-item.active { border-color: var(--th-acc, var(--accent)); background: var(--accent-bg); }
}

/* ===== 07/10/2026 (mục 10): nút Chia sẻ gộp trên điện thoại ===== */
.share-btn { display: none; }
.share-pop { position: fixed; z-index: 90; width: 240px; background: #fff; border: 1px solid #d3d9e0; border-radius: 12px;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.35); padding: 6px; display: none; }
.share-pop.open { display: block; }
.share-pop button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 12px 10px; border-radius: 8px;
  font: inherit; font-size: 14.5px; color: #262e38; cursor: pointer; }
.share-pop button:hover, .share-pop button:active { background: #f1f4f7; }
@media (max-width: 640px) {
  .share-src { display: none !important; }
  .share-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; font-weight: 600; background: #fff; }
}
/* thanh dưới đáy nằm DƯỚI hộp thoại / ngăn kéo, và tự ẩn khi đang mở để không che nút Lưu */
@media (max-width: 640px) {
  .bottom-nav { z-index: 45; }
  body:has(.modal-backdrop[style*="flex"]) .bottom-nav,
  body:has(.item-drawer[style*="flex"]) .bottom-nav { display: none; }
}

/* ===== 07/10/2026 (mục 5): MỘT KIỂU Ô SỐ LIỆU DUY NHẤT =====
   metric-card (Tổng quan, Nhật ký, Phụ lục, Thanh toán), kpi-card (Thầu phụ, NCC, Nguồn lực),
   materials-summary-card (Vật tư, Kế hoạch nhập), rp-kpi (Báo cáo) — cùng khung, cùng chữ. */
.metric-card, .kpi-card, .materials-summary-card, .rp-kpi {
  background: #fff !important; border: 1px solid #e3e6ea !important; border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.05); position: relative; overflow: hidden;
}
.metric-card-accent, .kpi-card, .materials-summary-card { padding: 12px 14px 12px 18px !important; }
.metric-card-accent::before, .kpi-card::before, .materials-summary-card::before { width: 4px !important; }
.metric-label, .kpi-label, .msc-label, .rp-kpi-label {
  font-size: 13px !important; font-weight: 600 !important; color: #5b6673 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
.metric-value, .kpi-value, .msc-value, .rp-kpi-value {
  font-size: 20px !important; font-weight: 800 !important; color: #1c1c1a; line-height: 1.25;
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}
#tab-dashboard .metric-grid-5 .metric-value { font-size: 22px !important; }
.metric-icon, .kpi-icon, .msc-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; font-size: 15px !important; }
.kpi-top, .metric-top { padding-left: 0 !important; gap: 8px !important; margin-bottom: 6px; }
/* Vật tư / Kế hoạch: biểu tượng + nhãn trên 1 hàng, số to bên dưới — giống các ô khác */
.materials-summary-card { display: grid !important; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; row-gap: 6px; align-items: center; }
.materials-summary-card .msc-text { display: contents; }
.materials-summary-card .msc-label { grid-column: 2; white-space: normal !important; line-height: 1.25; }
.materials-summary-card .msc-value, .materials-summary-card .msc-sub, .materials-summary-card .msc-sub2 { grid-column: 1 / -1; }
.materials-summary-card .msc-sub, .materials-summary-card .msc-sub2 { margin-top: -4px; }
/* Ô con trong "Tiền giữ lại theo hợp đồng" giữ gọn */
#debt-card .metric-card { padding: 10px 14px !important; box-shadow: none; }

/* ===== mục 9: tên ô viết tắt trên điện thoại ===== */
.lb-short { display: none; }
@media (max-width: 640px) {
  .lb-full { display: none; }
  .lb-short { display: inline; }
  .metric-label, .kpi-label, .msc-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .metric-value, .kpi-value, .msc-value { font-size: 18px !important; }
  #tab-dashboard .metric-grid-5 .metric-value { font-size: 19px !important; }
}

/* ===== mục 8: thanh trên cùng gọn ===== */
#app-screen .topbar-clock { display: none !important; }
#app-screen .topbar-user .user-email { display: none !important; }
.user-display { display: inline-flex; flex-direction: column; line-height: 1.15; max-width: 210px; color: #fff; }
.user-display b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-display small { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .user-display { display: none; } }
.view-mode-switch::before { content: "Kiểu xem"; font-size: 10.5px; color: rgba(255,255,255,.75); margin: 0 4px 0 6px; white-space: nowrap; }
@media (max-width: 380px) { .view-mode-switch::before { display: none; } }

/* ===== mục 7: hướng dẫn thu gọn — khoảng cách đồng đều ===== */
.tab-help { margin: 0 0 10px !important; }

/* ===== mục 11: Dự án mẫu ===== */
.qs-head .qs-sample { margin-left: auto; margin-right: 6px; font-size: 13px; padding: 6px 12px; }
.sample-modal-box { max-width: 680px; }
.smp-note { font-size: 12.5px; color: #5b6673; background: #f3f5f7; border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.smp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.smp-k { border: 1px solid #e3e6ea; border-radius: 10px; padding: 8px 10px 8px 13px; position: relative; overflow: hidden; }
.smp-k::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.smp-k span { display: block; font-size: 12px; color: #5b6673; font-weight: 600; }
.smp-k b { display: block; font-size: 18px; margin: 2px 0; }
.smp-k small { font-size: 11px; color: #6b6a64; }
.smp-alert { background: #fdf3e3; border: 1px solid #f0c391; border-radius: 10px; padding: 8px 12px; font-size: 13px; color: #6b3906; margin-bottom: 10px; }
.smp-bars { display: grid; gap: 6px; margin-bottom: 12px; }
.smp-bar { display: grid; grid-template-columns: 80px 1fr 50px; align-items: center; gap: 8px; font-size: 12.5px; }
.smp-bar i { height: 8px; background: #eef0f3; border-radius: 99px; overflow: hidden; display: block; }
.smp-bar u { display: block; height: 100%; border-radius: 99px; }
.smp-bar b { text-align: right; }
.smp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.smp-box { border: 1px solid #e3e6ea; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.smp-h { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.smp-li { display: flex; gap: 7px; align-items: flex-start; padding: 3px 0; }
.smp-li .d { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 8px; }
.smp-li .d.o { background: #d9720c; } .smp-li .d.r { background: #c0392b; }
.smp-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed #eef0f3; }
.smp-foot { font-size: 12.5px; color: #3d4651; margin: 12px 0; }
.smp-go { width: 100%; }
@media (max-width: 640px) { .smp-kpis { grid-template-columns: 1fr 1fr; } .smp-grid { grid-template-columns: 1fr; } }

/* ===== 07/10/2026: THANH TRÊN CÙNG ĐIỆN THOẠI GỌN 1 HÀNG =====
   [‹] [Tên dự án ▾] [✏️] [+] [Avatar] — 🎨 Màu và Kiểu xem chuyển vào menu avatar. */
.user-menu .um-mobile { display: none; }
@media (max-width: 640px) {
  #app-screen .topbar-inner { flex-wrap: nowrap !important; padding: 6px 10px !important; gap: 6px !important; min-height: 0; }
  #app-screen .topbar-left { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap !important; gap: 6px !important; }
  #app-screen .topbar-divider { display: none; }
  #app-screen .topbar-project { flex: 1 1 auto; min-width: 0; max-width: none !important; }
  #app-screen .topbar-project-label { display: none; }
  #app-screen .topbar-project-pick { margin-top: 0; min-width: 0; }
  #app-screen .topbar-project-name { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #app-screen .topbar-actions { flex: 0 0 auto; gap: 6px; display: flex; }
  #app-screen .topbar-btn { padding: 6px 8px !important; min-height: 34px; }
  #app-screen .topbar-right { flex: 0 0 auto; gap: 4px !important; flex-wrap: nowrap !important; }
  #app-screen .topbar-right .theme-btn,
  #app-screen .topbar-right .view-mode-switch { display: none !important; }
  #app-screen .topbar-user.has-menu { padding: 2px; }
  #app-screen .topbar-user.has-menu::after { display: none; }
  #app-screen .topbar-avatar { width: 32px; height: 32px; }
  .user-menu .um-mobile { display: block; }
  .user-menu .um-sep.um-mobile { display: block; }
}
@media (max-width: 640px) {
  #app-screen .topbar-project-pick { overflow: hidden; }
  #app-screen .topbar-project-name { display: block !important; white-space: nowrap !important; flex: 1 1 auto; max-width: 100% !important; line-height: 1.2; }
}


/* ===== 11/10/2026: Bảng Tổng quan các dự án — lược bớt cho vừa khung máy tính =====
   Bỏ cột "Chi tiết" (bấm cả dòng để mở), dời Năm xuống dưới Trạng thái, bỏ thanh Chi phí (trùng cột Chi phí lũy kế) */
.pf-year-inline { display: none; }
@media (min-width: 641px) {
  table.pf-table { min-width: 1200px !important; }
  table.pf-table th:nth-child(1), table.pf-table td:nth-child(1) { width: 52px; padding-left: 10px; padding-right: 4px; }
  table.pf-table th:nth-child(10), table.pf-table td:nth-child(10) { width: 96px; padding-left: 4px; padding-right: 10px; text-align: right; }
  table.pf-table .btn-detail { padding: 5px 9px; }
  table.pf-table .total-row td { padding-top: 9px !important; padding-bottom: 9px !important; }
  table.pf-table th:nth-child(2), table.pf-table td:nth-child(2) { width: auto; min-width: 168px; }
  table.pf-table th:nth-child(3), table.pf-table td:nth-child(3) { width: 140px; }
  table.pf-table th:nth-child(4), table.pf-table td:nth-child(4),
  table.pf-table th:nth-child(5), table.pf-table td:nth-child(5),
  table.pf-table th:nth-child(6), table.pf-table td:nth-child(6),
  table.pf-table th:nth-child(7), table.pf-table td:nth-child(7),
  table.pf-table th:nth-child(8), table.pf-table td:nth-child(8) { width: 114px; padding-left: 6px; padding-right: 6px; }
  table.pf-table th:nth-child(9), table.pf-table td:nth-child(9) { width: 200px; padding-right: 12px; }
  table.pf-table td.num { font-size: 13px; }
  table.pf-table .dual-progress.tri .dp-row { grid-template-columns: 64px minmax(0, 1fr) 38px; }
  table.pf-table .dual-progress.tri .dp-label { white-space: nowrap; }
  table.pf-table .total-row td { line-height: 1.2; }
  table.pf-table .total-row td.num .pf-profit-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.pf-table tbody tr.pf-row:hover .proj-name { color: var(--navy-2, #1e4b8a); text-decoration: underline; text-underline-offset: 2px; }
}


/* ===== 11/10/2026 (lần 3): góp ý bảng Tổng quan các dự án mục 1–7 ===== */
.pf-health { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin: 0 4px 0 2px; align-self: center; }
.pf-health.ok { background: #1e9e5a; box-shadow: 0 0 0 3px #e3f4ea; }
.pf-health.warn { background: #e08a00; box-shadow: 0 0 0 3px #fdf0dc; }
.pf-health.bad { background: #d0352b; box-shadow: 0 0 0 3px #fbe3e1; }
table.pf-table .proj-cell { display: flex; gap: 8px; }
a.pf-add-plhd { color: var(--navy-2, #1e4b8a); text-decoration: none; font-weight: 600; cursor: pointer; }
a.pf-add-plhd:hover { text-decoration: underline; }
.pf-list-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-list-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.btn-zalo.pf-zalo-soft { background: #fff; color: #0068ff; border: 1px solid #b8d2ff; font-weight: 600; }
.btn-zalo.pf-zalo-soft:hover { background: #eef4ff; }
@media (min-width: 641px) {
  table.pf-table.pf-one-year th:nth-child(1), table.pf-table.pf-one-year td:nth-child(1) { display: none; }
  table.pf-table.pf-one-year { min-width: 1150px !important; }
}

/* ===== 11/10/2026: Dòng tiền — biểu đồ B (thanh ngang từng tuần) + tiền chờ thu + hạn mức ===== */
.cfb { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.cfb-head, .cfb-row { display: grid; grid-template-columns: 112px 112px 92px minmax(0, 1fr) 104px; gap: 10px; align-items: center; padding: 0 12px; }
.cfb-head { background: #e4e8ee; color: #262e38; font-size: 12px; font-weight: 700; min-height: 34px; border-bottom: 1px solid #c5ced8; }
.cfb-head .r, .cfb-in, .cfb-out, .cfb-bal { text-align: right; }
.cfb-head-track { position: relative; height: 16px; }
.cfb-head-track span { position: absolute; transform: translateX(-50%); font-size: 11px; color: #5b6673; }
.cfb-row { min-height: 44px; border-top: 1px solid #eef1f5; cursor: pointer; font-size: 13px; }
.cfb-row:hover { background: #fafbfc; }
.cfb-row.start { cursor: default; background: #f7f8fa; border-top: 0; }
.cfb-wk { display: flex; flex-direction: column; line-height: 1.25; }
.cfb-wk b { font-size: 13px; } .cfb-wk > span { font-size: 11.5px; color: var(--text-muted); }
.cfb-io-m { display: none; }
.cfb-in { color: #1e7d34; font-weight: 700; display: flex; flex-direction: column; line-height: 1.2; }
.cfb-in small { font-size: 11px; font-weight: 500; color: #b35c00; }
.cfb-out { color: #c2410c; font-weight: 700; }
.cfb-in.none, .cfb-out.none { color: #b4b8bf; font-weight: 400; }
.cfb-track { position: relative; height: 18px; }
.cfb-axis { position: absolute; top: -8px; bottom: -8px; width: 0; border-left: 1.5px solid #5b6673; }
.cfb-limit { position: absolute; top: -8px; bottom: -8px; width: 0; border-left: 1.5px dashed #d03b3b; }
.cfb-bar { position: absolute; top: 2px; height: 14px; border-radius: 3px; }
.cfb-bar.pos { background: #1baf7a; }
.cfb-bar.credit { background: #eda100; }
.cfb-bar.neg { background: #e24b4a; }
.cfb-row.quiet .cfb-bar { opacity: .45; }
.cfb-bal { font-weight: 800; font-variant-numeric: tabular-nums; }
.cfb-row.pos .cfb-bal { color: #1e7d34; } .cfb-row.credit .cfb-bal { color: #b35c00; } .cfb-row.neg .cfb-bal { color: #b3261e; }
.cfb-wrap.open .cf-wk-detail { border-left: 0; border-right: 0; border-radius: 0; }
.cf-it.unsure .cf-it-a { color: #b35c00; }
.cf-legend i.pos { background: #1baf7a; } .cf-legend i.credit { background: #eda100; } .cf-legend i.neg { background: #e24b4a; }
.cf-legend i.limit { width: 0; height: 12px; border-left: 2px dashed #d03b3b; border-radius: 0; vertical-align: -2px; }
.cf-summary.warn { background: #fff8eb; border-color: #f2d39a; color: #7a4a00; }
.cf-sum-credit { font-weight: 500; }
/* Tiền chờ thu chưa hẹn ngày */
.cf-wait-box:empty { display: none; }
.cf-wait-box { border: 1px solid #bfe3cc; background: #f3fbf6; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; font-size: 13px; }
.cf-wait-head b.pos { color: #1e7d34; }
.cf-wait-held { color: var(--text-muted); font-size: 12px; }
.cf-wait-list { display: flex; flex-direction: column; margin-top: 6px; }
.cf-wait-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px dashed #cfe8d8; }
.cf-wait-name { display: flex; flex-direction: column; font-weight: 600; min-width: 0; }
.cf-wait-name small { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.cf-wait-amt { text-align: right; font-weight: 800; color: #1e7d34; }
.cf-wait-btn { padding: 4px 10px; font-size: 12px; white-space: nowrap; }
/* Hồ sơ + thực nhận ở đợt dự kiến thu */
.exp-doc-sel { margin-left: 8px; font-size: 12px; padding: 2px 6px; border-radius: 99px; border: 1px solid var(--border); background: #fff; width: auto; }
.exp-doc-sel.doc-chua_lap { color: #b35c00; border-color: #f2d39a; background: #fff8eb; }
.exp-doc-sel.doc-da_nop { color: #1e4b8a; border-color: #c9d4e3; background: #eef4ff; }
.exp-doc-sel.doc-kho_bac { color: #1e7d34; border-color: #bfe3cc; background: #f3fbf6; }
.exp-amt small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.exp-net { flex-basis: 100%; font-size: 12.5px; color: #1e7d34; }
.exp-net:empty { display: none; }
.exp-net span { color: var(--text-muted); }
.cf-balance-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cf-balance-row > div { flex: 1 1 240px; }
@media (max-width: 640px) {
  .cfb-head, .cfb-row { grid-template-columns: 86px minmax(0, 1fr) 76px; gap: 8px; padding: 0 10px; }
  .cfb-head > div:nth-child(2), .cfb-head > div:nth-child(3), .cfb-in, .cfb-out, .cfb-row.start > div:nth-child(2), .cfb-row.start > div:nth-child(3) { display: none; }
  .cfb-io-m { display: flex; gap: 6px; font-size: 11px; font-style: normal; }
  .cfb-io-m i { font-style: normal; font-weight: 700; } .cfb-io-m i.in { color: #1e7d34; } .cfb-io-m i.out { color: #c2410c; }
  .cfb-row { min-height: 50px; }
  .cf-wait-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cf-wait-btn { grid-column: 1 / -1; justify-self: start; }
}

/* ===== 12/10/2026: icon SVG màu phẳng thay emoji (phương án 3) ===== */
.ei-wrap { display: inline-flex; vertical-align: -0.18em; line-height: 1; }
.ei { width: 1.2em; height: 1.2em; display: inline-block; overflow: visible; flex-shrink: 0; }
.tab-icon .ei { width: 19px; height: 19px; }
.bottom-nav button .bn-ic { filter: none !important; }
.bottom-nav button .bn-ic .ei { width: 23px; height: 23px; }
.bottom-nav button:not(.active) .bn-ic .ei { opacity: .75; }
/* nền đậm (tab đang chọn, nút cam/xanh): viền trắng quanh khối màu cho nổi */
.tab-btn.active .ei .b, .pf-tab.active .ei .b, .bottom-nav button.active .ei .b { stroke: #fff; stroke-width: 1.4px; }
/* nút nền màu: icon chuyển sang nét trắng 1 màu */
.btn-primary .ei .b, .btn-zalo:not(.pf-zalo-soft) .ei .b, .btn-danger .ei .b { fill: none; stroke: currentColor; stroke-width: 1.7px; }
.btn-primary .ei .d, .btn-zalo:not(.pf-zalo-soft) .ei .d, .btn-danger .ei .d { stroke: currentColor; }
/* ô số liệu: icon to hơn 1 chút */
.kpi-icon .ei, .metric-icon .ei, .msc-icon .ei { width: 20px; height: 20px; }

/* ===== 12/10/2026: thanh menu tab giãn đều hết chiều ngang (máy tính) ===== */
@media (min-width: 1100px) {
  .tabbar { justify-content: space-between; padding: 0 10px; }
  .tab-btn { padding: 6px 10px; font-size: 13.5px; gap: 7px; }
}
/* 13/10/2026: icon SVG trong ngăn "Chọn mục" (điện thoại) */
.bn-sheet-item .bn-ic .ei { width: 26px; height: 26px; }
.bn-sheet-item.active .ei .b { stroke: #fff; stroke-width: 1.4px; }

/* ===== 13/10/2026: cột phải Tổng quan dự án (Công nợ + Tiện ích & dịch vụ) ===== */
#dash-right-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#dash-right-col > .card { margin-bottom: 0; }
@media (min-width: 1181px) { #dash-right-col { grid-column: span 2; } #dash-right-col #debt-card { grid-column: auto; } }
#links-card .al-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#links-card .al-head h3 { margin: 0; display: flex; align-items: center; gap: 7px; }
#links-card .al-hide { padding: 3px 10px; font-size: 12px; }
.al-list, .al-svc { display: flex; flex-direction: column; }
.al-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #eef1f5; }
.al-item:first-child { border-top: 0; }
.al-ic { font-size: 20px; display: flex; justify-content: center; }
.al-ic .ei { width: 24px; height: 24px; }
.al-txt { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.al-txt small { color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.al-open { white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--navy-2, #1e4b8a); border: 1px solid #c9d4e3; border-radius: 7px; padding: 4px 10px; text-decoration: none; }
.al-open:hover { background: var(--navy, #1b2f55); color: #fff; border-color: var(--navy, #1b2f55); }
.al-soon { font-size: 12px; color: var(--text-muted); font-style: italic; }
.al-svc { margin-top: 8px; background: #fff8eb; border: 1px solid #f2d39a; border-radius: 10px; padding: 2px 12px; }
.al-svc .al-item { border-top-color: #f2e2c0; }
.al-svc .al-open { color: #fff; background: #0068ff; border-color: #0068ff; }
.links-show { font-size: 12.5px; color: var(--text-muted); align-self: flex-end; }
body.role-viewer #links-card, body.role-viewer .links-show { display: none !important; }
@media print { #links-card, .links-show { display: none !important; } }
.al-table input[type=text] { min-width: 120px; width: 100%; }

/* ===== 13/10/2026: cân lề thanh trên cùng thẳng với thanh menu + nội dung (máy tính) ===== */
@media (min-width: 641px) {
  .topbar-inner { max-width: var(--app-max-width); padding-left: var(--app-side-padding); padding-right: var(--app-side-padding); }
}

/* ===== 13/10/2026: Nguồn lực — 2 ô lãi ròng, mốc hoà vốn, bảng gom nhóm, BHXH ===== */
.res-table .res-h-cat, .res-table td.res-c-cat { display: none; }
.res-table tr.res-grp-row td { background: #f3f5f8; font-weight: 800; color: #262e38; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid #dfe4ea; }
.res-table tr.res-grp-row td span { font-weight: 500; color: var(--text-muted); font-size: 12px; }
.res-table tr.res-extra-row td { font-style: italic; color: var(--text-secondary); background: #fcfcfd; }
.res-cash-note { line-height: 1.5; padding: 8px 12px; }
.res-breakeven { border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; margin-bottom: 12px; font-size: 13px; line-height: 1.55; background: #fff; }
.res-breakeven.ok { border-color: #bfe3cc; background: #f6fcf8; }
.res-breakeven.bad { border-color: #f0c2bb; background: #fff8f6; }
.res-breakeven b.pos { color: #1e7d34; } .res-breakeven b.neg { color: var(--danger); }
.res-be-bar { position: relative; height: 10px; border-radius: 99px; background: #e9edf2; margin-top: 8px; overflow: visible; }
.res-be-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: #1baf7a; }
.res-breakeven.bad .res-be-bar i { background: #e24b4a; }
.res-be-mark { position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 2px dashed #262e38; }
.res-be-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.res-ins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding: 9px 12px; background: var(--surface-0); border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; color: var(--text-secondary); }
.res-ins input { width: 70px; padding: 4px 6px; text-align: center; }
.res-ins .btn-ghost { padding: 4px 12px; }
.res-ins-sep { color: var(--text-muted); }
.res-ins-note { font-size: 12.5px; } .res-ins-note .warn { color: #b35c00; }
@media (max-width: 640px) {
  .res-table tbody tr.res-grp-row { display: flex; justify-content: space-between; padding: 8px 6px; background: #f3f5f8; border-radius: 8px; margin-top: 8px; }
  .res-table tbody tr.res-grp-row td { display: block; background: none; border: 0; padding: 0 !important; }
  .res-table tbody tr.res-grp-row td:last-child { display: none; }
}
/* 15/10/2026: dòng BHXH — ô chữ rõ hơn, nút Lưu nổi */
.res-ins input { width: 72px; background: #fff; border: 1px solid #c5ced8; font-weight: 700; color: var(--text-primary); }
.res-ins input::placeholder { font-weight: 400; color: #a3a9b1; font-style: italic; }
.res-ins .btn-primary { padding: 5px 14px; }
.res-ins-ok { color: #1e7d34; font-weight: 700; }
/* 15/10/2026: lãi gộp dự án chưa xong → "Chưa chốt" + tỷ lệ chi phí / KL đã làm */
.pf-profit-pending { color: var(--text-muted); font-weight: 600; font-size: 13px; font-style: italic; }
.pf-cr { font-weight: 700; }
.pf-cr.pos { color: #1e7d34; } .pf-cr.low { color: #b35c00; } .pf-cr.neg { color: var(--danger); }
/* 15/10/2026 (2): lãi kế hoạch (dự toán nội bộ) của dự án đang thi công — chữ nghiêng, màu nhạt hơn lãi thật */
.pf-profit.pf-plan { color: #5b6673; font-style: italic; font-weight: 700; }
/* 15/10/2026: nhân sự lương đã ghi Nhật ký dự án — không cộng vào chi phí cố định */
.res-table tr.res-inlog .res-cost-num { color: var(--text-muted); text-decoration: line-through; text-decoration-color: #b4b8bf; }
.res-table tr.res-inlog .res-inlog-note { text-decoration: none; color: #2f6fd6; font-weight: 600; }
#res-inlog-row { background: #eef4ff; border: 1px solid #c9d4e3; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.45; }

/* ===== 21/10/2026: tab Thanh toán & Phụ lục HĐ dính khi cuộn giống các tab khác =====
   Phần đầu thẻ (tiêu đề bảng + công cụ) được tách vào khối dính; 2 nửa nối liền thành 1 thẻ. */
.tab-sticky-head .sticky-card-top { background: var(--surface-1); border: 0.5px solid var(--border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 16px 16px 6px; }
.tab-sticky-head .sticky-card-top > :last-child { margin-bottom: 4px; }
.card.card-continued { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; }
.tab-panel.sticky-on > .tab-sticky-head .sticky-card-top { padding-top: 10px; }
.tab-panel.sticky-on > .tab-sticky-head .sticky-card-top h3 { font-size: 16px; margin-bottom: 4px; }
#tab-appendix .sticky-card-top .tab-help { margin: 0 0 6px; }
.sticky-card-top .section-header { margin-bottom: 8px; }

/* ===== 21/10/2026: rà soát Tổng quan các dự án — mục 3, 5, 6 ===== */
.pf-tab-bd.amber { background: #fff3dc; color: #a35d00; }
.pf-inv-ic { color: #c0392b; font-weight: 800; cursor: help; margin-left: 2px; }
/* thanh trên cùng: logo + thương hiệu, avatar menu */
.pf-brand-logo { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; }
.pf-brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.pf-brand-txt small { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: rgba(255,255,255,.7); }
#portfolio-screen #portfolio-user-email, #portfolio-screen #portfolio-change-password-btn, #portfolio-screen #portfolio-logout-btn { display: none !important; }
#portfolio-screen .topbar-user.pf-user { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
@media (max-width: 640px) {
  #portfolio-screen .pf-user .user-display { display: none; }
  #portfolio-screen .theme-btn { display: none; }
}

/* ===== 21/10/2026: rà soát Nguồn lực ===== */
#res-k-idle-sub .warn { color: #b35c00; }
#res-k-idle-sub b.neg, .res-due-soon { color: var(--danger); }
.res-loan-wrap { background: #f5f8fc; border: 1px solid #d6e0ec; border-radius: 10px; padding: 8px 10px 10px; margin: 6px 0; }
.res-paid-btn { display: inline-block; margin-top: 4px; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; border: 1px dashed #c5ced8; background: #fff; color: var(--text-muted); cursor: pointer; }
.res-paid-btn:hover { border-color: #1e7d34; color: #1e7d34; }
.res-paid-btn.on { border-style: solid; border-color: #bfe3cc; background: #e9f7ef; color: #1e7d34; font-weight: 700; }
/* 21/10/2026: nút khoá / mở Dòng tiền & Nguồn lực theo công ty (Quản trị SaaS) */
.saas-actions .saas-c-fin { color: #8a5a00; border-color: #f2d39a; background: #fff8eb; }
.saas-actions .saas-c-fin.on { color: #1e7d34; border-color: #bfe3cc; background: #f3fbf6; }