/* Dự án Phần 2 (spec 2026-11-06 mục 8): trang Quy trình B1–B6 (qt-), Master plan chi tiết (mp-), Cài đặt (cd-), tab Tiến độ / Hàng hoá, Gantt
   "Tiến độ chung" ở Tổng quan (da-g-). Biến màu của hub.css; chỉ var(--font) (phông hệ thống Mac), số tabular-nums. Mọi luật dưới .page-du-an
   (trang) hoặc .da-modal (hộp mở ở body: chọn mã hàng, B7 / B8). Không tràn ở 390 px: lưới 2–3 cột thành 1 cột, Gantt / master plan cuộn ngang
   trong khung của chúng (không cuộn cả trang). */

/* ---------------------------------------------------------------- Quy trình: khối tối + 6 ô bước (ảnh p.26–32) */
.page-du-an .da-sub { min-width: 0; }
.page-du-an .qt-head { background: #14213d; color: #e2e8f0; border-radius: 16px; padding: 16px 18px 18px; margin-bottom: 14px; }
.page-du-an .qt-head-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.page-du-an .qt-head a { color: #cbd5e1; text-decoration: none; }
.page-du-an .qt-head a:hover { color: #fff; }
.page-du-an .qt-head .qt-mp { color: #fde68a; font-weight: 600; }
.page-du-an .qt-head-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.page-du-an .qt-head h2 { margin: 0; font-size: 21px; color: #fff; }
.page-du-an .qt-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e2e8f0; color: #334155; white-space: nowrap; }
.page-du-an .qt-badge.ok, .da-modal .qt-badge.ok { background: #bbf7d0; color: #14532d; }
.page-du-an .qt-badge.warn, .da-modal .qt-badge.warn { background: #fef3c7; color: #92400e; }
.page-du-an .qt-badge.info { background: #dbeafe; color: #1e3a8a; }
.page-du-an .qt-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.page-du-an .qt-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 10px; border-radius: 10px; background: #1e2b4d; border: 1px solid #334155; text-decoration: none; color: #e2e8f0 !important; }
.page-du-an .qt-tile small { font-size: 11px; font-weight: 700; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-du-an .qt-tile b { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.page-du-an .qt-tile.done small { color: #86efac; }
.page-du-an .qt-tile.stale small { color: #fcd34d; }
.page-du-an .qt-tile.doing small { color: #93c5fd; }
.page-du-an .qt-tile.locked { opacity: 0.6; }
.page-du-an .qt-tile.active { background: #fff; border-color: #fff; color: #0f172a !important; }
.page-du-an .qt-tile.active small { color: #15803d; }
.page-du-an .qt-body { max-width: 860px; }
.page-du-an .qt-step-head { margin: 4px 0 12px; }
.page-du-an .qt-step-head small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: #2563eb; }
.page-du-an .qt-step-head h3 { margin: 2px 0 2px; font-size: 20px; }
.page-du-an .qt-step-head p { margin: 0 0 8px; color: var(--dim); font-size: 13.5px; }
.page-du-an .qt-step-head .notice { margin: 8px 0 0; }
.page-du-an .qt-meta { font-size: 12px !important; color: var(--faint) !important; }

/* ---------------------------------------------------------------- thẻ, ô nhập */
.page-du-an .qt-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); min-width: 0; }
.page-du-an .qt-card h4 { margin: 0 0 10px; font-size: 15px; }
.page-du-an .qt-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--surface-3); font-size: 13.5px; }
.page-du-an .qt-kv span { color: var(--faint); }
.page-du-an .qt-kv b { text-align: right; overflow-wrap: anywhere; min-width: 0; }
.page-du-an .qt-field, .da-modal .qt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0 0 10px; }
.page-du-an .qt-label, .da-modal .qt-label { font-size: 12.5px; font-weight: 600; color: var(--dim); }
.page-du-an .qt-field .input, .da-modal .qt-field .input { width: 100%; min-width: 0; }
.page-du-an .qt-field textarea, .da-modal .qt-field textarea { resize: vertical; min-height: 56px; }
.page-du-an .qt-num, .da-modal .qt-num { display: flex; align-items: center; gap: 6px; }
.page-du-an .qt-num em, .da-modal .qt-num em { font-style: normal; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.page-du-an .qt-grid2, .da-modal .qt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.page-du-an .qt-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.page-du-an .qt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.page-du-an .qt-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 36px; }
.page-du-an .qt-chip.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.page-du-an .qt-chip:disabled { cursor: default; opacity: 0.85; }
.page-du-an .qt-calc, .da-modal .qt-calc { margin: 2px 0 10px; padding: 9px 12px; border-radius: 10px; background: #eff6ff; color: #1e3a8a; font-size: 13px; }
.page-du-an .qt-calc small { display: block; font-size: 11.5px; color: #2563eb; }
.page-du-an .qt-calc b { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.page-du-an .qt-hint { margin: 4px 0 10px; padding: 9px 12px; border-radius: 10px; background: #e0f2fe; color: #075985; font-size: 12.5px; }
.page-du-an .qt-result .qt-calc, .page-du-an .qt-result p { margin: 0 0 6px; }
.page-du-an .qt-item { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: var(--surface); }
.page-du-an .qt-card.qt-item { padding: 12px 14px; }
.page-du-an .qt-item.open { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08); }
.page-du-an .qt-sum { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; cursor: pointer; }
.page-du-an .qt-sum > div { min-width: 0; }
.page-du-an .qt-sum b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; overflow-wrap: anywhere; }
.page-du-an .qt-sum small { display: block; margin-top: 2px; color: var(--faint); font-size: 12.5px; overflow-wrap: anywhere; }
.page-du-an .qt-item.open > .qt-sum { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.page-du-an .qt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.page-du-an .qt-work { margin: 0 0 6px; padding: 8px 10px 0; border-left: 4px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.page-du-an .qt-work-name { display: inline-block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); border-left: 0; }
.page-du-an .qt-work-name::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; background: var(--c); }
.page-du-an .qt-item-acts { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.page-du-an .qt-add { width: 100%; border-style: dashed; margin-bottom: 12px; }
.page-du-an .qt-cond { position: relative; padding: 10px 34px 2px 12px; margin: 0 0 8px; border: 1px dashed #94a3b8; border-radius: 10px; background: #f8fafc; }
.page-du-an .qt-cond > small { display: block; margin: -4px 0 8px; color: var(--faint); font-size: 12px; }
.page-du-an .qt-cond > b { display: block; margin-bottom: 2px; }
.page-du-an .qt-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; font-size: 14px; }
.page-du-an .qt-x:hover { background: var(--bad-soft); color: var(--bad-ink); }
.page-du-an .qt-line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 0 10px; align-items: end; padding-right: 32px; margin-bottom: 4px; }
.page-du-an .qt-line .qt-badge { margin-bottom: 18px; }
.page-du-an .qt-line .qt-x { top: auto; bottom: 14px; }
.page-du-an .qt-product { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; min-height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; }
.page-du-an .qt-product-name { min-width: 0; }
.page-du-an .qt-product-name b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.page-du-an .qt-product-name small { display: block; color: var(--faint); font-size: 12px; }
.page-du-an .qt-cmp { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--surface-3); font-size: 13px; }
.page-du-an .qt-cmp span { min-width: 0; overflow-wrap: anywhere; }
.page-du-an .qt-cmp b, .page-du-an .qt-list { font-variant-numeric: tabular-nums; }
.page-du-an .tone-ok, .da-modal .tone-ok { color: var(--good-ink); }
.page-du-an .tone-bad, .da-modal .tone-bad { color: var(--bad-ink); }
.page-du-an .tone-info { color: var(--primary-ink); }
.page-du-an .qt-list { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.page-du-an .qt-actions { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.page-du-an .qt-actions .form-error { flex: 1 1 100%; }
.page-du-an .qt-actions .btn { min-height: 44px; }
.page-du-an .qt-actions .btn-primary { flex: 1 1 220px; max-width: 320px; }
.page-du-an .qt-approve { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.page-du-an .qt-approve small { display: block; color: var(--faint); font-size: 12.5px; }
.page-du-an .qt-review { display: flex; gap: 8px; flex-wrap: wrap; }
.page-du-an .qt-preview { margin-top: 4px; }
.page-du-an .qt-back { font-size: 13px; font-weight: 600; text-decoration: none; }

/* ảnh */
.page-du-an .qt-photos, .da-modal .qt-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.page-du-an .qt-photo, .da-modal .qt-photo { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; background: var(--surface-3); }
.page-du-an .qt-photo img, .da-modal .qt-photo img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.page-du-an .qt-photo-del, .da-modal .qt-photo-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: rgba(15, 23, 42, 0.7); color: #fff; font-size: 11px; cursor: pointer; }
.page-du-an .qt-photo-add, .da-modal .qt-photo-add { position: relative; display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; border: 1.5px dashed #93c5fd; border-radius: 10px; color: #2563eb; font-size: 24px; cursor: pointer; background: #f8fbff; }
.page-du-an .qt-photo-add input, .da-modal .qt-photo-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.modal .qt-lightbox { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 8px; }

/* hộp chọn mã hàng, B7, B8 */
.da-modal .qt-pick-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 55vh; overflow: auto; }
.da-modal .qt-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.da-modal .qt-pick:hover { border-color: #93c5fd; background: #f8fbff; }
.da-modal .qt-pick small { color: var(--faint); font-size: 12px; }
.da-modal .qt-checks { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; }
.da-modal .qt-check { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13.5px; }
.da-modal .qt-check span { flex: 1 1 120px; font-weight: 600; }
.da-modal .qt-check label { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.da-modal .qt-owner { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 0; margin: 0 0 10px; }
.da-modal .qt-owner legend { font-size: 12.5px; font-weight: 700; color: var(--dim); padding: 0 4px; }

/* ---------------------------------------------------------------- Master plan chi tiết */
.page-du-an .mp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.page-du-an .mp-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-du-an .mp-acts .chip { text-decoration: none; }
.page-du-an .mp-acts .chip.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.page-du-an .mp-sheet { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
.page-du-an .mp-sheet svg { display: block; width: 100%; min-width: 1100px; height: auto; }
.page-du-an .mp-note { font-size: 12.5px; }
/* In / PDF: chỉ khi bấm "In / PDF" ở trang này (du-an-plan.js gắn body.mp-printing quanh lần in) — file này nạp ở mọi trang, không được
   đụng tới bản in hóa đơn / phiếu giao của các trang khác. Khổ giấy ngang đặt bằng @page có tên, chỉ áp cho .mp-sheet. */
@page mp-landscape { size: A4 landscape; margin: 8mm; }
@media print {
  body.mp-printing * { visibility: hidden !important; }
  body.mp-printing .page-du-an .mp-sheet, body.mp-printing .page-du-an .mp-sheet * { visibility: visible !important; }
  body.mp-printing .page-du-an .mp-sheet { page: mp-landscape; position: fixed; inset: 0; border: 0; box-shadow: none; padding: 0; overflow: visible; }
  body.mp-printing .page-du-an .mp-sheet svg { min-width: 0; width: 100%; }
}

/* ---------------------------------------------------------------- tab Tiến độ (ảnh 3c, p.19) */
.page-du-an .da-steps2 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.page-du-an .da-step2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 10px; border-radius: 10px; background: var(--surface-3); color: var(--ink); text-decoration: none; }
.page-du-an .da-step2 small { font-size: 11.5px; font-weight: 700; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-du-an .da-step2 b { font-size: 13px; overflow-wrap: anywhere; }
.page-du-an .da-step2.done { background: #ecfdf5; }
.page-du-an .da-step2.done small { color: #15803d; }
.page-du-an .da-step2.doing { background: #eff6ff; }
.page-du-an .da-step2.doing small { color: #1d4ed8; }
.page-du-an .da-step2.stale { background: #fffbeb; }
.page-du-an .da-step2.stale small { color: #b45309; }
.page-du-an .da-step2.locked { opacity: 0.6; }
.page-du-an .da-plan-pr { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-bottom: 6px; }
.page-du-an .da-bar { position: relative; height: 6px; border-radius: 99px; background: #e2e8f0; overflow: visible; }
.page-du-an .da-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: #2563eb; }
.page-du-an .da-bar i.bad { background: #dc2626; }
.page-du-an .da-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #0f172a; opacity: 0.55; }
.page-du-an .da-bar-big { height: 9px; margin-bottom: 14px; }
.page-du-an .da-pcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.page-du-an .da-pcol { min-width: 0; }
.page-du-an .da-pcol h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.05em; }
.page-du-an .da-c-doing { color: #1d4ed8; }
.page-du-an .da-c-next { color: #b45309; }
.page-du-an .da-c-done { color: #15803d; }
.page-du-an .da-item { padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; border-left: 4px solid var(--c); background: var(--surface-2); }
.page-du-an .da-item-top { display: flex; justify-content: space-between; gap: 8px; }
.page-du-an .da-item-top b { overflow-wrap: anywhere; }
.page-du-an .da-item-pct { color: #1d4ed8; font-weight: 700; font-variant-numeric: tabular-nums; }
.page-du-an .da-item .da-bar { margin: 6px 0; }
.page-du-an .da-item-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.page-du-an .da-mp-btn { width: 100%; margin-top: 8px; }
.page-du-an .da-warn { color: var(--warn-ink); }
.page-du-an .da-mini-pr { min-width: 90px; }
.page-du-an .da-mini-pr small { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Gantt "Tiến độ chung" (ảnh 1b, p.16) */
.page-du-an .da-g-legend { font-size: 11.5px; margin-left: auto; margin-right: 8px; }
.page-du-an .da-g-mini { display: flex; gap: 6px 14px; flex-wrap: wrap; margin: -2px 0 10px; font-size: 12.5px; font-weight: 600; }
.page-du-an .da-gantt { display: flex; flex-direction: column; overflow-x: auto; }
.page-du-an .da-g-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(200px, 1.6fr) 104px; gap: 10px; align-items: center; min-width: 470px; padding: 8px 0; border-bottom: 1px solid var(--surface-3); color: inherit; text-decoration: none; }
.page-du-an a.da-g-row:hover { background: var(--surface-2); }
.page-du-an .da-g-head { font-size: 11.5px; font-weight: 700; color: var(--faint); padding-top: 0; }
.page-du-an .da-g-name { min-width: 0; }
.page-du-an .da-g-name b { font-size: 13.5px; overflow-wrap: anywhere; }
.page-du-an .da-g-name small { display: block; color: var(--faint); font-size: 11.5px; }
.page-du-an .da-g-track { position: relative; height: 18px; }
.page-du-an .da-g-months i { position: absolute; top: 0; font-style: normal; transform: translateX(2px); white-space: nowrap; }
.page-du-an .da-g-plan { position: absolute; top: 3px; height: 12px; border: 1.5px solid #93c5fd; border-radius: 6px; background: #eff6ff; overflow: hidden; }
.page-du-an .da-g-plan i { position: absolute; inset: 0 auto 0 0; background: #059669; }
.page-du-an .da-g-plan i.bad { background: #dc2626; }
.page-du-an .da-g-none { position: absolute; top: 0; z-index: 1; padding: 0 6px 0 0; font-size: 11.5px; line-height: 18px; color: var(--faint); white-space: nowrap; background: var(--surface); }
.page-du-an .da-g-today { position: absolute; top: -6px; bottom: -6px; width: 2px; background: #dc2626; }
.page-du-an .da-g-lag { font-size: 12.5px; }

/* ---------------------------------------------------------------- Cài đặt (ảnh p.14–15, 24) */
.page-du-an .cd-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.page-du-an .cd-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; margin-top: 14px; }
.page-du-an .cd-step { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.page-du-an .cd-step > b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 8px; background: #eef2ff; color: #3730a3; font-size: 12.5px; }
.page-du-an .cd-step span { min-width: 0; }
.page-du-an .cd-step strong { display: block; font-size: 13.5px; }
.page-du-an .cd-step small { display: block; color: var(--faint); font-size: 12px; }
.page-du-an .cd-step.active { border-color: #2563eb; background: #eff6ff; }
.page-du-an .cd-table td { vertical-align: middle; }
.page-du-an .cd-small { width: 120px !important; max-width: 100%; }
.page-du-an .cd-cats, .page-du-an .cd-rates, .page-du-an .cd-params { display: flex; flex-direction: column; gap: 8px; }
.page-du-an .cd-cat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-du-an .cd-cat.off { opacity: 0.55; }
.page-du-an .cd-cat input[type='color'] { width: 34px; height: 34px; padding: 0; border: 0; background: none; }
.page-du-an .cd-cat .input:not(.cd-small) { flex: 1 1 140px; min-width: 0; }
.page-du-an .cd-hide { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.page-du-an .cd-rate { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) 90px auto; gap: 6px; align-items: center; }
.page-du-an .cd-save { position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.page-du-an .cd-save .input { flex: 1 1 260px; }

/* ---------------------------------------------------------------- Lập master plan (lp-, anh chốt 08/11): KTS nhập thẳng — bảng hạng mục
   (cuộn ngang trong khung; ≤ 700 px mỗi dòng thành 1 thẻ, ô có nhãn), điều kiện, tổng kết, master plan xem trước; menu "Master plan" (lp-li). */
.page-du-an .qt-head-links { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.page-du-an .qt-guide { margin: -4px 0 12px; font-size: 12.5px; color: #cbd5e1; }
.page-du-an .lp-head .qt-head-title { align-items: flex-start; margin-bottom: 0; }
.page-du-an .lp-sub { margin: 4px 0 0; font-size: 13px; color: #cbd5e1; }
.page-du-an .lp-head + .notice, .page-du-an .notice + .notice { margin-top: 0; }
.page-du-an .lp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow); min-width: 0; }
.page-du-an .lp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.page-du-an .lp-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; }
.page-du-an .lp-card-head .lp-h { margin: 0; }
.page-du-an .lp-h small { font-weight: 400; font-size: 13px; color: var(--faint); }
.page-du-an .lp-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 13px; background: #1d4ed8; color: #fff; font-size: 13px; font-weight: 700; flex: none; }
.page-du-an .lp-help { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.page-du-an .lp-time { display: flex; gap: 10px; flex-wrap: wrap; }
.page-du-an .lp-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); min-width: 160px; }
.page-du-an .lp-stat small { font-size: 12px; color: var(--faint); }
.page-du-an .lp-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.page-du-an .lp-stat span { font-size: 12.5px; }
.page-du-an .lp-stat-main { background: #ecfdf5; color: #065f46; }
.page-du-an .lp-stat-main small { color: #047857; }
.page-du-an .lp-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.page-du-an .lp-tbl { width: 100%; min-width: 1480px; border-collapse: collapse; font-size: 13.5px; }
.page-du-an .lp-tbl-cond { min-width: 860px; }
.page-du-an .lp-tbl th { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--dim); text-align: left; white-space: nowrap; vertical-align: bottom; }
.page-du-an .lp-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--surface-3); vertical-align: top; }
.page-du-an .lp-tbl .input { min-height: 38px; padding: 7px 9px; font-size: 13.5px; }
.page-du-an .lp-name { width: 100%; min-width: 190px; }
.page-du-an .lp-team { width: 130px; }
.page-du-an .lp-n { width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.page-du-an .lp-u { width: 64px; padding-left: 4px !important; padding-right: 2px !important; }
.page-du-an .lp-date { width: 142px; }
.page-du-an .lp-note { width: 220px; min-height: 38px; resize: vertical; }
.page-du-an .lp-unit { display: inline-flex; align-items: center; gap: 4px; }
.page-du-an .lp-unit em { font-style: normal; font-size: 12.5px; color: var(--faint); }
.page-du-an .lp-badge { width: 32px; height: 32px; border: 0; border-radius: 8px; color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.page-du-an .lp-badge:disabled { cursor: default; }
.page-du-an .lp-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 170px; max-width: 220px; }
.page-du-an .lp-chips .qt-chip { max-width: 100%; min-height: 30px; padding: 4px 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-du-an .lp-dur { display: block; font-size: 14px; color: #1e3a8a; white-space: nowrap; }
.page-du-an .lp-chk { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; max-width: 230px; }
.page-du-an .lp-chk.tone-muted, .page-du-an .lp-warn.tone-muted { color: var(--faint); }
.page-du-an .lp-chk.tone-warn { color: var(--warn-ink); }
.page-du-an .lp-link { display: block; margin-top: 2px; padding: 0; border: 0; background: none; color: #1d4ed8; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; min-height: 24px; }
.page-du-an .lp-days { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.page-du-an .lp-days[hidden] { display: none; }
.page-du-an .lp-acts { white-space: nowrap; }
.page-du-an .lp-ico { width: 32px; height: 32px; margin-left: 4px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.page-du-an .lp-ico:disabled { opacity: 0.4; cursor: default; }
.page-du-an .lp-ins { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.page-du-an .lp-del { color: var(--bad-ink); }
.page-du-an .lp-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; font-size: 14px; }
.page-du-an .lp-x:hover { background: var(--bad-soft); color: var(--bad-ink); }
.page-du-an .lp-add { width: 100%; min-height: 46px; margin-top: 10px; border: 1.5px dashed #1d4ed8; border-radius: 12px; background: #fff; color: #1d4ed8; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.page-du-an .lp-empty { padding: 14px 4px 4px; color: var(--faint); font-size: 13.5px; }
.page-du-an .lp-small { font-size: 12px; }
.page-du-an .lp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.page-du-an .lp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }
.page-du-an .lp-warn { margin: 0 0 6px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; background: var(--surface-2); }
.page-du-an .lp-warn.tone-bad { background: var(--bad-soft); }
.page-du-an .lp-warn.tone-warn { background: var(--warn-soft); color: var(--warn-ink); }
.page-du-an .lp-warn.tone-ok { background: var(--good-soft); }
.page-du-an .lp-preview { overflow-x: auto; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: #fff; }
.page-du-an .lp-preview svg { display: block; width: 100%; min-width: 1100px; height: auto; }
.page-du-an .lp-foot { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.page-du-an .lp-foot .form-error { flex: 1 1 100%; }
.page-du-an .lp-foot .btn { min-height: 44px; }
.page-du-an .da-plan-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.page-du-an .lp-list { display: flex; flex-direction: column; }
.page-du-an .lp-li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--surface-3); }
.page-du-an .lp-li:first-child { border-top: 0; }
.page-du-an .lp-li a { text-decoration: none; }
.page-du-an .lp-li small { display: block; margin-top: 2px; color: var(--faint); font-size: 12.5px; overflow-wrap: anywhere; }
.page-du-an .lp-li-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------------------------------------------------------------- hẹp */
@media (max-width: 1100px) {
  .page-du-an .cd-grid3 { grid-template-columns: minmax(0, 1fr); }
  .page-du-an .da-pcols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .page-du-an .qt-tiles, .page-du-an .da-steps2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-du-an .cd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .page-du-an .qt-head { margin: 0 -4px 12px; padding: 14px 12px 14px; border-radius: 14px; }
  .page-du-an .qt-head h2 { font-size: 18px; }
  .page-du-an .qt-tile { padding: 8px; }
  .page-du-an .qt-tile b { font-size: 12px; }
  .page-du-an .qt-grid2, .page-du-an .qt-grid3, .da-modal .qt-grid2 { grid-template-columns: minmax(0, 1fr); }
  .page-du-an .qt-line { grid-template-columns: minmax(0, 1fr); padding-right: 30px; }
  .page-du-an .qt-line .qt-badge { margin: -4px 0 8px; justify-self: start; }
  .page-du-an .qt-card { padding: 12px; }
  .page-du-an .qt-actions .btn { flex: 1 1 140px; max-width: none; }
  .page-du-an .cd-rate { grid-template-columns: minmax(0, 1fr) 90px auto; }
  .page-du-an .cd-rate .input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .page-du-an .da-g-legend { display: none; }
  /* Lập master plan: mỗi dòng bảng thành 1 thẻ, ô có nhãn (data-label) */
  .page-du-an .lp-card { padding: 12px; }
  .page-du-an .lp-scroll { overflow: visible; margin: 0; padding: 0; }
  .page-du-an .lp-tbl, .page-du-an .lp-tbl-cond { min-width: 0; }
  .page-du-an .lp-tbl thead { display: none; }
  .page-du-an .lp-tbl, .page-du-an .lp-tbl tbody, .page-du-an .lp-tbl tr, .page-du-an .lp-tbl td { display: block; width: 100%; box-sizing: border-box; }
  .page-du-an .lp-tbl tr { position: relative; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
  /* ô ngắn (khối lượng, định mức, đội, số thợ, 2 ngày) xếp 2 cột; tên, điều kiện, kiểm tra, ghi chú cả hàng */
  .page-du-an .lp-tbl:not(.lp-tbl-cond) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
  .page-du-an .lp-tbl:not(.lp-tbl-cond) td { min-width: 0; }
  .page-du-an .lp-tbl td[data-label='#'], .page-du-an .lp-tbl td[data-label='Hạng mục'], .page-du-an .lp-tbl td[data-label='Chờ điều kiện'],
  .page-du-an .lp-tbl td[data-label='Ngày công · kiểm tra'], .page-du-an .lp-tbl td[data-label='Ghi chú'] { grid-column: 1 / -1; }
  .page-du-an .lp-tbl .lp-n { width: 100%; }
  .page-du-an .lp-tbl .lp-unit { display: flex; }
  .page-du-an .lp-tbl .lp-unit .lp-n { flex: 1 1 auto; min-width: 0; }
  .page-du-an .lp-tbl td { padding: 4px 0; border: 0; }
  .page-du-an .lp-tbl td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
  .page-du-an .lp-tbl td[data-label='#']::before { display: none; }
  .page-du-an .lp-tbl .lp-acts { position: absolute; top: 8px; right: 8px; width: auto; padding: 0; }
  .page-du-an .lp-name, .page-du-an .lp-team, .page-du-an .lp-note, .page-du-an .lp-date { width: 100%; min-width: 0; }
  .page-du-an .lp-chips, .page-du-an .lp-chk { max-width: none; }
  .page-du-an .lp-grid2 { grid-template-columns: minmax(0, 1fr); }
  .page-du-an .lp-li { grid-template-columns: minmax(0, 1fr); }
  .page-du-an .lp-li-acts { justify-content: flex-start; }
  .page-du-an .lp-foot .btn { flex: 1 1 140px; }
}

/* ---------------------------------------------------------------- Công việc (cv-) + Báo cáo (bc-) — bổ sung 09/11 (spec 2026-11-09)
   Màu loại việc: biến --cv / --cv-soft / --cv-ink gắn trên từng thẻ (TASK_TYPES ở shared/du-an-plan.js). */
.page-du-an .cv-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.page-du-an .cv-month { display: flex; align-items: center; gap: 6px; }
.page-du-an .cv-month b { min-width: 118px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.page-du-an .cv-mode button { padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none; color: var(--dim); cursor: pointer; }
.page-du-an .cv-mode button + button { border-left: 1px solid var(--border-strong); }
.page-du-an .cv-mode button.on { background: #0d9488; color: #fff; }
.page-du-an .cv-done-tg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); white-space: nowrap; }
.page-du-an .cv-chips .cv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cv); }
.page-du-an .cv-chips button.on .cv-dot { box-shadow: 0 0 0 2px #fff; }
.page-du-an .cv-groups { display: flex; flex-direction: column; gap: 18px; }
.page-du-an .cv-group h3 { margin: 0 0 8px; font-size: 14px; color: var(--dim); }
.page-du-an .cv-group.is-bad h3 { color: var(--bad); }
.page-du-an .cv-group.is-today h3 { color: #0f766e; }
.page-du-an .cv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.page-du-an .cv-task { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 14px 12px 15px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--cv); border-radius: 12px; box-shadow: var(--shadow); }
.page-du-an .cv-task.is-done { opacity: 0.62; }
.page-du-an .cv-task-top { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.page-du-an .cv-type { padding: 2px 8px; border-radius: 999px; background: var(--cv-soft); color: var(--cv-ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.page-du-an .cv-proj { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--dim); text-decoration: none; overflow-wrap: anywhere; }
.page-du-an .cv-proj:hover { color: var(--ink); }
.page-du-an .cv-st { margin-left: auto; }
.page-du-an .cv-title { font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.page-du-an .cv-task.is-done .cv-title { text-decoration: line-through; }
.page-du-an .cv-sub { font-size: 12.5px; color: var(--faint); overflow-wrap: anywhere; }
.page-du-an .cv-meta { display: flex; justify-content: space-between; gap: 2px 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }
.page-du-an .cv-meta b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.page-du-an .cv-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.page-du-an .cv-bar i { display: block; height: 100%; background: var(--cv); border-radius: inherit; }
.page-du-an .cv-notice { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.page-du-an .cv-notice.is-sent { color: #0f766e; }
.page-du-an .cv-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.page-du-an .cv-empty { padding: 26px 18px; text-align: center; color: var(--faint); }
.page-du-an .cv-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.page-du-an .cv-cal { padding: 10px; }
.page-du-an .cv-earlier { display: block; width: 100%; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #fecaca; border-radius: 9px; background: #fef2f2; color: var(--bad); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.page-du-an .cv-wd, .page-du-an .cv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.page-du-an .cv-wd span { padding: 4px 2px; font-size: 11.5px; font-weight: 700; color: var(--faint); text-align: center; }
.page-du-an .cv-day { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 96px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.page-du-an .cv-day:hover { border-color: #5eead4; }
.page-du-an .cv-day.is-out { background: var(--surface-3); color: var(--faint); }
.page-du-an .cv-day.is-today { border-color: #0d9488; box-shadow: inset 0 0 0 1px #0d9488; }
.page-du-an .cv-day.is-sel { background: #f0fdfa; }
.page-du-an .cv-day.is-late .cv-dnum { color: var(--bad); }
.page-du-an .cv-dnum { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.page-du-an .cv-pills { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.page-du-an .cv-pill { display: block; padding: 1px 5px; border-radius: 5px; background: var(--cv-soft); color: var(--cv-ink); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-du-an .cv-pill.is-done { opacity: 0.55; text-decoration: line-through; }
.page-du-an .cv-more { font-size: 11px; font-weight: 600; color: var(--faint); }
.page-du-an .cv-dots { display: none; gap: 3px; flex-wrap: wrap; justify-content: center; }
.page-du-an .cv-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cv); }
.page-du-an .cv-dayp { position: sticky; top: 12px; padding: 12px; }
.page-du-an .cv-dayp h3 { margin: 0 0 10px; font-size: 15px; }
.page-du-an .cv-dayp .cv-cards { grid-template-columns: minmax(0, 1fr); }
.da-modal .cv-people { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 2px 0 8px; }
.da-modal .cv-person { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.da-modal .cv-person small { color: var(--faint); }
.da-modal .cv-del { margin-right: auto; color: var(--bad); }

.page-du-an .bc-tabs { display: none; }
.page-du-an .bc-filters .btn { white-space: nowrap; }
.page-du-an .bc-sale td, .page-du-an .bc-kts td, .page-du-an .bc-proj td { vertical-align: top; }
.page-du-an .bc-sale .num, .page-du-an .bc-kts .num, .page-du-an .bc-proj .num { text-align: right; }
.page-du-an .bc-proj tbody tr { cursor: pointer; }
.page-du-an .bc-proj tbody tr:hover { background: #f0fdfa; }
.page-du-an .bc-pcell { min-width: 180px; }
.page-du-an .bc-pcell b, .page-du-an .bc-pcell small { display: block; overflow-wrap: anywhere; }
.page-du-an .bc-prog { min-width: 110px; }
.page-du-an .bc-pbar { position: relative; display: block; height: 6px; margin-top: 4px; border-radius: 99px; background: var(--surface-3); }
.page-du-an .bc-pbar i { display: block; height: 100%; border-radius: inherit; background: #0d9488; }
.page-du-an .bc-pbar em { position: absolute; top: -3px; width: 2px; height: 12px; background: #334155; transform: translateX(-1px); }
.page-du-an .bc-od { display: block; font-size: 11.5px; color: var(--bad); }
.page-du-an .bc-notes { max-width: 460px; font-size: 13px; overflow-wrap: anywhere; }
.page-du-an .bc-gboxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.page-du-an .bc-gbox { container-type: inline-size; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-3); }
.page-du-an .bc-gbox b { font-size: min(22px, 12cqi); font-variant-numeric: tabular-nums; }
.page-du-an .bc-gbox span { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.page-du-an .bc-gbox.is-bad { background: #fef2f2; }
.page-du-an .bc-gbox.is-bad b { color: var(--bad); }
.page-du-an .bc-gbox.is-warn { background: #fffbeb; }
.page-du-an .bc-gbox.is-warn b { color: var(--warn-ink); }
.page-du-an .bc-late { margin: 12px 0 0; padding-left: 18px; font-size: 13px; }
.page-du-an .bc-late li { margin: 4px 0; overflow-wrap: anywhere; }
.page-du-an.bc-print { display: none; }
/* In / PDF của Báo cáo: du-an-bao-cao.js dựng bản sao trong <div class="page-du-an bc-print"> ngay dưới body và gắn body.bc-printing quanh lần
   in → mọi phần khác của body ẩn, bản sao chảy tự nhiên qua nhiều trang (khổ ngang). */
@page bc-landscape { size: A4 landscape; margin: 10mm; }
@media print {
  body.bc-printing > *:not(.bc-print) { display: none !important; }
  body.bc-printing > .page-du-an.bc-print { display: block; page: bc-landscape; padding: 0; background: #fff; }
  body.bc-printing .bc-print .da-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.bc-printing .bc-print .da-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.bc-printing .bc-print .card { box-shadow: none; break-inside: auto; }
  body.bc-printing .bc-print .bc-tabs, body.bc-printing .bc-print .bc-filters { display: none !important; }
  body.bc-printing .bc-print .bc-sec { display: block !important; }
  body.bc-printing .bc-print tr { break-inside: avoid; }
}
@media (max-width: 1100px) {
  .page-du-an .cv-cal-wrap { grid-template-columns: minmax(0, 1fr); }
  .page-du-an .cv-dayp { position: static; }
}
@media (max-width: 900px) {
  .page-du-an .bc-gboxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .page-du-an .cv-bar-row { align-items: stretch; }
  .page-du-an .cv-month { justify-content: space-between; width: 100%; }
  .page-du-an .cv-filters { width: 100%; }
  .page-du-an .cv-filters select { flex: 1 1 150px; }
  .page-du-an .cv-cal { padding: 6px; }
  .page-du-an .cv-wd, .page-du-an .cv-grid { gap: 3px; }
  .page-du-an .cv-day { align-items: center; min-height: 48px; padding: 4px 2px; }
  .page-du-an .cv-pills { display: none; }
  .page-du-an .cv-dots { display: flex; }
  .page-du-an .bc-tabs { display: flex; }
  .page-du-an .bc-secs[data-tab='sale'] .bc-sec:not([data-sec='sale']),
  .page-du-an .bc-secs[data-tab='kts'] .bc-sec:not([data-sec='kts']),
  .page-du-an .bc-secs[data-tab='du-an'] .bc-sec:not([data-sec='du-an']) { display: none; }
  .page-du-an .bc-gboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-du-an .bc-filters { width: 100%; }
  .page-du-an .bc-filters select { flex: 1 1 150px; }
  .page-du-an .bc-filters .btn { flex: 1 1 120px; }
}