/* Xong Việc — giao diện chế độ "Dữ liệu" (bảng không có lịch).
   Nạp bởi thẻ <link id="xv-du-lieu-css"> trong index.html (đặt đúng vị trí cũ trong thứ tự cascade, bật bằng thuộc tính media
   khi vào chế độ Dữ liệu). Mã đi kèm: du-lieu.js (window.DuLieu). Mọi luật ở đây đều bắt đầu bằng body.view-mode-data,
   trừ .xv-mo-hang (nút "Mở" do du-lieu.js tạo, mặc định ẩn). */

/* ===== CHẾ ĐỘ XEM "DỮ LIỆU": cùng bảng nhưng bỏ hẳn phần lịch, các cột trải rộng hết màn, sửa tại ô như Timeline ===== */
/* Độ rộng mặc định của các cột phụ được chọn sao cho bật đủ 5 cột ở màn 1440px thì cột Hạng mục vẫn còn khoảng 460px
   (v856 để 190/160/200/96/76/130 nên bảng rộng 1359px, tràn khỏi khung và ép cột Hạng mục còn 320px). */
body.view-mode-data { --w-task: auto; --w-note: var(--xv-dl-note, 160px); --w-date: 88px; --w-days: 62px; --w-dep: 34px; --w-status: 104px; --w-progress: 72px; }
/* Năm cột có nội dung cố định (Bắt đầu, Ngày, Kết thúc, Trạng thái, %) có độ rộng CỐ ĐỊNH vừa đủ dùng, không kéo đổi được và không theo độ rộng đã lưu
   (88/62/88/104/72px). Các cột còn lại (Phụ trách, Nhãn, Ghi chú) vẫn kéo đổi được, giá trị nhớ trong --xv-dl-* (xvCotRongNap). */
body.view-mode-data.nhan-on-mode { --w-nhan: var(--xv-dl-nhan, 130px); }
body.view-mode-data.assignee-on-mode, body.view-mode-data.has-multi-members:not(.assignee-off-mode) { --w-assignee: var(--xv-dl-assignee, 150px) !important; }
/* Khối CSS máy tính đặt cứng cột % là 61px (đúng cho Timeline); ở Dữ liệu cột % theo biến để đủ chỗ cho số kèm thanh */
body.view-mode-data #timeline-table .col-progress { width: var(--w-progress); min-width: var(--w-progress); max-width: var(--w-progress); }
/* Khung rộng theo màn hình như màn Tổng hợp: lề 40px mỗi bên, tối đa 1480px; cột Hạng mục (--w-task: auto) co giãn lấp phần còn lại.
   --xv-dl-min (du-lieu.js: tổng độ rộng các cột khác + 320px) giữ cột Hạng mục không bị ép nhỏ khi bật nhiều cột; thiếu chỗ thì khung cuộn ngang. */
@media screen and (min-width: 761px) {
    body.view-mode-data #table-wrapper { padding-left: 64px; padding-right: 40px; box-sizing: border-box; }
    body.view-mode-data #timeline-table { width: 100% !important; max-width: 1480px; min-width: var(--xv-dl-min, 0px) !important; margin-left: auto; margin-right: auto; }
    /* Thanh công cụ (tiêu đề bảng, chip, các nút) thẳng mép với bảng: trái 81px = lề khung 16 + viền 1 + lề trái 64 (chỗ của nút lề), phải 57px = 16 + 1 + 40 */
    html body.xv-p2.view-mode-data #khoi-ten-cong-trinh { padding-left: max(81px, calc((100% - 1480px) / 2 + 12px)) !important; padding-right: max(57px, calc((100% - 1480px) / 2 - 12px)) !important; }
    /* Nút trợ giúp nổi đứng trong lề phải của khung, không che cột cuối của bảng */
    body.view-mode-data #xv-bdn-fab { right: 5px; }
}
/* Cột Hạng mục tự co giãn nên không có tay nắm kéo riêng */
body.view-mode-data th.col-task .xv-cot-keo { display: none; }
/* Dòng tổng ở đáy khung (du-lieu.js tạo, dính đáy khi bảng dài) */
#xv-dl-tong { display: none; }
body.view-mode-data #xv-dl-tong { display: flex; position: sticky; bottom: 0; z-index: 40; box-sizing: border-box; width: 100%; max-width: 1480px; min-width: var(--xv-dl-min, 0px); height: 40px; margin: 0 auto; padding: 0 12px; align-items: center; gap: 18px; background: var(--card-bg, #ffffff); border-top: 1px solid var(--border-color, #e3e9e6); font-size: 12.5px; color: #3a4a45; white-space: nowrap; }
body.dark-mode.view-mode-data #xv-dl-tong { color: #b8cbc5; }
#xv-dl-tong .xv-dl-tong-so { font-weight: 700; color: var(--text-color, #17231f); }
#xv-dl-tong .xv-dl-tong-muc { display: inline-flex; align-items: center; gap: 6px; }
#xv-dl-tong .xv-dl-tong-cham { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#xv-dl-tong .xv-dl-tong-phai { margin-left: auto; }
@media print { #xv-dl-tong { display: none !important; } }
/* Cụm nút ⋯ + ✕ trong ô tên không dùng ở chế độ Dữ liệu: thêm việc, kéo, menu (gồm xóa) đã có ở lề trái. Chỉ làm vô hình (không display: none)
   vì menu chuột phải và vài hộp thoại vẫn lấy vị trí của nút ⋯ làm điểm neo khi không có nút neo ở lề. Cửa sổ hẹp (dưới 761px) không có lề trái nên giữ nguyên cụm nút. */
@media screen and (min-width: 761px) { body.view-mode-data #table-body .task-inline-actions { visibility: hidden !important; pointer-events: none !important; } }
/* Cột ✎ không còn: nút "Mở" hiện khi rê chuột vào hàng */
/* Tiêu đề cột: chữ thường, xám, nhẹ */
html body.view-mode-data #timeline-table thead th { text-transform: none !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #6b7a75 !important; background: #ffffff !important; }
html body.view-mode-data #timeline-table thead th .th-sort-wrap { justify-content: flex-start; }
/* Tiêu đề căn theo nội dung của cột: chữ căn trái, ba cột ngày căn giữa; cột Phụ trách hiện chữ thay cho biểu tượng */
html body.view-mode-data #timeline-table thead th.col-task, html body.view-mode-data #timeline-table thead th.col-note, html body.view-mode-data #timeline-table thead th.col-assignee,
html body.view-mode-data #timeline-table thead th.col-nhan, html body.view-mode-data #timeline-table thead th.col-status, html body.view-mode-data #timeline-table thead th.col-progress { text-align: left !important; padding-left: 10px !important; }
html body.view-mode-data #timeline-table thead th.col-date, html body.view-mode-data #timeline-table thead th.col-days { text-align: center !important; }
html body.view-mode-data #timeline-table thead th.col-assignee .th-asg-text { display: inline; }
html body.view-mode-data #timeline-table thead th.col-assignee .th-asg-icon, html body.view-mode-data #timeline-table thead th.col-nhan .th-sort-wrap > svg { display: none; }
body.dark-mode.view-mode-data #timeline-table thead th { color: #9fb1ab !important; background: var(--card-bg, #0f1a18) !important; }
/* Nhịp hàng và cỡ chữ dễ đọc hơn */
body.view-mode-data #table-body td { height: 36px; }
body.view-mode-data #table-body .task-name-edit { font-size: 13px; }
body.view-mode-data #table-body .display-date, body.view-mode-data #table-body .duration-days { font-size: 12.5px; }
html body.view-mode-data #table-body .duration-days { width: 100% !important; text-align: center; }
/* Hàng giai đoạn: nền nhạt. Tên giai đoạn GIỮ chữ hoa như Timeline: app đọc tên qua innerText
   (đã áp text-transform) rồi lưu lại, nên bỏ ép chữ hoa ở riêng chế độ này sẽ làm tên lưu lúc hoa lúc thường tùy chế độ đang mở. */
html body.view-mode-data #timeline-table #table-body tr.main-task > td:not(.week-cell) { background: #eef2f0 !important; }
html body.dark-mode.view-mode-data #timeline-table #table-body tr.main-task > td:not(.week-cell) { background: rgba(255, 255, 255, 0.05) !important; }
html body.view-mode-data #table-body tr.main-task .task-name-edit { flex: 0 1 auto !important; width: auto !important; min-width: 40px; }
/* Ghi chú căn trái để dò theo cột; tên phụ trách hiện đủ theo bề rộng cột */
html body.view-mode-data #timeline-table td.col-note, html body.view-mode-data #timeline-table td.col-note .note-edit { text-align: left !important; }
html body.view-mode-data #timeline-table td.col-note { padding-left: 10px !important; }
html body.view-mode-data #timeline-table .assignee-pill { max-width: 100% !important; }
html body.view-mode-data #timeline-table .assignee-name { max-width: 10ch !important; overflow: hidden; text-overflow: ellipsis; }
/* Nút ở tiêu đề Phụ trách: đổi giữa "avatar kèm tên" (tên cắt ở khoảng 10 ký tự) và "chỉ avatar" (cột 56px, tên nằm trong chú thích) */
html body.view-mode-data.xv-dl-pt-nho:not(.xv-a):not(.xv-b) { --w-assignee: 44px !important; }
.xv-dl-pt-nut { display: none; }
body.view-mode-data #th-assignee { position: relative; }
body.view-mode-data .xv-dl-pt-nut { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 3px; top: 50%; width: 20px; height: 20px; margin-top: -10px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #8a9893; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
body.view-mode-data #th-assignee:hover .xv-dl-pt-nut, body.view-mode-data .xv-dl-pt-nut:focus-visible, body.view-mode-data .xv-dl-pt-nut[aria-pressed="true"] { opacity: 1; }
body.view-mode-data .xv-dl-pt-nut:hover { background: #e3ece8; color: var(--xv-c1, #20564c); }
body.view-mode-data .xv-dl-pt-nut:focus-visible { outline: 2px solid var(--xv-c1, #20564c); outline-offset: 1px; }
.xv-dl-pt-ng { display: none; }
body.view-mode-data .xv-dl-pt-nut[aria-pressed="true"] .xv-dl-pt-mt { transform: rotate(180deg); }
body.view-mode-data.xv-dl-pt-gon .xv-dl-pt-nut { right: auto; left: 50%; width: auto; padding: 0 3px; gap: 2px; transform: translateX(-50%); opacity: 1; }
body.view-mode-data.xv-dl-pt-gon .xv-dl-pt-ng { display: block; }
@media print { .xv-dl-pt-nut { display: none !important; } }
/* Mật độ hàng (nút Mật độ, du-lieu.js): Vừa 36px là mặc định, Gọn 30px */
.xv-dl-md-nut { display: none; }
body.view-mode-data .xv-dl-md-nut { display: inline-flex; }
/* Hai nút của riêng chế độ Dữ liệu gọn hơn một chút để tên bảng không bị cắt ở màn 1440px */
html body.xv-p2.view-mode-data #xv-dai-cu .xv-dl-chk-nut, html body.xv-p2.view-mode-data #xv-dai-cu .xv-dl-md-nut { padding: 0 8px !important; }
html body.xv-p2.view-mode-data #xv-dai-cu .xv-vach { margin: 0 1px; }
/* Dưới 1400px các nút khác của dải chỉ còn biểu tượng; hai nút này không có biểu tượng nên giữ chữ */
@media (max-width: 1400px) { body.xv-p2 #xv-dai-cu .xv-dl-chk-nut > span, body.xv-p2 #xv-dai-cu .xv-dl-md-nut > span { display: inline !important; } }
body.view-mode-data.xv-dl-gon #table-body td { height: 30px; }
body.view-mode-data.xv-dl-gon #table-body .task-name-edit { font-size: 12px; }
body.view-mode-data.xv-dl-gon #table-body .display-date, body.view-mode-data.xv-dl-gon #table-body .duration-days, body.view-mode-data.xv-dl-gon #table-body .status-select { font-size: 12px; }
/* Trạng thái và %: dùng đúng kiểu ô của Timeline/Gantt (ô nền nhạt có chấm màu; ô % có thanh tô nền kèm số) để hai màn đồng bộ. */
html body.view-mode-data #table-body .status-select { font-size: 11px; }
html body.view-mode-data #table-body .progress-cell-text { font-size: 11px; }
/* Tên việc luôn là màu chữ thường: màu chỉ dành cho ô Trạng thái và dòng "Trễ" (việc chậm không đổi màu tên hay nền ô tên) */
html body.view-mode-data #table-body tr:not(.main-task)[data-status="delayed"] td.col-task, html body.view-mode-data #table-body tr:not(.main-task)[data-status="overdue"] td.col-task { background-color: var(--card-bg, #ffffff) !important; }
html body.view-mode-data #table-body tr:not(.main-task)[data-status="delayed"] .task-name-edit, html body.view-mode-data #table-body tr:not(.main-task)[data-status="overdue"] .task-name-edit { color: var(--text-color, #17231f) !important; font-weight: 400 !important; }
html body.dark-mode.view-mode-data #table-body tr:not(.main-task)[data-status="delayed"] td.col-task, html body.dark-mode.view-mode-data #table-body tr:not(.main-task)[data-status="overdue"] td.col-task { background-color: var(--card-bg, #ffffff) !important; }
html body.dark-mode.view-mode-data #table-body tr:not(.main-task)[data-status="delayed"] .task-name-edit, html body.dark-mode.view-mode-data #table-body tr:not(.main-task)[data-status="overdue"] .task-name-edit { color: var(--text-color, #e6efec) !important; }
/* Phụ trách: hiện cả tên */
html body.view-mode-data #timeline-table td.col-assignee { text-align: left !important; padding-left: 10px !important; }
html body.view-mode-data #timeline-table .assignee-cell-wrapper { justify-content: flex-start; }
html body.view-mode-data #timeline-table .assignee-name { display: inline !important; margin-left: 8px; font-size: 12.5px; }
/* Nút "Mở" kiểu Notion: chỉ hiện khi rê chuột vào ÔTÊN (không phải cả hàng), nằm ngay trái nút ⋯ để không che nó, ẩn khi đang gõ tên */
.xv-mo-hang { display: none; }
body.view-mode-data .xv-mo-hang { display: inline-flex; align-items: center; gap: 4px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 22px; padding: 0 8px 0 6px; border: 1px solid var(--border-color, #cfd8d4); border-radius: 6px; background: var(--card-bg, #ffffff); color: var(--text-secondary, #5b6b66); font: 600 10.5px 'Be Vietnam Pro', sans-serif; letter-spacing: .04em; box-shadow: 0 1px 2px rgba(17, 39, 35, 0.1); cursor: pointer; opacity: 0; pointer-events: none; z-index: 3; transition: opacity .1s ease; }
body.view-mode-data .xv-mo-hang svg { flex: none; }
body.view-mode-data .xv-mo-hang:hover, body.view-mode-data .xv-mo-hang:focus-visible { color: var(--xv-c1, #20564c); border-color: var(--xv-c1, #20564c); outline: none; }
body.view-mode-data #table-body td.col-task:hover .xv-mo-hang, body.view-mode-data .xv-mo-hang:focus-visible { opacity: 1; pointer-events: auto; }
body.view-mode-data #table-body td.col-task:has(.task-name-edit:focus) .xv-mo-hang:not(:focus-visible) { opacity: 0; pointer-events: none; }
body.dark-mode.view-mode-data .xv-mo-hang:hover, body.dark-mode.view-mode-data .xv-mo-hang:focus-visible { color: var(--xv-d1, #34d399); border-color: var(--xv-d1, #34d399); }
@media print { .xv-mo-hang { display: none !important; } }
body.view-mode-data th.col-thang, body.view-mode-data th.col-week, body.view-mode-data td.week-cell, body.view-mode-data #week-header-row,
body.view-mode-data #today-line-overlay, body.view-mode-data #today-line-label, body.view-mode-data .gantt-master-resizer,
body.view-mode-data #xv-dock, body.view-mode-data .gantt-legend, body.view-mode-data #gantt-split-toggle { display: none !important; }
body.view-mode-data #timeline-table th, body.view-mode-data #timeline-table td { left: auto !important; }
body.view-mode-data th.col-progress, body.view-mode-data td.col-progress { box-shadow: none !important; }

/* ===== Checklist xổ ngay dưới tên việc (kiểu C): du-lieu.js dựng khối trong ô tên, không thêm hàng vào bảng ===== */
.xv-dl-chk-nut { display: none; }
body.view-mode-data .xv-dl-chk-nut { display: inline-flex; }
html body.xv-p2.view-mode-data #xv-dai-cu .xv-dl-chk-nut[aria-pressed="true"], body.view-mode-data .xv-dl-chk-nut[aria-pressed="true"] { border-color: var(--xv-c1, #20564c) !important; background: var(--xv-c1-soft, #eaf3f0) !important; color: #14463c !important; }
html body.dark-mode.xv-p2.view-mode-data #xv-dai-cu .xv-dl-chk-nut[aria-pressed="true"], body.dark-mode.view-mode-data .xv-dl-chk-nut[aria-pressed="true"] { color: var(--xv-d1, #34d399) !important; background: rgba(52, 211, 153, .12) !important; border-color: var(--xv-d1, #34d399) !important; }
.xv-dl-chk-ds { display: none; }
body.view-mode-data #table-body tr.xv-dl-co-chk .xv-dl-chk-ds { display: block; box-sizing: border-box; margin: 2px 12px 8px 0; padding: 6px 12px 4px; background: #f4f8f6; border: 1px solid #e3ece8; border-radius: 8px; cursor: default; }
body.view-mode-data #table-body tr.xv-dl-co-chk .xv-dl-chk-ds.thu { padding-bottom: 6px; }
body.view-mode-data #table-body tr.xv-dl-co-chk > td { vertical-align: top !important; }
body.view-mode-data #table-body tr.xv-dl-co-chk > td:not(.col-task):not(.col-dep) { padding-top: 5px; }
/* Hàng cao: các ô còn lại bám vào dòng đầu (cao 36px) chứ không nằm giữa hàng; chấm màu và mũi tên của ô Trạng thái cũng lên dòng đầu */
body.view-mode-data #table-body tr.xv-dl-co-chk > td.col-assignee, body.view-mode-data #table-body tr.xv-dl-co-chk > td.col-nhan, body.view-mode-data #table-body tr.xv-dl-co-chk > td.col-note { padding-top: 0 !important; }
body.view-mode-data #table-body tr.xv-dl-co-chk td.col-assignee .assignee-cell-wrapper, body.view-mode-data #table-body tr.xv-dl-co-chk td.col-nhan .xv-nhan-o { height: 36px !important; min-height: 0 !important; }
body.view-mode-data #timeline-table tr.xv-dl-co-chk td.col-status::before, body.view-mode-data #timeline-table tr.xv-dl-co-chk td.col-status::after { top: 18px !important; }
body.view-mode-data #table-body tr.xv-dl-co-chk .xv-mo-hang { top: 18px; }
/* Huy hiệu 3/5 là nút xổ hoặc thu gọn: mũi tên báo trạng thái */
body.view-mode-data #table-body tr.xv-dl-co-chk .chk-badge::before { content: "\25B8\00a0"; font-size: 11px; }
body.view-mode-data #table-body tr.xv-dl-xo .chk-badge::before { content: "\25BE\00a0"; }
.xv-dl-chk-muc { display: flex; align-items: flex-start; gap: 9px; min-height: 24px; padding: 3px 0; box-sizing: border-box; font-size: 12.5px; line-height: 1.4; }
.xv-dl-chk-dau { display: flex; align-items: center; gap: 8px; height: 22px; }
.xv-dl-chk-caret { flex: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #52645e; position: relative; cursor: pointer; }
/* mũi tên vẽ bằng viền (chữ ▾ ▸ ở cỡ nhỏ trông như một chấm): xuống khi xổ, sang phải khi thu gọn */
.xv-dl-chk-caret::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.xv-dl-chk-ds.thu .xv-dl-chk-caret::before { margin: -4px 0 0 -2px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; border-right: 0; }
.xv-dl-chk-caret:hover { background: #e3ece8; }
.xv-dl-chk-caret:focus-visible, .xv-dl-chk-sx:focus-visible, .xv-dl-chk-mv:focus-visible, .xv-dl-chk-ten:focus-visible { outline: 2px solid var(--xv-c1, #20564c); outline-offset: 1px; }
.xv-dl-chk-ten { flex: 0 1 190px; min-width: 0; height: 18px; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #52645e; font: 700 11px 'Inter', system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; text-align: left; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input.xv-dl-chk-ten { border-bottom: 1px dashed #9fb0aa; cursor: text; }
input.xv-dl-chk-ten:focus { border-bottom-style: solid; border-bottom-color: var(--xv-c1, #20564c); color: var(--text-color, #17231f); }
.xv-dl-chk-thanh { flex: 1; min-width: 24px; height: 4px; border-radius: 2px; background: #dbe5e1; overflow: hidden; }
.xv-dl-chk-thanh > i { display: block; height: 100%; border-radius: 2px; background: var(--xv-c1, #20564c); }
.xv-dl-chk-dem { flex: none; font: 700 11.5px 'Inter', system-ui, sans-serif; color: #334155; font-variant-numeric: tabular-nums; }
.xv-dl-chk-sx { flex: none; width: 20px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #8a9893; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; }
.xv-dl-chk-ds:hover .xv-dl-chk-sx, .xv-dl-chk-sx[aria-pressed="true"], .xv-dl-chk-sx:focus-visible { opacity: 1; }
.xv-dl-chk-sx[aria-pressed="true"] { color: var(--xv-c1, #20564c); background: #e3ece8; }
.xv-dl-chk-mv { flex: none; width: 18px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #64748b; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; }
.xv-dl-chk-muc:hover .xv-dl-chk-mv:not(:disabled), .xv-dl-chk-mv:focus-visible:not(:disabled) { opacity: 1; }
.xv-dl-chk-mv:hover:not(:disabled) { background: #e3e9e6; color: #17211e; }
.xv-dl-chk-mv:disabled { cursor: default; }
.xv-dl-chk-muc:hover .xv-dl-chk-mv:disabled { opacity: .25; }
/* Mật độ Gọn: dòng đầu của hàng đang xổ cao 30px */
body.view-mode-data.xv-dl-gon #table-body tr.xv-dl-co-chk td.col-assignee .assignee-cell-wrapper, body.view-mode-data.xv-dl-gon #table-body tr.xv-dl-co-chk td.col-nhan .xv-nhan-o { height: 30px !important; }
body.view-mode-data.xv-dl-gon #timeline-table tr.xv-dl-co-chk td.col-status::before, body.view-mode-data.xv-dl-gon #timeline-table tr.xv-dl-co-chk td.col-status::after { top: 15px !important; }
body.view-mode-data.xv-dl-gon #table-body tr.xv-dl-co-chk .xv-mo-hang { top: 15px; }
body.view-mode-data.xv-dl-gon #table-body tr.xv-dl-co-chk > td:not(.col-task):not(.col-dep) { padding-top: 2px; }
.xv-dl-chk-tick { flex: none; width: 15px; height: 15px; margin-top: 2px; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #9fb0aa; border-radius: 4px; background: var(--card-bg, #ffffff); color: transparent; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; }
.xv-dl-chk-tick:hover:not(:disabled) { border-color: var(--xv-c1, #20564c); }
.xv-dl-chk-tick:disabled { cursor: default; opacity: .6; }
.xv-dl-chk-tick:focus-visible, .xv-dl-chk-them:focus-visible { outline: 2px solid var(--xv-c1, #20564c); outline-offset: 2px; }
.xv-dl-chk-muc.xong .xv-dl-chk-tick { background: var(--xv-c1, #20564c); border-color: var(--xv-c1, #20564c); color: #fff; }
.xv-dl-chk-chu { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text-color, #17231f); }
button.xv-dl-chk-chu { padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: text; }
button.xv-dl-chk-chu:hover { color: var(--xv-c1, #20564c); }
button.xv-dl-chk-chu:focus-visible { outline: 2px solid var(--xv-c1, #20564c); outline-offset: 1px; border-radius: 3px; }
.xv-dl-chk-sua { flex: 1; min-width: 0; height: 22px; box-sizing: border-box; margin: -2px 0; padding: 0 6px; border: 1px solid var(--xv-c1, #20564c); border-radius: 5px; background: var(--card-bg, #ffffff); color: var(--text-color, #17231f); font: 11.5px 'Inter', system-ui, sans-serif; outline: none; }
.xv-dl-chk-mv.xoa { display: inline-flex; align-items: center; justify-content: center; }
.xv-dl-chk-mv.xoa:hover:not(:disabled) { background: #fee2e2; color: #b91c1c; }
.xv-dl-chk-muc.xong .xv-dl-chk-chu { color: #8a9893; text-decoration: line-through; }
.xv-dl-chk-them { display: block; margin-top: 2px; padding: 4px 0; border: 0; background: transparent; color: #8a9893; font: 12.5px 'Inter', system-ui, sans-serif; cursor: pointer; }
.xv-dl-chk-them:hover { color: var(--xv-c1, #20564c); }
.xv-dl-chk-nhap { display: block; width: 100%; max-width: 420px; height: 28px; box-sizing: border-box; margin-top: 4px; padding: 0 8px; border: 1px solid var(--xv-c1, #20564c); border-radius: 6px; background: var(--card-bg, #ffffff); color: var(--text-color, #17231f); font: 12.5px 'Inter', system-ui, sans-serif; outline: none; }
body.dark-mode .xv-dl-chk-tick { background: var(--xv-s0, #0d1715); border-color: #4b6660; }
body.dark-mode.view-mode-data #table-body tr.xv-dl-co-chk .xv-dl-chk-ds { background: rgba(255, 255, 255, 0.04); border-color: #243b37; }
body.dark-mode .xv-dl-chk-ten { color: #9fb1ab; }
body.dark-mode input.xv-dl-chk-ten:focus { color: #e6f0ed; }
body.dark-mode .xv-dl-chk-thanh { background: #243b37; }
body.dark-mode .xv-dl-chk-dem { color: #c7d6d1; }
body.dark-mode .xv-dl-chk-muc.xong .xv-dl-chk-tick { background: var(--xv-d1, #34d399); border-color: var(--xv-d1, #34d399); color: #062a21; }
@media print { .xv-dl-chk-ds, .xv-dl-chk-nut { display: none !important; } }

/* ===== Lề trái kiểu Notion: nút + và nút kéo hiện ở hàng đang rê chuột (du-lieu.js dựng, nằm trong khung bảng, ngoài mép bảng) ===== */
#xv-dl-le { display: none; }
@media screen and (min-width: 761px) {
    body.view-mode-data:not(.xv-reorder-mode) #xv-dl-le { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 60; }
}
.xv-dl-le-nhom { display: none; position: absolute; width: 64px; box-sizing: border-box; padding-right: 6px; align-items: center; justify-content: flex-end; gap: 2px; }
.xv-dl-le-nhom.hien { display: flex; }
.xv-dl-le-nut { position: relative; flex: none; width: 18px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #8a9893; display: inline-flex; align-items: center; justify-content: center; font: 500 18px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.xv-dl-le-nut:hover, .xv-dl-le-nut:focus-visible { background: #e3e9e6; color: #334155; outline: none; }
.xv-dl-le-nut:focus-visible { box-shadow: 0 0 0 2px var(--xv-c1, #20564c); }
.xv-dl-le-nut[hidden] { display: none; }
.xv-dl-le-keo { cursor: grab; }
.xv-dl-le-keo:active { cursor: grabbing; }
.xv-dl-le-keo.khoa { color: #c3ccd6; cursor: pointer; }
.xv-dl-le-tip { display: none; position: absolute; left: 0; top: 30px; z-index: 5; padding: 6px 10px; border-radius: 6px; background: #1f2937; color: #d7dde4; font: 500 11.5px/1.55 'Inter', system-ui, sans-serif; white-space: nowrap; text-align: left; pointer-events: none; }
.xv-dl-le-tip b { color: #ffffff; font-weight: 700; }
.xv-dl-le-dong { display: block; }
.xv-dl-le-nut:hover .xv-dl-le-tip { display: block; }
.xv-dl-le-nhom.dang-keo .xv-dl-le-tip { display: none !important; }
body.dark-mode .xv-dl-le-nut { color: #7f948e; }
body.dark-mode .xv-dl-le-nut:hover, body.dark-mode .xv-dl-le-nut:focus-visible { background: rgba(255, 255, 255, 0.1); color: #d4e2dd; }
/* Ảnh kéo: chỉ tên việc, đặt ngoài màn hình để trình duyệt chụp lại */
.xv-dl-bong { position: fixed; left: -2000px; top: 0; max-width: 360px; height: 32px; box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; border: 1px solid #c9d3cf; border-radius: 7px; background: #ffffff; color: #0f172a; font: 500 13px 'Inter', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media print { #xv-dl-le, .xv-dl-bong { display: none !important; } }

/* ===== Chọn nhiều việc (đợt 2): ô chọn ở lề trái, việc đã chọn tô nền, thanh "Đã chọn N" trên thanh công cụ ===== */
.xv-dl-le-chon { width: 18px; height: 18px; border: 1.5px solid #9fb0aa; border-radius: 4px; background: var(--card-bg, #ffffff); color: transparent; font: 800 11px/1 'Inter', system-ui, sans-serif; }
.xv-dl-le-chon:hover { border-color: #2563eb; background: var(--card-bg, #ffffff); }
.xv-dl-le-chon.co { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.xv-dl-le-chon-co { position: absolute; display: inline-flex; z-index: 1; }
body.dark-mode .xv-dl-le-chon { background: var(--xv-s0, #0d1715); border-color: #4b6660; }
body.dark-mode .xv-dl-le-chon.co { background: #3b82f6; border-color: #3b82f6; color: #ffffff; }
.xv-dl-le-cot { position: absolute; z-index: 1; width: 24px; height: 24px; color: #7b8a85; }
.xv-dl-le-cot:hover, .xv-dl-le-cot[aria-expanded="true"] { background: #e3e9e6; color: #17231f; }
body.view-mode-data #timeline-table #table-body tr.xv-dl-chon > td:not(.week-cell) { background: #e9f1fe !important; }
body.dark-mode.view-mode-data #timeline-table #table-body tr.xv-dl-chon > td:not(.week-cell) { background: rgba(59, 130, 246, 0.16) !important; }
.xv-dl-hl { display: none; }
body.view-mode-data .xv-dl-hl:not([hidden]) { display: flex; align-items: center; flex: none; height: 32px; margin-left: 4px; border: 1px solid #c9d3cf; border-radius: 9px; background: var(--card-bg, #ffffff); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
body.view-mode-data.xv-dl-co-chon #khoi-ten-cong-trinh .project-header-titles, body.view-mode-data.xv-dl-co-chon #xv-chip-viec { display: none !important; }
.xv-dl-hl-so { padding: 0 12px; font: 700 13px/1 'Inter', system-ui, sans-serif; color: #2563eb; white-space: nowrap; }
.xv-dl-hl-nut { height: 100%; padding: 0 12px; border: 0; border-left: 1px solid #e3e9e6; background: transparent; color: #17211e; font: 600 13px/1 'Inter', system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.xv-dl-hl-nut:hover, .xv-dl-hl-nut[aria-expanded="true"] { background: #f1f5f3; }
.xv-dl-hl-nut:focus-visible { outline: 2px solid var(--xv-c1, #20564c); outline-offset: -2px; }
.xv-dl-hl-nut.xoa { color: #b91c1c; }
.xv-dl-hl-nut.bo { color: #64748b; border-radius: 0 8px 8px 0; }
.xv-dl-hl-nut[hidden] { display: none; }
.xv-dl-hl-hop { position: fixed; z-index: 700; width: 210px; box-sizing: border-box; max-height: 340px; overflow-y: auto; padding: 5px; border: 1px solid #d5ddd9; border-radius: 9px; background: var(--card-bg, #ffffff); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); }
.xv-dl-hl-hop.rong { width: 260px; padding: 12px; }
.xv-dl-hl-muc { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #17211e; font: 500 13px/1 'Inter', system-ui, sans-serif; text-align: left; white-space: nowrap; cursor: pointer; }
.xv-dl-hl-muc:hover, .xv-dl-hl-muc:focus-visible { background: #f1f5f3; outline: none; }
.xv-dl-hl-muc.nhat { color: #64748b; }
.xv-dl-hl-cham { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.xv-dl-hl-ghi { padding: 6px 4px 0; color: #64748b; font: 500 11.5px/1.45 'Inter', system-ui, sans-serif; }
.xv-dl-hl-ghi.dam { padding: 0 0 10px; color: #475569; font-weight: 700; font-size: 12px; }
.xv-dl-hl-buoc { display: flex; align-items: center; gap: 8px; }
.xv-dl-hl-so-nut { width: 30px; height: 30px; padding: 0; border: 1px solid #cfd8d4; border-radius: 7px; background: var(--card-bg, #ffffff); color: #17211e; font: 700 16px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.xv-dl-hl-so-nut:hover { border-color: var(--xv-c1, #20564c); }
.xv-dl-hl-so-ngay { flex: 1; text-align: center; font: 700 14px/1 'Inter', system-ui, sans-serif; }
.xv-dl-hl-hai { display: flex; gap: 8px; margin-top: 10px; }
.xv-dl-hl-hai .xv-dl-hl-nut { flex: 1; height: 32px; border: 1px solid #cfd8d4; border-radius: 8px; }
.xv-dl-hl-hai .xv-dl-hl-nut.chinh { background: var(--xv-c1, #20564c); border-color: var(--xv-c1, #20564c); color: #ffffff; }
body.dark-mode .xv-dl-hl { background: var(--xv-s3, #162723); border-color: var(--xv-s7, #2a403b); }
body.dark-mode .xv-dl-hl-so { color: #7db0ff; }
body.dark-mode .xv-dl-hl-nut { color: #e6f0ed; border-left-color: var(--xv-s7, #2a403b); }
body.dark-mode .xv-dl-hl-nut:hover, body.dark-mode .xv-dl-hl-nut[aria-expanded="true"] { background: var(--xv-s4, #1f3a34); }
body.dark-mode .xv-dl-hl-nut.xoa { color: #f87171; }
body.dark-mode .xv-dl-hl-nut.bo { color: #94a3b8; }
body.dark-mode .xv-dl-hl-hop { background: var(--xv-s3, #162723); border-color: var(--xv-s7, #2a403b); }
body.dark-mode .xv-dl-hl-muc { color: #e6f0ed; }
body.dark-mode .xv-dl-hl-muc:hover, body.dark-mode .xv-dl-hl-muc:focus-visible { background: var(--xv-s4, #1f3a34); }
@media print { .xv-dl-hl { display: none !important; } body.view-mode-data #timeline-table #table-body tr.xv-dl-chon > td:not(.week-cell) { background: transparent !important; } }

/* ===== Nhãn nhỏ "Chỉ màn Dữ liệu" ở mục menu Cột (dùng cho mục Ưu tiên) ===== */
.xv-dl-tc-nhan { display: inline-flex; align-items: center; height: 17px; margin-left: 7px; padding: 0 6px; border-radius: 5px; background: #e7efec; color: #14463c; font-size: 10px; font-weight: 700; vertical-align: 1px; }
body.dark-mode .xv-dl-tc-nhan { background: rgba(52, 211, 153, 0.14); color: var(--xv-d1, #34d399); }
.xv-dl-tc-muc:focus-visible { outline: 2px solid var(--xv-c1, #20564c); outline-offset: -2px; }

/* Cột Phụ trách hẹp (dưới ~118px): chỉ còn avatar, tên nằm trong chú thích; tiêu đề cột chỉ còn biểu tượng */
body.view-mode-data.xv-dl-pt-gon #table-body .assignee-pill .assignee-name, body.view-mode-data.xv-dl-pt-gon #table-body .assignee-pill .assignee-clear { display: none !important; }
html body.view-mode-data.xv-dl-pt-gon #timeline-table thead th.col-assignee .th-sort-wrap { display: none; }

/* Cột có nội dung cố định: ẩn tay nắm kéo đổi độ rộng */
body.view-mode-data th.col-date .xv-cot-keo, body.view-mode-data th.col-days .xv-cot-keo, body.view-mode-data th.col-status .xv-cot-keo, body.view-mode-data th.col-progress .xv-cot-keo { display: none !important; }

/* ===== Cột Ưu tiên (du-lieu.js chèn khi vào màn; du-lieu.js xếp ngay sau Hạng mục): 4 mức Gấp, Cao, Trung bình, Thấp ===== */
/* Mỗi mức là một lá cờ màu (Thấp chỉ có viền). Tên mức hiện khi rê chuột hoặc có tiêu điểm; bấm mở hộp chọn mức (hộp có tên). */
body.view-mode-data { --w-uutien: 44px; --xv-uu-gap: #d93f35; --xv-uu-cao: #f08c0f; --xv-uu-tb: #1f6feb; --xv-uu-thap: #6b7280; }
html body.view-mode-data #timeline-table thead th.col-uutien, html body.view-mode-data #timeline-table #table-body td.col-uutien { width: var(--w-uutien); min-width: var(--w-uutien); max-width: var(--w-uutien); box-sizing: border-box; }
html body.view-mode-data #timeline-table thead th.col-uutien { text-align: left !important; padding-left: 10px !important; }
body.view-mode-data #table-body td.col-uutien { padding: 0 6px !important; overflow: visible; vertical-align: middle; position: relative; }
body.view-mode-data th.col-uutien .xv-cot-keo { display: none; }
.xv-dl-uu-o { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #64748b; font: 500 12px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.xv-dl-uu-o:hover, .xv-dl-uu-o:focus-visible, .xv-dl-uu-o[aria-expanded="true"] { background: rgba(100, 116, 139, 0.12); }
.xv-dl-uu-o:focus-visible { outline: 2px solid var(--xv-c1, #20564c); outline-offset: -2px; }
.xv-dl-uu-o:empty::before { content: "+"; font-size: 15px; opacity: 0; }
#table-body tr.sub-task:hover .xv-dl-uu-o:empty::before, .xv-dl-uu-o:focus-visible:empty::before { opacity: .55; }
.xv-dl-uu-co { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--xv-uu-thap); }
.xv-dl-uu-co .xv-dl-co { display: block; }
.xv-dl-co-can { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.xv-dl-co-la { fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.xv-dl-uu-co.m-thap .xv-dl-co-la { fill: none; }
.xv-dl-uu-co.m-gap { color: var(--xv-uu-gap); }
.xv-dl-uu-co.m-cao { color: var(--xv-uu-cao); }
.xv-dl-uu-co.m-tb { color: var(--xv-uu-tb); }
.xv-dl-uu-co.m-thap { color: var(--xv-uu-thap); }
.xv-dl-uu-ten { display: none; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); z-index: 30; align-items: center; height: 20px; padding: 0 8px; border-radius: 5px; font: 600 11px/1 'Inter', system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgba(15, 26, 24, 0.14); pointer-events: none; }
.xv-dl-uu-o:hover:not([aria-expanded="true"]) .xv-dl-uu-ten, .xv-dl-uu-o:focus-visible:not([aria-expanded="true"]) .xv-dl-uu-ten { display: inline-flex; }
.xv-dl-uu-ten.m-gap { background: #fde8e6; color: #b4281e; }
.xv-dl-uu-ten.m-cao { background: #fff0d6; color: #9a5b00; }
.xv-dl-uu-ten.m-tb { background: #e1ecff; color: #1a4fa8; }
.xv-dl-uu-ten.m-thap { background: #f1f5f9; color: #475569; }
.xv-dl-uu-hop { width: 190px; }
.xv-dl-uu-hop .xv-dl-hl-muc.dang { background: #f1f5f3; font-weight: 700; }
.xv-dl-hl-muc .xv-dl-uu-co { width: 16px; height: 16px; }
body.perm-locked td.col-uutien .xv-dl-uu-o, body.perm-update-progress td.col-uutien .xv-dl-uu-o { cursor: default; pointer-events: none; }
body.view-mode-data #table-body tr.xv-dl-co-chk > td.col-uutien { padding-top: 0 !important; }
body.view-mode-data #table-body tr.xv-dl-co-chk td.col-uutien .xv-dl-uu-o { height: 36px !important; min-height: 0 !important; }
body.view-mode-data.xv-dl-gon #table-body tr.xv-dl-co-chk td.col-uutien .xv-dl-uu-o { height: 30px !important; }
body.dark-mode .xv-dl-uu-ten.m-gap { background: rgba(248, 113, 113, 0.2); color: #fca5a5; }
body.dark-mode .xv-dl-uu-ten.m-cao { background: rgba(251, 146, 60, 0.2); color: #fdba74; }
body.dark-mode .xv-dl-uu-ten.m-tb { background: rgba(96, 165, 250, 0.2); color: #93c5fd; }
body.dark-mode .xv-dl-uu-ten.m-thap { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
body.dark-mode .xv-dl-uu-hop .xv-dl-hl-muc.dang { background: var(--xv-s4, #1f3a34); }
@media print { th.col-uutien, td.col-uutien { display: none !important; } }

/* Huy hiệu 3/5 cạnh tên việc không còn: tiêu đề thẻ checklist (mũi tên, số đạt/tổng) đã là nút xổ hoặc thu gọn */
body.view-mode-data #table-body .chk-badge { display: none !important; }
/* Số ngày trễ dưới ngày kết thúc của việc đang chậm (du-lieu.js: veTre) */
.xv-dl-tre { display: none; }
body.view-mode-data #table-body td.col-date-end { position: relative; }
body.view-mode-data #table-body tr.xv-dl-co-tre td.col-date-end .display-date { transform: translateY(-6px); }
body.view-mode-data #table-body tr.xv-dl-co-tre .xv-dl-tre { display: block; position: absolute; left: 0; right: 0; top: 22px; text-align: center; font: 600 10px/1 'Inter', system-ui, sans-serif; color: #b45309; white-space: nowrap; pointer-events: none; }
body.view-mode-data.xv-dl-gon #table-body tr.xv-dl-co-tre td.col-date-end .display-date { transform: translateY(-5px); }
body.view-mode-data.xv-dl-gon #table-body tr.xv-dl-co-tre .xv-dl-tre { top: 19px; }
body.dark-mode.view-mode-data #table-body tr.xv-dl-co-tre .xv-dl-tre { color: #fb923c; }
@media print { .xv-dl-tre { display: none !important; } }

/* ===== Tiêu đề cột có biểu tượng kiểu Notion (vẽ bằng CSS, chỉ màn Dữ liệu) ===== */
body.view-mode-data #timeline-table thead th .th-sort-wrap::before, body.view-mode-data #timeline-table thead th.col-note::before { content: ""; display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; opacity: .78; -webkit-mask: var(--xv-ic) center / contain no-repeat; mask: var(--xv-ic) center / contain no-repeat; }
body.view-mode-data #th-task { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207V4h16v3M9%2020h6M12%204v16%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #th-uutien { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022V4M5%204h12l-2%204%202%204H5%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #th-assignee { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c.8-4%204-6%208-6s7.2%202%208%206%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #th-status { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.5%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #th-col-progress { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-9-9%22%2F%3E%3Cpath%20d%3D%22M12%203v9h9%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #th-date-start { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #th-days { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3.5%202%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #th-date-end { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4M9%2015.5l2.2%202.2%204-4.2%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #th-nhan { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.6%2013.4l-7.2%207.2a2%202%200%200%201-2.8%200L2.5%2012.5V2.5h10l8.1%208.1a2%202%200%200%201%200%202.8z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221.2%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }
body.view-mode-data #month-header-row > th.col-note { --xv-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h10%22%2F%3E%3C%2Fsvg%3E"); }
/* Cột hẹp chỉ để biểu tượng ở tiêu đề (tên nằm trong chú thích): Ưu tiên */
body.view-mode-data #th-uutien .th-sort-wrap > span:first-child { display: none; }
body.view-mode-data #th-uutien .th-sort-wrap::before { margin-right: 2px; }
body.view-mode-data th#th-uutien { text-align: left; }
/* Nút Cột ở thanh công cụ không dùng ở màn Dữ liệu: bảng tùy chỉnh cột mở từ biểu tượng ở góc trái hàng tiêu đề (du-lieu.js: moBangCot) */
body.view-mode-data #btn-column-visibility { display: none !important; }
/* Đường kẻ đậm kiểu Timeline (viền phải cột % kèm bóng) chỉ đúng khi % là cột cố định cuối trước lịch. Ở màn Dữ liệu cột % nằm giữa bảng nên trả về đường kẻ thường;
   đường phân cách đậm chuyển thành viền trái của cột Ghi chú (ngoài cùng bên phải). Dải :not(.xv-*) chỉ để nâng độ ưu tiên hơn luật tối của Timeline. */
html body.view-mode-data #timeline-table thead th.col-progress, html body.view-mode-data #timeline-table #table-body tr > td.col-progress { border-right-color: #eef1f5 !important; box-shadow: none !important; }
html body.dark-mode.view-mode-data:not(.xv-a):not(.xv-b):not(.xv-c):not(.xv-d) #timeline-table thead th.col-progress, html body.dark-mode.view-mode-data:not(.xv-a):not(.xv-b):not(.xv-c):not(.xv-d) #timeline-table #table-body tr > td.col-progress { border-right-color: #172824 !important; box-shadow: none !important; }
html body.view-mode-data #timeline-table thead th.col-note, html body.view-mode-data #timeline-table #table-body tr > td.col-note { border-left-color: #cfe4dc !important; box-shadow: inset 5px 0 7px -5px rgba(15, 23, 42, 0.10) !important; }
html body.dark-mode.view-mode-data:not(.xv-a):not(.xv-b):not(.xv-c):not(.xv-d) #timeline-table thead th.col-note, html body.dark-mode.view-mode-data:not(.xv-a):not(.xv-b):not(.xv-c):not(.xv-d) #timeline-table #table-body tr > td.col-note { border-left-color: #2f4a44 !important; box-shadow: inset 3px 0 6px -2px rgba(0, 0, 0, 0.45) !important; }

/* ===== Tiêu đề cột: không sắp xếp khi bấm (du-lieu.js chặn); kéo mép đổi độ rộng, kéo cả tiêu đề đổi vị trí ===== */
body.view-mode-data #timeline-table .sort-icon { display: none !important; }
body.view-mode-data #month-header-row > th.col-uutien, body.view-mode-data #month-header-row > th.col-assignee, body.view-mode-data #month-header-row > th.col-status, body.view-mode-data #month-header-row > th.col-progress, body.view-mode-data #month-header-row > th.col-date-start, body.view-mode-data #month-header-row > th.col-days, body.view-mode-data #month-header-row > th.col-date-end, body.view-mode-data #month-header-row > th.col-nhan, body.view-mode-data #month-header-row > th.col-note { cursor: grab; }
body.view-mode-data #month-header-row > th.col-task { cursor: default; }
body.view-mode-data #month-header-row > th .xv-cot-keo { cursor: col-resize; }
.xv-dl-th-di { opacity: .45; }
body.xv-dl-keo-cot, body.xv-dl-keo-cot * { cursor: grabbing !important; user-select: none !important; }
.xv-dl-vach-cot { position: fixed; z-index: 1000003; width: 2px; border-radius: 1px; background: var(--xv-c1, #20564c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); pointer-events: none; }
body.dark-mode .xv-dl-vach-cot { background: var(--xv-d1, #34d399); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
@media print { .xv-dl-vach-cot { display: none !important; } }