/* TRIỂN KHAI HỢP ĐỒNG (gói TK-1a) — danh sách "Đang triển khai", màn kế hoạch, hộp thoại mốc.
   Dùng biến giao diện v4 (--primary, --line, --danger, --warn, --success, --ink-2, --ink-3, --fs-sm, --primary-soft).
   Nạp sau app.css. Điện thoại (tối đa 640px): bảng chuyển thành thẻ, mỗi ô hiện nhãn cột qua data-nhan. */
.tk-phu { color: var(--ink-3, #6b7280); font-size: var(--fs-sm, 13px); }
.tk-do { color: var(--danger, #dc2626); font-weight: 600; }
.tk-xanh { color: var(--success, #16a34a); font-weight: 600; }
.tk-vang { color: #92400e; margin-top: 6px; }
.tk-trong { color: var(--ink-3, #6b7280); padding: 10px 2px; }
.tk-h4 { margin: 14px 0 6px; font-size: var(--fs-md, 15px); }
.tk-dlg { max-height: 72vh; overflow: auto; }
.tk-loc { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tk-loc .rv-chip { padding: 5px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; font-size: var(--fs-sm, 13px); font-weight: 600; cursor: pointer; }
.tk-bang td { vertical-align: top; }
.tk-hang-do td:first-child { box-shadow: inset 3px 0 0 var(--danger, #dc2626); }
.tk-hang-huy td { color: var(--ink-3, #6b7280); text-decoration: line-through; }
.tk-hang-huy td:last-child, .tk-hang-huy td:last-child * { text-decoration: none; }
.tk-tao { white-space: nowrap; }
.tk-tao button { margin: 2px 4px 2px 0; }
.tk-cot { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-decoration: underline dotted; }
.tk-cot.on { color: var(--primary); }
.tk-co { display: inline-block; margin: 1px 4px 2px 0; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs, 12px); font-weight: 600; border: 1px solid transparent; }
.tk-co-do { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.tk-co-vang { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.tk-co-xanh { background: var(--primary-soft, #e0ecff); color: var(--primary, #1d4ed8); }
.tk-co-hang { margin: 6px 0; }
.tk-thanh { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs, 12px); margin: 2px 0; }
.tk-thanh-nhan { min-width: 104px; color: var(--ink-2, #374151); }
.tk-thanh-nen { flex: 1; min-width: 60px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.tk-thanh-gt { display: block; height: 100%; }
.tk-thanh-tg { background: #94a3b8; }
.tk-thanh-nt { background: var(--success, #16a34a); }
.tk-ngoai { margin-top: 10px; }
.tk-nhan { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs, 12px); font-weight: 600; background: #eef2f7; color: var(--ink-2, #374151); vertical-align: middle; }
.tk-nhan-vang { background: #fef3c7; color: #92400e; }
.tk-nhan-xam { background: #f3f4f6; color: var(--ink-3, #6b7280); }
.tk-tt-choDuyet, .tk-tt-choDuyetLai { background: var(--primary-soft, #e0ecff); color: var(--primary, #1d4ed8); }
.tk-tt-daDuyet { background: #dcfce7; color: #166534; }
.tk-tt-dung { background: #fee2e2; color: #991b1b; }
.tk-kh-dau { margin-bottom: 6px; }
.tk-hop-do, .tk-hop-vang { padding: 8px 10px; border-radius: 8px; margin: 8px 0; }
.tk-hop-do { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.tk-hop-vang { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.tk-hang-nut { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.tk-hang-ngay { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 8px; }
.tk-hang-ngay label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm, 13px); }
.tk-o-khoi { display: block; margin: 8px 0; font-size: var(--fs-sm, 13px); }
.tk-o-khoi textarea, .tk-o-khoi input:not([type=checkbox]):not([type=radio]):not([type=file]), .tk-o-khoi select { display: block; width: 100%; margin-top: 3px; box-sizing: border-box; }
.tk-bang-sua input, .tk-bang-sua select { width: 100%; box-sizing: border-box; min-width: 0; }
.tk-o-ten { min-width: 160px; }
.tk-o-so { max-width: 76px; text-align: right; }
.tk-o-lydo { margin-top: 4px; }
.tk-o-nho { max-width: 190px; margin-right: 6px; }
.tk-o-loi { border-color: var(--danger, #dc2626) !important; background: #fef2f2; }
.tk-huy { white-space: nowrap; font-size: var(--fs-sm, 13px); }
.tk-doisoat { margin: 8px 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: var(--fs-sm, 13px); }
.tk-doisoat ul { margin: 4px 0 0 18px; padding: 0; }
.tk-doisoat-loi { background: #fffbeb; border-color: #fde68a; }
.tk-doisoat-dat { background: #f0fdf4; border-color: #bbf7d0; }
.tk-sosanh { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: var(--fs-sm, 13px); }
.tk-sosanh ul { margin: 4px 0 0 18px; padding: 0; }
.tk-ss-them { color: #166534; }
.tk-ss-huy { color: #991b1b; }
.tk-ss-doi { color: #92400e; }
.tk-loi { color: var(--danger, #dc2626); font-size: var(--fs-sm, 13px); margin: 6px 0; }
.tk-loi:empty { display: none; }
.tk-loi-ds { margin: 4px 0 0 18px; padding: 0; }
.tk-cancu, .tk-nk { margin: 8px 0; }
.tk-cancu summary, .tk-nk summary { cursor: pointer; font-weight: 600; }
.tk-nk ul { margin: 6px 0 0 18px; padding: 0; font-size: var(--fs-sm, 13px); }
.tk-kv th { text-align: left; white-space: nowrap; padding-right: 12px; color: var(--ink-2, #374151); font-weight: 600; vertical-align: top; }
.tk-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 10px; }
.tk-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px; cursor: pointer; font: inherit; color: var(--ink-2, #374151); }
.tk-tabs button.on { border-bottom-color: var(--primary); color: var(--primary); font-weight: 700; }
.tk-lan { margin: 6px 0 6px 18px; padding: 0; }
.tk-lan li { margin-bottom: 8px; }
.tk-nt-cho { color: var(--primary, #1d4ed8); font-weight: 600; }
.tk-nt-dat { color: var(--success, #16a34a); font-weight: 600; }
.tk-nt-khongDat { color: var(--danger, #dc2626); font-weight: 600; }
.tk-o-tep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.tk-tep-ds { flex-basis: 100%; }
.tk-tep { display: inline-flex; align-items: center; gap: 4px; margin: 2px 8px 2px 0; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: var(--fs-sm, 13px); }
.tk-tep-x { padding: 0 6px; line-height: 1.2; }
.tk-ky { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.tk-ky-tieude { font-weight: 700; margin-bottom: 6px; }
.tk-ky.tk-ky-thieu { border-color: #fde68a; background: #fffbeb; }
.tk-ky label { display: block; margin: 6px 0; font-size: var(--fs-sm, 13px); }

@media (max-width: 640px) {
  .tk-bang thead, .tk-bang-moc thead { display: none; }
  .tk-bang, .tk-bang tbody, .tk-bang tr, .tk-bang td, .tk-bang-moc, .tk-bang-moc tbody, .tk-bang-moc tr, .tk-bang-moc td { display: block; width: 100%; box-sizing: border-box; }
  .tk-bang tr, .tk-bang-moc tr { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 6px 10px; background: #fff; }
  .tk-bang td, .tk-bang-moc td { border: 0; padding: 4px 0; }
  .tk-bang td[data-nhan]::before, .tk-bang-moc td[data-nhan]::before { content: attr(data-nhan); display: block; font-size: var(--fs-xs, 12px); color: var(--ink-3, #6b7280); }
  .tk-tao { white-space: normal; }
  .tk-tao button, .tk-hang-nut button { min-height: 40px; }
  .tk-dlg { max-height: none; }
  .tk-hang-do td:first-child { box-shadow: none; }
  .tk-hang-do { border-left: 4px solid var(--danger, #dc2626) !important; }
}

/* TK-1b-a: AI lập bản nháp mốc (mockup 20261019_App_Mockup-tk-1b đã duyệt). Chỉ dùng biến theme có sẵn (--primary, --primary-soft,
   --line, --danger, --ink, --ink-2, --ink-3); màu vàng/xám cố định như .tk-co-vang và .tk-nhan-xam. KH không AI không mang lớp nào dưới đây. */
.tk-moc-bang { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 12px; padding: 11px 14px; margin: 10px 0; }
.tk-moc-bang-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft, #eef3f8); color: var(--primary); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-xs, 12px); }
.tk-moc-bang-nd { flex: 1 1 320px; min-width: 0; }
.tk-moc-bang-t { font-weight: 750; color: var(--ink, #17232f); overflow-wrap: anywhere; }
.tk-moc-bang-p { font-size: var(--fs-sm, 13px); color: var(--ink-2, #3b4a58); margin-top: 2px; overflow-wrap: anywhere; }
.tk-moc-bang-n { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tk-moc-bang-vang { border-left-color: #d08a00; }
.tk-moc-bang-vang .tk-moc-bang-ic { background: #fef3c7; color: #92400e; }
.tk-moc-bang-xam { border-left-color: #9aa6b2; }
.tk-moc-bang-xam .tk-moc-bang-ic { background: #f1f3f5; color: #5b6773; }
.tk-moc-xoay { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--primary-soft, #eef3f8); border-top-color: var(--primary); border-radius: 50%; animation: tk-moc-xoay 0.9s linear infinite; }
@keyframes tk-moc-xoay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tk-moc-xoay { animation: none; } }
.tk-moc-ng { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.tk-moc-ng i { font-style: normal; font-weight: 800; }
.tk-moc-ng-ai { background: var(--primary-soft, #eef3f8); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, #fff); }
.tk-moc-ng-sua { background: #fff7e6; color: #8a5300; border-color: #f3d9a4; }
.tk-moc-ng-tay { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.tk-moc-chu { margin-top: 3px; font-size: 11.5px; line-height: 1.35; }
.tk-moc-chu[hidden] { display: none; }
.tk-moc-han { color: var(--ink-3, #6b7a88); }
.tk-moc-khac { color: #8a5300; font-weight: 600; }
.tk-moc-can { color: var(--danger, #dc2626); font-weight: 700; }
.tk-moc-thieu { border-color: var(--danger, #dc2626) !important; background: #fef2f2; }
.tk-moc-nt { min-width: 0; }
.tk-moc-ai tr.tk-moc-cc td { border-top: 0; padding-top: 0; background: color-mix(in srgb, var(--primary) 2.5%, #fff); }
.tk-moc-cck { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-2, #3b4a58); }
.tk-moc-cck summary { cursor: pointer; color: var(--primary); font-weight: 650; list-style: none; }
.tk-moc-cck summary::-webkit-details-marker { display: none; }
.tk-moc-cck summary::before { content: "▸ "; color: var(--ink-3, #6b7a88); }
.tk-moc-cck[open] summary::before { content: "▾ "; }
.tk-moc-ccds { margin: 6px 0 2px; display: grid; gap: 6px; }
.tk-moc-cc1 { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 8px; padding: 7px 10px; }
.tk-moc-cc1 b { color: var(--ink, #17232f); }
.tk-moc-cc1 q { display: block; margin-top: 2px; color: var(--ink, #17232f); font-style: italic; quotes: "«" "»"; overflow-wrap: anywhere; }
.tk-moc-che { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 0 4px; border-radius: 4px; background: #f1f3f5; color: #5b6773; }
.tk-moc-dung { font-size: 11.5px; color: var(--ink-3, #6b7a88); margin-top: 3px; }
.tk-moc-co { margin: 2px 0 2px 18px; padding: 0; font-size: 12px; color: #8a5300; }
.tk-moc-luuy { background: #fff; border: 1px solid #fde68a; border-radius: 10px; padding: 9px 12px; margin: 8px 0; font-size: var(--fs-sm, 13px); color: #7c3a06; }
.tk-moc-luuy-t { font-weight: 750; }
.tk-moc-luuy ul { margin: 4px 0 0 18px; padding: 0; }
.tk-moc-lech { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.tk-moc-lech > b { font-size: var(--fs-md, 14px); }
.tk-moc-lech table { border-collapse: collapse; margin: 6px 0; font-size: var(--fs-sm, 13px); }
.tk-moc-lech td, .tk-moc-lech th { border: 1px solid var(--line); padding: 4px 10px; text-align: left; }
.tk-moc-lech th { background: color-mix(in srgb, var(--primary) 4%, #fff); font-weight: 600; color: var(--ink-3, #6b7a88); }
.tk-moc-trong { padding: 10px 2px; }
.tk-moc-goiy { align-self: flex-end; font-size: var(--fs-xs, 12px); color: var(--ink-3, #6b7a88); padding-bottom: 4px; }
.tk-moc-goiy button { margin-left: 4px; }
.tk-moc-goiy:empty { display: none; }
.tk-moc-sua { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3, #6b7a88); }
.tk-moc-sua-han { color: #8a5300; }
.tk-moc-dem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.tk-moc-dem div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: color-mix(in srgb, var(--primary) 4%, #fff); }
.tk-moc-dem b { display: block; font-size: var(--fs-num, 22px); color: var(--ink, #17232f); line-height: 1.1; }
.tk-moc-dem span { font-size: var(--fs-xs, 12px); color: var(--ink-3, #6b7a88); }
.tk-moc-xn { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; color: var(--ink, #17232f); }
.tk-moc-xn input { margin-top: 3px; }
.tk-moc-the { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px 12px; margin: 0 0 10px; box-shadow: 0 2px 4px #223c5010; overflow-wrap: anywhere; }
.tk-moc-the-t { font-weight: 750; }
.tk-moc-the dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0 4px; font-size: var(--fs-sm, 13px); }
.tk-moc-the dt { color: var(--ink-3, #6b7a88); }
.tk-moc-the dd { margin: 0; min-width: 0; }
@media (max-width: 640px) {
  .tk-moc-bang-nd { flex-basis: 100%; }
  .tk-moc-bang-n button { min-height: 44px; }
  .tk-moc-dem { grid-template-columns: 1fr; }
}
/* TK-1b-a: bảng có AI theo bề rộng cột của mockup; khung bảng tự cuộn ngang (rv-tbl-wrap của app.css để overflow visible).
   SỬA-V1 C2: bảng soạn 1414 → 1320 px (cột thu đều ~6,6%) để đủ 11 cột trong hộp 1400 px ở màn 1440 (thân hộp chừa 2 × 22 px lề + thanh cuộn dọc). */
.rv-tbl-wrap.tk-moc-cuon { overflow-x: auto; }
.rv-tbl.tk-bang-sua.tk-moc-ai { min-width: 1320px; }
.rv-tbl.tk-bang-moc.tk-moc-ai { min-width: 1180px; }
.dlg-b label.tk-moc-xn { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: var(--fs-md, 14px); font-weight: 600; color: var(--ink, #17232f); }
/* SỬA-V1 C2 (đầu não + E2E 19/10): hộp kế hoạch có bảng AI (lớp tk-dlg-ai do ui-trienkhai.js gắn vào .tk-dlg khi trong hộp có bảng .tk-moc-ai)
   rộng tới 1400 px theo mẫu soanviec.css (dialog.win.wide:has + win-sized); :not(.win-full) để nút Phóng to vẫn toàn màn (V2-01). Thân hộp một cột — bỏ lưới 2 cột 1fr 1fr của .dlg-b (app.css) vì con của lưới
   có min-width auto nên nở theo bảng và kéo thân hộp cuộn ngang. Màn hẹp hơn: chỉ khung bảng cuộn, KHÔNG BAO GIỜ thân hộp.
   KH không AI không mang lớp này ⇒ hộp 900 px và bố cục y v4.128 (kể cả lỗi dồn cột có sẵn của bảng TK-1a — ngoài gói). */
dialog.win.wide:not(.win-full):has(> .tk-dlg.tk-dlg-ai) { width: min(1400px, calc(100vw - 32px)); }
dialog.win.wide.win-sized:not(.win-full):has(> .tk-dlg.tk-dlg-ai) { max-width: none; }
.dlg-b.tk-dlg.tk-dlg-ai { display: block; }
.tk-dlg.tk-dlg-ai > *, .tk-dlg.tk-dlg-ai fieldset { min-width: 0; max-width: 100%; }
.tk-dlg.tk-dlg-ai .rv-tbl-wrap.tk-moc-cuon { overflow-x: auto; max-width: 100%; }

/* tk-l4-ui (20/10): .dlg-b của app.css là lưới 2 cột 1fr 1fr ⇒ hộp TK nào không đặt display:block (tkMoKeHoach từ Hộp việc, danh sách, hộp mốc,
   các biểu mẫu mốc / xác nhận / mở khẩn) dồn nội dung vào nửa trái và bảng kế hoạch bị dồn cột. Mọi hộp TK một cột.
   Bảng không AI (review V1 F1): cùng khuôn C2 nhưng CHỈ bằng CSS (HTML KH không AI giữ y v4.128) — hộp có bảng soạn/xem mốc hoặc bảng danh sách (E2E N9: danh sách GĐ chủ trì 2 nút/dòng tràn 957/900) nới tới 1400 px; bảng soạn 11 cột
   theo bề rộng cột của bảng AI (1320 px); bảng xem tự giãn theo chữ. Khung bảng LUÔN tự cuộn ngang (review V2-1: hộp kéo/nhớ cỡ ở mọi màn), không bao giờ thân hộp —
   tiêu đề bảng không ghim khi cuộn thân hộp, chấp nhận như C2. Điện thoại (tối đa 640): hộp và bảng như cũ (bảng xem thành thẻ). */
.dlg-b.tk-dlg { display: block; }
.tk-dlg .rv-tbl-wrap:has(> :is(table.tk-bang, table.tk-bang-sua, table.tk-bang-moc)) { overflow-x: auto; max-width: 100%; }
@media (min-width: 641px) {
  dialog.win.wide:not(.win-full):has(> .tk-dlg :is(table.tk-bang, table.tk-bang-sua, table.tk-bang-moc)) { width: min(1400px, calc(100vw - 32px)); }
  dialog.win.wide.win-sized:not(.win-full):has(> .tk-dlg :is(table.tk-bang, table.tk-bang-sua, table.tk-bang-moc)) { max-width: none; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) { min-width: 1320px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(1) { width: 101px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(2) { width: 189px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(3) { width: 121px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(4) { width: 133px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(5) { width: 149px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(6) { width: 107px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(7) { width: 159px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(8), .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(9) { width: 90px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(10) { width: 97px; }
  .rv-tbl.tk-bang-sua:not(.tk-moc-ai) th:nth-child(11) { width: 84px; }
  .rv-tbl.tk-bang-moc:not(.tk-moc-ai) { table-layout: auto; }
  .rv-tbl.tk-bang-moc:not(.tk-moc-ai) :is(th, td):nth-child(n) { width: auto; }
}
/* .tk-o-khoi (display:block) và .dlg-b label đè thuộc tính hidden ⇒ ô "Lý do không có mốc tạm ứng" luôn hiện. */
.tk-o-khoi[hidden] { display: none !important; }