/* ============================================================================
   dondoc.css — trang "Việc cần đôn đốc" (tab 'dk', js/ui-dondoc.js) — 24/09/2026.
   MỌI bộ chọn nằm dưới gốc .dk-trang (bản máy tính, trong #main) hoặc .dk-mb (điện thoại, trong #mbApp).
   Dùng token theme có sẵn (--primary, --line, --ink*, --danger, --warn, --success / --m* của điện thoại) và lớp dùng
   chung (.phc-kpis/.phc-kpi, .phc-btn, .tn-chip, .cb) — không sửa css/app.css. Ba giao diện màu (navy/do/luxe)
   đè biến --dk-* bên dưới, cùng sắc với nhãn .cb-nghiemtrong của từng theme.
   ========================================================================== */
.dk-trang, .dk-mb {
  --dk-nt: #a8141d;            /* nghiêm trọng (cùng .cb) */
  --dk-vang-bg: #fff7e6; --dk-vang-bd: #efd49a; --dk-vang-ink: #6e4a12;
  --dk-xanh-bg: #e6f3ea; --dk-xanh-ink: #1c6b3a;
  --dk-do-bg: #fdecea; --dk-do-ink: #9c0d14;
}
html[data-theme="navy"] .dk-trang, html[data-theme="navy"] .dk-mb { --dk-nt: #9e2a20; }
html[data-theme="luxe"] .dk-trang, html[data-theme="luxe"] .dk-mb { --dk-nt: #922020; --dk-vang-bg: #f8efdc; --dk-vang-bd: #d9bf86; --dk-vang-ink: #6e4a12; }

/* ---------------------------------- MÁY TÍNH ---------------------------------- */
.dk-trang { container-type: inline-size; container-name: dktrang; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dk-trang .dk-dau { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; }
.dk-trang .dk-tieude { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.dk-trang .dk-phude { font-size: 12px; color: var(--ink-3); margin-top: 3px; max-width: 70ch; }
.dk-trang .dk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-trang .dk-chips .tn-chip { font-size: 12.5px; padding: 4px 12px; }

/* 5 ô số (tái dùng .phc-kpi — ở đây chỉ để đọc, không nhấn) */
.dk-trang .dk-kpis { margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dk-trang .dk-kpis .phc-kpi { cursor: default; }
.dk-trang .dk-kpis .phc-kpi:hover { box-shadow: none; transform: none; }
.dk-trang .dk-kpis .phc-kpi.od b { color: var(--dk-do-ink); }
.dk-trang .dk-kpis .phc-kpi.dk-kpi-nt { background: var(--dk-nt); border-color: var(--dk-nt); }
.dk-trang .dk-kpis .phc-kpi.dk-kpi-nt b, .dk-trang .dk-kpis .phc-kpi.dk-kpi-nt span { color: #fff; }
.dk-trang .dk-ghi-hansai { font-size: 12.5px; color: var(--dk-vang-ink); }

/* Nhắc hàng loạt + khung xác nhận trong trang */
.dk-trang .dk-hangloat, .dk-mb .dk-hangloat { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  background: var(--dk-vang-bg); border: 1px solid var(--dk-vang-bd); border-radius: 10px; padding: 9px 14px; font-size: 13px; color: var(--dk-vang-ink); }
.dk-trang .dk-hangloat > span { flex: 1 1 320px; min-width: 0; }
.dk-trang .dk-xacnhan, .dk-mb .dk-xacnhan { border: 1px solid var(--primary); border-radius: 10px; background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.dk-trang .dk-xn-dau, .dk-mb .dk-xn-dau { font-weight: 800; font-size: 14px; color: var(--ink); }
.dk-trang .dk-xn-ds, .dk-mb .dk-xn-ds { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; font-size: 12.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }
.dk-trang .dk-xn-ds b, .dk-mb .dk-xn-ds b { color: var(--primary); }
.dk-trang .dk-xn-ghi, .dk-mb .dk-xn-ghi { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.dk-trang .dk-xn-cc, .dk-mb .dk-xn-cc { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.dk-trang .dk-xn-cc input, .dk-mb .dk-xn-cc input { padding: 0; }
.dk-trang .dk-xn-nut, .dk-mb .dk-xn-nut { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dk-trang .dk-kq, .dk-mb .dk-kq { font-size: 12.5px; border-radius: 8px; padding: 7px 10px; }
.dk-trang .dk-kq-ok, .dk-mb .dk-kq-ok { background: var(--dk-xanh-bg); color: var(--dk-xanh-ink); }
.dk-trang .dk-kq-loi, .dk-mb .dk-kq-loi { background: var(--dk-do-bg); color: var(--dk-do-ink); font-weight: 600; }
.dk-trang .dk-kq-dang, .dk-mb .dk-kq-dang { background: var(--primary-soft); color: var(--ink-2); }
.dk-trang .dk-kq-canhBao, .dk-mb .dk-kq-canhBao { background: var(--dk-vang-bg); color: var(--dk-vang-ink); }

/* Danh sách cuộn riêng, các thẻ tổng hợp nằm dưới. */
.dk-trang .dk-than { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.dk-trang .dk-chinh { display: flex; flex-direction: column; min-width: 0; max-height: clamp(440px, 68vh, 720px); overflow-y: scroll;
  overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: var(--ink-3) var(--primary-soft);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.dk-trang .dk-chinh::-webkit-scrollbar { width: 12px; }
.dk-trang .dk-chinh::-webkit-scrollbar-track { background: var(--primary-soft); }
.dk-trang .dk-chinh::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--primary-soft); border-radius: 99px; }
.dk-trang .dk-chinh .dk-khoi { flex-shrink: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.dk-trang .dk-chinh .dk-khoi:last-child { border-bottom: 0; }
.dk-trang .dk-khoi { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dk-trang .dk-khoi-dau { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 14px;
  background: var(--primary-soft); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.dk-trang .dk-khoi-dau b { font-size: 14.5px; color: var(--ink); }
.dk-trang .dk-vai, .dk-mb .dk-vai { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 0 8px; margin-left: 4px; vertical-align: 1px; }
.dk-trang .dk-da-dau { padding: 7px 14px; font-size: 12px; font-weight: 700; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--bg); }
.dk-trang .dk-da-hansai { color: var(--dk-vang-ink); }
.dk-trang .dk-rong, .dk-mb .dk-rong { padding: 12px 14px; font-size: 13px; color: var(--ink-3); }
.dk-trang .dk-them, .dk-mb .dk-them { display: block; width: 100%; text-align: left; border: none; border-top: 1px solid var(--line); border-radius: 0; background: transparent;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--primary); cursor: pointer; }
.dk-trang .dk-them:hover { background: var(--primary-soft); }

/* Một dòng việc: ô chọn · việc · tình trạng báo cáo · cần làm + nút */
.dk-trang .dk-dong { display: grid; grid-template-columns: 18px minmax(0, 1fr) 150px minmax(170px, 210px); gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); border-left: 3px solid transparent; align-items: start; font-size: 13px; }
.dk-trang .dk-dong:last-child { border-bottom: none; }
.dk-trang .dk-dong-nt { border-left-color: var(--dk-nt); }
.dk-trang .dk-dong-chon { padding-top: 2px; }
.dk-trang .dk-chon, .dk-mb .dk-chon { width: 15px; height: 15px; padding: 0; margin: 0; accent-color: var(--primary); cursor: pointer; }
.dk-trang .dk-o-trong, .dk-mb .dk-o-trong { display: inline-block; width: 15px; height: 15px; }
.dk-trang .dk-dong-chinh { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dk-trang .dk-dong-l1 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.dk-trang .dk-ma, .dk-mb .dk-ma { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.dk-trang .dk-ten { color: var(--ink); font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.dk-trang .dk-ten:hover { color: var(--primary); text-decoration: underline; }
.dk-trang .dk-dong-l2 { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.dk-trang .dk-dong-l2 b { color: var(--ink-2); font-weight: 600; }
.dk-trang .dk-dong-tt { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-2); }
.dk-trang .dk-dong-lam { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 12px; color: var(--ink-3); min-width: 0; }
.dk-trang .dk-lam { color: var(--ink); font-weight: 700; font-size: 12.5px; line-height: 1.35; }
.dk-trang .dk-lam-ghi { overflow-wrap: anywhere; }
.dk-trang .dk-nut { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dk-trang .dk-nut .phc-btn { padding: 4px 10px; font-size: 12px; }
/* 24/09 (phản biện): Duyệt dời hạn hai bước — câu hỏi lại nằm trên một dòng riêng, trên hai nút Xác nhận duyệt / Quay lại */
.dk-trang .dk-nut .dk-hoi { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--ink); }

/* Thẻ tổng hợp */
.dk-trang .dk-phu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; align-items: start; }
.dk-trang .dk-the-phu { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.dk-trang .dk-phu-h { font-size: 13px; font-weight: 800; color: var(--ink); }
.dk-trang .dk-bang-da { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.dk-trang .dk-bang-da td { padding: 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.dk-trang .dk-bang-da tr:last-child td { border-bottom: none; }
.dk-trang .dk-bang-da td.dk-so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.dk-trang .dk-bang-da td.dk-so-do { color: var(--dk-do-ink); font-weight: 700; }
.dk-trang .dk-chu-nhat, .dk-mb .dk-chu-nhat { font-size: 12px; color: var(--ink-3); }
.dk-trang .dk-phu-dong { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: transparent; border: none;
  border-bottom: 1px solid var(--line); border-radius: 0; padding: 5px 0; font-size: 12.5px; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.dk-trang .dk-phu-dong:last-of-type { border-bottom: none; }
.dk-trang .dk-phu-dong:hover { color: var(--primary); }
.dk-trang .dk-phu-dong b { color: var(--primary); }
.dk-trang .dk-phu-dong span:last-child { text-align: right; color: var(--ink-3); }

/* UI-DD-01: bố cục desktop gọn trong vùng nội dung thực của trang. */
.dk-trang .dk-dau { align-items: center; }
.dk-trang .dk-dau-chinh { min-width: 0; flex: 1 1 300px; }
.dk-trang .dk-dau-tieu { display: flex; align-items: center; gap: 8px; }
.dk-trang .dk-tieude { margin: 0; font-size: 21px; }
.dk-trang .dk-giai-thich { position: relative; flex: none; }
.dk-trang .dk-giai-thich summary { list-style: none; display: inline-grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary); font-size: 12px; font-weight: 800; cursor: pointer; }
.dk-trang .dk-giai-thich summary::-webkit-details-marker { display: none; }
.dk-trang .dk-giai-thich summary:focus-visible, .dk-trang .dk-phamvi select:focus-visible,
.dk-trang .dk-ten:focus-visible, .dk-trang .dk-nut .phc-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dk-trang .dk-giai-thich-noi { position: absolute; z-index: 12; top: 29px; left: 0; width: min(330px, 75vw); padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.13); color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.dk-trang .dk-phamvi { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
.dk-trang .dk-phamvi select { width: min(280px, 100%); min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; }
.dk-trang .dk-kpis { gap: 8px; }
.dk-trang .dk-kpis .phc-kpi { min-width: 0; min-height: 74px; padding: 9px 10px; border-radius: 10px; }
.dk-trang .dk-kpis .phc-kpi b { font-size: 24px; font-variant-numeric: tabular-nums; }
.dk-trang .dk-kpis .phc-kpi span { display: block; line-height: 1.3; }
.dk-trang .dk-kpis .phc-kpi.dk-kpi-nt { border-left-color: var(--dk-nt); }
.dk-trang .dk-hangloat { padding: 8px 12px; background: #fff; border-color: var(--line); color: var(--ink-2); }
.dk-trang .dk-hangloat > span { line-height: 1.4; }
.dk-trang .dk-hangloat .phc-btn { flex: none; }
.dk-trang .dk-xacnhan { box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.dk-trang .dk-khoi, .dk-trang .dk-the-phu { box-shadow: 0 2px 12px rgba(0,0,0,.035); }
.dk-trang .dk-da-dau { color: var(--ink-2); }
.dk-trang .dk-dong { grid-template-columns: 18px minmax(0, 1.35fr) minmax(128px, .72fr) minmax(150px, .8fr); gap: 8px; min-height: 90px; padding: 10px 12px; }
.dk-trang .dk-dong:has(.dk-chon:checked) { background: color-mix(in srgb, var(--primary-soft) 45%, #fff); }
.dk-trang .dk-dong-da { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.dk-trang .dk-dong-tt { line-height: 1.4; }
.dk-trang .dk-tiendo { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.dk-trang .dk-tiendo-nen { display: block; width: 75px; max-width: 55%; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.dk-trang .dk-tiendo-nen i { display: block; height: 100%; border-radius: 99px; background: var(--dk-bar); }
.dk-trang .dk-tiendo-thap { --dk-bar: var(--danger); }
.dk-trang .dk-tiendo-vua { --dk-bar: var(--dk-vang-ink); }
.dk-trang .dk-tiendo-cao { --dk-bar: var(--success); }
.dk-trang .dk-dong-lam { gap: 5px; }
.dk-trang .dk-nut { margin-top: 0; }
.dk-trang .dk-bang-da th { position: static; padding: 4px 0 6px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 11px; text-align: left; vertical-align: bottom; }
.dk-trang .dk-bang-da th.dk-so { text-align: right; padding-left: 7px; }

/* Hẹp (vỏ 3 cột ở 1024–1280, cửa sổ nhỏ): thẻ tổng hợp tự xuống hàng; dòng việc thành 2 tầng */
.dk-trang .dk-khoi-rong .dk-khoi-dau { border-bottom: none; background: #fff; padding: 8px 14px; }
.dk-trang .dk-khoi-rong .dk-khoi-dau b { font-size: 13.5px; }
@container dktrang (max-width: 1000px) {
  .dk-trang .dk-phu { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
}
@container dktrang (max-width: 720px) {
  .dk-trang .dk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container dktrang (max-width: 640px) {
  .dk-trang .dk-dong { grid-template-columns: 18px minmax(0, 1fr); }
  .dk-trang .dk-dong-tt, .dk-trang .dk-dong-lam { grid-column: 2; }
}
@container dktrang (max-width: 520px) {
  .dk-trang .dk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* UI-DD-04: cùng nhịp thẻ và bộ lọc cho hai phạm vi desktop. */
.dk-trang .dk-loc { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.dk-trang .dk-loc-nut { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); padding: 7px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.dk-trang .dk-loc-nut span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.dk-trang .dk-loc-nut.on { border-color: var(--primary); background: var(--primary); color: #fff; }
.dk-trang .dk-loc-o { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.dk-trang .dk-loc-o label { display: flex; flex-direction: column; gap: 4px; min-width: min(180px, 100%); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.dk-trang .dk-loc-o select, .dk-trang .dk-loc-o input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 37px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); padding: 7px 9px; font: inherit; font-weight: 500; }
.dk-trang .dk-loc-o .dk-loc-tim { flex: 1 1 210px; }
.dk-trang .dk-loc-nut:focus-visible, .dk-trang .dk-loc-o select:focus-visible, .dk-trang .dk-loc-o input:focus-visible,
.dk-trang .dd04-item-title:focus-visible, .dk-trang .dd04-item-detail summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dk-trang.dd04-tre .dk-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-trang .dd04-list { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dk-trang .dd04-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .3fr) minmax(85px, .16fr); gap: 10px 16px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; min-width: 0; }
.dk-trang .dd04-item:last-child { border-bottom: 0; }
.dk-trang .dd04-item-qua { border-left-color: var(--danger); }
.dk-trang .dd04-item-main { min-width: 0; }
.dk-trang .dd04-item-meta { display: flex; flex-wrap: wrap; gap: 5px 9px; align-items: center; margin-bottom: 5px; color: var(--ink-3); font-size: 11px; font-weight: 700; }
.dk-trang .dd04-project, .dk-trang .dd04-level { border-radius: 5px; padding: 3px 6px; background: var(--primary-soft); color: var(--primary); }
.dk-trang .dd04-level { background: var(--bg); color: var(--ink-2); }
.dk-trang .dd04-item-title { display: inline-block; color: var(--ink); font-size: 14px; font-weight: 750; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.dk-trang .dd04-item-title:hover { color: var(--primary); text-decoration: underline; }
.dk-trang .dd04-item-sub { margin-top: 5px; color: var(--ink-2); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.dk-trang .dd04-item-due, .dk-trang .dd04-item-progress { color: var(--ink); font-size: 12px; line-height: 1.5; }
.dk-trang .dd04-item-due b, .dk-trang .dd04-item-progress b { display: block; color: var(--ink-3); font-size: 11px; }
.dk-trang .dd04-item-due small { display: block; margin-top: 4px; }
.dk-trang .dd04-item-detail { grid-column: 1 / -1; padding-top: 3px; color: var(--ink-2); font-size: 12px; }
.dk-trang .dd04-item-detail summary { width: fit-content; color: var(--primary); font-weight: 700; cursor: pointer; }
.dk-trang .dd04-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow-wrap: anywhere; }
.dk-trang .dd04-detail-grid b { display: block; margin-bottom: 3px; color: var(--ink-3); font-size: 11px; }
/* QA-01: chữ phụ trên nền sáng cần cùng thang tương phản với nội dung thân. */
.dk-trang.dd04-tre .dk-phude, .dk-trang.dd04-tre .dk-kpis .phc-kpi span,
.dk-trang.dd04-tre .dd04-item-meta, .dk-trang.dd04-tre .dd04-item-due b,
.dk-trang.dd04-tre .dd04-item-progress b, .dk-trang.dd04-tre .dd04-detail-grid b { color: var(--ink-2); }
@container dktrang (max-width: 650px) {
  .dk-trang .dd04-item { grid-template-columns: minmax(0, 1fr) minmax(110px, .35fr); }
  .dk-trang .dd04-item-progress { grid-column: 2; }
  .dk-trang .dd04-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container dktrang (max-width: 460px) {
  .dk-trang.dd04-tre .dk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-trang .dd04-item { grid-template-columns: minmax(0, 1fr); }
  .dk-trang .dd04-item-progress, .dk-trang .dd04-item-detail { grid-column: 1; }
  .dk-trang .dd04-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------- ĐIỆN THOẠI (#mbApp) ---------------------------------- */
#mbApp .dk-mb { --primary: var(--mbrand); --primary-soft: var(--msurf2); --line: var(--mbd); --ink: var(--mink); --ink-2: var(--mink); --ink-3: var(--msub);
  display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
#mbApp .dk-mb .dk-mb-ngay { font-size: 12.5px; color: var(--msub); }
#mbApp .dk-mb .dk-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#mbApp .dk-mb .dk-chips::-webkit-scrollbar { display: none; }
#mbApp .dk-mb .dk-chips .tn-chip { flex: 0 0 auto; background: var(--msurf); color: var(--mink); border-color: var(--mbd); font-size: 12.5px; padding: 6px 12px; }
#mbApp .dk-mb .dk-chips .tn-chip.on { background: var(--mbrand); border-color: var(--mbrand); color: #fff; }
#mbApp .dk-mb .dk-mb-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#mbApp .dk-mb .dk-mb-kpi { background: var(--msurf); border: 1px solid var(--mbd); border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--msub); min-width: 0; }
#mbApp .dk-mb .dk-mb-kpi b { font-size: 21px; color: var(--mink); font-variant-numeric: tabular-nums; line-height: 1.15; }
#mbApp .dk-mb .dk-mb-kpi.dk-do b { color: var(--mred); }
#mbApp .dk-mb .dk-mb-kpi.dk-vang b { color: var(--mwarn); }
#mbApp .dk-mb .dk-mb-kpi.dk-nt { background: var(--dk-nt); border-color: var(--dk-nt); color: #fde2e2; }
#mbApp .dk-mb .dk-mb-kpi.dk-nt b { color: #fff; }
#mbApp .dk-mb .dk-hangloat { flex-direction: column; align-items: stretch; }
#mbApp .dk-mb .dk-hangloat .phc-btn { width: 100%; padding: 10px; font-size: 13.5px; }
#mbApp .dk-mb .dk-xacnhan { background: var(--msurf); border-color: var(--mbrand); }
#mbApp .dk-mb .dk-xn-nut .phc-btn { flex: 1 1 0; padding: 10px; font-size: 13.5px; }
#mbApp .dk-mb .dk-mb-khoi { margin-top: 6px; }
#mbApp .dk-mb .dk-mb-khoi-ten { font-size: 15px; font-weight: 800; color: var(--mink); }
#mbApp .dk-mb .dk-mb-khoi-sub { font-size: 12px; color: var(--msub); margin-top: 1px; }
#mbApp .dk-mb .dk-mb-da { font-size: 12px; font-weight: 700; color: var(--msub); margin: 4px 2px 0; }
#mbApp .dk-mb .dk-the { background: var(--msurf); border: 1px solid var(--mbd); border-left: 4px solid var(--mbd); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#mbApp .dk-mb .dk-the-tre { border-left-color: var(--mred); }
#mbApp .dk-mb .dk-the-nt { border-left: 6px solid var(--dk-nt); }
#mbApp .dk-mb .dk-the-dau { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#mbApp .dk-mb .dk-the-ten { font-size: 14.5px; font-weight: 700; color: var(--mink); line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; }
#mbApp .dk-mb .dk-the-meta { font-size: 12px; color: var(--msub); overflow-wrap: anywhere; }
#mbApp .dk-mb .dk-the-lam { font-size: 12.5px; color: var(--msub); overflow-wrap: anywhere; }
#mbApp .dk-mb .dk-the-lam b { color: var(--mink); }
#mbApp .dk-mb .dk-the-nut { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
#mbApp .dk-mb .dk-the-nut .phc-btn { flex: 1 1 auto; padding: 9px 12px; font-size: 13px; border-radius: 10px; background: var(--msurf2); color: var(--mink); border-color: var(--mbd); }
#mbApp .dk-mb .dk-the-nut .phc-btn-pri { background: var(--mbrand); border-color: var(--mbrand); color: #fff; }
#mbApp .dk-mb .dk-the-nut .phc-btn-grn { background: var(--mok); border-color: var(--mok); color: #fff; }
#mbApp .dk-mb .dk-the-nut .dk-hoi { flex-basis: 100%; font-size: 13px; font-weight: 700; color: var(--mink); }
#mbApp .dk-mb .dk-mb-sap { display: block; width: 100%; text-align: left; background: var(--msurf); border: 1px solid var(--mbd); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 400; color: var(--mink); }
#mbApp .dk-mb .dk-mb-sap b { color: var(--mbrand); }
#mbApp .dk-mb .dk-rong { background: var(--msurf); border: 1px solid var(--mbd); border-radius: 10px; }
#mbApp .dk-mb .dk-them { border: 1px solid var(--mbd); border-radius: 10px; background: var(--msurf); text-align: center; color: var(--mbrand); }
#mbApp .dk-mb .dk-mb-phieu { margin-top: 6px; }

/* ---------------------------------------------------------------------------------------------------------------
   G1-kh (ai-chung-5, 20/10/2026) — "Nhận định AI tuần này" từng khối + "Brief giao ban tuần" Ban TGĐ (js/ui-dondoc.js dkAi…).
   Bám mockup TGĐ duyệt 19/10 (20261020_App_Mockup-ai-chung-G1kh.html). Mọi lớp tiền tố dkai-. Màu qua biến --dkai-* khai
   theo gốc: .dk-trang (máy tính, token --ink / --primary / --dk-*) và #mbApp .dk-mb (điện thoại, bảng --m*; navy = nền tối).
   Chữ phụ dùng --ink-2 (--ink-3 #6b7a88 trên nền nhạt dưới 4,5:1). Nút điện thoại cao tối thiểu 44 px.
   --------------------------------------------------------------------------------------------------------------- */
.dk-trang {
  --dkai-bg: #F6F8FB; --dkai-bd: #cfd9e4; --dkai-the: #fff; --dkai-ink: var(--ink); --dkai-ink2: var(--ink-2); --dkai-line: var(--line);
  --dkai-pri: var(--primary); --dkai-pri-ink: #fff; --dkai-soft: var(--primary-soft);
  --dkai-vang-bg: var(--dk-vang-bg); --dkai-vang-bd: var(--dk-vang-bd); --dkai-vang-ink: var(--dk-vang-ink);
  --dkai-do-bg: var(--dk-do-bg); --dkai-do-bd: #f1b5b5; --dkai-do-ink: var(--dk-do-ink);
  --dkai-xanh-bg: var(--dk-xanh-bg); --dkai-xanh-bd: #a9d3b6; --dkai-xanh-ink: var(--dk-xanh-ink);
  --dkai-xam-bg: var(--bg); --dkai-bong: 0 2px 4px rgba(34,60,80,.06); --dkai-nut-h: 32px;
}
html[data-theme="luxe"] .dk-trang { --dkai-bg: #F7F6F0; --dkai-bd: #ddd6c4; }
#mbApp .dk-mb {
  --dkai-bg: var(--msurf2); --dkai-bd: var(--mbd); --dkai-the: var(--msurf); --dkai-ink: var(--mink); --dkai-ink2: var(--msub); --dkai-line: var(--mbd);
  --dkai-pri: var(--mbrand); --dkai-pri-ink: #fff; --dkai-soft: var(--msurf2);
  --dkai-vang-bg: var(--dk-vang-bg); --dkai-vang-bd: var(--dk-vang-bd); --dkai-vang-ink: var(--dk-vang-ink);
  --dkai-do-bg: var(--dk-do-bg); --dkai-do-bd: #f1b5b5; --dkai-do-ink: var(--dk-do-ink);
  --dkai-xanh-bg: var(--dk-xanh-bg); --dkai-xanh-bd: #a9d3b6; --dkai-xanh-ink: var(--dk-xanh-ink);
  --dkai-xam-bg: var(--msurf); --dkai-bong: none; --dkai-nut-h: 44px;
}
/* navy điện thoại = nền tối: nhãn màu theo --mtag-* (chữ sáng); nút nền xanh sáng #4f9cff cần chữ tối mới đủ 4,5:1 */
html[data-theme="navy"] #mbApp .dk-mb { --dkai-pri-ink: #0b1322;
  --dkai-vang-bg: var(--mtag-amber); --dkai-vang-bd: var(--mtag-amber); --dkai-vang-ink: var(--mtag-amber-t);
  --dkai-do-bg: var(--mtag-red); --dkai-do-bd: var(--mtag-red); --dkai-do-ink: var(--mtag-red-t);
  --dkai-xanh-bg: var(--mtag-green); --dkai-xanh-bd: var(--mtag-green); --dkai-xanh-ink: var(--mtag-green-t); }

/* nút ở đầu khối + dòng khối bảo mật */
.dk-trang .dkai-dau { margin-left: auto; display: inline-flex; }
.dk-mb .dkai-dau { display: flex; margin: 6px 0 2px; }
.dk-trang .dkai-nut, .dk-mb .dkai-nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--dkai-nut-h); padding: 4px 12px;
  border: 1px solid var(--dkai-pri); border-radius: 8px; background: var(--dkai-the); color: var(--dkai-pri); font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1.2; }
.dk-mb .dkai-nut { width: 100%; font-size: 14px; border-radius: 10px; }
.dk-trang .dkai-nut:hover, .dk-mb .dkai-nut:hover { background: var(--dkai-soft); }
.dk-trang .dkai-nut[aria-expanded="true"], .dk-mb .dkai-nut[aria-expanded="true"] { background: var(--dkai-pri); color: var(--dkai-pri-ink); }
.dkai-ic { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--dkai-pri); color: var(--dkai-pri-ink); font-size: 10.5px; font-weight: 800; font-style: normal; }
.dkai-nut[aria-expanded="true"] .dkai-ic { background: var(--dkai-pri-ink); color: var(--dkai-pri); }
/* E1 (E2E ca 1, 20/10): đầu khối web có phần AI ⇒ [tên khối · số liệu][Nhận định AI][Xem trong Cảnh báo hạn] MỘT hàng, hai nút liền nhau
   bên phải như mockup; tên khối co trong cột của nó (xuống dòng nếu dài) thay vì đẩy "Xem trong Cảnh báo hạn" xuống hàng 2 bên trái.
   Khổ ≤ 640 px: tên khối một hàng riêng, hai nút liền nhau bên phải ở hàng dưới (≤ 520 px nút AI vẫn rộng hết hàng như luật hẹp).
   Chỉ áp khi đầu khối có .dkai-dau (chỉ đọc lớp cũ .dk-khoi-dau, không lớp mới ngoài dkai-); khối không có phần AI giữ bố cục cũ. */
@container dktrang not (max-width: 640px) {
  .dk-trang .dk-khoi-dau:has(> .dkai-dau) { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr); grid-auto-columns: max-content; }
}
@container dktrang (max-width: 640px) {
  .dk-trang .dk-khoi-dau:has(> .dkai-dau) > span:first-child { flex: 1 1 100%; }
}
.dk-trang .dkai-khong, .dk-mb .dkai-khong { font-size: 12.5px; color: var(--dkai-ink2); font-style: italic; }
.dk-mb .dkai-khong { color: var(--dkai-ink); }   /* nằm thẳng trên nền màn (--mbg): --msub ở theme sáng dưới 4,5:1 */

/* khung nhận định */
.dk-trang .dkai-pn, .dk-mb .dkai-pn { background: var(--dkai-bg); border-bottom: 1px solid var(--dkai-bd); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--dkai-ink2); }
.dk-mb .dkai-pn { border: 1px solid var(--dkai-bd); border-radius: 12px; padding: 12px; margin-bottom: 4px; }
.dk-trang .dkai-dau-pn, .dk-mb .dkai-dau-pn { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 14px; flex-wrap: wrap; }
.dk-trang .dkai-tieu, .dk-mb .dkai-tieu { font-weight: 800; color: var(--dkai-ink); font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dkai-tieu .dkai-ic, .dkai-br-ten .dkai-ic { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
.dk-trang .dkai-tuan, .dk-mb .dkai-tuan { font-weight: 600; color: var(--dkai-ink2); font-size: 13.5px; }
.dk-trang .dkai-tk, .dk-mb .dkai-tk { display: inline-block; font-size: 12px; font-weight: 700; color: var(--dkai-vang-ink); background: var(--dkai-vang-bg); border: 1px solid var(--dkai-vang-bd); border-radius: 999px; padding: 2px 10px; line-height: 1.4; }
.dk-trang .dkai-nd, .dk-mb .dkai-nd { font-size: 14.5px; color: var(--dkai-ink); line-height: 1.55; background: var(--dkai-the); border: 1px solid var(--dkai-line); border-radius: 12px; padding: 12px 14px; overflow-wrap: anywhere; }
.dk-trang .dkai-luoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dk-mb .dkai-luoi, .dk-mb .dkai-br-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dk-trang .dkai-nhom, .dk-mb .dkai-nhom { background: var(--dkai-the); border: 1px solid var(--dkai-line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--dkai-bong); min-width: 0; }
.dk-trang .dkai-rong2 { grid-column: 1 / -1; }
.dk-trang .dkai-nhom h4, .dk-mb .dkai-nhom h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; color: var(--dkai-ink); display: flex; align-items: center; gap: 6px; }
.dk-trang .dkai-dem, .dk-mb .dkai-dem { font-weight: 700; color: var(--dkai-ink2); }
.dkai-ky { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.dkai-ky-xong { background: var(--dkai-xanh-bg); color: var(--dkai-xanh-ink); }
.dkai-ky-tre { background: var(--dkai-do-bg); color: var(--dkai-do-ink); }
.dkai-ky-vuong { background: var(--dkai-vang-bg); color: var(--dkai-vang-ink); }
.dkai-ky-dx { background: var(--dkai-soft); color: var(--dkai-pri); }
.dk-trang .dkai-ds, .dk-mb .dkai-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dk-trang .dkai-ds li, .dk-mb .dkai-ds li { font-size: 13.5px; color: var(--dkai-ink2); overflow-wrap: anywhere; }
.dk-trang .dkai-viec, .dk-mb .dkai-viec { font-weight: 750; color: var(--dkai-ink); text-decoration: none; }
.dk-trang .dkai-viec:hover, .dk-mb .dkai-viec:hover { text-decoration: underline; }
.dk-trang .dkai-gc, .dk-mb .dkai-gc { display: block; font-size: 13px; color: var(--dkai-ink2); margin-top: 1px; }
.dk-trang .dkai-loai, .dk-mb .dkai-loai { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-right: 6px; vertical-align: 1px; }
.dkai-loai-qt { background: var(--dkai-xam-bg); color: var(--dkai-ink2); border: 1px solid var(--dkai-line); }
.dkai-loai-gc { background: var(--dkai-vang-bg); color: var(--dkai-vang-ink); border: 1px solid var(--dkai-vang-bd); }
.dk-trang .dkai-trich, .dk-mb .dkai-trich { display: block; margin: 4px 0 0; border-left: 3px solid var(--dkai-vang-bd); padding: 2px 0 2px 9px; font-size: 13px; color: var(--dkai-ink2); font-style: italic; }
.dk-trang .dkai-dx, .dk-mb .dkai-dx { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--dkai-ink2); overflow-wrap: anywhere; }
.dk-trang .dkai-dx li, .dk-mb .dkai-dx li { margin: 3px 0; }
.dk-trang .dkai-khong-co, .dk-mb .dkai-khong-co { font-size: 12.5px; color: var(--dkai-ink2); }
.dk-trang .dkai-chan, .dk-mb .dkai-chan { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--dkai-ink2); }
.dk-trang .dkai-chan-nut, .dk-mb .dkai-chan-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.dk-mb .dkai-chan-nut { width: 100%; }
.dk-mb .dkai-chan-nut .dkai-btn { flex: 1 1 auto; }
.dk-trang .dkai-btn, .dk-mb .dkai-btn { min-height: var(--dkai-nut-h); padding: 5px 12px; border: 1px solid var(--dkai-line); border-radius: 8px; background: var(--dkai-the); color: var(--dkai-ink2); font-size: 13px; font-weight: 600; cursor: pointer; }
.dk-trang .dkai-btn:hover, .dk-mb .dkai-btn:hover { border-color: var(--dkai-pri); background: var(--dkai-soft); }
.dk-trang .dkai-btn.dkai-pri, .dk-mb .dkai-btn.dkai-pri { background: var(--dkai-pri); border-color: var(--dkai-pri); color: var(--dkai-pri-ink); }
.dk-trang .dkai-btn[disabled], .dk-mb .dkai-btn[disabled] { cursor: progress; opacity: .75; }
.dk-trang .dkai-dang-tai, .dk-mb .dkai-dang-tai { font-size: 13.5px; color: var(--dkai-ink2); padding: 4px 0; }
.dk-trang .dkai-hop, .dk-mb .dkai-hop { border-radius: 10px; padding: 9px 12px; font-size: 13.5px; line-height: 1.5; }
.dkai-hop b { font-weight: 800; }
.dkai-hop-xanh { background: var(--dkai-xanh-bg); border: 1px solid var(--dkai-xanh-bd); color: var(--dkai-xanh-ink); }
.dkai-hop-do { background: var(--dkai-do-bg); border: 1px solid var(--dkai-do-bd); color: var(--dkai-do-ink); }
.dkai-hop-xam { background: var(--dkai-the); border: 1px dashed var(--dkai-line); color: var(--dkai-ink2); }
.dkai-hop-do .dkai-btn { margin-left: 6px; }
.dk-trang .dkai-loi, .dk-mb .dkai-loi { font-size: 13px; font-weight: 600; color: var(--dkai-do-ink); background: var(--dkai-do-bg); border-radius: 8px; padding: 6px 10px; }

/* ô "Báo AI sai" */
.dk-trang .dkai-bao, .dk-mb .dkai-bao { background: var(--dkai-the); border: 1px solid var(--dkai-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.dk-trang .dkai-bao label, .dk-mb .dkai-bao label { font-size: 13px; font-weight: 700; color: var(--dkai-ink); }
.dk-trang .dkai-bao textarea, .dk-mb .dkai-bao textarea { width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box; border: 1px solid var(--dkai-line); border-radius: 6px; padding: 6px 8px;
  background: var(--dkai-the); color: var(--dkai-ink); font: inherit; font-size: 14px; }
.dk-mb .dkai-bao textarea { font-size: 16px; }   /* iOS không tự phóng to */
.dk-trang .dkai-bao-nut, .dk-mb .dkai-bao-nut { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.dk-trang .dkai-dem-chu, .dk-mb .dkai-dem-chu { margin-right: auto; font-size: 12px; color: var(--dkai-ink2); }
.dk-mb .dkai-bao-nut .dkai-btn { flex: 1 1 auto; }

/* brief giao ban (đầu trang) */
.dk-trang .dkai-br, .dk-mb .dkai-br { background: var(--dkai-the); border: 1px solid var(--dkai-line); border-radius: 14px; box-shadow: var(--dkai-bong); overflow: hidden; min-width: 0; }
.dk-trang .dkai-br > summary, .dk-mb .dkai-br > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--dkai-bg); min-height: var(--dkai-nut-h); }
.dkai-br > summary::-webkit-details-marker { display: none; }
.dk-trang .dkai-br-ten, .dk-mb .dkai-br-ten { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 800; color: var(--dkai-ink); font-size: 15px; }
.dk-trang .dkai-br-pv, .dk-mb .dkai-br-pv { font-size: 12.5px; color: var(--dkai-ink2); font-weight: 600; }
.dkai-mo { font-size: 13px; font-weight: 700; color: var(--dkai-pri); }
.dkai-mo .dkai-mo-dong, .dkai-br[open] .dkai-mo .dkai-mo-mo { display: none; }
.dkai-br[open] .dkai-mo .dkai-mo-dong { display: inline; }
.dk-trang .dkai-br-than, .dk-mb .dkai-br-than { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--dkai-bd); color: var(--dkai-ink2); }
.dk-mb .dkai-br-than { padding: 12px; }
.dk-trang .dkai-br-luoi { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dk-trang .dkai-br-khoi b, .dk-mb .dkai-br-khoi b { color: var(--dkai-ink); }

/* focus bàn phím */
.dk-trang .dkai-nut:focus-visible, .dk-trang .dkai-btn:focus-visible, .dk-trang .dkai-viec:focus-visible, .dk-trang .dkai-bao textarea:focus-visible, .dk-trang .dkai-br > summary:focus-visible,
.dk-mb .dkai-nut:focus-visible, .dk-mb .dkai-btn:focus-visible, .dk-mb .dkai-viec:focus-visible, .dk-mb .dkai-bao textarea:focus-visible, .dk-mb .dkai-br > summary:focus-visible { outline: 2px solid var(--dkai-pri); outline-offset: 2px; }
.dk-trang .dkai-nut[aria-expanded="true"]:focus-visible, .dk-mb .dkai-nut[aria-expanded="true"]:focus-visible { outline-offset: 3px; }

/* khổ hẹp (cùng mốc container dktrang của trang) */
@container dktrang (max-width: 720px) {
  .dk-trang .dkai-luoi, .dk-trang .dkai-br-luoi { grid-template-columns: minmax(0, 1fr); }
}
@container dktrang (max-width: 520px) {
  .dk-trang .dkai-nut, .dk-trang .dkai-btn, .dk-trang .dkai-br > summary { min-height: 44px; }   /* container không tự đổi biến của chính nó */
  .dk-trang .dkai-dau { width: 100%; }
  .dk-trang .dkai-nut { width: 100%; }
  .dk-trang .dkai-pn, .dk-trang .dkai-br-than { padding: 12px; }
  .dk-trang .dkai-chan-nut { width: 100%; }
  .dk-trang .dkai-chan-nut .dkai-btn, .dk-trang .dkai-bao-nut .dkai-btn { flex: 1 1 auto; }
}