/* Tay nắm kéo đổi độ rộng cột (Dữ liệu và Timeline mở rộng, dùng chung; luật riêng của Dữ liệu ở du-lieu.css): rê chuột hiện vạch, bấm đúp để về độ rộng mặc định */
        .xv-cot-keo { display: none; }
        body:not(.split-pane-collapsed) .xv-cot-keo { display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 9px; cursor: col-resize; z-index: 6; touch-action: none; outline: none; }
        /* Ở Timeline: cột Hạng mục đổi bằng vạch chia, cột % nằm cạnh vạch chia và cột Phụ trách là ô tròn nhỏ nên không có tay nắm riêng */
        body:not(.view-mode-data) th.col-task .xv-cot-keo, body:not(.view-mode-data) th.col-assignee .xv-cot-keo, body:not(.view-mode-data) th.col-progress .xv-cot-keo { display: none; }
        .xv-cot-keo::after { content: ""; position: absolute; top: 5px; bottom: 5px; right: 3px; width: 2px; border-radius: 1px; background: transparent; }
        .xv-cot-keo:hover::after, .xv-cot-keo:focus-visible::after, body.xv-cot-dang-keo .xv-cot-keo.dang::after { background: var(--xv-c1, #20564c); }
        body.dark-mode .xv-cot-keo:hover::after, body.dark-mode .xv-cot-keo:focus-visible::after, body.dark-mode.xv-cot-dang-keo .xv-cot-keo.dang::after { background: var(--xv-d1, #34d399); }
        body.xv-cot-dang-keo { cursor: col-resize; user-select: none; }
        @media print { .xv-cot-keo { display: none !important; } }
        /* Timeline thu gọn chỉ còn vài cột nên nút Cột không có tác dụng: ẩn cho khỏi nhầm */
        body.split-pane-collapsed:not(.view-mode-data):not(.view-mode-kanban):not(.view-mode-report):not(.view-mode-materials) #wrap-column-visibility { display: none; }
        /* Nút tròn thu gọn / mở rộng bảng nằm trên vạch chia giữa bảng và lịch (vị trí do xvDatNutTachBang tính) */
        .gantt-split-toggle { position: fixed; z-index: 45; width: 22px; height: 22px; padding: 0; display: none; align-items: center; justify-content: center; border: 1px solid var(--border-color, #cfd8d4); border-radius: 50%; background: var(--card-bg, #ffffff); color: var(--xv-c1, #20564c); box-shadow: 0 2px 8px rgba(17, 39, 35, 0.18); cursor: pointer; transition: opacity .12s ease, transform .12s ease, background .12s ease; }
        .gantt-split-toggle.hien { display: flex; }
        /* Nút luôn hiện, nằm gọn trong ô tiêu đề cột % (không đè lên lịch); chỉ ẩn trong lúc kéo vạch chia */
        body.gantt-master-resizing .gantt-split-toggle { opacity: 0; pointer-events: none; }
        .gantt-split-toggle:hover, .gantt-split-toggle:focus-visible { background: var(--xv-c1, #20564c); color: #ffffff; transform: scale(1.1); outline: none; }
        body.dark-mode .gantt-split-toggle { color: var(--xv-d1, #34d399); }
        body.dark-mode .gantt-split-toggle:hover, body.dark-mode .gantt-split-toggle:focus-visible { background: var(--xv-d1, #34d399); color: #0f172a; }
        .gantt-split-toggle.moi::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--xv-c1, #20564c); animation: xvSplitNhay 1.8s ease-out 3; pointer-events: none; }
        @keyframes xvSplitNhay { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
        @media (prefers-reduced-motion: reduce) { .gantt-split-toggle.moi::after { animation: none; } }
        @media print { .gantt-split-toggle { display: none !important; } }
        /* ===== SPLIT-PANE MASTER RESIZER GIỮA BẢNG VÀ GANTT TIMELINE ===== */
        .gantt-master-resizer {
            position: absolute;
            top: 0;
            right: -5px;
            bottom: 0;
            width: 12px;
            cursor: col-resize;
            z-index: 30;
            background: transparent;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ===== ĐƯỜNG GIÓNG DỌC TOÀN BỘ CHIỀU CAO BẢNG (HEADER + TẤT CẢ DÒNG) KHI HOVER HOẶC KÉO RESIZER ===== */
        body.gantt-resizer-active th#th-col-progress,
        body.gantt-resizer-active td.col-progress,
        body.gantt-master-resizing th#th-col-progress,
        body.gantt-master-resizing td.col-progress,
        #timeline-table:has(.gantt-master-resizer:hover) th#th-col-progress,
        #timeline-table:has(.gantt-master-resizer:hover) td.col-progress {
            border-right: 2px solid var(--brand-primary, #10b981) !important;
            box-shadow: 3px 0 8px rgba(16, 185, 129, 0.35) !important;
        }
        body.dark-mode.gantt-resizer-active th#th-col-progress,
        body.dark-mode.gantt-resizer-active td.col-progress,
        body.dark-mode.gantt-master-resizing th#th-col-progress,
        body.dark-mode.gantt-master-resizing td.col-progress,
        body.dark-mode #timeline-table:has(.gantt-master-resizer:hover) th#th-col-progress,
        body.dark-mode #timeline-table:has(.gantt-master-resizer:hover) td.col-progress {
            border-right: 2px solid var(--xv-d1, #34d399) !important;
            box-shadow: 3px 0 8px rgba(var(--xv-d1-rgb, 52,211,153), 0.4) !important;
        }
        th#th-col-progress {
            overflow: hidden !important;
            padding-left: 2px !important;
            padding-right: 14px !important;
            text-align: center !important;
        }
        .th-progress-label {
            display: inline-block;
            font-size: 13px;
            font-weight: 800;
            color: var(--text-color, #1e293b);
            letter-spacing: 0.5px;
            user-select: none;
        }

        /* ===== CHẾ ĐỘ THU GỌN THÔNG TIN ĐỂ TẬP TRUNG GANTT TIMELINE =====
           Bộ cột cố định: Hạng mục, cột sửa nhanh, Phụ trách, Bắt đầu, Ngày, Kết thúc, Trạng thái. Ẩn Ghi chú và %.
           Ô tiêu đề % giữ lại rộng 0 để thanh kéo chia bảng (nằm trong ô này) vẫn ở đúng mép phải của Trạng thái. */
        body.split-pane-collapsed {
            --w-task: clamp(240px, 16vw, 320px) !important;
            --w-status: 88px !important; /* thu gọn luôn dùng độ rộng mặc định, không theo độ rộng đã kéo ở Timeline mở rộng */
            --w-note: 0px !important;
            --w-progress: 0px !important;
        }
        body.split-pane-collapsed th.col-note,
        body.split-pane-collapsed td.col-note,
        body.split-pane-collapsed th.col-progress,
        body.split-pane-collapsed td.col-progress {
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            padding: 0 !important;
            border-left: none !important;
            border-right: none !important;
            overflow: hidden !important;
            font-size: 0 !important;
            line-height: 0 !important;
            white-space: nowrap !important;
        }
        body.split-pane-collapsed th.col-note *,
        body.split-pane-collapsed td.col-note *,
        body.split-pane-collapsed th.col-progress .th-sort-wrap,
        body.split-pane-collapsed td.col-progress * {
            display: none !important;
        }
        body.split-pane-collapsed #timeline-table th#th-col-progress { padding: 0 !important; border: 0 !important; overflow: visible !important; box-shadow: none !important; background: transparent !important; }
        body.split-pane-collapsed #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-progress { padding: 0 !important; border: 0 !important; box-shadow: none !important; }
        /* Ghi chú đang bật mà bảng thu gọn: ô ghi chú rộng 0 nhưng chữ bên trong vẫn xuống dòng từng ký tự làm hàng cao vọt; ẩn hẳn phần chữ */
        html body.split-pane-collapsed #timeline-table td.col-note .note-edit { display: none !important; }
        html body.split-pane-collapsed #timeline-table td.col-note { height: 0; line-height: 0; }
        /* Trạng thái là cột cuối của bảng thu gọn: vạch chia và bóng như khi tắt cột % */
        body.split-pane-collapsed th.col-status,
        body.split-pane-collapsed td.col-status {
            border-right: 1px solid var(--border-color) !important;
            box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.10) !important;
        }
        body.split-pane-collapsed.dark-mode th.col-status,
        body.split-pane-collapsed.dark-mode td.col-status {
            box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.45) !important;
        }

        /* ===== CHẾ ĐỘ TOÀN MÀN HÌNH / FOCUS GANTT (ZEN MODE) ===== */
        body.fullscreen-gantt-active {
            overflow: hidden !important;
        }
        body.fullscreen-gantt-active .app-topbar-header,
        body.fullscreen-gantt-active #system-announcement-banner,
        body.fullscreen-gantt-active #pc-material-alert-banner,
        body.fullscreen-gantt-active #control-panel-sentinel,
        body.fullscreen-gantt-active #welcome-banner-wrapper {
            display: none !important;
        }
        body.fullscreen-gantt-active .container {
            margin: 0 !important;
            max-width: 100vw !important;
            width: 100vw !important;
            height: 100vh !important;
            padding: 6px 14px !important;
            box-sizing: border-box !important;
            border-radius: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            background: var(--bg-color) !important;
        }
        body.fullscreen-gantt-active #table-wrapper {
            flex: 1 1 auto !important;
            max-height: calc(100vh - 105px) !important;
            height: auto !important;
            border-radius: 6px !important;
        }
        #fullscreen-exit-bar {
            display: none;
            position: fixed;
            top: 10px;
            right: 18px;
            z-index: 999999;
            align-items: center;
            gap: 10px;
            background: rgba(17, 39, 35, 0.92);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(52, 211, 153, 0.35);
            border-radius: 20px;
            padding: 4px 10px 4px 14px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        body.fullscreen-gantt-active #fullscreen-exit-bar {
            display: flex !important;
        }
        #fullscreen-exit-bar #btn-exit-fullscreen {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.25);
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.15s;
        }
        #fullscreen-exit-bar #btn-exit-fullscreen:hover {
            background: rgba(239, 68, 68, 0.85);
            border-color: #ef4444;
        }

/* [GIAI ĐOẠN 2] CỐ ĐỊNH 2 CHIỀU (FREEZE PANES NGANG & DỌC) TRÊN PC — ĐỒNG BỘ 100VH 1 THANH CUỘN DUY NHẤT */
        @media screen and (min-width: 761px) {
            html, body {
                overflow-y: hidden !important;
            }
            #table-wrapper {
                position: relative;
                overflow: auto !important;
                max-height: calc(100vh - 275px);
                min-height: 250px;
                scrollbar-width: thin;
                border-left: none !important;
                border-right: none !important;
                border-radius: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            body.dash-collapsed #table-wrapper {
                max-height: calc(100vh - 138px);
            }
            body.cp-thu-gon #table-wrapper {
                max-height: calc(100vh - 225px);
            }
            body.cp-thu-gon.dash-collapsed #table-wrapper {
                max-height: calc(100vh - 88px);
            }
            table#timeline-table {
                table-layout: fixed !important;
                border-collapse: separate !important;
                border-spacing: 0 !important;
            }
            /* Ghim dọc hàng tháng và hàng ngày trên đỉnh bảng khi cuộn xuống */
            #month-header-row th {
                position: sticky !important;
                top: 0 !important;
                z-index: 12 !important;
                background-color: var(--highlight) !important;
            }
            #week-header-row th {
                position: sticky !important;
                top: 24px !important;
                z-index: 11 !important;
                background-color: var(--highlight) !important;
            }
            /* Các cột tiêu đề bên trái (rowspan 2): Ghim cả 2 chiều (Top 0 và Left) */
            #month-header-row th.col-dep { top: 0 !important; left: 0 !important; z-index: 30 !important; }
            #month-header-row th.col-task { top: 0 !important; left: var(--w-dep) !important; z-index: 29 !important; }
            #month-header-row th.col-note { top: 0 !important; left: calc(var(--w-dep) + var(--w-task)) !important; z-index: 29 !important; }
            #month-header-row th.col-assignee { top: 0 !important; left: calc(var(--w-dep) + var(--w-task) + var(--w-note)) !important; z-index: 29 !important; }
            #month-header-row th.col-nhan { top: 0 !important; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee)) !important; z-index: 29 !important; }
            #month-header-row th.col-date-start { top: 0 !important; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee) + var(--w-nhan)) !important; z-index: 29 !important; }
            #month-header-row th.col-days { top: 0 !important; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee) + var(--w-nhan) + var(--w-date)) !important; z-index: 29 !important; }
            #month-header-row th.col-date-end { top: 0 !important; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee) + var(--w-nhan) + var(--w-date) + var(--w-days)) !important; z-index: 29 !important; }
            #month-header-row th.col-status { top: 0 !important; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee) + var(--w-nhan) + (var(--w-date) * 2) + var(--w-days)) !important; z-index: 29 !important; }
            #month-header-row th.col-progress { top: 0 !important; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee) + var(--w-nhan) + (var(--w-date) * 2) + var(--w-days) + var(--w-status)) !important; z-index: 29 !important; }
        }

        .btn-zoom-mode { transition: all 0.15s ease; outline: none; }
        .btn-zoom-mode:hover { filter: brightness(0.96); }
        body.dark-mode .btn-zoom-mode.active { background: var(--xv-s4, #172825) !important; color: var(--xv-d1, #34d399) !important; }

        tr.main-task td.col-status select { display: none !important; }
        tr.main-task td.col-dep select { display: none !important; }
        
        .resizer-handle { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 10; background: transparent; touch-action: none; }
        td.week-cell.active-main, td.week-cell.active-sub { touch-action: none; }
        .resizer-handle:hover { background: rgba(128, 128, 128, 0.5); }

        input, select, button { font-family: inherit; font-size: 11px; box-sizing: border-box; outline: none;}
        input { text-align: center; width: 95%; margin-top: 2px; border: 1px solid var(--border-color); background: transparent; color: var(--text-color); padding: 2px;}
        input:read-only { border: none; font-weight: bold; background: transparent; }
        
        /* NÚT ICON CHO CỘT PHỤ THUỘC: Bỏ viền ngoài lúc nghỉ, chỉ để icon; hover bo viền nét đứt */
        .dep-trigger-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 22px;
            height: 20px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent !important;
            border: 1px dashed transparent !important;
            border-radius: 5px;
            box-sizing: border-box;
            pointer-events: none;
            transition: all 0.15s ease;
            box-shadow: none !important;
        }
        td.col-dep:hover .dep-trigger-btn {
            border: 1px dashed #cbd5e1 !important;
            background: #f1f5f9 !important;
            box-shadow: none !important;
            transform: translate(-50%, -50%);
        }
        td.col-dep:hover .dep-trigger-btn svg {
            stroke: #475569;
        }

        /* TRẠNG THÁI CÓ PHỤ THUỘC: Xong mới làm (FS) & Cuốn chiếu (SS) */
        .dep-trigger-btn.is-linked {
            background: transparent !important;
            border: 1px dashed transparent !important;
            box-shadow: none !important;
        }
        .dep-trigger-btn.is-linked svg {
            stroke: #2563eb !important;
        }
        td.col-dep:hover .dep-trigger-btn.is-linked {
            background: #f1f5f9 !important;
            border: 1px dashed #cbd5e1 !important;
            box-shadow: none !important;
            transform: translate(-50%, -50%);
        }
        td.col-dep:hover .dep-trigger-btn.is-linked svg {
            stroke: #2563eb !important;
        }

        /* CUỐN CHIẾU SONG SONG (SS - HUY HIỆU TÍM TIA SÉT) */
        .dep-trigger-btn.is-linked.is-ss {
            background: transparent !important;
            border: 1px dashed transparent !important;
            box-shadow: none !important;
        }
        .dep-trigger-btn.is-linked.is-ss svg {
            stroke: #7c3aed !important;
            fill: #7c3aed !important;
        }
        td.col-dep:hover .dep-trigger-btn.is-linked.is-ss {
            background: #f1f5f9 !important;
            border: 1px dashed #cbd5e1 !important;
            box-shadow: none !important;
            transform: translate(-50%, -50%);
        }
        td.col-dep:hover .dep-trigger-btn.is-linked.is-ss svg {
            stroke: #7c3aed !important;
            fill: #7c3aed !important;
        }
        body.dark-mode .dep-trigger-btn.is-linked.is-ss {
            background: transparent !important;
            border: 1px dashed transparent !important;
            box-shadow: none !important;
        }
        body.dark-mode .dep-trigger-btn.is-linked.is-ss svg {
            stroke: #d8b4fe !important;
            fill: #d8b4fe !important;
        }
        /* GỐI ĐẦU (lead — bắt đầu trước khi việc trước xong N ngày): huy hiệu hổ phách, hai thanh chồng nhau */
        .dep-trigger-btn.is-linked.is-lead {
            background: transparent !important;
            border: 1px dashed transparent !important;
            box-shadow: none !important;
        }
        .dep-trigger-btn.is-linked.is-lead svg { stroke: #b45309 !important; fill: none !important; }
        td.col-dep:hover .dep-trigger-btn.is-linked.is-lead {
            background: #f1f5f9 !important;
            border: 1px dashed #cbd5e1 !important;
            box-shadow: none !important;
            transform: translate(-50%, -50%);
        }
        td.col-dep:hover .dep-trigger-btn.is-linked.is-lead svg {
            stroke: #b45309 !important;
            fill: none !important;
        }
        body.dark-mode .dep-trigger-btn.is-linked.is-lead { background: transparent !important; border: 1px dashed transparent !important; box-shadow: none !important; }
        body.dark-mode .dep-trigger-btn.is-linked.is-lead svg { stroke: #fcd34d !important; }

        /* Hạng mục chính dùng ô này để thu gọn, không tạo liên kết phụ thuộc. */
        tr.main-task td.col-dep .dep-trigger-btn {
            display: none !important;
        }
        tr.main-task td.col-dep {
            background-color: transparent !important;
        }

        /* ẨN SELECT TÀNG HÌNH CŨ - DÙNG POPUP CHUYÊN DỤNG THÔNG MINH */
        .dep-select {
            display: none !important;
        }

        /* ================= TỐI ƯU HEADER TOP GỘP THEO CONCEPT ================= */
        .app-topbar-header {
            background: linear-gradient(135deg, var(--xv-top-a, #10302a) 0%, var(--xv-top-b, #17433a) 100%) !important;
            border: none !important;
            border-bottom: 1px solid var(--xv-top-bd, #235149) !important;
            color: #ffffff;
            padding: 6px 16px !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            gap: 12px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
            margin: 0 !important;
            border-radius: 0 !important;
            width: 100% !important;
            box-sizing: border-box !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 600 !important;
        }
        .topbar-project-capsule {
            display: flex;
            align-items: center;
            gap: 2px;
            min-width: 0;
            background: rgba(0,0,0,0.26);
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 10px;
            padding: 2px;
            transition: all 0.2s ease;
        }
        .topbar-project-capsule:hover {
            border-color: rgba(255,255,255,0.20);
            background: rgba(0,0,0,0.32);
        }
        .topbar-project-capsule select#project-selector {
            appearance: none;
            -webkit-appearance: none;
            background: transparent !important;
            color: #ffffff !important;
            border: none !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            outline: none !important;
            cursor: pointer;
            padding: 2px 6px;
            min-width: 140px;
            max-width: min(340px, 30vw);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .topbar-project-capsule select#project-selector option {
            background: var(--card-bg, #ffffff) !important;
            color: var(--text-color, #1e293b) !important;
        }
        body.dark-mode .topbar-project-capsule select#project-selector option {
            background: var(--xv-top-a, #112723) !important;
            color: #ffffff !important;
        }
        .topbar-brand-item img { height: 27px; width: auto; }
        @media screen and (max-width: 760px) { .topbar-brand-item img { height: 24px; } }

        .topbar-icon-btn {
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background: none;
            border: none;
            color: #cfe2db;
            cursor: pointer;
            transition: color .18s ease, background .18s ease;
            padding: 0;
            flex-shrink: 0;
        }
        .topbar-icon-btn:hover {
            background: rgba(255,255,255,0.12);
            color: #ffffff;
        }
        /* CÁC TAB CHUYỂN CHẾ ĐỘ XEM TRÊN TOPBAR (Gantt, Kanban, Báo cáo) */
        .topbar-mode-tabs {
            display: inline-flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.24);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 9px;
            padding: 2px;
            gap: 2px;
        }
        .topbar-mode-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 11px;
            font-size: 11.5px;
            font-weight: 700;
            border-radius: 7px;
            border: none;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s ease;
            background: transparent;
            color: #cfe3dc;
            line-height: 1.2;
        }
        .topbar-mode-tab:hover {
            background: rgba(255, 255, 255, 0.10);
            color: #ffffff;
        }
        .topbar-mode-tab.active {
            background: #ffffff;
            color: var(--xv-top-a, #10302a);
            font-weight: 800;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
            cursor: default;
        }
        .topbar-mode-tab.active:hover {
            background: #ffffff;
            color: var(--xv-top-a, #10302a);
        }
        .topbar-mode-tab svg {
            flex-shrink: 0;
        }

        /* CỤM CHỌN CHẾ ĐỘ XEM & KHUNG NHÌN BIỂU ĐỒ TRÊN TOOLBAR */
        .toolbar-view-capsule {
            display: inline-flex;
            align-items: center;
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 2px;
            gap: 2px;
            box-sizing: border-box;
        }
        .toolbar-view-capsule .btn-zoom-mode {
            padding: 4px 9px;
            font-size: 11px;
            font-weight: 700;
            border-radius: 4px;
            border: none;
            background: transparent;
            color: var(--note-color);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s ease;
            line-height: 1.2;
        }
        .toolbar-view-capsule .btn-zoom-mode:hover {
            color: var(--text-color);
            background: var(--highlight);
        }
        .toolbar-view-capsule .btn-zoom-mode.active {
            background: var(--card-bg);
            color: var(--text-color);
            font-weight: 800;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
        }
        body.dark-mode .toolbar-view-capsule .btn-zoom-mode.active {
            background: #273549;
            color: var(--xv-d1-text, #6ee7b7);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        .toolbar-capsule-divider {
            width: 1px;
            height: 14px;
            background: var(--border-color);
            margin: 0 1px;
            flex-shrink: 0;
        }
        .toolbar-view-capsule .btn-khungnhin-trigger {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 7px;
            border-radius: 4px;
            background: transparent;
            border: none;
            color: var(--text-color);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s ease;
            line-height: 1.2;
        }
        .toolbar-view-capsule .btn-khungnhin-trigger:hover {
            background: var(--highlight);
            color: var(--text-color);
        }
        .topbar-btn-share {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 10px !important;
            background: rgba(255,255,255,0.14) !important;
            border: 1px solid rgba(255,255,255,0.22) !important;
            font-size: 11.5px !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s ease;
        }
        .topbar-btn-share:hover {
            background: rgba(255,255,255,0.22) !important;
        }
        .topbar-avatar-badge {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--brand-accent, #de7228) !important;
            border: none !important;
            font-weight: 800;
            font-size: 11px;
            color: #ffffff !important;
            text-transform: uppercase;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .topbar-avatar-badge:hover {
            transform: scale(1.06);
            box-shadow: 0 0 8px rgba(222, 114, 40, 0.4);
        }
        /* Cửa sổ PC hẹp (~761–1290px, ví dụ laptop nhỏ hoặc cửa sổ không phóng to): nhóm nút bên phải rộng ~910px
           không co được nên đẩy nhóm logo + tên công trình bên trái xuống còn ~136px và chữ đè lên nhau. Thu gọn hai
           chỗ tốn chỗ nhất — nhãn các tab chế độ chưa chọn (vẫn có tooltip) và chữ trên huy hiệu bản miễn phí
           (vẫn còn biểu tượng + tooltip) — trả lại ~300px cho nhóm bên trái. */
        @media screen and (min-width: 761px) and (max-width: 1290px) {
            .topbar-mode-tab:not(.active) span { display: none; }
            .topbar-mode-tab:not(.active) { padding: 5px 9px; }
            #badge-free-tier { font-size: 0 !important; gap: 0 !important; padding: 5px 8px !important; }
        }
        @media screen and (max-width: 760px) {
            .topbar-project-capsule,
            .topbar-mode-tabs,
            .toolbar-view-capsule,
            .app-topbar-header .export-actions-dropdown,
            .topbar-vach {
                display: none !important;
            }
        }

/* Dark mode */
        body.dark-mode .dep-trigger-btn {
            border: 1px dashed transparent !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        body.dark-mode td.col-dep:hover .dep-trigger-btn {
            border: 1px dashed rgba(255, 255, 255, 0.22) !important;
            background: rgba(255, 255, 255, 0.08) !important;
            box-shadow: none !important;
            transform: translate(-50%, -50%);
        }
        body.dark-mode td.col-dep:hover .dep-trigger-btn svg {
            stroke: #cbd5e1;
        }
        body.dark-mode .dep-trigger-btn.is-linked {
            background: transparent !important;
            border: 1px dashed transparent !important;
            box-shadow: none !important;
        }
        body.dark-mode .dep-trigger-btn.is-linked svg {
            stroke: #93c5fd !important;
        }
        body.dark-mode td.col-dep:hover .dep-trigger-btn.is-linked {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px dashed rgba(255, 255, 255, 0.22) !important;
            box-shadow: none !important;
            transform: translate(-50%, -50%);
        }
        body.dark-mode td.col-dep:hover .dep-trigger-btn.is-linked svg {
            stroke: #93c5fd !important;
        }
        body.dark-mode td.col-dep:hover .dep-trigger-btn.is-linked.is-ss {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px dashed rgba(255, 255, 255, 0.22) !important;
            box-shadow: none !important;
            transform: translate(-50%, -50%);
        }
        body.dark-mode td.col-dep:hover .dep-trigger-btn.is-linked.is-ss svg {
            stroke: #d8b4fe !important;
            fill: #d8b4fe !important;
        }
        body.dark-mode td.col-dep:hover .dep-trigger-btn.is-linked.is-lead {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px dashed rgba(255, 255, 255, 0.22) !important;
            box-shadow: none !important;
            transform: translate(-50%, -50%);
        }
        body.dark-mode td.col-dep:hover .dep-trigger-btn.is-linked.is-lead svg {
            stroke: #fcd34d !important;
        }
        }
        .text-edit-field { display: block; width: 100%; text-align: left; border: none; font-size: 11px; outline: none; white-space: pre-wrap !important; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; padding: 2px 0; background: transparent; line-height: 1.35; color: var(--text-color);}
        .note-edit { font-style: italic; color: var(--note-color); text-align: center !important; display: inline-block !important; vertical-align: middle !important; line-height: 20px !important; min-height: 20px !important; width: 100% !important; white-space: pre-wrap !important; word-break: break-word !important; overflow-wrap: break-word !important; box-sizing: border-box !important; }

        .real-date { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
        .real-date::-webkit-calendar-picker-indicator { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
        .display-date { width: 100%; text-align: center; border: 1px dotted var(--border-color); padding: 2px; box-sizing: border-box; background: transparent; font-size: 11px; z-index: 1; position: relative; color: var(--text-color);}

        .btn-tbl-action { cursor: pointer; background-color: var(--bg-color); border: 1px solid var(--text-color); margin: 0; padding: 2px 4px; color: var(--text-color); font-weight: bold; transition: background-color 0.2s; font-size: 11px; flex-shrink: 0; border-radius: 4px !important;}
        .btn-tbl-action:hover { background-color: var(--text-color); color: var(--bg-color); }
        
        /* Gợi ý chuột phải — 2026-08-23 dời vào Ô TIÊU ĐỀ cột HẠNG MỤC.
           Trước nó là một dòng riêng ở chân bảng; nằm trong ô tiêu đề thì gọn hơn và ở
           ngay chỗ người dùng đang nhìn khi thao tác với cột đó. Chữ rút còn "Chuột phải
           để mở tùy chọn" — không liệt kê từng mục nữa vì menu còn đổi.
           Ô tiêu đề có text-transform:uppercase, font-weight:900 và cỡ 10px, nên phải
           đặt lại cả ba thứ đó, nếu không dòng gợi ý bị hoa hết và đậm như tiêu đề. */
        .bang-goi-y {
            display: block;
            margin-top: 3px;
            font-size: 11px;
            font-style: italic;
            font-weight: 500;
            text-transform: none;
            letter-spacing: 0.1px;
            color: var(--note-color);
            /* 0,8 kéo tương phản thực tế xuống dưới ngưỡng ở cỡ chữ này; 0,9 vẫn đạt. */
            opacity: 0.9;
            white-space: normal;
        }
        .bang-goi-y kbd {
            font-family: inherit;
            font-style: normal;
            font-weight: 800;
            opacity: 0.95;
        }
        /* Điện thoại không có chuột phải, mà bảng máy tính cũng ẩn ở đó rồi. */
        @media screen and (max-width: 760px) {
            .bang-goi-y { display: none !important; }
        }
        /* Điện thoại không có chuột phải, mà bảng máy tính cũng ẩn ở đó rồi. */
        @media screen and (max-width: 760px) {
            .bang-goi-y { display: none !important; }
        }

        /* === THÔNG BÁO CÁ NHÂN: BẢNG TRƯỢT BÊN PHẢI TRÊN MÁY TÍNH === */
        #notification-overlay {
            display: none; position: fixed; inset: 0; z-index: 9050;
            background: rgba(15, 23, 42, 0.34); backdrop-filter: blur(2px);
        }
        #notification-panel {
            position: fixed; top: 0; right: 0; z-index: 9051;
            width: 410px; max-width: 96vw; height: 100vh;
            display: flex; flex-direction: column;
            background: var(--card-bg); color: var(--text-color);
            border-left: 1px solid var(--border-color);
            box-shadow: -10px 0 35px rgba(15, 23, 42, 0.22);
            transform: translateX(105%);
            transition: transform 0.26s cubic-bezier(.32,1,.4,1);
        }
        #notification-panel.is-open { transform: translateX(0); }
        /* Ba bảng trượt từ phải khi đang đóng nằm ngoài màn hình nhưng bóng đổ vẫn lọt vào mép phải: chỉ đổ bóng khi đang mở */
        #notification-panel:not(.is-open), #side-add-panel:not(.is-open), #activity-log-panel:not(.is-open) { box-shadow: none !important; }
        .ntf-header {
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 16px 18px; flex-shrink: 0;
            color: #fff; background: linear-gradient(135deg, var(--xv-top-a, #112723) 0%, var(--xv-top-b, #1a3c36) 100%);
            border-bottom: 1px solid var(--xv-top-bd, #235149);
        }
        .ntf-header-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
        .ntf-header-title h3 { margin: 0; padding: 0; border: 0; color: #fff; font-size: 15px; letter-spacing: 0; }
        .ntf-header-actions { display: flex; align-items: center; gap: 7px; }
        .ntf-head-btn {
            min-height: 30px; padding: 5px 8px; border-radius: 6px; cursor: pointer;
            border: 1px solid rgba(255,255,255,0.2); color: #e2e8f0;
            background: rgba(255,255,255,0.08); font-size: 11px; font-weight: 700;
        }
        .ntf-head-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
        #notification-list { flex: 1; overflow-y: auto; padding: 8px 12px 18px; background: var(--bg-color); }

        /* NHÓM GHIM "CẦN BẠN XỬ LÝ" */
        .ntf-pin-section { margin-bottom: 10px; }
        .ntf-pin-label {
            display: flex; align-items: center; justify-content: space-between;
            font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .07em;
            color: #a94d0c; text-transform: uppercase; padding: 6px 4px 6px;
        }
        body.dark-mode .ntf-pin-label { color: #fcd34d; }
        .ntf-pin-card {
            background: #fff8f3; border: 1px solid #fed7aa; border-radius: 12px;
            padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-sm);
            box-sizing: border-box; text-align: left;
        }
        .ntf-pin-card.is-danger { background: #fef2f2; border-color: #fecaca; }
        body.dark-mode .ntf-pin-card { background: rgba(251,146,60,.14); border-color: rgba(251,146,60,.35); }
        body.dark-mode .ntf-pin-card.is-danger { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.35); }
        .ntf-pin-title { font-size: 12.5px; font-weight: 800; color: #9a3412; margin-bottom: 3px; line-height: 1.35; }
        .ntf-pin-card.is-danger .ntf-pin-title { color: #b91c1c; }
        body.dark-mode .ntf-pin-title { color: #fed7aa; }
        body.dark-mode .ntf-pin-card.is-danger .ntf-pin-title { color: #fca5a5; }
        .ntf-pin-desc { font-size: 11px; color: #7c2d12; line-height: 1.45; margin-bottom: 10px; }
        .ntf-pin-card.is-danger .ntf-pin-desc { color: #991b1b; }
        body.dark-mode .ntf-pin-desc { color: #e7cdb4; }
        body.dark-mode .ntf-pin-card.is-danger .ntf-pin-desc { color: #fca5a5; }
        .ntf-pin-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .ntf-act-primary {
            background: var(--xv-c1, #20564c); color: #ffffff; border: none; border-radius: 8px;
            padding: 7px 12px; font-size: 11px; font-weight: 800; text-transform: uppercase;
            letter-spacing: .05em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
        }
        .ntf-act-primary:hover { opacity: .9; }
        body.dark-mode .ntf-act-primary { background: var(--xv-d1, #34d399); color: var(--xv-d1-on, #062a21); }
        .ntf-act-secondary {
            background: var(--card-bg); color: var(--text-color); border: 1px solid #cfdad7;
            border-radius: 8px; padding: 6px 11px; font-size: 11px; font-weight: 700; cursor: pointer;
        }
        .ntf-act-secondary:hover { border-color: var(--brand-primary); }
        body.dark-mode .ntf-act-secondary { background: transparent; border-color: rgba(255,255,255,.18); color: #cbd5e1; }

        /* CHIP LỌC TẤT CẢ / CHƯA ĐỌC */
        .ntf-filter-bar { display: flex; align-items: center; gap: 8px; padding: 6px 2px 10px; }
        .ntf-filter-chip {
            background: var(--card-bg); border: 1px solid #cfdad7; color: #3a4a46;
            border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 700;
            cursor: pointer; transition: all .15s ease;
        }
        .ntf-filter-chip:hover { border-color: var(--brand-primary); }
        .ntf-filter-chip.is-active { background: var(--xv-c1, #20564c); border-color: var(--xv-c1, #20564c); color: #ffffff; }
        body.dark-mode .ntf-filter-chip { background: transparent; border-color: rgba(255,255,255,.18); color: #cbd5e1; }
        body.dark-mode .ntf-filter-chip.is-active { background: var(--xv-d1, #34d399); border-color: var(--xv-d1, #34d399); color: var(--xv-d1-on, #062a21); }
        .ntf-filter-empty { text-align: center; color: var(--note-color); padding: 30px 12px; font-size: 11px; font-style: italic; }

        /* THẺ THÔNG BÁO */
        .ntf-group-title {
            padding: 11px 4px 6px; color: var(--note-color); font-size: 11px;
            font-weight: 900; text-transform: uppercase; letter-spacing: .65px;
        }
        .ntf-item {
            width: 100%; display: flex; align-items: flex-start; gap: 10px;
            padding: 11px 10px; margin-bottom: 6px; box-sizing: border-box;
            border: 1px solid var(--border-color); border-radius: 10px;
            background: var(--card-bg); color: var(--text-color); text-align: left;
            cursor: pointer; box-shadow: var(--shadow-sm); position: relative;
            transition: background .15s ease, border-color .15s ease;
        }
        .ntf-item:hover { border-color: var(--brand-primary-border); background: var(--highlight); }
        .ntf-item.is-unread {
            background: var(--brand-primary-light); border-color: var(--xv-c1-line, #a3d9c7);
            border-left: 3px solid var(--xv-c1, #20564c); padding-left: 7px;
        }
        body.dark-mode .ntf-item.is-unread { border-left-color: var(--xv-d1, #34d399); border-color: rgba(var(--xv-d1-rgb, 52,211,153),.3); }
        .ntf-item.is-static { cursor: default; }
        .ntf-item.is-static:hover { border-color: var(--border-color); background: var(--card-bg); }
        .ntf-icon {
            width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            background: var(--brand-primary-light); color: var(--brand-primary);
            border: 1px solid var(--brand-primary-border);
        }
        .ntf-icon.is-warn { color: #b45309; background: #fffbeb; border-color: #fde68a; }
        .ntf-icon.is-danger { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
        .ntf-copy { min-width: 0; flex: 1; padding-right: 4px; }
        .ntf-title {
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; color: #3a4a46;
        }
        .ntf-item.is-unread .ntf-title { font-weight: 850; color: var(--text-color); }
        body.dark-mode .ntf-title { color: #cbd5e1; }
        body.dark-mode .ntf-item.is-unread .ntf-title { color: #f1f5f9; }
        .ntf-message { display: block; font-size: 11px; color: var(--note-color); line-height: 1.45; }
        .ntf-time { display: block; font-size: 9.8px; color: var(--note-color); opacity: .85; margin-top: 5px; font-family: 'JetBrains Mono', monospace; }

        /* SKELETON LOADER */
        .ntf-skeleton-wrap { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
        .ntf-skeleton-card {
            display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px;
            background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px;
        }
        .ntf-skel-icon { width: 32px; height: 32px; border-radius: 9px; background: #eef2f1; flex-shrink: 0; }
        .ntf-skel-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
        .ntf-skel-line { height: 10px; border-radius: 4px; background: #eef2f1; }
        .ntf-skel-line.w78 { width: 78%; }
        .ntf-skel-line.w55 { width: 55%; background: #f1f5f4; }
        body.dark-mode .ntf-skel-icon, body.dark-mode .ntf-skel-line { background: rgba(255,255,255,.06); }
        body.dark-mode .ntf-skel-line.w55 { background: rgba(255,255,255,.03); }

        /* EMPTY & ERROR STATES */
        .ntf-empty { text-align: center; color: var(--note-color); padding: 30px 18px; font-size: 12px; line-height: 1.6; }
        .ntf-empty-rich { display: flex; flex-direction: column; align-items: center; }
        .ntf-empty-icon-wrap {
            width: 40px; height: 40px; border-radius: 12px; background: var(--brand-primary-light);
            border: 1px solid var(--xv-c1-line, #a3d9c7); color: var(--brand-primary); display: flex;
            align-items: center; justify-content: center; margin-bottom: 12px;
        }
        .ntf-empty-title { font-size: 12.5px; font-weight: 700; color: var(--text-color); margin-bottom: 4px; }
        .ntf-empty-desc { font-size: 11px; color: var(--note-color); line-height: 1.55; }
        .ntf-retry-btn {
            margin-top: 12px; padding: 6px 14px; border: 1px solid var(--border-color);
            background: var(--card-bg); color: var(--text-color); border-radius: 7px;
            font-size: 11px; font-weight: 800; cursor: pointer;
        }
        .ntf-retry-btn:hover { border-color: var(--brand-primary); }

        /* FOOTER & LOAD MORE */
        #notification-load-more {
            display: none; width: calc(100% - 24px); margin: 0 12px 10px; padding: 9px;
            border: 1px solid var(--border-color); border-radius: 7px; background: var(--card-bg);
            color: var(--text-color); font-size: 11px; font-weight: 800; cursor: pointer;
        }
        .ntf-footer-note {
            padding: 8px 16px 14px; font-size: 11px; line-height: 1.5; color: var(--note-color);
            text-align: center; border-top: 1px solid var(--border-color); margin-top: 6px;
        }
        .ntf-footer-note a { color: var(--brand-primary); text-decoration: none; font-weight: 700; }
        .ntf-footer-note a:hover { text-decoration: underline; }

/* === SIDE PANEL THÊM HẠNG MỤC (TRƯợT TỪ PHẢI VÀO) === */
        #side-add-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.25);
            z-index: 2000;
            backdrop-filter: blur(2px);
        }
        /* BIẾN CSS ĐỊNH VỊ SIDE PANEL GIỚI HẠN TRONG KHUNG BẢNG GANTT TRÊN PC */
        :root {
            --panel-dock-top: 140px;
            --panel-dock-height: calc(100vh - 140px);
            --panel-dock-right: 0px;
        }

        /* SIDE ADD PANEL REDESIGN */
        #side-add-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(2px);
            z-index: 2000;
            transition: opacity 0.25s ease;
        }
        #side-add-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 420px;
            max-width: 95vw;
            height: 100vh;
            background: var(--card-bg);
            box-shadow: -8px 0 35px rgba(0,0,0,0.25);
            z-index: 2001;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
            border-left: 1px solid var(--border-color);
        }
        @media screen and (min-width: 761px) {
            #side-add-overlay {
                display: none;
                position: fixed !important;
                inset: 0 !important;
                background: rgba(11, 19, 18, 0.45) !important;
                backdrop-filter: blur(2px) !important;
                -webkit-backdrop-filter: blur(2px) !important;
                z-index: 100040 !important;
                cursor: pointer !important;
                pointer-events: auto !important;
                transition: opacity 0.2s ease !important;
            }
            #side-add-panel {
                top: 0 !important;
                bottom: 0 !important;
                right: 0 !important;
                left: auto !important;
                width: 440px !important;
                max-width: 95vw !important;
                height: 100vh !important;
                max-height: 100vh !important;
                border-radius: 0 !important;
                border-left: 1px solid var(--border-color) !important;
                border-top: none !important;
                border-bottom: none !important;
                box-shadow: -8px 0 35px rgba(0, 0, 0, 0.25) !important;
                z-index: 100050 !important;
                display: flex !important;
                flex-direction: column !important;
                transform: translateX(100%);
                transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
                background: var(--card-bg, #ffffff) !important;
                overflow: hidden !important;
            }
            #side-add-panel.is-open {
                transform: translateX(0) !important;
            }
            body.dark-mode #side-add-panel {
                border-color: var(--xv-s2, #243b37) !important;
                box-shadow: -8px 0 35px rgba(0, 0, 0, 0.55) !important;
            }
        }
        #side-add-panel.is-open { transform: translateX(0); }
        #side-add-panel .sap-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            background: linear-gradient(135deg, var(--xv-top-a, #112723) 0%, var(--xv-top-b, #1a3c36) 100%);
            color: #fff;
            border-bottom: 1px solid var(--xv-top-bd, #235149);
            flex-shrink: 0;
        }
        #btn-sap-close {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.15);
            color: #cbd5e1;
            cursor: pointer;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            transition: all 0.15s;
        }
        #btn-sap-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
        #side-add-panel .sap-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: var(--bg-color);
        }
        .sap-field label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: var(--note-color);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 4px;
        }
        .sap-field input, .sap-field select, .sap-field textarea {
            width: 100%;
            font-size: 12.5px;
            padding: 8px 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: var(--card-bg);
            color: var(--text-color);
            box-sizing: border-box;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .sap-field input:focus, .sap-field select:focus, .sap-field textarea:focus {
            outline: none;
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 3px rgba(0,117,255,0.15);
        }
        .sap-field textarea { resize: vertical; min-height: 55px; }
        .sap-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .btn-day-preset {
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .btn-day-preset:hover {
            background: var(--brand-primary-light);
            color: var(--brand-primary);
            border-color: var(--brand-primary-border);
        }

        /* ============================================================
           Ô CHỌN NHANH "PHÂN CẤP" trong bảng Thêm hạng mục (2026-08-23).
           Thay cho một <select> ba dòng: cùng một cú bấm, và bày sẵn cả ba lựa chọn.
           Cùng ngôn ngữ hình với hàng "Chọn nhanh: 3 ngày / 5 ngày…" ngay dưới nó,
           chỉ thêm trạng thái ĐANG CHỌN mà .btn-day-preset không cần.
           Ba cột bằng nhau bằng grid chứ không flex-wrap: nhãn dài ngắn khác nhau,
           để flex thì ba ô rộng khác nhau và trông như ba nút rời chứ không phải
           một bộ ba lựa chọn.
           ============================================================ */
        .sap-phancap {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }
        .sap-pc-nut {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 7px 4px;
            box-sizing: border-box;
            font-family: inherit;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.25;
            text-align: center;
            color: var(--text-color);
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .sap-pc-nut:hover {
            background: var(--brand-primary-light);
            border-color: var(--brand-primary-border);
            color: var(--brand-primary);
        }
        /* Ô đang chọn: viền đậm bằng box-shadow inset chứ không tăng border-width —
           đổi bề dày viền làm ô nhích 1px và cả hàng rung mỗi lần bấm. */
        .sap-pc-nut.is-chon {
            background: var(--brand-primary-light);
            border-color: var(--brand-primary);
            color: var(--brand-primary);
            font-weight: 800;
            box-shadow: inset 0 0 0 1px var(--brand-primary);
        }

        /* Chip phím tắt dùng nền và viền trung tính, đồng bộ với header sáng. */
        .sap-phim {
            font-family: inherit;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0;
            text-transform: none;
            padding: 1px 5px;
            margin-left: 6px;
            vertical-align: middle;
            border: 1px solid rgba(255,255,255,0.35);
            border-radius: 3px;
            background: rgba(255,255,255,0.14);
            color: #d1fae5;
            white-space: nowrap;
        }
        /* Bảng này dùng CHUNG cho cả điện thoại (#nav-mv-add cũng gọi openSideAddPanel).
           Điện thoại không có bàn phím nên gợi ý phím tắt ở đó chỉ là nhiễu. */
        @media screen and (max-width: 760px) {
            .sap-phim { display: none !important; }
        }
        #side-add-panel .sap-footer {
            padding: 14px 18px;
            border-top: 1px solid var(--border-color);
            background: var(--card-bg);
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }
        #btn-sap-submit {
            flex: 1.3;
            background: var(--br);
            color: var(--brTx);
            font-weight: 800;
            font-size: 12.5px;
            padding: 11px 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            letter-spacing: 0.3px;
            box-shadow: var(--brShadow);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        #btn-sap-submit:hover {
            filter: brightness(1.06);
            box-shadow: var(--brShadow);
        }
        /* Đợt 7: công tắc "Nhập tiếp" thay cho nút "Thêm & Tiếp Tục" cũ — bật thì THÊM VÀO BẢNG
           không đóng bảng nữa (xem _sapDoiNhapTiep/_sapExecuteAdd). */
        .sap-nhap-tiep { flex: none; display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 0 4px; }
        .sap-nhap-tiep input { position: absolute; opacity: 0; width: 0; height: 0; }
        .sap-nhap-tiep-track { flex: none; width: 36px; height: 21px; border-radius: 160px; background: var(--bd, #cbd5e1); position: relative; transition: background .15s ease; }
        .sap-nhap-tiep-knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #ffffff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
        .sap-nhap-tiep input:checked + .sap-nhap-tiep-track { background: var(--br); }
        .sap-nhap-tiep input:checked + .sap-nhap-tiep-track .sap-nhap-tiep-knob { transform: translateX(15px); }
        .sap-nhap-tiep-chu { font: 700 11px 'Be Vietnam Pro', sans-serif; color: var(--tx, #0f172a); white-space: nowrap; }
        /* Checklist nghiệm thu ngay lúc tạo (mini-editor riêng của bảng thêm việc). */
        .sap-checklist-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-top: 1px solid var(--bd2, #f1f5f9); }
        .sap-checklist-row:first-child { border-top: 0; }
        .sap-checklist-row span { flex: 1; min-width: 0; font: 500 12.5px 'Be Vietnam Pro', sans-serif; color: var(--tx, #0f172a); word-break: break-word; }
        .sap-checklist-row button { flex: none; background: none; border: 0; color: #ef4444; cursor: pointer; padding: 2px 4px; font-size: 12px; }
        /* Băng HOÀN TÁC sau khi thêm ở chế độ Nhập tiếp — nổi trên chân bảng thêm việc. */
        /* z-index cao hơn #side-add-panel (100050) — băng này nổi TRONG lúc bảng còn mở (chế độ
           Nhập tiếp), không phải sau khi đóng. */
        .sap-hoan-tac { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); z-index: 100060; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--dark, #0f1a18); color: #ffffff; box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
        .sap-hoan-tac.hien { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .sap-ht-cham { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #059669; display: flex; align-items: center; justify-content: center; }
        .sap-ht-chu { flex: 1; min-width: 0; font: 600 12.5px 'Be Vietnam Pro', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sap-ht-nut { flex: none; background: none; border: 0; padding: 4px 6px; font: 800 11px 'Be Vietnam Pro', sans-serif; letter-spacing: .02em; color: #7fd3b8; cursor: pointer; }
        @media screen and (max-width: 760px) {
            .sap-hoan-tac { bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }
        }
        .sap-added-hint {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 10px 12px;
            border: 1px solid var(--brLine);
            border-radius: var(--radius-md);
            background: var(--brSoft);
            color: var(--br);
            font-size: 11.5px;
            font-weight: 650;
            line-height: 1.45;
        }
        .sap-added-hint[hidden] { display: none; }
        .sap-added-hint::before {
            content: "✓";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            border-radius: 50%;
            background: var(--br);
            color: var(--brTx);
            font-weight: 900;
        }

        /* ================= TASK DETAIL SIDE PANEL (BẢNG TRƯỢT PHẢI TÙY CHỈNH HẠNG MỤC PC) ================= */
        #task-detail-side-overlay {
            display: none !important;
            position: fixed;
            inset: 0;
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            pointer-events: none !important;
            z-index: 55;
        }
        #task-detail-side-panel {
            position: fixed;
            top: var(--panel-dock-top, 140px);
            right: var(--panel-dock-right, 0px);
            width: 420px;
            max-width: 95vw;
            height: var(--panel-dock-height, calc(100vh - 140px));
            background: var(--card-bg, #ffffff);
            box-shadow: -6px 0 25px rgba(0, 0, 0, 0.12);
            z-index: 60;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
            border-left: 1px solid var(--border-color);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            border-radius: 8px 0 0 8px;
            box-sizing: border-box;
            overflow: hidden;
            overflow: clip; /* chặn trình duyệt tự cuộn panel khi focus ô trong bảng trượt vướng mắc */
        }
        #task-detail-side-panel.is-open {
            transform: translateX(0);
        }

        /* Highlight dòng công việc đang mở tùy chỉnh để tiện đối chiếu với bảng */
        /* Ô "+ Thêm việc" chờ sẵn cuối mỗi giai đoạn */
        #table-body tr.xv-them-viec > td { height: 30px; padding-top: 0 !important; padding-bottom: 0 !important; background: var(--card-bg, #ffffff); border-bottom: 1px solid var(--border-color); }
        #table-body tr.xv-them-viec.xv-them-gd > td { height: 34px; border-top: 1px solid var(--border-color); }
        #table-body tr.xv-them-viec.hide-by-collapse { display: none; }
        body.xv-dang-loc #table-body tr.xv-them-viec:not(.xv-them-gd) { display: none !important; }
        #table-body tr.xv-them-viec .xv-tv-nut { display: block; width: 100%; height: 30px; padding: 0 0 0 28px; border: 0; background: transparent; color: var(--note-color, #64748b); font: 500 12px 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; opacity: .8; }
        #table-body tr.xv-them-viec.xv-them-gd .xv-tv-nut { padding-left: 10px; font-weight: 600; height: 34px; }
        #table-body tr.xv-them-viec .xv-tv-nut:hover, #table-body tr.xv-them-viec .xv-tv-nut:focus-visible { color: var(--brand-primary); opacity: 1; }
        #table-body tr.xv-them-viec.dang-nhap > td { background: color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg, #ffffff)); }
        #table-body tr.xv-them-viec.dang-nhap > td.col-task,
        #table-body tr.xv-them-viec.xv-them-gd.dang-nhap > td.col-task { padding: 3px 0 4px 0 !important; }
        #table-body tr.xv-them-viec .xv-tv-o { display: block; width: 100%; box-sizing: border-box; height: 26px; margin: 0; padding: 0 10px; border: 1px solid var(--brand-primary) !important; border-radius: 0 !important; background: var(--card-bg, #ffffff) !important; color: var(--text-color) !important; font: 500 12px 'Inter', system-ui, sans-serif; text-align: left !important; outline: none !important; box-shadow: none !important; }
        #table-body tr.xv-them-viec .xv-tv-o:focus,
        #table-body tr.xv-them-viec .xv-tv-o:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; }
        #table-body tr.xv-them-viec .xv-tv-goi-y { margin-top: 3px; padding: 0 10px; color: var(--note-color, #64748b); font: 400 10.5px 'Inter', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #table-body tr.xv-them-viec .xv-tv-goi-y b { font-weight: 700; color: var(--text-color); }
        @media print { #table-body tr.xv-them-viec { display: none !important; } }

        tr.tdsp-active-row > td {
            background-color: rgba(27, 99, 84, 0.08) !important;
        }
        body.dark-mode tr.tdsp-active-row > td {
            background-color: rgba(45, 212, 191, 0.12) !important;
        }

        /* Bảng Tùy chỉnh hạng mục (phương án A; mật độ gọn v569 theo cỡ chữ bảng Gantt 12px): một cột, tiến độ lên đầu. */
        #task-detail-side-panel {
            --tdsp-ink: var(--text-color, #17211e);
            --tdsp-mut: #5a6762;
            --tdsp-line: #e6eae8;
            --tdsp-field: #cfd7d3;
            --tdsp-soft: #f6f8f7;
            --tdsp-track: #dde3e0;
            --tdsp-seg: #e8ecea;
            --tdsp-brand: var(--brand-primary, #20564c);
            --tdsp-brand-soft: #e6f0ed;
            --tdsp-on-brand: #ffffff;
            --tdsp-good: #166534; --tdsp-good-bg: #e3f3e8;
            --tdsp-warn: #8f3f08; --tdsp-warn-bg: #fbe9da; --tdsp-warn-bar: #c2610f;
            --tdsp-bad: #b42318; --tdsp-bad-bg: #fde7e5; --tdsp-bad-bar: #c2410c;
            --tdsp-blk-bg: #fdf4ec; --tdsp-blk-line: #efc9a8; --tdsp-blk-ink: #6e3106;
            --tdsp-danger: #b42318;
            font-family: 'Be Vietnam Pro', sans-serif;
            color: var(--tdsp-ink);
        }
        body.dark-mode #task-detail-side-panel {
            --tdsp-ink: #e7eeeb;
            --tdsp-mut: #9aaba5;
            --tdsp-line: var(--xv-s2, #243b37);
            --tdsp-field: var(--xv-s4, #33504a);
            --tdsp-soft: var(--xv-s6, #152420);
            --tdsp-track: var(--xv-s2, #243b37);
            --tdsp-seg: var(--xv-s5, #0f1a18);
            --tdsp-brand: var(--xv-d1, #34d399);
            --tdsp-brand-soft: rgba(52, 211, 153, .14);
            --tdsp-on-brand: var(--xv-d1-on, #062a21);
            --tdsp-good: #6ee7b7; --tdsp-good-bg: rgba(110, 231, 183, .13);
            --tdsp-warn: #fdba74; --tdsp-warn-bg: rgba(251, 146, 60, .15); --tdsp-warn-bar: #fb923c;
            --tdsp-bad: #fca5a5; --tdsp-bad-bg: rgba(248, 113, 113, .15); --tdsp-bad-bar: #f87171;
            --tdsp-blk-bg: #231a12; --tdsp-blk-line: #7a4a24; --tdsp-blk-ink: #fdba74;
            --tdsp-danger: #fca5a5;
            background: var(--xv-s1, #121e1b);
            border-color: var(--xv-s2, #243b37);
            box-shadow: -6px 0 25px rgba(0, 0, 0, 0.45);
        }
        .tdsp-sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
        }
        #task-detail-side-panel button { font-family: inherit; }
        #task-detail-side-panel button:disabled { cursor: not-allowed; opacity: .55; }

        /* Đầu bảng: tên hạng mục là tiêu đề */
        .tdsp-header {
            flex-shrink: 0;
            padding: 6px 10px 10px 16px;
            border-bottom: 1px solid var(--tdsp-line);
            background: var(--card-bg, #ffffff);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        body.dark-mode .tdsp-header { background: var(--xv-s1, #121e1b); }
        .tdsp-head-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .tdsp-head-crumb {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .tdsp-head-title {
            margin: 0;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--tdsp-mut);
            white-space: nowrap;
        }
        .tdsp-close-btn {
            flex: none;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--tdsp-mut);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease, color .15s ease;
        }
        .tdsp-close-btn:hover { background: var(--tdsp-soft); color: var(--tdsp-ink); }
        #task-detail-side-panel .tdsp-name-input {
            margin: 0 0 0 -8px;
            width: calc(100% + 8px);
            padding: 4px 8px;
            resize: none;
            overflow: hidden;
            font-size: 14px;
            line-height: 1.35;
            font-weight: 700;
            color: var(--tdsp-ink);
            background: var(--tdsp-soft);
            border: 1px solid transparent;
            border-radius: 8px;
        }
        #task-detail-side-panel .tdsp-name-input:hover { border-color: var(--tdsp-field); }
        #task-detail-side-panel .tdsp-name-input:focus { border-color: var(--tdsp-brand); background: var(--card-bg, #ffffff); }
        body.dark-mode #task-detail-side-panel .tdsp-name-input:focus { background: var(--xv-s0, #0d1715); }
        .tdsp-incident-wrap {
            display: flex;
            align-items: center;
            margin-top: 2px;
        }
        .tdsp-incident-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font: 500 12px 'Be Vietnam Pro', system-ui, sans-serif;
            color: var(--tdsp-ink, #17211e);
            user-select: none;
        }
        .tdsp-incident-label input[type="checkbox"] {
            width: 15px;
            height: 15px;
            accent-color: #d97706;
            margin: 0;
            cursor: pointer;
        }
        .tdsp-incident-badge {
            font: 700 11px 'Be Vietnam Pro', system-ui, sans-serif;
            color: #b45309;
            background: #fef3c7;
            border: 1px solid #fde68a;
            border-radius: 4px;
            padding: 1px 4px;
            line-height: 1.2;
            opacity: 0.75;
            transition: opacity .15s, transform .15s;
        }
        .tdsp-incident-badge.is-active {
            opacity: 1;
            font-weight: 800;
        }
        body.dark-mode .tdsp-incident-badge {
            color: #fde68a;
            background: rgba(245, 158, 11, 0.18);
            border-color: rgba(245, 158, 11, 0.35);
        }
        .tag-incident-badge {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font: 700 11px/1.2 'Be Vietnam Pro', system-ui, sans-serif;
            color: #b45309;
            background: #fef3c7;
            border: 1px solid #fde68a;
            border-radius: 4px;
            padding: 1px 4px;
            margin-right: 4px;
            letter-spacing: 0.02em;
            user-select: none;
            cursor: pointer;
            vertical-align: middle;
        }
        body.dark-mode .tag-incident-badge {
            color: #fde68a;
            background: rgba(245, 158, 11, 0.18);
            border-color: rgba(245, 158, 11, 0.35);
        }

        /* Thân bảng */
        .tdsp-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            background: var(--card-bg, #ffffff);
            scrollbar-width: thin;
        }
        body.dark-mode .tdsp-body { background: var(--xv-s1, #121e1b); }
        .tdsp-section {
            flex-shrink: 0;
            padding: 10px 16px;
            border-bottom: 1px solid var(--tdsp-line);
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-sizing: border-box;
        }
        .tdsp-section:last-child { border-bottom: none; }
        .tdsp-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-height: 20px;
        }
        .tdsp-section-title {
            margin: 0;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--tdsp-ink);
            opacity: .85;
        }
        .tdsp-link-btn {
            height: 28px;
            padding: 0 8px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--tdsp-mut);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .tdsp-link-btn:hover { background: var(--tdsp-soft); }
        .tdsp-link-btn.is-danger { color: var(--tdsp-danger); }

        .tdsp-label {
            display: block;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--tdsp-mut);
            margin-bottom: 3px;
        }
        .tdsp-input-text, .tdsp-textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 7px 10px;
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 500;
            line-height: 1.45;
            color: var(--tdsp-ink);
            background: var(--card-bg, #ffffff);
            border: 1px solid var(--tdsp-field);
            border-radius: 8px;
            outline: none;
            transition: border-color .15s ease;
        }
        body.dark-mode .tdsp-input-text, body.dark-mode .tdsp-textarea { background: var(--xv-s0, #0d1715); }
        .tdsp-input-text { height: 30px; padding-top: 0; padding-bottom: 0; }
        .tdsp-textarea { resize: vertical; }
        .tdsp-input-text:focus, .tdsp-textarea:focus { border-color: var(--tdsp-brand); }

        /* Trạng thái + tiến độ */
        .tdsp-summary {
            flex-shrink: 0;
            padding: 10px 16px 12px;
            background: var(--tdsp-soft);
            border-bottom: 1px solid var(--tdsp-line);
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .tdsp-status-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 3px;
            padding: 3px;
            background: var(--tdsp-seg);
            border-radius: 8px;
        }
        .tdsp-status-btn {
            height: 28px;
            min-width: 0;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--tdsp-ink);
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: background .15s ease, color .15s ease;
        }
        .tdsp-status-btn:hover:not(.is-active):not(:disabled) { background: rgba(255, 255, 255, .6); }
        body.dark-mode .tdsp-status-btn:hover:not(.is-active):not(:disabled) { background: rgba(255, 255, 255, .06); }
        .tdsp-status-btn.is-active { color: #ffffff; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
        .tdsp-status-btn.pending.is-active { background: #3d4a45; }
        .tdsp-status-btn.inprogress.is-active { background: var(--xv-c1, #20564c); }
        .tdsp-status-btn.paused.is-active { background: #8f3f08; }
        .tdsp-status-btn.done.is-active { background: #166534; }
        body.dark-mode .tdsp-status-btn.pending.is-active { background: #64748b; }
        body.dark-mode .tdsp-status-btn.inprogress.is-active { background: var(--xv-them, #1f7a63); }
        body.dark-mode .tdsp-status-btn.paused.is-active { background: #b45309; }
        body.dark-mode .tdsp-status-btn.done.is-active { background: #15803d; }

        .tdsp-prog-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .tdsp-prog-num {
            font-family: 'JetBrains Mono', monospace;
            font-size: 20px;
            font-weight: 800;
            line-height: 1;
            color: var(--tdsp-ink);
        }
        .tdsp-diff-chip {
            padding: 2px 7px;
            border-radius: 5px;
            font-size: 11.5px;
            font-weight: 800;
            white-space: nowrap;
        }
        .tdsp-diff-chip.is-good { background: var(--tdsp-good-bg); color: var(--tdsp-good); }
        .tdsp-diff-chip.is-warn { background: var(--tdsp-warn-bg); color: var(--tdsp-warn); }
        .tdsp-diff-chip.is-bad { background: var(--tdsp-bad-bg); color: var(--tdsp-bad); }
        .tdsp-prog-bar-track {
            position: relative;
            width: 100%;
            height: 8px;
            background: var(--tdsp-track);
            border-radius: 5px;
        }
        .tdsp-prog-bar-fill {
            height: 100%;
            border-radius: 5px;
            transition: width .25s ease;
        }
        .tdsp-prog-bar-fill.is-good { background: var(--tdsp-brand); }
        .tdsp-prog-bar-fill.is-warn { background: var(--tdsp-warn-bar); }
        .tdsp-prog-bar-fill.is-bad { background: var(--tdsp-bad-bar); }
        .tdsp-prog-plan-marker {
            position: absolute;
            top: -3px;
            width: 2px;
            height: 14px;
            background: var(--tdsp-ink);
            border-radius: 1px;
            transform: translateX(-50%);
            pointer-events: none;
        }
        .tdsp-prog-actions { display: flex; align-items: center; gap: 6px; }
        .tdsp-prog-quick {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 4px;
        }
        .tdsp-prog-btn {
            height: 26px;
            min-width: 0;
            padding: 0 4px;
            border: 1px solid var(--tdsp-field);
            border-radius: 8px;
            background: var(--card-bg, #ffffff);
            color: var(--tdsp-ink);
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
            transition: border-color .15s ease, color .15s ease;
        }
        body.dark-mode .tdsp-prog-btn { background: var(--xv-s0, #0d1715); }
        .tdsp-prog-step { flex: none; width: 36px; }
        .tdsp-prog-btn:hover:not(.is-active):not(:disabled) { border-color: var(--tdsp-brand); color: var(--tdsp-brand); }
        .tdsp-prog-btn.is-active { background: var(--tdsp-brand); border-color: var(--tdsp-brand); color: var(--tdsp-on-brand); }

        /* Vướng mắc */
        .tdsp-block-prompt { padding-top: 10px; padding-bottom: 10px; }
        .tdsp-block-prompt.is-delayed { background: var(--tdsp-blk-bg); }
        .tdsp-block-open-btn {
            width: 100%;
            min-height: 38px;
            padding: 6px 10px;
            border: 1px dashed var(--tdsp-field);
            border-radius: 10px;
            background: transparent;
            color: var(--tdsp-mut);
            display: flex;
            align-items: center;
            gap: 10px;
            text-align: left;
            cursor: pointer;
        }
        .tdsp-block-open-btn:hover:not(:disabled) { border-color: var(--tdsp-blk-line); color: var(--tdsp-warn); }
        .tdsp-block-prompt.is-delayed .tdsp-block-open-btn {
            border: 1px solid var(--tdsp-blk-line);
            background: var(--card-bg, #ffffff);
            color: var(--tdsp-warn);
        }
        body.dark-mode .tdsp-block-prompt.is-delayed .tdsp-block-open-btn { background: var(--xv-s1, #121e1b); }
        .tdsp-block-open-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .tdsp-block-open-title { font-size: 12.5px; font-weight: 700; }
        .tdsp-block-open-action { flex: none; font-size: 12px; font-weight: 700; }
        .tdsp-block { background: var(--tdsp-blk-bg); }
        /* Bảng trượt vướng mắc: phủ trong panel, trượt lên từ đáy (đồng bộ bottom sheet mobile) */
        .tdsp-sheet-scrim {
            position: absolute;
            inset: 0;
            z-index: 5;
            background: rgba(23, 33, 30, .38);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .tdsp-sheet {
            max-height: 88%;
            display: flex;
            flex-direction: column;
            border-radius: 14px 14px 0 0;
            background: var(--card-bg, #ffffff);
            box-shadow: 0 -8px 28px rgba(23, 33, 30, .22);
            overflow: hidden;
        }
        body.dark-mode .tdsp-sheet { background: var(--xv-s1, #121e1b); box-shadow: 0 -8px 28px rgba(0, 0, 0, .5); }
        .tdsp-sheet-scrim.is-entering { animation: tdspScrimVao .2s ease; }
        .tdsp-sheet-scrim.is-entering .tdsp-sheet { animation: tdspSheetVao .24s cubic-bezier(.2, .8, .2, 1); }
        @keyframes tdspScrimVao { from { background-color: rgba(23, 33, 30, 0); } to { background-color: rgba(23, 33, 30, .38); } }
        @keyframes tdspSheetVao { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @media (prefers-reduced-motion: reduce) { .tdsp-sheet-scrim.is-entering, .tdsp-sheet-scrim.is-entering .tdsp-sheet { animation: none; } }
        .tdsp-sheet-grip { flex: none; width: 36px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: var(--tdsp-field); }
        .tdsp-sheet-head {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 4px 10px 8px 16px;
            border-bottom: 1px solid var(--tdsp-blk-line);
            background: var(--card-bg, #ffffff);
        }
        body.dark-mode .tdsp-sheet-head { background: var(--xv-s1, #121e1b); }
        .tdsp-sheet-titles { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
        .tdsp-phim-tat { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--tdsp-mut); font-size: 11px; white-space: nowrap; }
        .tdsp-phim-tat kbd { padding: 0 5px; min-width: 14px; text-align: center; border: 1px solid var(--tdsp-field); border-bottom-width: 2px; border-radius: 4px; background: var(--tdsp-soft); color: var(--tdsp-ink); font: 600 11px/16px 'JetBrains Mono', monospace; }
        .tdsp-phim-cham { width: 3px; height: 3px; margin: 0 2px; border-radius: 50%; background: var(--tdsp-field); }
        .tdsp-sheet-sub { font-size: 11.5px; color: var(--tdsp-mut); }
        .tdsp-sheet-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--tdsp-blk-bg);
        }
        .tdsp-sheet-foot {
            flex: none;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px 8px 8px;
            border-top: 1px solid var(--tdsp-blk-line);
            background: var(--card-bg, #ffffff);
        }
        body.dark-mode .tdsp-sheet-foot { background: var(--xv-s1, #121e1b); }
        .tdsp-block .tdsp-section-title { color: var(--tdsp-warn); opacity: 1; }
        .tdsp-block .tdsp-link-btn { color: var(--tdsp-warn); }
        .tdsp-block .tdsp-link-btn:hover { background: rgba(194, 97, 15, .1); }
        .tdsp-block .tdsp-label { color: var(--tdsp-blk-ink); font-weight: 700; }
        .tdsp-block .tdsp-input-text, .tdsp-block .tdsp-textarea { border-color: var(--tdsp-blk-line); }
        .tdsp-block-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .tdsp-block-chip {
            height: 28px;
            padding: 0 10px;
            border-radius: 14px;
            border: 1px solid var(--tdsp-blk-line);
            background: var(--card-bg, #ffffff);
            color: var(--tdsp-blk-ink);
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s ease, color .15s ease;
        }
        body.dark-mode .tdsp-block-chip { background: var(--xv-s1, #121e1b); }
        .tdsp-block-chip.is-active { background: #8f3f08; border-color: #8f3f08; color: #ffffff; font-weight: 700; }
        body.dark-mode .tdsp-block-chip.is-active { background: #c2610f; border-color: #c2610f; color: #1a0f06; }
        .tdsp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        .tdsp-field-hint {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 8px;
            margin-top: 4px;
            font-size: 11px;
            color: var(--tdsp-blk-ink);
        }
        .tdsp-field-hint span:last-child { flex: none; font-family: 'JetBrains Mono', monospace; font-weight: 700; }
        .tdsp-static-box {
            height: 30px;
            box-sizing: border-box;
            padding: 0 10px;
            border-radius: 8px;
            border: 1px solid var(--tdsp-blk-line);
            background: var(--card-bg, #ffffff);
            display: flex;
            align-items: center;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--tdsp-warn);
        }
        body.dark-mode .tdsp-static-box { background: var(--xv-s0, #0d1715); }

        /* Tiêu chí nghiệm thu */
        .tdsp-chk-count {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            font-weight: 700;
            color: var(--tdsp-brand);
        }
        .tdsp-chk-bar { height: 4px; border-radius: 2px; background: var(--tdsp-line); overflow: hidden; }
        .tdsp-chk-bar > div { height: 100%; border-radius: 2px; background: var(--tdsp-brand); transition: width .2s ease; }
        .tdsp-chk-list { display: flex; flex-direction: column; }
        .tdsp-chk-item {
            min-height: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--tdsp-line);
            box-sizing: border-box;
        }
        .tdsp-chk-checkbox {
            flex: none;
            width: 16px;
            height: 16px;
            padding: 0;
            border-radius: 4px;
            border: 1.5px solid #9aa6a1;
            background: var(--card-bg, #ffffff);
            color: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease, border-color .15s ease;
        }
        body.dark-mode .tdsp-chk-checkbox { background: var(--xv-s0, #0d1715); border-color: #4b6660; }
        .tdsp-chk-checkbox:hover:not(:disabled) { border-color: var(--tdsp-brand); }
        .tdsp-chk-item.is-done .tdsp-chk-checkbox { background: var(--tdsp-brand); border-color: var(--tdsp-brand); color: var(--tdsp-on-brand); }
        .tdsp-chk-text {
            flex: 1;
            min-width: 0;
            padding: 5px 0;
            font-size: 12.5px;
            line-height: 1.4;
            color: var(--tdsp-ink);
            word-break: break-word;
        }
        .tdsp-chk-item.is-done .tdsp-chk-text { color: var(--tdsp-mut); text-decoration: line-through; }
        .tdsp-chk-del {
            flex: none;
            width: 24px;
            height: 24px;
            padding: 0;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--tdsp-mut);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .7;
        }
        .tdsp-chk-del:hover { opacity: 1; color: var(--tdsp-danger); background: var(--tdsp-bad-bg); }
        .tdsp-empty {
            padding: 12px;
            border: 1px dashed var(--tdsp-field);
            border-radius: 8px;
            text-align: center;
            font-size: 12px;
            color: var(--tdsp-mut);
        }
        .tdsp-chk-add { display: flex; gap: 6px; margin-top: 2px; }
        .tdsp-chk-text[role="button"] { cursor: text; border-radius: 4px; }
        .tdsp-chk-text[role="button"]:hover { background: var(--tdsp-line); }
        .tdsp-chk-edit { display: block; width: 100%; box-sizing: border-box; resize: none; overflow: hidden; margin: 0; padding: 4px 6px; border: 1px solid var(--tdsp-brand); border-radius: 6px; background: var(--tdsp-field-bg, transparent); color: var(--tdsp-ink); font: inherit; line-height: 1.4; outline: none; }
        .tdsp-chk-move { flex: none; display: flex; flex-direction: column; }
        .tdsp-chk-move button { width: 22px; height: 14px; padding: 0; border: 0; background: transparent; color: var(--tdsp-mut); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .7; }
        .tdsp-chk-move button:hover:not(:disabled) { opacity: 1; color: var(--tdsp-brand); }
        .tdsp-chk-move button:disabled { opacity: .25; cursor: default; }
        .xv-chk-goiy { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, #10b981 45%, transparent); background: color-mix(in srgb, #10b981 13%, transparent); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
        /* Checklist nhanh (hộp nhỏ ở máy tính, tấm trượt ở điện thoại) */
        .xvc-goc { --xvc-br: var(--brand-primary, #20564c); --xvc-card: var(--card-bg, #ffffff); --xvc-bd: var(--border-color, #e2e8f0); --xvc-tx: var(--text-color, #0f1a18); --xvc-mut: var(--note-color, #5b6e69);  display: grid; gap: 8px; color: var(--xvc-tx); font-family: 'Be Vietnam Pro', sans-serif; }
        .xvc-pop { position: fixed; z-index: 1200; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 10px 12px 12px; background: var(--card-bg, #ffffff); color: var(--text-color, #0f1a18); border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .28); display: grid; gap: 8px; box-sizing: border-box; }
        .xvc-dau { display: flex; align-items: center; gap: 8px; }
        .xvc-tt { flex: 1; min-width: 0; } .xvc-tt b { display: block; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xvc-tt small { display: block; font-size: 11px; color: var(--note-color, #5b6e69); }
        .xvc-dem { flex: none; font: 800 12px 'JetBrains Mono', monospace; color: var(--brand-primary, #20564c); background: var(--brand-primary-light, #e6f4ef); border-radius: 999px; padding: 3px 10px; }
        .xvc-dong-nut { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--note-color, #5b6e69); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .xvc-dong-nut:hover { background: var(--highlight, #f1f5f4); }
        .xvc-ds { display: flex; flex-direction: column; }
        .xvc-dong { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 34px; border-top: 1px solid var(--xvc-bd); }
        .xvc-dong:first-child { border-top: 0; }
        .xvc-tick { width: 20px; height: 20px; margin-left: 4px; padding: 0; border-radius: 6px; border: 2px solid var(--brand-primary-border, #a3d9c7); background: var(--xvc-card); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .xvc-tick[aria-pressed="true"] { background: var(--xvc-br); border-color: var(--xvc-br); }
        .xvc-tick:disabled { cursor: default; opacity: .7; }
        .xvc-tick:focus-visible, .xvc-chu:focus-visible, .xvc-cc button:focus-visible, .xvc-lienket:focus-visible, .xvc-hoan button:focus-visible, .xvc-them button:focus-visible { outline: 2px solid var(--xvc-br); outline-offset: 2px; }
        .xvc-chu { min-width: 0; padding: 5px 4px; font-size: 12.5px; line-height: 1.4; word-break: break-word; border-radius: 4px; }
        .xvc-chu[role="button"] { cursor: text; } .xvc-chu[role="button"]:hover { background: var(--highlight, #f1f5f4); }
        .xvc-dong.xong .xvc-chu { color: var(--xvc-mut); text-decoration: line-through; }
        .xvc-cc { display: flex; align-items: center; opacity: 0; transition: opacity .12s; } .xvc-dong:hover .xvc-cc, .xvc-dong:focus-within .xvc-cc { opacity: 1; }
        .xvc-cc button { width: 22px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--xvc-mut); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .xvc-cc button:hover:not(:disabled) { color: var(--xvc-br); background: var(--highlight, #f1f5f4); } .xvc-cc button.xoa:hover { color: #ef4444; } .xvc-cc button:disabled { opacity: .25; cursor: default; }
        .xvc-sua { display: block; width: 100%; box-sizing: border-box; resize: none; overflow: hidden; margin: 0; padding: 4px 6px; border: 1.5px solid var(--xvc-br); border-radius: 6px; background: var(--xvc-card); color: var(--xvc-tx); font: inherit; line-height: 1.4; outline: none; }
        .xvc-trong { padding: 10px 4px; font-size: 12px; color: var(--xvc-mut); }
        .xvc-quyen { margin: 0; font-size: 11.5px; color: var(--xvc-mut); }
        .xvc-them { display: flex; gap: 6px; } .xvc-them[hidden], .xvc-hoan[hidden], .xvc-quyen[hidden] { display: none; }
        .xvc-them input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px dashed var(--xvc-bd); border-radius: 8px; background: transparent; color: var(--xvc-tx); font: 500 12.5px 'Be Vietnam Pro', sans-serif; box-sizing: border-box; }
        .xvc-them input:focus { border-style: solid; border-color: var(--xvc-br); outline: none; }
        .xvc-them button { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--xvc-br); border-radius: 8px; background: transparent; color: var(--xvc-br); font: 800 12px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        .xvc-hoan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--highlight, #f1f5f4); font-size: 12px; } .xvc-hoan span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .xvc-hoan button { flex: none; border: 0; background: transparent; color: var(--xvc-br); font: 800 12px 'Be Vietnam Pro', sans-serif; cursor: pointer; padding: 4px 6px; }
        .xvc-lienket { justify-self: start; padding: 4px 2px; border: 0; background: transparent; color: var(--xvc-br); font: 700 12px 'Be Vietnam Pro', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
        /* Tấm trượt điện thoại: ô tick 28px, mỗi dòng tối thiểu 48px, phím sửa luôn hiện, ô nhập chữ 16px để không bị zoom */
        .xvc-goc.xvc-sheet .xvc-dong { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 48px; gap: 4px; }
        .xvc-goc.xvc-sheet .xvc-tick { width: 28px; height: 28px; margin-left: 8px; border-radius: 9px; }
        .xvc-goc.xvc-sheet .xvc-chu { font-size: 14.5px; padding: 8px 4px; }
        .xvc-goc.xvc-sheet .xvc-cc { opacity: 1; } .xvc-goc.xvc-sheet .xvc-cc button { width: 34px; height: 40px; }
        .xvc-goc.xvc-sheet .xvc-sua { font-size: 16px; padding: 6px 8px; }
        .xvc-goc.xvc-sheet .xvc-them input { height: 44px; font-size: 16px; border-radius: 12px; }
        .xvc-goc.xvc-sheet .xvc-them button { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 13px; background: var(--xvc-br); color: #ffffff; }
        .xvc-goc.xvc-sheet .xvc-hoan { padding: 10px 12px; font-size: 13px; } .xvc-goc.xvc-sheet .xvc-hoan button { min-height: 36px; font-size: 13px; }
        .xvc-goc.xvc-sheet .xvc-lienket { min-height: 40px; font-size: 13px; }
        .xvc-chip { position: relative; display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--brLine, #a3d9c7); border-radius: 999px; background: var(--brSoft, #e6f4ef); color: var(--br, #20564c); font: inherit; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .xvc-chip::after { content: ""; position: absolute; inset: -9px -6px; }
        .xvc-dung { display: grid; gap: 6px; } .xvc-dung[hidden] { display: none; }
        .xvc-nhan { font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--note-color, #5b6e69); }
        .xvc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .xvc-g { max-width: 100%; min-height: 28px; padding: 0 10px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 999px; background: transparent; color: var(--text-color, #0f1a18); font: 600 12px 'Be Vietnam Pro', sans-serif; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .xvc-g:hover { border-color: var(--brand-primary, #20564c); color: var(--brand-primary, #20564c); }
        .xvc-keo, .tdsp-chk-keo { flex: none; width: 18px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--note-color, #5b6e69); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
        .xvc-keo:hover, .tdsp-chk-keo:hover { color: var(--brand-primary, #20564c); }
        .xvc-dong.xvc-keo-dang, .tdsp-chk-item.xvc-keo-dang { background: var(--card-bg, #ffffff); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); border-radius: 8px; cursor: grabbing; }
        .tdsp-chk-keo { opacity: .7; }
        .xvc-goc.xvc-sheet .xvc-keo { width: 34px; height: 40px; opacity: 1; } .xvc-goc.xvc-sheet .xvc-ln { display: none; }
        .xvc-goc.xvc-sheet .xvc-g { min-height: 34px; padding: 0 12px; font-size: 13px; }
        .xvc-tiep { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 2px 0 0; padding: 4px 8px 4px 4px; border: 0; border-radius: 10px; background: var(--brSoft, #e6f4ef); color: var(--tx, #0f1a18); font: 600 13px/1.35 'Be Vietnam Pro', sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .xvc-tiep-o { flex: none; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--br, #20564c); background: var(--card, #ffffff); box-sizing: border-box; }
        .xvc-tiep-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .xvc-tiep small { display: block; font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--br, #20564c); }
        .xvc-tiep-het { justify-content: space-between; padding: 6px 8px 6px 12px; cursor: default; }
        .xvc-tiep-het button { flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: #0f8a63; color: #ffffff; font: 800 12px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        .xv-chk-goiy button { flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: #0f8a63; color: #ffffff; font: 800 12px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        #task-detail-side-panel #tdsp-new-chk-input { flex: 1; border-style: dashed; }
        #task-detail-side-panel #tdsp-new-chk-input:focus { border-style: solid; }
        .tdsp-outline-btn {
            flex: none;
            height: 30px;
            padding: 0 12px;
            border: 1px solid var(--tdsp-brand);
            border-radius: 8px;
            background: transparent;
            color: var(--tdsp-brand);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
        }
        .tdsp-outline-btn:hover { background: var(--tdsp-brand-soft); }

        /* Thời gian */
        .tdsp-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
        .tdsp-stepper {
            height: 30px;
            box-sizing: border-box;
            display: flex;
            align-items: stretch;
            border: 1px solid var(--tdsp-field);
            border-radius: 8px;
            overflow: hidden;
            background: var(--card-bg, #ffffff);
        }
        body.dark-mode .tdsp-stepper { background: var(--xv-s0, #0d1715); }
        .tdsp-stepper-btn {
            flex: none;
            width: 30px;
            border: none;
            background: var(--tdsp-soft);
            color: var(--tdsp-ink);
            font-size: 16px;
            cursor: pointer;
        }
        .tdsp-stepper-btn:hover:not(:disabled) { background: var(--tdsp-seg); }
        .tdsp-stepper-val {
            flex: 1;
            min-width: 0;
            width: 32px;
            text-align: center;
            border: none;
            background: transparent;
            color: var(--tdsp-ink);
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            font-weight: 700;
            outline: none;
            -moz-appearance: textfield;
        }
        .tdsp-stepper-val::-webkit-outer-spin-button, .tdsp-stepper-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .tdsp-end-box {
            height: 30px;
            box-sizing: border-box;
            padding: 0 10px;
            border-radius: 8px;
            background: var(--tdsp-soft);
            display: flex;
            align-items: center;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--tdsp-ink);
        }

        /* Người phụ trách: cả hàng là vùng bấm, select phủ trong suốt để giữ chọn bằng bàn phím */
        .tdsp-nhan-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 6px 10px; box-sizing: border-box; border: 1px solid var(--tdsp-line, #d6dfdb); border-radius: 10px; background: var(--tdsp-card, #ffffff); color: inherit; text-align: left; cursor: pointer; }
        .tdsp-nhan-btn:hover:not(:disabled) { border-color: var(--tdsp-brand, #20564c); }
        .tdsp-nhan-btn:disabled { cursor: default; opacity: .85; }
        .tdsp-nhan-trong { color: var(--tdsp-muted, #7a8883); font-size: 13px; }
        .tdsp-nhan-sua { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--tdsp-brand, #20564c); }
        .tdsp-assignee-picker {
            position: relative;
            min-height: 44px;
            box-sizing: border-box;
            padding: 6px 10px;
            border: 1px solid var(--tdsp-field);
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .tdsp-assignee-picker:hover { border-color: var(--tdsp-brand); }
        .tdsp-assignee-picker:focus-within { border-color: var(--tdsp-brand); box-shadow: 0 0 0 3px var(--tdsp-brand-soft); }
        .tdsp-assignee-select {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            font-size: 13px;
        }
        .tdsp-assignee-select:disabled { cursor: not-allowed; }
        .tdsp-assignee-av {
            flex: none;
            width: 28px;
            height: 28px;
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .tdsp-assignee-av.is-empty { border-radius: 50%; background: var(--tdsp-soft); color: var(--tdsp-mut); }
        .tdsp-assignee-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
        .tdsp-assignee-name { font-size: 12.5px; font-weight: 700; color: var(--tdsp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tdsp-assignee-role { font-size: 11.5px; color: var(--tdsp-mut); }
        .tdsp-assignee-role.is-custom { color: #2f6f3e; }
        body.dark-mode .tdsp-assignee-role.is-custom { color: #86efac; }
        .tdsp-assignee-action { flex: none; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--tdsp-brand); }

        /* Chân bảng */
        .tdsp-footer {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px 8px 8px;
            background: var(--card-bg, #ffffff);
            border-top: 1px solid var(--tdsp-line);
            box-shadow: 0 -4px 12px rgba(23, 33, 30, .05);
        }
        body.dark-mode .tdsp-footer { background: var(--xv-s1, #121e1b); box-shadow: none; }
        .tdsp-footer-spacer { flex: 1; }
        .tdsp-btn-delete {
            height: 32px;
            padding: 0 8px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--tdsp-danger);
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .tdsp-btn-delete:hover { background: var(--tdsp-bad-bg); }
        .tdsp-btn-cancel {
            height: 32px;
            padding: 0 14px;
            border: 1px solid var(--tdsp-field);
            border-radius: 8px;
            background: transparent;
            color: var(--tdsp-ink);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
        }
        .tdsp-btn-cancel:hover { background: var(--tdsp-soft); }
        .tdsp-btn-save {
            height: 32px;
            padding: 0 16px;
            border: none;
            border-radius: 8px;
            background: var(--tdsp-brand);
            color: var(--tdsp-on-brand);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: filter .15s ease;
        }
        .tdsp-btn-save:hover { filter: brightness(1.08); }

        /* Chặn quy tắc input toàn cục (căn giữa, viền trong suốt ở dark mode, vòng focus xanh dương) */
        #task-detail-side-panel .tdsp-input-text,
        #task-detail-side-panel .tdsp-textarea { text-align: left; margin: 0; }
        #task-detail-side-panel .tdsp-name-input { margin-left: -8px; }
        #task-detail-side-panel .tdsp-input-text:focus,
        #task-detail-side-panel .tdsp-textarea:focus {
            outline: none;
            border-color: var(--tdsp-brand) !important;
            box-shadow: none !important;
        }
        body.dark-mode #task-detail-side-panel .tdsp-input-text,
        body.dark-mode #task-detail-side-panel .tdsp-textarea,
        body.dark-mode #task-detail-side-panel .tdsp-input-text:focus,
        body.dark-mode #task-detail-side-panel .tdsp-textarea:focus {
            background-color: var(--xv-s0, #0d1715) !important;
            color: var(--tdsp-ink) !important;
            border-radius: 8px;
        }
        body.dark-mode #task-detail-side-panel .tdsp-input-text,
        body.dark-mode #task-detail-side-panel .tdsp-textarea { border: 1px solid var(--tdsp-field) !important; }
        body.dark-mode #task-detail-side-panel .tdsp-block .tdsp-input-text,
        body.dark-mode #task-detail-side-panel .tdsp-block .tdsp-textarea { border-color: var(--tdsp-blk-line) !important; }
        body.dark-mode #task-detail-side-panel #tdsp-new-chk-input { border-style: dashed !important; }
        body.dark-mode #task-detail-side-panel #tdsp-new-chk-input:focus { border-style: solid !important; }
        body.dark-mode #task-detail-side-panel .tdsp-name-input { background-color: var(--tdsp-soft) !important; border-color: transparent !important; }
        body.dark-mode #task-detail-side-panel .tdsp-name-input:hover { border-color: var(--tdsp-field) !important; }
        body.dark-mode #task-detail-side-panel .tdsp-stepper-val,
        body.dark-mode #task-detail-side-panel .tdsp-stepper-val:focus {
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: var(--tdsp-ink) !important;
        }

        /* STYLING HẠNG MỤC PHÂN CẤP CHA - CON - MỐC (SAAS PRO ELEVATION) */
        .main-task td {
            background-color: var(--highlight) !important;
            border-top: 1.5px solid var(--border-color) !important;
            border-bottom: 1.5px solid var(--border-color) !important;
            font-weight: 700 !important;
        }
        /* [2026-08-22] Đã bỏ vạch 4px màu thương hiệu ở mép trái. Hạng mục cha vẫn còn
           thừa dấu hiệu để nhận ra: nền xám nhạt, viền trên/dưới 1,5px, chữ IN HOA và
           đậm hơn hẳn hàng con. Thêm một vạch đậm nữa chỉ làm cột nặng mắt. */
        .main-task:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-task {
            box-shadow: 3px 0 8px rgba(0,0,0,0.06) !important;
        }
        .main-task .task-name-edit {
            font-weight: 700 !important;
            text-transform: uppercase !important;
            font-size: 11.5px !important;
            color: var(--text-color) !important;
            letter-spacing: 0.25px;
            line-height: 1.36 !important;
        }

        .sub-task:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-task {
            padding-left: 18px !important; 
            box-shadow: 3px 0 8px rgba(0,0,0,0.04) !important;
        }
        .sub-task .task-name-edit {
            font-weight: 400 !important;
            font-size: 12px !important;
            line-height: 1.36 !important;
            color: var(--text-color) !important;
        }
        
        /* Vạch 4px xanh ở mép trái cũng bỏ luôn cho đồng bộ với hạng mục cha. Mốc vẫn
           nhận ra được bằng chữ nghiêng màu xanh. */
        .milestone-task:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-task {
            padding-left: 18px !important;
            box-shadow: 3px 0 8px rgba(0,0,0,0.04) !important;
        }
        .milestone-task .task-name-edit {
            font-style: italic !important;
            font-weight: 500 !important;
            color: #2563eb !important;
            font-size: 12px !important;
            line-height: 1.36 !important;
        }

        /* HOVER TOÀN DÒNG (ZEBRA HOVER EFFECT) */
        #table-body tr:hover td:not(.col-task) {
            background-color: var(--highlight) !important;
        }
        #table-body tr:hover td.col-task {
            background-color: var(--highlight) !important;
        }

        .day-mode-cell { font-size: 8px !important; }

        /* MÀU NỀN CỘT TRẠNG THÁI (ĐỒNG BỘ HIỆN ĐẠI SAAS) */
        .status-select { 
            width: 92%; 
            margin: 0 auto;
            height: 24px;
            font-size: 11px; 
            font-weight: 700; /* 800 -> 700 cho khớp ô tên hạng mục (11px/700) */
            text-align: center; 
            cursor: pointer; 
            border: 1px solid transparent; 
            appearance: none; 
            -webkit-appearance: none; 
            outline: none; 
            line-height: 22px; 
            box-sizing: border-box; 
            border-radius: 6px !important; 
            color: var(--text-color); 
            display: block;
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .status-select:hover {
            transform: scale(1.02);
        }
        
        tr[data-status="pending"] td.col-status select { background: #f1f5f9; border: 1px dashed #94a3b8; color: #475569; }
        tr[data-status="waiting"] td.col-status select { background: #f3e8ff; border: 1px solid #c084fc; color: #6b21a8; }
        tr[data-status="inprogress"] td.col-status select { background: #dbeafe; color: #1e40af; border: 1px solid #60a5fa;}
        tr[data-status="inspection"] td.col-status select { background: #e0e7ff; color: #3730a3; border: 1px solid #818cf8; }
        tr[data-status="delayed"] td.col-status select { background: #ffedd5; color: #9a3412; border: 1px solid #fb923c; font-weight: 800; }
        tr[data-status="paused"] td.col-status select { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1;}
        tr[data-status="done"] td.col-status select { background: #dcfce7; color: #166534; border: 1px solid #4ade80; }
        tr[data-status="overdue"] td.col-status select { background: #fee2e2; color: #991b1b; border: 1px solid #f87171;}
        tr[data-status="cancelled"] td.col-status select { background: #f3f4f6; color: #9ca3af; border: 1px solid #d1d5db; text-decoration: line-through; }
        tr[data-status="cancelled"] .task-name-edit {
            text-decoration: line-through !important;
            opacity: 0.6 !important;
        }

        /* NỔI BẬT HẠNG MỤC CHẬM TIẾN ĐỘ (CHỈ ÁP DỤNG HẠNG MỤC CON/MỐC, HẠNG MỤC CHÍNH KHÔNG ĐỔI MÀU, BỎ ICON ) */
        tr:not(.main-task)[data-status="delayed"] td.col-task,
        tr:not(.main-task)[data-status="overdue"] td.col-task {
            background-color: #fff7ed !important;
        }
        tr:not(.main-task)[data-status="delayed"] .task-name-edit,
        tr:not(.main-task)[data-status="overdue"] .task-name-edit {
            color: #c2410c !important;
            font-weight: 700 !important;
        }
        body.dark-mode tr:not(.main-task)[data-status="delayed"] td.col-task,
        body.dark-mode tr:not(.main-task)[data-status="overdue"] td.col-task {
            background-color: #3b1908 !important;
        }
        body.dark-mode tr:not(.main-task)[data-status="delayed"] .task-name-edit,
        body.dark-mode tr:not(.main-task)[data-status="overdue"] .task-name-edit {
            color: #fb923c !important;
        }

        /* ================= THANH GANTT TIMELINE DẠNG PILL NỔI BỔNG (CHUẨN GANTTPRO / CLICKUP) ================= */
        td.week-cell { 
            position: relative; 
            border: none !important;
            border-right: 1px solid #e2e8f0 !important;
            border-bottom: 1px solid #e2e8f0 !important;
            background-color: #ffffff; 
            background-clip: padding-box;
            vertical-align: middle !important; 
            padding: 0 !important; 
            height: 34px; 
            max-width: 0 !important;
            overflow: visible !important;
        }
        td.week-cell.weekend-cell { background-color: #f8fafc; }
        td.week-cell.today-col { background-color: #f1f5f9; }

        /* BỎ ĐƯỜNG KẺ DỌC CẮT RẠCH THANH TIẾN ĐỘ (SEAMLESS CONTINUOUS GANTT BAR) */
        td.week-cell.active-sub:not(.active-bar-end),
        td.week-cell.active-milestone:not(.active-bar-end),
        tr.main-task[data-collapsed="true"] td.week-cell.active-main:not(.active-bar-end) {
            border-right: none !important;
        }
        td.week-cell.active-sub:not(.active-bar-start),
        td.week-cell.active-milestone:not(.active-bar-start),
        tr.main-task[data-collapsed="true"] td.week-cell.active-main:not(.active-bar-start) {
            border-left: none !important;
        }

        /* Floating Pill Bar Pseudo-Element - ĐỒNG BỘ ĐỘ CAO CHUẨN 20PX CHO MỌI HÀNG (TRÁNH PHÌNH TO KHI XUỐNG DÒNG) */
        td.week-cell.active-sub::after,
        td.week-cell.active-milestone::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 20px;
            left: -1px;
            right: -1px;
            background: #3b82f6 !important; /* Sky Blue Gantt Pill */
            box-shadow: 0 2px 5px rgba(59, 130, 246, 0.35);
            z-index: 5;
            pointer-events: none;
            box-sizing: border-box;
        }

        /* Vùng mép vẫn hỗ trợ co giãn bằng con trỏ; không vẽ vạch tay nắm trên timeline. */
        td.week-cell.active-bar-end::before {
            content: none;
            display: none;
        }

        tr.gantt-dragging-row {
            background-color: rgba(59, 130, 246, 0.08) !important;
        }
        tr.gantt-dragging-row td {
            background-color: transparent !important;
        }

        #gantt-drag-tooltip {
            position: fixed;
            display: none;
            pointer-events: none;
            z-index: 999999;
            background: #0f172a;
            color: #f8fafc;
            padding: 5px 10px;
            border-radius: 7px;
            font-size: 11px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.15);
            transform: translate(-50%, -135%);
            white-space: nowrap;
            letter-spacing: 0.2px;
        }
        #gantt-drag-tooltip .gdt-dates {
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
            color: #e2e8f0;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        #gantt-drag-tooltip .gdt-badge {
            display: inline-block;
            background: rgba(56, 189, 248, 0.2);
            color: #38bdf8;
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            margin-left: 6px;
        }

        tr.print-stage-hidden {
            display: none !important;
        }

        /* HẠNG MỤC CHÍNH (MAIN TASK): Mặc định ẨN thanh timeline (vì đã có các hạng mục con thể hiện) */
        tr.main-task td.week-cell.active-main::after {
            display: none !important;
        }

        /* HẠNG MỤC CHÍNH: CHỈ HIỂN THỊ thanh timeline khi BẤM THU GỌN (ẩn hạng mục con) */
        /* Mặc định trùng màu ĐANG LÀM (Sky Blue #3b82f6) */
        tr.main-task[data-collapsed="true"] td.week-cell.active-main::after {
            display: block !important;
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 20px;
            left: -2px;
            right: -2px;
            background: #3b82f6 !important; /* Mặc định: Trùng màu Đang làm */
            box-shadow: 0 2px 5px rgba(59, 130, 246, 0.35);
            z-index: 5;
            pointer-events: none;
            box-sizing: border-box;
        }

        /* Khi tất cả hạng mục con XONG (Done) -> Trùng màu XONG (Emerald #10b981) */
        tr.main-task[data-collapsed="true"][data-status="done"] td.week-cell.active-main::after {
            background: #10b981 !important;
            box-shadow: 0 2px 5px rgba(16, 185, 129, 0.35) !important;
        }

        /* Khi có hạng mục con CHẬM TIẾN ĐỘ -> Trùng màu Chậm TĐ (Orange #f97316) */
        tr.main-task[data-collapsed="true"][data-status="delayed"] td.week-cell.active-main::after,
        tr.main-task[data-collapsed="true"][data-status="overdue"] td.week-cell.active-main::after {
            background: #f97316 !important;
            box-shadow: 0 2px 5px rgba(249, 115, 22, 0.45) !important;
        }

        /* Khi tạm dừng -> Xám #64748b */
        tr.main-task[data-collapsed="true"][data-status="paused"] td.week-cell.active-main::after {
            background: #64748b !important;
            box-shadow: none !important;
        }

        /* Khi nghiệm thu -> Tím #6366f1 */
        tr.main-task[data-collapsed="true"][data-status="inspection"] td.week-cell.active-main::after {
            background: #6366f1 !important;
            box-shadow: 0 2px 5px rgba(99, 102, 241, 0.35) !important;
        }

        /* Bo góc tròn 6px ở đầu và cuối thanh Gantt */
        td.week-cell.active-bar-start::after {
            border-top-left-radius: 6px !important;
            border-bottom-left-radius: 6px !important;
            left: 3px !important;
        }

        td.week-cell.active-bar-end::after {
            border-top-right-radius: 6px !important;
            border-bottom-right-radius: 6px !important;
            right: 3px !important;
        }

        /* ĐỔI MÀU THANH TIMELINE DỘNG THEO TRẠNG THÁI (STATUS-DRIVEN COLORS) */
        tr[data-status="delayed"] td.week-cell.active-sub::after,
        tr[data-status="delayed"] td.week-cell.active-milestone::after {
            background: #f97316 !important; /* Cam cảnh báo Chậm tiến độ */
            box-shadow: 0 1px 4px rgba(249, 115, 22, 0.45) !important;
        }

        tr[data-status="done"] td.week-cell.active-sub::after,
        tr[data-status="done"] td.week-cell.active-milestone::after {
            background: #10b981 !important; /* Xanh lá Hoàn thành */
            box-shadow: 0 1px 3px rgba(16, 185, 129, 0.35) !important;
        }

        tr[data-status="inspection"] td.week-cell.active-sub::after,
        tr[data-status="inspection"] td.week-cell.active-milestone::after {
            background: #6366f1 !important; /* Xanh Tím Nghiệm thu */
            box-shadow: 0 1px 3px rgba(99, 102, 241, 0.35) !important;
        }

        tr[data-status="paused"] td.week-cell.active-sub::after,
        tr[data-status="paused"] td.week-cell.active-milestone::after {
            background: #64748b !important; /* Xám Tạm dừng */
            box-shadow: none !important;
        }

        tr[data-status="cancelled"] td.week-cell.active-sub::after,
        tr[data-status="cancelled"] td.week-cell.active-milestone::after {
            background: #9ca3af !important; /* Xám nhạt Hủy */
            box-shadow: none !important;
        }

        /* HIỂN THỊ MỐC CHUẨN GANTTPRO (DIAMOND ICON + TEXT BÊN PHẢI KHÔNG TÔ NỀN) */
        tr.milestone-task td.week-cell::after { display: none !important; }
        td.week-cell.milestone-deadline { position: relative !important; overflow: visible !important; max-width: 0 !important; }
        td.week-cell.milestone-deadline::after { display: none !important; }

        /* [QUAN TRỌNG] Đặt width: 0 & max-width: 0 để trình duyệt KHÔNG tính toán độ rộng chữ mốc vào độ rộng cột */
        .ms-diamond-container {
            position: absolute !important;
            left: 2px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 5px !important;
            z-index: 6 !important;
            white-space: nowrap !important;
            pointer-events: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            height: 0 !important;
            overflow: visible !important;
        }

        /* Khi mốc ở gần mép phải cuối cùng (bàn giao), lật chữ mốc sang bên TRÁI viên kim cương để không làm tràn khung cuộn và không tạo khoảng trống */
        .ms-diamond-container.ms-flip-left {
            left: auto !important;
            right: 4px !important;
            direction: rtl !important;
        }
        .ms-diamond-container.ms-flip-left .ms-timeline-label {
            direction: ltr !important;
        }

        .ms-diamond-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            color: #2563eb;
            line-height: 1;
            flex-shrink: 0;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
        }
        tr[data-status="delayed"] .ms-diamond-icon {
            color: #ea580c !important;
        }

        .ms-timeline-label {
            font-size: 11.5px;
            font-weight: 600;
            color: #1e3a8a;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.92) !important;
            padding: 1px 6px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
            border: 1px solid rgba(37, 99, 235, 0.22);
            pointer-events: auto;
            backdrop-filter: blur(2px);
        }
        tr[data-status="delayed"] .ms-timeline-label {
            color: #9a3412 !important;
            border-color: rgba(234, 88, 12, 0.35) !important;
            background: rgba(255, 247, 237, 0.95) !important;
        }

        /* PHONG CÁCH HẠNG MỤC MỐC NGHIỆM THU (THANH MẢNH, IN NGHIÊNG, KHÔNG TÔ ĐẬM) */
        .milestone-task .task-name-edit {
            font-size: 12px !important;
            font-style: italic !important;
            font-weight: 500 !important;
            color: #2563eb !important;
            text-decoration: none !important;
        }
        .milestone-task .task-name-edit::before {
            content: "◆ " !important;
            color: #2563eb !important;
            font-style: normal !important;
            font-weight: 400 !important;
        }
        body.dark-mode .milestone-task .task-name-edit {
            color: #60a5fa !important;
            font-style: italic !important;
            font-weight: 400 !important;
        }

        /* SOI LIÊN KẾT PHỤ THUỘC: VỊ TRÍ RÊ CHUỘT BO VIỀN NÉT ĐỨT; CÁC VIỆC LIÊN QUAN TRƯỚC/SAU CÙNG TONE XANH NHẸ */
        /* 1. Vị trí đang rê chuột (Self) -> viền nét đứt bo tròn giống icon phụ trách khi chưa gán */
        tr.dep-highlight-self td.col-dep .dep-trigger-btn {
            border: 1px dashed #cbd5e1 !important;
            background: #f1f5f9 !important;
            box-shadow: none !important;
        }
        tr.dep-highlight-self td.col-dep .dep-trigger-btn svg {
            stroke: #475569 !important;
        }
        tr.dep-highlight-self td.col-dep .dep-trigger-btn.is-linked {
            background: #f1f5f9 !important;
            border: 1px dashed #cbd5e1 !important;
            box-shadow: none !important;
        }
        tr.dep-highlight-self td.col-dep .dep-trigger-btn.is-linked:not(.is-ss):not(.is-lead) svg {
            stroke: #2563eb !important;
        }
        tr.dep-highlight-self td.col-dep .dep-trigger-btn.is-linked.is-ss svg {
            stroke: #7c3aed !important;
            fill: #7c3aed !important;
        }
        tr.dep-highlight-self td.col-dep .dep-trigger-btn.is-linked.is-lead svg {
            stroke: #b45309 !important;
            fill: none !important;
        }

        /* 2. Các việc phụ thuộc nó hoặc nó phụ thuộc (Parent & Child) -> CÙNG MỘT HIỆU ỨNG TONE XANH NHẸ */
        tr.dep-highlight-parent td.col-dep .dep-trigger-btn,
        tr.dep-highlight-child td.col-dep .dep-trigger-btn {
            border: 1px dashed #93c5fd !important;
            background: #f0f9ff !important;
            box-shadow: none !important;
        }
        tr.dep-highlight-parent td.col-dep .dep-trigger-btn svg,
        tr.dep-highlight-child td.col-dep .dep-trigger-btn svg {
            stroke: #0284c7 !important;
        }

        /* Dark mode */
        body.dark-mode tr.dep-highlight-self td.col-dep .dep-trigger-btn {
            border: 1px dashed rgba(255, 255, 255, 0.22) !important;
            background: rgba(255, 255, 255, 0.08) !important;
            box-shadow: none !important;
        }
        body.dark-mode tr.dep-highlight-self td.col-dep .dep-trigger-btn svg {
            stroke: #cbd5e1 !important;
        }
        body.dark-mode tr.dep-highlight-self td.col-dep .dep-trigger-btn.is-linked:not(.is-ss):not(.is-lead) svg {
            stroke: #93c5fd !important;
        }
        body.dark-mode tr.dep-highlight-self td.col-dep .dep-trigger-btn.is-linked.is-ss svg {
            stroke: #d8b4fe !important;
            fill: #d8b4fe !important;
        }
        body.dark-mode tr.dep-highlight-self td.col-dep .dep-trigger-btn.is-linked.is-lead svg {
            stroke: #fcd34d !important;
        }
        body.dark-mode tr.dep-highlight-parent td.col-dep .dep-trigger-btn,
        body.dark-mode tr.dep-highlight-child td.col-dep .dep-trigger-btn {
            border: 1px dashed rgba(56, 189, 248, 0.4) !important;
            background: rgba(2, 132, 199, 0.18) !important;
            box-shadow: none !important;
        }
        body.dark-mode tr.dep-highlight-parent td.col-dep .dep-trigger-btn svg,
        body.dark-mode tr.dep-highlight-child td.col-dep .dep-trigger-btn svg {
            stroke: #38bdf8 !important;
        }

        .gantt-legend { display: none; }
        /* ===== BẢNG GANTT DESKTOP — DESIGN HANDOFF 004 (07/09/2026) ===== */
        @media screen and (min-width: 761px) {
            #table-wrapper {
                background: #ffffff;
                border: 1px solid #e5e9ef;
                border-radius: 10px;
                overflow: auto;
            }
            #timeline-table { min-width: 1380px; background: #ffffff; }
            #timeline-table th, #timeline-table td { border-color: #eef1f5; }
            #timeline-table thead { position: sticky; top: 0; z-index: 20; }
            #month-header-row > th { position: sticky; top: 0; height: 24px; z-index: 20; background: #fbfcfd !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
            #week-header-row > th { position: sticky; top: 24px; z-index: 20; background: #fbfcfd; border-bottom-color: #e5e9ef !important; }
            #month-header-row > th[rowspan="2"] { z-index: 24 !important; }
            #month-header-row > th#th-col-progress { z-index: 25 !important; }

            #timeline-table .col-dep { width: 30px; min-width: 30px; max-width: 30px; }
            #timeline-table .col-task { width: var(--w-task); min-width: var(--w-task); max-width: var(--w-task); }
            #timeline-table .col-note { width: var(--w-note); min-width: var(--w-note); max-width: var(--w-note); }
            #timeline-table .col-date { width: var(--w-date); min-width: var(--w-date); max-width: var(--w-date); }
            #timeline-table .col-days { width: var(--w-days); min-width: var(--w-days); max-width: var(--w-days); }
            #timeline-table .col-status { width: var(--w-status); min-width: var(--w-status); max-width: var(--w-status); }
            #timeline-table .col-progress { width: 61px; min-width: 61px; max-width: 61px; }
            #timeline-table tbody .col-dep,
            #timeline-table tbody .col-task,
            #timeline-table tbody .col-note,
            #timeline-table tbody .col-date,
            #timeline-table tbody .col-days,
            #timeline-table tbody .col-status { z-index: 12 !important; background: #ffffff !important; }
            #timeline-table tbody td:not(.week-cell) { padding-top:1px; padding-bottom:1px; }
            #timeline-table tbody .col-progress { z-index: 13 !important; background: #ffffff !important; border-right-color: #cfe4dc !important; box-shadow: 5px 0 7px -5px rgba(15,23,42,.10) !important; }
            #timeline-table tbody tr.main-task > td:not(.week-cell) { background: #fbfcfd !important; }
            #timeline-table tbody tr:hover > td:not(.week-cell) { background: #f5faf8 !important; }
            #timeline-table tbody tr.main-task:hover > td:not(.week-cell) { background: #f2f7f5 !important; }

            #timeline-table td.week-cell { height: var(--gantt-row-height); min-height: var(--gantt-row-height); background: #ffffff; border-color: #eef1f5 !important; }
            #timeline-table td.week-cell.weekend-cell { background: #f1f5f9; }
            #timeline-table td.week-cell.today-col { background: #ffffff; }
            #timeline-table tbody tr:hover td.week-cell { background: #f5faf8 !important; }
            #timeline-table tbody tr:hover td.week-cell.weekend-cell { background: #ebf1f0 !important; }
            #timeline-table td.week-cell::after,
            #timeline-table tr.main-task[data-collapsed="true"] td.week-cell.active-main::after {
                display:none !important;
            }
            .gantt-continuous-bar { position:absolute; top:50%; left:3px; width:calc(var(--gantt-span, 1) * 100% - 6px); height:var(--gantt-bar-height); transform:translateY(-50%); z-index:5; border-radius:6px; background:var(--gantt-bar-color,#3b82f6); box-sizing:border-box; pointer-events:none; }
            #timeline-table tr[data-status="pending"] { --gantt-bar-color:#94a3b8; --gantt-bar-soft:#f1f5f9; --status-bg:#f8fafc;  }
            #timeline-table tr[data-status="waiting"] { --gantt-bar-color:#a855f7; --gantt-bar-soft:#f3e8ff; --status-bg:#faf5ff;  }
            #timeline-table tr[data-status="inprogress"] { --gantt-bar-color:#3b82f6; --gantt-bar-soft:#dbeafe; --status-bg:#eff6ff;  }
            #timeline-table tr[data-status="inspection"] { --gantt-bar-color:#6366f1; --gantt-bar-soft:#e0e7ff; --status-bg:#eef2ff;  }
            #timeline-table tr[data-status="delayed"], #timeline-table tr[data-status="overdue"] { --gantt-bar-color:#f97316; --gantt-bar-soft:#ffedd5; --status-bg:#fff7ed;  }
            #timeline-table tr[data-status="paused"] { --gantt-bar-color:#64748b; --gantt-bar-soft:#e2e8f0; --status-bg:#f8fafc;  }
            #timeline-table tr[data-status="done"] { --gantt-bar-color:#10b981; --gantt-bar-soft:#d1fae5; --status-bg:#f0fdf4;  }
            #timeline-table tr[data-status="cancelled"] { --gantt-bar-color:#cbd5e1; --gantt-bar-soft:#f1f5f9; --status-bg:#f8fafc;  }
            #timeline-table tr[data-status] .status-select { width:100%; height:21px; padding:0 12px; border-radius:5px !important; border:1px solid transparent !important; background-color:var(--status-bg) !important; background-image:radial-gradient(circle, var(--gantt-bar-color) 0 3px, transparent 3.5px); background-repeat:no-repeat; background-position:5px 50%; color:#334155 !important; font-size:10.5px; font-weight:600; text-align:center; line-height:19px; }
            #timeline-table td.col-status::after { content:"⌄"; position:absolute; right:7px; top:50%; transform:translateY(-58%); font-size:11px; color:#64748b; opacity:0; pointer-events:none; transition:opacity .15s; }
            #timeline-table tbody tr:hover td.col-status::after { opacity:1; }
            #timeline-table .progress-cell-pill { width:100%; height:21px; border-radius:5px; }

            #timeline-table[data-gantt-style="outline-name"] .gantt-continuous-bar {
                background:var(--gantt-bar-soft);
                border:1.5px solid var(--gantt-bar-color);
            }
            #timeline-table[data-gantt-style="progress"] .gantt-continuous-bar,
            #timeline-table[data-gantt-style="progress-dates"] .gantt-continuous-bar {
                background:linear-gradient(to right,var(--gantt-bar-color) 0 var(--gantt-progress,0%),var(--gantt-bar-soft) var(--gantt-progress,0%) 100%);
                border:1.5px solid var(--gantt-bar-color);
            }
            #timeline-table[data-gantt-style="outline-name"] { --gantt-bar-height:max(18px, var(--gantt-user-bar-height, 14px)); }
            .gantt-inline-label { position:absolute; top:50%; transform:translateY(-50%); z-index:7; white-space:nowrap; font-size:10.5px; font-weight:600; color:#334155; pointer-events:none; }
            .gantt-inline-label.after { left:calc(100% + 6px); }
            .gantt-inline-label.before { right:calc(100% + 6px); text-align:right; }
            .gantt-inline-label.inside { left:9px; max-width:calc(400% - 12px); overflow:hidden; text-overflow:ellipsis; color:#1f2937; }

            #today-line-overlay { background:var(--today-line-color, #de7228); opacity:1; z-index:8; }
            #today-line-label { display:none !important; }
            #week-header-row th.today-col { background:var(--brand-accent-tint, #fff7ed) !important; color:var(--brand-accent-text, #9a4a12) !important; }
            #week-header-row th.today-col::after { content:""; position:absolute; top:0; bottom:0; left:50%; margin-left:-1px; width:2px; background:var(--today-line-color, #de7228); z-index:1; pointer-events:none; }
            .weekend-header { background:#f1f5f9 !important; color:#1d4ed8 !important; }
            .weekend-header .day-name { color:#2563eb; }


            .gantt-master-resizer { top:0; right:0; bottom:auto; width:14px; height:100%; min-height:48px; padding:5px 0; box-sizing:border-box; flex-direction:column; justify-content:flex-start; gap:4px; color:var(--xv-c1, #20564c); background:transparent; transition:background .15s ease; }
            .gantt-master-resizer:hover, body.gantt-resizer-active .gantt-master-resizer { background:rgba(var(--xv-c1-rgb, 32,86,76),.10); }
            .master-resizer-dots { display:flex; flex-direction:column; gap:3px; opacity:0; transition:opacity .12s ease; }
            .master-resizer-dots i { width:3px; height:3px; border-radius:50%; background:var(--xv-c1, #20564c); }
            .gantt-master-resizer:hover .master-resizer-dots, body.gantt-resizer-active .gantt-master-resizer .master-resizer-dots { opacity:1; }
            body.gantt-resizer-active th#th-col-progress, body.gantt-resizer-active td.col-progress,
            body.gantt-master-resizing th#th-col-progress, body.gantt-master-resizing td.col-progress { border-right-color:var(--xv-c1, #20564c) !important; transition:border-color .18s ease; }
            body.split-pane-collapsed { --w-task: clamp(240px, 16vw, 320px) !important; }

            .gantt-style-wrap { position:relative; display:inline-flex; }
            .btn-gantt-style { height:28px; display:inline-flex; align-items:center; gap:5px; padding:0 8px; border:1px solid var(--border-color); border-radius:6px; background:var(--card-bg); color:var(--text-color); cursor:pointer; }
            .btn-gantt-style:hover { border-color:#9db8b0; background:#f5faf8; }
            .gantt-style-caption { font-size:9px; font-weight:800; color:var(--note-color); text-transform:uppercase; letter-spacing:.04em; }
            #gantt-style-label { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; }
            .gantt-style-menu { display:none; position:absolute; top:calc(100% + 5px); right:0; width:278px; padding:5px; border:1px solid #dbe1ea; border-radius:8px; background:#fff; box-shadow:0 10px 26px rgba(15,23,42,.14); z-index:300; }
            .gantt-style-menu.open { display:block; }
            .gantt-style-option { width:100%; display:grid; grid-template-columns:34px 1fr 16px; align-items:center; gap:7px; min-height:34px; padding:5px 7px; border:0; border-radius:6px; background:transparent; color:#334155; text-align:left; cursor:pointer; }
            .gantt-style-option:hover { background:#f5faf8; }
            .gantt-style-sample { position:relative; height:10px; border-radius:4px; background:var(--sample-color,#3b82f6); }
            .gantt-style-option[data-style="outline-name"] .gantt-style-sample,
            .gantt-style-option[data-style="progress"] .gantt-style-sample,
            .gantt-style-option[data-style="progress-dates"] .gantt-style-sample { border:1px solid #3b82f6; background:linear-gradient(90deg,#3b82f6 0 45%,#dbeafe 45% 100%); }
            .gantt-style-check { color:var(--xv-c1, #20564c); font-weight:900; }
            .gantt-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:10px; font-size:10.5px; color:#64748b; }
            .gantt-legend span { display:inline-flex; align-items:center; gap:5px; }
            .gantt-legend i:not(.legend-today) { width:10px; height:10px; border-radius:3px; background:var(--legend-color); }
            .gantt-legend .legend-today { width:2px; height:11px; background:var(--today-line-color, #de7228); }
            .legend-milestone { color:#2563eb; font-size:11px; }

            body.dark-mode #table-wrapper, body.dark-mode #timeline-table { background:var(--xv-s1, #111e1b); border-color:var(--xv-s2, #243b37); }
            body.dark-mode #timeline-table th, body.dark-mode #timeline-table td { border-color:var(--xv-s2, #1b2f2b); }
            body.dark-mode #month-header-row > th, body.dark-mode #week-header-row > th { background:var(--xv-s6, #152321) !important; color:#94a3b8; }
            body.dark-mode #timeline-table tbody .col-dep, body.dark-mode #timeline-table tbody .col-task, body.dark-mode #timeline-table tbody .col-note, body.dark-mode #timeline-table tbody .col-date, body.dark-mode #timeline-table tbody .col-days, body.dark-mode #timeline-table tbody .col-status, body.dark-mode #timeline-table tbody .col-progress { background:var(--xv-s1, #111e1b) !important; }
            body.dark-mode #timeline-table tbody tr.main-task > td:not(.week-cell) { background:var(--xv-s6, #152321) !important; }
            body.dark-mode #timeline-table tbody tr:hover > td:not(.week-cell) { background:var(--xv-s3, #162723) !important; }
            body.dark-mode #timeline-table tbody tr.main-task:hover > td:not(.week-cell) { background:var(--xv-s4, #1a2c28) !important; }
            body.dark-mode #timeline-table td.week-cell, body.dark-mode #timeline-table td.week-cell.today-col { background:var(--xv-s1, #111e1b); }
            body.dark-mode #timeline-table td.week-cell.weekend-cell { background:var(--xv-s5, #0f1d1a); }
            body.dark-mode #timeline-table tbody tr:hover td.week-cell { background:var(--xv-s3, #162723) !important; }
            body.dark-mode #timeline-table tbody tr:hover td.week-cell.weekend-cell { background:var(--xv-s6, #132522) !important; }
            body.dark-mode #timeline-table tr[data-status] .status-select { color:#cbd5e1 !important; background-color:color-mix(in srgb,var(--gantt-bar-color) 14%,var(--xv-s1, #111e1b)) !important; border-color:transparent !important; }
            body.dark-mode .gantt-inline-label { color:#cbd5e1; }
            body.dark-mode .gantt-inline-label.inside { color:#e2e8f0; }
            body.dark-mode #today-line-overlay, body.dark-mode #week-header-row th.today-col::after, body.dark-mode .gantt-legend .legend-today { background:var(--today-line-color, #fb923c); }
            body.dark-mode #week-header-row th.today-col { background:var(--xv-s6, #152321) !important; color:var(--today-line-color, #fb923c) !important; }
            body.dark-mode .gantt-master-resizer { color:var(--xv-d1, #34d399); }
            /* Đường ngăn giữa bảng và biểu đồ (cạnh phải cột %): luật chế độ sáng viết cứng #cfe4dc !important nên ở chế độ tối thành một vạch sáng thô. Dịu lại bằng màu viền tối;
               không áp dụng khi đang kéo thanh chia hoặc rê chuột vào nó (các trạng thái đó có luật đánh dấu riêng). */
            body.dark-mode:not(.gantt-master-resizing):not(.gantt-resizer-active) #timeline-table:not(:has(.gantt-master-resizer:hover)) th.col-progress,
            body.dark-mode:not(.gantt-master-resizing):not(.gantt-resizer-active) #timeline-table:not(:has(.gantt-master-resizer:hover)) tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-progress,
            body.dark-mode:not(.gantt-master-resizing):not(.gantt-resizer-active) #timeline-table:not(:has(.gantt-master-resizer:hover)) tbody .col-progress { border-right-color: var(--xv-s7, #2f4a44) !important; box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.45) !important; }
            body.dark-mode .gantt-master-resizer:hover, body.dark-mode.gantt-resizer-active .gantt-master-resizer { background:rgba(var(--xv-d1-rgb, 52,211,153),.14); }
            body.dark-mode .btn-gantt-style { background:var(--xv-s6, #152321); border-color:var(--xv-s7, #2b3f3b); }
            body.dark-mode .btn-gantt-style:hover { background:var(--xv-s4, #1a2c28); border-color:#4a5f5a; }
            body.dark-mode .gantt-style-menu { background:var(--xv-s1, #111e1b); border-color:var(--xv-s2, #243b37); box-shadow:0 12px 30px rgba(0,0,0,.55); }
            body.dark-mode .gantt-style-option { color:#cbd5e1; }
            body.dark-mode .gantt-style-option:hover { background:var(--xv-s3, #162723); }
            body.dark-mode .gantt-style-check { color:var(--xv-d1, #34d399); }
            body.dark-mode .gantt-legend { color:#94a3b8; }
        }

        /* Khi in ấn: Tuyệt đối không bao giờ in các hiệu ứng phụ thuộc này */
        @media print {
            tr.dep-highlight-self td,
            tr.dep-highlight-parent td,
            tr.dep-highlight-child td {
                background-color: transparent !important;
            }
        }

        th.today-col { background-color: var(--text-color) !important; color: #ffffff !important;}
        th.today-col .day-num, th.today-col .day-name { color: #ffffff !important; }
        th.weekend-header { background-color: #eff6ff !important; color: #2563eb !important; }
        th.weekend-header .day-num, th.weekend-header .day-name { color: #2563eb !important; }
        /* [FIX] Chữ tự co giãn theo mật độ số ngày hiển thị (--timeline-cols) — càng nhiều
           ngày, cột càng hẹp, chữ càng nhỏ dần thay vì đè chồng lên nhau không đọc được. */
        .day-mode-cell { font-size: 11px !important; line-height: 1.15 !important; padding: 2px 0 !important; }
        /* Sàn cỡ chữ nâng từ 6px/5px lên 8px/7px làm lưới an toàn: dù công thức co giãn có tính ra
           bao nhiêu thì nhãn cũng không bao giờ nhỏ tới mức không đọc được nữa. Việc giữ cho bảng
           không bị chật do labelStep lo (xem renderHeaders). */
        .day-mode-cell .day-num { font-weight: 600; font-size: clamp(8px, calc(2px + 240px / var(--timeline-cols, 30)), 10.5px); letter-spacing: -0.25px; font-variant-numeric: tabular-nums; display: block; }
        /* [UX-15] opacity 0.85 kéo nhãn thứ cuối tuần (#2563eb trên nền #eff6ff) xuống 3,70.
           Bỏ lớp mờ là đủ đạt 4,74 — không cần đổi màu, nên tông xanh cuối tuần giữ nguyên.
           Nhãn ngày thường vốn đã đạt, bỏ mờ chỉ làm chúng rõ hơn. Việc "làm nhạt bớt" đã do
           cỡ chữ nhỏ đảm nhiệm rồi, không cần chồng thêm opacity. */
        .day-mode-cell .day-name { font-weight: 500; font-size: clamp(7px, calc(1px + 180px / var(--timeline-cols, 30)), 8.5px); opacity: 1; display: block; letter-spacing: -0.2px; }
        /* Nhãn thưa (khi >45 ngày, chỉ hiện cách quãng): cho phép chữ tràn nhẹ ra ô trống bên
           cạnh thay vì bị cắt, vì bản thân cột vẫn rất hẹp dù chỉ 1/2/3/5 cột mới có 1 nhãn. */
        th.col-week.has-sparse-label { overflow: visible !important; z-index: 3; }
        th.col-week.has-sparse-label .day-num {
            font-size: 11px !important; font-weight: 600 !important; letter-spacing: -0.25px; font-variant-numeric: tabular-nums; white-space: nowrap; position: relative;
        }
        th.col-week.has-sparse-label .day-name {
            font-size: 8px !important; font-weight: 500 !important; letter-spacing: -0.2px; white-space: nowrap; position: relative;
        }
        td.week-cell.weekend-cell:not(.active-main):not(.active-sub):not(.active-milestone) { background-color: #f0f7ff !important; }
        td.week-cell.weekend-cell.today-col:not(.active-main):not(.active-sub):not(.active-milestone) { background-color: var(--highlight) !important; }

        /* TẮT GHI CHÚ (ẨN CỘT GHI CHÚ) */
        body.note-off-mode th.col-note,
        body.note-off-mode td.col-note {
            display: none !important;
        }
        body.note-off-mode {
            --w-note: 0px !important;
        }

        /* BẬT / TẮT PHỤ TRÁCH (ẨN / HIỆN CỘT PHỤ TRÁCH) */
        body.assignee-off-mode th.col-assignee,
        body.assignee-off-mode td.col-assignee {
            display: none !important;
        }
        body.assignee-off-mode {
            --w-assignee: 0px !important;
        }
        body.assignee-on-mode th.col-assignee,
        body.assignee-on-mode td.col-assignee {
            display: table-cell !important;
        }
        body.assignee-on-mode {
            --w-assignee: 110px !important;
        }

        /* TẮT TIẾN ĐỘ % (ẨN CỘT PHẦN TRĂM) */
        body.progress-off-mode th.col-progress,
        body.progress-off-mode td.col-progress {
            display: none !important;
        }
        body.progress-off-mode {
            --w-progress: 0px !important;
        }
        body.progress-off-mode th.col-status,
        body.progress-off-mode td.col-status {
            border-right: 1px solid var(--border-color) !important;
            box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.10) !important;
        }
        body.progress-off-mode.dark-mode th.col-status,
        body.progress-off-mode.dark-mode td.col-status {
            box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.45) !important;
        }

        /* Timeline thu gọn có bộ cột cố định và menu Cột bị ẩn: bỏ qua việc đã tắt Trạng thái; ô % (rộng 0, giữ thanh kéo chia bảng) vẫn phải hiện */
        body.split-pane-collapsed:not(.view-mode-data):not(.view-mode-kanban):not(.view-mode-report):not(.view-mode-materials).progress-off-mode th.col-progress,
        body.split-pane-collapsed:not(.view-mode-data):not(.view-mode-kanban):not(.view-mode-report):not(.view-mode-materials).progress-off-mode td.col-progress,
        body.split-pane-collapsed:not(.view-mode-data):not(.view-mode-kanban):not(.view-mode-report):not(.view-mode-materials).status-off-mode th.col-status,
        body.split-pane-collapsed:not(.view-mode-data):not(.view-mode-kanban):not(.view-mode-report):not(.view-mode-materials).status-off-mode td.col-status { display: table-cell !important; }
        body.split-pane-collapsed:not(.view-mode-data):not(.view-mode-kanban):not(.view-mode-report):not(.view-mode-materials).status-off-mode { --w-status: 88px !important; }

        /* TẮT TRẠNG THÁI (ẨN CỘT TRẠNG THÁI) */
        body.status-off-mode th.col-status,
        body.status-off-mode td.col-status {
            display: none !important;
        }
        body.status-off-mode {
            --w-status: 0px !important;
        }
        /* Khi tắt cả Trạng thái và Tiến độ %, cột Kết thúc trở thành mép phải bảng thông tin */
        body.status-off-mode.progress-off-mode th.col-date-end,
        body.status-off-mode.progress-off-mode td.col-date-end {
            border-right: 1px solid var(--border-color) !important;
            box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.10) !important;
        }
        body.status-off-mode.progress-off-mode.dark-mode th.col-date-end,
        body.status-off-mode.progress-off-mode.dark-mode td.col-date-end {
            box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.45) !important;
        }

        /* POPUP TÙY CHỈNH CỘT HIỂN THỊ (DROPDOWN POPOVER GỌN GÀNG) */
        .column-visibility-dropdown-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .btn-column-toggle-dropdown {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            padding: 3px 8px;
            cursor: pointer;
            border-radius: 5px;
            user-select: none;
            white-space: nowrap;
        }
        .badge-col-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1px 5px;
            font-size: 11px;
            font-weight: 700;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.08);
            color: #334155;
            line-height: 1.2;
            margin: 0 1px;
            transition: all 0.15s ease;
        }
        .badge-col-count.is-partial {
            background: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }
        body.dark-mode .badge-col-count {
            background: rgba(255, 255, 255, 0.12);
            color: #cbd5e1;
        }
        body.dark-mode .badge-col-count.is-partial {
            background: #0c4a6e;
            color: #7dd3fc;
            border-color: #0284c7;
        }
        .column-visibility-popover {
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            z-index: 1050;
            width: 250px;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
            padding: 4px 0;
            display: flex;
            flex-direction: column;
            animation: fadeInCvp 0.15s ease;
        }
        @keyframes fadeInCvp {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        body.dark-mode .column-visibility-popover {
            background: #0f172a;
            border-color: #334155;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
        }
        .cvp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            border-bottom: 1px solid #f1f5f9;
        }
        body.dark-mode .cvp-header {
            border-color: #1e293b;
        }
        .cvp-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #64748b;
        }
        body.dark-mode .cvp-title {
            color: #94a3b8;
        }
        .cvp-close {
            background: none;
            border: none;
            color: #94a3b8;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
        }
        .cvp-close:hover {
            color: #0f172a;
            background: #f1f5f9;
        }
        body.dark-mode .cvp-close:hover {
            color: #f8fafc;
            background: #1e293b;
        }
        .cvp-list {
            display: flex;
            flex-direction: column;
            padding: 4px 0;
        }
        .cvp-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 12px;
            cursor: pointer;
            transition: background-color 0.12s;
            user-select: none;
        }
        .cvp-item:hover {
            background-color: #f8fafc;
        }
        body.dark-mode .cvp-item:hover {
            background-color: #1e293b;
        }
        .cvp-item-left {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12.5px;
            font-weight: 500;
            color: #334155;
        }
        body.dark-mode .cvp-item-left {
            color: #e2e8f0;
        }
        .cvp-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            color: #64748b;
        }
        body.dark-mode .cvp-icon {
            color: #94a3b8;
        }
        .cvp-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            border-top: 1px solid #f1f5f9;
            background: #fafafa;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
        body.dark-mode .cvp-footer {
            border-color: #1e293b;
            background: #090e17;
        }
        .cvp-btn-reset {
            background: none;
            border: none;
            font-size: 11px;
            color: #0284c7;
            font-weight: 600;
            cursor: pointer;
            padding: 0;
        }
        .cvp-btn-reset:hover {
            text-decoration: underline;
        }
        .cvp-hint {
            font-size: 11px;
            color: #94a3b8;
        }

        /* ================= GIAO DIỆN CHẾ ĐỘ TỐI (DARK MODE TRIỆT ĐỂ 100%) ================= */
        body.dark-mode {
            --bg-color: var(--xv-s0, #0b1312);
            --text-color: #f1f5f9;
            --border-color: var(--xv-s2, #1e332f);
            --highlight: var(--xv-s4, #172825);
            --note-color: #94a3b8;
            --card-bg: var(--xv-s1, #111e1b);
            --panel-bg: var(--xv-s1, #111e1b);
            --sticky-bg: var(--xv-s1, #111e1b);
            background-color: var(--xv-s0, #0b1312) !important;
            color: #f1f5f9 !important;
        }

/* ====================================================================
           CHẾ ĐỘ TỐI TRÊN MÁY TÍNH — RÀ SOÁT 2026-08-22
           Bốn chỗ dùng màu chọn cho nền SÁNG rồi đem nguyên sang nền tối. Khối này
           đặt sau khối body.dark-mode ở trên để thắng theo thứ tự nguồn.
           ==================================================================== */

        /* [GỠ 2026-08-28] Quy tắc màu chữ cho nút "CHẾ ĐỘ TỐI" trong thanh bên đã bỏ cùng với
           chính nút đó — nay nó là biểu tượng trên thanh header, có bảng màu riêng. */

        /* Thẻ chỉ số cảnh báo: #b91c1c trên #1e293b chỉ 2,26. #f87171 đạt 5,29.
           (Màu nền sáng giữ nguyên — UX-10 đã cân #b91c1c cho nền trắng, đừng đụng.) */
        body.dark-mode .dash-value-warn { color: #f87171 !important; }

        /* Số ngày cuối tuần trên đầu cột: #2563eb trên #141c2e chỉ 3,29. #60a5fa đạt 6,69. */
        body.dark-mode th.weekend-header .day-num,
        body.dark-mode th.weekend-header .day-name { color: #60a5fa !important; }
        /* Modals & Overlays */
        body.dark-mode .modal-box {
            background-color: var(--xv-s1, #111e1b) !important;
            color: #f8fafc !important;
            border-color: var(--xv-s7, #2c423d) !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
        }
        body.dark-mode .modal-box h3 {
            color: #f8fafc !important;
            border-bottom-color: var(--xv-s7, #2c423d) !important;
        }
        body.dark-mode .modal-close {
            color: #94a3b8 !important;
        }
        body.dark-mode .modal-overlay {
            background: rgba(0, 0, 0, 0.75) !important;
        }

        /* ====================================================================
           RÀ SOÁT CHẾ ĐỘ TỐI — TIẾP, 2026-08-30 (đợt dựng "ruột" 6 màn di động)
           Bốn chỗ nữa dùng màu VÀNG HỔ PHÁCH/ĐỎ chọn cho nền sáng, không có bản tối,
           lộ ra khi các bảng Thông báo/Tài khoản/Chia sẻ được xem trong giao diện tối
           (trước giờ ít ai để ý vì các bảng này vốn hiếm khi mở lúc trời tối). Theo
           đúng khuôn `.mm-badge-overdue`/`.mm-badge-urgent` đã có sẵn trong tệp: nền
           màu pha trong suốt (rgba) + chữ màu sáng hơn, không đổi gì ở giao diện sáng. */
        body.dark-mode .ntf-icon.is-warn   { background: rgba(245,158,11,.16) !important; color: #fcd34d !important; border-color: rgba(245,158,11,.35) !important; }
        body.dark-mode .ntf-icon.is-danger { background: rgba(248,113,113,.16) !important; color: #fca5a5 !important; border-color: rgba(248,113,113,.35) !important; }
        body.dark-mode #us-expiry-badge  { background: rgba(16,185,129,.16) !important; color: var(--xv-d1-text, #6ee7b7) !important; }
        body.dark-mode #us-expiring-alert { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.35) !important; }
        body.dark-mode #us-expiring-title { color: #fbbf24 !important; }
        body.dark-mode #us-expiring-text  { color: #fcd34d !important; }
        body.dark-mode #btn-account-logout { background: rgba(248,113,113,.14) !important; color: #fca5a5 !important; border-color: rgba(248,113,113,.35) !important; }

        /* Panels, Forms & Control Groups */
        body.dark-mode .control-panel {
            background-color: var(--xv-s1, #111e1b) !important;
            border-color: var(--xv-s7, #2c423d) !important;
            color: #f8fafc !important;
        }

        /* ================= FLAT SAAS MINIMALIST DESIGN (CHẾ ĐỘ TỐI PHẲNG LIỀN MẠCH) ================= */
        body.dark-mode input:not([type="button"]):not([type="submit"]):not([type="checkbox"]),
        body.dark-mode select,
        body.dark-mode textarea,
        body.dark-mode .text-edit-field,
        body.dark-mode .task-name-edit {
            background-color: transparent !important;
            border: 1px solid transparent !important;
            box-shadow: none !important;
            color: #f1f5f9 !important;
            border-radius: 4px;
        }
        body.dark-mode input:focus,
        body.dark-mode select:focus,
        body.dark-mode textarea:focus,
        body.dark-mode .text-edit-field:focus {
            background-color: var(--xv-s4, #172825) !important;
            border-color: #3b82f6 !important;
            color: #f8fafc !important;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
        }
        body.dark-mode option {
            background-color: var(--xv-s1, #111e1b) !important;
            color: #f8fafc !important;
        }

        /* Biểu tượng Lịch trong ô input date (Invert sang màu sáng rõ) */
        body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(0.9) hue-rotate(180deg) !important;
            cursor: pointer;
        }

        /* Dropdown menu thao tác dự án */
        body.dark-mode #project-menu-dropdown-content {
            background-color: var(--xv-s1, #111e1b) !important;
            border-color: var(--xv-s7, #2c423d) !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
        }
        body.dark-mode #project-menu-dropdown-content button {
            color: #e2e8f0 !important;
        }
        body.dark-mode #project-menu-dropdown-content button:hover {
            background-color: var(--xv-s4, #172825) !important;
            color: #60a5fa !important;
        }

        /* Bảng công việc, Tiêu đề & Cột Sticky (Flat Row Seamless) */
        body.dark-mode #timeline-table {
            background-color: var(--xv-s1, #111e1b) !important;
        }
        body.dark-mode th {
            background-color: var(--xv-s4, #172825) !important;
            color: #f8fafc !important;
            border-color: var(--xv-s7, #2c423d) !important;
        }
        body.dark-mode th.col-task {
            background-color: var(--xv-s4, #172825) !important;
            color: #f8fafc !important;
            border-color: var(--xv-s7, #2c423d) !important;
        }
        body.dark-mode td.col-task {
            background-color: var(--xv-s1, #111e1b) !important;
            color: #f8fafc !important;
            border-color: var(--xv-s4, #172825) !important;
        }
        body.dark-mode td {
            border-color: var(--xv-s4, #172825) !important;
            color: #cbd5e1 !important;
        }
        body.dark-mode tr.main-task td {
            background-color: #162032 !important;
            color: #38bdf8 !important;
            font-weight: 700;
            border-bottom: 1px solid var(--xv-s4, #172825) !important;
        }
        body.dark-mode tr.main-task td.col-task {
            background-color: #162032 !important;
        }
        body.dark-mode tr.sub-task td,
        body.dark-mode tr.milestone-task td {
            background-color: var(--xv-s1, #111e1b) !important;
            border-bottom: 1px solid var(--xv-s4, #172825) !important;
        }
        body.dark-mode tr.sub-task td.col-task,
        body.dark-mode tr.milestone-task td.col-task {
            background-color: var(--xv-s1, #111e1b) !important;
        }
        body.dark-mode td.week-cell {
            background-color: var(--xv-s1, #111e1b) !important;
            border-color: var(--xv-s4, #172825) !important;
        }
        body.dark-mode td.week-cell.weekend-cell:not(.active-main):not(.active-sub):not(.active-milestone) {
            background-color: #141c2e !important;
            border-color: var(--xv-s4, #172825) !important;
        }
        body.dark-mode th.weekend-header {
            background-color: #141c2e !important;
            border-color: #27354a !important;
        }

        /* Tay cầm di chuyển */
        body.dark-mode .drag-handle {
            color: #64748b !important;
        }

        /* Dropdown Phụ thuộc chìm phẳng */
        body.dark-mode select.dep-select {
            background-color: transparent !important;
            border: 1px solid transparent !important;
            color: #94a3b8 !important;
        }
        body.dark-mode select.dep-select:hover,
        body.dark-mode select.dep-select:focus {
            background-color: var(--xv-s4, #172825) !important;
            color: #f8fafc !important;
            border-color: #475569 !important;
        }

        /* Khung Tiêu Đề Dự Án & Thông Tin Top trong Dark Mode.
           SỬA 2026-08-22: ba id ở đây (#header-container, #project-title-h1, #project-info-div)
           KHÔNG CÒN TỒN TẠI — markup đã đổi id mà quy tắc không đổi theo, nên cả khối này
           là mã chết và tên công trình giữ nguyên #0f172a trên nền #0f172a, tức VÔ HÌNH
           hoàn toàn ở chế độ tối. Đã trỏ lại vào id thật. */
        @media screen {
            body.dark-mode #khoi-ten-cong-trinh,
            body.dark-mode #project-title,
            body.dark-mode #project-info {
                background-color: var(--xv-s1, #111e1b) !important;
                color: #f8fafc !important;
            }
            body.dark-mode .project-summary-item > strong,
            body.dark-mode #project-summary-progress-text { color: #f8fafc !important; }
            body.dark-mode .project-summary-label { color: #91a6a0 !important; }
            body.dark-mode .project-summary-danger > strong,
            body.dark-mode .project-summary-forecast > strong { color: #f87171 !important; }
            body.dark-mode .project-summary-forecast.is-safe > strong { color: var(--xv-d1, #34d399) !important; }
        }

        /* Thẻ Tiến độ Capsule Pill trong Dark Mode */
        body.dark-mode .progress-cell-pill {
            background: var(--xv-s5, #0e1917) !important;
            border-color: var(--xv-s7, #2c423d) !important;
        }
        body.dark-mode .progress-cell-text {
            color: #f8fafc !important;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8) !important;
        }

        /* Hiệu ứng rê chuột (Hover) & Chỉnh sửa ô trong Dark Mode không bị vạch trắng chói mắt */
        body.dark-mode #table-body tr:hover > td:not(.week-cell),
        body.dark-mode #table-body tr:hover td.col-task,
        body.dark-mode #table-body tr:hover td.col-dep,
        body.dark-mode #table-body tr:hover td.col-note,
        body.dark-mode #table-body tr:hover td.col-date,
        body.dark-mode #table-body tr:hover td.col-days,
        body.dark-mode #table-body tr:hover td.col-status,
        body.dark-mode #table-body tr:hover td.col-progress {
            background-color: var(--xv-s4, #172825) !important;
            color: #f8fafc !important;
        }

        body.dark-mode .text-edit-field {
            color: #f8fafc !important;
        }
        body.dark-mode .text-edit-field:focus {
            background-color: var(--xv-s4, #172825) !important;
            color: #f8fafc !important;
        }

        /* Nhãn Mốc Nghiệm Thu bên Timeline trong Dark Mode */
        body.dark-mode .ms-timeline-label {
            background: rgba(15, 23, 42, 0.92) !important;
            color: #93c5fd !important;
            border-color: rgba(147, 197, 253, 0.25) !important;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.9) !important;
        }
        body.dark-mode tr[data-status="delayed"] .ms-timeline-label {
            color: #fdba74 !important;
            border-color: rgba(251, 146, 60, 0.35) !important;
            background: rgba(41, 17, 8, 0.95) !important;
        }
        body.dark-mode .ms-diamond-icon {
            color: #60a5fa !important;
        }
        body.dark-mode tr[data-status="delayed"] .ms-diamond-icon {
            color: #ea580c !important;
        }

        /* Ẩn cụm nút thao tác inline khi không rê chuột để bảng gọn gàng không rối mắt */
        .task-inline-actions {
            opacity: 0 !important;
            transition: opacity 0.15s ease !important;
        }
        #table-body tr:hover .task-inline-actions,
        #table-body .task-inline-actions:focus-within {
            opacity: 1 !important;
        }

        /* ====================================================================
           CỤM NÚT +/× TRONG HÀNG — ĐƯA TRỞ LẠI, 2026-08-22 (vòng 2)
           Người dùng thử bản ẩn nút và thấy thao tác nhanh bất tiện, nhưng vẫn giữ
           tiêu chí: KHÔNG được lấy bớt bề ngang của tên hạng mục.
           Nên trả nút về đúng chỗ cũ, chỉ sửa hai thứ từng làm hỏng, cả hai đều
           KHÔNG tốn một pixel bề ngang nào:
           ==================================================================== */

        /* (1) Lúc chưa rê chuột, cụm nút vô hình nhưng vẫn nuốt cú bấm vì
               pointer-events mặc định là auto — đó là lý do 44px cuối ô nhập tên bấm
               không ăn. opacity KHÔNG tự tắt pointer-events, phải tắt bằng tay.
               Khi rê chuột vào hàng thì nút hiện ra và nhận bấm lại như cũ. */
        #table-body .task-inline-actions { pointer-events: none; }
        #table-body tr:hover .task-inline-actions,
        #table-body .task-inline-actions:focus-within { pointer-events: auto; }

        /* (2) Huy hiệu checklist nằm trong dòng chảy ở mép phải ô, đúng chỗ cụm nút
               phủ lên — đo được 43/45px bị che, 0/15 điểm bấm trúng, tức không cách nào
               mở bảng checklist bằng chuột. Trên những hàng CÓ huy hiệu thì đẩy cụm nút
               sang trái 52px để nó đứng cạnh chứ không đè lên. Hàng không có huy hiệu
               giữ nguyên right:2px như cũ, nên đại đa số hàng không đổi gì.
               Không dùng padding hay margin ở đây: cụm nút là position:absolute nên dịch
               nó KHÔNG làm ô nhập tên hẹp đi. Đó là điểm mấu chốt của cách sửa này. */
        #table-body .flex-task.co-chk .task-inline-actions { right: 52px; }

        /* Chỉ ẩn khi sửa TÊN: focus ở chính nút +/× phải giữ nút tới hết click.
           Giữ nút trong thứ tự Tab; khi Tab rời tên sang nút, :focus-within ở cụm
           nút hiện lại. Không đổi padding tên giữa đọc/sửa để tránh dịch cả Gantt. */
        #table-body .task-name-edit:focus ~ .task-inline-actions {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .flex-task .chk-badge {
            align-self: flex-start !important;
            margin-top: 1px !important;
        }
        .flex-task:focus-within .chk-badge {
            opacity: 0.35 !important;
            transition: opacity 0.2s ease;
        }
        .flex-task:focus-within .chk-badge:hover {
            opacity: 1 !important;
        }

        /* Nút bấm tổng thể (.btn-data) */
        body.dark-mode .btn-data {
            background-color: var(--xv-s4, #172825);
            color: #f8fafc;
            border-color: #475569;
        }
        body.dark-mode .btn-data:hover {
            background-color: var(--xv-s7, #2c423d);
            border-color: #60a5fa;
        }

        /* Cột Trạng thái trong Dark Mode */
        body.dark-mode tr[data-status="pending"] td.col-status select { background: var(--xv-s4, #172825) !important; border-color: #475569 !important; color: #cbd5e1 !important; }
        body.dark-mode tr[data-status="waiting"] td.col-status select { background: #3b0764 !important; border-color: #a855f7 !important; color: #e9d5ff !important; }
        body.dark-mode tr[data-status="inprogress"] td.col-status select { background: #1e3a8a !important; border-color: #3b82f6 !important; color: #bfdbfe !important; }
        body.dark-mode tr[data-status="inspection"] td.col-status select { background: #312e81 !important; border-color: #6366f1 !important; color: #c7d2fe !important; }
        body.dark-mode tr[data-status="delayed"] td.col-status select { background: #7c2d12 !important; border-color: #f97316 !important; color: #ffedd5 !important; }
        body.dark-mode tr[data-status="paused"] td.col-status select { background: var(--xv-s7, #2c423d) !important; border-color: #64748b !important; color: #cbd5e1 !important; }
        body.dark-mode tr[data-status="done"] td.col-status select { background: #064e3b !important; border-color: #10b981 !important; color: #a7f3d0 !important; }
        body.dark-mode tr[data-status="overdue"] td.col-status select { background: #7f1d1d !important; border-color: #ef4444 !important; color: #fca5a5 !important; }
        body.dark-mode tr[data-status="cancelled"] td.col-status select { background: #1f2937 !important; border-color: #4b5563 !important; color: #9ca3af !important; }

        /* ============================================================
           [2026-08-27] BẢNG CHỌN TRẠNG THÁI (chỉ trên máy tính)
           Danh sách xổ xuống của thẻ <select> gốc là do hệ điều hành vẽ: không đặt được
           bo góc, khoảng đệm hay màu cho từng dòng, và mỗi máy một kiểu. Người dùng muốn
           danh sách này "đẹp, hiện đại, dễ phân biệt" nên phải tự vẽ.

           Thẻ <select> thật VẪN Ở NGUYÊN trong bảng và vẫn là nguồn dữ liệu duy nhất —
           chọn xong là ghi thẳng vào nó rồi phát sự kiện change. Nhờ vậy mọi thứ đang đọc
           nó không phải sửa gì: bản in, khoá quyền cộng tác viên, chế độ khách xem link,
           lưu tự động, tính lại hạng mục cha.

           Bảng chọn dán vào <body> với position:fixed, KHÔNG nằm trong ô của bảng. Nếu để
           bên trong, nó sẽ bị #table-wrapper (overflow-x:auto) cắt cụt — đúng cái bẫy đã
           làm mất nút kéo thả hồi 23/08.
           ============================================================ */
        #tt-chon {
            position: fixed; z-index: 100000; display: none;
            min-width: 176px; padding: 5px;
            background: var(--card-bg, #fff);
            border: 1px solid var(--border-color, #e2e8f0);
            border-radius: 11px;
            box-shadow: 0 12px 34px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
            animation: ttHien .12s ease-out;
        }
        @keyframes ttHien { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

        .tt-muc {
            display: flex; align-items: center; gap: 9px; width: 100%;
            padding: 7px 9px; border: none; background: none; border-radius: 7px;
            font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-color, #1e293b);
            text-align: left; cursor: pointer; line-height: 1.25;
        }
        .tt-muc:hover, .tt-muc:focus-visible { background: var(--highlight, #f1f5f9); outline: none; }
        /* Chấm màu chính là thứ phân biệt: cùng một bộ màu với viên trạng thái trong bảng,
           nên mắt nhận ra ngay mà không cần đọc chữ. */
        .tt-cham {
            width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto;
            border: 1px solid rgba(15, 23, 42, .14);
        }
        .tt-ten { flex: 1; }
        .tt-tick { width: 13px; flex: 0 0 auto; color: var(--brand-primary, #116b51); font-weight: 900; }
        .tt-muc[aria-checked="true"] { background: var(--highlight, #f1f5f9); }

        .tt-muc[data-tt="pending"]    .tt-cham { background: #f1f5f9; border-color: #94a3b8; }
        .tt-muc[data-tt="waiting"]    .tt-cham { background: #f3e8ff; border-color: #c084fc; }
        .tt-muc[data-tt="inprogress"] .tt-cham { background: #dbeafe; border-color: #60a5fa; }
        .tt-muc[data-tt="inspection"] .tt-cham { background: #e0e7ff; border-color: #818cf8; }
        .tt-muc[data-tt="delayed"]    .tt-cham { background: #ffedd5; border-color: #fb923c; }
        .tt-muc[data-tt="paused"]     .tt-cham { background: #f1f5f9; border-color: #cbd5e1; }
        .tt-muc[data-tt="done"]       .tt-cham { background: #dcfce7; border-color: #4ade80; }
        .tt-muc[data-tt="cancelled"]  .tt-cham { background: #f3f4f6; border-color: #d1d5db; }
        .tt-muc[data-tt="cancelled"]  .tt-ten  { text-decoration: line-through; color: #9ca3af; }

        /* --- Dùng chung cho cột PHỤ THUỘC --- */
        /* Danh sách phụ thuộc dài bằng số hạng mục nằm trên nó, nên phải chặn chiều cao và
           cho cuộn nội bộ. Cuộn NỘI BỘ chứ không phải cuộn trang — nếu để nó đẩy cả trang
           thì trình nghe 'scroll' sẽ đóng ngay chính bảng đang mở. */
        #tt-chon.tt-phuthuoc { min-width: 226px; max-width: 288px; }
        .tt-ds { max-height: 268px; overflow-y: auto; overscroll-behavior: contain; }
        .tt-phuthuoc .tt-ten {
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-weight: 600;
        }
        .tt-muc-trong .tt-ten { color: var(--note-color, #64748b); font-style: italic; font-weight: 500; }
        .tt-loc {
            width: 100%; box-sizing: border-box; margin-bottom: 4px;
            padding: 7px 9px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 7px;
            font-family: inherit; font-size: 11.5px; color: var(--text-color, #1e293b);
            background: var(--bg-color, #fff); outline: none;
        }
        .tt-loc:focus { border-color: var(--brand-primary, #116b51); }
        .tt-trong { padding: 12px 9px; font-size: 11.5px; color: var(--note-color, #64748b); text-align: center; }
        body.dark-mode .tt-loc { background: #0b1524; border-color: #33415a; color: #f1f5f9; }

        body.dark-mode #tt-chon { background: #111c2e; border-color: #33415a; box-shadow: 0 12px 34px rgba(0,0,0,.55); }
        body.dark-mode .tt-cham { border-color: rgba(255,255,255,.18); }
        body.dark-mode .tt-muc[data-tt="pending"]    .tt-cham { background: var(--xv-s4, #172825); border-color: #475569; }
        body.dark-mode .tt-muc[data-tt="waiting"]    .tt-cham { background: #3b0764; border-color: #a855f7; }
        body.dark-mode .tt-muc[data-tt="inprogress"] .tt-cham { background: #1e3a8a; border-color: #3b82f6; }
        body.dark-mode .tt-muc[data-tt="inspection"] .tt-cham { background: #312e81; border-color: #6366f1; }
        body.dark-mode .tt-muc[data-tt="delayed"]    .tt-cham { background: #7c2d12; border-color: #f97316; }
        body.dark-mode .tt-muc[data-tt="paused"]     .tt-cham { background: var(--xv-s7, #2c423d); border-color: #64748b; }
        body.dark-mode .tt-muc[data-tt="done"]       .tt-cham { background: #064e3b; border-color: #10b981; }
        body.dark-mode .tt-muc[data-tt="cancelled"]  .tt-cham { background: #1f2937; border-color: #4b5563; }

        /* Dashboard Panel & Cards trong Dark Mode */
        body.dark-mode #dashboard-panel {
            background: var(--xv-s1, #111e1b) !important;
            border-color: var(--xv-s7, #2c423d) !important;
        }
        body.dark-mode .dash-card {
            background: var(--xv-s4, #172825) !important;
            border-color: var(--xv-s7, #2c423d) !important;
            color: #f8fafc !important;
        }
        body.dark-mode .dash-label {
            color: #94a3b8 !important;
        }

        /* Custom Scrollbar trong Dark Mode */
        body.dark-mode ::-webkit-scrollbar-track { background: #0f172a; }
        body.dark-mode ::-webkit-scrollbar-thumb { background: var(--xv-s7, #2c423d); border-radius: 4px; }
        body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #475569; }

        /* NHÃN VIỆC (kiểu Notion): cột Nhãn trên bảng máy tính, pill có màu, gợi ý khi gõ # trong tên việc, hộp gắn nhãn thả dưới ô */
        :root {
            --nhan-0-bg: #f6e8b4; --nhan-0-tx: #5c4300; --nhan-1-bg: #e7dcf3; --nhan-1-tx: #47306a;
            --nhan-2-bg: #e8e8e6; --nhan-2-tx: #3f3f3a; --nhan-3-bg: #f9dfe1; --nhan-3-tx: #7a2530;
            --nhan-4-bg: #dbeede; --nhan-4-tx: #1f5a34; --nhan-5-bg: #d9e8f7; --nhan-5-tx: #1f4a7a;
            --nhan-6-bg: #fbe3cf; --nhan-6-tx: #7a3b0c; --nhan-7-bg: #ecdfd5; --nhan-7-tx: #5a3a24;
        }
        body.dark-mode {
            --nhan-0-bg: #4a3d12; --nhan-0-tx: #f0dc8f; --nhan-1-bg: #3b2d52; --nhan-1-tx: #d9c6f0;
            --nhan-2-bg: #3a3a37; --nhan-2-tx: #d6d6d1; --nhan-3-bg: #55262d; --nhan-3-tx: #f6c6cb;
            --nhan-4-bg: rgba(74, 163, 105, 0.3); --nhan-4-tx: #b7e2c4; --nhan-5-bg: #1f3a5a; --nhan-5-tx: #bcd8f5;
            --nhan-6-bg: #5a3319; --nhan-6-tx: #f7cfae; --nhan-7-bg: #4a3626; --nhan-7-tx: #e3cdb9;
        }
        .xv-nhan { display: inline-flex; align-items: center; flex: none; max-width: 96px; height: 20px; margin: 0; padding: 0 7px; border: 0; border-radius: 6px; background: var(--nhan-2-bg); color: var(--nhan-2-tx); font: 600 11.5px/1 'Be Vietnam Pro', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
        /* Trong bảng máy tính: cùng font Inter và cỡ chữ như các ô khác (12px/11px), hàng chỉ cao 30px nên pill thấp hơn */
        #timeline-table td.col-nhan .xv-nhan { height: 18px; padding: 0 6px; border-radius: 5px; font: 600 11px/1 'Inter', sans-serif; max-width: 72px; }
        #timeline-table td.col-nhan .xv-nhan.cong { padding: 0 3px; font-weight: 700; }
        /* Trong hộp chọn nhãn: rộng rãi hơn để đọc và chạm */
        .xv-nhan-bang .xv-nhan { height: 22px; padding: 0 8px; font-weight: 500; font-size: 13px; }
        .xv-nhan.cong, .xv-nhan.tinh { cursor: default; }
        .xv-nhan.cong { padding: 0 6px; font-weight: 700; background: transparent; color: var(--note-color, #5c6b66); }
        .xv-nhan.c0 { background: var(--nhan-0-bg); color: var(--nhan-0-tx); }
        .xv-nhan.c1 { background: var(--nhan-1-bg); color: var(--nhan-1-tx); }
        .xv-nhan.c2 { background: var(--nhan-2-bg); color: var(--nhan-2-tx); }
        .xv-nhan.c3 { background: var(--nhan-3-bg); color: var(--nhan-3-tx); }
        .xv-nhan.c4 { background: var(--nhan-4-bg); color: var(--nhan-4-tx); }
        .xv-nhan.c5 { background: var(--nhan-5-bg); color: var(--nhan-5-tx); }
        .xv-nhan.c6 { background: var(--nhan-6-bg); color: var(--nhan-6-tx); }
        .xv-nhan.c7 { background: var(--nhan-7-bg); color: var(--nhan-7-tx); }
        .xv-nhan.cong.c0, .xv-nhan.cong.c1, .xv-nhan.cong.c2, .xv-nhan.cong.c3, .xv-nhan.cong.c4, .xv-nhan.cong.c5, .xv-nhan.cong.c6, .xv-nhan.cong.c7 { background: transparent; color: var(--note-color, #5c6b66); }
        /* ô Nhãn trên bảng: nút phủ kín ô, nhãn nằm ngang, rê chuột hiện nền để biết bấm được */
        td.col-nhan .xv-nhan-o { display: flex; align-items: center; gap: 4px; width: 100%; height: 100%; min-height: 28px; padding: 0 2px; border: 0; border-radius: 6px; background: transparent; color: var(--note-color, #5c6b66); font: 500 11px 'Inter', sans-serif; text-align: left; cursor: pointer; overflow: hidden; }
        td.col-nhan .xv-nhan-o:hover, td.col-nhan .xv-nhan-o:focus-visible { background: rgba(100, 116, 139, 0.12); }
        td.col-nhan .xv-nhan-o:empty::before { content: "+ Nhãn"; opacity: 0; }
        tr.sub-task:hover td.col-nhan .xv-nhan-o:empty::before, td.col-nhan .xv-nhan-o:focus-visible:empty::before { opacity: .75; }
        body.perm-locked td.col-nhan .xv-nhan-o, body.perm-update-progress td.col-nhan .xv-nhan-o { cursor: default; pointer-events: none; }
        #xv-nhan-goiy { position: fixed; z-index: 100250; min-width: 200px; max-width: min(320px, 94vw); padding: 4px; border: 1px solid var(--border-color, #cbd5e1); border-radius: 10px; background: var(--card-bg, #ffffff); color: var(--text-color, #17231f); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); font-family: 'Be Vietnam Pro', sans-serif; }
        #xv-nhan-goiy button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; font: 700 13px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        #xv-nhan-goiy button small { font: 500 12px 'Be Vietnam Pro', sans-serif; color: var(--mut, #5c6b66); }
        #xv-nhan-goiy button.act, #xv-nhan-goiy button:hover { background: rgba(100, 116, 139, 0.16); }
        @media (max-width: 760px) { #xv-nhan-goiy button { min-height: 44px; font-size: 14px; } }
        #xv-nhan-nen { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 26, 24, 0.5); }
        #xv-nhan-nen.tha { display: block; padding: 0; background: transparent; }
        .xv-nhan-bang { box-sizing: border-box; width: min(400px, 100%); max-height: min(620px, calc(100% - 8px)); overflow-y: auto; padding: 16px; border-radius: 14px; background: var(--card-bg, #ffffff); color: var(--text-color, #17231f); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); font-family: 'Be Vietnam Pro', sans-serif; display: flex; flex-direction: column; gap: 10px; outline: none; }
        #xv-nhan-nen.tha .xv-nhan-bang { position: fixed; max-height: min(420px, 70vh); padding: 0; gap: 0; border: 1px solid var(--border-color, #cfd8d4); border-radius: 10px; box-shadow: 0 12px 32px rgba(17, 39, 35, 0.22); }
        #xv-nhan-nen.tha .xv-nhan-dau { display: none; }
        .xv-nhan-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
        .xv-nhan-dau strong { display: block; font-size: 16px; font-weight: 800; }
        .xv-nhan-ten { display: block; margin-top: 2px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mut, #5c6b66); }
        .xv-nhan-xong { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--xv-c1, #20564c); font: 800 14px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        body.dark-mode .xv-nhan-xong { color: var(--xv-d1, #34d399); }
        /* ô tìm chung hàng với các nhãn đã chọn */
        .xv-nhan-truong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; box-sizing: border-box; min-height: 44px; padding: 6px 10px; border: 1px solid rgba(100, 116, 139, 0.55); border-radius: 10px; background: var(--card-bg, #ffffff); }
        #xv-nhan-nen.tha .xv-nhan-truong { border: 0; border-bottom: 1px solid var(--border-color, #e3e9e6); border-radius: 10px 10px 0 0; min-height: 40px; padding: 6px 10px; }
        .xv-nhan-truong:focus-within { border-color: var(--xv-c1, #20564c); }
        .xv-nhan-da { display: contents; }
        .xv-nhan-da .xv-nhan { padding-right: 2px; }
        .xv-nhan-go { min-width: 22px; min-height: 22px; margin-left: 2px; padding: 0 5px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: 700 14px/1 sans-serif; cursor: pointer; opacity: .75; }
        .xv-nhan-go:hover { opacity: 1; }
        #xv-nhan-o, #xv-nhan-o:focus { flex: 1 1 110px; min-width: 110px; width: auto; min-height: 28px; height: auto; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0; outline: none !important; box-shadow: none !important; background: transparent !important; color: inherit; text-align: left !important; font: 500 14px 'Be Vietnam Pro', sans-serif; }
        .xv-nhan-nhom { padding: 2px 4px 0; font-size: 12px; color: var(--mut, #5c6b66); }
        #xv-nhan-nen.tha .xv-nhan-nhom { padding: 8px 12px 4px; }
        .xv-nhan-dx { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
        #xv-nhan-nen.tha .xv-nhan-dx { padding: 0 6px 8px; }
        .xv-nhan-dong { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
        .xv-nhan-dong:hover, .xv-nhan-dong.act { background: rgba(100, 116, 139, 0.16); }
        .xv-nhan-dong .xv-nhan-op, .xv-nhan-dong .xv-nhan-op:hover, .xv-nhan-dong .xv-nhan-op.act { flex: 1 1 auto; min-width: 0; background: transparent; }
        .xv-nhan-keo { flex: none; width: 18px; align-self: stretch; display: flex; align-items: center; justify-content: center; color: var(--mut, #7a8883); font-size: 13px; letter-spacing: -2px; cursor: grab; touch-action: none; user-select: none; opacity: .55; }
        .xv-nhan-keo.vo { cursor: default; opacity: 0; }
        .xv-nhan-dong:hover .xv-nhan-keo:not(.vo) { opacity: 1; }
        .xv-nhan-dong.xvc-keo-dang { background: var(--card-bg, #ffffff); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }
        .xv-nhan-md { flex: none; min-width: 32px; min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--mut, #7a8883); font: 700 16px/1 sans-serif; cursor: pointer; opacity: .7; }
        .xv-nhan-md:hover, .xv-nhan-md:focus-visible { opacity: 1; background: rgba(100, 116, 139, 0.2); }
        .xv-nhan-bang.sua .xv-nhan-truong, .xv-nhan-bang.sua .xv-nhan-nhom { display: none; }
        .xv-nhan-sua { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
        .xv-nhan-sua .xv-nhan-nhom { display: block; padding: 6px 0 0; }
        .xv-nhan-sua-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .xv-nhan-quay { min-height: 32px; padding: 0 6px; border: 0; background: none; color: var(--xv-c1, #20564c); font: 700 13px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        body.dark-mode .xv-nhan-quay { color: var(--xv-d1, #34d399); }
        #xv-nhan-ten-o { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid rgba(100, 116, 139, 0.55); border-radius: 8px; background: var(--card-bg, #ffffff); color: inherit; font: 500 14px 'Be Vietnam Pro', sans-serif; text-align: left; }
        #xv-nhan-ten-o:focus { outline: 2px solid var(--xv-c1, #20564c); outline-offset: 0; }
        .xv-nhan-loi { min-height: 16px; font-size: 12px; color: var(--dan, #b42318); }
        .xv-nhan-mau { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
        .xv-nhan-m { height: 32px; padding: 0; border: 2px solid transparent; border-radius: 8px; font: 800 13px/1 sans-serif; cursor: pointer; }
        .xv-nhan-m.chon { border-color: var(--text-color, #17231f); }
        .xv-nhan-xoa { margin-top: 6px; min-height: 40px; border: 1px solid rgba(180, 35, 24, 0.45); border-radius: 8px; background: transparent; color: var(--dan, #b42318); font: 700 13px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        .xv-nhan-xoa:hover { background: rgba(180, 35, 24, 0.08); }
        @media (max-width: 760px) { .xv-nhan-md { min-width: 44px; min-height: 44px; } .xv-nhan-keo { width: 24px; } .xv-nhan-m { height: 40px; } }
        .xv-nhan-op { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; font: 500 14px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        #xv-nhan-nen.tha .xv-nhan-op { min-height: 36px; }
        .xv-nhan-op .xv-nhan { cursor: pointer; max-width: 180px; }
        .xv-nhan-gap { flex: 1; }
        .xv-nhan-tao { color: var(--mut, #5c6b66); }
        .xv-nhan-tick { font-weight: 800; color: var(--xv-c1, #20564c); }
        body.dark-mode .xv-nhan-tick { color: var(--xv-d1, #34d399); }
        .xv-nhan-op small { font: 500 12px 'Be Vietnam Pro', sans-serif; color: var(--mut, #5c6b66); }
        .xv-nhan-op:hover, .xv-nhan-op.act { background: rgba(100, 116, 139, 0.16); }
        .xv-nhan-op.chon { background: rgba(100, 116, 139, 0.1); }
        .xv-nhan-trong { padding: 10px; font-size: 13px; color: var(--mut, #5c6b66); }
        @media (max-width: 760px) {
            #xv-nhan-nen { align-items: flex-end; padding: 0; }
            .xv-nhan-bang { width: 100%; max-height: 82%; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
            .xv-nhan-go { min-width: 36px; min-height: 32px; }
        }

        /* TOAST THÔNG BÁO TỨC THỜI — dùng chung cho toàn bộ SPA */
        #toast-container {
            position: fixed;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            width: min(calc(100vw - 28px), 420px);
            z-index: 1000100; /* trên mọi hộp thoại (cao nhất 1000001), nếu không lời nhắn lỗi nằm sau hộp đang mở */
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
        }
        .toast-msg {
            --toast-accent: #2563eb;
            --toast-soft: #eff6ff;
            pointer-events: auto;
            position: relative;
            width: fit-content;
            max-width: 100%;
            min-width: 240px;
            padding: 9px 9px 9px 10px;
            border: 1px solid #d7e1de;
            border-left: 3px solid var(--toast-accent);
            border-radius: 8px;
            background: #ffffff;
            color: #1e293b;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16), 0 2px 7px rgba(15, 23, 42, 0.08);
            display: flex;
            align-items: center;
            gap: 8px;
            box-sizing: border-box;
            font: 600 11.5px/1.4 'Be Vietnam Pro', sans-serif;
            animation: toast-pop-in 160ms cubic-bezier(.2,.75,.3,1) both;
            transition: opacity 140ms ease, transform 140ms ease;
        }
        .toast-msg.toast-success { --toast-accent:#168566; --toast-soft:#eaf8f2; }
        .toast-msg.toast-warning { --toast-accent:#b7791f; --toast-soft:#fff8e8; }
        .toast-msg.toast-error { --toast-accent:#c2413b; --toast-soft:#fff0ef; }
        .toast-msg.toast-info { --toast-accent:#2563eb; --toast-soft:#eff6ff; }
        .toast-status-icon {
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--toast-soft);
            color: var(--toast-accent);
            font: 800 11px/1 'Be Vietnam Pro', sans-serif;
        }
        .toast-msg .toast-text {
            flex: 1 1 auto;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .toast-msg .toast-action-btn {
            flex: 0 0 auto;
            min-height: 30px;
            padding: 5px 9px;
            border: 1px solid var(--toast-accent);
            border-radius: 6px;
            background: var(--toast-soft);
            color: var(--toast-accent);
            font: 800 11px/1.2 'Be Vietnam Pro', sans-serif;
            letter-spacing: .2px;
            white-space: nowrap;
            cursor: pointer;
        }
        .toast-msg .toast-action-btn:hover,
        .toast-msg .toast-action-btn:focus-visible { filter: brightness(.96); }
        .toast-msg .toast-close-btn {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: #7b8b97;
            font: 500 17px/1 Arial, sans-serif;
            cursor: pointer;
        }
        .toast-msg .toast-close-btn:hover,
        .toast-msg .toast-close-btn:focus-visible { background:#f1f5f4; color:#334155; }
        body.dark-mode .toast-msg {
            border-color:var(--xv-s7, #344943);
            border-left-color:var(--toast-accent);
            background:var(--xv-s6, #152321);
            color:#e5eeeb;
            box-shadow:0 12px 30px rgba(0,0,0,.42);
        }
        body.dark-mode .toast-msg.toast-success { --toast-accent:#53c6a1; --toast-soft:#173a31; }
        body.dark-mode .toast-msg.toast-warning { --toast-accent:#e8b85b; --toast-soft:#3d321c; }
        body.dark-mode .toast-msg.toast-error { --toast-accent:#f08078; --toast-soft:#432523; }
        body.dark-mode .toast-msg.toast-info { --toast-accent:#7aa7f8; --toast-soft:#1e3457; }
        body.dark-mode .toast-msg .toast-close-btn { color:#9fb0aa; }
        body.dark-mode .toast-msg .toast-close-btn:hover,
        body.dark-mode .toast-msg .toast-close-btn:focus-visible { background:var(--xv-s4, #243733); color:#ffffff; }
        @media (max-width: 500px) {
            #toast-container {
                top: auto;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
                left: 12px;
                right: 12px;
                width: auto;
                transform: none;
            }
            .toast-msg { width: 100%; min-width: 0; max-width: none; }
            .toast-msg .toast-action-btn { min-height: 38px; }
            .toast-msg .toast-close-btn { width:38px; height:38px; flex-basis:38px; }
        }
        @keyframes toast-pop-in {
            0% { opacity: 0; transform: translateY(-7px) scale(.985); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .toast-msg.toast-hiding {
            opacity: 0;
            transform: translateY(-5px) scale(.99);
        }
        @media (prefers-reduced-motion: reduce) {
            .toast-msg { animation-duration:1ms; transition-duration:1ms; }
        }

        .pdf-hidden { display: none !important; }
        
        /* CỘT TIẾN ĐỘ THỰC TẾ & THANH PHỦ MINI (ĐỒNG BỘ 100% VỚI NÚT TRẠNG THÁI) */
        .progress-cell-pill {
            position: relative;
            width: 92%;
            margin: 0 auto;
            height: 24px;
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            overflow: hidden;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
            box-sizing: border-box;
        }
        .progress-cell-pill:hover {
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
            transform: scale(1.02);
        }
        .progress-cell-fill {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: linear-gradient(90deg, #3b82f6, #2563eb);
            border-radius: 5px;
            transition: width 0.3s ease;
        }
        tr[data-status="done"] .progress-cell-fill {
            background: linear-gradient(90deg, #10b981, #059669);
        }
        tr[data-status="delayed"] .progress-cell-fill {
            background: linear-gradient(90deg, #f97316, #ea580c);
        }
        .progress-cell-text {
            position: relative;
            z-index: 2;
            font-size: 11px;
            font-weight: 700; /* 800 -> 700 cho khớp ô tên hạng mục (11px/700) */
            color: #0f172a;
            text-shadow: 0 0 2px rgba(255,255,255,0.9);
        }

        /* POPOVER CẬP NHẬT TIẾN ĐỘ THỰC TẾ VS KẾ HOẠCH */
        #progress-popover {
            position: fixed;
            z-index: 99999;
            background: #0f172a;
            color: #f8fafc;
            padding: 12px 14px;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.35);
            border: 1px solid rgba(255,255,255,0.15);
            width: 250px;
            display: none;
            flex-direction: column;
            gap: 8px;
            font-size: 11px;
            line-height: 1.4;
        }
        #progress-popover .pop-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
            color: #93c5fd;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            padding-bottom: 4px;
        }
        #progress-popover .pop-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #progress-popover input[type="range"] {
            width: 100%;
            cursor: pointer;
            accent-color: #3b82f6;
            margin-top: 2px;
        }
        #progress-popover input[type="number"] {
            width: 48px;
            background: #1e293b;
            color: #fff;
            border: 1px solid #475569;
            border-radius: 4px;
            padding: 2px 4px;
            text-align: center;
            font-weight: bold;
        }
        
        #custom-tooltip { position:fixed; z-index:10070; display:block; width:max-content; max-width:min(260px,calc(100vw - 16px)); padding:8px 10px; box-sizing:border-box; border:1px solid #cbd9d4; border-radius:7px; background:#ffffff; color:var(--xv-s7, #2c423d); box-shadow:0 8px 22px rgba(15,23,42,.18); pointer-events:none; opacity:0; visibility:hidden; transition:none; text-align:left; }
        #custom-tooltip.is-visible { opacity:1; visibility:visible; }
        #custom-tooltip strong { display:block; max-width:238px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--xv-c1, #20564c); font:700 11px/1.35 'Be Vietnam Pro',sans-serif; }
        #custom-tooltip span { display:block; margin-top:2px; color:#64748b; font:500 11px/1.3 'JetBrains Mono',monospace; white-space:nowrap; }
        body.dark-mode #custom-tooltip { border-color:var(--xv-s7, #3a514c); background:var(--xv-s6, #152321); color:#e2e8f0; box-shadow:0 10px 26px rgba(0,0,0,.45); }
        body.dark-mode #custom-tooltip strong { color:#d1fae5; }
        body.dark-mode #custom-tooltip span { color:#94a3b8; }

        @media (hover: hover) {
            #table-body tr:hover > td:not(.week-cell) { background-color: #f1f5f9 !important; transition: background-color 0.1s ease; }
            #table-body tr:hover td.col-task, #table-body tr:hover td.col-action { background-color: #f1f5f9 !important; }
        }

        /* ================= XUẤT PDF VÀ IN ẤN HIỆN ĐẠI CHUẨN SAAS ================= */
        @page { margin: 0; }
        @media print {
            @page { size: A4 landscape; }

            /* ===== NỀN TẢNG IN ẤN ===== */
            th, td { position: static !important; }
            html, body {
                margin: 0 !important;
                padding: 0 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                background: #ffffff !important;
                color: #0f172a !important;
                width: 100% !important;
            }
            /* Lề giấy do body đảm nhiệm (box-decoration-break: clone lặp lại lề ở MỌI trang). @page để lề 0 nên trình duyệt
               không in đầu trang / chân trang (tên tab, địa chỉ web). */
            body:not(.dang-in-bao-cao-thuc-te) {
                padding: 6mm !important;
                box-sizing: border-box !important;
                -webkit-box-decoration-break: clone;
                box-decoration-break: clone;
            }
            body.print-mode-a3:not(.dang-in-bao-cao-thuc-te) { padding: 8mm !important; }
            .container {
                border: none !important;
                padding: 0 !important;
                background: #ffffff !important;
                box-shadow: none !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: none !important;
            }

            /* ===== ẨN PHẦN TỬ KHÔNG CẦN IN ===== */
            .print-hide,
            th.col-action, td.col-action,
            th.col-days, td.col-days,
            th.col-dep, td.col-dep,
            th.col-progress, td.col-progress,
            .real-date,
            .data-actions, .resizer-handle,
            #today-line-overlay, #today-line-label,
            .collapse-toggle, .drag-handle,
            #side-add-panel, #side-add-overlay, #activity-log-panel, #activity-log-overlay,
            .gantt-master-resizer, #btn-fullscreen-gantt, #fullscreen-exit-bar
            { display: none !important; }

            /* In kèm cột Nhãn (người dùng chọn trong hộp In): cột vốn là print-hide nên phải bật lại riêng */
            html body:not(.in-kem-nhan) th.col-nhan, html body:not(.in-kem-nhan) td.col-nhan { display: none !important; }
            html body.in-kem-nhan th.col-nhan, html body.in-kem-nhan td.col-nhan { display: table-cell !important; }
            .xv-nhan { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            td.col-nhan .xv-nhan-o { overflow: visible !important; }
            th.col-progress, td.col-progress { box-shadow: none !important; }
            body.fullscreen-gantt-active { overflow: visible !important; height: auto !important; }
            body.fullscreen-gantt-active .container { width: 100% !important; height: auto !important; padding: 0 !important; display: block !important; }

            /* ===== BẢNG TỔNG HỢP TIẾN ĐỘ KHI IN (ẨN SIDEBAR, MỞ RỘNG TOÀN BỘ KHUNG BÊN PHẢI) ===== */
            body.view-mode-report {
                overflow: visible !important;
                height: auto !important;
                background: #ffffff !important;
            }
            body.view-mode-report:not(.dang-in-bao-cao-thuc-te) .container {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                padding: 0 !important;
                margin: 0 !important;
                display: block !important;
            }
            body.view-mode-report:not(.dang-in-bao-cao-thuc-te) #view-tong-hop {
                display: block !important;
                height: auto !important;
                overflow: visible !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            /* ===== BẢNG CẢNH BÁO TIẾN ĐỘ KHI IN ===== */
            .tong-hop-layout,
            #view-tong-hop .tong-hop-layout {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                gap: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            .tong-hop-content,
            #view-tong-hop .tong-hop-content {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 100% !important;
                flex: 1 1 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            .tong-hop-root,
            #view-tong-hop .tong-hop-root {
                max-width: 100% !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* ===== WRAPPER VÀ TABLE ===== */
            #table-wrapper {
                overflow: visible !important;
                border: none !important;
                width: 100% !important;
            }
            table#timeline-table {
                border-collapse: collapse !important;
                border: 1px solid #cbd5e1 !important;
                table-layout: fixed !important;
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
            }

            /* ===== ĐỘ RỘNG CỘT THÔNG TIN THOÁNG ĐẸP KHÔNG CHỒNG LẤY ===== */
            th.col-task, td.col-task { width: 220px !important; min-width: 220px !important; max-width: 220px !important; padding: 4px 8px !important; text-align: left !important; }
            th.col-note, td.col-note { width: 95px !important; min-width: 95px !important; max-width: 95px !important; padding: 4px 4px !important; text-align: center !important; }
            th.col-date, td.col-date { width: 62px !important; min-width: 62px !important; max-width: 62px !important; padding: 4px 2px !important; text-align: center !important; white-space: nowrap !important; }
            th.col-status, td.col-status { width: 82px !important; min-width: 82px !important; max-width: 82px !important; padding: 4px 4px !important; text-align: center !important; white-space: nowrap !important; }

            /* ===== Ô GANTT TIMELINE (ĐƯỜNG KẺ GIÓNG NGANG & DỌC RÕ NÉT KHI IN) ===== */
            th.col-week { width: auto !important; min-width: 0 !important; border: 1px solid #94a3b8 !important; font-size: 8.5px !important; }
            td.week-cell {
                width: auto !important;
                min-width: 0 !important;
                border-left: 1px solid #94a3b8 !important;
                border-right: 1px solid #94a3b8 !important;
                border-top: 1px solid #94a3b8 !important;
                border-bottom: 1px solid #94a3b8 !important;
                position: relative !important;
                overflow: visible !important;
                padding: 0 !important;
                height: 24px !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            td.week-cell.weekend-cell { background-color: #f8fafc !important; }

            th, td {
                box-sizing: border-box !important;
                border: 1px solid #94a3b8 !important;
                vertical-align: middle !important;
                overflow: hidden !important;
                color: #0f172a !important;
                border-radius: 0 !important;
            }
            th { background-color: #f8fafc !important; font-weight: 800 !important; font-size: 9.5px !important; color: #0f172a !important; text-align: center !important; padding: 4px 2px !important; white-space: nowrap !important; }
            #month-header-row th { white-space: nowrap !important; font-size: 10px !important; border: 1px solid #64748b !important; }

            /* ĐƯỜNG KẺ GIÓNG NGANG LIÊN TỤC CHO MỌI HÀNG KHI IN */
            #table-body tr td {
                border-top: 1px solid #94a3b8 !important;
                border-bottom: 1px solid #94a3b8 !important;
            }
            #table-body tr.main-task td {
                border-top: 1.5px solid #475569 !important;
                border-bottom: 1.5px solid #475569 !important;
                background-color: #f1f5f9 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            th.col-status { position: relative; }
            tr { page-break-inside: avoid; }

            /* ===== GANTT BARS KHI IN PDF (ĐỒNG BỘ ĐỘ CAO 18PX CĂN GIỮA) ===== */
            td.week-cell.active-sub::after,
            td.week-cell.active-milestone::after {
                content: "" !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                height: 18px !important;
                left: 0 !important;
                right: 0 !important;
                background: #3b82f6 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                z-index: 5 !important;
                box-sizing: border-box !important;
            }
            tr.main-task td.week-cell.active-main::after {
                display: none !important;
            }
            tr.main-task[data-collapsed="true"] td.week-cell.active-main::after {
                display: block !important;
                content: "" !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                height: 18px !important;
                left: 0 !important;
                right: 0 !important;
                background: #3b82f6 !important; /* Mặc định trùng màu Đang làm */
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                z-index: 5 !important;
                box-sizing: border-box !important;
            }
            tr.main-task[data-collapsed="true"][data-status="done"] td.week-cell.active-main::after {
                background: #10b981 !important; /* Trùng màu Xong */
            }
            tr.main-task[data-collapsed="true"][data-status="delayed"] td.week-cell.active-main::after,
            tr.main-task[data-collapsed="true"][data-status="overdue"] td.week-cell.active-main::after {
                background: #f97316 !important; /* Trùng màu Chậm TĐ */
            }
            tr[data-status="delayed"] td.week-cell.active-sub::after,
            tr[data-status="delayed"] td.week-cell.active-milestone::after { background: #f97316 !important; }
            tr[data-status="done"] td.week-cell.active-sub::after,
            tr[data-status="done"] td.week-cell.active-milestone::after { background: #10b981 !important; }

            /* ===== THANH TIẾN ĐỘ PHẢI LIỀN MẠCH KHI IN =====
               [2026-08-24] Đo trong chính tệp PDF người dùng xuất ra: mỗi đoạn thanh là
               một khối rộng ĐÚNG 8,0pt nằm trong cột rộng 9,0pt. Chênh 1pt đó là đường
               kẻ dọc giữa hai ô, và nó CẮT NGANG qua thanh — nên thanh tiến độ in ra
               không phải một dải liền mà là một dãy ô ghép lại, ngày nào cũng bị vạch.

               Vì sao: thanh là phần tử ::after đặt left:0/right:0, tức bám theo HỘP ĐỆM
               của ô. Với border-collapse:collapse thì đường kẻ nằm NGOÀI hộp đệm, nên
               nó luôn hở ra giữa hai đoạn.

               Cách chữa: cho thanh tràn ra 1px mỗi bên để phủ kín đúng đường kẻ đó, hai
               đoạn cạnh nhau chạm nhau và nối thành một dải. Làm được ở bản in vì ô tuần
               khi in đã có overflow:visible (trên màn hình là overflow:hidden nên sẽ bị
               cắt — muốn làm cho màn hình phải sửa chỗ đó trước).

               Hai đầu thanh GIỮ NGUYÊN left/right 2px để còn bo góc — chỉ các mối nối
               bên trong mới cần tràn. */
            td.week-cell.active-sub::after,
            td.week-cell.active-milestone::after,
            tr.main-task[data-collapsed="true"] td.week-cell.active-main::after {
                left: -1px !important;
                right: -1px !important;
            }
            td.week-cell.active-bar-start::after {
                border-top-left-radius: 5px !important;
                border-bottom-left-radius: 5px !important;
                left: 2px !important;
            }
            td.week-cell.active-bar-end::after {
                border-top-right-radius: 5px !important;
                border-bottom-right-radius: 5px !important;
                right: 2px !important;
            }
            /* Hàng CHÍNH lúc thu gọn: bộ chọn của nó đặc hiệu (0,3,2) nên thắng hai quy
               tắc bo góc (0,2,1) ở trên — nếu không có hai dòng này thì thanh của hàng
               chính bị tràn cả hai đầu và mất bo góc. Nâng đặc hiệu lên (0,4,2). */
            tr.main-task[data-collapsed="true"] td.week-cell.active-main.active-bar-start::after {
                left: 2px !important;
            }
            tr.main-task[data-collapsed="true"] td.week-cell.active-main.active-bar-end::after {
                right: 2px !important;
            }

            /* ===== HÀNG CHÍNH ===== */
            .main-task td { background-color: #f8fafc !important; font-weight: bold !important; }
            .main-task .task-name-edit { font-weight: bold !important; text-transform: uppercase !important; color: #0f172a !important; }

            /* ===== MILESTONE ===== */
            .ms-diamond-container {
                position: absolute !important;
                left: 2px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                display: flex !important;
                align-items: center !important;
                gap: 5px !important;
                z-index: 6 !important;
                white-space: nowrap !important;
                width: 0 !important;
                min-width: 0 !important;
                max-width: 0 !important;
                height: 0 !important;
                overflow: visible !important;
            }
            .ms-diamond-container.ms-flip-left {
                left: auto !important;
                right: 4px !important;
                direction: rtl !important;
            }
            .ms-diamond-container.ms-flip-left .ms-timeline-label {
                direction: ltr !important;
            }
            .ms-diamond-icon {
                color: #2563eb !important;
                font-size: 14px !important;
                line-height: 1 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            tr[data-status="delayed"] .ms-diamond-icon { color: #ea580c !important; }
            .ms-timeline-label {
                font-size: 10px !important;
                font-weight: bold !important;
                color: #0f172a !important;
                background: rgba(255, 255, 255, 0.9) !important;
                white-space: nowrap !important;
                padding: 1px 4px !important;
                border-radius: 3px !important;
            }
            tr[data-status="delayed"] .ms-timeline-label { color: #ea580c !important; }

            /* ===== TEXT VÀ FIELDS ===== */
            .text-edit-field { font-size: 11px !important; line-height: 1.3 !important; color: #0f172a !important; }
            .display-date { border: none !important; padding: 0; font-size: 10px !important; width: 100% !important; min-width: 40px; white-space: nowrap !important; color: #0f172a !important; background: transparent !important; }
            .info-editable, h1 { border: none !important; margin-bottom: 0; padding: 0; outline: none !important; color: #0f172a !important; background: transparent !important; }

            /* ===== BADGE TRẠNG THÁI ===== */
            .pdf-temp-text { border: none !important; background: transparent !important; color: #0f172a !important; box-shadow: none !important; font-weight: bold !important; padding: 0 !important; }
            .pdf-status-badge { border-radius: 4px !important; padding: 2px 6px !important; display: inline-block !important; font-weight: bold !important; font-size: 10px !important; border: 1px solid transparent !important; }
            tr[data-status="pending"] .pdf-status-badge { background: #f1f5f9 !important; border-color: #94a3b8 !important; color: #475569 !important; }
            tr[data-status="waiting"] .pdf-status-badge { background: #f3e8ff !important; border-color: #c084fc !important; color: #6b21a8 !important; }
            tr[data-status="inprogress"] .pdf-status-badge { background: #dbeafe !important; border-color: #60a5fa !important; color: #1e40af !important; }
            tr[data-status="inspection"] .pdf-status-badge { background: #e0e7ff !important; border-color: #818cf8 !important; color: #3730a3 !important; }
            tr[data-status="delayed"] .pdf-status-badge { background: #ffedd5 !important; border-color: #fb923c !important; color: #9a3412 !important; }
            tr[data-status="paused"] .pdf-status-badge { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #64748b !important; }
            tr[data-status="done"] .pdf-status-badge { background: #dcfce7 !important; border-color: #4ade80 !important; color: #166534 !important; }
            tr[data-status="overdue"] .pdf-status-badge { background: #fee2e2 !important; border-color: #f87171 !important; color: #991b1b !important; }
            tr[data-status="cancelled"] .pdf-status-badge { background: #f3f4f6 !important; border-color: #d1d5db !important; color: #9ca3af !important; text-decoration: line-through !important; }

            /* ===== KHÁC ===== */
            .sub-task td.col-task::before, .milestone-task td.col-task::before { display: none !important; border: none !important; content: none !important; }
            .sub-task td.col-task { padding-left: 15px !important; }
            .milestone-task td.col-task { padding-left: 15px !important; text-decoration: none !important; font-weight: bold !important; color: #1e3a8a !important; }

            /* ===== CỤM TIÊU ĐỀ DỰ ÁN CĂN GIỮA CHUẨN HỒ SƠ KỸ THUẬT KHI IN ===== */
            #khoi-ten-cong-trinh {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                width: 100% !important;
                max-width: 100% !important;
                max-height: none !important;
                min-height: auto !important;
                margin: 0 auto 12px auto !important;
                padding: 4px 0 10px 0 !important;
                border: none !important;
                border-bottom: 1.5px solid #334155 !important;
                border-radius: 0 !important;
                background: transparent !important;
                box-shadow: none !important;
                transform: none !important;
                opacity: 1 !important;
            }
            #khoi-ten-cong-trinh .project-header-titles {
                width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                gap: 3px !important;
            }
            #khoi-ten-cong-trinh #project-title,
            #project-title {
                width: 100% !important;
                text-align: center !important;
                font-size: 15pt !important;
                font-weight: 900 !important;
                letter-spacing: 0.8px !important;
                text-transform: uppercase !important;
                line-height: 1.3 !important;
                color: #0f172a !important;
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
                margin: 0 auto 3px auto !important;
                padding: 0 !important;
            }
            #khoi-ten-cong-trinh #project-info,
            #project-info {
                width: 100% !important;
                text-align: center !important;
                font-size: 10.5pt !important;
                font-weight: 600 !important;
                color: #334155 !important;
                line-height: 1.35 !important;
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
                opacity: 1 !important;
                margin: 0 auto !important;
                padding: 0 !important;
            }
            body.print-mode-a3 #khoi-ten-cong-trinh {
                margin-bottom: 16px !important;
                padding-bottom: 12px !important;
                border-bottom-width: 2px !important;
            }
            body.print-mode-a3 #khoi-ten-cong-trinh #project-title,
            body.print-mode-a3 #project-title {
                font-size: 19pt !important;
                letter-spacing: 1px !important;
            }
            body.print-mode-a3 #khoi-ten-cong-trinh #project-info,
            body.print-mode-a3 #project-info {
                font-size: 12pt !important;
            }

            body.print-mode-a3 th.col-task, body.print-mode-a3 td.col-task { width: 280px !important; min-width: 280px !important; max-width: 280px !important; }

            /* KHỬ HOÀN TOÀN KHỐI ĐEN CỘT HÔM NAY KHI IN */
            th.today-col, th.today-col .day-num, th.today-col .day-name {
                background-color: #f8fafc !important;
                color: #0f172a !important;
            }
            td.week-cell.today-col {
                background-color: transparent !important;
            }

            /* ===== KHUNG CHỮ KÝ PHÁP LÝ KHI IN ===== */
            .print-only, #print-signature-block { display: block !important; }
            #print-signature-block {
                display: block !important;
                width: 100% !important;
                margin-top: 14px !important;
                margin-bottom: 8px !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
                box-sizing: border-box !important;
                clear: both !important;
            }
            #print-signature-block .sig-date-line {
                text-align: right !important;
                font-style: italic !important;
                font-size: 10pt !important;
                margin-bottom: 8px !important;
                color: #334155 !important;
            }
            #print-signature-block .sig-cols-grid {
                display: flex !important;
                justify-content: space-between !important;
                text-align: center !important;
                gap: 16px !important;
                width: 100% !important;
            }
            #print-signature-block .sig-col-box {
                flex: 1 !important;
                border: 1px solid #94a3b8 !important;
                border-radius: 6px !important;
                padding: 10px 10px 8px 10px !important;
                background: #ffffff !important;
                box-sizing: border-box !important;
            }
            #print-signature-block .sig-title {
                font-weight: 800 !important;
                font-size: 10.5pt !important;
                color: #0f172a !important;
                text-transform: uppercase !important;
            }
            #print-signature-block .sig-hint {
                font-size: 8.5pt !important;
                font-style: italic !important;
                color: #475569 !important;
                margin-top: 2px !important;
            }
            #print-signature-block .sig-space {
                height: 52px !important;
            }
            #print-signature-block .sig-line-name {
                font-weight: 700 !important;
                font-size: 9.5pt !important;
                border-top: 1px dashed #94a3b8 !important;
                width: 75% !important;
                margin: 0 auto !important;
                padding-top: 5px !important;
                color: #0f172a !important;
            }

            /* ===== BẢO VỆ CHẾ ĐỘ SÁNG KHI IN KỂ CẢ KHI BODY CÓ CLASS DARK-MODE ===== */
            html body.dark-mode, body.dark-mode {
                background: #ffffff !important;
                background-color: #ffffff !important;
                color: #0f172a !important;
            }
            html body.dark-mode .container, body.dark-mode .container,
            html body.dark-mode #table-wrapper, body.dark-mode #table-wrapper,
            html body.dark-mode #timeline-table, body.dark-mode #timeline-table {
                background: #ffffff !important;
                background-color: #ffffff !important;
                color: #0f172a !important;
                border-color: #cbd5e1 !important;
            }
            html body.dark-mode #khoi-ten-cong-trinh, body.dark-mode #khoi-ten-cong-trinh {
                background: transparent !important;
                background-color: transparent !important;
                border-color: #334155 !important;
            }
            html body.dark-mode #project-title, body.dark-mode #project-title {
                color: #0f172a !important;
            }
            html body.dark-mode #project-info, body.dark-mode #project-info {
                color: #334155 !important;
            }
            html body.dark-mode #table-body tr td, body.dark-mode #table-body tr td {
                color: #0f172a !important;
                background-color: #ffffff !important;
                border-color: #94a3b8 !important;
            }
            html body.dark-mode #table-body tr.main-task td, body.dark-mode #table-body tr.main-task td {
                background-color: #f1f5f9 !important;
                color: #0f172a !important;
            }
            html body.dark-mode th, body.dark-mode th {
                background-color: #f8fafc !important;
                color: #0f172a !important;
                border-color: #94a3b8 !important;
            }
            html body.dark-mode .task-name-edit, html body.dark-mode .text-edit-field,
            body.dark-mode .task-name-edit, body.dark-mode .text-edit-field {
                color: #0f172a !important;
            }
        }

        @media screen {
            .print-only { display: none !important; }
        }

        @media screen and (pointer: coarse) {
            .resizer-handle { width: 16px; right: -8px; }
            .btn-data { min-height: 38px; padding: 8px 12px; }
            .btn-tbl-action { min-width: 26px; min-height: 26px; }
            select, input[type="date"], input[type="number"] { min-height: 30px; }
        }
        @media screen and (hover: none) and (pointer: coarse) { .drag-handle { display: none; } }

        /* ================= GIAO DIỆN DI ĐỘNG NÂNG CẤP (APP-LIKE) ================= */
        @media screen and (max-width: 760px) {
            /* ============================================================================
               HỆ THỐNG THIẾT KẾ GIAO DIỆN ĐIỆN THOẠI (dựng 2026-08-20)
               Đo trước khi làm, trên máy 375x812: 12 cỡ chữ khác nhau (8,5px → 15px, dùng
               nhiều nhất là 9-11px), 6 mức độ đậm, 9 kiểu bo góc, 15 màu chữ / 22 màu nền,
               và 25 chỗ chữ không đạt chuẩn tương phản WCAG AA — trong đó có cả con số tiến
               độ chính "4% (1/24)" (chỉ 2.54, cần 4.5) và toàn bộ nhãn trạng thái 9px.
               Bối cảnh dùng thật quyết định hướng sửa: khách là cán bộ công trường, xem điện
               thoại NGOÀI TRỜI giữa nắng, phần lớn 35-55 tuổi, tay bẩn hoặc đeo găng. Nên ưu
               tiên chữ to - tương phản cao, chấp nhận mỗi màn hình ít dòng hơn.
               Mọi cỡ chữ/bo góc của giao diện điện thoại lấy từ các biến dưới đây, đừng ghi
               số rời rạc nữa.
               ============================================================================ */
            :root {
                /* [SỬA 2026-08-28] Người dùng thấy chữ trong danh sách công việc hơi to, đã hạ
                   cả thang xuống ~6%: sm 13→12,5 · md 14→13,5 · lg 16→15.
                   GIỮ NGUYÊN lý do ở trên — khách xem ngoài nắng, tuổi 35-55 — nên chỉ hạ chừng
                   mực, KHÔNG quay lại cỡ 9-11px của bản trước 20/08. --mv-text-xs vẫn là sàn
                   12px, đừng hạ tiếp nếu không có yêu cầu rõ ràng. */
                --mv-text-xs: 12px;   /* nhỏ nhất được phép — trước đây có chỗ tụt xuống 8,5px */
                 /* chú thích, ngày tháng */
                --mv-text-md: 13.5px; /* chữ thân, tên công việc */
                   /* tiêu đề nhóm hạng mục */
                --mv-text-xl: 20px;   /* số liệu nổi bật */
                --mv-radius-sm: 8px;
                --mv-radius-md: 12px;
                --mv-radius-pill: 999px;
            }

            /* Huy hiệu hành động trên 2 thẻ chỉ số: bỏ phần chữ, chỉ để mũi tên.
               Lý do: nhãn "Vật tư khẩn cấp" cần 102px nhưng chỉ được 77px nên bị cắt thành
               "VẬT TƯ KH...". Cả thẻ vốn đã bấm được rồi, nên chữ trong huy hiệu là thừa —
               bỏ nó đi thì trả lại đủ chỗ cho nhãn, thay vì cắt cụt nhãn để nhường huy hiệu. */
            /* [SỬA 2026-08-20] Chống iOS tự phóng to màn hình khi chạm vào ô nhập.
               Safari trên iPhone TỰ ĐỘNG zoom trang mỗi khi ô nhập được chọn mà cỡ chữ của nó
               NHỎ HƠN 16px — đây là hành vi cố định của hệ điều hành, không tắt được bằng JS.
               Sau khi zoom, trang không tự thu lại, nên khách mất kiểm soát bố cục đúng như phản
               ánh. Cách chữa duy nhất mà không phá tính năng phóng to (đừng bao giờ dùng
               maximum-scale=1 hay user-scalable=no — làm vậy là chặn luôn quyền phóng to của
               người mắt kém): cho mọi ô nhập trên điện thoại đúng 16px. */
            input, select, textarea,
            [contenteditable="true"] {
                font-size: 16px !important;
            }
            /* Tiêu đề và dòng thông tin dự án cũng là vùng sửa được tại chỗ (contenteditable), nên
               nếu để dưới 16px thì chạm vào vẫn bị zoom y hệt — để 16px cho hành vi nhất quán,
               rồi siết line-height lại để phần đầu không cao thêm đáng kể. */
            #project-title { line-height: 1.2 !important; }
            #project-info { line-height: 1.25 !important; opacity: 0.75; }

            .dash-cta { font-size: var(--mv-text-xs); padding: 2px 7px; border-radius: var(--mv-radius-sm); }
            .dash-cta-text { display: none; }
            /* Rút nhãn còn "Vật tư" / "Cảnh báo". Sau khi nâng cỡ nhãn 10px -> 12px cho dễ đọc
               ngoài nắng, chữ đầy đủ cần 121-125px mà chỗ trống chỉ còn 119px nên vẫn bị cắt.
               Phần đuôi bỏ đi không mất nghĩa vì ngay dưới đã có dòng số liệu nói rõ
               ("3 MỤC CẦN GẤP" / "4 MỤC CẦN CHÚ Ý"). Máy tính vẫn hiện đủ chữ. */
            .dash-label-more { display: none; }

            html, body { overflow-x: hidden !important; max-width: 100vw !important; box-sizing: border-box !important; }
            /* [SỬA 2026-08-20 — LỖI DO CHÍNH THAY ĐỔI TRƯỚC GÂY RA]
               Thêm viewport-fit=cover làm khung trang trải rộng ra TOÀN BỘ màn hình, kể cả phần
               sau tai thỏ và thanh trạng thái. Trước đó trình duyệt tự chừa chỗ nên không sao;
               sau khi bật cover mà chỉ khai báo đệm cho cạnh DƯỚI, thanh menu trên bị chui lên
               nằm dưới đồng hồ / sóng / pin của iPhone (người dùng gặp thật trên iPhone 12 Pro).
               Bật cover thì BẮT BUỘC phải chừa đủ cả 4 cạnh, không chỉ cạnh dưới. */
            body {
                padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
                padding-left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
                padding-right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
                /* [GIAI ĐOẠN 1] 76px -> 96px + đệm an toàn: hàng nút đáy mới cao hơn thanh 5 tab
                   cũ (nút 54px + đệm 12 trên / 22 dưới = 88px). Thiếu chỗ này là dòng cuối danh
                   sách chui xuống dưới hàng nút, không cuộn tới được. */
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
                background-color: var(--card-bg, #f1f5f9);
            }
            .container { padding: 4px; border: none; background: transparent; box-shadow: none; width: 100%; box-sizing: border-box; }
            
            h1 { font-size: 15px !important; margin-bottom: 2px;}
            .control-panel, #table-wrapper { display: none !important; }
            h1, .info-editable { pointer-events: none; }
            
            #mobile-view { display: block; }
            .app-topbar-header span[style*="width:1px"] { display: none !important; }

            /* TỐI ƯU TOPBAR HEADER TRÊN MOBILE THEO ĐÚNG THỨ TỰ */
            .app-topbar-header { 
                padding: 6px 8px !important; 
                margin-bottom: 8px !important; 
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                border-radius: 6px !important;
            }
            .topbar-left-group {
                display: flex !important;
                align-items: center !important;
                gap: 4px !important;
            }
            .topbar-brand-item {
                display: flex !important;
                align-items: center !important;
                cursor: pointer;
            }
            .topbar-right-group {
                display: flex !important;
                align-items: center !important;
                gap: 4px !important;
            }
            /* [2026-08-22] Nam muc tien ich khong con o thanh tren nua, chung da vao
               thanh ben trai. Thanh ben von da an duoi 761px nen khong can quy tac an
               rieng nao o day. */
            #btn-logout { display: none !important; }
            #label-dangky,
            #label-dangnhap {
                display: none !important;
            }
            /* Nhãn gói miễn phí thu gọn còn "MIỄN PHÍ" trên điện thoại — vẫn đọc được ý, không
               chiếm hết thanh trên cùng vốn đã chật. */
            #label-free-tier { display: none !important; }
            #label-free-tier-short { display: inline !important; }
            #tab-inst-pc { display: none !important; }

            /* Ẩn nút Góp Ý khỏi thanh trên trên điện thoại — bảng Menu dưới đã có mục
               "Góp Ý & Hỗ Trợ", để thêm ở đây là thừa và làm chật thanh vốn đã hẹp.

            /* Nút nào đã bị JS ẩn thì phải ẩn thật. Quy tắc .btn-data ngay dưới đây dùng
               !important nên thắng cả inline style — thiếu dòng này là nút ẩn vẫn hiện. */
            .app-topbar-header .btn-data.is-hidden { display: none !important; }

            /* [SỬA 2026-08-20] Vùng chạm ở thanh trên trước đây chỉ 25x23px (padding 5x6 + nhãn chữ
               bị ẩn, chỉ còn icon 13px), nhỏ hơn nhiều so với mức tối thiểu 44x44 mà cả Apple lẫn
               Google khuyến nghị — trong khi ĐĂNG KÝ chính là nút quan trọng nhất để ra tiền.
               Chiều cao cho nở tới 44px (thanh trên chỉ cao thêm vài px, đổi lại bấm không trượt);
               chiều rộng để 40px cho các nút phụ và 44px cho ĐĂNG KÝ/ĐĂNG NHẬP, tính toán để vẫn
               không tràn trên máy hẹp 320px. */
            .app-topbar-header .btn-data,
            .app-topbar-header a.btn-data {
                border: none !important;
                background: transparent !important;
                padding: 5px 6px !important;
                box-shadow: none !important;
                font-size: 11px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: 44px !important;
                min-width: 40px !important;
                box-sizing: border-box !important;
            }
            /* Hai nút chuyển đổi khách thành người dùng thật: cho đủ 44px cả hai chiều. */
            #login-btn-group a.btn-data,
            #login-btn-group .btn-data {
                min-width: 44px !important;
            }
            /* [UX-01] Quy tắc .btn-data ngay trên đặt background:transparent !important cho MỌI nút
               trên thanh, nhưng màu chữ #1e5349 của nút ĐĂNG KÝ nằm ở style inline nên không bị
               chạm tới. Kết quả: xanh đậm trên nền xanh đậm #112723→#1a3c36, tương phản đo được
               1,58:1 — trong khi các icon anh em cùng thanh đạt 13,93:1 (trắng) và 9,66:1 (vàng).
               Nút bán hàng duy nhất trên điện thoại gần như vô hình. Trên desktop không dính lỗi
               này vì nền bạc hà #e6f4ef còn nguyên (7,77:1).
               Trả lại đúng viên pill của bản desktop: vừa hết lỗi tương phản, vừa cho nút quan
               trọng nhất một hình dáng riêng giữa dãy icon phẳng. Bộ chọn có #login-btn-group nên
               thắng quy tắc .app-topbar-header ở trên về độ ưu tiên, không cần thêm mẹo gì.
               Đo lại sau khi sửa: 7,77:1. */
            #login-btn-group a.btn-data[href="nang-cap.html"] {
                background: var(--xv-c1-soft, #e6f4ef) !important;
                color: var(--xv-c1, #1e5349) !important;
                border: 1px solid var(--xv-c1-line, #a3d9c7) !important;
                /* [SỬA 2026-08-30] Trước là khối bo 8px cao trọn 44px, tức gần kín chiều cao
                   thanh (thanh chỉ cao 52px) — nhìn ra một mảng đặc nặng nề giữa dãy icon phẳng.
                   Người dùng: "bo viền hơi rộng, giảm tải bớt". Nay là viên pill cao 32px.
                   VÙNG CHẠM VẪN ĐỦ 44px, mở lại bằng lớp ::after trong suốt ngay dưới đây.
                   ĐỪNG bỏ lớp đó: 44px là mức tối thiểu Apple/Google khuyến nghị và đây là nút
                   ra tiền duy nhất trên điện thoại — xem ghi chú UX-01 ngay phía trên. */
                min-height: 32px !important;
                min-width: 40px !important;
                border-radius: 999px !important;
                position: relative !important;
            }
            #login-btn-group a.btn-data[href="nang-cap.html"]::after {
                content: "";
                position: absolute;
                left: 0; right: 0;
                top: 50%;
                transform: translateY(-50%);
                height: 44px;
            }
            /* Giữ nguyên hình viên pill lúc chạm — quy tắc :active chung bo về 4px làm nút nảy hình. */
            #login-btn-group a.btn-data[href="nang-cap.html"]:active { border-radius: 999px !important; }

            /* [GỠ KHỎI ĐIỆN THOẠI 2026-08-30] Nhãn "MIỄN PHÍ" ở thanh trên.
               Nó và dòng "Chỉ lưu máy này · Chạm để lưu Cloud" ở thanh công trình mở ra CÙNG một bảng
               nâng cấp, chỉ khác câu chữ — hai lối vào cho một việc. Đúng lý do đã gỡ nút ĐĂNG
               XUẤT trùng (22/08) và mục Giao Diện Sáng/Tối trùng (28/08). Người dùng chọn giữ
               dòng "Chỉ lưu máy này" vì nó nói ra RỦI RO thật chứ không chỉ dán nhãn gói.
               CHỈ ẩn trên điện thoại. Trên máy tính không có dòng kia (#mv-hang-trang-thai nằm
               trong #mobile-view) nên nhãn này vẫn là lối duy nhất tới bảng quyền lợi — bỏ luôn
               là máy tính mất hẳn chỗ báo "bạn đang dùng bản miễn phí". */
            #badge-free-tier { display: none !important; }
            /* [SỬA 2026-08-20] Cân lại tỉ lệ icon. Khi nâng nút lên 44px cho dễ bấm, icon vẫn để
               nguyên 12px nên chỉ lấp 27% ô nút — nhìn bé tí và lọt thỏm, trong khi logo lấp 54%.
               Nâng icon lên 20px (~45%) cho cùng "sức nặng" thị giác với logo. */
            .app-topbar-header .btn-data svg,
            .app-topbar-header a.btn-data svg {
                width: 20px !important;
                height: 20px !important;
            }
            /* Logo to lên một chút để vẫn là phần tử dẫn đầu thanh */
            .app-topbar-header .btn-data:active,
            .app-topbar-header a.btn-data:active {
                background: rgba(255,255,255,0.15) !important;
                border-radius: 4px !important;
            }
            #user-panel-group {
                display: none;
                align-items: center !important;
                gap: 2px !important;
            }
            #user-panel-group.show {
                display: flex !important;
            }
            #user-name-display {
                border: none !important;
                background: rgba(255,255,255,0.12) !important;
                padding: 4px 6px !important;
                max-width: 90px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                font-size: 11px !important;
                border-radius: 4px !important;
            }

            /* Dashboard compact grid */
            #dashboard-panel { 
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                padding: 0 !important;
            }
            .dashboard-panel { 
                display: grid !important; 
                grid-template-columns: repeat(2, 1fr) !important; 
                gap: 6px !important; 
                margin-bottom: 12px;
                width: 100% !important;
                box-sizing: border-box !important;
                padding: 0 !important;
            }
            .dash-card { border-radius: 8px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid var(--border-color); width: 100%; box-sizing: border-box; min-width: 0; overflow: hidden; }
            .dash-card-wide { grid-column: span 2 !important; width: 100% !important; }

.modal-box { width: 96vw !important; max-height: 92vh !important; padding: 16px 14px !important; border-radius: 12px !important;}
            .modal-box h3 { font-size: 15px; margin-bottom: 12px;}

            /* Side Add Panel on Mobile */
            #side-add-panel {
                width: 100% !important;
                max-width: 100vw !important;
                z-index: 9999 !important;
            }
            #side-add-overlay {
                z-index: 9998 !important;
            }

            /* FIXED BOTTOM NAVIGATION BAR */
            #mobile-bottom-nav {
                display: flex !important;
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                height: 58px !important;
                background: var(--card-bg, #ffffff) !important;
                border-top: 1px solid var(--border-color) !important;
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
                z-index: 8900 !important;
                padding: 0 4px calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
                align-items: center !important;
                justify-content: space-around !important;
                box-sizing: border-box !important;
            }

            /* ====================================================================
               ÁP THANG CHỮ & MÀU — đặt CUỐI khối @media là cố ý: các quy tắc phía
               trên cùng độ ưu tiên, quy tắc đứng sau mới thắng (bẫy đã gặp nhiều
               lần trong file này, xem ghi chú ở #btn-header-feedback).
               ==================================================================== */

            /* --- Chữ: dồn 12 cỡ rời rạc về đúng thang trên --- */

            /* --- Nhãn trạng thái (.status-pill do statusBadge() sinh ra): trước là 9px với tương
                   phản 2.86-4.24, không đọc nổi ngoài nắng. Màu đã sửa trong statusBadge();
                   ở đây lo cỡ chữ và hình dáng. --- */
            .status-pill {
                font-size: var(--mv-text-xs) !important;
                font-weight: 800 !important;
                padding: 4px 10px !important;
                border-radius: var(--mv-radius-pill) !important;
                letter-spacing: 0.2px !important;
            }

            /* --- Số liệu trên thẻ chỉ số.
                   Lưu ý: .dash-value KHÔNG phải lúc nào cũng là một con số ngắn — hai thẻ Vật tư và
                   Cảnh báo đổ vào đây cả cụm chữ ("3 MỤC CẦN GẤP", "4 MỤC CẦN CHÚ Ý") do JS ghép sẵn
                   ở computeMaterialWarningBadge()/computeRiskWarningBadge(). Cụm chữ đó mà để cỡ 20px
                   thì tràn khỏi thẻ rộng 151px. Nên: cỡ vừa cho mặc định, chỉ riêng ô % tiến độ —
                   thứ khách liếc đầu tiên và luôn ngắn — mới dùng cỡ lớn nhất. --- */
            .dash-value { font-size: var(--mv-text-md) !important; font-weight: 900 !important; }
            #dash-percent-text { font-size: var(--mv-text-xl) !important; }
            .dash-label { font-size: var(--mv-text-xs) !important; }

            /* --- Bo góc: gom 9 giá trị rời rạc về 2 --- */
            .dash-card {
                border-radius: var(--mv-radius-md) !important;
            }

            /* --- Màu thương hiệu: nút hành động chính đang là XANH DƯƠNG (#0075ff) chỏi hẳn
                   với xanh lá thương hiệu (--brand-primary #20564c). Nút nổi bật nhất màn hình
                   mà lại không mang màu thương hiệu là bỏ phí cơ hội nhận diện. --- */

            /* ====================================================================
               TẦNG 2 — DỌN MÀN HÌNH ĐẦU
               Đo trước khi sửa: công việc đầu tiên nằm ở y=669 trên màn cao 812px,
               tức 82% màn hình đầu là khung và số liệu tóm tắt, không phải việc cần
               làm. Khách mở app để biết "hôm nay làm gì, cái gì trễ" mà phải cuộn
               mới thấy dòng việc đầu tiên.
               ==================================================================== */

            /* 4 thẻ chỉ số đang xếp lưới 2 cột thành 3 hàng (~205px chiều cao).
               Chuyển thành MỘT dải ngang vuốt được, cao ~64px. Thẻ kế tiếp cố tình
               ló ra ở mép phải để khách biết là còn vuốt được nữa.
               [2026-08-28] Có thử đổi sang lưới 2×2 đứng yên cho khỏi bị cắt ở mép phải, nhưng
               người dùng chọn GIỮ kiểu vuốt ngang — đây là chủ ý, không phải lỗi. Đừng "sửa" lại. */
            .dashboard-panel {
                display: flex !important;
                grid-template-columns: none !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
                gap: 8px !important;
                margin-bottom: 10px !important;
                padding-bottom: 4px !important;
                scrollbar-width: none;
            }
            .dashboard-panel::-webkit-scrollbar { display: none; }
            .dashboard-panel > .dash-card {
                flex: 0 0 auto !important;
                width: 152px !important;
                scroll-snap-align: start;
                padding: 8px 10px !important;
            }
            .dashboard-panel > .dash-card-wide {
                grid-column: auto !important;
                width: 200px !important;
            }
            /* Thứ tự khi vuốt: % tiến độ -> cảnh báo -> vật tư -> dự báo -> biểu đồ.
               Hai thẻ BẤM ĐƯỢC (cảnh báo, vật tư) đẩy lên sớm vì đó là thứ phải xử lý,
               còn dự báo và biểu đồ chỉ để tham khảo. */
            .dashboard-panel > .dash-card:nth-child(1) { order: 1; }
            .dashboard-panel > #btn-risks-dash         { order: 2; }
            .dashboard-panel > #btn-materials-dash     { order: 3; }
            .dashboard-panel > .dash-card:nth-child(2) { order: 4; }
            .dashboard-panel > #dash-chart-card        { order: 5; }

            /* Tiêu đề bảng đang là 2 dòng chữ hoa cỡ lớn. Thu nhỏ lại — tên dự án thật
               ("135 NGUYỄN TRÃI") vẫn hiện đầy đủ ngay bên dưới ở ô chọn công trình, nên
               không mất thông tin gì. Vẫn cho xuống dòng vì ô này sửa tại chỗ được. */
            /* [2026-08-20] Ẩn hẳn tiêu đề bảng và dòng mô tả trên điện thoại.
               Đo được: tiêu đề 41px + mô tả 32px + thanh chọn công trình 75px = 160px chỉ để nói "bạn
               đang xem công trình nào" — quá nhiều trên màn hình 812px. Mà tên công trình thì thanh chọn
               ngay dưới đã hiện đủ, nên tiêu đề gần như lặp lại. Dòng mô tả (CĐT, diện tích...) là
               thông tin tra cứu, không phải việc phải làm hôm nay.
               Cả hai KHÔNG bị xoá: vẫn sửa và xem được trên máy tính, và vẫn in ra trong báo cáo.
               Lưu ý phụ: cả hai là contenteditable nên buộc phải để 16px (chống iOS tự zoom), tức
               càng chiếm chỗ — ẩn đi giải quyết luôn cả hai vấn đề. */
            #project-title, #project-info { display: none !important; }

            /* [SỬA 2026-08-20] Ẩn hẳn băng thông báo trên điện thoại. Đo được nó chiếm 50px ngay
               đầu màn hình — chỗ đắt nhất của app — để đăng tin của nhà phát triển, thứ không phải
               việc khách phải làm hôm nay. Nội dung KHÔNG mất: toàn bộ tin gom vào bảng
               Menu ▸ Có Gì Mới, kèm dấu "MỚI" khi có tin chưa đọc nên vẫn báo được.
               Trên máy tính băng này vẫn giữ nguyên vì ở đó thừa chỗ. */
            #system-announcement-banner { display: none !important; }

            /* Siết lại các khoảng trống thừa ở phần đầu. Đo từng khối cho thấy chúng cộng dồn
               mới là thứ đẩy công việc xuống sâu, chứ không phải riêng khối nào quá to:
               khối tiêu đề 52px, thanh chọn công trình 89px, hai tiêu đề mục 42px mỗi cái. */
            #project-title { margin: 0 0 2px 0 !important; line-height: 1.25 !important; }
            #project-info  { line-height: 1.3 !important; }
                        
            /* ====================================================================
               TẦNG 3 — "SỔ TAY CÔNG TRƯỜNG": dấu ấn riêng của Rơm-todo
               Trước đây giao diện điện thoại sạch nhưng không có gì để nhớ — đặt
               cạnh mười app quản lý khác thì không phân biệt được. Ý tưởng: làm cho
               nó giống cuốn sổ tay của kỹ sư giám sát hơn là một trang quản trị web.
               Hai thứ tạo nên chất đó, và đều rẻ:
                 1. Nền giấy ấm thay nền xám xanh (cũng hợp cái tên "Rơm").
                 2. Một đường "xương sống tiến độ" chạy dọc danh sách hạng mục, mỗi
                    hạng mục chính là một nút trên đường đó — đọc như trục thời gian
                    thật, thứ mà bảng tiến độ giấy nào cũng có.
               ==================================================================== */

            /* Nền giấy ấm. Chỉ áp cho giao diện sáng — chế độ tối có bảng màu riêng,
               đụng vào là hỏng độ tương phản đã cân ở đó. Thẻ vẫn trắng nên nổi lên
               trên nền ấm, giống tờ giấy đặt trên mặt bàn gỗ.

               [CÂN LẠI TOÀN BỘ 2026-08-30] Người dùng: "màu nền chưa chuẩn lắm (xanh nhạt kết
               hợp vàng nhạt), nhìn cứ mờ mờ mắt, mỏi mắt khi xem lâu." Đo ra đúng hai nguyên nhân,
               và không phải do chọn sai một màu nào cả:

               1. BA TÔNG MÀU ĐÁNH NHAU trên cùng một màn hình. Nền trang ấm 40° (vàng), thân thẻ
                  và hàng việc lạnh 210° (xanh dương #f8fafc), dải tiêu đề nhóm lạnh 158°
                  (xanh lá #e9f1ee). Mắt không bắt được đâu là màu trung tính nên phải điều tiết
                  liên tục — đó chính là cảm giác "mờ mờ".
               2. MỌI RANH GIỚI ĐỀU DƯỚI NGƯỠNG NHÌN THẤY. Đo tương phản: nền trang / thẻ trắng
                  = 1,07:1 · tiêu đề nhóm / thẻ = 1,15:1. Dưới khoảng 1,2:1 thì mắt không "chốt"
                  được vào cạnh nào, cứ dò mãi — mỏi là tất yếu.

               CÁCH SỬA: giữ ý tưởng giấy ấm (đó là bản sắc "sổ tay công trường", hợp cái tên Rơm),
               nhưng đưa TẤT CẢ mảng lớn về CÙNG MỘT tông ấm ~38°, rồi NỚI RỘNG các bậc:

                 nền trang #ece5d9  ->  thẻ trắng #ffffff   = 1,25:1 (trước 1,07)
                 dải tiêu đề #f4eee3 -> thẻ trắng           = 1,16:1, nay CÙNG tông nên đọc ra
                                                              là "bóng đổ" chứ không phải màu khác
                 viền #e4ddd0        -> thẻ trắng           = 1,35:1 (trước 1,23)

               Màu xanh thương hiệu KHÔNG mất đi — nó chuyển về đúng vai trò: chữ, trục tiến độ,
               nút tròn, nhãn trạng thái. Tô cả mảng lớn bằng màu thương hiệu là lý do khiến màn
               hình bị đục; để nó làm điểm nhấn thì vừa nổi hơn vừa đỡ mỏi.

               Chữ vẫn dư tương phản sau khi đổi: đen trên nền giấy 14,3:1 · xám trên thẻ 7,6:1 ·
               xanh đậm trên dải tiêu đề 11,5:1 (ngưỡng AA là 4,5:1). */
            /* [LÀM LẠI LẦN 2 — 2026-08-30 chiều] Bản giấy ấm ở trên đã bị người dùng bác. Lý do
               họ đúng, và đó là LỖI ĐO CỦA TÔI:

               Tôi cân "nền trang so với THẺ TRẮNG" và được 1,25 — nhưng ở trạng thái mặc định các
               nhóm đều ĐANG GẤP, nên thứ chiếm gần hết màn hình không phải thẻ trắng mà là DẢI
               TIÊU ĐỀ nhóm. Dải ấm `#f4eee3` so với nền ấm `#ece5d9` chỉ **1,08:1** — gần đúng
               bằng con số 1,07 mà tôi đặt mục tiêu sửa. Cả màn hình thành một mảng be liền.
               Bài học: đo đúng cặp màu mà NGƯỜI DÙNG THẬT SỰ NHÌN THẤY ở trạng thái mặc định,
               không phải cặp thuận tay nhất để đo.

               Người dùng chọn hướng: **trung tính, không ám màu**. Nên bỏ hẳn chất giấy ấm.

               Sửa hai việc cùng lúc:
                 1. Bảng màu về xám trung tính TUYỆT ĐỐI (R=G=B, biên độ 0) — không ngả vàng,
                    không ngả xanh. Màu thương hiệu chỉ còn ở chữ, trục tiến độ, nút và nhãn.
                 2. Nhóm ĐANG GẤP thì chính tiêu đề nó LÀ cái thẻ, nên tiêu đề mang màu THẺ
                    (trắng) chứ không phải màu dải — xem quy tắc tách open/không-open bên dưới.
                    Nhờ vậy cái người dùng nhìn thấy nhiều nhất mới là cặp có tương phản thật.

                 nền #eaeaea -> thẻ trắng (và tiêu đề nhóm đang gấp) = 1,20:1
                 dải #f4f4f5 -> thẻ trắng, chỉ dùng cho nhóm ĐANG MỞ    = 1,10:1
                 viền #dcdcdc -> thẻ trắng                              = 1,36:1

               Chữ: đen trên nền 14,8:1 · xám phụ trên thẻ 7,6:1 — dư xa ngưỡng AA 4,5:1. */
            /* ════════════════════════════════════════════════════════════════════
               [GIAI ĐOẠN 1 — 2026-08-30] BẢNG TOKEN CỦA THIẾT KẾ MỚI
               Lấy nguyên từ `design_handoff_rom_todo_mobile/Rom-todo Prototype.dc.html`
               (khối <style> trong <helmet>). Bảng cũ tự cân hôm nay đã bỏ.

               HAI TẦNG BIẾN, cố ý:
                 · Tầng 1 — tên của THIẾT KẾ (--bg, --card, --tx…): dùng cho mọi CSS mới viết
                   theo bản thiết kế. Tên trùng khớp tài liệu nên đối chiếu thẳng được.
                 · Tầng 2 — CẦU NỐI sang tên cũ của app (--bg-color, --card-bg…): mọi CSS di động
                   đang chạy đều đọc qua mấy tên này, nên nối vào là cả màn hình đi theo bảng mới
                   mà không phải sửa lại từng quy tắc. Khi nào dựng xong hết các màn thì gỡ tầng 2.

               BỐN GIÁ TRỊ LỆCH KHỎI THIẾT KẾ — đều vì tương phản dưới ngưỡng AA 4,5:1, đã báo
               người dùng. App này dùng ngoài nắng, và công trình đã từng vá đúng loại lỗi này (UX-10).
                 --warn  #de7228 (2,89 trên nền chip) -> #a94d0c (5,04)
                 --info  #0075ff (3,72)               -> #0060d6 (5,10)  ← đúng giá trị UX-10 đã duyệt
                 --mut   #6b7c78 (4,39)               -> #586864 (5,87; trên nền xám #eaedec 4,98)
                 --mut2  #8a9793 (3,03)               -> #5d6e6a (5,38; trên nền xám #eaedec 4,57)
               Chế độ tối chỉ lệch một giá trị: --mut2 #64748b (3,60) -> #7c8a9c (4,87).
               Mọi token còn lại giữ NGUYÊN VĂN thiết kế.
               ════════════════════════════════════════════════════════════════════ */
            body:not(.dark-mode) {
                /* [LỆCH KHỎI THIẾT KẾ 2026-08-30] --bg: #f4f6f5 -> #eaedec.
                   Thiết kế để nền chỉ hơn thẻ trắng 1,09:1 và trông cậy vào đường viền của thẻ để
                   tách. Sáng nay người dùng đã bác đúng mức đó ("mờ mờ, mỏi mắt") và duyệt mức
                   1,20. Họ xem bản dựng theo thiết kế rồi yêu cầu "đẩy nền đậm hơn một nấc".
                   #eaedec = 1,18:1 — gần đúng mức đã duyệt, vẫn giữ sắc hơi ngả xanh của thiết kế
                   (biên độ 3) chứ không quay về xám thuần. Đây là chỗ lệch CÓ CHỦ Ý, đừng "sửa
                   lại cho khớp thiết kế". */
                --bg:#eaedec; --card:#ffffff; --bd:#e2e8f0; --bd2:#f1f5f4;
                --tx:#0f1a18; --tx2:#3a4a46; --mut:#586864; --mut2:#5d6e6a; --dim:#cfdad7;
                --br:var(--xv-c1, #20564c); --brTx:#ffffff; --brSoft:var(--xv-c1-soft, #e6f4ef); --brLine:var(--xv-c1-line, #a3d9c7);
                --brShadow:0 8px 20px rgba(var(--xv-c1-rgb, 32,86,76),.28);
                --warn:#a94d0c; --warnBg:#fdf1e8; --info:#0060d6; --infoBg:#e8f2ff;
                --dan:#ee5959; --danBg:#fdeaea;
                --track:#eef2f1;
                --zone:#f6f8f7;  --dark: var(--xv-top-a, #0f1a18); --darkTx:#ffffff;
            }
            body.dark-mode {
                --bg:var(--xv-s0, #0b1312); --card:var(--xv-s1, #111e1b); --bd:var(--xv-s2, #1e332f); --bd2:var(--xv-s3, #162523);
                --tx:#f1f5f9; --tx2:#cbd5e1; --mut:#94a3b8; --mut2:#7c8a9c; --dim: var(--xv-d1-line, #24574a);
                --br:var(--xv-d1, #34d399); --brTx:var(--xv-d1-on, #062a21); --brSoft:var(--xv-d1-soft, rgba(var(--xv-d1-rgb, 52,211,153),.14)); --brLine:var(--xv-d1-line, #24574a);
                --brShadow:0 8px 20px rgba(var(--xv-d1-rgb, 52,211,153),.18);
                --warn:#fb923c; --warnBg:rgba(251,146,60,.14); --info:#22d3ee; --infoBg:rgba(34,211,238,.13);
                --dan:#f87171; --danBg:rgba(248,113,113,.13);
                --track:var(--xv-s3, #162523);
                --zone:var(--xv-s5, #0e1917);  --dark:var(--xv-s1, #111e1b); --darkTx:var(--xv-d1, #34d399);
            }
            /* Tầng 2 — cầu nối sang tên biến cũ. Viết chung một chỗ cho cả hai giao diện. */
            body:not(.dark-mode), body.dark-mode {
                background-color: var(--bg) !important;
                color: var(--tx);
                font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
                --bg-color: var(--card);
                --card-bg: var(--card);
                --highlight: var(--bd2);
                --border-color: var(--bd);
                --text-color: var(--tx);
                --note-color: var(--mut);
            }

            /* ───── HÀNG NÚT ĐÁY [☰] [nút chính] [+] ─────
               Đè lên bộ quy tắc của thanh 5 tab cũ (ở phía trên trong cùng khối @media này) —
               cùng độ ưu tiên nên quy tắc đứng SAU thắng. Mấy quy tắc .mv-nav-* cũ nay không còn
               thẻ nào dùng tới, giai đoạn 2 sẽ dọn. */
            #mobile-bottom-nav {
                display: flex !important;
                position: fixed !important;
                left: 0 !important; right: 0 !important; bottom: 0 !important;
                z-index: 8900 !important;
                height: auto !important;
                gap: 10px !important;
                align-items: center !important;
                justify-content: flex-start !important;
                padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
                background: var(--bg) !important;
                border-top: none !important;
                box-shadow: none !important;
                box-sizing: border-box !important;
            }
            .mv-nut-phu {
                width: 54px; height: 54px; flex: none;
                border-radius: 18px;
                background: var(--card);
                border: 1px solid var(--bd);
                color: var(--br);
                display: flex; align-items: center; justify-content: center;
                position: relative; cursor: pointer;
                font: 700 16px 'Be Vietnam Pro', sans-serif;
                -webkit-tap-highlight-color: transparent;
            }
            .mv-nut-them {
                background: var(--dark);
                border-color: var(--dark);
                color: var(--darkTx);
                font: 700 26px 'Be Vietnam Pro', sans-serif;
                line-height: 1;
            }
            .mv-nut-chinh {
                flex: 1 1 auto; min-width: 0;
                border-radius: 18px;
                padding: 17px 8px;
                background: var(--br);
                border: 1px solid var(--br);
                color: var(--brTx);
                box-shadow: var(--brShadow);
                font: 700 12.5px 'Be Vietnam Pro', sans-serif;
                text-align: center; cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }
            /* Kiểu VIỀN — thiết kế dùng cho màn chỉ xem và các màn phụ (xem bảng nhãn nút chính). */
            .mv-nut-chinh.vien {
                background: var(--card);
                border-color: var(--bd);
                color: var(--tx);
                box-shadow: none;
            }
            .mv-nut-chinh:disabled { opacity:.45; box-shadow:none; cursor:not-allowed; }
            .mv-nut-phu:active, .mv-nut-chinh:active { opacity: .82; }
            /* Máy hẹp 320px: thu đệm ngang của hàng và cỡ chữ để nhãn nút chính vừa một dòng.
               (26/09/2026 người dùng đổi nhãn "CHỐT NGÀY & GỬI BÁO CÁO" thành "GỬI BÁO CÁO".) */
            @media (max-width: 360px) {
                #mobile-bottom-nav { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
                .mv-nut-chinh { font-size: 11px; padding: 17px 4px; }
            }
            /* Chấm và số trên nút ☰ nằm hai góc khác nhau: chấm = có hoạt động chưa xem (đã có
               sẵn từ trước), số = tổng việc gấp (cảnh báo + vật tư) gộp từ hai huy hiệu của thanh
               tab cũ. Để chung một góc thì chúng chồng lên nhau. */
            #mv-nut-menu-badge {
                position: absolute; top: -6px; right: -6px;
                min-width: 20px; height: 20px; padding: 0 5px;
                border-radius: 10px;
                background: var(--info, #2563eb); color: #ffffff;
                font: 700 11px 'JetBrains Mono', monospace;
                align-items: center; justify-content: center;
                box-sizing: border-box;
                border: 2px solid var(--bg);
            }

            /* ═══════════ KHỐI "HÔM NAY/QUÁ HẠN" DÙNG CHUNG ═══════════
               Dựng theo màn `today` gốc của bản bấm thử. Màn "today" riêng (#mv-hom-nay-moi) đã
               xoá hẳn ở Đợt 9 — các lớp dưới đây nay chỉ còn được veManTatCa() (màn "all") dùng,
               qua các hàm _mvh*() dùng chung (xem _mvhBang/_mvhDsQuaHan...). */

            /* ── Đầu màn ── */
            .mvh-tieu-de { font: 700 20px/1.25 'Be Vietnam Pro', sans-serif; color: var(--tx); }
            /* Hàng tên dự án là một VÙNG CHẠM: thẻ <select> thật được đặt chồng lên, trong suốt.
               Nhờ vậy chạm vào tên là mở đúng bộ chọn công trình của hệ điều hành, không phải dựng
               thêm màn nào — màn Công trình riêng để giai đoạn 2. */
            .mvh-du-an { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; min-height: 24px; }
            .mvh-du-an-ten { font: 500 11px 'Be Vietnam Pro', sans-serif; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; }
            .mvh-du-an > select {
                position: absolute; inset: -6px -8px; width: calc(100% + 16px); height: calc(100% + 12px);
                opacity: 0; border: 0; padding: 0; margin: 0; background: none; -webkit-appearance: none; appearance: none;
            }
            .mvh-chuong {
                position: relative; width: 38px; height: 38px; flex: none;
                border-radius: 12px; background: var(--card); border: 1px solid var(--bd);
                display: flex; align-items: center; justify-content: center;
                color: var(--tx); cursor: pointer; padding: 0;
            }
            .mvh-chuong-so {
                position: absolute; top: -4px; right: -4px;
                min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
                border-radius: 9px; background: var(--dan); color: #fff;
                font: 700 11px 'JetBrains Mono', monospace;
                display: flex; align-items: center; justify-content: center;
            }
            /* Lối vào tài khoản đặt cạnh chuông: người dùng không phải mở một menu dài mới biết
               mình đang dùng Cloud hay dữ liệu chỉ nằm trên máy. Bản local dùng biểu tượng khác
               và chấm cam để không tạo cảm giác đã đăng nhập. */
            .mvh-tai-khoan {
                position: relative; width: 38px; height: 38px; flex: none; margin-left: 8px;
                border-radius: 50%; border: 1px solid var(--brLine); background: var(--brSoft);
                color: var(--br); display: flex; align-items: center; justify-content: center;
                padding: 0; cursor: pointer; font: 700 12px 'Be Vietnam Pro', sans-serif;
            }
            .mvh-tai-khoan.local { border-color: var(--tx); background: var(--tx); color: var(--bg); font-size: 16px; font-weight: 400; }
            .mvh-tai-khoan-cham { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; box-sizing: border-box; border: 2px solid var(--bg); border-radius: 50%; background: var(--warn); }
            /* Đợt 4: huy hiệu NÂNG CẤP cạnh chuông/avatar ở đầu trang chủ, chỉ hiện khi chưa đăng nhập Cloud. */
            .mvt-nang-cap { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 160px; background: var(--brSoft); border: 1px solid var(--brLine); color: var(--br); font: 800 11px 'Be Vietnam Pro', sans-serif; letter-spacing: .03em; white-space: nowrap; cursor: pointer; }


            /* ── Băng trạng thái ── */
            .mvh-bang { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 11px 13px; margin-bottom: 11px; }
            /* Đợt 4: bản gọn một dòng dùng chung cho cả 3 băng nhắc đầu trang chủ. */
            .mvh-bang.gon { align-items: center; padding: 10px 12px; }
            .mvh-bang.gon .mvh-bang-cham { margin-top: 0; }
            .mvh-bang-cham { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
            .mvh-bang-td { font: 700 11.5px 'Be Vietnam Pro', sans-serif; }
            .mvh-bang-nut { font: 700 11px 'Be Vietnam Pro', sans-serif; flex: none; cursor: pointer; margin-top: 2px; background: none; border: 0; padding: 0; }
            .mvh-bang-dong { width: 28px; height: 28px; flex: none; margin: -5px -6px -5px 1px; border: 0; border-radius: 9px; background: transparent; color: var(--mut); cursor: pointer; font: 700 15px/1 'Be Vietnam Pro', sans-serif; }

            /* ── Khối việc quá hạn ──
               Việc trễ không được lẫn vào danh sách hôm nay: khi trộn chung, người dùng dễ bỏ
               qua việc tồn từ hôm trước và số "Đã xong" cũng trở nên khó hiểu. Khối này chỉ có
               trên ngày hôm nay; khi chọn ngày khác, danh sách trả lời đúng cho ngày đang xem. */
            .mvh-qua-han-the { display: flex; gap: 10px; align-items: flex-start; padding: 11px; background: var(--card); border: 1px solid var(--dan); border-radius: 14px; }

            /* ── Thẻ việc ── */
            .mvh-the {
                background: var(--card); border: 1px solid var(--bd); border-radius: 16px;
                padding: 13px 14px; display: flex; gap: 12px; align-items: flex-start;
                touch-action: pan-y; position: relative; will-change: transform;
                transition: transform 0.22s ease-out, background 0.22s ease-out, border-color 0.22s ease-out;
            }

            /* Màn khởi đầu không có dự án: cùng ngôn ngữ với mẫu "dự án rỗng" trong prototype,
               nhưng không tạo một project giả chỉ để lấp giao diện. */
            #empty-project-state { display: none !important; }
            .mvh-khong-du-an { min-height: calc(100vh - 210px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 18px 34px; text-align: center; }
            .mvh-khong-du-an-icon { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 22px; border: 1px dashed var(--brLine, #a3d9c7); background: var(--brSoft, #e6f4ef); color: var(--br, #20564c); }
            .mvh-khong-du-an-td { margin-top: 18px; color: var(--tx, #0f1a18); font: 700 17px/1.35 'Be Vietnam Pro', sans-serif; }
            .mvh-khong-du-an-noi { max-width: 300px; margin-top: 7px; color: var(--mut, #586864); font: 500 11.5px/1.55 'Be Vietnam Pro', sans-serif; }
            .mvh-khong-du-an-nut { width: 100%; max-width: 300px; min-height: 46px; margin-top: 18px; border: 1px solid var(--br, #20564c); border-radius: 13px; background: var(--br, #20564c); color: var(--brTx, #ffffff); cursor: pointer; font: 800 11px 'Be Vietnam Pro', sans-serif; letter-spacing: .03em; }
            .mvh-khong-du-an-phu { width: 100%; max-width: 300px; min-height: 44px; margin-top: 8px; border: 1px solid var(--bd, #e2e8f0); border-radius: 13px; background: var(--card, #ffffff); color: var(--tx, #0f1a18); cursor: pointer; font: 700 11px 'Be Vietnam Pro', sans-serif; }

            /* Khối cũ mà màn mới đã thay thế. GIỮ trong tài liệu, chỉ ẩn — giai đoạn 3 dọn hẳn.
               #mv-task-list và tiêu đề của nó nay do màn "Tất cả hạng mục" thay thế. Dải chỉ số
               desktop cũng được thay bằng màn "Tiến độ" riêng trên điện thoại, nên không để nó
               chiếm chỗ trên màn "Việc hôm nay" nữa. */
            #dashboard-panel { display: none !important; }

            /* ═══════════ NHIỀU MÀN TRONG #mobile-view ═══════════
               Thuộc tính `hidden` của HTML bị mọi quy tắc `display` đè mất, nên phải ghi rõ. */
            .mv-man[hidden] { display: none !important; }

            /* ═══════════ MÀN "TẤT CẢ HẠNG MỤC" ═══════════ */
            .mvt-dau { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0 6px; }
            .mvt-o-tim {
                width: 100%; box-sizing: border-box; margin-bottom: 8px;
                padding: 10px 12px; border-radius: 12px;
                border: 1px solid var(--bd); background: var(--card); color: var(--tx);
                font: 500 12.5px 'Be Vietnam Pro', sans-serif; outline: none;
            }
            .mvt-dem { font: 600 11.5px 'Be Vietnam Pro', sans-serif; color: var(--mut2); margin-bottom: 10px; }

            /* ═══════════ MÀN "CHI TIẾT HẠNG MỤC" — GIAI ĐOẠN 3A ═══════════
               Đây là màn native mobile đầu tiên thay thế popup sửa nhanh. Mọi quy tắc đều nằm
               trong khối mobile nên bảng desktop và popup cũ không bị đổi giao diện. */
            #mv-man-detail { padding-bottom: 0; }
            #mv-man-detail:not([hidden]) {
                display: flex !important; flex-direction: column; min-height: 0;
                /* [BỎ TOP BAR MOBILE 2026-08-30] Trước đây trừ 164px, trong đó khoảng 56px
                   dành cho thanh logo/tài khoản trên cùng. Thanh đó nay chỉ giữ ở desktop;
                   mọi lối Tài khoản/Đăng nhập/Đăng ký/Giao diện đã chuyển vào menu ☰. */
                height: calc(100dvh - 108px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
                overflow: hidden;
            }
            /* Concept giữ nguyên cụm quay lại + tên + chip + thời gian, chỉ cuộn phần trạng thái,
               tiến độ, checklist và ghi chú. Tách hai tầng thật sự thay vì sticky: phần đầu không
               bao giờ bị nhả ở cuối container, còn người dùng vẫn vuốt tự nhiên trong phần dưới. */
            .mvct-co-dinh {
                position: relative; z-index: 30; flex: none;
                margin: 0 -1px; padding: 0 1px 2px;
                background: var(--bg);
            }
            .mvct-cuon {
                flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
                padding: 0 1px 8px; overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch; scrollbar-width: none;
            }
            .mvct-cuon::-webkit-scrollbar { display: none; }
            .mvct-ten {
                display: block; width: 100%; min-height: 38px; box-sizing: border-box; padding: 3px 0 8px;
                border: 0; border-bottom: 1px dashed var(--bd); border-radius: 0;
                background: transparent; color: var(--tx); outline: none; resize: none; overflow: hidden;
                white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; text-align: left;
                font: 700 20px/1.35 'Be Vietnam Pro', sans-serif;
            }
            .mvct-ten:focus { border-bottom-color: var(--br); }
            .mvct-ten:disabled { opacity: 1; -webkit-text-fill-color: var(--tx); }
            .mvct-khoa {
                margin-left: auto; color: var(--mut); font: 600 11px 'Be Vietnam Pro', sans-serif;
            }
            .mvct-the {
                background: var(--card); border: 1px solid var(--bd); border-radius: 16px;
                padding: 14px; margin-bottom: 11px;
            }
            .mvct-the-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
            .mvct-lich { display: grid; grid-template-columns: 1fr 72px 1fr; gap: 8px; align-items: end; }
            .mvct-o { min-width: 0; }
            .mvct-o label {
                display: block; margin-bottom: 6px; color: var(--mut2);
                font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .05em; text-transform: uppercase;
            }
            .mvct-o input {
                width: 100%; min-width: 0; max-width: 100%; height: 42px; box-sizing: border-box; padding: 8px 9px;
                border: 1px solid var(--bd); border-radius: 11px;
                background: var(--zone); color: var(--tx); outline: none;
                font: 600 16px 'Be Vietnam Pro', sans-serif;
            }
            .mvct-o input[type="number"] { text-align: center; }
            .mvct-o input:focus { border-color: var(--br); }
            .mvct-o input:disabled { opacity: 1; -webkit-text-fill-color: var(--tx); }
            .mvct-ngay-chon {
                position: relative; min-height: 42px; box-sizing: border-box; padding: 11px 26px 11px 8px;
                border: 1px solid var(--bd); border-radius: 11px; overflow: hidden;
                background: var(--zone); color: var(--tx); text-align: center;
                font: 700 11.5px 'JetBrains Mono', monospace;
            }
            .mvct-ngay-chon svg { position: absolute; right: 8px; top: 13px; pointer-events: none; }
            .mvct-o .mvct-ngay-chon input[type="date"] {
                position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
                border: 0; opacity: 0; cursor: pointer;
            }
            .mvct-o .mvct-ngay-chon input[type="date"]:disabled { opacity: 0; cursor: default; }
            .mvct-ket-thuc {
                min-height: 42px; box-sizing: border-box; padding: 11px 8px;
                border: 1px solid var(--bd2); border-radius: 11px;
                background: var(--zone); color: var(--tx); text-align: center;
                font: 700 12px 'JetBrains Mono', monospace;
            }
            .mvct-trang-thai { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
            .mvct-tt {
                min-height: 48px; padding: 6px 3px; border-radius: 12px;
                border: 1px solid var(--bd); background: var(--card); color: var(--mut);
                cursor: pointer; font: 600 11px/1.25 'Be Vietnam Pro', sans-serif;
            }
            /* Bốn màu lấy đúng từ statusDefs của Rom-todo Prototype.dc. */
            .mvct-tt.bat { font-weight: 700; }
            .mvct-tt.bat.pending { border-color: var(--mut); background: var(--mut); color: var(--card); }
            .mvct-tt.bat.inprogress { border-color: var(--info); background: var(--info); color: var(--brTx); }
            .mvct-tt.bat.paused { border-color: var(--warn); background: var(--warn); color: var(--brTx); }
            .mvct-tt.bat.done { border-color: var(--br); background: var(--br); color: var(--brTx); }
            .mvct-tt:disabled { cursor: default; opacity: .68; }

            /* ═══ CHI TIẾT HẠNG MỤC THEO BỘ MÀN 390 · NHÓM 06 (khung 29–33) ═══ */
            .mvct-co-dinh { margin: 0; padding: 0 0 10px; background: transparent; }
            .mvct-nhan { font: 800 11px 'Be Vietnam Pro', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 10px; }
            .mvct-the-dau .mvct-nhan { margin-bottom: 0; }
            .mvct-the .mvct-ten { min-height: 46px; padding: 11px 13px; border: 1.5px solid var(--br); border-radius: 11px; background: var(--card); font: 700 16.5px/1.35 'Be Vietnam Pro', sans-serif; }
            .mvct-the .mvct-ten:disabled { border-color: var(--bd); }
            .mvct-lich { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
            .mvct-o label { font: 600 12px 'Be Vietnam Pro', sans-serif; letter-spacing: 0; text-transform: none; color: var(--mut); }
            .mvct-so-ngay { display: flex; align-items: center; gap: 5px; }
            .mvct-so-ngay input { width: 42px; padding: 8px 2px; text-align: center; -moz-appearance: textfield; }
            .mvct-so-ngay input::-webkit-outer-spin-button, .mvct-so-ngay input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
            .mvct-nut-ngay { flex: none; width: 34px; height: 42px; border: 1px solid var(--bd); border-radius: 11px; background: var(--card); color: var(--tx2); font: 600 20px/1 'Be Vietnam Pro', sans-serif; cursor: pointer; }
            .mvct-nut-ngay:disabled { color: var(--dim); cursor: default; }
            .mvct-lich-ghi-chu { margin-top: 10px; }
            .mvct-bo-gan { flex: none; border: 0; border-radius: 8px; background: #fbe9e3; color: #c2410c; font: 700 12px 'Be Vietnam Pro', sans-serif; padding: 6px 11px; cursor: pointer; }
            .mvct-so-lieu { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
            .mvct-pct { color: var(--tx); font: 800 32px/1 'JetBrains Mono', monospace; }
            .mvct-pct.tot { color: var(--br); }
            .mvct-pct.can { color: var(--warn); }
            .mvct-pct.cham { color: var(--dan); }
            .mvct-pct small { color: var(--mut); font: 600 11px 'Be Vietnam Pro', sans-serif; }
            .mvct-chenh {
                display: inline-block; margin-top: 3px; padding: 3px 7px; border-radius: 8px;
                font: 700 11px 'JetBrains Mono', monospace;
            }
            .mvct-chenh.tot { color: var(--br); background: var(--brSoft); }
            .mvct-chenh.can { color: var(--warn); background: var(--warnBg); }
            .mvct-chenh.cham { color: var(--dan); background: var(--danBg); }
            .mvct-ranh { position: relative; height: 12px; margin: 14px 0 13px; border-radius: 7px; background: var(--track); overflow: visible; }
            .mvct-thanh { height: 100%; border-radius: 7px; background: var(--br); transition: width .16s ease; }
            .mvct-thanh.can { background: var(--warn); }
            .mvct-thanh.cham { background: var(--dan); }
            .mvct-moc {
                position: absolute; top: -4px; width: 2px; height: 20px; margin-left: -1px;
                border-radius: 1px; background: var(--tx); box-shadow: 0 0 0 2px var(--card);
            }
            .mvct-moc::after { content: "KH"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); color: var(--tx); font: 700 7.5px 'JetBrains Mono', monospace; }
            .mvct-dieu-chinh { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
            .mvct-giai-thich { margin: 10px 0 0; color: var(--mut); font: 500 11px/1.5 'Be Vietnam Pro', sans-serif; }
            .mvct-tru-cong {
                height: 42px; border-radius: 12px; border: 1px solid var(--bd);
                background: var(--card); color: var(--br); cursor: pointer;
                font: 700 17px 'JetBrains Mono', monospace;
            }
            .mvct-tru-cong:disabled { color: var(--dim); cursor: default; }
            .mvct-nhanh { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
            .mvct-nhanh button {
                min-width: 0; height: 42px; padding: 0; border-radius: 10px;
                border: 1px solid var(--bd); background: var(--zone); color: var(--mut);
                cursor: pointer; font: 700 11px 'JetBrains Mono', monospace;
            }
            .mvct-nhanh button.bat { border-color: var(--br); background: var(--br); color: var(--brTx); }

            /* ═══ PHƯƠNG ÁN A — BẢNG TÙY CHỈNH VIỆC TRÊN ĐIỆN THOẠI (29/09/2026, đồng bộ bản máy tính) ═══ */
            .mvct-tien-do .mvct-trang-thai { gap: 4px; padding: 4px; border-radius: 12px; background: var(--zone); }
            .mvct-tien-do .mvct-tt { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--tx2, var(--tx)); font: 600 13px 'Be Vietnam Pro', sans-serif; }
            .mvct-tien-do .mvct-tt.bat { color: var(--brTx); font-weight: 700; }
            .mvct-tien-do .mvct-tt.bat.pending { background: var(--mut); color: var(--card); }
            .mvct-tien-do .mvct-tt.bat.inprogress { background: var(--br); }
            .mvct-tien-do .mvct-tt.bat.paused { background: var(--warn); }
            .mvct-tien-do .mvct-tt.bat.done { background: #15803d; color: #ffffff; }
            .mvct-tien-do .mvct-so-lieu { align-items: center; margin-top: 14px; }
            .mvct-tien-do .mvct-pct { font-size: 26px; }
            .mvct-tien-do .mvct-chenh { margin: 0; padding: 4px 9px; font: 800 12px 'Be Vietnam Pro', sans-serif; }
            .mvct-tien-do .mvct-ranh { height: 10px; margin: 12px 0; }
            .mvct-tien-do .mvct-moc::after { content: none; }
            .mvct-tien-do .mvct-nhanh button { font-size: 11px; }
            .mvct-vuong { padding: 10px 12px; }
            .mvct-vuong.nong { background: var(--warnBg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
            .mvct-vuong-mo { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 2px; border: 0; background: transparent; color: var(--mut); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
            .mvct-vuong.nong .mvct-vuong-mo { color: var(--warn); }
            .mvct-vuong-mo svg { flex: none; }
            .mvct-vuong-tt { flex: 1; min-width: 0; font: 700 13.5px/1.35 'Be Vietnam Pro', sans-serif; }
            .mvct-vuong-nut { flex: none; padding: 6px 11px; border-radius: 8px; background: var(--card); border: 1px solid var(--bd); font: 700 12.5px 'Be Vietnam Pro', sans-serif; }
            .mvct-vuong-mo:disabled { cursor: default; opacity: .7; }
            .mvct-sheet-nen { position: fixed; inset: 0; z-index: 9050; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(15, 26, 24, .42); }
            .mvct-sheet-nen.dang-mo { animation: mvctNenVao .2s ease; }
            .mvct-sheet-nen.dang-mo .mvct-sheet { animation: mvctSheetVao .26s cubic-bezier(.2, .8, .2, 1); }
            @keyframes mvctNenVao { from { background-color: rgba(15, 26, 24, 0); } to { background-color: rgba(15, 26, 24, .42); } }
            @keyframes mvctSheetVao { from { transform: translateY(100%); } to { transform: translateY(0); } }
            @media (prefers-reduced-motion: reduce) { .mvct-sheet-nen.dang-mo, .mvct-sheet-nen.dang-mo .mvct-sheet { animation: none; } }
            .mvct-sheet { max-height: 88dvh; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; background: var(--card); box-shadow: 0 -8px 28px rgba(0, 0, 0, .22); overflow: hidden; }
            .mvct-sheet-grip { flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--bd); }
            .mvct-sheet-dau { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 10px 16px; border-bottom: 1px solid var(--bd); }
            .mvct-sheet-chu { min-width: 0; }
            .mvct-sheet-dau .mvct-nhan { margin: 0; color: var(--warn); }
            .mvct-sheet-phu { margin-top: 2px; color: var(--mut); font: 500 12.5px 'Be Vietnam Pro', sans-serif; }
            .mvct-sheet-dong { flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--mut); display: flex; align-items: center; justify-content: center; cursor: pointer; }
            .mvct-sheet-than { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--warnBg); }
            .mvct-ly-do { display: flex; flex-wrap: wrap; gap: 7px; }
            .mvct-ly-do button { min-height: 38px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 999px; background: var(--card); color: var(--tx); font: 600 12.5px 'Be Vietnam Pro', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
            .mvct-ly-do button.bat { border-color: var(--warn); background: var(--warn); color: #ffffff; font-weight: 700; }
            .mvct-vo { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
            .mvct-vo label, .mvct-vo-nhan { color: var(--warn); font: 700 12px 'Be Vietnam Pro', sans-serif; }
            .mvct-vo input, .mvct-vo textarea { width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 11px; background: var(--card); color: var(--tx); outline: none; font: 500 16px 'Be Vietnam Pro', sans-serif; }
            .mvct-vo textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
            .mvct-vo input:focus, .mvct-vo textarea:focus { border-color: var(--warn); }
            /* Quy tắc input toàn cục của dark mode đặt nền/viền trong suốt bằng !important — giữ ô nhập trong bảng trượt nhìn thấy được */
            body.dark-mode #mv-man-detail .mvct-vo input, body.dark-mode #mv-man-detail .mvct-vo textarea { background-color: var(--card) !important; border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent) !important; border-radius: 11px !important; color: var(--tx) !important; box-shadow: none !important; }
            body.dark-mode #mv-man-detail .mvct-vo input:focus, body.dark-mode #mv-man-detail .mvct-vo textarea:focus { border-color: var(--warn) !important; }
            .mvct-vo-goi-y { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--mut); font: 400 11px 'Be Vietnam Pro', sans-serif; }
            .mvct-vo-goi-y span:last-child { flex: none; font: 700 11px 'JetBrains Mono', monospace; }
            .mvct-vo-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
            .mvct-da-cho { min-height: 42px; box-sizing: border-box; display: flex; align-items: center; padding: 0 11px; border-radius: 11px; background: var(--card); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); font: 700 13px 'Be Vietnam Pro', sans-serif; }
            .mvct-da-cho.lau { color: var(--dan); border-color: var(--dan); background: var(--danBg); }
            .mvct-sheet-chan { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bd); background: var(--card); }
            .mvct-sheet-dem { flex: 1; }
            .mvct-sheet-bo { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--dan); font: 600 13px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
            .mvct-sheet-huy { min-height: 44px; padding: 0 16px; border: 1px solid var(--bd); border-radius: 11px; background: var(--card); color: var(--tx); font: 700 13.5px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
            .mvct-sheet-xong { min-height: 44px; padding: 0 22px; border: 0; border-radius: 11px; background: var(--br); color: var(--brTx); font: 700 13.5px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
            .mvct-phu-trach { position: relative; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--bd); border-radius: 12px; }
            .mvct-phu-trach:focus-within { border-color: var(--br); }
            .mvct-pt-av { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #ffffff; font: 800 12px 'Be Vietnam Pro', sans-serif; }
            .mvct-pt-av.trong { border-radius: 50%; background: var(--zone); color: var(--mut); }
            .mvct-pt-ten { flex: 1; min-width: 0; color: var(--tx); font: 700 14px 'Be Vietnam Pro', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .mvct-pt-ten.trong { color: var(--mut); font-weight: 500; }
            .mvct-pt-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
            .mvct-pt-select:disabled { cursor: default; }
            .mvct-nhanh button:disabled { cursor: default; opacity: .65; }
            .mvct-check-ds { display: flex; flex-direction: column; }
            .mvct-check {
                min-height: 44px; display: flex; align-items: center; gap: 10px;
                border-top: 1px solid var(--bd2); color: var(--tx);
                font: 500 12px/1.4 'Be Vietnam Pro', sans-serif;
            }
            .mvct-check:first-child { border-top: 0; }
            .mvct-check button {
                width: 25px; height: 25px; flex: none; padding: 0; border-radius: 8px;
                border: 2px solid var(--dim); background: var(--card); color: var(--brTx); cursor: pointer;
                font: 700 13px 'Be Vietnam Pro', sans-serif;
            }
            .mvct-check.xong button { border-color: var(--br); background: var(--br); }
            .mvct-check.xong span { color: var(--mut); text-decoration: line-through; }
            .mvct-check button:disabled { cursor: default; }
            .mvct-check span[role="button"] { cursor: text; }
            .mvct-chk-edit { display: block; width: 100%; box-sizing: border-box; resize: none; overflow: hidden; margin: 0; padding: 5px 8px; border: 1.5px solid var(--br); border-radius: 8px; background: var(--card); color: var(--tx); font: 500 16px/1.4 'Be Vietnam Pro', sans-serif; outline: none; }
            .mvct-check-tomtat { color: var(--br); font: 700 11px 'JetBrains Mono', monospace; }
            .mvct-check-trong { color: var(--mut); font: 500 11.5px/1.5 'Be Vietnam Pro', sans-serif; }
            .mvct-check-sua {
                width: 100%; min-height: 38px; margin-top: 10px; border-radius: 11px;
                border: 1px dashed var(--brLine); background: var(--brSoft); color: var(--br); cursor: pointer;
                font: 700 11px 'Be Vietnam Pro', sans-serif;
            }
            .mvct-ghi-chu {
                display: block; width: 100%; min-height: 88px; resize: vertical; box-sizing: border-box;
                padding: 11px 12px; border: 1px solid var(--bd); border-radius: 12px;
                background: var(--zone); color: var(--tx); outline: none;
                font: 500 16px/1.5 'Be Vietnam Pro', sans-serif;
            }
            .mvct-ghi-chu:focus { border-color: var(--br); }
            @media (max-width: 360px) {
                /* Ở 320px, hai ô ngày native không thể co đủ để đứng cùng ba cột. Cho ngày bắt
                   đầu một hàng riêng, hàng sau giữ Số ngày + Kết thúc: không cắt chữ và không tạo
                   cuộn ngang, còn từ 361px trở lên vẫn đúng bố cục ba cột của concept. */
                .mvct-lich { grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
                .mvct-lich .mvct-o:first-child { grid-column: 1 / -1; }
                .mvct-trang-thai { gap: 5px; }
                .mvct-tt { font-size: 8.8px; }
            }
            /* ═══════════ THÂN BẢNG CŨ ĐƯỢC DỜI VÀO MÀN ═══════════
               Bảng cũ vốn là hộp thoại/bảng trượt: neo cứng, cao có hạn, có nền và bóng riêng,
               và tự cuộn bên trong. Vào màn thì phải bỏ hết những thứ đó — trang mới là chỗ cuộn,
               không phải cái hộp. */
        /* Điện thoại không còn nạp mẫu có sẵn */
        @media (max-width: 760px) { .studio-pane0-btn-sec[onclick*="studioOpenTemplateLibrary"] { display: none !important; } }



.mv-man > .mv-nhung {
                position: static !important;
                inset: auto !important;
                transform: none !important;
                width: 100% !important; max-width: 100% !important;
                height: auto !important; max-height: none !important;
                margin: 0 !important;
                border: 0 !important; border-radius: 0 !important;
                box-shadow: none !important;
                background: none !important;
                overflow: visible !important;
                padding: 0 !important;
                animation: none !important;
            }
            /* Thanh gạt của bảng trượt (::before) không còn nghĩa khi đã thành màn. */
            .mv-man > .mv-nhung::before { content: none !important; }
            /* Các tầng CUỘN BÊN TRONG phải nhả ra để cả trang cuộn — nếu không, màn cao đúng một
               màn hình mà nội dung thì kẹt trong một ô cuộn tí hon giữa trang. */
            .mv-man > .mv-nhung .alog-panel-body,
            .mv-man > .mv-nhung #notification-list {
                max-height: none !important; overflow: visible !important;
                flex: none !important; min-height: 0 !important;
            }
            /* Nút ✕ / "Đóng" bên trong bảng cũ: trên màn thì đã có nút chính ở hàng đáy lo việc
               quay lại, giữ thêm một nút đóng nữa là lặp lối ra. */
            /* Nút ✕ / "Đóng" bên trong bảng cũ PHẢI ẩn khi đã thành màn: bấm vào chúng chỉ đóng
               cái bảng, còn màn thì vẫn đứng đó — người dùng nhìn ra một trang trống. Đường quay
               lại duy nhất là nút chính ở hàng đáy. `button[title="Đóng"]` bắt được cả bốn hộp
               thoại (vật tư, chia sẻ, tài khoản, sao chép) vì chúng dùng chung quy ước đó. */
            .mv-man > .mv-nhung .modal-close,
            .mv-man > .mv-nhung button[title="Đóng"],
            .mv-man > .mv-nhung #btn-alog-close,
            .mv-man > .mv-nhung #mv-account-footer-cu { display: none !important; }

            /* ═══════════ "RUỘT" 4 MÀN — GỠ ĐẦU BẢNG MÀU, VỀ TIÊU ĐỀ TRANG PHẲNG ═══════════
               Bốn bảng dưới (Thông báo · Lịch sử · Chia sẻ · Tài khoản) đều mượn nguyên đầu bảng
               kiểu HỘP THOẠI CŨ: một dải xanh đậm chữ trắng, hợp lý khi còn là hộp nổi giữa màn
               hình tối, nhưng lạc lõng khi đã thành TRANG riêng nằm giữa các trang phẳng khác
               (Tất cả hạng mục, Công trình). Đè màu ở đây — CHỈ áp khi đang là màn (`.mv-nhung`), desktop
               (vẫn là hộp thoại nổi) không đụng gì, màu gốc `!important` trong style vẫn nguyên. */
            #mv-man-share .mv-nhung > div:first-child,
            #mv-man-account .mv-nhung > div:first-child {
                background: none !important;
                border-bottom: 1px solid var(--bd) !important;
                padding: 6px 0 10px !important;
                color: var(--tx) !important;
            }
            /* Tiêu đề: cỡ chữ/phông theo đúng .mvh-tieu-de dùng chung cho mọi trang khác.
               text-transform:none lột đúng chữ HOA/thường đã viết sẵn trong markup — Lịch Sử và
               Chia Sẻ vốn viết tên đúng kiểu (chỉ bị ép hoa bằng CSS); Thông Báo/Tài Khoản đã sửa
               thẳng chữ trong markup vì hai chỗ đó viết hoa CỨNG, text-transform không lột được. */
            #mv-man-share .mv-nhung > div:first-child h3,
            #mv-man-account .mv-nhung > div:first-child h3 {
                font: 700 20px/1.25 'Be Vietnam Pro', sans-serif !important;
                letter-spacing: 0 !important;
                text-transform: none !important;
                color: var(--tx) !important;
            }
            /* Icon trang trí trong ô vuông (chuông, người...) — đã có tiêu đề to rõ thay thế,
               giữ lại là thừa một tầng trang trí không mang thêm nghĩa. */
            #mv-man-account .mv-nhung > div:first-child > div:first-child > div:first-child {
                display: none !important;
            }
            #mv-man-account .mv-nhung #us-header-username { color: var(--mut) !important; }
            /* Màn Thông báo — THÂN màn. Đầu màn (quay lại, tiêu đề, dòng "N chưa đọc", nút "Đọc tất cả") do khối chung #tc2-man-dau
               dựng theo bảng TC2_MAN_DAU; .ntf-header cũ bị ẩn bằng tc2-an nên không cần kiểu riêng ở đây.
               Thẻ bo 16px; icon 36px theo loại (chưa đọc tô màu theo mức độ, đã đọc xám); chấm 8px góc phải thay cho vạch trái;
               nút của thẻ ghim đứng cạnh nhau; chip lọc và nút cao 44px. Chỉ áp trong màn (.mv-nhung), bảng trượt trên PC giữ nguyên. */
            #mv-man-noti .mv-nhung { width:100% !important; max-width:none !important; height:auto !important; background:transparent !important; box-shadow:none !important; transform:none !important; }
            #mv-man-noti .mv-nhung #notification-list { padding:0 0 10px !important; background:transparent !important; display:flex; flex-direction:column; gap:10px; }
            #mv-man-noti .mv-nhung .ntf-pin-section { display:flex; flex-direction:column; gap:8px; margin-bottom:0 !important; }
            #mv-man-noti .mv-nhung .ntf-pin-label { justify-content:flex-start !important; gap:6px; padding:4px 2px 0 !important; font-size:11px !important; letter-spacing:.06em !important; }
            #mv-man-noti .mv-nhung .ntf-pin-card { padding:14px !important; border-radius:16px !important; margin-bottom:0 !important; box-shadow:none !important; }
            #mv-man-noti .mv-nhung .ntf-pin-actions { flex-wrap:nowrap !important; }
            #mv-man-noti .mv-nhung .ntf-act-primary,
            #mv-man-noti .mv-nhung .ntf-act-secondary { flex:1 1 0 !important; width:auto !important; min-width:0 !important; min-height:44px !important; padding:0 8px !important; border-radius:12px !important; font-size:11.5px !important; line-height:1.25 !important; text-align:center !important; }
            #mv-man-noti .mv-nhung .ntf-filter-bar { padding: 6px 0 4px !important; }
            #mv-man-noti .mv-nhung .ntf-filter-chip { min-height:44px !important; padding:0 16px !important; font-size:11.5px !important; display:inline-flex !important; align-items:center !important; }
            #mv-man-noti .mv-nhung .ntf-group-title { padding:6px 2px 0 !important; color:var(--tx2) !important; font:700 11px 'JetBrains Mono',monospace !important; letter-spacing:.06em !important; }
            #mv-man-noti .mv-nhung .ntf-item { margin:0 !important; padding:14px !important; gap:12px !important; border:1px solid var(--bd) !important; border-radius:16px !important; background:var(--card) !important; box-shadow:none !important; min-height:44px !important; align-items:center !important; }
            #mv-man-noti .mv-nhung .ntf-item.is-unread { border-color:var(--brLine) !important; }
            #mv-man-noti .mv-nhung .ntf-item.is-unread::after { content:""; position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%; background:var(--br); }
            #mv-man-noti .mv-nhung .ntf-item.is-unread[data-type="share_revoked"]::after { background:var(--dan); }
            #mv-man-noti .mv-nhung .ntf-icon { width:36px !important; height:36px !important; flex:0 0 36px !important; margin:0 !important; border:0 !important; border-radius:12px !important; background:var(--track) !important; color:var(--mut) !important; }
            #mv-man-noti .mv-nhung .ntf-icon svg { display:block !important; width:18px; height:18px; }
            #mv-man-noti .mv-nhung .ntf-item.is-unread .ntf-icon { background:var(--brSoft) !important; color:var(--br) !important; }
            #mv-man-noti .mv-nhung .ntf-item.is-unread .ntf-icon.is-warn { background:var(--warnBg) !important; color:var(--warn) !important; }
            #mv-man-noti .mv-nhung .ntf-item.is-unread .ntf-icon.is-danger { background:var(--danBg) !important; color:#b91c1c !important; }
            body.dark-mode #mv-man-noti .mv-nhung .ntf-item.is-unread .ntf-icon.is-danger { color:#fca5a5 !important; }
            #mv-man-noti .mv-nhung .ntf-copy { padding-right:0 !important; }
            #mv-man-noti .mv-nhung .ntf-item.is-unread .ntf-copy { padding-right:10px !important; }
            #mv-man-noti .mv-nhung .ntf-title { font:600 12.5px/1.4 'Be Vietnam Pro',sans-serif !important; margin:0 !important; color:var(--tx2) !important; }
            #mv-man-noti .mv-nhung .ntf-item.is-unread .ntf-title { font-weight:700 !important; color:var(--tx) !important; }
            #mv-man-noti .mv-nhung .ntf-message { margin-top:4px !important; font:400 11px/1.45 'Be Vietnam Pro',sans-serif !important; color:var(--mut) !important; }
            #mv-man-noti .mv-nhung .ntf-time { margin-top:5px !important; font:500 11px 'JetBrains Mono',monospace !important; color:var(--mut) !important; opacity:1 !important; }
            #mv-man-noti .mv-nhung .ntf-item-chevron { margin-left:auto !important; color:var(--mut2) !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; padding-left:4px !important; }
            #mv-man-noti .mv-nhung .ntf-footer-note { border-top-color: var(--bd) !important; padding: 12px 10px 24px !important; font-size: 11px !important; }

            /* Màn Lịch sử sửa đổi (Mobile Redesign Phiên 21): Thẻ bo 14px, avatar 30px, chip loại hành động, chi tiết cũ -> mới có line-through */
            #mv-man-history .mv-nhung { width:100% !important; max-width:none !important; height:auto !important; background:transparent !important; box-shadow:none !important; transform:none !important; }
            #mv-man-history .mv-nhung .alog-panel-body { padding:0 0 10px !important; background:transparent !important; display:block !important; }
            /* Khối "Có gì mới" là mã dùng chung với cột phải màn Tổng hợp trên máy tính (tong-hop.js, cssNhatKy). Ở đây chỉ đặt lại MÀU và CỠ cho hợp màn điện thoại:
               một thẻ bo 16px chứa cả danh sách; màu lấy từ bộ biến của điện thoại nên chế độ tối và tone màu chủ đạo tự theo. */
            #activity-log-list.xvnk-dt { display:block !important; padding:6px 14px 14px; background:var(--card); border:1px solid var(--bd); border-radius:16px; color:var(--tx); font-family:'Be Vietnam Pro',system-ui,sans-serif;
                --bc-ink:var(--br); --bc-fill:var(--br); --bc-on-fill:var(--brTx); --bc-soft:var(--brSoft); --bc-soft2:var(--brSoft); }
            #activity-log-list.xvnk-dt *, #activity-log-list.xvnk-dt *::before, #activity-log-list.xvnk-dt *::after { box-sizing:border-box; }
            #activity-log-list.xvnk-dt button { font-family:inherit; }
            #activity-log-list.xvnk-dt .bcp-nk-loc { margin:8px 0 2px; gap:5px; }
            #activity-log-list.xvnk-dt .bcp-nk-loc button { height:40px; padding:0 9px; background:var(--track); color:var(--tx2); }
            #activity-log-list.xvnk-dt .bcp-nk-loc button.bat { background:var(--br); color:var(--brTx); }
            #activity-log-list.xvnk-dt .bcp-nk-ngay { margin:14px 0 4px; font-size:11px; color:var(--mut2); }
            #activity-log-list.xvnk-dt .bcp-nk-it { padding:10px 0; border-top-color:var(--bd); }
            #activity-log-list.xvnk-dt .bcp-nk-ngay + .bcp-nk-it { border-top:0; }
            #activity-log-list.xvnk-dt .bcp-nk-g { min-height:44px; align-items:flex-start; }
            #activity-log-list.xvnk-dt .bcp-nk-t { font-size:13.5px; color:var(--tx); }
            #activity-log-list.xvnk-dt .bcp-nk-gio { font-size:11px; color:var(--mut2); }
            #activity-log-list.xvnk-dt .bcp-nk-ai { color:var(--tx2); }
            #activity-log-list.xvnk-dt .bcp-nk-s { font-size:12.5px; color:var(--tx2); }
            #activity-log-list.xvnk-dt .bcp-nk-so { font-size:11px; background:var(--track); color:var(--tx2); }
            #activity-log-list.xvnk-dt .bcp-nk-car { color:var(--mut2); }
            #activity-log-list.xvnk-dt .bcp-nk-sub li { border-left-color:var(--bd); font-size:12.5px; color:var(--tx2); }
            #activity-log-list.xvnk-dt .bcp-nk-cuoi { margin-top:6px; padding-top:12px; border-top-color:var(--bd); }
            #activity-log-list.xvnk-dt .bcp-nk-them { height:44px; border-color:var(--bd); background:var(--card); color:var(--br); font-size:13px; }
            #activity-log-list.xvnk-dt .bcp-nk-them:hover:not(:disabled) { background:var(--brSoft); border-color:var(--br); }
            #activity-log-list.xvnk-dt .bcp-nk-ghi { margin:10px 0 0; font-size:11px; color:var(--mut2); }
            #activity-log-list.xvnk-dt .bcp-nk-rong { margin-top:10px; background:var(--zone); }
            #activity-log-list.xvnk-dt .bcp-nk-rong b { font-size:13.5px; color:var(--tx); }
            #activity-log-list.xvnk-dt .bcp-nk-rong p { font-size:12.5px; color:var(--tx2); }
            #activity-log-list.xvnk-dt .bcp-nk-rong button { height:44px; border-color:var(--bd); background:var(--card); color:var(--tx); }

/* Hàng tab "THÔNG TIN GÓI / ĐỔI MẬT KHẨU" của Tài khoản: bỏ luôn đường viền ngoài nền
               `--highlight` bọc quanh — trên trang phẳng, một dải nền riêng cho hai nút tab nhìn
               như một khối kẻ thừa; để trần vẫn phân biệt được nhờ gạch chân xanh của tab đang chọn. */
            #mv-man-account .mv-nhung > div:nth-child(2) { background: none !important; }

            /* ═══════════ MÀN "DỰ ÁN" ═══════════ */
            .mvd-ds { display: flex; flex-direction: column; gap: 11px; }
            .mvd-the {
                background: var(--card); border: 1px solid var(--bd); border-radius: 16px;
                padding: 14px; text-align: left; width: 100%; box-sizing: border-box;
                display: flex; flex-direction: column; gap: 6px;
            }
            .mvd-mo { display:flex; flex-direction:column; gap:6px; width:100%; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
            .mvd-the.dang-mo { border: 1.5px solid var(--br); }
            .mvd-hang1 { display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
            .mvd-hang1-phai { display:flex; align-items:center; gap:10px; }
            .mvd-nhan { font: 700 11px 'JetBrains Mono', monospace; color: var(--br); background: var(--brSoft); padding: 3px 7px; border-radius: 5px; }
            .mvd-the:not(.dang-mo) .mvd-nhan { background: none; }
            .mvd-pct { font: 700 17px 'JetBrains Mono', monospace; color: var(--tx); }
            .mvd-thao-tac { width:30px; height:30px; padding:0; border:1px solid var(--bd); border-radius:9px; background:var(--bg); color:var(--mut); font:700 16px/1 'JetBrains Mono',monospace; cursor:pointer; }
            .mvd-thao-tac:active { transform:scale(.96); background:var(--brSoft); color:var(--br); border-color:var(--brLine); }
            .mvd-ten { font: 700 14.5px/1.3 'Be Vietnam Pro', sans-serif; color: var(--tx); word-break: break-word; }
            .mvd-meta { font: 500 11px 'JetBrains Mono', monospace; color: var(--mut2); letter-spacing: .04em; }
            .mvd-ranh { height: 7px; border-radius: 4px; background: var(--track); overflow: hidden; margin-top: 2px; }
            .mvd-ranh > span { display: block; height: 100%; background: var(--br); border-radius: 4px; }
            .mvd-them {
                width: 100%; box-sizing: border-box; margin-top: 11px;
                border: 1px dashed var(--dim); border-radius: 16px; padding: 15px 14px;
                background: none; cursor: pointer; text-align: left;
                display: flex; flex-direction: column; gap: 4px;
            }
            .mvd-them-ten { font: 600 12.5px 'Be Vietnam Pro', sans-serif; color: var(--br); }
            .mvd-them-phu { font: 500 11px 'JetBrains Mono', monospace; color: var(--mut2); letter-spacing: .04em; }

            /* ── Màn Nhập mã mời ── */
            .mvi-dau { display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:8px 0 12px; }
            .mvi-lui { flex:none; min-height:36px; padding:0 11px; border:1px solid var(--brLine); border-radius:11px; background:var(--brSoft); color:var(--br); font:700 11px 'Be Vietnam Pro',sans-serif; cursor:pointer; white-space:nowrap; }
            .mvi-mo-ta { margin:0 0 14px; color:var(--mut); font:400 11.5px/1.52 'Be Vietnam Pro',sans-serif; }
            .mvi-the { margin:0 0 12px; padding:15px 14px; border:1px solid var(--bd); border-radius:16px; background:var(--card); }
            .mvi-nhan { display:block; margin:0 0 8px; color:var(--mut); font:700 11px 'JetBrains Mono',monospace; letter-spacing:.07em; text-transform:uppercase; }
            .mvi-hang-ma { display:flex; gap:9px; align-items:stretch; }
            .mvi-ma { min-width:0; flex:1; height:52px; padding:0 10px; box-sizing:border-box; border:1.5px solid var(--br); border-radius:14px; outline:0; background:var(--bg); color:var(--tx); text-align:center; text-transform:uppercase; letter-spacing:.14em; font:700 16px 'JetBrains Mono',monospace; }
            .mvi-ma:focus { box-shadow:0 0 0 3px var(--brSoft); }
            .mvi-dan { width:52px; flex:none; border:1px solid var(--bd); border-radius:14px; background:var(--bg); color:var(--br); font:700 11px 'Be Vietnam Pro',sans-serif; cursor:pointer; }
            .mvi-goi-y { margin:9px 1px 0; color:var(--mut2); font:400 11px/1.45 'Be Vietnam Pro',sans-serif; }
            .mvi-cho { padding:12px 2px; color:var(--mut2); font:500 11px 'JetBrains Mono',monospace; letter-spacing:.04em; }
            .mvi-xem-the { margin-top:14px; padding:14px; border:1px solid var(--brLine); border-radius:16px; background:var(--brSoft); }
            .mvi-xem-nhan { color:var(--br); font:700 11px 'JetBrains Mono',monospace; letter-spacing:.07em; }
            .mvi-xem-ten { margin-top:6px; color:var(--tx); font:700 15px/1.35 'Be Vietnam Pro',sans-serif; word-break:break-word; }
            .mvi-xem-meta { margin-top:6px; color:var(--mut); font:400 11px/1.45 'Be Vietnam Pro',sans-serif; }
            .mvi-xem-vai { display:inline-block; margin-top:10px; padding:4px 7px; border-radius:5px; background:var(--infoBg); color:var(--info); font:700 11px 'JetBrains Mono',monospace; letter-spacing:.04em; }
            .mvi-loi { padding:12px 13px; border:1px solid var(--dan); border-radius:14px; background:var(--danBg); color:var(--dan); font:500 11px/1.45 'Be Vietnam Pro',sans-serif; }

            /* ── Màn Có gì mới ── */
            .mvn-dau { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:8px 0 14px; }
            .mvn-noi { margin:0 0 12px; padding:16px 15px; border:1px solid var(--brLine); border-radius:17px; background:var(--brSoft); }
            .mvn-nhan { display:inline-block; padding:4px 7px; border-radius:5px; background:var(--br); color:var(--brTx); font:700 11px 'JetBrains Mono',monospace; letter-spacing:.07em; }
            .mvn-noi h3 { margin:10px 0 4px; color:var(--tx); font:700 16px/1.35 'Be Vietnam Pro',sans-serif; }
            .mvn-noi p { margin:0; color:var(--mut); font:400 11px/1.5 'Be Vietnam Pro',sans-serif; }
            .mvn-moc { margin:14px 1px 7px; color:var(--mut2); font:700 11px 'JetBrains Mono',monospace; letter-spacing:.07em; }
            .mvn-the { margin:0 0 10px; padding:14px; border:1px solid var(--bd); border-radius:16px; background:var(--card); }
            .mvn-the-moi { border-color:var(--brLine); }
            .mvn-hang { display:flex; align-items:flex-start; gap:9px; }
            .mvn-tieu { min-width:0; flex:1; color:var(--tx); font:700 13px/1.4 'Be Vietnam Pro',sans-serif; }
            .mvn-moi { flex:none; padding:3px 6px; border-radius:5px; background:var(--brSoft); color:var(--br); font:700 8.5px 'JetBrains Mono',monospace; letter-spacing:.05em; }
            .mvn-ngay { margin-top:4px; color:var(--mut2); font:500 11px 'JetBrains Mono',monospace; }
            .mvn-mo-ta { margin:8px 0 0; color:var(--mut); font:400 11px/1.52 'Be Vietnam Pro',sans-serif; white-space:pre-line; }
            .mvn-link { display:inline-block; margin-top:9px; color:var(--br); font:700 11px 'Be Vietnam Pro',sans-serif; text-decoration:none; }
            .mvn-trang-thai { padding:24px 10px; color:var(--mut); text-align:center; font:400 11px/1.5 'Be Vietnam Pro',sans-serif; }

            /* ── Màn Hướng dẫn & câu hỏi ── */
            .mvg-dau { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:8px 0 12px; }

            /* Thao tác từng dự án: bảng riêng để chạm dấu … không vô tình mở dự án. */
            /* Không dùng backdrop-filter ở lớp phía sau bảng thao tác. Safari đôi khi ghép lớp
               filter này đè lên mép dưới sheet fixed, làm nút Xóa trông như bị phủ một lớp sương. */
            #mvd-action-overlay, #mvd-confirm-overlay { position:fixed; inset:0; display:none; background:rgba(4,10,9,.58); z-index:100120; }
            /* Thanh điều hướng đáy bắt đầu đúng giữa nút Xóa trên màn hình thấp và Safari có thể
               ghép lớp fixed sai thứ tự dù z-index thấp hơn. Ẩn hẳn nó trong lúc sheet đang mở. */
            body.mvd-action-sheet-open #mobile-bottom-nav { display:none !important; }
            /* Footer tự chừa vùng Home indicator để nút nguy hiểm luôn nằm hoàn toàn trong
               lớp nền đặc của sheet, kể cả khi Safari báo safe-area không ổn định. */
            #mvd-action-sheet {
                position: fixed; z-index: 100121; left: 0; right: 0; bottom: 0; display: none;
                max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain; box-sizing: border-box;
                padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 32px);
                background: var(--bg); color: var(--tx); border-radius: 26px 26px 0 0;
                border-top: 1px solid var(--bd); box-shadow: 0 -18px 42px rgba(0,0,0,.23);
                transform: translateY(104%); -webkit-transform: translateY(104%);
                will-change: transform;
                transition: transform .24s cubic-bezier(.32,1,.4,1);
            }
            #mvd-action-sheet.open {
                display: block !important;
                transform: translateY(0); -webkit-transform: translateY(0);
            }
            .mvd-as-gat { width: 38px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: var(--dim); }
            .mvd-as-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
            .mvd-as-ten { font: 700 15px/1.35 'Be Vietnam Pro',sans-serif; color: var(--tx); word-break: break-word; }
            .mvd-as-meta { margin-top: 3px; font: 500 11px/1.45 'JetBrains Mono',monospace; color: var(--mut2); letter-spacing: .035em; }
            .mvd-as-dong { border: 0; background: none; padding: 4px 0 4px 10px; color: var(--mut); font: 600 12px 'Be Vietnam Pro',sans-serif; cursor: pointer; }
            .mvd-as-vaitro { margin: 0 0 11px; padding: 10px 12px; border: 1px solid var(--info); border-radius: 14px; background: var(--infoBg); color: var(--tx2); font: 400 11px/1.5 'Be Vietnam Pro',sans-serif; }
            .mvd-as-nhom { overflow: hidden; border: 1px solid var(--bd); border-radius: 16px; background: var(--card); }
            .mvd-as-muc { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 12px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--bd2); background: transparent; color: var(--tx); text-align: left; cursor: pointer; }
            .mvd-as-muc:last-child { border-bottom: 0; }
            .mvd-as-muc:active { background: var(--bg); }
            .mvd-as-danger-wrap {
                margin-top: 13px; margin-bottom: 4px;
                border: 1.5px solid var(--dan); border-radius: 16px;
                background: var(--card); overflow: hidden; box-sizing: border-box;
            }
            .mvd-as-muc-danger {
                width: 100%; min-height: 48px; padding: 14px 12px; box-sizing: border-box;
                display: flex; align-items: center; justify-content: center;
                border: 0; background: transparent; color: var(--dan);
                font: 700 13px 'Be Vietnam Pro', sans-serif; cursor: pointer; text-align: center;
            }
            .mvd-as-muc-danger:active { background: var(--danBg, rgba(239, 68, 68, 0.08)); }
            .mvd-as-muc-noi { min-width: 0; flex: 1; }
            .mvd-as-muc-ten { display: block; font: 600 12.5px/1.3 'Be Vietnam Pro',sans-serif; }
            .mvd-as-muc-phu { display: block; margin-top: 2px; color: var(--mut2); font: 400 11px/1.35 'Be Vietnam Pro',sans-serif; }
            .mvd-as-mui { flex: none; color: var(--dim); font-size: 20px; line-height: 1; }
            #mvd-confirm-overlay { z-index:100130; align-items:center; justify-content:center; padding:28px; box-sizing:border-box; }
            .mvd-confirm { width:min(100%,390px); box-sizing:border-box; padding:24px 22px; border:1px solid var(--dan); border-radius:22px; background:var(--card); color:var(--tx); text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3); }
            .mvd-confirm-icon { width:52px; height:52px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:var(--danBg); color:var(--dan); font:700 24px/1 'JetBrains Mono',monospace; }
            .mvd-confirm h3 { margin:0; font:700 16px/1.35 'Be Vietnam Pro',sans-serif; }
            .mvd-confirm p { margin:8px 0 14px; color:var(--mut); font:400 12px/1.6 'Be Vietnam Pro',sans-serif; }
            .mvd-confirm-backup { width:100%; box-sizing:border-box; margin-bottom:12px; padding:10px; border:1px dashed var(--brLine); border-radius:12px; background:var(--brSoft); color:var(--br); font:700 11px 'Be Vietnam Pro',sans-serif; cursor:pointer; }
            .mvd-confirm-nut { display:flex; gap:10px; }
            .mvd-confirm-nut button { flex:1; padding:12px 8px; border-radius:12px; font:700 12px 'Be Vietnam Pro',sans-serif; cursor:pointer; }
            .mvd-confirm-huy { border:1px solid var(--bd); background:var(--bg); color:var(--tx); }
            .mvd-confirm-chapnhan { border:1px solid var(--dan); background:var(--dan); color:#fff; }

            /* ═══════════ BẢNG ☰ "DỰ ÁN & CÔNG CỤ" ═══════════ */
            #mv-project-menu-sheet {
                display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9101;
                background: var(--bg);
                border-radius: 26px 26px 0 0;
                padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
                box-shadow: 0 -8px 32px rgba(4, 10, 9, .28);
                transform: translateY(100%);
                transition: transform .22s cubic-bezier(.32, .72, 0, 1);
                box-sizing: border-box; max-height: 86vh; overflow-y: auto;
                overscroll-behavior: contain;
                /* [SỬA 2026-08-30] Hứa trước với trình duyệt là phần tử này sẽ đổi `transform` —
                   để nó dựng sẵn một lớp ghép hình (compositor layer) TRƯỚC khi hoạt ảnh chạy,
                   thay vì phải dựng gấp ngay khung hình đầu tiên. Người dùng báo "mở bảng lên bị
                   giật lag, mờ màn hình một lúc rồi sáng trở lại" — đúng dáng vẻ của việc dựng lớp
                   ghép hình muộn trên Android tầm trung: bóng đổ lớn (32px) + bo góc + tự cuộn bên
                   trong khiến khung hình đầu của hoạt ảnh phải dựng lớp ngay lúc đang chạy, gây khựng
                   một nhịp. `will-change` là cách chữa thường dùng cho đúng triệu chứng này — xem
                   `.week-cell` trong tệp cũng đã dùng cách này cho lý do tương tự. */
                will-change: transform;
            }
            /* [SỬA 2026-08-30] Bảng mở bằng CLASS, không còn ghi thẳng inline style. Ghi chú đầy đủ
               ở hàm mvOpenProjectMenu(): đây là bảng DUY NHẤT từng đặt trạng thái mở bằng inline
               style, và thiếu một quy tắc như thế này chính là nguyên nhân lỗi "vuốt đóng bảng
               dở dang thì bảng biến mất" mà người dùng báo. */
            #mv-project-menu-sheet.open { transform: translateY(0); }
            .mvm-gat { width: 38px; height: 4px; border-radius: 2px; background: var(--dim); margin: 0 auto 14px; }
            .mvm-dau { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
            .mvm-tieu-de { font: 700 15px 'Be Vietnam Pro', sans-serif; color: var(--tx); }
            .mvm-dong {
                font: 700 11px 'JetBrains Mono', monospace; color: var(--br);
                background: var(--brSoft); border: 0; padding: 8px 12px; border-radius: 14px; cursor: pointer;
            }
            .mvm-nhan { font: 700 11px 'Be Vietnam Pro', sans-serif; color: var(--mut2); letter-spacing: .04em; margin: 18px 0 8px; }
            .mvm-ds { display: flex; flex-direction: column; }
            .mvm-dong-muc {
                background: none; border: 0; border-bottom: 1px solid var(--bd2);
                text-align: left; padding: 14px 2px; cursor: pointer;
                font: 600 13px 'Be Vietnam Pro', sans-serif; color: var(--tx);
            }
            .mvm-dong-muc:last-child { border-bottom: 0; }
            .mvm-nhan.mvm-nhan-nhom { margin: 14px 0 6px; font-size: 11px; }
            .mvm-ds.mvm-ds-nhom { overflow: hidden; border: 1px solid var(--bd); border-radius: 15px; background: var(--card); }
            .mvm-dong-muc.mvm-dong-nhom { min-height: 38px; padding: 9px 14px; display: flex; align-items: center; gap: 10px; }
            .mvm-dong-nhom > span:first-child { flex: 1; min-width: 0; text-align: left; }
            .mvm-dong-phu { flex: none; color: var(--mut2); font: 600 11px 'Be Vietnam Pro', sans-serif; }
            .mvm-dong-mui { flex: none; color: var(--mut2); font: 700 15px/1 'Be Vietnam Pro', sans-serif; }
            .mvm-cai-app { background: var(--infoBg); color: var(--info); }

            /* Khối tài khoản thay toàn bộ chức năng bán hàng/đăng nhập trước đây nằm ở top bar.
               Luôn hiện — kể cả khi chưa đăng nhập — để việc bỏ top bar không làm mất đường vào
               Cloud và gói trả phí. */
            .mvm-tai-khoan {
                display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
                margin-bottom: 12px; padding: 13px;
                border: 1px solid var(--bd); border-radius: 16px;
                background: var(--card); box-sizing: border-box;
            }
            .mvm-tk-avatar {
                width: 42px; height: 42px; flex: 0 0 42px;
                display: flex; align-items: center; justify-content: center;
                border-radius: 13px; background: var(--brSoft); color: var(--br);
                font: 800 17px 'Be Vietnam Pro', sans-serif;
            }
            .mvm-tk-noi-dung { flex: 1 1 0; min-width: 0; }
            .mvm-tk-ten {
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                color: var(--tx); font: 700 13px 'Be Vietnam Pro', sans-serif;
            }
            .mvm-tk-phu {
                /* Nhãn này toàn chữ tiếng Việt ("GÓI CHUYÊN NGHIỆP · ĐÃ ĐỒNG BỘ"), không phải mã
                   ASCII/số thuần — JetBrains Mono làm rụng dấu (đúng lỗi 8.1 đã sửa cho các lớp
                   .mvm-* khác ở Đợt 1). Khối này chưa từng thật sự hiện lên trước Đợt 8 nên lỗi
                   chưa ai thấy; sửa luôn cùng lúc kích hoạt để không đem một lỗi cũ ra dùng mới. */
                margin-top: 3px; color: var(--mut2);
                font: 500 11px/1.35 'Be Vietnam Pro', sans-serif; letter-spacing: .02em;
            }
            .mvm-tk-hanh-dong {
                display: flex; flex-direction: row; align-items: stretch; gap: 7px;
                width: 100%; flex: 1 1 100%;
            }
            .mvm-tk-nut {
                min-height: 44px; box-sizing: border-box; padding: 8px 11px;
                display: inline-flex; align-items: center; justify-content: center;
                border: 1px solid var(--br); border-radius: 11px;
                background: var(--br); color: var(--brTx); cursor: pointer;
                text-decoration: none; white-space: nowrap;
                font: 700 11px 'Be Vietnam Pro', sans-serif;
            }
            .mvm-tk-nut.phu { background: var(--card); color: var(--br); }
            .mvm-tk-hanh-dong .mvm-tk-nut { flex: 1 1 0; }

            /* Thẻ TỔNG QUAN (Đợt 8) — thay hẳn lưới 4-5 ô cũ của menu ☰. Nền tối cố định bằng
               token --dark/--darkTx (đổi màu theo sáng/tối nhưng LUÔN là thẻ tối trên cả hai nền,
               không đảo ngược như thẻ thường) — cùng cặp token .mvp-tong (màn Tiến độ) đã dùng. */

            /* Vùng nguy hiểm (Đợt 8) — tách hẳn khỏi nhóm mục thường, viền/chữ đỏ để không bấm
               nhầm khi đang lướt nhanh qua các mục "Sửa công trình"/"Lịch sử" phía trên. */
            .mvm-ds.mvm-ds-nguy-hiem { border-color: #fecaca; }
            body.dark-mode .mvm-ds.mvm-ds-nguy-hiem { border-color: rgba(248,113,113,.35); }
            .mvm-dong-muc.mvm-dong-nguy-hiem { color: #dc2626; }
            body.dark-mode .mvm-dong-muc.mvm-dong-nguy-hiem { color: #f87171; }
            .mvm-dong-muc.mvm-dong-nguy-hiem .mvm-dong-phu, .mvm-dong-muc.mvm-dong-nguy-hiem .mvm-dong-mui { color: inherit; opacity: .75; }

            .mvt-trong { text-align: center; padding: 26px 12px; font: 500 12px 'Be Vietnam Pro', sans-serif; color: var(--mut2); }

            /* Thẻ tổng quan Báo cáo tiến độ (nền xanh) hiển thị trên trang chủ */
            .mvt-dem { font: 600 11.5px 'Be Vietnam Pro', sans-serif; color: var(--mut); letter-spacing: 0; margin-bottom: 10px; }
            .mvt2-them-nut { display: flex; align-items: center; width: 100%; min-height: 44px; margin: 2px 0 6px; padding: 0 14px; border: 1.5px dashed var(--dim, var(--bd)); border-radius: 12px; background: transparent; color: var(--mut); font: 600 13px 'Be Vietnam Pro', sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
            .mvt2-them-nut:active { background: var(--card); color: var(--br); }
            .mvt2-them-nut.gd { min-height: 50px; border-radius: 16px; background: var(--card); color: var(--tx2, var(--tx)); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; }
            /* -webkit-touch-callout/-webkit-user-select/user-select: chặn hẳn menu Sao chép/Chọn
               văn bản gốc của trình duyệt di động khi chạm giữ — nếu không, chạm giữ trên đúng chữ
               trong thẻ (tuỳ vị trí nhấn) sẽ bị hệ điều hành cướp mất thành "chọn văn bản để copy"
               thay vì bật đúng chế độ chọn nhiều của Đợt 5c (lỗi thật gặp khi dùng trên điện thoại). */
            .mvt2-viec { position: relative; z-index: 1; margin-bottom: 8px; padding: 12px 13px; border: 1px solid var(--bd); border-radius: 14px; background: var(--card); cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
            .mvt2-viec:active { opacity: .85; }

            /* [SỬA 2026-08-30] CHẾ ĐỘ TỐI — cùng một căn bệnh, phát hiện khi kiểm bản sáng.
               Thẻ nhóm và hàng việc đang trùng Y HỆT màu nền trang (`#0b0f19` cả ba, đo được
               tương phản đúng 1,00:1) vì bản di động đặt `.mv-group { background: var(--bg-color) }`
               mà ở chế độ tối `--bg-color` chính là màu nền trang. Nghĩa là các thẻ không hề nổi
               lên khỏi nền — không có cái thẻ nào cả, chỉ là một mảng đen liền. Lỗi có sẵn từ
               trước, không phải do đợt cân màu này.

               Chữa bằng cách hạ nền sâu xuống VÀ nâng thẻ lên một chút — làm một phía thôi thì
               không đủ, vì ở vùng rất tối tỉ số tương phản bị nén lại (chỉ hạ nền: 1,11; chỉ nâng
               thẻ: 1,14; làm cả hai: 1,21).

                 nền  #080b12  ->  thẻ #172033   = 1,21:1  (trước 1,00 — không phân biệt được)
                 dải  #202b45  ->  thẻ           = 1,16:1
                 viền #2b3752  ->  thẻ           = 1,37:1

               Đúng cùng bậc thang với bản sáng, chỉ khác là lật ngược. Tất cả nằm trong họ xanh
               đen 220°. Chữ vẫn dư tương phản trên thẻ: chính 14,9:1 · phụ 6,3:1 · xanh ngọc 8,5:1.

               CỐ Ý nâng thẻ chỉ một nấc nhỏ: chế độ tối dùng ban đêm, thẻ càng sáng càng chói. */
            /* [GỠ 2026-08-30, giai đoạn 1] Bảng màu tối tự cân sáng nay (#080b12 / #172033 / …)
               đã bỏ — nay dùng bảng token của thiết kế, khai báo ở khối phía trên. Phần sửa
               CẤU TRÚC hôm sáng thì GIỮ NGUYÊN và vẫn cần: thẻ nhóm không còn trùng màu nền,
               ba bảng trượt hết trắng tinh, hộp thoại bằng màu thẻ. Xem các quy tắc bên dưới. */
            /* Hộp thoại ghi cứng `#0f172a !important` ở khối chế độ tối chung (quanh dòng 3496)
               nên không đi theo token — kết quả là bảng đang đọc lại TỐI HƠN các thẻ phía sau nó,
               ngược đời. Kéo về đúng màu thẻ. Chỉ đè trong khối di động, bản máy tính giữ nguyên. */
            body.dark-mode .modal-box {
                background-color: var(--card-bg) !important;
                border-color: var(--border-color) !important;
            }

            /* Đường xương sống + nút hạng mục. Dùng ::before nên KHÔNG phải đụng vào
               HTML do renderMobileView() sinh ra — đổi lại nếu sau này muốn bỏ thì chỉ
               cần xoá khối CSS này, không ảnh hưởng logic. */
                                    /* .mv-group có overflow:hidden (để bo tròn 4 góc thẻ). Cái đó CẮT MẤT nút ::before
               nằm ngoài thẻ — nút vẫn được tạo ra, đo thấy 11x11 ở left:-21px, nhưng không hiện.
               Nên phải mở overflow, và bù lại bằng cách tự bo góc cho phần header: khi thẻ mở thì
               chỉ bo 2 góc trên, khi thẻ đóng thì header là phần duy nhất nhìn thấy nên bo cả 4.
               (Các dòng công việc bên trong không có nền riêng nên góc dưới vẫn sạch.) */
                                                /* [SỬA 2026-08-20] Trước đây nút tròn neo cứng ở top:20px và cách mép thẻ 6px, nên:
               (a) nhìn rời rạc, không thấy liên hệ gì giữa nút và thẻ;
               (b) tiêu đề hạng mục xuống 2 dòng là nút lệch hẳn khỏi hàng chữ.
               Giờ nút được căn GIỮA THEO CHIỀU CAO của phần đầu thẻ (top:50% + translateY) nên luôn
               thẳng hàng với tiêu đề dù 1 hay 2 dòng, và có thêm một NHÁNH NỐI ngang từ trục chạy
               vào mép thẻ — đọc ra ngay là "hạng mục này mọc ra từ trục tiến độ", giống cách vẽ
               sơ đồ nhánh trên bản vẽ thật. */
            /* Nút và nhánh nối gắn vào PHẦN ĐẦU thẻ (không phải cả thẻ), vì cả thẻ khi mở ra rất
               cao — neo vào đó thì nút rơi xuống giữa danh sách con. Gắn vào header rồi căn
               top:50% là luôn thẳng hàng với dòng tiêu đề, dù tiêu đề 1 hay 2 dòng.
               Header đang là display:flex, nhưng phần tử position:absolute KHÔNG bị tính là flex
               item nên không phá bố cục bên trong. */
                                    /* Nhánh nối ngang từ nút chạy vào mép thẻ — đọc ra ngay là hạng mục mọc ra từ trục */
                        
            /* [SỬA 2026-08-20] Bỏ viền trái đậm 4px của thẻ hạng mục chính.
               Lý do: trong dải rộng chưa tới 20px đang có tới BỐN thứ vẽ chồng nhau — đường trục,
               nút tròn, nhánh nối, rồi lại thêm một vạch dọc đậm nữa là viền trái của thẻ. Hai
               đường dọc song song sát nhau chính là chỗ khiến chỗ giao nhau nhìn thô.
               Viền đó vốn có từ trước để đánh dấu "đây là hạng mục chính", nhưng giờ việc đó đã do
               trục + nút đảm nhiệm, còn nền xanh nhạt của thẻ vẫn đủ phân biệt. Vẽ cùng một thông
               tin hai lần thì bỏ bớt một, đó là cách gọn nhất. */
            
            /* ====================================================================
               MÀU Ô HẠNG MỤC CHÍNH — dịu mắt khi lướt danh sách dài (2026-08-20)
               Trước: nền xanh đặc #e8f2ef, cùng tông với nền thẻ và các dòng con.
               Vấn đề khi lướt một bảng dài mấy chục hạng mục: mỗi tiêu đề là một KHỐI
               MÀU ĐẶC, cuộn qua hàng chục cái tạo thành vệt sọc nhấp nháy, mắt phải
               liên tục điều tiết giữa hai mức sáng — đúng cảm giác "mỏi mắt" mà người
               dùng mô tả.
               Cách chữa theo hướng hiện đại: hạ độ đậm của mảng màu xuống, thay bằng
               một dải chuyển màu rất nhẹ, và trả việc phân cấp lại cho CHỮ (đậm, to)
               cùng nút trên trục — vốn đã đủ để nhận ra đâu là hạng mục chính. Mảng
               màu chỉ còn nhiệm vụ gợi ý, không còn hét lên nữa. */
            /* [ĐỔI TÔNG 2026-08-30] Dải này từng là xanh lá nhạt (#f3f8f6 -> #e9f1ee, tông 158°)
               đặt trên nền ấm 40° — chính là cặp "xanh nhạt kết hợp vàng nhạt" người dùng kêu
               lần đầu. Nay trung tính hoàn toàn. Chữ giữ nguyên xanh đậm: màu thương hiệu nằm ở
               CHỮ thì vẫn nhận ra ngay mà không phải tô cả mảng nền.

               TÁCH LÀM HAI TRẠNG THÁI (đây mới là chỗ sửa quan trọng nhất, xem ghi chú dài ở khối
               `body:not(.dark-mode)` phía trên):
                 · Nhóm ĐANG MỞ  — tiêu đề là một dải nằm TRÊN thẻ trắng, nên tô nhạt để tách nó
                   khỏi danh sách việc bên dưới.
                 · Nhóm ĐANG GẤP — lúc đó tiêu đề CHÍNH LÀ cái thẻ (không còn gì khác lộ ra), nên
                   nó phải mang màu THẺ để nổi lên khỏi nền trang. Đây là trạng thái mặc định của
                   gần hết màn hình; tô nó bằng màu dải là lý do bản trước nhìn thành một mảng
                   liền không phân biệt được. */
            /* [GIAI ĐOẠN 1] Chuyển sang token thiết kế. Cách tách hai trạng thái giữ nguyên —
               đó là chỗ sửa đúng nhất của đợt cân màu trước, và thiết kế mới cũng theo lối đó:
               thẻ luôn có viền thật, nền thẻ nổi trên nền trang. */
                                                /* Viền thẻ mềm lại cho bớt "khung ô vuông", bóng đổ thay cho nét kẻ đậm */
                        /* Sau khi --bg-color về trắng, mấy nút nhỏ trên thanh dự án trở thành trắng-trên-trắng,
               chỉ còn cái viền. Trả lại cho chúng nền dải ấm để vẫn đọc ra là nút bấm được. */
            #mobile-project-selector { background: var(--highlight) !important; }
            /* Chế độ tối: cùng nguyên tắc — hạ tương phản giữa tiêu đề và thân thẻ.
               Nền cũ var(--xv-s4, #1c2e2a) nổi hẳn so với thân; giờ chỉ nhỉnh hơn một chút. */
            /* [ĐỔI TÔNG 2026-08-30] Dải này từng là lớp phủ xanh ngọc mờ (rgba 52,211,153) trên
               thẻ xanh đen — vẫn là hai tông khác nhau, cùng lỗi với bản sáng chỉ nhẹ hơn. Nay
               dùng dải cùng họ xanh đen, để màu thương hiệu dồn hết vào chữ, nút tròn và trục
               tiến độ. */
                                    
            /* Nút và nhánh nối tinh chỉnh lại cho mảnh và dịu hơn sau khi bỏ viền */
                                    /* (Quy tắc chế độ tối cho nút đã chuyển lên khối .mv-group-header ở trên) */

            /* Hạng mục đã xong: nút tô đặc — liếc dọc trục là biết đã đi tới đâu. */
            
            /* --- Dòng công việc tách 2 hàng (xem ghi chú ở chỗ sinh HTML trong renderMobileView) --- */
                                                /* Nhãn nằm riêng một hàng rồi thì không cần đẩy chữ ra xa nữa */
                        
            /* Thu đường xương sống lại: đã tách dòng nên bớt căng, nhưng vẫn nên trả thêm
               bề ngang cho phần chữ. 24px -> 16px. */
                                    
            /* ====================================================================
               ĐỒNG BỘ KIỂU MỞ CỦA 5 NÚT ĐÁY MÀN HÌNH (2026-08-20)
               Trước đây 5 nút mở ra theo 3 kiểu khác nhau: Menu trượt lên từ đáy,
               Thêm mới trượt ngang từ phải, còn Cảnh báo / Vật tư / Báo cáo bung ra
               giữa màn hình. Người dùng thấy "loạn" và thích kiểu trượt lên của Menu
               nhất — hợp lý, vì cầm điện thoại thì ngón tay ở dưới, nội dung trồi lên
               từ chỗ vừa chạm là tự nhiên nhất.
               Giờ tất cả dùng chung một kiểu: dán đáy màn hình, bo tròn 2 góc trên,
               trượt lên trong 0,25s theo đúng đường cong của Menu.
               ==================================================================== */
            @keyframes mvTruotLen {
                from { transform: translateY(100%); }
                to   { transform: translateY(0); }
            }
            :root {
                --snack: #12211e;
                --snackTx: #ffffff;
                --snackAc: #5fd6b2;
            }
            body.dark-mode {
                --snack: var(--xv-s4, #17302b);
                --snackTx: #f1f5f9;
                --snackAc: var(--xv-d1, #34d399);
            }
            @keyframes snackIn {
                from { opacity: 0; transform: translateY(18px) scale(.97); }
                to   { opacity: 1; transform: none; }
            }
            @keyframes snackTick {
                from { width: 100%; }
                to   { width: 0; }
            }
            #mv-snackbar-wrap {
                position: fixed;
                left: 14px;
                right: 14px;
                bottom: 108px;
                z-index: 99999;
                pointer-events: none;
                animation: snackIn .26s cubic-bezier(.2,.9,.3,1) both;
                max-width: 480px;
                margin: 0 auto;
            }
            .mv-snack-card {
                background: var(--snack, #12211e);
                border-radius: 16px;
                padding: 11px 12px;
                display: flex;
                gap: 11px;
                align-items: center;
                position: relative;
                overflow: hidden;
                box-shadow: 0 14px 34px rgba(4,10,9,.42);
                pointer-events: auto;
            }

            #material-modal-overlay, #risk-modal-overlay,
            #import-template-modal-overlay, #whatsnew-modal-overlay,
            #checklist-modal-overlay, .bang-truot,
            /* Bốn bảng này có quy tắc riêng theo id kèm !important (dòng 1486, 1754,
               5372, 5549) — id thắng class về độ ưu tiên nên .bang-truot ở trên không
               với tới được. Phải nêu đích danh id thì mới đè lại. */
            #modal-feedback-overlay, #install-modal-overlay,
            #shortcuts-modal-overlay, #upgrade-modal-overlay {
                align-items: flex-end !important;
                padding: 0 !important;
            }
            #material-modal-overlay .modal-box,
            #risk-modal-overlay .modal-box, #import-template-modal-overlay .modal-box,
            #whatsnew-modal-overlay .modal-box,
            #checklist-modal-overlay .modal-box,
            .bang-truot > div, #modal-feedback-overlay .fb-modal-box {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                border-radius: 20px 20px 0 0 !important;
                max-height: 88vh !important;
                /* Chừa chỗ cho vạch Home của iPhone, nếu không nút cuối bị vướng */
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
                animation: mvTruotLen 0.25s cubic-bezier(.32, 1, .4, 1);
            }
            /* Chỉ áp cho nhóm mới: hộp phải cuộn được thì thanh gạt sticky mới dính lại,
               và ganVuotDeDong mới phân biệt được "đang ở đầu bảng" với "đang cuộn giữa
               chừng" (nó chỉ cho bắt đầu kéo khi scrollTop <= 0). Ba hộp trong nhóm này
               đang là overflow hidden/visible nên không có mốc đó.
               KHÔNG gộp vào quy tắc chung ở trên để không đụng vào 10 bảng đang chạy tốt. */
            .bang-truot > div { overflow-y: auto !important; }

            /* "Thêm mới" đang trượt ngang từ phải (translateX). Đổi sang trượt lên,
               và không chiếm trọn chiều cao nữa để vẫn thấy được bảng phía sau. */
            /* [THÊM 2026-08-30] #activity-log-panel (Lịch Sử Sửa Đổi) bị BỎ SÓT trong đợt chuyển
               này. Nó vẫn là ngăn kéo cao trọn màn (top:0 + height:100vh) trong khi trang khai báo
               viewport-fit=cover ở thẻ meta — tức khung trang trải cả ra phần tai thỏ. Hệ quả:
               phần đầu bảng, gồm cả nút ✕ đóng, nằm KHUẤT dưới tai thỏ và không bấm được.
               Các bảng còn lại không dính vì đều đã thành bảng trượt từ đáy lên.
               Sửa bằng cách cho nó đi chung đường với những bảng kia, KHÔNG chèn riêng
               padding-top: env(safe-area-inset-top) — giữ một kiểu bảng duy nhất trên điện thoại
               thì thao tác mới nhất quán, và max-height 88vh thì không bao giờ chạm tới tai thỏ. */
            #side-add-panel,
            #notification-panel,
            #activity-log-panel {
                top: auto !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                height: auto !important;
                max-height: 88vh !important;
                border-left: none !important;
                border-radius: 20px 20px 0 0 !important;
                box-shadow: 0 -8px 32px rgba(0,0,0,0.18) !important;
                transform: translateY(100%) !important;
                transition: transform 0.25s cubic-bezier(.32, 1, .4, 1) !important;
            }
            #side-add-panel.is-open,
            #notification-panel.is-open,
            #activity-log-panel.is-open { transform: translateY(0) !important; }
            #notification-panel,
            #activity-log-panel { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
            #btn-header-notifications { display: none !important; }

            /* Thanh gạt nhỏ ở đầu bảng — quy ước quen thuộc báo cho người dùng biết "kéo xuống
               được". Không có nó thì tính năng vuốt-để-đóng có cũng như không vì chẳng ai đoán ra.
               Dùng position:sticky để nó dính lại khi cuộn nội dung bên trong. */
            /* Lưu ý: KHÔNG thêm thanh gạt cho #mv-project-menu-sheet — bảng đó đã có sẵn một thanh
               gạt viết thẳng trong HTML, thêm ở đây nữa là hiện ra HAI vạch chồng nhau. */
            #risk-modal-overlay .modal-box::before,
            #material-modal-overlay .modal-box::before,
            #import-template-modal-overlay .modal-box::before,
            #whatsnew-modal-overlay .modal-box::before,
            #notification-panel::before,
            #checklist-modal-overlay .modal-box::before,
            .bang-truot > div::before,
            #activity-log-panel::before,
            #side-add-panel::before {
                content: "";
                position: sticky;
                top: 0;
                z-index: 5;
                display: block;
                width: 40px;
                height: 4px;
                margin: 0 auto 12px;
                border-radius: 999px;
                background: var(--note-color);
                opacity: 0.35;
                flex-shrink: 0;
            }
            /* Bảng "Thêm mới" có phần đầu nền xanh đậm nên thanh gạt phải sáng màu mới thấy */
            #side-add-panel::before { background: #ffffff; opacity: 0.5; margin-top: 8px; }

            /* ====================================================================
               NHỮNG CHI TIẾT NHỎ NHƯNG LỘ NGAY KHI DÙNG THẬT (rà soát 2026-08-20)
               ==================================================================== */

            /* 1. Chớp XANH DƯƠNG khi chạm. Mặc định của trình duyệt di động là
                  rgba(51,181,229,.4) — màu xanh dương của Android, chọi hẳn với xanh lá thương
                  hiệu và nhìn rất "web" chứ không ra app. Đo được: đang xuất hiện trên tên công
                  việc, nhãn trạng thái, ngày, thẻ chỉ số. Tắt đi và thay bằng phản hồi tự vẽ ở
                  mục 2 bên dưới (tắt không mà không thay là mất luôn cảm giác bấm). */
            html, body, a, button, input, select, textarea, .status-pill, .dash-card {
                -webkit-tap-highlight-color: transparent;
            }

            /* 2. Phản hồi khi NHẤN. Trên điện thoại không có trạng thái rê chuột, nên nếu lúc
                  nhấn xuống không có gì thay đổi thì người dùng không biết máy đã nhận thao tác
                  chưa — hay bấm lại lần nữa. Đo được: trước đó KHÔNG có quy tắc :active nào. */
                        .status-pill:active, .dash-cta:active {
                transform: scale(0.94);
            }
            .dash-card:active {
                transform: scale(0.985);
                filter: brightness(0.97);
            }
            .status-pill, .dash-cta, .dash-card {
                transition: transform 0.12s ease, opacity 0.12s ease, filter 0.12s ease;
            }

            /* 3. Cuộn tới đáy bảng trượt thì trang NỀN phía sau cuộn theo (scroll chaining), kèm
                  hiệu ứng nảy của iOS — nhìn như app bị lỗi. contain giữ cú cuộn lại trong bảng. */
            #mv-project-menu-sheet, #side-add-panel, #notification-panel,
            #risk-modal-overlay .modal-box, #material-modal-overlay .modal-box,
            #import-template-modal-overlay .modal-box,
            #whatsnew-modal-overlay .modal-box,
            #checklist-modal-overlay .modal-box,
            .bang-truot > div, #modal-feedback-overlay .fb-modal-box {
                overscroll-behavior: contain;
            }

            /* 4. iOS tự phóng to chữ khi xoay ngang máy, làm vỡ bố cục vừa cân. Khoá lại 100%.
                  (Khác với chuyện chặn phóng to bằng tay — cái đó vẫn phải cho phép.) */
            html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

            /* 5. Dải chỉ số vuốt ngang còn 489px nội dung nằm ngoài màn hình mà không có dấu hiệu
                  gì. Thêm vệt mờ ở mép phải — quy ước quen thuộc báo "còn nữa, vuốt tiếp đi". */
            .dashboard-panel {
                -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            }

            /* Nút con mắt: nới ô chạm ra 44px và đẩy sát mép, đồng thời nới đệm phải của ô
               mật khẩu để chữ không chui xuống dưới nút. */
            #login-modal-overlay .btn-eye-toggle {
                width: 44px !important; height: 44px !important;
                right: 0 !important; padding: 0 !important;
                justify-content: center !important;
            }
            #login-modal-overlay #login-password { padding-right: 46px !important; }
            #login-modal-overlay #login-username, #login-modal-overlay #login-password { text-align: left; }
            #login-modal-overlay #login-remember-me { width: 20px !important; height: 20px !important; }
            #login-modal-overlay label[for="login-remember-me"] {
                min-height: 44px; display: flex; align-items: center;
            }
            /* Link chỉ cao 14px vì là chữ trần trong dòng. inline-block + đệm dọc cho nó
               ô chạm thật mà không đẩy dòng chữ đi đâu. */
            #login-link-dangky { display: inline-block; padding: 15px 6px; }
            /* Máy nhỏ (320x568) mà hộp có thêm dòng báo lỗi thì nội dung cao hơn màn hình.
               Lỗi này CÓ TỪ TRƯỚC đợt nới vùng chạm — đo bản cũ: hộp 641px, đỉnh bị cắt 36px,
               link đăng ký nằm dưới mép dưới, mà lớp phủ lại overflow:visible nên không cuộn
               tới được. Nới vùng chạm làm hộp cao thêm nên phải xử lý dứt điểm ở đây.
               Dùng margin:auto trên hộp chứ không dựa vào align-items:center — khi nội dung
               cao hơn khung, align-items:center cắt mất phần đỉnh và không cuộn lên được,
               còn margin:auto thì vẫn căn giữa mà vẫn cuộn đủ hai đầu. */
            #login-modal-overlay { overflow-y: auto !important; }
            #login-modal-overlay .login-box { margin: auto !important; }

            /* 7. VÙNG CHẠM CÒN THIẾU TRONG BẢNG (rà soát 2026-08-22)
                  Mũi tên chuyển công trình chỉ 28x28. Ô chọn công trình ở giữa là flex:1 1 0 kèm
                  min-width:0 nên nó tự co lại nhường chỗ — đo ở 320px: ô còn 174px, thanh
                  vẫn không tràn. Phóng luôn mũi tên 16 -> 18px, vì nới ô chạm mà không to
                  hình lên thì trông lọt thỏm (đúng lỗi đã gặp ở thanh trên cùng). */
                        
            /* Nhãn trạng thái và chip ngày là hai thứ chạm nhiều nhất trong hàng việc
               ("chạm để đổi trạng thái / ngày") nhưng ban đầu chỉ cao 24,8px và
               15,6-18,2px. Nới đệm dọc đưa lên 33px và 32px.

               *** ĐÃ CHỐT ĐÓNG LẠI 23/08 — GIỮ 33px, ĐỪNG TỰ NÂNG LÊN 44px. ***
               Tôi đã trình bày đủ chi phí và ba phương án, người dùng chọn giữ nguyên.
               Số liệu nếu sau này đổi ý: hàng việc cao 121px (dòng tên 38 + dòng meta 33
               + đệm); ép dòng meta lên 44 thì hàng thành 132px, tức +11px, một màn hình
               xem được 4,6 hàng thay vì 5,1.
               (Bản đầu của ghi chú này viết "ép 44px là hàng vọt lên ~90px" — SỐ ĐÓ SAI,
               đo lại ngày 23/08 mới ra +11px.)
               Cách nới vùng chạm bằng lề âm mà không tăng chiều cao thật ĐÃ CÂN NHẮC VÀ
               LOẠI: vùng chạm chồng sang hàng bên cạnh, bấm tên hàng dưới lại trúng chip
               ngày hàng trên. */
                                }

        /* [GỠ 2026-08-28] Toàn bộ kiểu dáng của "chế độ khách chỉ xem" đã gỡ cùng tính năng link
           khách xem. Lý do gỡ: khoá chặt cho đúng thì trải nghiệm của khách còn lại đúng bằng
           bản PDF/Excel vẫn xuất được, trong khi phải nuôi một chế độ hiển thị song song và một
           đường đọc dữ liệu không cần đăng nhập. Nhật ký máy chủ cho thấy chưa từng có khách
           thật nào mở link (mọi lượt đều từ IP có đăng nhập, tức là người tự thử).
           KHÔNG liên quan tới "Chia sẻ & phân quyền" cho cộng tác viên có tài khoản — cái đó giữ
           nguyên, xem khối body.perm-* ngay bên dưới. */

        /* ================= KHÓA VẬT TƯ THEO CẤP QUYỀN CỘNG TÁC VIÊN (CHIA SẺ DỰ ÁN) ================= */
        body.perm-locked #mm-toggle-add-btn {
            display: none !important;
            pointer-events: none !important;
        }

        /* [THÊM 2026-08-20] Máy hẹp (iPhone SE và tương đương, 320px). Sau khi nâng vùng chạm lên
           44px, đo ở 320px thấy nhóm nút bên phải thò ra khỏi nền thanh trên đúng 6px. Giữ nguyên
           44px cho ĐĂNG KÝ và ĐĂNG NHẬP — hai nút quan trọng nhất — rồi lấy lại chỗ từ những phần
           ít quan trọng hơn (nút phụ, khoảng cách). [2026-08-30] Quy tắc thu nhỏ nhãn MIỄN PHÍ ở
           đây đã bỏ: nhãn đó nay ẩn hẳn dưới 760px nên quy tắc thành chữ chết.
           PHẢI đặt SAU khối @media max-width:760px ở trên: hai bên cùng độ ưu tiên và cùng dùng
           !important nên quy tắc đứng sau mới thắng — cùng loại bẫy đã gặp với #btn-header-feedback. */
        @media screen and (max-width: 360px) {
            .app-topbar-header .btn-data,
            .app-topbar-header a.btn-data {
                min-width: 36px !important;
                padding: 5px 4px !important;
            }
            #login-btn-group a.btn-data,
            #login-btn-group .btn-data {
                min-width: 44px !important;
            }
            .topbar-right-group { gap: 3px !important; }
        }

        @media screen and (min-width: 761px) and (max-width: 1024px) {
            /* overflow-x:hidden biến html/body thành vùng cuộn và làm position:sticky
               mất tác dụng trên Chrome. clip vẫn chặn tràn ngang nhưng không tạo
               vùng cuộn mới, nên bảng điều khiển bám đầu trang ổn định. */
            html, body { overflow-x: clip !important; max-width: 100vw !important; box-sizing: border-box !important; }
            .container { box-sizing: border-box; }
        }

        /* Form tạo dự án mobile theo concept chuẩn */
        @media screen and (max-width: 760px) {
            #create-project-modal-overlay {
                padding: 0 !important; align-items: stretch !important; background: var(--bg-color) !important;
                backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
                z-index: 100100 !important;
            }
            #create-project-modal-overlay .cproj-modal-box {
                width: 100% !important; max-width: none !important; height: 100dvh !important;
                max-height: 100dvh !important; margin: 0 !important; border: 0 !important;
                border-radius: 0 !important; box-shadow: none !important; background: var(--bg-color) !important;
                display: flex !important; flex-direction: column !important;
                /* Bảng toàn màn hình, không phải bảng trượt từ đáy: bỏ đệm đáy và vùng cuộn của .bang-truot */
                padding: 0 !important; overflow: hidden !important;
            }
            #create-project-modal-overlay .cproj-modal-box::before { display: none !important; }
            /* Chỉ #cproj-v2-body cuộn; chân trang nằm sát đáy, chừa vùng an toàn của iPhone */
            #create-project-form {
                flex: 1; min-height: 0; overflow: hidden; padding: 0 !important;
                background: var(--bg-color); display: flex !important; flex-direction: column !important; gap: 0;
            }
            #create-project-form #cproj-v2-body {
                -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 20px 16px;
            }
            #create-project-form .cproj-v2-footer {
                padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg-color);
            }
            /* Trên điện thoại chỉ hiện phần còn lại ("CÒN 2 SUẤT"), vẫn ẩn chuỗi hạn mức dài của desktop */
            #create-project-modal-overlay #create-proj-quota-badge { display: none !important; }
            #create-project-modal-overlay #create-proj-quota-badge[data-con]:not([data-con=""]) {
                display: inline-block !important; font-size: 0 !important; margin-left: 8px; white-space: nowrap;
            }
            #create-project-modal-overlay #create-proj-quota-badge[data-con]:not([data-con=""])::after {
                content: attr(data-con); color: var(--brand-primary); font: 700 11px 'JetBrains Mono', monospace;
                letter-spacing: .03em; text-transform: uppercase;
            }
            #create-proj-name,
            #create-proj-code {
                min-height: 48px !important; padding: 13px 14px !important; border: 1.5px solid var(--border-color) !important;
                border-radius: 14px !important; background: var(--card-bg) !important; color: var(--text-color) !important;
                font-size: 16px !important; /* BẮT BUỘC >=16px trên iOS để không bị zoom màn hình */
                box-sizing: border-box !important;
            }
            #create-proj-name {
                font: 600 16px 'Be Vietnam Pro', sans-serif !important;
            }
            #create-proj-code {
                font: 700 16px 'JetBrains Mono', monospace !important; letter-spacing: .08em !important;
                text-transform: uppercase !important;
            }
            #create-proj-start,
            #create-proj-duration {
                font: 700 16px 'JetBrains Mono', monospace !important;
            }
            #btn-submit-create-proj {
                flex: 1 !important; min-height: 52px !important; padding: 14px !important; border-radius: 17px !important;
                background: var(--brand-primary) !important; color: #ffffff !important; font: 700 12.5px 'Be Vietnam Pro', sans-serif !important;
                box-shadow: 0 8px 20px rgba(var(--xv-c1-rgb, 32,86,76),.28); border: 0 !important; letter-spacing: .04em; text-transform: uppercase;
            }
            #btn-submit-create-proj svg { display: none !important; }
            #btn-submit-create-proj:disabled {
                opacity: .42; box-shadow: none; cursor: not-allowed;
            }
        }

        /* ================= TIÊU ĐỀ HỘP THOẠI PHẲNG (.xv-hd) =================
           Thay dải gradient tối cũ: nền thẻ, viền dưới mảnh, tiêu đề chữ thường 15px, nút đóng nền nhạt. Dùng token có sẵn. */
        .modal-box .xv-hd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--card-bg, #ffffff); border-bottom: 1px solid var(--border-color, #e2e8f0); }
        .xv-hd-ten { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .xv-hd-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-primary-light, #e6f4ef); color: var(--brand-primary, #20564c); display: flex; align-items: center; justify-content: center; }
        .modal-box .xv-hd h3 { margin: 0; padding: 0; border: 0; font-size: 15px; font-weight: 800; line-height: 1.3; letter-spacing: 0; text-transform: none !important; color: var(--text-color, #0f172a); }
        .xv-hd small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--note-color, #475569); }
        .xv-hd-x { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: var(--highlight, #f1f5f9); color: var(--note-color, #475569); display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .xv-hd-x:hover { background: var(--border-color, #e2e8f0); }

        /* ================= BẢNG XEM TRƯỚC HẠNG MỤC MẪU (.pv-*) =================
           Cùng ngôn ngữ với thư viện mẫu (.tl-*): nền --card, viền --bd, chữ --tx, nhấn --br. Máy tính là hộp giữa màn hình;
           điện thoại là màn toàn màn hình (khối @media bên dưới). */
        .pv-overlay { position: fixed; inset: 0; z-index: 100200; display: none; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: rgba(17, 39, 35, 0.56); }
        .pv-box { width: min(880px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; background: var(--card, #ffffff); color: var(--tx, #17211e); border-radius: 20px; box-shadow: 0 24px 80px rgba(8, 20, 17, 0.35); overflow: hidden; }
        .pv-dau { flex: none; display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 24px; border-bottom: 1px solid var(--bd, #e2e7e5); box-sizing: border-box; }
        .pv-lui { display: none; }
        .pv-dau-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .pv-tieu-de { font-size: 18px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
        .pv-phu-de { font: 700 12px 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--mut, #5a6762); }
        .pv-dong { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--bg, #f1f4f3); color: var(--mut, #3d4a45); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
        .pv-tools { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--bd, #e2e7e5); background: var(--bg, #f6f8f7); box-sizing: border-box; }
        .pv-ghichu { font-size: 13px; line-height: 1.45; color: var(--mut, #5a6762); }
        .pv-tim { flex: none; width: 280px; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--bd, #cfd8d4); border-radius: 12px; background: var(--card, #ffffff); color: var(--mut, #7a8781); }
        .pv-tim:focus-within { border-color: var(--br, #20564c); }
        .pv-tim input, .pv-tim input:focus, .pv-tim input:focus-visible { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; font-family: inherit; font-size: 14px; color: var(--tx, #17211e); padding: 0 !important; text-align: left !important; }
        .pv-cuon { flex: 1; min-height: 0; overflow-y: auto; }
        .pv-bang { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
        .pv-bang thead th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; background: var(--bg, #f6f8f7); border-bottom: 1px solid var(--bd, #e2e7e5); font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--mut2, #7a8781); }
        .pv-bang .pv-c1 { width: 48px; }
        .pv-bang .pv-c3 { width: 96px; }
        .pv-bang .pv-c4 { width: 240px; }
        .pv-box .pv-bang th, .pv-box .pv-bang td { border-width: 0; border-style: solid; border-color: var(--bd, #e2e7e5); text-align: left; }
        .pv-box .pv-bang td { padding: 9px 12px; border-bottom-width: 1px; vertical-align: middle; background: transparent; }
        .pv-box .pv-bang thead th { border-bottom-width: 1px; }
        .pv-box .pv-bang .pv-c1 { text-align: center; }
        .pv-box .pv-bang .pv-c3 { text-align: right; }
        .pv-bang td.pv-c1 { font: 700 11px 'JetBrains Mono', monospace; color: var(--mut, #5a6762); }
        .pv-bang td.pv-c3 { white-space: nowrap; font: 700 12px 'JetBrains Mono', monospace; color: var(--tx2, #3a4a46); }
        .pv-bang td.pv-c4 { font-size: 12px; color: var(--mut, #5a6762); }
        .pv-bang .pv-nhanh { color: var(--mut2, #94a3b8); margin-right: 6px; }
        .pv-bang tr.gd td { background: var(--brSoft, #e6f0ed); font-weight: 800; color: var(--br, #20564c); border-top: 1px solid var(--brLine, #bfe0d4); }
        .pv-bang tr.gd td.pv-c1, .pv-bang tr.gd td.pv-c3 { color: var(--br, #20564c); }
        .pv-bang tr.moc td { background: var(--warnBg, #fdf1e8); font-weight: 700; color: var(--warn, #a94d0c); }
        .pv-bang tr.moc td.pv-c3, .pv-bang tr.moc td.pv-c4 { color: var(--warn, #a94d0c); }
        .pv-chip { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 6px; font: 800 11px 'Be Vietnam Pro', sans-serif; letter-spacing: .03em; text-transform: uppercase; background: var(--br, #20564c); color: var(--brTx, #ffffff); }
        .pv-chip.moc { background: var(--warn, #a94d0c); color: #ffffff; }
        .pv-box .pv-bang td.pv-trong { text-align: center; padding: 28px 20px; font-size: 13px; color: var(--mut, #5a6762); }
        .pv-bang td.pv-trong.loi { color: var(--dan, #c0392b); }
        .pv-chan { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--bd, #e2e7e5); background: var(--card, #ffffff); box-sizing: border-box; }
        .pv-nut { height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--bd, #cfd8d4); background: var(--card, #ffffff); color: var(--tx, #17211e); font-family: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
        .pv-nut.chinh { background: var(--br, #20564c); border-color: var(--br, #20564c); color: var(--brTx, #ffffff); font-weight: 800; min-width: 200px; }
        body.dark-mode .pv-box { background: var(--xv-s5, #111c19); color: #e6efec; }
        body.dark-mode .pv-dau, body.dark-mode .pv-tools, body.dark-mode .pv-chan, body.dark-mode .pv-bang td, body.dark-mode .pv-bang thead th { border-color: var(--xv-s2, #22332f); }
        body.dark-mode .pv-tools, body.dark-mode .pv-bang thead th { background: var(--xv-s5, #0e1917); }
        body.dark-mode .pv-dong { background: var(--xv-s6, #16241f); color: #9fb3ad; }
        body.dark-mode .pv-tim, body.dark-mode .pv-nut { background: var(--xv-s6, #16241f); border-color: var(--xv-s7, #2a3d38); color: #e6efec; }
        body.dark-mode .pv-nut.chinh { background: #2f7a6b; border-color: #2f7a6b; color: #ffffff; }
        body.dark-mode .pv-bang tr.gd td { background: var(--xv-d1-soft-solid, #163830); color: var(--xv-d1-text, #6ee7b7); border-color: var(--xv-d1-line, #24574a); }
        body.dark-mode .pv-bang tr.moc td { background: #2b1a0f; color: #fdba74; }

        /* ================= TẠO CÔNG TRÌNH HAI BƯỚC TRÊN ĐIỆN THOẠI =================
           Bước 1 (#cproj-m-step1): chọn cách bắt đầu. Bước 2: bảng #create-project-modal-overlay có class cproj-m-flow.
           Thư viện mẫu (.tl-*) có bố cục một cột riêng. Chỉ dùng token Romteco Mobile (--bg --card --bd --br ...). */
        .cproj-m-back, .cproj-m-only, .tl-lui, .tl-m-only, #cproj-m-step1, #cproj-m-confirm { display: none; }
        @media screen and (max-width: 760px) {
            /* ---- Bước 2: bảng đặt tên và lịch ---- */
            #create-project-modal-overlay.cproj-m-flow .cproj-m-back {
                display: flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; padding: 0; cursor: pointer;
                border: 1px solid var(--brLine); border-radius: 11px; background: var(--brSoft); color: var(--br); font: 700 14px 'Be Vietnam Pro', sans-serif;
            }
            #create-project-modal-overlay.cproj-m-flow .cproj-h2-left { flex: 1; min-width: 0; }
            #create-project-modal-overlay.cproj-m-flow .cproj-m-only { display: block; }
            #create-project-modal-overlay.cproj-m-flow .cproj-subhead,
            #create-project-modal-overlay.cproj-m-flow .cproj-v2-sources-grid,
            #create-project-modal-overlay.cproj-m-flow #cproj-v2-file-sec,
            #create-project-modal-overlay.cproj-m-flow .cproj-v2-btn-cancel,
            #create-project-modal-overlay.cproj-m-flow .cproj-v2-hint { display: none !important; }
            #create-project-modal-overlay.cproj-m-flow #cproj-v2-body { display: flex; flex-direction: column; gap: 12px; }
            /* Thân là cột flex có cuộn: các khối con không được co lại, nếu không nội dung bị ép thay vì cuộn */
            #create-project-modal-overlay.cproj-m-flow #cproj-v2-body > * { flex-shrink: 0; }
            #create-project-modal-overlay .cproj-extra-panel input { text-align: left !important; text-transform: none !important; }
            #create-project-modal-overlay.cproj-m-flow #create-proj-quota-badge[data-con]:not([data-con=""]) { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; display: inline-flex !important; align-items: center; }
            #create-project-modal-overlay.cproj-m-flow #create-proj-quota-badge[data-con]:not([data-con=""])::after { line-height: 1; color: var(--br); }
            /* Ba số của "Kết quả dự kiến" gồm hai ngày dd/mm/yyyy: thu nhỏ để không đè lên nhau ở khổ 360 đến 390 */
            #create-project-modal-overlay.cproj-m-flow .tl-kq3 { gap: 8px; }
            #create-project-modal-overlay.cproj-m-flow .tl-kq3 b { font-size: 14px; letter-spacing: -.02em; }
            #create-project-modal-overlay.cproj-m-flow .cproj-sources-wrapper { margin-bottom: 0; }
            #create-project-modal-overlay.cproj-m-flow .cproj-sources-wrapper #cproj-v2-samples-sec { margin-top: 0 !important; }
            #create-project-modal-overlay.cproj-m-flow .cproj-v2-footer { justify-content: stretch; }
            #create-project-modal-overlay.cproj-m-flow .cproj-v2-btn-submit { flex: 1; }
            .cm-steps { display: flex; gap: 4px; }
            .cm-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--dim); }
            .cm-steps i.on { background: var(--br); }
            .cm-lbl { margin-top: 8px; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
            .cm-tomtat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--bd); border-radius: 16px; background: var(--bg); }
            .cm-tomtat .tic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brSoft); color: var(--br); display: flex; align-items: center; justify-content: center; }
            .cm-tomtat .tcol { min-width: 0; flex: 1; }
            .cm-tomtat .tn { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--tx); }
            .cm-tomtat .ts { margin-top: 3px; font: 700 12px 'JetBrains Mono', monospace; color: var(--mut); }
            .cm-tomtat button { flex: none; border: 0; background: transparent; color: var(--br); font: 800 13.5px 'Be Vietnam Pro', sans-serif; padding: 6px 4px; cursor: pointer; }

            /* Trang khai báo viewport-fit=cover: các màn toàn màn hình phải chừa vùng tai thỏ và thanh trạng thái phía trên */
            #create-project-modal-overlay .cproj-modal-box .cproj-header-v2 { height: calc(50px + env(safe-area-inset-top, 0px)); min-height: calc(50px + env(safe-area-inset-top, 0px)); max-height: none; padding: env(safe-area-inset-top, 0px) 20px 0; }
            #cproj-sample-tasks-modal .pv-box > div:first-child { height: calc(48px + env(safe-area-inset-top, 0px)) !important; padding-top: env(safe-area-inset-top, 0px) !important; box-sizing: border-box; }

            /* Hộp "Tài khoản và hỗ trợ": nhãn @tên không được đè lên nút đóng */
            #user-settings-modal-overlay .modal-box > div:first-child > div:first-child { flex: 1; min-width: 0; overflow: hidden; }
            #user-settings-modal-overlay #us-header-username { flex: 0 1 auto; min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
            /* Màn Đồng bộ và sao lưu chiếm cả màn hình: chừa vùng tai thỏ ở thanh tiêu đề */
            #xv-sync-intro-modal .modal-box .xv-sync-mtop { height: calc(56px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }
            /* ---- Bước 1: chọn cách bắt đầu ---- */
            #cproj-m-step1.open { display: flex; position: fixed; inset: 0; z-index: 100120; flex-direction: column; background: var(--card); color: var(--tx); }
            .cm-hd { flex: none; display: flex; align-items: center; gap: 10px; height: calc(50px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 20px 0; background: var(--bg); border-bottom: 1px solid var(--bd); box-sizing: border-box; }
            .cm-hd .cm-tt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; font: 800 14.5px 'Be Vietnam Pro', sans-serif; color: var(--tx); }
            .cm-hd .cm-q { font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .03em; text-transform: uppercase; color: var(--br); }
            .cm-back { display: flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; border: 1px solid var(--brLine); border-radius: 11px; background: var(--brSoft); color: var(--br); font: 700 14px 'Be Vietnam Pro', sans-serif; }
            .cm-x { width: 28px; height: 28px; flex: none; border: 0; background: transparent; color: var(--mut); font-size: 15px; cursor: pointer; }
            .cm-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
            .cm-big { font: 700 20px/1.25 'Be Vietnam Pro', sans-serif; color: var(--tx); }
            .cm-sub { font: 400 11.5px/1.52 'Be Vietnam Pro', sans-serif; color: var(--mut); }
            .cm-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; box-sizing: border-box; padding: 15px 14px; text-align: left; cursor: pointer; font-family: 'Be Vietnam Pro', sans-serif; color: var(--tx); background: var(--card); border: 1.5px solid var(--bd); border-radius: 16px; }
            .cm-pick .pt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
            .cm-pick b { font-size: 15px; font-weight: 700; }
            .cm-pick span.sb { font-size: 12.5px; font-weight: 500; color: var(--mut); }
            .cm-pick.on { border-color: var(--br); box-shadow: 0 0 0 3px var(--brSoft); }
            .cm-pick.lock { opacity: .6; }
            .cm-tag { flex: none; font: 700 11px 'JetBrains Mono', monospace; color: var(--br); background: var(--brSoft); padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
            .cm-tag.w { color: var(--warn); background: var(--warnBg); }
            .cm-chev { flex: none; color: var(--mut2); font-size: 22px; line-height: 1; }
            .cm-link { align-self: center; border: 0; background: none; padding: 8px 6px; cursor: pointer; color: var(--br); font: 700 12.5px 'Be Vietnam Pro', sans-serif; text-decoration: underline; text-underline-offset: 3px; }
            .cm-giu { background: var(--brSoft); border-radius: 12px; padding: 10px 12px; font: 600 12.5px 'Be Vietnam Pro', sans-serif; color: var(--br); }
            .cm-warn { background: var(--warnBg); color: var(--warn); border-radius: 12px; padding: 10px 12px; font: 600 12px/1.45 'Be Vietnam Pro', sans-serif; }

            /* ---- Hộp xác nhận bỏ công trình đang nhập ---- */
            #cproj-m-confirm.open { display: flex; position: fixed; inset: 0; z-index: 100300; align-items: center; justify-content: center; padding: 24px; background: rgba(11,19,18,.6); }
            .cm-dlg { width: 100%; max-width: 340px; box-sizing: border-box; padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--bd); border-radius: 20px; color: var(--tx); }
            .cm-dlg h4 { margin: 0; font: 700 16px 'Be Vietnam Pro', sans-serif; }
            .cm-dlg p { margin: 0; font: 500 13px 'Be Vietnam Pro', sans-serif; color: var(--tx2); }
            .cm-dlg-bt { display: flex; gap: 8px; margin-top: 6px; }
            .cm-dlg-bt button { flex: 1; min-height: 46px; border-radius: 14px; border: 1px solid var(--bd); background: var(--card); color: var(--tx); font: 700 12.5px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
            .cm-dlg-bt button.pr { background: var(--br); border-color: var(--br); color: var(--brTx); }
            .cm-dlg-bt button.dg { color: var(--dan); }

            /* ---- Thư viện mẫu: một cột, chip loại công trình, thanh dưới ---- */
            #tpl-lib-overlay.tl-overlay { padding: 0; align-items: stretch; z-index: 100150; background: var(--card); }
            #tpl-lib-overlay .tl-hop { width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; background: var(--card); }
            #tpl-lib-overlay .tl-dau { height: auto; flex-wrap: wrap; gap: 10px 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 12px; }
            #tpl-lib-overlay .tl-lui { display: flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; border: 1px solid var(--brLine); border-radius: 11px; background: var(--brSoft); color: var(--br); font: 700 14px 'Be Vietnam Pro', sans-serif; }
            #tpl-lib-overlay .tl-dau-chu { flex: 1; min-width: 0; }
            #tpl-lib-overlay .tl-tieu-de { font-size: 15px; }
            #tpl-lib-overlay .tl-phu-de { display: none; }
            #tpl-lib-overlay .tl-dong { display: none; }
            #tpl-lib-overlay .tl-tim { order: 3; flex: 0 0 100%; width: 100%; height: 42px; box-sizing: border-box; border-radius: 12px; }
            #tpl-lib-overlay .tl-tim input { font-size: 16px; }
            #tpl-lib-overlay .tl-than { flex-direction: column; }
            #tpl-lib-overlay .tl-rail { width: 100%; flex: none; flex-direction: row; gap: 6px; padding: 8px 20px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--bd); }
            #tpl-lib-overlay .tl-loai { width: auto; flex: none; height: 34px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 999px; background: var(--bg); white-space: nowrap; font-size: 12.5px; }
            #tpl-lib-overlay .tl-loai.bat { border-color: var(--br); background: var(--brSoft); }
            #tpl-lib-overlay .tl-loai .tl-dem, #tpl-lib-overlay .tl-goiy { display: none; }
            #tpl-lib-overlay .tl-luoi { grid-template-columns: minmax(0, 1fr); padding: 12px 20px; gap: 10px; }
            #tpl-lib-overlay .tl-the { padding: 14px; gap: 8px; }
            #tpl-lib-overlay .tl-the-ten { min-height: 0; font-size: 14.5px; }
            #tpl-lib-overlay .tl-xem { display: none; }
            #tpl-lib-overlay .tl-chan { height: auto; flex-wrap: wrap; gap: 8px 10px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--card); }
            #tpl-lib-overlay .tl-chon-ten { flex: 0 0 100%; font-size: 12px; }
            #tpl-lib-overlay .tl-chan .tl-gian, #tpl-lib-overlay .tl-chan > .tl-nut:not(.chinh):not(.tl-m-only) { display: none; }
            /* ---- Xem trước hạng mục của mẫu: toàn màn hình, mỗi việc một dòng (bỏ cột # và ghi chú) ---- */
            #cproj-sample-tasks-modal.pv-overlay { padding: 0; align-items: stretch; background: var(--card); }
            #cproj-sample-tasks-modal .pv-box { width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; }
            #cproj-sample-tasks-modal .pv-dau { height: auto; min-height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 20px 0; gap: 12px; }
            #cproj-sample-tasks-modal .pv-lui { display: flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; border: 1px solid var(--brLine); border-radius: 11px; background: var(--brSoft); color: var(--br); font: 700 14px 'Be Vietnam Pro', sans-serif; }
            #cproj-sample-tasks-modal .pv-dong { display: none; }
            #cproj-sample-tasks-modal .pv-tieu-de { font-size: 15px; }
            #cproj-sample-tasks-modal .pv-phu-de { font-size: 11px; }
            #cproj-sample-tasks-modal .pv-tools { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 20px; }
            #cproj-sample-tasks-modal .pv-ghichu { font-size: 12px; }
            #cproj-sample-tasks-modal .pv-tim { width: 100%; }
            #cproj-sample-tasks-modal .pv-tim input { font-size: 16px; }
            #cproj-sample-tasks-modal .pv-bang thead { display: none; }
            #cproj-sample-tasks-modal .pv-bang, #cproj-sample-tasks-modal .pv-bang tbody { display: block; }
            #cproj-sample-tasks-modal .pv-bang tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
            #cproj-sample-tasks-modal .pv-bang td.pv-c1, #cproj-sample-tasks-modal .pv-bang td.pv-c4 { display: none; }
            #cproj-sample-tasks-modal .pv-box .pv-bang td { border-bottom-width: 0; }
            #cproj-sample-tasks-modal .pv-bang tr { border-bottom: 1px solid var(--bd); }
            #cproj-sample-tasks-modal .pv-bang td.pv-c2 { padding: 11px 8px 11px 20px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
            #cproj-sample-tasks-modal .pv-bang td.pv-c3 { padding: 11px 20px 11px 4px; }
            #cproj-sample-tasks-modal .pv-bang td.pv-trong { display: block; grid-column: 1 / -1; }
            #cproj-sample-tasks-modal .pv-chan { gap: 10px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
            #cproj-sample-tasks-modal .pv-nut { flex: 1; min-height: 52px; height: auto; border-radius: 17px; padding: 0 8px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
            #cproj-sample-tasks-modal .pv-nut.chinh { flex: 1.4; min-width: 0; box-shadow: var(--brShadow); }
            #tpl-lib-overlay .tl-chan .tl-m-only { display: inline-flex; flex: 1; justify-content: center; min-height: 52px; border-radius: 17px; padding: 0 8px; }
            #tpl-lib-overlay .tl-chan .tl-nut.chinh { flex: 1.4; min-width: 0; min-height: 52px; border-radius: 17px; box-shadow: var(--brShadow); text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
        }

        /* ================= LOGIN MODAL SPLIT SCREEN FULL MÀN HÌNH (PC & MOBILE) ================= */
        #login-modal-overlay {
            display: none;
            position: fixed !important;
            inset: 0 !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;
            max-width: 100vw !important;
            max-height: 100vh !important;
            background: #ffffff !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            z-index: 200000 !important;
            align-items: stretch !important;
            justify-content: stretch !important;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }
        html.not-logged-in #login-modal-overlay,
        #login-modal-overlay.open { display: flex !important; }
        html.not-logged-in body { overflow: hidden; }
        @media (max-width: 760px) {
            html.not-logged-in body #mobile-bottom-nav { display: none !important; }
        }
        .login-box {
            background: #ffffff !important;
            width: 100vw !important;
            max-width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;
            max-height: none !important;
            padding: 0 !important;
            margin: 0 !important;
            overflow: hidden !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            box-sizing: border-box !important;
            display: flex !important;
            flex-direction: row !important;
            position: relative !important;
        }
        .login-col-left {
            width: 580px;
            max-width: 48%;
            min-width: 420px;
            height: 100%;
            flex-shrink: 0;
            box-sizing: border-box;
            background: #ffffff;
            padding: 40px 60px 32px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-y: auto;
            position: relative;
            z-index: 10;
        }
        /* ===== Khởi động khách mới trên điện thoại: màn mở link, luồng một màn, gợi ý đầu tiên ===== */
        .xv-kd-mob, .xv-kd-dn-link, .xv-kd-extra, .xv-kd-dn2, .xv-kd-t-mob, .xv-kd-batdau, .xv-kd-dn-pc, .xv-kd-phu-pc { display: none; }
        .xv-kd-gt .xv-kd-tieude { margin: 6px 0 8px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; text-transform: none; }
        .xv-kd-gt .xv-kd-phu { margin: 0; font-size: 15px; line-height: 1.5; color: #475569; }
        html.xv-kd-moi #login-form-wrapper { display: none !important; }
        html.xv-kd-moi .xv-kd-dn-link { display: block; font-size: 14px; color: #475569; }
        /* Chế độ đăng nhập (không phải khách mới): form lên đầu, bỏ phần quảng bá và thẻ dùng thử */
        .xv-dn-tieude, .xv-dn-r { display: none; }
        html:not(.xv-kd-moi) .xv-dn-tieude { display: block; }
        html:not(.xv-kd-moi) .xv-dn-r { display: block; }
        html:not(.xv-kd-moi) .xv-moi-r { display: none; }
        html:not(.xv-kd-moi) .xv-kd-gt, html:not(.xv-kd-moi) #login-free-hero-action, html:not(.xv-kd-moi) .xv-kd-dn-link, html:not(.xv-kd-moi) #login-divider-row, html:not(.xv-kd-moi) #login-plans-line, html:not(.xv-kd-moi) .xv-kd-batdau { display: none !important; }
        html:not(.xv-kd-moi) #btn-login-submit { background: var(--xv-c1, #20564c) !important; color: #ffffff !important; }
        .xv-dn-tieude h2 { margin: 18px 0 6px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; }
        .xv-dn-tieude p { margin: 0; font-size: 15px; line-height: 1.5; color: #475569; }
        #login-dn-lien-ket { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 14px; font-size: 14px; color: #3d4f4a; }
        #login-dn-lien-ket a { display: inline-block; padding: 8px 4px; font-weight: 700; color: var(--xv-c1, #20564c); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
        #login-dn-lien-ket #login-dung-thu { font-size: 13.5px; font-weight: 600; color: #5f736d; }
        .xv-kd-dn-link div + div { margin-top: 6px; font-size: 13px; }
        .xv-kd-dn-link a { display: inline-block; padding: 6px 4px; color: var(--xv-c1, #20564c); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
        /* Luồng khách mới trên máy tính: bấm bắt đầu vào thẳng Bước 1, không còn màn "Chưa có dự án" và không còn đường quay lại đăng nhập ở từng bước */
        body.xv-kdpc.empty-project-mode .cproj-studio-right .studio-btn-back-nav, body.xv-kdpc.empty-project-mode #studio-pane-1 .studio-btn-back-nav { display: none !important; }
        body.xv-kdpc.empty-project-mode #studio-pane-1 .studio-btn-cta-nav { margin-left: auto; }
        /* Một màn thay Bước 1–5: tên, loại công trình, giai đoạn chỉnh được, ngày khởi công + ngày nghỉ; kế hoạch xem trước ở cột phải */
        .xv-kd-gdhost { display: none; }
        body.xv-kdpc.empty-project-mode #studio-step-header { display: none !important; }
        body.xv-kdpc.empty-project-mode .cproj-studio-left { padding-top: 40px !important; overflow-y: auto; gap: 14px; }
        body.xv-kdpc.empty-project-mode #studio-pane-1 { gap: 14px !important; }
        body.xv-kdpc.empty-project-mode .xv-kd-extra, body.xv-kdpc.empty-project-mode .xv-kd-gdhost { display: flex; flex-direction: column; gap: 8px; }
        body.xv-kdpc.empty-project-mode .xv-kd-lbl { font-size: 12.5px; font-weight: 600; color: #0f172a; }
        body.xv-kdpc.empty-project-mode #xv-kd-extra2 .xv-kd-lbl { display: none; }
        body.xv-kdpc.empty-project-mode .xv-kd-hang-ngay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
        body.xv-kdpc.empty-project-mode .xv-kd-o-ngay > div { width: 100% !important; }
        body.xv-kdpc.empty-project-mode #studio-proj-start-disp, body.xv-kdpc.empty-project-mode #studio-rest-select { width: 100% !important; height: 50px !important; font-size: 16px !important; border-radius: 12px !important; text-align: left !important; padding-left: 16px !important; }
        body.xv-kdpc.empty-project-mode .xv-kd-ghichu-cu { display: none; }
        body.xv-kdpc.empty-project-mode .xv-kd-ph, body.xv-kdpc.empty-project-mode .xv-kd-dong-ma { display: none !important; }
        /* Tiêu đề lớn, ô tên rộng bằng cột, loại công trình gọn một hai hàng */
        body.xv-kdpc.empty-project-mode #studio-pane-1 h1 { font-size: 30px !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; }
        body.xv-kdpc.empty-project-mode .xv-kd-o-ten { width: 100% !important; }
        body.xv-kdpc.empty-project-mode #studio-proj-name { height: 56px !important; font-size: 17px !important; border-radius: 12px !important; padding-left: 16px !important; }
        body.xv-kdpc.empty-project-mode #studio-presets-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
        body.xv-kdpc.empty-project-mode #studio-presets-wrap .cproj-preset-pill { height: 42px; padding: 0 14px; font-size: 14.5px; border-radius: 99px; }
        body.xv-kdpc.empty-project-mode #studio-presets-wrap:not(.xv-kd-mo-loai) .xv-kd-pill-an:not(.is-active) { display: none; }
        /* Giai đoạn thi công: khung tóm tắt một dòng, bấm "Chỉnh sửa" mới mở danh sách */
        .xv-kd-gdpc-dau, .xv-kd-gdpc-tt, .xv-kd-gd-edit { display: none; }
        body.xv-kdpc.empty-project-mode #xv-kd-extra-gd { gap: 10px; padding: 14px 16px 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f5f9f7; }
        body.xv-kdpc.empty-project-mode #xv-kd-extra-gd.is-sua { border-color: var(--xv-c1, #20564c); }
        body.xv-kdpc.empty-project-mode .xv-kd-gdpc-dau { display: flex; align-items: center; justify-content: space-between; }
        body.xv-kdpc.empty-project-mode .xv-kd-gdpc-dau small { font-size: 14px; font-weight: 400; color: #586b65; }
        .xv-kd-gdpc-sua { border: 0; background: transparent; color: var(--xv-c1, #20564c); font: 700 14px 'Be Vietnam Pro', sans-serif; padding: 8px 4px; cursor: pointer; }
        #xv-kd-extra-gd.is-sua .xv-kd-gdpc-sua { padding: 7px 16px; border-radius: 99px; background: var(--xv-c1, #20564c); color: #fff; }
        body.xv-kdpc.empty-project-mode .xv-kd-gdpc-tt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; line-height: 1.4; font-weight: 600; color: #0f172a; }
        .xv-kd-gdpc-tt i { font-style: normal; font-weight: 400; color: #586b65; }
        body.xv-kdpc.empty-project-mode #xv-kd-extra-gd.is-sua .xv-kd-gdpc-tt { display: none; }
        body.xv-kdpc.empty-project-mode #xv-kd-extra-gd.is-sua .xv-kd-gd-edit { display: flex; flex-direction: column; gap: 6px; }
        body.xv-kdpc.empty-project-mode .xv-kd-gd-edit #studio-stages-list { gap: 4px !important; }
        body.xv-kdpc.empty-project-mode .xv-kd-gd-edit #studio-stages-list input { height: 40px !important; text-align: left !important; font-size: 15px !important; border-radius: 10px !important; border-color: #b6c5c0 !important; }
        body.xv-kdpc.empty-project-mode .xv-kd-gd-edit .studio-stage-move { opacity: 0; transition: opacity .12s; }
        body.xv-kdpc.empty-project-mode .xv-kd-gd-edit .studio-stage-row-item:hover .studio-stage-move, body.xv-kdpc.empty-project-mode .xv-kd-gd-edit .studio-stage-row-item:focus-within .studio-stage-move { opacity: 1; }
        /* Thanh đáy: nút Tạo kế hoạch rộng hết cột và hàng lối thoát, nền đặc nên nội dung cuộn không đè lên chữ */
        body.xv-kdpc.empty-project-mode .xv-kd-hang-nut { position: sticky; bottom: 0; z-index: 3; margin: 0 calc(-1 * clamp(36px, 4vw, 56px)) calc(-1 * clamp(24px, 3vh, 36px)); padding: 16px clamp(36px, 4vw, 56px) 14px; background: #fff; border-top: 1px solid #e2e8f0; flex-direction: column; align-items: stretch; gap: 2px; }
        body.dark-mode.xv-kdpc.empty-project-mode .xv-kd-hang-nut { background: var(--xv-s1, #11201b); border-top-color: var(--xv-s2, #1f362e); }
        body.xv-kdpc.empty-project-mode .xv-kd-hang-nut .studio-btn-cta-nav { width: 100%; height: 56px !important; justify-content: center; border-radius: 12px !important; font-size: 17px !important; }
        body.xv-kdpc.empty-project-mode .xv-kd-hang-nut .xv-kd-phu-pc { justify-content: center; font-size: 13.5px; gap: 0 14px; }
        body.xv-kdpc.empty-project-mode .xv-kd-hang-nut .xv-kd-phu-pc button { padding: 8px 0; font-size: 13.5px; }
        /* "Đã có tài khoản? Đăng nhập" cùng hàng với logo, góc phải của cột trái */
        body.xv-kdpc.empty-project-mode .cproj-studio-left > .xv-kd-dn-pc { position: absolute; right: clamp(36px, 4vw, 56px); top: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; border: 0; background: transparent; color: #586b65; font: 400 14px 'Be Vietnam Pro', sans-serif; cursor: pointer; z-index: 5; }
        body.xv-kdpc.empty-project-mode .xv-kd-dn-pc b { color: var(--xv-c1, #20564c); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
        /* Cột phải: thẻ xem trước gọn, vừa khít khung (thay bảng Gantt đầy đủ của bước tạo thêm công trình) */
        .xv-kd-xt { display: none; }
        body.xv-kdpc.empty-project-mode .cproj-studio-right { padding: 0 56px; align-items: center; justify-content: center; background: #eef3f1; }
        body.xv-kdpc.empty-project-mode .cproj-pv-box { display: none !important; }
        body.xv-kdpc.empty-project-mode .xv-kd-xt { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 760px; }
        .xv-kd-xt-nhan { padding-left: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: #586b65; }
        .xv-kd-xt-the { display: flex; flex-direction: column; gap: 18px; padding: 24px 28px 22px; border: 1px solid #dde5e2; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .08); }
        .xv-kd-xt-ten { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; overflow-wrap: anywhere; }
        .xv-kd-xt-ten.is-trong { color: #6b7d78; }
        .xv-kd-xt-meta { margin-top: 6px; font-size: 14px; color: #586b65; }
        .xv-kd-xt-h { display: grid; grid-template-columns: 190px 112px minmax(0, 1fr); align-items: center; min-height: 50px; border-bottom: 1px solid #dde5e2; }
        .xv-kd-xt-h.is-dau { min-height: 30px; align-items: end; font-size: 12px; font-weight: 600; color: #586b65; }
        .xv-kd-xt-h b { font-size: 14.5px; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; padding-right: 10px; }
        .xv-kd-xt-h span { font-size: 13px; color: #586b65; }
        .xv-kd-xt-thang { display: flex; width: 100%; }
        .xv-kd-xt-thang span { box-sizing: border-box; padding-left: 6px; border-left: 1px solid #dde5e2; white-space: nowrap; overflow: hidden; font-size: 12px; font-weight: 600; }
        .xv-kd-xt-vach { position: relative; height: 14px; border-radius: 99px; background: #eef3f1; }
        .xv-kd-xt-vach i { position: absolute; top: 0; height: 100%; border-radius: 99px; background: #b8c6c1; }
        .xv-kd-xt-vach i.dam { background: var(--xv-c1, #20564c); }
        .xv-kd-xt-ghi { font-size: 13px; color: #586b65; }
        /* Khách đã đăng nhập, chưa có dự án: vào thẳng màn tạo công trình, không còn nút quay lại màn chọn */
        .xv-kd-thung { display: none; }
        body.xv-kd-dn .xv-kd-thung { display: inline; }
        body.xv-kd-dn .studio-btn-back-nav, body.xv-kd-dn .xv-kd-dn-pc, body.xv-kd-dn .xv-kd-dn-link, body.xv-kd-dn .xv-kd-dn2 { display: none !important; }
        body.xv-kdpc.empty-project-mode .xv-kd-phu-pc { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #5d6b66; }
        .xv-kd-phu-pc button { padding: 4px 0; border: 0; background: none; color: var(--xv-c1, #20564c); font: 700 12.5px 'Be Vietnam Pro', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
        @media (max-width: 760px) {
            .xv-kd-t-mob { display: inline; }
            .xv-kd-t-pc { display: none; }
            .xv-kd-mob { display: block; }
            span.xv-kd-mob { display: inline; }
            .xv-kd-pc { display: none !important; }
            .xv-kd-gt .xv-kd-tieude { margin: 4px 0 8px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 27px; line-height: 1.22; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; text-transform: none; }
            .xv-kd-gt .xv-kd-phu { margin: 0; font-size: 15px; line-height: 1.5; color: #475569; }
            .xv-kd-vd { margin-top: 18px; padding: 12px 14px 6px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; }
            .xv-kd-vd-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
            .xv-kd-vd-dau b { font-size: 13px; font-weight: 800; color: #0f172a; }
            .xv-kd-vd-dau span { font-size: 11px; font-weight: 700; color: #14633f; background: #e4f5ec; border-radius: 6px; padding: 2px 8px; }
            .xv-kd-vd-h { display: flex; align-items: center; gap: 10px; height: 30px; }
            .xv-kd-vd-h em { flex: none; width: 96px; font-style: normal; font-size: 12px; font-weight: 700; color: #0f172a; white-space: nowrap; }
            .xv-kd-vd-h i { position: relative; flex: 1; height: 20px; display: block; }
            .xv-kd-vd-h u { position: absolute; top: 5px; height: 10px; border-radius: 5px; background: var(--xv-c1, #20564c); display: block; }
            .xv-kd-vd-h u.nhat { background: #b9c4bf; }
            .xv-kd-vd-h small { flex: none; width: 72px; text-align: right; font-size: 11px; color: #64748b; }
            #btn-login-offline { background: var(--xv-c1, #20564c) !important; height: 56px !important; min-height: 56px !important; border-radius: 14px !important; font-size: 16.5px !important; }
            .xv-kd-ghi { order: 2; text-align: center; font-size: 13px; color: #475569; }
            #login-free-hero-action #btn-login-offline { order: 1; }
            html.xv-kd-moi #login-form-wrapper { display: none !important; }
            html.xv-kd-moi .xv-kd-dn-link { display: block; text-align: center; font-size: 14px; color: #475569; }
            .xv-kd-dn-link div + div { margin-top: 6px; font-size: 13px; }
            .xv-kd-dn-link a { display: inline-block; padding: 8px 4px; color: var(--xv-c1, #20564c); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
            /* Luồng một màn: không còn đường quay lại bước cũ; đăng nhập là một liên kết nhỏ ở cuối */
            body.xv-kd2 .studio-btn-back-nav, body.xv-kd2 #studio-step-header { display: none !important; }
            body.xv-kd2 .xv-kd-extra { display: flex; flex-direction: column; gap: 8px; }
            body.xv-kd2 .xv-kd-extra .xv-kd-lbl { font-size: 12.5px; font-weight: 600; color: #0f172a; }
            body.xv-kd2 #xv-kd-extra2 .xv-kd-lbl { display: none; }
            body.xv-kd2 .cproj-studio-left > .xv-kd-dn2 { display: block; position: absolute; top: 14px; right: 16px; z-index: 4; font-size: 0; }
            body.xv-kd2 .xv-kd-dn2 a { display: inline-block; padding: 12px 6px; font-size: 14px; color: var(--xv-c1, #20564c); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
        }
        /* ===== Hộp chọn ngày / lựa chọn thống nhất trên điện thoại (tấm trượt từ đáy) ===== */
        #xv-hc-nen { position: fixed; inset: 0; z-index: 100050; display: none; background: rgba(17, 39, 35, .48); opacity: 0; transition: opacity .2s ease; }
        #xv-hc-nen.mo { display: block; opacity: 1; }
        #xv-hc-tam { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100051; display: none; flex-direction: column; max-height: 88vh; box-sizing: border-box; padding: 10px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #fff; color: #17211e; box-shadow: 0 -10px 30px rgba(17, 39, 35, .22); font-family: 'Be Vietnam Pro', system-ui, sans-serif; transform: translateY(100%); transition: transform .24s ease; }
        #xv-hc-nen.mo + #xv-hc-tam { display: flex; }
        #xv-hc-tam.mo { transform: none; }
        @media (prefers-reduced-motion: reduce) { #xv-hc-nen, #xv-hc-tam { transition: none; } }
        @media (min-width: 761px) { #xv-hc-nen, #xv-hc-tam { display: none !important; } }
        #xv-hc-tam button { font-family: inherit; cursor: pointer; }
        .xv-hc-dau { padding-bottom: 6px; }
        .xv-hc-tay { display: block; width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: #d5dcd9; }
        .xv-hc-tde { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .xv-hc-tde b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
        .xv-hc-tde span { font-size: 13px; color: #5a6762; }
        .xv-hc-thang { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 4px; }
        .xv-hc-thang b { font-size: 16px; font-weight: 800; }
        .xv-hc-nut-thang { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #eef1f0; color: #17211e; display: flex; align-items: center; justify-content: center; }
        .xv-hc-tuan { display: flex; margin: 6px 0 2px; }
        .xv-hc-tuan span { flex: 1; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #5a6762; }
        .xv-hc-tuan span.cn { color: #b0653a; }
        .xv-hc-luoi { display: grid; grid-template-columns: repeat(7, 1fr); }
        .xv-hc-o { height: 46px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
        .xv-hc-o { position: relative; isolation: isolate; font-size: 15px; font-weight: 600; color: #17211e; }
        .xv-hc-o::before { content: ""; position: absolute; z-index: -1; width: 42px; height: 42px; border-radius: 50%; }
        .xv-hc-o.cn { color: #b0653a; }
        .xv-hc-o.nghi::before { background: #f6f1ec; }
        .xv-hc-o.nay::before { box-shadow: inset 0 0 0 1.5px #20564c; }
        .xv-hc-o.ngoai { color: #b9c4bf; }
        .xv-hc-o.chon { color: #fff; font-weight: 800; }
        .xv-hc-o.chon::before { background: var(--xv-c1, #20564c); }
        .xv-hc-o:disabled { opacity: .35; cursor: default; }
        .xv-hc-o:focus-visible, .xv-hc-dong:focus-visible, #xv-hc-tam .xv-hc-phu:focus-visible, #xv-hc-tam .xv-hc-chinh:focus-visible, .xv-hc-nut-thang:focus-visible { outline: 2px solid var(--xv-c1, #20564c); outline-offset: 2px; }
        .xv-hc-chuthich { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: #5a6762; }
        .xv-hc-chuthich i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #f6f1ec; border: 1px solid #e6d9cd; display: block; }
        .xv-hc-chan { display: flex; gap: 10px; margin-top: 14px; }
        #xv-hc-tam .xv-hc-phu { flex: none; height: 52px; padding: 0 20px; border: 1.5px solid #d5dcd9; border-radius: 14px; background: #fff; color: #17211e; font-size: 15px; font-weight: 700; }
        #xv-hc-tam .xv-hc-phu:disabled { opacity: .4; }
        #xv-hc-tam .xv-hc-chinh { flex: 1; height: 52px; border: 0; border-radius: 14px; background: var(--xv-c1, #20564c); color: #fff; font-size: 16px; font-weight: 800; }
        .xv-hc-ds { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 4px; }
        .xv-hc-nhom { margin-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5a6762; }
        #xv-hc-tam .xv-hc-dong { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px; border: 1.5px solid #e2e7e5; border-radius: 16px; background: #fff; color: #17211e; text-align: left; box-sizing: border-box; }
        #xv-hc-tam .xv-hc-dong.co-mt { min-height: 68px; }
        #xv-hc-tam .xv-hc-dong.chon { border-color: var(--xv-c1, #20564c); background: #e8f3ef; }
        #xv-hc-tam .xv-hc-dong:disabled { opacity: .45; }
        .xv-hc-radio { flex: none; width: 24px; height: 24px; border: 2px solid #b9c4bf; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
        .xv-hc-radio i { width: 12px; height: 12px; border-radius: 50%; background: var(--xv-c1, #20564c); display: none; }
        .xv-hc-dong.chon .xv-hc-radio { border-color: var(--xv-c1, #20564c); }
        .xv-hc-dong.chon .xv-hc-radio i { display: block; }
        .xv-hc-chu { flex: 1; min-width: 0; }
        .xv-hc-chu b { display: block; font-size: 16px; font-weight: 800; }
        .xv-hc-chu small { display: block; margin-top: 2px; font-size: 13px; color: #5a6762; }
        body.dark-mode #xv-hc-tam { background: var(--xv-s1, #14211e); color: #e6f0ed; }
        body.dark-mode .xv-hc-nut-thang, body.dark-mode #xv-hc-tam .xv-hc-phu { background: var(--xv-s4, #1d2f2b); color: #e6f0ed; border-color: var(--xv-s7, #2a403b); }
        body.dark-mode .xv-hc-o { color: #e6f0ed; }
        body.dark-mode .xv-hc-o.ngoai { color: #4f625c; }
        body.dark-mode .xv-hc-o.nghi::before { background: #2a2622; }
        body.dark-mode #xv-hc-tam .xv-hc-dong { background: var(--xv-s1, #14211e); border-color: var(--xv-s7, #2a403b); color: #e6f0ed; }
        body.dark-mode #xv-hc-tam .xv-hc-dong.chon { background: var(--xv-s4, #1d3a33); border-color: #5fd3a3; }
        body.dark-mode .xv-hc-tde span, body.dark-mode .xv-hc-chu small, body.dark-mode .xv-hc-chuthich { color: #9fb8b0; }
        /* Hai ô ở màn đặt tên: biểu tượng lịch / mũi tên thay hình mặc định của trình duyệt */
        @media (max-width: 760px) {
            body.xv-kd2 #studio-proj-start-disp { padding-right: 40px !important; text-align: left !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6762' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; cursor: pointer; }
            body.xv-kd2 #studio-rest-select { -webkit-appearance: none; appearance: none; padding-right: 40px !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6762' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; }
        }
        /* Gói trả phí: hai dòng gói kèm giá niêm yết gạch ngang và mức giảm (dùng chung bảng "Gói của bạn" và hộp nâng cấp theo ngữ cảnh) */
        .xv-goi-ds { display: flex; flex-direction: column; gap: 7px; }
        .xv-goi-hang { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; background: var(--bg-color, #fff); text-align: left; }
        .xv-goi-hang .ten { flex: 1; min-width: 0; }
        .xv-goi-hang .ten b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text-color, #0f172a); }
        .xv-goi-hang .ten small { display: block; margin-top: 1px; font-size: 12px; color: var(--note-color, #475569); }
        .xv-goi-hang .gia { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
        .xv-goi-hang .gia s { font-size: 11.5px; color: #6b7a75; }
        .xv-goi-hang .gia i { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 8px; background: #fdecdc; color: #a94d0c; font-size: 10.5px; font-weight: 800; font-style: normal; text-decoration: none; }
        .xv-goi-hang .gia b { font-size: 13.5px; font-weight: 800; color: var(--text-color, #0f172a); }
        .xv-goi-nhan { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 160px; background: #fdecdc; color: #a94d0c; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
        .xv-sc-goi { display: flex; flex-direction: column; gap: 9px; }
        .xv-goi-nhan.mob { display: none; align-self: flex-start; }
        .xv-sc-goi .xv-sc-dong { font-size: 13.5px; line-height: 1.45; color: var(--note-color, #586b65); }
        #xv-sync-intro-modal .xv-goi-hang { padding: 10px 14px; border: 0; background: color-mix(in srgb, var(--xv-c1, #20564c) 6%, #ffffff); }
        #xv-sync-intro-modal .xv-goi-hang .ten b, #xv-sync-intro-modal .xv-goi-hang .gia b { font-size: 14.5px; }
        body.dark-mode #xv-sync-intro-modal .xv-goi-hang { background: var(--xv-s6, #162a25); }
        .xv-kd-tren, .xv-kd-gd { display: none; }
        @media (max-width: 760px) {
            /* Loại công trình: một hàng duy nhất, vuốt ngang; mép phải mờ dần khi còn chip chưa tới */
            #studio-presets-wrap { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; margin: 0 -20px !important; padding: 2px 20px 4px !important; max-width: none; width: auto; box-sizing: content-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
            #studio-presets-wrap::-webkit-scrollbar { display: none; }
            #studio-presets-wrap .cproj-preset-pill { flex: none; white-space: nowrap; scroll-snap-align: center; }
            #studio-presets-wrap:not([data-het]) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
        }
        .xv-kd-hang-ngay { display: contents; }
        @media (max-width: 760px) {
            /* Màn đặt tên khớp canvas: hàng logo + "Bước 1 / 1", hai ô ngang bằng, danh sách giai đoạn, nút Tạo kế hoạch rộng hết hàng */
            body.xv-kd2 .cproj-studio-left { position: relative; padding-top: 26px !important; }
            body.xv-kd2 .cproj-studio-right { display: none !important; }
            body.xv-kd2 .xv-kd-hang-nut { position: sticky; bottom: 0; z-index: 3; margin: 0 -2px; padding: 12px 2px 14px; background: linear-gradient(rgba(255,255,255,0), #fff 28%); }
            body.dark-mode.xv-kd2 .xv-kd-hang-nut { background: linear-gradient(transparent, var(--xv-s1, #11201b) 28%); }
            body.xv-kd2 .xv-kd-tren { display: block; margin: 8px 0 -8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--xv-c1, #20564c); }
            body.xv-kd2 #studio-pane-1 { gap: 14px !important; }
            body.xv-kd2 #xv-kd-tieude { font-size: 25px; }
            body.xv-kd2 .xv-kd-ph, body.xv-kd2 .xv-kd-nhan-ten, body.xv-kd2 .xv-kd-dong-ma { display: none !important; }
            /* Ô nhập lớn, mã công trình nằm ngay trong ô (thay dòng "Mã tự động" riêng) */
            body.xv-kd2 .xv-kd-o-ten { width: 100% !important; }
            body.xv-kd2 .xv-kd-o-ten > button { display: none !important; }
            body.xv-kd2 #studio-proj-name { height: 58px !important; font-size: 17px !important; font-weight: 700 !important; border-radius: 14px !important; border: 1.5px solid var(--xv-c1, #20564c) !important; padding: 0 104px 0 16px !important; box-shadow: 0 0 0 4px rgba(32, 86, 76, .10); }
            body.xv-kd2 .xv-kd-o-ten #studio-code-display { position: absolute; right: 10px; top: 14px; height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
            body.xv-kd2 #studio-pane-1 > div { max-width: none; }
            body.xv-kd2 .xv-kd-hang-ngay { display: flex; gap: 10px; align-items: flex-start; }
            body.xv-kd2 .xv-kd-hang-ngay > div { flex: 1 1 0; min-width: 0; }
            body.xv-kd2 .xv-kd-o-ngay > div, body.xv-kd2 #studio-rest-wrap select { width: 100% !important; }
            body.xv-kd2 #studio-proj-start-disp, body.xv-kd2 #studio-rest-select { height: 48px !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 12px !important; }
            body.xv-kd2 .xv-kd-gd { display: block; padding: 10px 14px 6px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
            body.xv-kd2 .xv-kd-gd-t { margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3d4a45; }
            body.xv-kd2 .xv-kd-gd-h { display: flex; align-items: center; gap: 12px; min-height: 31px; }
            body.xv-kd2 .xv-kd-gd-h i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #b9c4bf; display: block; }
            body.xv-kd2 .xv-kd-gd-h i.dam { background: var(--xv-c1, #20564c); }
            body.xv-kd2 .xv-kd-gd-h span { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #0f172a; }
            body.xv-kd2 .xv-kd-gd-h small { flex: none; font-size: 12.5px; color: #5a6762; }
            body.xv-kd2 .xv-kd-ghichu-cu { display: none !important; }
            body.xv-kd2 #studio-pane-1 .studio-btn-cta-nav { flex: none !important; width: 100%; justify-content: center; height: 56px !important; min-height: 56px; border-radius: 16px !important; font-size: 17px !important; }
            /* Nút ở đáy cùng hàng lối thoát; "Đăng nhập" lên góc phải cùng hàng logo */
            body.xv-kd2 .xv-kd-hang-nut { flex-direction: column; align-items: stretch; gap: 0; }
            body.xv-kd2 .xv-kd-hang-nut .xv-kd-phu-pc { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 13px; color: #5d6b66; }
            body.xv-kd2 .xv-kd-hang-nut .xv-kd-phu-pc button { padding: 11px 0; font-size: 13px; }
            body.xv-kd2 .xv-kd-hang-nut .xv-kd-phu-pc > span { display: none; }
            body.xv-kd2 .xv-kd-gd-t { display: flex; align-items: center; justify-content: space-between; }
            body.xv-kd2 .xv-kd-gd-sua { margin: -6px -4px -6px 8px; padding: 12px 4px; border: 0; background: transparent; color: var(--xv-c1, #20564c); font: 700 14px 'Be Vietnam Pro', sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
        }
        /* Tờ "Giai đoạn thi công" trượt từ dưới lên (điện thoại): sửa tên, kéo đổi thứ tự, thêm, xóa; bảng kế hoạch phía sau cập nhật ngay */
        .xv-kd-to { position: fixed; inset: 0; z-index: 100060; display: flex; align-items: flex-end; background: rgba(5, 12, 10, .55); }
        .xv-kd-to-hop { width: 100%; max-height: 88vh; overflow-y: auto; box-sizing: border-box; padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 18px); border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); font-family: 'Be Vietnam Pro', sans-serif; color: #0f172a; }
        .xv-kd-to-nam { display: block; width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 99px; background: #dde5e2; }
        .xv-kd-to-dau { display: flex; align-items: baseline; justify-content: space-between; }
        .xv-kd-to-dau b { font-size: 19px; font-weight: 700; }
        .xv-kd-to-dau span, .xv-kd-to-ghi { font-size: 13.5px; color: #586b65; }
        .xv-kd-to-ghi { margin: 2px 0 12px; }
        #xv-kd-to-cho { display: flex; flex-direction: column; }
        .xv-kd-to #studio-stages-list { gap: 6px !important; }
        .xv-kd-to #studio-stages-list input { height: 48px !important; font-size: 16px !important; text-align: left !important; border-radius: 12px !important; border-color: #b6c5c0 !important; }
        .xv-kd-to #studio-add-stage-btn { align-self: stretch !important; justify-content: center; height: 46px; margin-top: 10px; border-radius: 12px; font-size: 15px; }
        .xv-kd-to-xong { width: 100%; height: 54px; margin-top: 14px; border: 0; border-radius: 12px; background: var(--xv-c1, #20564c); color: #fff; font: 700 17px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        body.dark-mode .xv-kd-to-hop { background: var(--xv-s1, #11201b); color: #e6efec; }
        body.dark-mode .xv-kd-to-nam { background: var(--xv-s7, #2f4a44); }
        body.dark-mode .xv-kd-to-dau span, body.dark-mode .xv-kd-to-ghi { color: #a9bfb8; }
        body.dark-mode .xv-kd-to #studio-stages-list input { border-color: var(--xv-s7, #35524b) !important; }
        body.dark-mode .xv-kd-to #studio-add-stage-btn { color: var(--xv-d1-text, #6ee7b7) !important; border-color: var(--xv-s7, #35524b) !important; background: transparent !important; }
        body.dark-mode .xv-kd-to-xong { background: var(--xv-d1, #4fd1a5); color: var(--xv-d1-on, #0d1a16); }
        body.dark-mode.xv-kd2 .xv-kd-gd-sua { color: var(--xv-d1-text, #6ee7b7); }
        body.dark-mode.xv-kd2 .xv-kd-hang-nut .xv-kd-phu-pc { color: #a9bfb8; }
        .xv-kd-bong { position: relative; margin: 10px 0 12px 8px; max-width: 300px; padding: 12px 14px; border-radius: 14px; background: var(--xv-top-a, #112723); color: #fff; font-size: 13.5px; line-height: 1.45; box-shadow: 0 8px 20px rgba(17, 39, 35, .25); }
        .xv-kd-bong::before { content: ""; position: absolute; left: 30px; top: -6px; width: 12px; height: 12px; background: var(--xv-top-a, #112723); transform: rotate(45deg); }
        .xv-kd-bong b { display: block; font-weight: 800; }
        .xv-kd-bong span { display: block; opacity: .85; }
        .xv-kd-bong button { margin-top: 8px; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; background: transparent; color: #fff; font: 700 12.5px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        .login-col-left-body {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 16px;
            width: 100%;
            max-width: 420px;
            margin: auto;
            padding: 16px 0;
        }
        .login-col-left-footer {
            margin-top: 12px;
            padding-top: 14px;
            border-top: 1px solid #f1f5f9;
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-align: center;
            width: 100%;
            max-width: 420px;
            margin-left: auto;
            margin-right: auto;
        }
        .login-col-right {
            flex: 1 1 0;
            min-width: 0;
            height: 100%;
            position: relative;
            overflow: hidden !important;
            background-image: linear-gradient(145deg, #0c231e 0%, #1d5347 62%, #123b33 100%);
            padding: clamp(28px, 4.5vh, 44px) 0 clamp(24px, 3.5vh, 36px) clamp(36px, 4.5vw, 64px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            box-sizing: border-box;
        }
        .login-col-right-inner {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            overflow: hidden;
        }
        .login-benefits-row {
            display: flex;
            align-items: flex-start;
            gap: clamp(24px, 3.5vw, 56px);
            width: 100%;
            padding-right: clamp(36px, 4.5vw, 64px);
            box-sizing: border-box;
        }
        .login-benefit-col {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .login-benefit-title {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.35;
            color: #ffffff;
        }
        .login-benefit-desc {
            font-size: 12px;
            line-height: 1.5;
            color: rgba(214, 240, 232, 0.76);
        }

        /* ================= HIỆU ỨNG VI MÔ MÀN HÌNH ĐĂNG NHẬP (SUBTLE ANIMATIONS) ================= */
        @keyframes loginFadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .login-anim-stagger-1 {
            animation: loginFadeInUp 0.35s ease-out both;
        }
        .login-anim-stagger-2 {
            animation: loginFadeInUp 0.38s ease-out 0.08s both;
        }
        .login-anim-stagger-3 {
            animation: loginFadeInUp 0.40s ease-out 0.16s both;
        }
        .login-anim-stagger-4 {
            animation: loginFadeInUp 0.40s ease-out 0.24s both;
        }

        /* Vi tương tác nút bắt đầu */
        #btn-login-offline svg {
            transition: transform 0.2s ease;
        }
        #btn-login-offline:hover svg {
            transform: translateX(4px);
        }

        /* Vi tương tác ô nhập liệu khi focus */
        #login-username,
        #login-password {
            transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
        }
        /* Hai ô đăng nhập căn trái cho khớp nhãn (trước đây cả chữ gõ vào lẫn gợi ý đều căn giữa) */
        #login-modal-overlay #login-username, #login-modal-overlay #login-password { text-align: left !important; }
        #login-username:focus,
        #login-password:focus {
            border-color: var(--xv-c1, #20564c) !important;
            box-shadow: 0 0 0 3.5px rgba(var(--xv-c1-rgb, 32,86,76), 0.14) !important;
        }

        /* Giảm chuyển động cho người dùng nhạy cảm */
        @media (prefers-reduced-motion: reduce) {
            .login-anim-stagger-1,
            .login-anim-stagger-2,
            .login-anim-stagger-3,
            .login-anim-stagger-4,
            #btn-login-offline svg {
                animation: none !important;
                transition: none !important;
                transform: none !important;
                opacity: 1 !important;
            }
        }

        @media (max-width: 960px) {
            .login-box {
                flex-direction: column !important;
            }
            .login-col-right {
                display: none !important;
            }
            .login-col-left {
                width: 100vw !important;
                max-width: 100vw !important;
                min-width: 0 !important;
                height: 100% !important;
                padding: 32px 24px 24px !important;
            }
        }
        @media (max-width: 760px) {
            #login-modal-overlay {
                padding: 0 !important;
                background: #ffffff !important;
            }
            body.login-screen-mode .login-box,
            .login-box {
                width: 100vw !important;
                max-width: none !important;
                height: 100% !important;
                max-height: none !important;
                min-height: 100svh !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
            }
            body.login-screen-mode .login-col-left,
            .login-col-left {
                padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px)) !important;
            }
        }
        /* Cổng chuyển dự án từ bản miễn phí sang Cloud. Hộp này cố ý không đóng khi bấm ra ngoài:
           người dùng phải chọn rõ "đưa lên Cloud" hoặc "để sau", tránh một cú chạm nhầm khiến
           app âm thầm đổi nguồn dữ liệu đang hiển thị. */
        #cloud-migration-modal-overlay {
            display: none; position: fixed; inset: 0; width: 100%; height: 100%;
            background: rgba(11, 19, 18, 0.82); backdrop-filter: blur(5px); z-index: 10020;
            align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
        }
        #cloud-migration-modal-overlay.open { display: flex !important; }
        .cloud-migration-box {
            width: 440px; max-width: 100%; max-height: 92vh; overflow-y: auto;
            background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color);
            border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.32); box-sizing: border-box;
        }
        .cloud-migration-head {
            padding: 20px 20px 17px; color: #fff;
            background: linear-gradient(135deg, #153f38 0%, #247261 100%);
        }
        .cloud-migration-project {
            margin: 16px 20px 12px; padding: 13px 14px; border-radius: 11px;
            background: var(--highlight); border: 1px solid var(--border-color);
        }
        /* [2026-08-28] Danh sách dự án trên máy, mỗi dòng một ô tick. Trước đây ô này chỉ hiện
           đúng một công trình vì bản miễn phí chỉ giữ được một. */
        .cm-ds-dau {
            display: flex; align-items: center; justify-content: space-between; gap: 8px;
            font-size: 11px; font-weight: 800; color: var(--note-color);
            text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 7px;
        }
        #cloud-migration-quota { text-transform: none; letter-spacing: 0; font-weight: 700; }
        #cloud-migration-quota.het-cho { color: #dc2626; }
        /* Danh sách dài thì cuộn trong ô, không đẩy hai nút bấm xuống dưới màn hình. */
        #cloud-migration-list { max-height: 208px; overflow-y: auto; overscroll-behavior: contain; }
        .cm-muc {
            display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px;
            border-radius: 8px; cursor: pointer; border: 1px solid transparent;
        }
        .cm-muc + .cm-muc { margin-top: 3px; }
        .cm-muc:hover { background: var(--card-bg); border-color: var(--border-color); }
        .cm-muc input { width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 auto; accent-color: #0f9f78; cursor: pointer; }
        .cm-muc input:disabled { cursor: not-allowed; }
        .cm-ten { font-size: 12.5px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
        .cm-phu { font-size: 11px; color: var(--note-color); margin-top: 2px; }

        .cloud-migration-safe {
            margin: 0 20px 14px; padding: 11px 12px; border-radius: 9px;
            background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.35);
            color: var(--text-color); font-size: 11.5px; line-height: 1.55;
        }
        .cloud-migration-actions { display: flex; gap: 9px; padding: 0 20px 20px; }
        .cloud-migration-actions button {
            min-height: 44px; padding: 10px 13px; border-radius: 9px; cursor: pointer;
            font-size: 11.5px; font-weight: 850; font-family: inherit;
        }
        #btn-cloud-migration-upload {
            flex: 1.45; border: 1px solid #08775b; color: #fff;
            background: linear-gradient(135deg, #0f9f78 0%, #08775b 100%);
            box-shadow: 0 4px 12px rgba(15,159,120,0.24);
        }
        #btn-cloud-migration-upload:disabled { opacity: 0.55; cursor: wait; }
        #btn-cloud-migration-later {
            flex: 0.8; border: 1px solid var(--border-color); color: var(--text-color);
            background: var(--bg-color);
        }
        /* [2026-08-28] Lối thoát thứ ba: xoá hẳn bản dưới máy. Cố ý để thành một dòng chữ nhỏ
           riêng bên dưới, KHÔNG phải nút to xếp cạnh hai nút kia — đây là thao tác xoá vĩnh viễn,
           không nên nằm ngang hàng cân đối với hai lựa chọn an toàn, dễ bấm nhầm. */
        .cloud-migration-xoa {
            padding: 0 20px 18px; margin-top: -6px; text-align: center;
        }
        #btn-cloud-migration-xoa {
            min-height: 34px; padding: 6px 12px; border: none; background: none;
            font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
            color: #b91c1c; text-decoration: underline; text-underline-offset: 3px;
            border-radius: 8px;
        }
        #btn-cloud-migration-xoa:hover { background: rgba(220,38,38,0.08); }
        body.dark-mode #btn-cloud-migration-xoa { color: #f87171; }

        #cloud-migration-error {
            display: none; margin: 0 20px 13px; padding: 9px 11px; border-radius: 8px;
            background: rgba(220,38,38,0.10); color: #dc2626; font-size: 11.5px; font-weight: 700;
        }
        @media (max-width: 520px) {
            .cloud-migration-actions { flex-direction: column; }
            #btn-cloud-migration-upload, #btn-cloud-migration-later { width: 100%; }
            /* Vùng chạm 44px trên điện thoại như mọi nút khác */
            #btn-cloud-migration-xoa { min-height: 44px; width: 100%; }
        }
        #btn-login-submit {
            width: 100%;
            height: 50px;
            min-height: 50px;
            box-sizing: border-box;
            border: 1.5px solid var(--xv-c1, #20564c);
            border-radius: 8px;
            background: #ffffff;
            color: var(--xv-c1, #20564c);
            font-family: 'Be Vietnam Pro', sans-serif;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.01em;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }
        #btn-login-submit:hover {
            background: var(--xv-c1, #20564c) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 14px rgba(var(--xv-c1-rgb, 32,86,76), 0.25) !important;
            transform: translateY(-1px);
        }
        #btn-login-offline:hover {
            background: var(--xv-c1-deep, #17423a) !important;
            box-shadow: 0 6px 18px rgba(var(--xv-c1-rgb, 32,86,76), 0.28) !important;
            transform: translateY(-1px);
        }
        /* Offline là lối vào phụ; Đăng nhập Cloud là hành động chính của hộp này. */
        #btn-try-free {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            padding: 13px 14px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            border: 1px solid #0056cc;
            background: linear-gradient(135deg, #0075ff 0%, #0056cc 100%);
            color: #ffffff;
            box-shadow: 0 4px 14px rgba(0,117,255,0.26);
            transition: all 0.2s;
        }
        #btn-try-free:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(0,117,255,0.36); }

        /* Dải phân cách "Đã có tài khoản?" - vạch kẻ hai bên chữ */
        .login-error { color: #ef4444; font-size: 12px; font-weight: bold; margin-top: 10px; text-align: center; display: none; }
        #user-panel-group { display: none; }
        #user-panel-group.show { display: flex; }

        .sync-status { font-size: 11px; font-weight: bold; padding: 3px 8px; border-radius: 4px; margin-left: 6px; }
        .sync-status.online { background: #d1fae5; color: #059669; }
        .sync-status.offline { background: #fee2e2; color: #dc2626; }
        .sync-status.syncing { background: #dbeafe; color: #2563eb; }
        /* [UX-10] Giữ khớp với style inline của chính nút này ở phần thân trang: --brand-blue
           (#0075ff) dưới chữ trắng chỉ đạt 4,21. Nếu sau này ai gỡ style inline đi thì quy tắc
           này vẫn phải cho ra màu đạt chuẩn. */
        #btn-login-header { background: #0060d6; color: #ffffff; border: 1px solid #0060d6; padding: 4px 12px; cursor: pointer; font-size: 11px; font-weight: 800; text-transform: uppercase; border-radius: var(--radius-sm); }
        #btn-login-header:hover { opacity: 0.9; }

        /* DARK MODE LOGIN SPECIFICS */
        body.dark-mode .login-box {
            background-color: var(--xv-s1, #111e1b) !important;
            border-color: var(--xv-s2, #1e332f) !important;
            box-shadow: 0 20px 45px rgba(0,0,0,0.6) !important;
        }

        /* Màn đăng nhập trên điện thoại không còn là một hộp thoại phủ lên app. Khi người dùng
           vừa đăng xuất, họ cần thấy một điểm bắt đầu sạch, không còn thoáng thông tin tài khoản
           cũ phía sau. Bố cục này bám theo màn Login trong Rom-todo Prototype: phần nhận diện ở
           trên, phần thao tác dạng tấm sáng bo góc ở dưới. Bản desktop vẫn giữ nguyên hộp gọn. */
        .login-session-note {
            display: none; margin: 0 0 13px; padding: 9px 11px; border-radius: 9px;
            background: rgba(16,185,129,0.11); border: 1px solid rgba(16,185,129,0.28);
            color: var(--text-color); font-size: 11.5px; font-weight: 650; line-height: 1.45;
        }
        @media (max-width: 760px) {
            body.login-screen-mode { overflow: hidden; }
            body.login-screen-mode #mobile-bottom-nav { display: none !important; }
            body.login-screen-mode #login-modal-overlay {
                align-items: stretch !important; justify-content: stretch !important;
                background: var(--xv-c1-deep, #1c4d44) !important; backdrop-filter: none !important;
                overflow-y: auto !important;
            }
            body.login-screen-mode #login-modal-overlay .login-box {
                width: 100%; max-width: none; min-height: 100svh; margin: 0 !important; padding: 0;
                border: 0; border-radius: 0; box-shadow: none; background: var(--xv-c1-deep, #1c4d44);
                display: flex; flex-direction: column;
            }
            body.dark-mode.login-screen-mode #login-modal-overlay .login-box { background: var(--xv-c1-deep, #1c4d44) !important; }
            #btn-try-free {
                align-items: flex-start; gap: 5px; padding: 15px 16px; border-radius: 14px;
                text-align: left; background: linear-gradient(135deg, #0075ff 0%, #0056cc 100%);
            }
            #btn-login-submit { min-height: 50px !important; border-radius: 8px !important; font-size: 15px !important; }
            .login-session-note { font-size: 11px; }
        }

        /* ================= INSTALL APP PWA MODAL ================= */
        /* ================= INSTALL APP PWA MODAL (CONCEPT MỚI) ================= */
        #install-modal-overlay {
            display: none;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: 100vw !important;
            max-height: 100vh !important;
            background: rgba(11, 19, 18, 0.75) !important;
            backdrop-filter: blur(4px) !important;
            z-index: 99999 !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 16px;
            box-sizing: border-box !important;
        }
        /* Hộp hướng dẫn cài ứng dụng: chỉ hiện thiết bị của khách, mỗi bước một hình; màu hình minh họa theo chế độ sáng/tối qua các biến --inst-* */
        #install-modal-overlay { --inst-art: #f1f6f4; --inst-in: #ffffff; --inst-l2: #b6c5c0; --inst-hot: #d9631a; --inst-bar: #b6c5c0; --inst-pri: var(--xv-c1, #20564c); --inst-on: #ffffff; --inst-seg: #eef3f1; --inst-segon: #ffffff; }
        body.dark-mode #install-modal-overlay { --inst-art: var(--xv-s5, #0e1b18); --inst-in: var(--xv-s6, #162a25); --inst-l2: var(--xv-s7, #35524b); --inst-hot: #fb923c; --inst-bar: var(--xv-s7, #35524b); --inst-pri: var(--xv-d1, #34d399); --inst-on: var(--xv-d1-on, #062a21); --inst-seg: var(--xv-s0, #0c1815); --inst-segon: var(--xv-s4, #1e362f); }
        .inst-box { position: relative; box-sizing: border-box; width: 640px; max-width: 95%; max-height: 94dvh; margin: auto; padding: 26px 30px 22px; display: flex; flex-direction: column; overflow-y: auto; background: var(--card-bg, #ffffff); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); }
        .inst-dong { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--note-color); cursor: pointer; }
        .inst-dau { display: flex; align-items: center; gap: 14px; padding-right: 44px; flex: none; }
        .inst-logo { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--inst-pri); color: var(--inst-on); }
        .inst-dau-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .inst-dau-chu h3 { margin: 0; font: 700 22px/1.25 'Be Vietnam Pro', sans-serif; letter-spacing: -0.01em; color: var(--text-color); }
        .inst-dau-chu span { font-size: 14px; color: var(--note-color); }
        .inst-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 18px 0 0; padding: 4px; border-radius: 14px; background: var(--inst-seg); flex: none; }
        .inst-tab-btn { height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px; background: transparent; color: var(--note-color); font: 600 14.5px 'Be Vietnam Pro', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .inst-tab-btn.active { background: var(--inst-segon); color: var(--text-color); font-weight: 700; box-shadow: 0 1px 3px rgba(17, 39, 35, 0.14); }
        body.dark-mode .inst-tab-btn.active { box-shadow: none; }
        .inst-nhanh { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex: none; }
        .inst-cai-ngay { flex: none; height: 52px; padding: 0 26px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 14px; background: var(--inst-pri); color: var(--inst-on); font: 700 16.5px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        .inst-nhanh > span { font-size: 14px; line-height: 1.45; color: var(--note-color); }
        .inst-hoac { margin-top: 16px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em; color: var(--note-color); flex: none; }
        .inst-hoac span { flex: 1; height: 1px; background: var(--border-color); }
        .inst-than { margin-top: 14px; flex: none; }
        .inst-content-pane { display: none; text-align: left; }
        .inst-content-pane.active { display: grid; gap: 14px; grid-template-columns: repeat(var(--inst-cot, 2), minmax(0, 1fr)); }
        .inst-steps[data-so="2"] { --inst-cot: 2; }
        .inst-steps[data-so="3"] { --inst-cot: 3; }
        .inst-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
        .inst-art { border-radius: 14px; background: var(--inst-art); border: 1px solid var(--border-color); overflow: hidden; line-height: 0; }
        .inst-svg { display: block; width: 100%; height: auto; font-family: 'Be Vietnam Pro', sans-serif; }
        .inst-svg .a-in { fill: var(--inst-in); } .inst-svg .a-ln { stroke: var(--inst-l2); } .inst-svg .a-nofill { fill: none; }
        .inst-svg .a-hot { stroke: var(--inst-hot); fill: none; } .inst-svg .a-hotf { fill: var(--inst-hot); }
        .inst-svg .a-tx { fill: var(--text-color); } .inst-svg .a-txs { stroke: var(--text-color); fill: none; }
        .inst-svg .a-mu { fill: var(--note-color); } .inst-svg .a-mus { stroke: var(--note-color); fill: none; }
        .inst-svg .a-barln { fill: var(--inst-bar); } .inst-svg .a-pri { fill: var(--inst-pri); } .inst-svg .a-on { fill: var(--inst-on); }
        .inst-step-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .inst-step-head { display: flex; align-items: flex-start; gap: 10px; }
        .inst-step-head b { font: 700 15px/1.35 'Be Vietnam Pro', sans-serif; color: var(--text-color); padding-top: 2px; }
        .inst-num { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 99px; background: var(--inst-pri); color: var(--inst-on); font: 700 13px 'Be Vietnam Pro', sans-serif; }
        .inst-step-sub { padding-left: 36px; font: 400 13.5px/1.45 'Be Vietnam Pro', sans-serif; color: var(--note-color); }
        .inst-chan { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 16px; flex: none; }
        .inst-giup { flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--note-color); }
        .inst-giup a { font-weight: 700; color: var(--xv-c1, #20564c); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
        body.dark-mode .inst-giup a { color: var(--xv-d1-text, #6ee7b7); }
        .inst-xong { flex: none; height: 46px; padding: 0 24px; border: 1.5px solid var(--inst-l2); border-radius: 13px; background: transparent; color: var(--text-color); font: 700 15px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        .inst-box.inst-chinh .inst-xong { border: 0; background: var(--inst-pri); color: var(--inst-on); }
        @media (max-width: 560px) {
            #install-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
            .inst-box { width: 100%; max-width: 100%; max-height: 100dvh; padding: 16px 20px 18px; border-radius: 20px 20px 0 0; }
            .inst-dau-chu h3 { font-size: 19px; }
            .inst-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .inst-dau-chu span { font-size: 13px; }
            .inst-nhanh { flex-direction: column; align-items: stretch; gap: 8px; }
            .inst-nhanh > span { text-align: center; font-size: 13px; }
            .inst-cai-ngay { height: 54px; justify-content: center; }
            .inst-content-pane.active { grid-template-columns: minmax(0, 1fr); gap: 12px; }
            .inst-step { flex-direction: row; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--border-color); border-radius: 16px; }
            .inst-art { flex: none; width: 132px; border-radius: 11px; }
            .inst-step-sub { padding-left: 0; font-size: 13px; }
            .inst-chan { flex-direction: column-reverse; align-items: stretch; gap: 6px; border-top: 0; padding-top: 8px; margin-top: 10px; }
            .inst-giup { text-align: center; }
            .inst-xong { height: 54px; font-size: 16.5px; }
        }
        /* ================= PWA SMART INSTALL BANNER ================= */
        #xv-pwa-smart-banner {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9999;
            width: 340px;
            max-width: calc(100vw - 32px);
            background: var(--card-bg, #ffffff);
            border: 1px solid var(--border-color, #e2e8f0);
            border-radius: 16px;
            box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
            padding: 14px 16px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-color, #1e293b);
            animation: xvSlideUpBanner 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        #xv-pwa-smart-banner.hiding {
            opacity: 0;
            transform: translateY(16px);
            pointer-events: none;
        }
        @keyframes xvSlideUpBanner {
            from { opacity: 0; transform: translateY(24px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .xv-pwa-banner-top {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            position: relative;
        }
        .xv-pwa-banner-icon {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            overflow: hidden;
            background: var(--xv-top-a, #112723);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .xv-pwa-banner-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .xv-pwa-banner-content {
            flex: 1;
            min-width: 0;
            padding-right: 20px;
        }
        .xv-pwa-banner-title {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 3px;
            color: inherit;
        }
        .xv-pwa-banner-desc {
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-muted, #64748b);
        }
        .xv-pwa-banner-close {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            color: #94a3b8;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            padding: 0;
            transition: background 0.15s, color 0.15s;
        }
        .xv-pwa-banner-close:hover {
            background: rgba(0, 0, 0, 0.06);
            color: #1e293b;
        }
        .xv-pwa-banner-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 2px;
        }
        .xv-pwa-btn-postpone {
            background: transparent;
            border: 1px solid var(--border-color, #cbd5e1);
            color: var(--text-muted, #64748b);
            font-size: 12px;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .xv-pwa-btn-postpone:hover {
            background: rgba(0, 0, 0, 0.04);
            color: var(--text-color, #1e293b);
        }
        .xv-pwa-btn-install {
            background: #d97706;
            color: #ffffff;
            border: none;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.3px;
            padding: 7px 14px;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
            transition: all 0.15s ease;
        }
        .xv-pwa-btn-install:hover {
            background: #b45309;
            box-shadow: 0 3px 8px rgba(217, 119, 6, 0.45);
        }
        body.dark-mode #xv-pwa-smart-banner {
            background: var(--xv-s1, #111e1b);
            border-color: var(--xv-d1-line, #24574a);
            box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
            color: #f1f5f9;
        }
        body.dark-mode .xv-pwa-banner-desc {
            color: #94a3b8;
        }
        body.dark-mode .xv-pwa-banner-close:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #f1f5f9;
        }
        body.dark-mode .xv-pwa-btn-postpone {
            border-color: #334155;
            color: #94a3b8;
        }
        body.dark-mode .xv-pwa-btn-postpone:hover {
            background: rgba(255, 255, 255, 0.06);
            color: #f1f5f9;
        }
        @media screen and (max-width: 640px) {
            #xv-pwa-smart-banner {
                bottom: 16px;
                left: 12px;
                right: 12px;
                width: auto;
                max-width: none;
            }
        }

        /* ================= CONTEXT MENU & SHORTCUTS MODAL ================= */
        #task-context-menu {
            display: none;
            position: fixed;
            z-index: 10050;
            background: var(--card-bg, #ffffff);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.25);
            min-width: 210px;
            padding: 6px 0;
            color: var(--text-color);
            backdrop-filter: blur(8px);
        }
        #task-context-menu button {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            text-align: left;
            padding: 8px 14px;
            background: none;
            border: none;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--text-color);
            cursor: pointer;
            transition: background 0.15s ease;
        }
        #task-context-menu button:hover {
            background: var(--highlight);
        }

        /* CHECKLIST TIÊU CHÍ KỸ THUẬT (CẤP 3) */
        .chk-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 4px;
            background: var(--brand-primary-light);
            color: var(--brand-primary);
            border: 1px solid var(--brand-primary-border);
            cursor: pointer;
            margin-left: 6px;
            flex-shrink: 0;
            transition: all 0.15s ease;
        }
        .chk-badge:hover {
            background: var(--brand-primary);
            color: #ffffff;
        }
        /* [KHÔI PHỤC 2026-08-24] Dòng selector này bị commit bf66e55 (22/08) xoá mất trong
           khi thân quy tắc vẫn còn nguyên. Hậu quả: khối mồ côi nuốt luôn dòng selector
           .chk-item-row:hover ngay phía dưới làm một selector rác, nên .chk-item-row mất
           CẢ hai quy tắc — đo trên bản chạy thật: 0 quy tắc CSS khớp. Các dòng mục trong
           bảng Checklist mất hết bố cục flex, đệm, viền, nền suốt từ 22/08.
           Phát hiện được nhờ đếm ngoặc trong khối <style> (1301 mở / 1302 đóng). */
        .chk-item-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            border-radius: 6px;
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            transition: all 0.15s ease;
        }
        .chk-item-row:hover {
            border-color: var(--brand-primary);
        }
        .chk-item-text {
            flex: 1;
            font-size: 12px;
            color: var(--text-color);
            outline: none;
        }
        .chk-item-text.done {
            text-decoration: line-through;
            opacity: 0.6;
        }
        #shortcuts-modal-overlay {
            display: none;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: 100vw !important;
            max-height: 100vh !important;
            background: rgba(11, 19, 18, 0.8) !important;
            backdrop-filter: blur(4px) !important;
            z-index: 99999 !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 16px;
            box-sizing: border-box !important;
        }

        .sc-key {
            background: var(--highlight);
            border: 1px solid var(--border-color);
            padding: 3px 7px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-color);
            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        }

        /* ===== HỘP THOẠI TẠO DỰ ÁN — phần "Thông Tin Bổ Sung" tùy chọn (2026-08-19) ===== */
        .cproj-extra-panel {
            display: none; padding: 14px 2px 2px; animation: cprojFadeIn 0.15s ease-out;
        }
        .cproj-extra-panel.open { display: block; }
        @keyframes cprojFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

        /* ===== TÙY CHỌN LỊCH CUỐI TUẦN (THỨ 7 / CHỦ NHẬT) ===== */
        .weekend-half-header {
            background: #f1f5f9 !important;
            color: #2563eb !important;
        }
        .half-morning-cell {
            background: linear-gradient(to right, #ffffff 50%, #f1f5f9 50%) !important;
        }
        /* Bảng Tài khoản & hỗ trợ trên PC: bộ biến màu token chuẩn Romteco Mobile */
        #user-settings-modal-overlay {
            --bg: #eaedec;
            --card: #ffffff;
            --bd: #e2e8f0;
            --bd2: #f1f5f4;
            --tx: #0f1a18;
            --tx2: #3a4a46;
            --mut: #586864;
            --mut2: #5d6e6a;
            --dim: #cfdad7;
            --lab: #3a4a46;
            --danStrong: #b91c1c;
            --zoneL: #dae7e2;
            --zoneR: #ffffff;
            --br: var(--xv-c1, #20564c);
            --brTx: #ffffff;
            --brSoft: var(--xv-c1-soft, #e6f4ef);
            --brLine: var(--xv-c1-line, #a3d9c7);
            --brShadow: 0 8px 20px rgba(var(--xv-c1-rgb, 32,86,76),.28);
            --warn: #a94d0c;
            --warnBg: #fdf1e8;
            --info: #0060d6;
            --infoBg: #e8f2ff;
            --dan: #ee5959;
            --danBg: #fdeaea;
            --track: #eef2f1;
            --zone: #f6f8f7;
            --dark: var(--xv-top-a, #0f1a18);
            --darkTx: #ffffff;
        }
        body.dark-mode #user-settings-modal-overlay {
            --bg: var(--xv-s0, #0b1312);
            --card: var(--xv-s1, #111e1b);
            --bd: var(--xv-s2, #1e332f);
            --bd2: var(--xv-s3, #162523);
            --tx: #f1f5f9;
            --tx2: #cbd5e1;
            --mut: #94a3b8;
            --mut2: #7c8a9c;
            --dim: var(--xv-d1-line, #24574a);
            --lab: #cbd5e1;
            --danStrong: #f87171;
            --zoneL: var(--xv-s5, #101f1c);
            --zoneR: var(--xv-s1, #141f1e);
            --br: var(--xv-d1, #34d399);
            --brTx: var(--xv-d1-on, #062a21);
            --brSoft: var(--xv-d1-soft, rgba(var(--xv-d1-rgb, 52,211,153),.14));
            --brLine: var(--xv-d1-line, #24574a);
            --brShadow: 0 8px 20px rgba(var(--xv-d1-rgb, 52,211,153),.18);
            --warn: #fb923c;
            --warnBg: rgba(251,146,60,.14);
            --info: #22d3ee;
            --infoBg: rgba(34,211,238,.13);
            --dan: #f87171;
            --danBg: rgba(248,113,113,.13);
            --track: var(--xv-s3, #162523);
            --zone: var(--xv-s5, #0e1917);
            --dark: var(--xv-s1, #111e1b);
            --darkTx: var(--xv-d1, #34d399);
        }
        #user-settings-modal-overlay .modal-box {
            background: var(--bg) !important;
            color: var(--tx) !important;
        }
        /* Bảng Tài khoản & hỗ trợ trên PC: ẩn header trùng lặp bên trong vì modal đã có header riêng */
        #us-modal-body .mva-inner-header {
            display: none !important;
        }
        #us-modal-body {
            scrollbar-width: thin;
            scrollbar-color: var(--bd) transparent;
        }
        #us-modal-body::-webkit-scrollbar {
            width: 6px;
        }
        #us-modal-body::-webkit-scrollbar-thumb {
            background: var(--bd);
            border-radius: 3px;
        }

        /* Mobile: giữ nguyên bố cục dọc liền mạch 1 cột */
        .mva-layout-grid {
            display: flex;
            flex-direction: column;
        }
        .mva-col-account {
            display: contents;
        }
        .mva-col-support {
            display: contents;
        }
        .mva-btn-logout {
            order: 99;
        }

        /* Tài khoản & hỗ trợ: phần dùng chung cho màn điện thoại và hộp thoại PC (công tắc, tab phân đoạn, chip, nhãn phiếu). */
        .mva-switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--mut); transition: background .2s; }
        .mva-switch.on { background: var(--br); }
        .mva-switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
        .mva-switch.on .mva-switch-knob { transform: translateX(18px); }
        .mva-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--bd); border-radius: 14px; background: var(--card); }
        .mva-tab { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; background: transparent; color: var(--tx2); font: 600 12px 'Be Vietnam Pro', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .mva-tab.on { background: var(--br); color: var(--brTx); font-weight: 700; }
        .mva-tab-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dan, #ee5959); }
        .mva-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--bd); border-radius: 22px; background: var(--card); color: var(--tx2); font: 600 12px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
        .mva-chip.on { border-color: var(--br); background: var(--brSoft); color: var(--br); }
        .mva-submit:disabled { opacity: .6; cursor: not-allowed; }
        body.dark-mode .mva-pill-new { color: #fca5a5 !important; }
        .mva-sb { display: flex; flex-direction: column; gap: 12px; }
        @media (min-width: 761px) {
            .mva-tab { min-height: 36px; }
            .mva-chip { min-height: 34px; padding: 0 11px; font-size: 11px; }
        }
        /* Chỉ màn điện thoại (#mv-man-account): thẻ biểu mẫu, ô nhập cao 44px, bỏ các lối vào thừa vì đã có tab. */
        #mv-man-account .mva-col-account > section:first-child { margin-top: 0 !important; }
        #mv-man-account .mva-sb-new { padding: 16px; border: 1px solid var(--bd); border-radius: 16px; background: var(--card); gap: 14px; }
        #mv-man-account .mva-hist-link, #mv-man-account .mva-new-bottom { display: none !important; }
        #mv-man-account #mva-support-content { min-height: 104px !important; }
        #mv-man-account [id^="mva-reply-input-"] { min-height: 44px !important; padding: 0 12px !important; border-radius: 12px !important; font-size: 13px !important; }
        #mv-man-account [id^="mva-btn-reply-"] { min-height: 44px !important; padding: 0 16px !important; border-radius: 12px !important; }

        /* Bảng Tài khoản desktop: hai vùng nền độc lập, cùng phủ hết chiều cao phần cuộn. */
        @media (min-width: 761px) {
            #us-modal-body {
                padding: 0 !important;
            }
            #us-modal-body .mva-account-content {
                min-height: 100%;
                padding: 0 !important;
            }
            #us-modal-body .mva-layout-grid {
                display: grid;
                grid-template-columns: 300px minmax(0, 1fr);
                gap: 0;
                align-items: stretch;
                min-height: 100%;
                margin-top: 0;
            }
            #us-modal-body .mva-col-account {
                display: flex;
                flex-direction: column;
                gap: 12px;
                padding: 16px 16px 20px;
                background: var(--zoneL);
                border-right: 1px solid var(--bd);
                box-sizing: border-box;
            }
            #us-modal-body .mva-col-account > section {
                margin-top: 0 !important;
            }
            #us-modal-body .mva-col-support {
                display: flex;
                flex-direction: column;
                min-width: 0;
                padding: 16px 18px 20px;
                background: var(--zoneR);
                box-sizing: border-box;
            }
            #us-modal-body .mva-support-kicker {
                margin: 0 0 7px !important;
                color: var(--lab) !important;
                font-family: 'Be Vietnam Pro', sans-serif !important;
            }
            #us-modal-body .mva-col-support #mva-support-section {
                margin-top: 0 !important;
                padding: 0 !important;
                border: 0 !important;
                border-radius: 0 !important;
                background: transparent !important;
            }
            #us-modal-body .mva-btn-logout {
                order: initial !important;
                margin-top: 4px !important;
                border-color: var(--danStrong) !important;
                background: var(--card) !important;
                color: var(--danStrong) !important;
            }
            #us-modal-body textarea#mva-support-content {
                min-height: 78px !important;
            }
        }

        /* ================= TỐI ƯU MODAL IN & XUẤT HỒ SƠ TIẾN ĐỘ THI CÔNG ================= */
        #print-modal-overlay {
            --pmodal-bg: #ffffff;
            --pmodal-card: #f8fafc;
            --pmodal-card-inner: #ffffff;
            --pmodal-tx: #0f172a;
            --pmodal-tx2: #334155;
            --pmodal-mut: #64748b;
            --pmodal-bd: #e2e8f0;
            --pmodal-bd-subtle: #cbd5e1;
            --pmodal-btn-sub: #f8fafc;
            --pmodal-btn-sub-hover: #f1f5f9;
            --pmodal-active-bg: var(--xv-c1-soft, #e6f4ef);
            --pmodal-active-bd: var(--xv-c1, #20564c);
            --pmodal-active-tx: var(--xv-c1-hover, #17443c);
            --pmodal-active-desc: var(--xv-c1, #20564c);
            --pmodal-summary-tx: #334155;
            --pmodal-close-bg: #f1f5f9;
            --pmodal-close-tx: #475569;
            --pmodal-pill-active-bg: var(--xv-c1, #20564c);
            --pmodal-pill-active-tx: #ffffff;
            --pmodal-pill-sub-bg: #f1f5f9;
            --pmodal-pill-sub-tx: #475569;
            --pmodal-input-bg: #f8fafc;
            --pmodal-acc-header-bg: #f8fafc;
            --pmodal-acc-header-hover: #f1f5f9;
            --pmodal-acc-badge-bg: var(--xv-c1-soft, #e6f4ef);
            --pmodal-acc-badge-tx: var(--xv-c1, #20564c);
            --pmodal-acc-badge-bd: var(--xv-c1-line, #a3d9c7);
            --pmodal-icon-box-bg: var(--xv-c1-soft, #e6f4ef);
            --pmodal-icon-box-bd: var(--xv-c1-line, #a3d9c7);
            --pmodal-icon-box-tx: var(--xv-c1, #20564c);
    --pmodal-accent: var(--xv-c1, #20564c);
            --pmodal-accent-2: var(--xv-c1-deep, #1c4d44);
            --pmodal-on-accent: #ffffff;
        }
        body.dark-mode #print-modal-overlay {
            --pmodal-bg: var(--xv-s1, #111e1b);
            --pmodal-card: var(--xv-s5, #0e1716);
            --pmodal-card-inner: var(--xv-s6, #152220);
            --pmodal-tx: #f1f5f9;
            --pmodal-tx2: #e2e8f0;
            --pmodal-mut: #94a3b8;
            --pmodal-bd: var(--xv-s2, #213532);
            --pmodal-bd-subtle: var(--xv-s7, #2b4540);
            --pmodal-btn-sub: var(--xv-s4, #172825);
            --pmodal-btn-sub-hover: var(--xv-s2, #1e332f);
            --pmodal-active-bg: var(--xv-d1-soft, #122823);
            --pmodal-active-bd: var(--xv-d1, #34d399);
            --pmodal-active-tx: var(--xv-d1-text, #6ee7b7);
            --pmodal-active-desc: var(--xv-d1-text, #a7f3d0);
            --pmodal-summary-tx: var(--xv-d1-text, #6ee7b7);
            --pmodal-close-bg: var(--xv-s4, #172825);
            --pmodal-close-tx: #94a3b8;
            --pmodal-pill-active-bg: var(--xv-d1, #34d399);
            --pmodal-pill-active-tx: var(--xv-d1-on, #062820);
            --pmodal-pill-sub-bg: var(--xv-s2, #1e332f);
            --pmodal-pill-sub-tx: #94a3b8;
            --pmodal-input-bg: var(--xv-s5, #0e1716);
            --pmodal-acc-header-bg: var(--xv-s6, #152220);
            --pmodal-acc-header-hover: var(--xv-s4, #1c2e2a);
            --pmodal-acc-badge-bg: var(--xv-d1-soft, #122823);
            --pmodal-acc-badge-tx: var(--xv-d1-text, #6ee7b7);
            --pmodal-acc-badge-bd: var(--xv-d1-line, #1e4b3f);
            --pmodal-icon-box-bg: var(--xv-d1-soft, #122823);
            --pmodal-icon-box-bd: var(--xv-d1-line, #1e4b3f);
            --pmodal-icon-box-tx: var(--xv-d1, #34d399);
    --pmodal-accent: var(--xv-d1, #34d399);
            --pmodal-accent-2: var(--xv-d1, #34d399);
            --pmodal-on-accent: var(--xv-d1-on, #062a21);
        }

        /* ================= TỐI ƯU MODAL TẠO DỰ ÁN MỚI & XEM TRƯỚC HẠNG MỤC TRÊN PC ================= */
        #create-project-modal-overlay,
        #cproj-sample-tasks-modal {
            --bg: #ffffff;
            --card: #f8fafc;
            --tx: #0f172a;
            --tx2: #334155;
            --mut: #64748b;
            --mut2: #94a3b8;
            --dim: #cbd5e1;
            --bd: #e2e8f0;
            --bd2: #f1f5f9;
            --br: var(--xv-c1, #1e5349);
            --brSoft: #eaf4f1;
            --brLine: #c2e2d9;
            --brTx: #ffffff;
            --dan: #ef4444;
            --warn: #d97706;
            --warnBg: #fef3c7;
        }
        body.dark-mode #create-project-modal-overlay,
        body.dark-mode #cproj-sample-tasks-modal {
            --bg: var(--xv-s5, #0e1716);
            --card: var(--xv-s6, #152220);
            --tx: #e6f1ef;
            --tx2: #b8cec9;
            --mut: #7e9e97;
            --mut2: #54706a;
            --dim: var(--xv-s7, #2b3d39);
            --bd: var(--xv-s2, #213532);
            --bd2: var(--xv-s3, #192825);
            --br: var(--xv-d1, #34d399);
            --brSoft: var(--xv-d1-soft-solid, #122823);
            --brLine: var(--xv-d1-line, #1b4239);
            --brTx: var(--xv-d1-on, #081714);
            --dan: #f87171;
            --warn: #fbbf24;
            --warnBg: #2b2210;
        }

        /* ===== MODAL TẠO DỰ ÁN MỚI — THIẾT KẾ v2 (DESKTOP & MOBILE COMPAT) ===== */
        #create-project-modal-overlay {
            display: none;
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background: rgba(11, 19, 18, 0.72) !important;
            backdrop-filter: blur(4px) !important;
            -webkit-backdrop-filter: blur(4px) !important;
            z-index: 99999 !important;
            justify-content: center !important;
            align-items: center !important;
            padding: 16px;
            box-sizing: border-box !important;
        }
        #create-project-modal-overlay .cproj-modal-box {
            width: 100% !important;
            max-width: 720px !important;
            max-height: 92vh !important;
            background: var(--bg) !important;
            color: var(--tx) !important;
            border-radius: 14px !important;
            border: 1px solid var(--bd) !important;
            box-shadow: 0 24px 48px -16px rgba(8, 20, 17, 0.45) !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            box-sizing: border-box !important;
        }

        /* Header 50px cố định, trung tính */
        #create-project-modal-overlay .cproj-header-v2 {
            flex: none;
            height: 50px;
            min-height: 50px;
            max-height: 50px;
            padding: 0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            border-bottom: 1px solid var(--bd);
            background: var(--bg);
            box-sizing: border-box;
            overflow: hidden;
        }
        #create-project-modal-overlay .cproj-h2-left {
            display: flex;
            align-items: center;
            gap: 9px;
            min-width: 0;
            height: 28px;
        }
        #create-project-modal-overlay .cproj-h2-icon {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            color: var(--tx2);
        }
        /* .modal-box h3 có margin/padding/border-bottom — phải khóa lại kẻo chữ nhảy khỏi hàng 50px. */
        #create-project-modal-overlay .cproj-h2-title {
            display: flex !important;
            align-items: center !important;
            height: 28px !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            font-size: 15px !important;
            font-weight: 800 !important;
            line-height: 1 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            color: var(--tx) !important;
            white-space: nowrap;
        }
        #create-project-modal-overlay .cproj-h2-quota {
            flex: none;
            display: inline-flex;
            align-items: center;
            height: 22px;
            padding: 0 8px;
            border-radius: 999px;
            background: var(--bd2);
            color: var(--tx2);
            font: 700 11px/1 'JetBrains Mono', monospace;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 320px;
            box-sizing: border-box;
        }
        .cproj-h2-close {
            flex: none;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: var(--mut);
            font-size: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }
        .cproj-h2-close:hover {
            background: var(--bd2);
            color: var(--tx);
        }

        /* Thân cuộn v2 */
        #cproj-v2-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            padding: 14px 16px 12px;
            box-sizing: border-box;
            scrollbar-width: thin;
            scrollbar-color: var(--bd) transparent;
        }
        #cproj-v2-body::-webkit-scrollbar { width: 6px; }
        #cproj-v2-body::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }

        /* KHỐI 1: TÊN DỰ ÁN & MÃ DỰ ÁN TỰ ĐỘNG (PHƯƠNG ÁN 1: ĐỐI DIỆN NHÃN) */
        .cproj-name-wrap {
            margin-bottom: 18px;
        }
        .cproj-name-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 7px;
        }
        .cproj-label-hero {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--mut, #64748b);
        }
        .cproj-req {
            color: var(--dan, #dc2626);
            font-weight: 800;
        }
        .cproj-code-badge-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
        }
        .cproj-code-badge-label {
            color: var(--mut, #64748b);
            font-weight: 600;
        }
        .cproj-code-pill {
            display: inline-block;
            padding: 2px 7px;
            border-radius: 6px;
            background: var(--bd2, #f1f5f9);
            border: 1px solid var(--bd, #cbd5e1);
            color: var(--tx, #0f172a);
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .04em;
        }
        .cproj-btn-code-edit {
            background: none;
            border: none;
            padding: 2px 4px;
            color: var(--br, #1c4d44);
            font-family: 'Be Vietnam Pro', sans-serif;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
            transition: color 0.15s ease;
        }
        .cproj-btn-code-edit:hover {
            color: var(--brand-accent, #de7228);
        }
        .cproj-hero-input {
            width: 100%;
            height: 44px;
            padding: 10px 14px;
            box-sizing: border-box;
            border: 1.5px solid var(--bd, #cbd5e1);
            border-radius: 10px;
            background: var(--bg, #ffffff);
            color: var(--tx, #0f172a);
            font-family: 'Be Vietnam Pro', sans-serif;
            font-size: 14.5px;
            font-weight: 600;
            text-align: left !important;
            transition: all 0.18s ease;
        }
        .cproj-hero-input:focus {
            outline: none;
            border-color: var(--br, #1c4d44);
            box-shadow: 0 0 0 3px rgba(28, 77, 68, 0.12);
        }
        .cproj-code-edit-row {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            background: var(--bd2, #f8fafc);
            border: 1px solid var(--bd, #e2e8f0);
        }
        .cproj-label-sub {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: var(--mut, #64748b);
            margin-bottom: 5px;
        }
        .cproj-code-input-wrap {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        .cproj-input-code {
            max-width: 160px;
            height: 34px !important;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
        }
        .cproj-btn-autocode {
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid var(--bd, #cbd5e1);
            background: var(--bg, #fff);
            color: var(--br, #1c4d44);
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .cproj-btn-autocode:hover {
            background: var(--bd2, #f1f5f9);
        }
        .cproj-v2-code-msg {
            font-size: 11px;
            margin-top: 4px;
            font-weight: 600;
            line-height: 1.35;
            color: var(--mut);
        }
        .cproj-v2-code-msg:empty,
        .cproj-v2-code-msg.is-idle {
            margin: 0;
            height: 0;
            overflow: hidden;
        }
        .cproj-subhead {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: var(--mut, #64748b);
            margin-bottom: 8px;
        }
        .cproj-sources-wrapper {
            margin-bottom: 16px;
        }
        .cproj-src-text-wrap {
            min-width: 0;
        }

        /* KHỐI 2: THỜI GIAN & LỊCH THI CÔNG */
        .cproj-schedule-card {
            margin-bottom: 14px;
            padding: 12px 14px 14px;
            border-radius: 12px;
            background: var(--bd2, #f8fafc);
            border: 1px solid var(--bd, #e2e8f0);
            box-sizing: border-box;
        }
        .cproj-card-title {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: var(--tx, #0f172a);
            margin-bottom: 10px;
        }
        .cproj-schedule-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 14px;
            margin-bottom: 12px;
        }
        .cproj-field-col {
            min-width: 0;
        }
        .cproj-label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: var(--mut, #64748b);
            margin-bottom: 5px;
        }
        .cproj-date-picker-box {
            position: relative;
            width: 100%;
            height: 38px;
            padding: 0 12px;
            box-sizing: border-box;
            border: 1px solid var(--bd, #cbd5e1);
            background: var(--bg, #ffffff);
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: border-color 0.15s ease;
        }
        .cproj-date-picker-box:hover {
            border-color: var(--br, #1c4d44);
        }
        .cproj-duration-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }
        .cproj-duration-input {
            width: 100%;
            height: 38px;
            padding: 0 42px 0 12px;
            box-sizing: border-box;
            border: 1px solid var(--bd, #cbd5e1);
            background: var(--bg, #ffffff);
            color: var(--tx, #0f172a);
            border-radius: 8px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            font-weight: 700;
            text-align: left !important;
        }
        .cproj-duration-input:focus {
            outline: none;
            border-color: var(--br, #1c4d44);
        }
        .cproj-duration-unit {
            position: absolute;
            right: 12px;
            font-size: 11px;
            font-weight: 600;
            color: var(--mut, #64748b);
            pointer-events: none;
        }
        .cproj-weekend-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding-top: 10px;
            border-top: 1px dashed var(--bd, #e2e8f0);
        }
        .cproj-weekend-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .cproj-wk-pill {
            padding: 5px 11px;
            border-radius: 999px;
            border: 1px solid var(--bd, #cbd5e1);
            background: var(--bg, #ffffff);
            color: var(--mut, #64748b);
            font-family: 'Be Vietnam Pro', sans-serif;
            font-size: 11px;
            font-weight: 650;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
        }
        .cproj-wk-pill:hover {
            border-color: var(--br, #1c4d44);
            color: var(--tx, #0f172a);
        }
        .cproj-wk-pill.is-selected {
            border-color: var(--br, #1c4d44) !important;
            background: #eaf4f1 !important;
            color: var(--br, #1c4d44) !important;
            font-weight: 750 !important;
            box-shadow: 0 1px 3px rgba(28, 77, 68, 0.12);
        }

        /* KHỐI 3: THÔNG TIN THÊM (ACCORDION GẤP GỌN) */
        .cproj-accordion {
            margin-bottom: 8px;
            border: 1px solid var(--bd, #e2e8f0);
            border-radius: 10px;
            overflow: hidden;
            background: var(--bg, #ffffff);
        }
        .cproj-accordion-btn {
            width: 100%;
            padding: 10px 14px;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            text-align: left;
            transition: background 0.15s ease;
        }
        .cproj-accordion-btn:hover {
            background: var(--bd2, #f8fafc);
        }
        .cproj-acc-icon {
            display: inline-flex;
            color: var(--mut, #64748b);
            transition: transform 0.2s ease;
        }
        .cproj-acc-text {
            flex: 1;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--tx, #0f172a);
        }
        .cproj-acc-badge {
            font-size: 11px;
            font-weight: 600;
            color: var(--mut, #64748b);
            background: var(--bd2, #f1f5f9);
            padding: 2px 7px;
            border-radius: 999px;
        }
        .cproj-extra-panel {
            padding: 10px 14px 14px;
            border-top: 1px solid var(--bd, #e2e8f0);
            background: var(--bd2, #fafafa);
        }
        .cproj-extra-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 14px;
        }
        .cproj-input-sm {
            width: 100%;
            height: 36px;
            padding: 6px 10px;
            box-sizing: border-box;
            border: 1px solid var(--bd, #cbd5e1);
            background: var(--bg, #ffffff);
            color: var(--tx, #0f172a);
            border-radius: 7px;
            font-family: 'Be Vietnam Pro', sans-serif;
            font-size: 12px;
            font-weight: 500;
            transition: border-color 0.15s ease;
        }
        .cproj-input-sm:focus {
            outline: none;
            border-color: var(--br, #1c4d44);
        }
        body.dark-mode .cproj-schedule-card {
            background: rgba(28, 77, 68, 0.12) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        body.dark-mode .cproj-card-title {
            color: #f1f5f9 !important;
        }
        body.dark-mode .cproj-accordion {
            background: rgba(17, 30, 27, 0.6) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        body.dark-mode .cproj-extra-panel {
            background: rgba(17, 30, 27, 0.9) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        body.dark-mode .cproj-wk-pill {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #cbd5e1 !important;
        }
        body.dark-mode .cproj-wk-pill.is-selected {
            background: var(--xv-c1-deep, #1c4d44) !important;
            border-color: var(--xv-d1, #34d399) !important;
            color: var(--xv-d1-text, #6ee7b7) !important;
        }
        @media screen and (max-width: 560px) {
            .cproj-schedule-grid,
            .cproj-extra-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Tầng 2: Ba nút nguồn khởi đầu */
        .cproj-v2-sources-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 8px;
        }
        .cproj-v2-src-btn {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 11px;
            border-radius: 10px;
            cursor: pointer;
            text-align: left;
            min-width: 0;
            transition: all .15s ease;
            box-sizing: border-box;
            border: 1px solid transparent;
        }
        .cproj-v2-src-icon {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 9px;
        }
        .cproj-v2-src-title {
            display: block;
            font-size: 12.5px;
            font-weight: 700;
            white-space: nowrap;
        }
        .cproj-v2-src-sub {
            display: block;
            font-size: 11px;
            font-weight: 500;
            opacity: .72;
            margin-top: 1px;
            white-space: nowrap;
        }

        /* Nút 1: Dự án trống (Xanh lá Pine) */
        .cproj-v2-src-blank {
            border-color: #bcded3;
            background: #eaf4f1;
            color: var(--xv-c1, #1e5349);
        }
        .cproj-v2-src-blank .cproj-v2-src-icon {
            background: var(--xv-c1, #1e5349);
            color: #eaf4f1;
        }
        .cproj-v2-src-blank.is-selected {
            box-shadow: inset 0 0 0 1.5px var(--xv-c1, #1e5349);
        }
        .cproj-v2-src-blank.is-selected .cproj-v2-src-title {
            font-weight: 800;
        }
        body.dark-mode .cproj-v2-src-blank {
            border-color: var(--xv-d1-line, #1f4a3e);
            background: var(--xv-s6, #122823);
            color: var(--xv-d1-text, #6ee7b7);
        }
        body.dark-mode .cproj-v2-src-blank .cproj-v2-src-icon {
            background: var(--xv-d1-text, #6ee7b7);
            color: var(--xv-d1-soft-solid, #122823);
        }
        body.dark-mode .cproj-v2-src-blank.is-selected {
            box-shadow: inset 0 0 0 1.5px #6ee7b7;
        }

        /* Nút 2: Từ mẫu (Tím Indigo) */
        .cproj-v2-src-template {
            border-color: #c9cdf6;
            background: #eef0fd;
            color: #3730a3;
        }
        .cproj-v2-src-template .cproj-v2-src-icon {
            background: #3730a3;
            color: #eef0fd;
        }
        .cproj-v2-src-template.is-selected {
            box-shadow: inset 0 0 0 1.5px #3730a3;
        }
        .cproj-v2-src-template.is-selected .cproj-v2-src-title {
            font-weight: 800;
        }
        body.dark-mode .cproj-v2-src-template {
            border-color: #2f3168;
            background: #1b1c3a;
            color: #a5b4fc;
        }
        body.dark-mode .cproj-v2-src-template .cproj-v2-src-icon {
            background: #a5b4fc;
            color: #1b1c3a;
        }
        body.dark-mode .cproj-v2-src-template.is-selected {
            box-shadow: inset 0 0 0 1.5px #a5b4fc;
        }

        /* Nút 3: Từ file (Cam Ochre) */
        .cproj-v2-src-file {
            border-color: #f3cfae;
            background: #fdf1e7;
            color: #9a3412;
        }
        .cproj-v2-src-file .cproj-v2-src-icon {
            background: #9a3412;
            color: #fdf1e7;
        }
        .cproj-v2-src-file.is-selected {
            box-shadow: inset 0 0 0 1.5px #9a3412;
        }
        .cproj-v2-src-file.is-selected .cproj-v2-src-title {
            font-weight: 800;
        }
        body.dark-mode .cproj-v2-src-file {
            border-color: #5a3418;
            background: #2a1a10;
            color: #fdba74;
        }
        body.dark-mode .cproj-v2-src-file .cproj-v2-src-icon {
            background: #fdba74;
            color: #2a1a10;
        }
        body.dark-mode .cproj-v2-src-file.is-selected {
            box-shadow: inset 0 0 0 1.5px #fdba74;
        }

        /* Khối Kho mẫu v2 */
        .cproj-v2-samples-box {
            margin-top: 10px;
        }
        /* ---- Thư viện mẫu (bước 1) và thẻ tóm tắt mẫu (bước 2) ---- */
        .tl-overlay { position: fixed; inset: 0; z-index: 100100; display: none; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: rgba(17, 39, 35, 0.56); }
        .tl-hop { width: min(1240px, 100%); height: min(808px, 100%); display: flex; flex-direction: column; background: var(--card, #ffffff); color: var(--tx, #17211e); border-radius: 20px; box-shadow: 0 24px 80px rgba(8, 20, 17, 0.35); overflow: hidden; font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
        .tl-dau { display: flex; align-items: center; gap: 16px; height: 76px; padding: 0 24px; border-bottom: 1px solid var(--bd, #e2e7e5); flex: none; box-sizing: border-box; }
        .tl-dau-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
        .tl-tieu-de { font-size: 19px; font-weight: 800; }
        .tl-phu-de { font-size: 13px; color: var(--mut, #5a6762); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tl-tim { flex: none; width: 320px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--bd, #cfd8d4); border-radius: 12px; background: var(--card, #ffffff); color: var(--mut, #7a8781); box-sizing: border-box; }
        .tl-tim input, .tl-tim input:focus, .tl-tim input:focus-visible { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; font-family: inherit; font-size: 14px; color: var(--tx, #17211e); padding: 0; height: 100%; }
        .tl-tim:focus-within { border-color: var(--br, #20564c); }
        .tl-dong { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--bg, #f1f4f3); color: var(--mut, #3d4a45); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
        .tl-than { flex: 1; min-height: 0; display: flex; }
        .tl-rail { width: 236px; flex: none; border-right: 1px solid var(--bd, #e2e7e5); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; box-sizing: border-box; }
        .tl-loai { display: flex; align-items: center; gap: 8px; width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent; color: inherit; font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; flex: none; }
        .tl-loai .tl-dem { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--mut2, #7a8781); }
        .tl-loai.bat { background: var(--brSoft, #e6f0ed); color: var(--br, #20564c); font-weight: 800; }
        .tl-loai.bat .tl-dem { color: var(--br, #20564c); }
        .tl-goiy { margin-top: auto; padding: 12px; border-radius: 12px; background: var(--bg, #eef1f0); font-size: 12.5px; line-height: 1.5; color: var(--mut, #3d4a45); }
        .tl-goiy b { display: block; margin-bottom: 2px; color: var(--tx, #17211e); }
        .tl-luoi { flex: 1; min-width: 0; padding: 20px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; overflow-y: auto; box-sizing: border-box; background: var(--bg, #f6f8f7); }
        .tl-trong { grid-column: 1 / -1; padding: 40px 20px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--mut, #5a6762); }
        .tl-trong button { margin-top: 10px; }
        .tl-the { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--bd, #e2e7e5); border-radius: 16px; background: var(--card, #ffffff); cursor: pointer; box-sizing: border-box; text-align: left; }
        .tl-the:focus-visible { outline: 2px solid var(--br, #20564c); outline-offset: 2px; }
        .tl-the.bat { border: 2px solid var(--br, #20564c); padding: 15px; background: var(--brSoft, #f3f8f6); }
        .tl-the-dau { display: flex; align-items: center; gap: 8px; }
        .tl-chip { flex: none; padding: 3px 9px; border-radius: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--brSoft, #e6f0ed); color: var(--br, #20564c); }
        .tl-chip.cam { background: #fdf1e8; color: #a94d0c; }
        .tl-chip.tim { background: #eeeafc; color: #5b3fc4; }
        .tl-gian { flex: 1; }
        .tl-the-ten { font-size: 16px; font-weight: 700; line-height: 1.3; min-height: 42px; }
        .tl-the-so { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--mut, #5a6762); white-space: nowrap; }
        .tl-dai { display: flex; height: 8px; gap: 2px; border-radius: 4px; background: var(--bd2, #eef1f0); }
        .tl-dai > span { border-radius: 2px; }
        .tl-the-mota { font-size: 13px; line-height: 1.5; color: var(--mut, #5a6762); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .tl-xoa { position: absolute; right: 12px; bottom: 12px; height: 30px; padding: 0 12px; border: 1px solid var(--bd, #cfd8d4); border-radius: 9px; background: var(--card, #ffffff); color: #b42318; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
        .tl-xem { width: 432px; flex: none; border-left: 1px solid var(--bd, #e2e7e5); display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
        .tl-xem-dau { padding: 22px 24px 16px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--bd, #e2e7e5); }
        .tl-nhan { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mut, #5a6762); }
        .tl-xem-ten { font-size: 19px; font-weight: 800; line-height: 1.3; }
        .tl-so4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
        .tl-so4 > div { padding: 10px 12px; border-radius: 12px; background: var(--bg, #f1f4f3); }
        .tl-so4 b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 800; }
        .tl-so4 span { display: block; margin-top: 2px; font-size: 12px; color: var(--mut, #5a6762); }
        .tl-xem-than { flex: 1; min-height: 0; padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
        .tl-xem-than > .tl-nut, .tl-xem-than > .tl-gd, .tl-xem-than > .tl-nua { flex: none; }
        .tl-gd { display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 30px; }
        .tl-gd-ten { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tl-ray { position: relative; height: 10px; border-radius: 5px; background: var(--bd2, #eef1f0); }
        .tl-ray > span { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--br, #20564c); }
        .tl-nua { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--br, #20564c); }
        .tl-nut { height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--bd, #cfd8d4); background: var(--card, #ffffff); color: var(--tx, #17211e); font-family: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-sizing: border-box; }
        .tl-nut.chinh { background: var(--br, #20564c); border-color: var(--br, #20564c); color: #ffffff; font-weight: 800; min-width: 200px; }
        .tl-nut:disabled { background: var(--bd, #e2e7e5); border-color: var(--bd, #e2e7e5); color: #8a9691; cursor: not-allowed; }
        .tl-chan { flex: none; height: 76px; border-top: 1px solid var(--bd, #e2e7e5); display: flex; align-items: center; gap: 14px; padding: 0 24px; box-sizing: border-box; }
        .tl-chon-ten { font-size: 13.5px; color: var(--mut, #5a6762); }
        .tl-chon-ten b { color: var(--tx, #17211e); }
        .tl-tomtat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--bd, #e2e7e5); border-radius: 16px; background: var(--bg, #f6f8f7); }
        .tl-tomtat-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brSoft, #e6f0ed); color: var(--br, #20564c); display: flex; align-items: center; justify-content: center; }
        .tl-tomtat-ten { font-size: 15px; font-weight: 700; line-height: 1.3; }
        .tl-tomtat-so { margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--mut, #5a6762); }
        .tl-doi { flex: none; border: 0; background: transparent; color: var(--br, #20564c); font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; padding: 6px 4px; }
        .tl-ketqua { margin-top: 12px; padding: 16px 18px; border-radius: 16px; background: var(--xv-top-a, #112723); color: #ffffff; display: flex; flex-direction: column; gap: 12px; }
        .tl-ketqua .tl-nhan { color: var(--xv-top-mut, #9fc2b8); }
        .tl-kq3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
        .tl-kq3 b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 800; }
        .tl-kq3 span { display: block; margin-top: 2px; font-size: 12.5px; color: #cfe0da; }
        /* chế độ tối (máy tính không có sẵn các biến màu của điện thoại) */
        body.dark-mode .tl-hop { background: var(--xv-s5, #111c19); color: #e6efec; }
        body.dark-mode .tl-dau, body.dark-mode .tl-rail, body.dark-mode .tl-xem, body.dark-mode .tl-chan, body.dark-mode .tl-xem-dau { border-color: var(--xv-s2, #22332f); }
        body.dark-mode .tl-tim, body.dark-mode .tl-the, body.dark-mode .tl-nut, body.dark-mode .tl-xoa { background: var(--xv-s6, #16241f); border-color: var(--xv-s7, #2a3d38); color: #e6efec; }
        body.dark-mode .tl-luoi { background: var(--xv-s0, #0d1714); }
        body.dark-mode .tl-the.bat, body.dark-mode .tl-loai.bat, body.dark-mode .tl-chip, body.dark-mode .tl-tomtat-icon { background: var(--xv-s4, #173028); color: #8ccbbb; border-color: #3f9482; }
        body.dark-mode .tl-loai.bat { border-color: transparent; }
        body.dark-mode .tl-so4 > div, body.dark-mode .tl-goiy, body.dark-mode .tl-dong, body.dark-mode .tl-tomtat { background: var(--xv-s6, #16241f); border-color: var(--xv-s7, #2a3d38); }
        body.dark-mode .tl-ray, body.dark-mode .tl-dai { background: var(--xv-s4, #22332f); }
        body.dark-mode .tl-phu-de, body.dark-mode .tl-the-mota, body.dark-mode .tl-the-so, body.dark-mode .tl-nhan, body.dark-mode .tl-so4 span, body.dark-mode .tl-chon-ten, body.dark-mode .tl-goiy, body.dark-mode .tl-tomtat-so { color: #9fb3ad; }
        body.dark-mode .tl-chon-ten b, body.dark-mode .tl-goiy b { color: #e6efec; }
        body.dark-mode .tl-nut.chinh { background: #2f7a6b; border-color: #2f7a6b; color: #ffffff; }
        body.dark-mode .tl-nut:disabled { background: var(--xv-s4, #22332f); border-color: var(--xv-s2, #22332f); color: #6f827c; }
        body.dark-mode .tl-tim input { color: #e6efec; }
        body.dark-mode .tl-nua, body.dark-mode .tl-doi { color: #8ccbbb; }
        /* ---- Bảng Tạo dự án mới gọn (v608): bỏ nhãn hạn mức, biểu tượng, chú thích thừa; nguồn khởi đầu thành thanh chọn phẳng ---- */
        #create-project-modal-overlay .cproj-modal-box { max-width: 620px; }
        #create-project-modal-overlay .cproj-h2-icon,
        #create-project-modal-overlay .cproj-h2-quota,
        #create-project-modal-overlay .cproj-subhead,
        #create-project-modal-overlay .cproj-card-title,
        #create-project-modal-overlay .cproj-acc-badge,
        #create-project-modal-overlay .cproj-v2-hint,
        #create-project-modal-overlay .cproj-v2-src-icon,
        #create-project-modal-overlay .cproj-v2-src-sub { display: none !important; }
        #create-project-modal-overlay .cproj-sources-wrapper { margin-bottom: 18px; }
        #create-project-modal-overlay .cproj-v2-sources-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 13px; background: var(--bd2, #eef1f0); }
        #create-project-modal-overlay .cproj-v2-src-btn { height: 42px; padding: 0 8px; border: 0 !important; border-radius: 10px; background: transparent !important; box-shadow: none !important; justify-content: center; gap: 0; }
        #create-project-modal-overlay .cproj-src-text-wrap { display: flex; justify-content: center; text-align: center; }
        #create-project-modal-overlay .cproj-v2-src-btn .cproj-v2-src-title { font-size: 13.5px; font-weight: 700; color: var(--mut, #3d4a45) !important; }
        #create-project-modal-overlay .cproj-v2-src-btn.is-selected { background: var(--card, #ffffff) !important; box-shadow: 0 1px 3px rgba(17, 39, 35, 0.14) !important; }
        #create-project-modal-overlay .cproj-v2-src-btn.is-selected .cproj-v2-src-title { color: var(--br, #20564c) !important; font-weight: 800; }
        #create-project-modal-overlay .cproj-schedule-card { padding: 0 !important; background: transparent !important; border: 0 !important; margin-bottom: 16px; }
        #create-project-modal-overlay .cproj-schedule-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 14px; }
        #create-project-modal-overlay .cproj-label { font-size: 11.5px; }
        #create-project-modal-overlay .cproj-weekend-row { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
        #create-project-modal-overlay .cproj-accordion { margin-bottom: 4px; }
        #create-project-modal-overlay .cproj-v2-footer { justify-content: flex-end; }
        #create-project-modal-overlay .tl-tomtat { margin-top: 12px; }
        #create-project-modal-overlay .tl-ketqua { margin: 4px 0 16px; padding: 14px 16px; gap: 8px; background: var(--brSoft, #eef5f2); color: var(--tx, #17211e); }
        #create-project-modal-overlay .tl-ketqua .tl-nhan { color: var(--br, #20564c); }
        #create-project-modal-overlay .tl-kq3 b { font-size: 18px; color: var(--tx, #17211e); }
        #create-project-modal-overlay .tl-kq3 span { color: var(--mut, #5a6762); }
        body.dark-mode #create-project-modal-overlay .tl-ketqua { background: var(--xv-s4, #173028); }
        body.dark-mode #create-project-modal-overlay .tl-kq3 b { color: #e6efec; }
        body.dark-mode #create-project-modal-overlay .tl-ketqua .tl-nhan { color: #8ccbbb; }
        .cproj-v2-cats-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 0 9px 0;
        }
        .cproj-v2-cat-pill {
            flex: none;
            padding: 5px 11px;
            border-radius: 999px;
            border: 1px solid var(--bd);
            background: var(--bg);
            color: var(--tx2);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: all .15s ease;
        }
        .cproj-v2-cat-pill:hover {
            background: var(--bd2);
            color: var(--tx);
        }
        .cproj-v2-cat-pill.is-active {
            border-color: var(--tx);
            background: var(--tx);
            color: var(--bg);
        }
        body.dark-mode .cproj-v2-cat-pill.is-active {
            border-color: var(--xv-d1, #34d399);
            background: var(--xv-d1, #34d399);
            color: #081714;
        }

        /* Khối Từ file v2 */
        .cproj-v2-file-box {
            margin-top: 10px;
            border: 1px dashed var(--bd);
            border-radius: 11px;
            padding: 13px 14px;
            box-sizing: border-box;
        }
        .cproj-v2-file-desc {
            font-size: 12px;
            line-height: 1.55;
            color: var(--mut);
        }
        .cproj-v2-file-btns {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .cproj-v2-btn-dutoan {
            display: inline-flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 9px;
            border: 1px solid var(--brLine);
            background: var(--brSoft);
            color: var(--br);
            font: 700 11.5px 'Be Vietnam Pro', sans-serif;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.15s ease;
        }
        .cproj-v2-btn-json {
            padding: 8px 12px;
            border-radius: 9px;
            border: 1px solid var(--bd);
            background: var(--bg);
            color: var(--tx2);
            font: 700 11.5px 'Be Vietnam Pro', sans-serif;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s ease;
        }
        .cproj-v2-btn-json:hover {
            background: var(--bd2);
            color: var(--tx);
        }

        /* Tầng 3: Thời gian & Lịch làm việc gấp/mở */
        .cproj-v2-settings-summary {
            font-size: 11px;
            color: var(--tx2);
            font-weight: 600;
        }
        .cproj-v2-settings-chevron {
            flex: none;
            display: inline-flex;
            color: var(--mut);
            transition: transform .18s ease;
        }
        .cproj-v2-settings-chevron.is-open {
            transform: rotate(180deg);
        }
        .cproj-v2-settings-body {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 11px;
        }
        .cproj-v2-date-text {
            font-size: 13px;
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            color: var(--tx);
        }
        .cproj-v2-date-native {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 2;
        }

        /* Thanh hành động neo đáy (Footer) */
        .cproj-v2-footer {
            flex: none;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 12px 16px;
            border-top: 1px solid var(--bd);
            background: var(--bg);
            box-sizing: border-box;
        }
        .cproj-v2-hint {
            flex: 1 1 200px;
            min-width: 0;
            font-size: 11px;
            line-height: 1.45;
            color: var(--mut);
        }
        .cproj-v2-btn-cancel {
            flex: none;
            padding: 10px 16px;
            border-radius: 10px;
            border: 1px solid var(--bd);
            background: var(--bg);
            color: var(--tx2);
            font: 700 12px 'Be Vietnam Pro', sans-serif;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .cproj-v2-btn-cancel:hover {
            background: var(--bd2);
            color: var(--tx);
        }
        .cproj-v2-btn-submit {
            flex: none;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 10px 18px;
            border-radius: 10px;
            border: none;
            background: var(--br);
            color: var(--brTx);
            font: 800 12.5px 'Be Vietnam Pro', sans-serif;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 4px 14px -4px rgba(30, 83, 73, 0.45);
            transition: all 0.15s ease;
        }
        .cproj-v2-btn-submit:disabled {
            background: var(--dim) !important;
            color: var(--bg) !important;
            cursor: not-allowed !important;
            box-shadow: none !important;
        }
        body.dark-mode .cproj-v2-btn-submit:disabled {
            background: var(--xv-s4, #3d5651) !important;
            color: #8fada6 !important;
        }

        /* Chiều cao khung bảng do JS đặt theo vị trí thật trong màn hình. Khai báo không kế thừa:
           biến CSS thường kế thừa xuống mọi ô của bảng, nên mỗi lần đổi (lần cuộn đầu làm thanh
           công cụ thu gọn, đổi cỡ cửa sổ) trình duyệt phải tính lại style cho hàng chục nghìn ô. */
        @property --gantt-table-available-height {
            syntax: '*';
            inherits: false;
        }

        /* ===== HOÀN THIỆN ĐỐI CHIẾU HI-FI GANTT 004 — 07/09/2026 =====
           Khối này đặt cuối stylesheet để thay hẳn các quy tắc Gantt cũ còn có độ ưu tiên
           cao hơn phần triển khai v140. Chỉ áp dụng cho bảng desktop. */
        @media screen and (min-width: 761px) {
            #table-wrapper {
                width: calc(100% - 32px) !important;
                margin-left: 16px;
                margin-right: 16px;
                max-height: var(--gantt-table-available-height, calc(100dvh - 275px)) !important;
                min-height: min(250px, var(--gantt-table-available-height, 250px)) !important;
                border: 1px solid #e5e9ef;
                border-radius: 10px;
                background: #ffffff;
            }
            #table-wrapper::after {
                content: "";
                display: block;
                width: 1px;
                height: 18px;
                pointer-events: none;
            }
            #timeline-table {
                font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                font-size: 12px;
            }
            #timeline-table th,
            #timeline-table td {
                border-color: #eef1f5 !important;
            }
            #timeline-table th.col-week,
            #timeline-table td.week-cell {
                border-top: none !important;
                border-left: none !important;
                border-right: 1px solid #eef1f5 !important;
                border-bottom: 1px solid #eef1f5 !important;
                background-clip: padding-box;
            }
            #timeline-table thead th {
                color: #64748b;
                font-size: 10.5px;
                font-weight: 800;
                line-height: 1.15;
                letter-spacing: .02em;
            }
            #month-header-row > th:not([rowspan]) {
                height: 24px;
                padding: 4px 0;
                font-size: 11px !important;
                letter-spacing: .05em;
            }
            #week-header-row > th {
                padding: 3px 0 !important;
                border-bottom-color: #e5e9ef !important;
            }
            #timeline-table .bang-goi-y {
                display: none !important;
            }
            #timeline-table th.col-task,
            #timeline-table th.col-note,
            #timeline-table th.col-date,
            #timeline-table th.col-days,
            #timeline-table th.col-status {
                padding-left: 2px;
                padding-right: 2px;
            }
            #timeline-table th.col-progress {
                padding: 6px 14px 6px 2px;
                border-right-color: #cfe4dc !important;
                box-shadow: 5px 0 7px -5px rgba(15,23,42,.14) !important;
            }
            #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-progress {
                border-right-color: #cfe4dc !important;
                box-shadow: 5px 0 7px -5px rgba(15,23,42,.10) !important;
            }
            #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-task,
            #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-note,
            #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-date,
            #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-days,
            #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-status,
            #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-progress {
                box-shadow: none;
            }
            #timeline-table tbody tr:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-progress {
                box-shadow: 5px 0 7px -5px rgba(15,23,42,.10) !important;
            }
            #timeline-table .flex-task {
                align-items: flex-start !important;
                gap: 2px !important;
            }
            /* Thu gọn ở cột Phụ thuộc cố định; tên không giữ chỗ cho mũi tên. */
            #timeline-table .main-task .collapse-toggle {
                display: inline-flex;
            }
            #timeline-table .col-dep .collapse-toggle {
                float: none;
                width: 24px;
                height: 24px;
                padding: 0;
                margin: 0;
                align-items: center;
                justify-content: center;
            }
            #timeline-table .collapse-toggle {
                border: 0;
                border-radius: 3px;
                background: transparent;
                color: inherit;
                font-family: inherit;
            }
            #timeline-table .collapse-toggle:focus-visible {
                outline: 2px solid #2563eb;
                outline-offset: -2px;
            }
            #timeline-table .main-task:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-task,
            #timeline-table .sub-task:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-task,
            #timeline-table .milestone-task:not(.drag-over-top):not(.drag-over-bottom):not(.drop-animation) td.col-task {
                box-shadow: none !important;
            }
            #timeline-table tbody td.col-task {
                padding-top: 4px;
                padding-bottom: 4px;
            }
            #timeline-table .main-task td.col-task {
                padding-left: 6px !important;
            }
            #timeline-table .sub-task td.col-task,
            #timeline-table .milestone-task td.col-task {
                padding-left: 16px !important;
            }
            #timeline-table .drag-handle {
                display: none !important;
                position: static;
                height: 24px;
                line-height: 24px;
                transform: none !important;
                width: 24px;
                padding: 0;
                opacity: 1;
                text-align: center;
            }
            body.xv-reorder-mode #timeline-table .drag-handle {
                display: inline-block !important;
            }
            body.xv-reorder-mode #timeline-table .collapse-toggle,
            body.xv-reorder-mode #timeline-table .dep-trigger-btn {
                display: none !important;
            }
            #btn-reorder-tasks[aria-pressed="true"] {
                background: var(--xv-c1, #20564c) !important;
                color: #fff !important;
                border-color: var(--xv-c1, #20564c) !important;
            }
            @media (hover: none) and (pointer: coarse) {
                #btn-reorder-tasks { display: none !important; }
            }
            #timeline-table .task-name-edit {
                padding-right: 0;
                line-height: 1.3;
            }
            #timeline-table .milestone-task .task-name-edit {
                font-weight: 600 !important;
            }
            #timeline-table .milestone-task .task-name-edit::before {
                content: none !important;
            }
            #timeline-table td.col-note {
                vertical-align: middle !important;
                text-align: center !important;
                padding: 0 !important;
            }
            #timeline-table .note-edit {
                color: #64748b;
                font-size: 11.5px !important;
                font-style: normal !important;
                text-align: center !important;
                display: inline-block !important;
                vertical-align: middle !important;
                width: 100% !important;
                min-height: 20px !important;
                line-height: 20px !important;
                padding: 0 4px !important;
                box-sizing: border-box !important;
                border: 1px solid transparent !important;
                border-radius: 0 !important;
                background: transparent !important;
                outline: none !important;
            }
            #timeline-table .note-edit:focus,
            #timeline-table .note-edit:focus-visible {
                outline: none !important;
                outline-offset: 0 !important;
                box-shadow: none !important;
                border: 1px solid var(--brand-primary) !important;
                border-color: var(--brand-primary) !important;
                border-radius: 0 !important;
                background: var(--card-bg, #ffffff) !important;
                background-color: var(--card-bg, #ffffff) !important;
                color: var(--text-color) !important;
                text-align: left !important;
                padding: 2px 8px !important;
                min-height: 26px !important;
                line-height: 20px !important;
                display: block !important;
                width: 100% !important;
                box-sizing: border-box !important;
                margin: 0 !important;
            }
            body.dark-mode #timeline-table .note-edit:focus,
            body.dark-mode #timeline-table .note-edit:focus-visible {
                background: var(--card-bg, var(--xv-s1, #111e1b)) !important;
                background-color: var(--card-bg, var(--xv-s1, #111e1b)) !important;
                border-color: var(--brand-primary) !important;
                color: var(--text-color) !important;
            }
            #timeline-table .display-date,
            #timeline-table .duration-days {
                color: #334155;
                font-size: 11px;
                font-weight: 600;
                font-variant-numeric: tabular-nums;
                background: transparent !important;
                border-color: transparent !important;
                box-shadow: none !important;
            }
            #timeline-table .display-date:focus,
            #timeline-table .duration-days:focus {
                border-color: #94a3b8 !important;
                background: #ffffff !important;
            }
            #timeline-table tr.main-task td.col-status select.status-select {
                display: block !important;
            }
            #timeline-table tr[data-status] .status-select {
                display: block;
                appearance: none;
                -webkit-appearance: none;
                width: 100%;
                height: 21px;
                margin: 0;
                padding: 0 12px 0 14px !important;
                border-radius: 5px !important;
                border: 1px solid transparent !important;
                background-color: var(--status-bg) !important;
                background-image: none !important;
                color: #334155 !important;
                font-size: 10.5px;
                font-weight: 600;
                line-height: 19px;
                text-align: left;
                text-decoration: none !important;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #timeline-table td.col-status::after {
                content: "▾";
                right: 7px;
                font-size: 9px;
            }
            #timeline-table td.col-status::before {
                content: "";
                position: absolute;
                left: 6px;
                top: 50%;
                z-index: 2;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: var(--gantt-bar-color);
                transform: translateY(-50%);
                pointer-events: none;
            }
            #timeline-table .progress-cell-pill {
                width: 100%;
                height: 21px;
                margin: 0;
                border: 0 !important;
                border-radius: 5px;
                background: #f1f5f9 !important;
                box-shadow: none;
            }
            #timeline-table .progress-cell-pill:hover {
                border: 0 !important;
                box-shadow: none;
                transform: none;
            }
            #timeline-table .progress-cell-fill {
                border-radius: 0;
                background: #bfdbfe !important;
            }
            #timeline-table tr[data-status="done"] .progress-cell-fill {
                background: #a7f3d0 !important;
            }
            #timeline-table tr[data-status="delayed"] .progress-cell-fill,
            #timeline-table tr[data-status="overdue"] .progress-cell-fill {
                background: #fed7aa !important;
            }
            #timeline-table .progress-cell-text {
                color: #0f172a;
                font-size: 11px;
                font-weight: 700;
                text-shadow: none;
                font-variant-numeric: tabular-nums;
            }
            #week-header-row th.today-col {
                color: #1d4ed8 !important;
                background: #fbfcfd !important;
                z-index: 22 !important;
            }
            #week-header-row th.today-col .day-num {
                position: relative !important;
                z-index: 12 !important;
                background: #ffffff !important;
                color: #1d4ed8 !important;
                font-weight: 700 !important;
                letter-spacing: -0.25px !important;
                font-variant-numeric: tabular-nums !important;
                padding: 0 3px !important;
                border-radius: 3px !important;
                display: block !important;
                width: fit-content !important;
                margin: 0 auto !important;
                box-shadow: 0 0 0 1px rgba(222, 114, 40, 0.35) !important;
            }
            #week-header-row th.today-col .day-name {
                position: relative !important;
                z-index: 12 !important;
                background: #ffffff !important;
                color: #1d4ed8 !important;
                font-weight: 600 !important;
                letter-spacing: -0.2px !important;
                padding: 0 3px !important;
                border-radius: 3px !important;
                display: block !important;
                width: fit-content !important;
                margin: 0 auto !important;
                box-shadow: 0 0 0 1px rgba(222, 114, 40, 0.35) !important;
            }
            #week-header-row th.weekend-header {
                background: #f1f5f9 !important;
            }
            #week-header-row th.weekend-header .day-num {
                color: #1d4ed8 !important;
                font-weight: 600 !important;
                letter-spacing: -0.25px !important;
                font-variant-numeric: tabular-nums !important;
            }
            #week-header-row th.weekend-header .day-name {
                color: #2563eb !important;
                font-weight: 500 !important;
                letter-spacing: -0.2px !important;
            }
            #timeline-table td.week-cell.weekend-cell,
            #timeline-table td.week-cell.weekend-cell:not(.active-main):not(.active-sub):not(.active-milestone) {
                background: #f1f5f9 !important;
            }
            #timeline-table td.week-cell.today-col {
                background: #ffffff !important;
            }
            #timeline-table tbody tr:hover td.week-cell.weekend-cell {
                background: #ebf1f0 !important;
            }
            body #timeline-table #table-body tr:hover > td.week-cell.weekend-cell {
                background-color: #ebf1f0 !important;
            }
            #timeline-table tbody tr:hover td.week-cell.today-col {
                background: #f5faf8 !important;
            }
            #week-header-row th.weekend-half-header .day-name::after {
                content: "½";
                margin-left: 1px;
                font-weight: 600;
            }
            #week-header-row th.half-morning-header {
                color: #1d4ed8 !important;
            }
            #week-header-row th.half-morning-header .day-num {
                color: #1d4ed8 !important;
                font-weight: 600 !important;
                letter-spacing: -0.25px !important;
                font-variant-numeric: tabular-nums !important;
            }
            #week-header-row th.half-morning-header .day-name {
                color: #2563eb !important;
                font-weight: 500 !important;
                letter-spacing: -0.2px !important;
            }
            #week-header-row th.half-morning-header {
                background: linear-gradient(to right, #fbfcfd 50%, #f1f5f9 50%) !important;
            }
            #timeline-table td.week-cell.half-morning-cell,
            #timeline-table td.week-cell.half-morning-cell.today-col {
                background: linear-gradient(to right, #ffffff 50%, #f1f5f9 50%) !important;
            }
            #timeline-table tbody tr:hover td.week-cell.half-morning-cell,
            #timeline-table tbody tr:hover td.week-cell.half-morning-cell.today-col {
                background: linear-gradient(to right, #f5faf8 50%, #ebf1f0 50%) !important;
            }
            .gantt-inline-label.inside {
                width: calc(var(--gantt-span, 4) * 100% - 12px);
                max-width: none;
            }
            .ms-timeline-label {
                padding: 0 !important;
                border: 0 !important;
                background: transparent !important;
                box-shadow: none !important;
                text-shadow: none !important;
                color: #2563eb !important;
            }
            #table-body tr:hover .task-inline-actions {
                background: #f5faf8 !important;
                box-shadow: -8px 0 9px #f5faf8 !important;
            }
            #table-body tr.main-task:hover .task-inline-actions {
                background: #f2f7f5 !important;
                box-shadow: -8px 0 9px #f2f7f5 !important;
            }
            .task-inline-actions .btn-insert {
                background: #eff6ff;
                color: #1d4ed8;
                border-color: #bfdbfe;
            }
            .task-inline-actions .btn-delete {
                background: #f8fafc;
                color: #475569;
                border-color: #dbe1ea;
            }
            .gantt-style-wrap {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 8px;
                border: 1px solid #e5e9ef;
                border-radius: 6px;
                background: #ffffff;
            }
            .btn-gantt-style {
                height: auto;
                min-height: 25px;
                padding: 4px 8px;
                color: #0f172a;
                background: #ffffff;
                border-color: #e2e8f0;
                font-size: 11px;
                line-height: 1.3;
                letter-spacing: .2px;
            }
            .gantt-style-caption {
                color: #0f172a;
                font-size: 11px;
                letter-spacing: .2px;
            }
            #gantt-style-label {
                max-width: 150px;
                color: #64748b;
                font-size: 11px;
                font-weight: 600;
            }
            .gantt-style-menu {
                left: 76px;
                right: auto;
                width: 288px;
                border-color: #e2e8f0;
            }
            .gantt-style-option {
                grid-template-columns: 54px 1fr 16px;
                gap: 9px;
                min-height: 0;
                padding: 7px 9px;
                color: #0f172a;
                font-size: 11.5px;
                font-weight: 700;
            }
            .gantt-style-menu-title {
                padding: 6px 9px 4px;
                color: #64748b;
                font-size: 9.5px;
                font-weight: 900;
                letter-spacing: .07em;
                text-transform: uppercase;
            }
            .gantt-style-option:hover {
                background: #f8fafc;
            }
            .gantt-style-sample {
                width: 54px;
                height: 12px;
                border: 0 !important;
                background: transparent !important;
            }
            .gantt-style-sample::before {
                content: "";
                position: absolute;
                left: 0;
                top: 2px;
                width: 30px;
                height: 8px;
                border-radius: 4px;
                background: #3b82f6;
                box-sizing: border-box;
            }
            .gantt-style-option[data-style="outline-name"] .gantt-style-sample::before {
                border: 1px solid #3b82f6;
                background: #dbeafe;
            }
            .gantt-style-option[data-style="progress"] .gantt-style-sample::before,
            .gantt-style-option[data-style="progress-dates"] .gantt-style-sample::before {
                border: 1px solid #3b82f6;
                background: linear-gradient(90deg,#3b82f6 0 45%,#dbeafe 45% 100%);
            }
            .gantt-style-option[data-style="dates"] .gantt-style-sample::after,
            .gantt-style-option[data-style="progress-dates"] .gantt-style-sample::after {
                content: "9/9";
                position: absolute;
                left: 33px;
                top: 1px;
                color: #475569;
                font-size: 7.5px;
                font-weight: 700;
            }
            .gantt-legend {
                margin-left: 16px;
                margin-right: 16px;
            }

            body.dark-mode #table-wrapper,
            body.dark-mode #timeline-table {
                background: var(--xv-s1, #111e1b) !important;
                border-color: var(--xv-s2, #1e332f) !important;
            }
            body.dark-mode #timeline-table tr[data-status="pending"] { --gantt-bar-color:#94a3b8; --gantt-bar-soft:rgba(148,163,184,.24); --status-bg:rgba(148,163,184,.13);  }
            body.dark-mode #timeline-table tr[data-status="waiting"] { --gantt-bar-color:#c084fc; --gantt-bar-soft:rgba(192,132,252,.24); --status-bg:rgba(192,132,252,.13);  }
            body.dark-mode #timeline-table tr[data-status="inprogress"] { --gantt-bar-color:#60a5fa; --gantt-bar-soft:rgba(96,165,250,.26); --status-bg:rgba(96,165,250,.14);  }
            body.dark-mode #timeline-table tr[data-status="inspection"] { --gantt-bar-color:#a5b4fc; --gantt-bar-soft:rgba(165,180,252,.24); --status-bg:rgba(165,180,252,.13);  }
            body.dark-mode #timeline-table tr[data-status="delayed"],
            body.dark-mode #timeline-table tr[data-status="overdue"] { --gantt-bar-color:#fb923c; --gantt-bar-soft:rgba(251,146,60,.26); --status-bg:rgba(251,146,60,.13);  }
            body.dark-mode #timeline-table tr[data-status="paused"] { --gantt-bar-color:#8fa0ab; --gantt-bar-soft:rgba(143,160,171,.24); --status-bg:rgba(143,160,171,.12);  }
            body.dark-mode #timeline-table tr[data-status="done"] { --gantt-bar-color:#34d399; --gantt-bar-soft:rgba(52,211,153,.26); --status-bg:rgba(52,211,153,.14);  }
            body.dark-mode #timeline-table tr[data-status="cancelled"] { --gantt-bar-color:#64748b; --gantt-bar-soft:rgba(100,116,139,.22); --status-bg:rgba(100,116,139,.12);  }
            body.dark-mode #timeline-table th,
            body.dark-mode #timeline-table td {
                border-color: var(--xv-s2, #1b2f2b) !important;
            }
            body.dark-mode #week-header-row > th {
                border-bottom-color: var(--xv-s2, #243b37) !important;
            }
            body.dark-mode #month-header-row > th,
            body.dark-mode #week-header-row > th,
            body.dark-mode #timeline-table tr.main-task > td:not(.week-cell) {
                background: var(--xv-s6, #152321) !important;
            }
            body.dark-mode #timeline-table tbody tr.sub-task > td:not(.week-cell),
            body.dark-mode #timeline-table tbody tr.milestone-task > td:not(.week-cell) {
                background: var(--xv-s1, #111e1b) !important;
            }
            body.dark-mode #timeline-table tbody tr:hover > td:not(.week-cell) {
                background: var(--xv-s3, #162723) !important;
            }
            body.dark-mode #timeline-table tbody tr.main-task:hover > td:not(.week-cell) {
                background: var(--xv-s4, #1a2c28) !important;
            }
            body.dark-mode #timeline-table td.week-cell,
            body.dark-mode #timeline-table td.week-cell.today-col {
                background: var(--xv-s1, #111e1b) !important;
            }
            body.dark-mode #timeline-table td.week-cell.weekend-cell,
            body.dark-mode #timeline-table td.week-cell.weekend-cell:not(.active-main):not(.active-sub):not(.active-milestone),
            body.dark-mode #week-header-row th.weekend-header {
                background: var(--xv-s5, #0f1d1a) !important;
            }
            body.dark-mode #timeline-table #table-body tr > td.week-cell.weekend-cell {
                background: var(--xv-s5, #0f1d1a) !important;
            }
            body.dark-mode #timeline-table tbody tr:hover td.week-cell {
                background: var(--xv-s3, #162723) !important;
            }
            body.dark-mode #timeline-table tbody tr:hover td.week-cell.weekend-cell {
                background: var(--xv-s6, #132522) !important;
            }
            body.dark-mode #timeline-table #table-body tr:hover > td.week-cell.weekend-cell {
                background-color: var(--xv-s6, #132522) !important;
            }
            body.dark-mode #week-header-row th.half-morning-header {
                color: #60a5fa !important;
            }
            body.dark-mode #week-header-row th.half-morning-header .day-num,
            body.dark-mode #week-header-row th.half-morning-header .day-name { color: #60a5fa !important; }
            body.dark-mode #week-header-row th.half-morning-header {
                background: linear-gradient(to right, var(--xv-s6, #152321) 50%, var(--xv-s5, #0f1d1a) 50%) !important;
            }
            body.dark-mode #timeline-table td.week-cell.half-morning-cell,
            body.dark-mode #timeline-table td.week-cell.half-morning-cell.today-col {
                background: linear-gradient(to right, var(--xv-s1, #111e1b) 50%, var(--xv-s5, #0f1d1a) 50%) !important;
            }
            body.dark-mode #timeline-table tbody tr:hover td.week-cell.half-morning-cell,
            body.dark-mode #timeline-table tbody tr:hover td.week-cell.half-morning-cell.today-col {
                background: linear-gradient(to right, var(--xv-s3, #162723) 50%, var(--xv-s6, #132522) 50%) !important;
            }
            body.dark-mode #week-header-row th.today-col {
                color: #93c5fd !important;
                background: var(--xv-s6, #152321) !important;
                z-index: 22 !important;
            }
            body.dark-mode #week-header-row th.today-col .day-num {
                background: var(--xv-s6, #152321) !important;
                color: #93c5fd !important;
                font-weight: 700 !important;
                letter-spacing: -0.25px !important;
                font-variant-numeric: tabular-nums !important;
                box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.45) !important;
            }
            body.dark-mode #week-header-row th.today-col .day-name {
                background: var(--xv-s6, #152321) !important;
                color: #93c5fd !important;
                font-weight: 600 !important;
                letter-spacing: -0.2px !important;
                box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.45) !important;
            }
            body.dark-mode #timeline-table th.col-progress,
            body.dark-mode #timeline-table td.col-progress {
                border-right-color: var(--xv-d1-line, #24574a) !important;
                box-shadow: 5px 0 9px -5px rgba(0,0,0,.5) !important;
            }
            body.dark-mode #timeline-table th.col-progress {
                box-shadow: 5px 0 9px -5px rgba(0,0,0,.6) !important;
            }
            body.dark-mode.gantt-resizer-active #timeline-table th.col-progress,
            body.dark-mode.gantt-resizer-active #timeline-table td.col-progress,
            body.dark-mode.gantt-master-resizing #timeline-table th.col-progress,
            body.dark-mode.gantt-master-resizing #timeline-table td.col-progress {
                border-right-color: var(--xv-d1, #34d399) !important;
            }
            body.dark-mode .gantt-master-resizer .master-resizer-dots i {
                background: var(--xv-d1, #34d399);
            }
            body.dark-mode #timeline-table .display-date,
            body.dark-mode #timeline-table .duration-days,
            body.dark-mode #timeline-table .note-edit {
                color: #cbd5e1 !important;
                background: transparent !important;
                border-color: transparent !important;
            }
            body.dark-mode #timeline-table tr[data-status] .status-select {
                color: #cbd5e1 !important;
                background-image: none !important;
                text-decoration: none !important;
            }
            body.dark-mode #timeline-table tr[data-status="pending"] .status-select { background-color:rgba(148,163,184,.13) !important; border:1px solid transparent !important; }
            body.dark-mode #timeline-table tr[data-status="waiting"] .status-select { background-color:rgba(192,132,252,.13) !important; border:1px solid transparent !important; }
            body.dark-mode #timeline-table tr[data-status="inprogress"] .status-select { background-color:rgba(96,165,250,.14) !important; border:1px solid transparent !important; }
            body.dark-mode #timeline-table tr[data-status="inspection"] .status-select { background-color:rgba(165,180,252,.13) !important; border:1px solid transparent !important; }
            body.dark-mode #timeline-table tr[data-status="delayed"] .status-select,
            body.dark-mode #timeline-table tr[data-status="overdue"] .status-select { background-color:rgba(251,146,60,.13) !important; border:1px solid transparent !important; }
            body.dark-mode #timeline-table tr[data-status="paused"] .status-select { background-color:rgba(143,160,171,.12) !important; border:1px solid transparent !important; }
            body.dark-mode #timeline-table tr[data-status="done"] .status-select { background-color:rgba(var(--xv-d1-rgb, 52,211,153),.14) !important; border:1px solid transparent !important; }
            body.dark-mode #timeline-table tr[data-status="cancelled"] .status-select { background-color:rgba(100,116,139,.12) !important; border:1px solid transparent !important; }
            body.dark-mode #timeline-table .progress-cell-pill {
                background: var(--xv-s0, #0d1715) !important;
                border: 0 !important;
            }
            body.dark-mode #timeline-table .progress-cell-fill { background: rgba(96,165,250,.32) !important; }
            body.dark-mode #timeline-table tr[data-status="done"] .progress-cell-fill { background: rgba(var(--xv-d1-rgb, 52,211,153),.34) !important; }
            body.dark-mode #timeline-table tr[data-status="delayed"] .progress-cell-fill,
            body.dark-mode #timeline-table tr[data-status="overdue"] .progress-cell-fill { background: rgba(251,146,60,.32) !important; }
            body.dark-mode #timeline-table .progress-cell-text {
                color: #f1f5f9 !important;
                text-shadow: none !important;
            }
            body.dark-mode .ms-timeline-label {
                color: #93c5fd !important;
                background: transparent !important;
                border: 0 !important;
                text-shadow: none !important;
            }
            body.dark-mode #table-body tr:hover .task-inline-actions {
                background: var(--xv-s3, #162723) !important;
                box-shadow: -8px 0 9px #162723 !important;
            }
            body.dark-mode #table-body tr.main-task:hover .task-inline-actions {
                background: var(--xv-s4, #1a2c28) !important;
                box-shadow: -8px 0 9px #1a2c28 !important;
            }
            body.dark-mode .task-inline-actions .btn-insert {
                background: rgba(96,165,250,.16);
                color: #93c5fd;
                border-color: #28425e;
            }
            body.dark-mode .task-inline-actions .btn-insert:hover {
                background: #3b82f6;
                color: var(--xv-s0, #0b1312);
                border-color: #3b82f6;
            }
            body.dark-mode .task-inline-actions .btn-delete {
                background: var(--xv-s6, #152321);
                color: #cbd5e1;
                border-color: var(--xv-s7, #2b3f3b);
            }
            body.dark-mode .task-inline-actions .btn-delete:hover {
                background: #f87171;
                color: var(--xv-s0, #0b1312);
                border-color: #f87171;
            }
            body.dark-mode .gantt-style-wrap {
                background: var(--xv-s1, #111e1b);
                border-color: var(--xv-s2, #1e332f);
            }
            body.dark-mode .gantt-style-caption { color: #f1f5f9; }
            body.dark-mode #gantt-style-label { color: #94a3b8; }
            body.dark-mode .gantt-style-menu-title { color: #94a3b8; }
        }

        @media screen and (max-width: 760px) {
            #create-project-modal-overlay {
                padding: 0 !important;
            }
            #create-project-modal-overlay .cproj-modal-box {
                max-width: 100vw !important;
                width: 100vw !important;
                height: 100dvh !important;
                max-height: 100dvh !important;
                border-radius: 0 !important;
                border: none !important;
            }
            .cproj-h2-quota {
                display: none !important;
            }
        }

        /* Đồng bộ thanh và nhãn Gantt mới sang bản in/PDF. Khối in cũ dùng ::after
           theo từng ô nên không còn phù hợp với thanh liền .gantt-continuous-bar. */
        @media print {
            #timeline-table td.week-cell::after,
            #timeline-table tr.main-task[data-collapsed="true"] td.week-cell.active-main::after {
                content: none !important;
                display: none !important;
            }

            #timeline-table tr[data-status="pending"] { --gantt-bar-color:#94a3b8; --gantt-bar-soft:#f1f5f9; }
            #timeline-table tr[data-status="waiting"] { --gantt-bar-color:#a855f7; --gantt-bar-soft:#f3e8ff; }
            #timeline-table tr[data-status="inprogress"] { --gantt-bar-color:#3b82f6; --gantt-bar-soft:#dbeafe; }
            #timeline-table tr[data-status="inspection"] { --gantt-bar-color:#6366f1; --gantt-bar-soft:#e0e7ff; }
            #timeline-table tr[data-status="delayed"],
            #timeline-table tr[data-status="overdue"] { --gantt-bar-color:#f97316; --gantt-bar-soft:#ffedd5; }
            #timeline-table tr[data-status="paused"] { --gantt-bar-color:#64748b; --gantt-bar-soft:#e2e8f0; }
            #timeline-table tr[data-status="done"] { --gantt-bar-color:#10b981; --gantt-bar-soft:#d1fae5; }
            #timeline-table tr[data-status="cancelled"] { --gantt-bar-color:#64748b; --gantt-bar-soft:#e2e8f0; }

            #timeline-table .gantt-continuous-bar {
                display: block !important;
                position: absolute !important;
                top: 50% !important;
                left: 2px !important;
                width: calc(var(--gantt-span, 1) * 100% - 4px) !important;
                height: var(--gantt-bar-height, 14px) !important;
                min-height: 12px !important;
                max-height: 18px !important;
                transform: translateY(-50%) !important;
                border: 0 !important;
                border-radius: 5px !important;
                background: var(--gantt-bar-color, #3b82f6) !important;
                box-shadow: none !important;
                overflow: hidden !important;
                z-index: 5 !important;
                box-sizing: border-box !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            #timeline-table[data-gantt-style="outline-name"] {
                --gantt-bar-height: max(18px, var(--gantt-user-bar-height, 14px));
            }
            #timeline-table[data-gantt-style="outline-name"] .gantt-continuous-bar {
                border: 1.5px solid var(--gantt-bar-color) !important;
                background: var(--gantt-bar-soft) !important;
            }
            #timeline-table[data-gantt-style="progress"] .gantt-continuous-bar,
            #timeline-table[data-gantt-style="progress-dates"] .gantt-continuous-bar {
                border: 1.5px solid var(--gantt-bar-color) !important;
                background: linear-gradient(to right,
                    var(--gantt-bar-color) 0 var(--gantt-progress, 0%),
                    var(--gantt-bar-soft) var(--gantt-progress, 0%) 100%) !important;
            }

            #timeline-table .gantt-inline-label {
                display: block !important;
                position: absolute !important;
                top: 50% !important;
                z-index: 7 !important;
                transform: translateY(-50%) !important;
                margin: 0 !important;
                padding: 0 !important;
                color: #334155 !important;
                background: transparent !important;
                border: 0 !important;
                font-size: 8px !important;
                line-height: 1.2 !important;
                font-weight: 700 !important;
                text-align: left !important;
                white-space: nowrap !important;
                overflow: visible !important;
                writing-mode: horizontal-tb !important;
                word-break: normal !important;
                overflow-wrap: normal !important;
                pointer-events: none !important;
            }
            #timeline-table .gantt-inline-label.after {
                left: calc(100% + 4px) !important;
                right: auto !important;
            }
            #timeline-table .gantt-inline-label.before {
                left: auto !important;
                right: calc(100% + 4px) !important;
                text-align: right !important;
            }
            #timeline-table .gantt-inline-label.inside {
                left: 6px !important;
                right: auto !important;
                width: calc(var(--gantt-span, 4) * 100% - 12px) !important;
                max-width: none !important;
                color: #1f2937 !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
        }

        /* Khung điều khiển desktop v2 — theo hồ sơ bàn giao 005. */
        #dashboard-panel,
        #btn-toggle-ribbon { display: none !important; }

        .project-summary-native-date { display: none !important; }
        .project-summary-metrics { display: flex; align-items: center; flex: none; gap: 26px; }
        .project-summary-item { min-width: 74px; }
        .project-summary-label { display: block; margin-bottom: 2px; color: #64748b; font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
        .project-summary-item > strong { color: var(--text-color, #0f172a); font-size: 12px; font-weight: 850; white-space: nowrap; }
        .project-summary-danger strong,
        .project-summary-forecast strong { color: #dc2626; }
        .project-summary-forecast.is-safe strong { color: #059669; }
        .project-summary-progress { min-width: 98px; }
        .project-summary-progress-line { display: flex; align-items: center; gap: 7px; }
        .project-summary-track { display: block; width: 54px; height: 5px; overflow: hidden; border-radius: 999px; background: #dbe4ec; }
        #project-summary-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand-primary, #20564c); }

        #create-project-modal-overlay .cproj-modal-box { max-width: 720px !important; }
        #create-project-modal-overlay.is-editing .cproj-create-only { display: none !important; }

        /* ================= LIVE PROJECT STUDIO (STEP-BY-STEP LIVE WIZARD) ================= */
        #create-project-modal-overlay.cproj-studio-mode .cproj-modal-box {
            max-width: 1040px !important;
            width: 95vw !important;
            height: 620px !important;
            max-height: 90vh !important;
            display: flex !important;
            flex-direction: column !important;
            border-radius: 16px !important;
            overflow: hidden !important;
            box-shadow: 0 25px 50px -12px rgba(16, 28, 24, 0.25) !important;
        }
        .cproj-studio-container {
            display: flex;
            width: 100vw;
            height: 100vh;
            min-height: 100vh;
            max-width: 100vw !important;
            background: #ffffff;
            border: none !important;
            border-radius: 0 !important;
            overflow: hidden;
            box-shadow: none !important;
            margin: 0 !important;
            flex-direction: row;
            font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif !important;
            box-sizing: border-box;
        }
        /* Cột trái: Form điều hướng từng bước phong cách Monday (khoảng 560px) */
        .cproj-studio-left {
            width: 560px !important;
            min-width: 560px !important;
            max-width: 560px !important;
            flex: 0 0 560px !important;
            border-right: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            padding: clamp(84px, 11vh, 116px) clamp(36px, 4vw, 56px) clamp(24px, 3vh, 36px);
            gap: clamp(16px, 2.5vh, 26px);
            box-sizing: border-box;
            position: relative;
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            z-index: 2;
        }
        .cproj-studio-left::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
        @media (max-height: 820px) and (min-height: 721px) {
            .cproj-studio-left {
                padding-top: 68px !important;
                gap: 14px !important;
            }
        }
        @media (max-height: 720px) {
            .cproj-studio-left {
                padding: 50px 36px 16px !important;
                gap: 10px !important;
            }
            .cproj-studio-step-pane {
                gap: 10px !important;
            }
            .cproj-studio-left h1,
            .cproj-studio-left h2 {
                font-size: 20px !important;
            }
            .cproj-hero-input,
            #studio-proj-start-disp {
                height: 38px !important;
            }
        }
        body.dark-mode .cproj-studio-left {
            background: var(--xv-s1, #11201b);
            border-right-color: var(--xv-s2, #1f362e);
        }
        .cproj-studio-step-pane {
            display: none;
            flex: 1 1 auto;
            flex-direction: column;
            padding: 0;
            box-sizing: border-box;
            gap: clamp(14px, 2.5vh, 26px);
        }
        .cproj-studio-step-pane.is-active {
            display: flex;
        }

        /* Dải thanh Step Indicator chuẩn Desktop.dc.html */

        .cproj-studio-left h1,
        .cproj-studio-left h2 {
            font-size: 20px !important;
            font-weight: 800 !important;
            letter-spacing: -0.3px !important;
            line-height: 1.3 !important;
            color: #101c18 !important;
            text-transform: none !important;
            text-align: left !important;
            margin: 0 !important;
        }
        body.dark-mode .cproj-studio-left h1,
        body.dark-mode .cproj-studio-left h2 {
            color: #f1f5f9 !important;
        }

        /* Bước 2: Presets dạng Pill chuẩn Steps23.dc.html */
        .cproj-preset-pill {
            padding: 6px 14px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 160px;
            border: 1.5px solid #cbd5e1;
            background: #ffffff;
            color: #0f172a;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
            box-sizing: border-box;
        }
        .cproj-preset-pill:hover {
            border-color: #94a3b8;
            background: #f8fafc;
        }
        .cproj-preset-pill.is-active {
            background: var(--xv-c1, #20564c);
            border-color: var(--xv-c1, #20564c);
            color: #ffffff;
            font-weight: 700;
        }
        body.dark-mode .cproj-preset-pill {
            background: var(--xv-s3, #172a24);
            border-color: var(--xv-s7, #274138);
            color: #cbd5e1;
        }
        body.dark-mode .cproj-preset-pill.is-active {
            background: var(--xv-d1, #10b981);
            border-color: var(--xv-d1, #10b981);
            color: var(--xv-d1-on, #0d1a16);
        }

        /* Danh sách giai đoạn có STT 1,2,3 font JetBrains Mono */
        .cproj-stage-row {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        /* Nút và icon cho Bước 0 Studio (Bắt đầu công trình đầu tiên) */
        .studio-pane0-btn-main {
            width: 100%; min-height: 48px; border: 1.5px solid var(--xv-c1, #20564c); border-radius: 12px;
            background: var(--xv-c1, #20564c); color: #ffffff; cursor: pointer;
            font: 800 12.5px 'Be Vietnam Pro', sans-serif; letter-spacing: .03em;
            box-shadow: 0 4px 14px rgba(var(--xv-c1-rgb, 32,86,76), 0.2);
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.15s ease;
            box-sizing: border-box;
        }
        .studio-pane0-btn-main:hover {
            background: #163d36;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(var(--xv-c1-rgb, 32,86,76), 0.3);
        }
        body.dark-mode .studio-pane0-btn-main {
            background: var(--xv-d1, #10b981);
            border-color: var(--xv-d1, #10b981);
            color: var(--xv-d1-on, #0d1a16);
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
        }
        body.dark-mode .studio-pane0-btn-main:hover {
            background: var(--xv-d1, #34d399);
            border-color: var(--xv-d1, #34d399);
        }
        .studio-pane0-btn-sec {
            width: 100%; min-height: 44px; border: 1.5px solid #cbd5e1; border-radius: 12px;
            background: #ffffff; color: #101c18; cursor: pointer;
            font: 700 12px 'Be Vietnam Pro', sans-serif;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.15s ease;
            box-sizing: border-box;
        }
        .studio-pane0-btn-sec:hover {
            background: #f8fafc;
            border-color: #94a3b8;
            transform: translateY(-1px);
        }
        body.dark-mode .studio-pane0-btn-sec {
            background: var(--xv-s6, #142420);
            border-color: var(--xv-s2, #233c34);
            color: var(--xv-c1-soft, #e6f4ef);
        }
        body.dark-mode .studio-pane0-btn-sec:hover {
            background: var(--xv-s4, #1b302b);
            border-color: var(--xv-s7, #35584d);
        }
        body.dark-mode #studio-pane-0 .studio-pane0-icon {
            border-color: var(--xv-d1-line, #235245) !important;
            background: var(--xv-s3, #142823) !important;
            color: #4ade80 !important;
        }

        /* Bước 0 Studio: Bám sát 100% thiết kế Trang chủ Chưa có dự án */
        .cproj-studio-container.is-step-0 {
            background: #eaedec !important;
        }
        .cproj-studio-container.is-step-0 .cproj-studio-right {
            display: none !important;
        }
        .cproj-studio-container.is-step-0 .cproj-studio-left {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            flex: 1 1 auto !important;
            min-height: 100vh !important;
            border-right: none !important;
            border-bottom: none !important;
            background: #eaedec !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            padding: clamp(24px, 5vh, 48px) 20px !important;
            box-sizing: border-box !important;
        }
        .cproj-studio-container.is-step-0 .cproj-studio-left > img {
            display: none !important;
        }
        .cproj-studio-container.is-step-0 #studio-pane-0 {
            max-width: 360px !important;
            width: 100% !important;
            margin: 0 auto !important;
            padding: 0 !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
        }
        body.dark-mode .cproj-studio-container.is-step-0,
        body.dark-mode .cproj-studio-container.is-step-0 .cproj-studio-left {
            background: #0f172a !important;
        }
        body.dark-mode .studio-pane0-btn-sec {
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #f1f5f4 !important;
        }
        /* Ẩn #empty-project-state khi đang mở màn hình con mobile (Thư viện mẫu, Nhập mã) */
        body.empty-project-mode.mv-subscreen-active #empty-project-state {
            display: none !important;
        }
        /* Trên mobile, ẩn #empty-project-state ở Bước 0 để hiển thị trọn vẹn màn TC4 Trang chủ Chưa có dự án */
        @media (max-width: 760px) {
            body.empty-project-mode.studio-step-0 #empty-project-state {
                display: none !important;
            }
        }
        /* Đảm bảo các modal tạo dự án và nhập mã luôn nằm trên #empty-project-state */
        #create-project-modal-overlay,
        #redeem-invite-modal-overlay,
        #import-template-modal-overlay {
            z-index: 100050 !important;
        }

        /* Card bật/tắt cột ở Bước 4 Studio */
        .studio-col-toggle-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 9px;
            cursor: pointer;
            text-align: left;
            transition: all 0.15s ease;
            width: 100%;
            box-sizing: border-box;
            font-family: inherit;
        }
        .studio-col-toggle-card:hover {
            border-color: var(--xv-c1, #20564c) !important;
            box-shadow: 0 2px 8px rgba(var(--xv-c1-rgb, 32,86,76), 0.08);
        }
        body.dark-mode .studio-col-toggle-card {
            background: var(--xv-s3, #162822) !important;
            border-color: var(--xv-s7, #2e4d43) !important;
        }
        /* CSS Drag & Drop và Nút di chuyển sắp xếp hàng Studio Màn 2 & Màn 3 */
        .studio-drag-handle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 28px;
            cursor: grab;
            color: #94a3b8;
            border-radius: 4px;
            flex-shrink: 0;
            transition: color 0.15s ease, background 0.15s ease;
            user-select: none;
            -webkit-user-select: none;
        }
        .studio-drag-handle:hover {
            color: #475569;
            background: #f1f5f9;
        }
        .studio-drag-handle:active {
            cursor: grabbing;
        }
        body.dark-mode .studio-drag-handle {
            color: #64748b;
        }
        body.dark-mode .studio-drag-handle:hover {
            color: #cbd5e1;
            background: var(--xv-s4, #1e362d);
        }
        .studio-drag-row {
            transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
        }
        .studio-drag-row.is-dragging {
            opacity: 0.45;
            background: #f0fdf4 !important;
            border-color: var(--xv-c1, #20564c) !important;
            border-style: dashed !important;
        }
        .studio-drag-row.drag-over-top {
            border-top: 2.5px solid var(--xv-c1, #20564c) !important;
        }
        .studio-drag-row.drag-over-bottom {
            border-bottom: 2.5px solid var(--xv-c1, #20564c) !important;
        }
        .studio-move-btn {
            width: 20px;
            height: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
            border-radius: 3px;
            background: #ffffff;
            color: #64748b;
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
            transition: all 0.15s ease;
        }
        .studio-move-btn:hover:not(:disabled) {
            background: #f8fafc;
            color: var(--xv-c1, #20564c);
            border-color: #cbd5e1;
        }
        .studio-move-btn:disabled {
            opacity: 0.25;
            cursor: not-allowed;
            border-color: #f1f5f9;
            color: #cbd5e1;
        }
        body.dark-mode .studio-move-btn {
            background: var(--xv-s3, #162822);
            border-color: var(--xv-s7, #2e4d43);
            color: #94a3b8;
        }
        body.dark-mode .studio-move-btn:hover:not(:disabled) {
            background: var(--xv-s4, #1e362d);
            color: var(--xv-d1, #34d399);
            border-color: var(--xv-d1, #34d399);
        }
        body.dark-mode .studio-move-btn:disabled {
            border-color: var(--xv-s2, #1e362d);
            color: #475569;
        }

        /* CỘT PHẢI: LIVE PREVIEW CANVAS RỘNG RÃI PHONG CÁCH MONDAY & XONG VIỆC */
        .cproj-studio-right {
            flex: 1 1 auto;
            min-width: 0;
            background: #eef0f5;
            padding: 48px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: auto;
            height: 100vh;
            position: relative;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        .cproj-studio-right::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .cproj-studio-right::-webkit-scrollbar-track {
            background: transparent;
        }
        .cproj-studio-right::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 4px;
        }
        .cproj-studio-right::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8;
        }
        body.dark-mode .cproj-studio-right {
            background: var(--xv-s0, #0b1512);
            scrollbar-color: var(--xv-s4, #243d34) transparent;
        }
        body.dark-mode .cproj-studio-right::-webkit-scrollbar-thumb {
            background-color: var(--xv-s4, #243d34);
        }
        .cproj-pv-box {
            background: #ffffff;
            border-radius: 16px;
            box-shadow: rgba(15, 23, 42, 0.06) 0px 4px 28px 0px;
            padding: 28px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            width: 1242px;
            min-width: 1242px;
            flex: none;
            height: auto;
            margin-top: 32px;
            margin-bottom: 48px;
            overflow: visible;
            position: relative;
        }
        body.dark-mode .cproj-pv-box {
            background: var(--xv-s6, #142420);
            border: 1px solid var(--xv-s2, #233c34);
            box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 28px 0px;
        }
        .cproj-pv-title {
            font-size: 18px !important;
            font-weight: 800 !important;
            letter-spacing: -0.3px;
            color: #0f172a;
            margin: 0 0 4px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cproj-pv-title.is-placeholder {
            background: #fef9c3 !important;
            color: #854d0e !important;
            padding: 3px 10px !important;
            border-radius: 6px !important;
            display: inline-block !important;
            width: fit-content !important;
            border: 1px dashed #facc15 !important;
            font-style: italic !important;
            font-weight: 700 !important;
            transition: all 0.2s ease !important;
        }
        body.dark-mode .cproj-pv-title {
            color: #f1f5f9;
        }
        body.dark-mode .cproj-pv-title.is-placeholder {
            background: #362d08 !important;
            color: #fef08a !important;
            border-color: #713f12 !important;
        }
        #studio-proj-name::placeholder {
            color: #94a3b8 !important;
            font-weight: 400 !important;
        }

        /* ================= HIỆU ỨNG VI MÔ LIVE PROJECT STUDIO ================= */
        @keyframes studioSlideInNext {
            from {
                opacity: 0;
                transform: translateX(12px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes studioSlideInPrev {
            from {
                opacity: 0;
                transform: translateX(-12px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .studio-pane-anim-next {
            animation: studioSlideInNext 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        .studio-pane-anim-prev {
            animation: studioSlideInPrev 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* Nảy nhẹ mã dự án tự sinh */
        @keyframes studioCodePop {
            0% { transform: scale(1); }
            50% { transform: scale(1.08); background: #d1fae5; border-color: #34d399; }
            100% { transform: scale(1); }
        }
        .studio-code-pop {
            animation: studioCodePop 0.22s ease-out;
        }

        /* Hàng mới thêm trong danh sách giai đoạn hoặc việc con */
        @keyframes studioItemFadeSlideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .studio-item-new {
            animation: studioItemFadeSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* Vi tương tác ô nhập liệu Studio khi focus */
        #studio-proj-name,
        #studio-proj-start-disp {
            transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
        }
        #studio-proj-name:focus,
        #studio-proj-start-disp:focus {
            border-color: var(--xv-c1, #20564c) !important;
            box-shadow: 0 0 0 3.5px rgba(var(--xv-c1-rgb, 32,86,76), 0.14) !important;
        }

        /* Vi tương tác các nút Presets */
        .cproj-preset-pill {
            transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .cproj-preset-pill:hover:not(.is-active) {
            border-color: var(--xv-c1, #20564c) !important;
            color: var(--xv-c1, #20564c) !important;
            background: #f0fdf4 !important;
            transform: translateY(-1px);
        }
        .cproj-preset-pill:active {
            transform: scale(0.96);
        }

        /* Nút thêm giai đoạn nét đứt */
        .studio-btn-add-stage-dashed {
            transition: all 0.18s ease !important;
        }
        .studio-btn-add-stage-dashed:hover {
            border-color: var(--xv-c1, #20564c) !important;
            background: #f0fdf4 !important;
            transform: translateY(-1px);
        }
        .studio-btn-add-stage-dashed svg {
            transition: transform 0.18s ease;
        }
        .studio-btn-add-stage-dashed:hover svg {
            transform: scale(1.18);
        }

        /* Nút thêm việc & thêm mốc ở Màn 3 */
        .studio-btn-add-task-dashed {
            transition: all 0.18s ease !important;
        }
        .studio-btn-add-task-dashed:hover {
            border-color: var(--xv-c1, #20564c) !important;
            background: #f0fdf4 !important;
            transform: translateY(-1px);
        }
        .studio-btn-add-task-dashed svg {
            transition: transform 0.18s ease;
        }
        .studio-btn-add-task-dashed:hover svg {
            transform: scale(1.18);
        }

        .studio-btn-add-ms-dashed {
            transition: all 0.18s ease !important;
        }
        .studio-btn-add-ms-dashed:hover {
            border-color: #2563eb !important;
            background: #eff6ff !important;
            transform: translateY(-1px);
        }
        .studio-btn-add-ms-dashed .studio-ms-diamond {
            display: inline-block;
            transition: transform 0.2s ease;
        }
        .studio-btn-add-ms-dashed:hover .studio-ms-diamond {
            transform: rotate(15deg) scale(1.2);
        }

        /* Nút điều hướng Tiếp tục và Mở bảng tiến độ */
        .studio-btn-cta-nav {
            transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
        }
        .studio-btn-cta-nav:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(var(--xv-c1-rgb, 32,86,76), 0.3) !important;
        }
        .studio-btn-cta-nav svg {
            transition: transform 0.2s ease;
        }
        .studio-btn-cta-nav:hover svg {
            transform: translateX(4px);
        }

        /* Nút Quay lại */
        .studio-btn-back-nav {
            transition: all 0.15s ease !important;
        }
        .studio-btn-back-nav:hover {
            background: #f8fafc !important;
            border-color: #94a3b8 !important;
            color: #0f172a !important;
            transform: translateY(-1px);
        }
        .studio-btn-back-nav svg {
            transition: transform 0.2s ease;
        }
        .studio-btn-back-nav:hover svg {
            transform: translateX(-3px);
        }

        /* Thanh Gantt bar trong Live Preview co giãn mượt mà */
        .cproj-dc-gantt-bar {
            transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1), width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        /* Khung viền cam định vị khu chức năng nổi bật trên bảng Preview Studio (Màn 2, 3, 4) */
        .studio-focus-box {
            position: absolute;
            pointer-events: none;
            border: 2.5px solid #de7228 !important;
            box-shadow: 0 0 0 4px rgba(222, 114, 40, 0.25), inset 0 0 0 1px rgba(222, 114, 40, 0.15) !important;
            border-radius: 6px !important;
            z-index: 20 !important;
            transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                        top 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                        width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                        height 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.2s ease !important;
            box-sizing: border-box !important;
        }

        /* Hỗ trợ reduced motion cho Studio */
        @media (prefers-reduced-motion: reduce) {
            .studio-pane-anim-next,
            .studio-pane-anim-prev,
            .studio-code-pop,
            .studio-item-new,
            .studio-focus-box,
            .studio-btn-cta-nav,
            .studio-btn-cta-nav svg,
            .studio-btn-back-nav,
            .studio-btn-back-nav svg,
            .studio-btn-add-stage-dashed,
            .studio-btn-add-stage-dashed svg,
            .studio-btn-add-task-dashed,
            .studio-btn-add-task-dashed svg,
            .studio-btn-add-ms-dashed,
            .studio-btn-add-ms-dashed .studio-ms-diamond,
            .cproj-dc-gantt-bar {
                animation: none !important;
                transition: none !important;
                transform: none !important;
            }
        }

        /* KHUNG BẢNG TIMELINE CHUẨN XONG VIỆC (Desktop.dc.html) */
        .cproj-dc-table-wrap {
            width: 1186.2px;
            min-width: 1186.2px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
            flex: none;
            height: auto;
            background: #ffffff;
        }
        body.dark-mode .cproj-dc-table-wrap {
            border-color: var(--xv-s2, #243d34);
            background: var(--xv-s5, #111e1a);
        }
        .cproj-dc-table-inner {
            position: relative;
            width: 1186.2px;
            display: flex;
            flex-direction: column;
        }

        /* Thước Tháng (Month Ruler) */
        .cproj-dc-month-row {
            display: flex;
            height: 24px;
            background: #fbfcfd;
            border-bottom: 1px solid #e5e9ef;
            flex-shrink: 0;
        }
        body.dark-mode .cproj-dc-month-row {
            background: var(--xv-s3, #162822);
            border-bottom-color: var(--xv-s2, #243d34);
        }
        .cproj-dc-month-col {
            flex-shrink: 0;
            box-sizing: border-box;
            border-left: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            font-weight: 500;
        }
        body.dark-mode .cproj-dc-month-col {
            border-left-color: var(--xv-s2, #243d34);
            color: #94a3b8;
        }

        /* Header Cột Bảng (Columns Row) */
        .cproj-dc-cols-row {
            display: flex;
            height: 34px;
            background: #fbfcfd;
            border-bottom: 1px solid #e5e9ef;
            flex-shrink: 0;
        }
        body.dark-mode .cproj-dc-cols-row {
            background: var(--xv-s3, #162822);
            border-bottom-color: var(--xv-s2, #243d34);
        }
        .cproj-dc-th-col {
            flex-shrink: 0;
            box-sizing: border-box;
            border-right: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
        }
        body.dark-mode .cproj-dc-th-col {
            border-right-color: var(--xv-s2, #243d34);
            color: #94a3b8;
        }

        /* Dải Timeline Thước Ngày (Timeline Day Scale) */
        /* [2026-09-19] Hinh hoc timeline xem truoc tinh theo bien, khong con hang so 6,6px.
           --st-days: so ngay lich cua ca du an; --st-sun: chi so ngay Chu nhat dau tien;
           --st-today: chi so ngay hom nay; --st-tick: buoc nhan ngay. JS dat cac bien nay
           tren .cproj-dc-table-inner moi lan ve lai. Nho vay luoi ngay, dai cuoi tuan, vach
           hom nay va thanh Gantt luon khop nhau du du an dai ngan the nao. */
        .cproj-dc-table-inner {
            --st-days: 92;
            --st-sun: 1;
            --st-today: 0;
            --st-tick: 5;
            --st-dw: 6.6px;
        }
        .cproj-dc-timeline-track,
        .cproj-dc-month-track {
            flex-grow: 1;
            min-width: calc(var(--st-dw) * var(--st-days));
        }
        .cproj-dc-month-track { display: flex; }
        .cproj-dc-timeline-track {
            position: relative;
            background-image:
                repeating-linear-gradient(to right,
                    transparent 0 calc(100% * var(--st-sun) / var(--st-days)),
                    #f8fafc calc(100% * var(--st-sun) / var(--st-days)) calc(100% * (var(--st-sun) + 1) / var(--st-days)),
                    transparent calc(100% * (var(--st-sun) + 1) / var(--st-days)) calc(100% * 7 / var(--st-days))),
                repeating-linear-gradient(to right, #e2e8f0 0 1px, transparent 1px calc(100% / var(--st-days)));
        }
        body.dark-mode .cproj-dc-timeline-track {
            background-image:
                repeating-linear-gradient(to right,
                    transparent 0 calc(100% * var(--st-sun) / var(--st-days)),
                    var(--xv-s1, #13221e) calc(100% * var(--st-sun) / var(--st-days)) calc(100% * (var(--st-sun) + 1) / var(--st-days)),
                    transparent calc(100% * (var(--st-sun) + 1) / var(--st-days)) calc(100% * 7 / var(--st-days))),
                repeating-linear-gradient(to right, var(--xv-s4, #243d34) 0 1px, transparent 1px calc(100% / var(--st-days)));
        }
        .cproj-dc-day-tick {
            position: absolute;
            top: 4px;
            width: calc(100% * var(--st-tick) / var(--st-days));
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1.15;
        }
        .cproj-dc-day-num { font-size: 11px; font-weight: 800; color: #64748b; }
        .cproj-dc-day-name { font-size: 8px; color: #64748b; opacity: 0.75; }
        body.dark-mode .cproj-dc-day-num, body.dark-mode .cproj-dc-day-name { color: #94a3b8; }

        /* Vạch Hôm Nay cam #de7228 */
        .cproj-dc-today-band {
            position: absolute;
            left: calc(100% * var(--st-today) / var(--st-days));
            top: 0;
            bottom: 0;
            width: calc(100% / var(--st-days));
            background: #fff7ed;
        }
        .cproj-dc-today-line {
            position: absolute;
            left: calc(100% * (var(--st-today) + 0.5) / var(--st-days));
            margin-left: -1px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #de7228;
        }
        /* Hom nay nam ngoai khoang du an thi khong ve vach nao ca */
        .cproj-dc-table-inner.st-no-today .cproj-dc-today-band,
        .cproj-dc-table-inner.st-no-today .cproj-dc-today-line { display: none; }
        body.dark-mode .cproj-dc-today-band { background: rgba(222, 114, 40, 0.15); }

        /* Hàng dữ liệu (Task Row) */
        .cproj-dc-row {
            display: flex;
            height: 34px;
            background: #ffffff;
            border-bottom: 1px solid #eef1f5;
            flex-shrink: 0;
            align-items: stretch;
        }
        body.dark-mode .cproj-dc-row {
            background: var(--xv-s6, #142420);
            border-bottom-color: var(--xv-s2, #1f342d);
        }
        .cproj-dc-row-stage {
            background-color: #f8fafc !important;
            border-top: 1.5px solid #e2e8f0;
            border-bottom: 1.5px solid #e2e8f0;
        }
        body.dark-mode .cproj-dc-row-stage {
            background-color: var(--xv-s6, #142420) !important;
            border-top-color: var(--xv-s2, #243d34);
            border-bottom-color: var(--xv-s2, #243d34);
        }
        .cproj-dc-stage-title {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            font-size: 11px;
            color: #0f172a;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .cproj-dc-stage-title {
            color: #f1f5f9;
        }
        body.dark-mode .cproj-studio-left img[src*="logo-xongviec-nen-sang"] {
            filter: brightness(0) invert(1);
        }
        .cproj-dc-cell {
            flex-shrink: 0;
            box-sizing: border-box;
            border-right: 1px solid #eef1f5;
            display: flex;
            align-items: center;
            font-size: 11px;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
        }
        body.dark-mode .cproj-dc-cell {
            border-right-color: var(--xv-s2, #1f342d);
            color: #e2e8f0;
        }
        .cproj-dc-cell-task { width: 200px; padding: 0 10px; justify-content: flex-start; }
        .cproj-dc-cell-chk { width: 44px; justify-content: center; }
        .cproj-dc-cell-start { width: 58px; justify-content: center; }
        .cproj-dc-cell-days { width: 40px; justify-content: center; }
        .cproj-dc-cell-end { width: 58px; justify-content: center; }

        /* Skeleton placeholder (ở Bước 1) */
        .cproj-dc-skel-bar {
            height: 8px;
            border-radius: 4px;
            background: #e8ebf0;
        }
        body.dark-mode .cproj-dc-skel-bar {
            background: var(--xv-s4, #243d34);
        }
        .cproj-dc-skel-status {
            width: 68px;
            height: 18px;
            border-radius: 5px;
            background: #e8ebf0;
        }
        body.dark-mode .cproj-dc-skel-status {
            background: var(--xv-s4, #243d34);
        }

        /* Thanh Gantt Bar chuẩn Steps23.dc.html */
        .cproj-dc-gantt-bar {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 20px;
            border-radius: 6px;
            background: #94a3b8;
            box-shadow: 0 2px 5px rgba(148, 163, 184, 0.35);
            transition: all 0.15s ease;
        }
        body.dark-mode .cproj-dc-gantt-bar {
            background: #475569;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
        }

        /* Badge Trạng Thái Chưa Làm */
        .cproj-dc-status-pending {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 21px;
            padding: 0 10px;
            box-sizing: border-box;
            border-radius: 5px;
            border: 1px solid #e2e8f0;
            background-color: #f8fafc;
            background-image: radial-gradient(circle at 5px 50%, #94a3b8 0 3px, transparent 3.5px);
            color: #334155;
            font-size: 11px;
            font-weight: 600;
        }
        body.dark-mode .cproj-dc-status-pending {
            background-color: var(--xv-s3, #172a24);
            border-color: var(--xv-s2, #243d34);
            color: #cbd5e1;
        }

        /* Chân bảng + Thêm hạng mục */
        .cproj-dc-table-footer {
            display: flex;
            width: 1186.2px;
            min-width: 1186.2px;
            height: 32px;
            background: #ffffff;
            align-items: center;
            padding-left: 46px;
            font-size: 11.5px;
            color: #94a3b8;
            border: 1px solid #e2e8f0;
            border-top: none;
            border-radius: 0 0 10px 10px;
            margin-top: -1px;
            flex-shrink: 0;
            cursor: pointer;
            box-sizing: border-box;
        }
        body.dark-mode .cproj-dc-table-footer {
            background: var(--xv-s6, #142420);
            border-color: var(--xv-s2, #243d34);
            color: #64748b;
        }


        /* Xem trước dạng thẻ (điện thoại) và câu chữ theo khổ: mặc định ẩn, chỉ hiện ở khổ ≤920px */
        .studio-pv-cards,
        .studio-only-mob {
            display: none;
        }

        @media (max-width: 920px) {
            /* Khung wizard là `position: fixed` phủ kín màn hình và luật gốc (dòng ~230) đặt `overflow: hidden !important`
               + `height: 100vh !important` + xếp hàng ngang. Luật `overflow-y: auto` không !important cũ nên không có tác
               dụng: nội dung dài hơn màn hình (form + thẻ xem trước) bị cắt và không vuốt được. Cho chính khung này cuộn
               dọc, xếp khối để khối bên trong cao theo nội dung thay vì bị kéo bằng chiều cao màn hình. */
            body.empty-project-mode #empty-project-state {
                display: block !important;
                height: auto !important;
                min-height: 100vh;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
            body.empty-project-mode.studio-step-0 #empty-project-state {
                display: none !important;
            }
            .cproj-studio-container {
                flex-direction: column;
                height: auto !important;
                min-height: 100%;
                overflow: visible !important;
            }
            /* Cột form: luật gốc đặt `flex: 0 0 560px !important`. Khi xếp dọc, flex-basis chính là CHIỀU CAO, nên
               `flex: none` (không !important) không gỡ nổi: cột bị ghim cao 560px, cuộn bên trong và thanh
               Quay lại / Tiếp tục nằm ngoài tầm nhìn. Lề hai bên 20px như bản vẽ (trước là 36px + 20px = 56px). */
            .cproj-studio-left {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                flex: 0 0 auto !important;
                border-right: none;
                border-bottom: 1px solid var(--bd, #e2e8f0);
                height: auto;
                padding-left: 20px !important;
                padding-right: 20px !important;
            }
            .cproj-studio-step-pane {
                padding: 24px 0 24px !important;
            }
            .cproj-studio-right {
                width: 100% !important;
                flex: none;
                height: auto;
                min-height: 0;
                padding: 20px 16px 28px !important;
                overflow-x: hidden;
            }
            /* Bảng Gantt rộng 1.242px không vừa 390px: ẩn bảng, hiện các thẻ */
            .cproj-pv-box {
                width: 100%;
                min-width: 0;
                margin: 0;
                padding: 0;
                background: transparent;
                border: none;
                box-shadow: none;
            }
            body.dark-mode .cproj-pv-box {
                background: transparent;
                border: none;
                box-shadow: none;
            }
            .studio-pv-desk {
                display: none !important;
            }
            .studio-pv-cards {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            .studio-only-desk {
                display: none;
            }
            .studio-only-mob {
                display: inline;
            }
            .studio-pvc-head {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                gap: 10px;
                padding: 0 2px;
            }
            .studio-pvc-label {
                font: 800 12px 'Be Vietnam Pro', sans-serif;
                letter-spacing: 0.08em;
                color: #64748b;
            }
            .studio-pvc-hint {
                font: 400 12px 'Be Vietnam Pro', sans-serif;
                color: #64748b;
                text-align: right;
            }
            .studio-pvc-project,
            .studio-pvc-card {
                background: #ffffff;
                border: 1px solid #e2e8f0;
                border-radius: 14px;
                padding: 14px 16px;
            }
            .studio-pvc-project {
                display: flex;
                flex-direction: column;
                gap: 3px;
            }
            .studio-pvc-project .cproj-pv-title {
                font-size: 18px !important;
            }
            .studio-pvc-meta {
                font: 400 13px/1.45 'Be Vietnam Pro', sans-serif;
                color: #475569;
            }
            .studio-pvc-card {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            .studio-pvc-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
            }
            .studio-pvc-name {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font: 700 16px 'Be Vietnam Pro', sans-serif;
                color: #0f172a;
            }
            .studio-pvc-chip {
                flex: none;
                padding: 4px 10px;
                border-radius: 8px;
                background: #f1f5f9;
                color: #475569;
                font: 700 12.5px 'Be Vietnam Pro', sans-serif;
            }
            .studio-pvc-bar {
                flex: 1;
                height: 8px;
                border-radius: 4px;
                background: #eef1f5;
            }
            .studio-pvc-date {
                flex: none;
                font: 700 13px 'Be Vietnam Pro', sans-serif;
                color: #0f172a;
                font-variant-numeric: tabular-nums;
            }
            .studio-pvc-more {
                text-align: center;
                font: 400 13px 'Be Vietnam Pro', sans-serif;
                color: #64748b;
            }
            /* Việc / mốc của giai đoạn đầu (từ bước 3) */
            .studio-pvc-children {
                display: flex;
                flex-direction: column;
                gap: 9px;
                margin-top: 2px;
                padding-top: 12px;
                border-top: 1px solid #eef1f5;
            }
            .studio-pvc-child {
                display: flex;
                align-items: center;
                gap: 10px;
                min-width: 0;
            }
            .studio-pvc-kind {
                flex: none;
                width: 14px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .studio-pvc-kind.is-task {
                height: 8px;
                border-radius: 3px;
                background: #94a3b8;
            }
            .studio-pvc-kind.is-ms {
                color: #2563eb;
                font-size: 13px;
                line-height: 1;
            }
            .studio-pvc-cname {
                flex: 1;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font: 500 14px 'Be Vietnam Pro', sans-serif;
                color: #0f172a;
            }
            .studio-pvc-cname.is-ms {
                font-style: italic;
                color: #1e3a8a;
            }
            .studio-pvc-cdate {
                flex: none;
                font: 600 12.5px 'Be Vietnam Pro', sans-serif;
                color: #475569;
                font-variant-numeric: tabular-nums;
            }
            body.dark-mode .studio-pvc-children {
                border-top-color: var(--xv-s2, #233c34);
            }
            body.dark-mode .studio-pvc-cname {
                color: var(--xv-c1-soft, #e6f4ef);
            }
            body.dark-mode .studio-pvc-cname.is-ms {
                color: #93c5fd;
            }
            body.dark-mode .studio-pvc-cdate {
                color: #8fa9a0;
            }
            /* Bước giai đoạn: bỏ cột số thứ tự và hai nút mũi tên lên/xuống để ô tên rộng ra (đổi thứ tự bằng cách kéo tay nắm ⋮⋮) */
            .studio-stage-num,
            .studio-stage-move {
                display: none !important;
            }
            /* Thanh điều hướng: nút không xuống dòng, gọn lại cho vừa 350px */
            .studio-btn-back-nav,
            .studio-btn-cta-nav {
                white-space: nowrap;
                flex-shrink: 0;
            }
            .cproj-studio-step-pane .studio-btn-back-nav {
                padding-left: 14px !important;
                padding-right: 16px !important;
                gap: 6px !important;
            }
            .cproj-studio-step-pane .studio-btn-cta-nav {
                padding-left: 18px !important;
                padding-right: 16px !important;
                gap: 6px !important;
            }
            body.dark-mode .studio-pvc-project,
            body.dark-mode .studio-pvc-card {
                background: var(--xv-s6, #142420);
                border-color: var(--xv-s2, #233c34);
            }
            body.dark-mode .studio-pvc-name,
            body.dark-mode .studio-pvc-date {
                color: var(--xv-c1-soft, #e6f4ef);
            }
            body.dark-mode .studio-pvc-meta,
            body.dark-mode .studio-pvc-hint,
            body.dark-mode .studio-pvc-label,
            body.dark-mode .studio-pvc-more {
                color: #8fa9a0;
            }
            body.dark-mode .studio-pvc-chip {
                background: var(--xv-s4, #1c322c);
                color: #b7cdc5;
            }
            body.dark-mode .studio-pvc-bar {
                background: var(--xv-s4, #1c322c);
            }
        }
        #rename-project-modal-overlay {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        @media screen and (min-width: 761px) {
            #khoi-ten-cong-trinh { display: flex !important; align-items: center; gap: 24px; min-height: 58px; margin: 0 !important; padding: 9px 16px !important; border: 0 !important; border-bottom: 1px solid var(--border-color, #e2e8f0) !important; border-radius: 0 !important; background: var(--card-bg, #fff) !important; box-shadow: none !important; }
            body.cp-thu-gon #khoi-ten-cong-trinh { min-height: 0 !important; }
            #khoi-ten-cong-trinh .project-header-titles { flex: 1; min-width: 0; }
            #project-title { margin: 0 !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 900 !important; }
            #project-info { margin: 2px 0 0 !important; font-size: 11.5px !important; line-height: 1.25 !important; font-weight: 600 !important; }
            .control-panel { display: flex !important; align-items: center !important; justify-content: space-between; gap: 8px !important; min-height: 40px; margin: 0 !important; padding: 3px 16px !important; border: 0 !important; border-bottom: 1px solid var(--border-color, #dbe4ec) !important; border-radius: 0 !important; background: var(--card-bg, #fff) !important; box-shadow: 0 2px 8px rgba(15,23,42,.045) !important; }
            .control-panel .cp-cluster { gap: 6px !important; }
            .toolbar-view-capsule { display: flex; align-items: center; gap: 5px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
            .gantt-style-wrap { gap: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
            .btn-gantt-style { height: 30px !important; min-height: 30px !important; }
            #gantt-style-label { display: none !important; }
            .toolbar-view-capsule .btn-khungnhin-trigger,
            .toolbar-view-capsule .btn-gantt-style { color: var(--text-color, #0f172a) !important; }
            .btn-today-inline { height: 30px !important; padding: 0 9px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #334155 !important; font-size: 11px !important; font-weight: 850 !important; }
            .btn-today-inline:hover { background: #f1f5f9 !important; }
            .btn-today-inline svg { color: var(--today-line-color, #de7228); }
            .kn-range-control { --kn-range-ratio: .35; position: relative; width: 104px; height: 22px; flex: 0 0 104px; cursor: ew-resize; touch-action: none; outline: 0; }
            .kn-range-fill { position: absolute; left: 1px; right: 1px; top: 8px; height: 6px; border-radius: 999px; background: linear-gradient(90deg,#2f76e8 0 calc(var(--kn-range-ratio) * 100%),#dce5ed calc(var(--kn-range-ratio) * 100%) 100%); }
            .kn-range-ticks { position: absolute; inset: 0; pointer-events: none; }
            .kn-range-tick { position: absolute; top: -1px; width: 1px; height: 8px; background: rgba(255,255,255,.72); transform: translateX(-.5px); }
            .kn-range-handle { position: absolute; left: calc(var(--kn-range-ratio) * (100% - 8px)); top: -4px; width: 8px; height: 14px; border: 1px solid #1d4ed8; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); }
            .kn-range-tooltip { position: absolute; z-index: 2100; left: 50%; top: calc(100% + 8px); width: 310px; padding: 8px 10px; border-radius: 7px; background: #10243f; color: #fff; font-size: 11px; font-weight: 650; line-height: 1.35; text-align: left; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; }
            .kn-range-control:hover .kn-range-tooltip,
            .kn-range-control:focus-visible .kn-range-tooltip,
            .kn-range-control.is-dragging .kn-range-tooltip { opacity: 1; visibility: visible; }
            #btn-activity-log { width: 32px !important; min-width: 32px !important; height: 32px !important; padding: 0 !important; }
            #btn-activity-log > span:not(#activity-log-dot) { display: none !important; }
            .app-topbar-header .help-actions-dropdown { display: inline-flex; position: relative; }
            .app-topbar-header #btn-help-menu-trigger,
            .topbar-right-group #btn-help-menu-trigger {
                width: 30px !important;
                min-width: 30px !important;
                height: 30px !important;
                padding: 0 !important;
                border-radius: 6px !important;
                background: none !important;
                border: none !important;
                box-shadow: none !important;
                color: #cfe2db !important;
                transition: color .18s ease, background .18s ease !important;
            }
            .app-topbar-header #btn-help-menu-trigger > span,
            .topbar-right-group #btn-help-menu-trigger > span { display: none !important; }
            .app-topbar-header #btn-help-menu-trigger:hover,
            .topbar-right-group #btn-help-menu-trigger:hover {
                background: rgba(255,255,255,0.12) !important;
                color: #ffffff !important;
            }
            .app-topbar-header #help-menu-dropdown-content { width: 225px !important; left: auto !important; right: 0 !important; }
            #btn-export-menu-trigger { border-color: #2563eb !important; background: #2563eb !important; color: #fff !important; }
            .gantt-style-menu { position: fixed !important; z-index: 10040 !important; box-sizing: border-box !important; max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden; }
        }

        @media screen {
            body.dark-mode .project-summary-label,
            body.dark-mode #project-info { color: #91a6a0 !important; }
            body.dark-mode #project-title { color: #f1f5f9 !important; }
            body.dark-mode #project-title,
            body.dark-mode #project-info { background: transparent !important; }
            body.dark-mode .project-summary-track { background: var(--xv-s4, #29403b); }
        }
        @media screen and (min-width: 761px) {
            body.dark-mode #khoi-ten-cong-trinh,
            body.dark-mode .control-panel { border-color: var(--xv-s3, #1a2b27) !important; background: var(--xv-s1, #111e1b) !important; }
            body.dark-mode .btn-today-inline { color: #d8e6e2 !important; }
            body.dark-mode .btn-today-inline:hover { background: var(--xv-s4, #1a2c28) !important; }
            body.dark-mode .kn-range-fill { background: linear-gradient(90deg,#60a5fa 0 calc(var(--kn-range-ratio) * 100%),var(--xv-s4, #29403b) calc(var(--kn-range-ratio) * 100%) 100%); }
            body.dark-mode .kn-range-tooltip { background: #e8f2ef; color: var(--xv-d1-on, #10231f); }
            body.dark-mode #timeline-table th,
            body.dark-mode #timeline-table td { border-color: var(--xv-s3, #172824) !important; }
            body.dark-mode #timeline-table th.col-week,
            body.dark-mode #timeline-table td.week-cell {
                border-top: none !important;
                border-left: none !important;
                border-right-color: var(--xv-s3, #172824) !important;
                border-bottom-color: var(--xv-s3, #172824) !important;
            }
        }
        @media screen and (max-width: 760px) {
            .project-summary-metrics { display: none !important; }
            .app-topbar-header .help-actions-dropdown { display: none !important; }
        }

        /* ═══════════ HỆ THỐNG CHÚ THÍCH KHI RÊ CHUỘT (TOOLTIP) — CHUẨN XONGVIEC.COM ═══════════ */
        .xv-tooltip-portal {
            position: fixed;
            z-index: 999999;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(6px) scale(0.96);
            transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
            will-change: opacity, transform;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .xv-tooltip-portal[data-placement="bottom"] {
            transform: translateY(-6px) scale(0.96);
        }
        .xv-tooltip-portal.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1) !important;
        }
        .xv-tooltip-portal[data-table-tooltip="true"] { transition: none; }
        .xv-tooltip-inner {
            background-color: #22252a;
            color: #ffffff;
            font-size: 12.5px;
            font-weight: 500;
            line-height: 1.4;
            padding: 6px 12px;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.15);
            white-space: nowrap;
            position: relative;
            letter-spacing: 0.01em;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .xv-tooltip-portal[data-placement="top"] .xv-tooltip-arrow {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #22252a;
        }
        .xv-tooltip-portal[data-placement="bottom"] .xv-tooltip-arrow {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #22252a;
        }
        .xv-tooltip-kbd {
            display: inline-block;
            padding: 1px 5px;
            font-size: 11px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.14);
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            line-height: 1.2;
        }

        /* ═══════════ HỆ THỐNG GỢI Ý KHÁM PHÁ TÍNH NĂNG (FEATURE DISCOVERY COACHMARK) ═══════════ */
        .xv-hint-portal {
            position: fixed;
            z-index: 1000000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(6px) scale(0.96);
            transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
            will-change: opacity, transform;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            max-width: 290px;
            pointer-events: auto;
        }
        .xv-hint-portal.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1) !important;
        }
        .xv-hint-card {
            background: #1e2229;
            color: #ffffff;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.2);
            padding: 12px 14px;
            box-sizing: border-box;
        }
        .xv-hint-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        .xv-hint-badge {
            display: inline-flex;
            align-items: center;
            background: rgba(59, 130, 246, 0.2);
            color: #60a5fa;
            font-size: 11px;
            font-weight: 750;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid rgba(96, 165, 250, 0.25);
        }
        .xv-hint-btn-close {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            font-size: 13px;
            cursor: pointer;
            padding: 0 4px;
            line-height: 1;
            transition: color 0.15s;
        }
        .xv-hint-btn-close:hover {
            color: #ffffff;
        }
        .xv-hint-title {
            font-size: 12.5px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.35;
            margin-bottom: 4px;
        }
        .xv-hint-desc {
            font-size: 11.5px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.82);
            line-height: 1.45;
            margin-bottom: 10px;
        }
        .xv-hint-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 6px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .xv-hint-step {
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
        }
        .xv-hint-btn-ack {
            background: #2563eb;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
        }
        .xv-hint-btn-ack:hover {
            background: #1d4ed8;
        }
        .xv-hint-btn-ack:active {
            transform: scale(0.97);
        }
        .xv-hint-acts { display: inline-flex; align-items: center; gap: 6px; }
        .xv-hint-btn-hen {
            background: transparent;
            color: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 5px;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 9px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .xv-hint-btn-hen:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
        @media (pointer: coarse), (max-width: 760px) {
            .xv-hint-portal { max-width: calc(100vw - 20px); width: 300px; }
            .xv-hint-title { font-size: 14px; }
            .xv-hint-desc { font-size: 13px; line-height: 1.5; }
            .xv-hint-btn-ack, .xv-hint-btn-hen { font-size: 13px; padding: 8px 12px; min-height: 36px; }
            .xv-hint-btn-close { font-size: 16px; padding: 6px 8px; }
        }

        /* Mũi tên định hướng */
        .xv-hint-portal[data-placement="top"] .xv-hint-arrow {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #1e2229;
        }
        .xv-hint-portal[data-placement="bottom"] .xv-hint-arrow {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #1e2229;
        }
        .xv-hint-portal[data-placement="left"] .xv-hint-arrow {
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 6px solid #1e2229;
        }
        .xv-hint-portal[data-placement="right"] .xv-hint-arrow {
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 6px solid #1e2229;
        }

        /* Hiệu ứng viền phát sáng mục tiêu */
        .xv-hint-target-pulse {
            outline: 2px solid #3b82f6 !important;
            outline-offset: 2px !important;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.45) !important;
            border-radius: 4px;
            animation: xvHintPulse 2s infinite ease-in-out;
        }
        @keyframes xvHintPulse {
            0%, 100% { outline-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
            50% { outline-color: #60a5fa; box-shadow: 0 0 16px rgba(96, 165, 250, 0.65); }
        }

        /* ===== Thẻ sửa nhanh trên thanh Timeline (v875) ===== */
        #timeline-table tr.xvts-chon .gantt-continuous-bar { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb; }
        tr.xvts-chon > td { background-color: rgba(27, 99, 84, 0.08) !important; }
        body.dark-mode tr.xvts-chon > td { background-color: rgba(45, 212, 191, 0.12) !important; }
        /* Núm kéo % ở đầu phần đã xong (chỉ thanh việc đang chọn, không phải mốc hay giai đoạn) */
        #timeline-table tr.xvts-chon-don.sub-task:not(.milestone-task) .gantt-continuous-bar::after {
            content: ""; position: absolute; left: clamp(9px, var(--gantt-progress, 0%), calc(100% - 9px)); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
            border-radius: 50%; background: #ffffff; border: 2px solid #17231f; box-sizing: border-box; pointer-events: none; z-index: 2;
        }
        body.xvts-mo #custom-tooltip { display: none !important; }
        .xvts-the { position: fixed; z-index: 1190; width: 372px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px 10px; background: var(--card-bg, #ffffff); color: var(--text-color, #0f1a18);
            border: 1px solid var(--border-color, #d7e0dc); border-radius: 12px; box-shadow: 0 14px 36px rgba(15, 26, 24, .24); font-family: inherit; font-size: 12.5px; line-height: 1.35; outline: none !important; }
        .xvts-the:focus, .xvts-the:focus-visible { outline: none !important; }
        .xvts-the::before { content: ""; position: absolute; left: var(--xvts-mui, 24px); width: 10px; height: 10px; margin-left: -5px; background: var(--card-bg, #ffffff); border: 0 solid var(--border-color, #d7e0dc); transform: rotate(45deg); }
        .xvts-the[data-huong="duoi"]::before { top: -6px; border-width: 1px 0 0 1px; }
        .xvts-the[data-huong="tren"]::before { bottom: -6px; border-width: 0 1px 1px 0; }
        .xvts-dau { display: flex; align-items: center; gap: 6px; }
        .xvts-ten { flex: 1; min-width: 0; height: 30px; box-sizing: border-box; margin-left: -6px; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 700; text-align: left; text-overflow: ellipsis; box-shadow: none; }
        .xvts-ten:hover:not(:disabled) { border-color: var(--border-color, #d7e0dc); }
        .xvts-ten:focus { outline: none; border-color: var(--brand-primary, #20564c); background: var(--card-bg, #ffffff); }
        .xvts-ten:disabled { opacity: 1; }
        .xvts-nut-dong, .xvts-st { flex: none; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color, #d7e0dc); border-radius: 7px; background: transparent; color: var(--text-color, #3a4a45); cursor: pointer; }
        .xvts-nut-dong { border-color: transparent; }
        .xvts-nut-dong:hover, .xvts-st:hover:not(:disabled) { background: rgba(27, 99, 84, 0.1); }
        .xvts-st:disabled { opacity: .4; cursor: default; }
        .xvts-luoi { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px 8px; align-items: center; margin-top: 8px; }
        .xvts-nhan { font-size: 11.5px; font-weight: 600; color: var(--note-color, #64748b); }
        .xvts-hang { display: flex; align-items: center; gap: 6px; min-width: 0; }
        .xvts-gt { min-width: 94px; text-align: center; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
        .xvts-den { margin-left: 2px; font-size: 11.5px; color: var(--note-color, #64748b); white-space: nowrap; }
        .xvts-seg { display: flex; min-width: 0; }
        .xvts-sg { flex: 1; min-width: 0; height: 28px; padding: 0 2px; border: 1px solid var(--border-color, #d7e0dc); background: transparent; color: var(--text-color, #3a4a45); font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
        .xvts-sg:first-child { border-radius: 7px 0 0 7px; }
        .xvts-sg:last-child { border-radius: 0 7px 7px 0; }
        .xvts-sg + .xvts-sg { margin-left: -1px; }
        .xvts-sg:hover:not(.on):not(:disabled) { background: rgba(27, 99, 84, 0.1); }
        .xvts-sg.on { position: relative; background: var(--brand-primary, #20564c); border-color: var(--brand-primary, #20564c); color: #ffffff; }
        .xvts-sg:disabled { opacity: .55; cursor: default; }
        .xvts-cham { grid-column: 2; margin-top: -4px; font-size: 11.5px; color: #b45309; }
        .xvts-pcts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
        .xvts-pq { height: 28px; min-width: 36px; padding: 0 5px; border: 1px solid var(--border-color, #d7e0dc); border-radius: 7px; background: transparent; color: var(--text-color, #3a4a45); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
        .xvts-pq:hover:not(.on):not(:disabled) { background: rgba(27, 99, 84, 0.1); }
        .xvts-pq.on { background: var(--brand-primary, #20564c); border-color: var(--brand-primary, #20564c); color: #ffffff; }
        .xvts-pq:disabled { opacity: .55; cursor: default; }
        .xvts-pq-le { font-size: 12px; font-weight: 700; color: var(--brand-primary, #20564c); padding-left: 4px; }
        .xvts-pt { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
        .xvts-av { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 10.5px; font-weight: 700; }
        .xvts-av.trong { background: transparent; border: 1.5px dashed #9db0aa; }
        .xvts-pt select { flex: 1; min-width: 0; height: 28px; padding: 0 6px; border: 1px solid var(--border-color, #d7e0dc); border-radius: 7px; background: var(--card-bg, #ffffff); color: var(--text-color, #0f1a18); font: inherit; font-size: 12px; font-weight: 600; }
        .xvts-uu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
        .xvts-cb { height: 28px; min-width: 30px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--border-color, #d7e0dc); border-radius: 7px; background: transparent; color: #6b7280; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
        .xvts-cb:hover:not(:disabled) { background: rgba(27, 99, 84, 0.1); }
        .xvts-cb.on { border-color: currentColor; background: rgba(127, 127, 127, 0.1); }
        .xvts-cb:disabled { opacity: .55; cursor: default; }
        .xvts-cb.m-gap { color: #d93f35; }
        .xvts-cb.m-cao { color: #f08c0f; }
        .xvts-cb.m-tb { color: #1f6feb; }
        .xvts-cb.m-thap { color: #6b7280; }
        .xvts-co { display: block; flex: none; }
        .xvts-co-can { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
        .xvts-co-la { fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
        .xvts-cb.m-thap .xvts-co-la { fill: none; }
        .xvts-hoan { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(27, 99, 84, 0.1); font-size: 12px; font-weight: 600; }
        .xvts-hoan[hidden] { display: none; }
        .xvts-hoan button { flex: none; height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--brand-primary, #20564c); color: #ffffff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
        .xvts-chan { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-color, #e3e9e6); }
        .xvts-ln { border: 0; padding: 0; background: transparent; color: var(--brand-primary, #20564c); font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
        .xvts-ln.xoa { color: #b91c1c; }
        .xvts-goi { margin-left: auto; font-size: 11px; color: var(--note-color, #8a9a95); }
        body.dark-mode .xvts-the { box-shadow: 0 14px 36px rgba(0, 0, 0, .55); }
        body.dark-mode .xvts-ln { color: #5eead4; }
        body.dark-mode .xvts-ln.xoa { color: #fca5a5; }
        @media print { .xvts-the { display: none !important; } }

        /* ===== Vẽ thanh trên dòng "+ Thêm việc" (v876) ===== */
        .xvtv-goi-y { position: fixed; z-index: 1100; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1.5px dashed #8fb0a6; border-radius: 9px; color: var(--brand-primary, #20564c); font-size: 14px; font-weight: 600; line-height: 1; pointer-events: none; }
        .xvtv-goi-y::after { content: "+"; }
        .xvtv-goi-y-chu { position: fixed; z-index: 1100; font-size: 11px; font-weight: 500; color: var(--note-color, #64748b); white-space: nowrap; pointer-events: none; }
        .xvtv-nhap { position: fixed; z-index: 1100; box-sizing: border-box; border: 1.5px dashed var(--brand-primary, #20564c); border-radius: 9px; background: rgba(27, 99, 84, 0.16); pointer-events: none; }
        .xvtv-tip { position: fixed; z-index: 1101; padding: 3px 9px; border-radius: 6px; background: #12332d; color: #ffffff; font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; }
        .xvtv-ten { position: fixed; z-index: 1102; width: 260px; height: 30px; box-sizing: border-box; padding: 0 10px; border: 1.5px solid var(--brand-primary, #20564c); border-radius: 8px; background: var(--card-bg, #ffffff); color: var(--text-color, #0f1a18); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; outline: none; box-shadow: 0 4px 14px rgba(15, 26, 24, .16); }
        .xvtv-ten::placeholder { font-weight: 400; color: #8a9a95; }
        body.xvtv-dang-ve, body.xvtv-dang-ve * { cursor: crosshair !important; user-select: none !important; }
        @media print { .xvtv-goi-y, .xvtv-goi-y-chu, .xvtv-nhap, .xvtv-tip, .xvtv-ten { display: none !important; } }

        /* ===== Chọn nhiều thanh: thanh thao tác nổi (v877) ===== */
        .xvts-nhom { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 1180; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 8px 10px 8px 16px; background: #12332d; color: #ffffff; border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 26, 24, .3); font-size: 12.5px; }
        .xvts-nhom-dem { font-weight: 700; white-space: nowrap; }
        .xvts-nhom-vach { width: 1px; height: 22px; margin: 0 2px; background: rgba(255, 255, 255, .22); }
        .xvts-nhom-cum { display: inline-flex; align-items: center; background: rgba(255, 255, 255, .12); border-radius: 8px; }
        .xvts-nhom-chu { padding: 0 2px; font-weight: 600; white-space: nowrap; }
        .xvts-nhom-dan { flex: 1; min-width: 8px; }
        .xvts-nb { height: 30px; min-width: 30px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #ffffff; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
        .xvts-nhom-cum .xvts-nb { min-width: 28px; padding: 0 7px; background: transparent; }
        .xvts-nb:hover { background: rgba(255, 255, 255, .24); }
        .xvts-nb.xoa { background: rgba(239, 68, 68, .32); }
        .xvts-nb.xoa:hover { background: rgba(239, 68, 68, .55); }
        .xvts-nb kbd { padding: 1px 5px; border-radius: 4px; background: #ffffff; color: #17231f; font: 600 10.5px 'JetBrains Mono', ui-monospace, monospace; }
        .xvts-nhom-menu { position: fixed; z-index: 1181; min-width: 190px; max-height: 320px; overflow-y: auto; padding: 4px; background: var(--card-bg, #ffffff); color: var(--text-color, #0f1a18); border: 1px solid var(--border-color, #d7e0dc); border-radius: 10px; box-shadow: 0 14px 36px rgba(15, 26, 24, .26); }
        .xvts-nm-muc { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
        .xvts-nm-muc:hover { background: rgba(27, 99, 84, .12); }
        .xvts-nm-muc.xoa { color: #b91c1c; }
        .xvts-nm-vach { height: 1px; margin: 4px 0; background: var(--border-color, #e3e9e6); }
        @media print { .xvts-nhom, .xvts-nhom-menu { display: none !important; } }
        body.xvts-mod .xvts-the { opacity: .1; pointer-events: none; }

        /* ===== Đường nối phụ thuộc và núm nối việc (v878) ===== */
        /* Lớp vẽ nằm trên thanh (z 5) nhưng dưới nhãn ngày (z 7): đường không đè lên chữ */
        .xvte-lop { position: absolute; z-index: 6; pointer-events: none; overflow: visible; }
        .xvte-lop path { fill: none; stroke: #64748b; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; opacity: .7; marker-end: url(#xvte-mui); }
        body.dark-mode .xvte-lop path { stroke: #94a3b8; }
        /* Có việc đang chọn: đường nối của việc đó xanh đậm, đường khác mờ */
        .xvte-lop path.mo { opacity: .22; }
        /* Ba kiểu nối, ba nét: Xong mới làm nét liền, Cuốn chiếu nét đứt, Gối đầu nét chấm */
        .xvte-lop path[data-kieu="ss"] { stroke-dasharray: 6 4; }
        .xvte-lop path[data-kieu="lead"] { stroke-dasharray: 1.5 3.5; }
        .xvte-lop path.xa { opacity: .4; }
        .xvte-lop path.lq { stroke: #2563eb; stroke-width: 2; opacity: 1; marker-end: url(#xvte-mui-xanh); }
        body.dark-mode .xvte-lop path.lq { stroke: #60a5fa; }
        /* Chuỗi xa hơn một bậc: xanh nhạt, mảnh hơn */
        .xvte-lop path.lq2 { stroke: #2563eb; stroke-width: 1.5; opacity: .55; marker-end: url(#xvte-mui-xanh); }
        body.dark-mode .xvte-lop path.lq2 { stroke: #60a5fa; }
        /* Việc làm trước đang chậm: đường tới việc làm sau cam đỏ (trễ lan); đang chọn hoặc rê chuột thì giữ độ đậm của chuỗi xanh nhưng vẫn cam đỏ */
        .xvte-lop path.tre { stroke: #c2410c; opacity: .9; marker-end: url(#xvte-mui-do); }
        body.dark-mode .xvte-lop path.tre { stroke: #fb923c; }
        .xvte-lop path.tre.xa { opacity: .55; }
        .xvte-lop path.tre.mo { opacity: .4; }
        .xvte-lop path.tre.lq { stroke-width: 2; opacity: 1; }
        .xvte-lop path.tre.lq2 { opacity: .75; }
        /* Chấm báo liên kết ở đầu và cuối thanh (chế độ theo việc chọn) */
        .xvte-lop .xvte-cham { fill: #ffffff; stroke: rgba(15, 23, 42, .6); stroke-width: 1; }
        .xvte-lop .xvte-cham.tre { fill: #c2410c; stroke: #ffffff; }
        body.dark-mode .xvte-lop .xvte-cham.tre { fill: #fb923c; stroke: #111e1b; }
        /* Chip cho liên kết dài (chế độ Tất cả): bấm để chọn và cuộn tới việc ở đầu bên kia */
        .xvte-lop .xvte-chip { pointer-events: all; cursor: pointer; }
        .xvte-lop .xvte-chip rect { fill: #ffffff; stroke: #94a3b8; stroke-width: 1; }
        .xvte-lop .xvte-chip text { font: 600 10.5px 'Be Vietnam Pro', system-ui, sans-serif; fill: #475569; }
        .xvte-lop .xvte-chip:hover rect { stroke: #2563eb; }
        .xvte-lop .xvte-chip:hover text { fill: #2563eb; }
        body.dark-mode .xvte-lop .xvte-chip rect { fill: #111e1b; stroke: #475569; }
        body.dark-mode .xvte-lop .xvte-chip text { fill: #cbd5e1; }
        /* Nhãn ngày nằm cạnh thanh có viền nền để đường nối (vẽ dưới nhãn) không làm khó đọc */
        body.xvte-bat .gantt-inline-label.after, body.xvte-bat .gantt-inline-label.before { text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff; }
        body.dark-mode.xvte-bat .gantt-inline-label.after, body.dark-mode.xvte-bat .gantt-inline-label.before { text-shadow: 0 0 3px #0f1a18, 0 0 3px #0f1a18, 0 0 3px #0f1a18; }
        /* Chip báo đã tự giảm mật độ */
        .xvte-bao { position: fixed; z-index: 40; display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 6px 8px 6px 12px; border-radius: 999px; background: #ffffff; border: 1px solid #cbd5e1; box-shadow: 0 6px 18px rgba(15, 23, 42, .16); font-size: 12px; font-weight: 600; color: #334155; }
        .xvte-bao button { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: #2563eb; color: #ffffff; font: 700 12px 'Be Vietnam Pro', system-ui, sans-serif; cursor: pointer; }
        body.dark-mode .xvte-bao { background: #111e1b; border-color: #334155; color: #cbd5e1; }
        body.dark-mode .xvte-bao button { background: #60a5fa; color: #0b1220; }
        .xvte-menu-tieu { margin-top: 6px; }
        .xvte-kieu-nhom { display: flex; flex-direction: column; gap: 4px; margin: 6px 4px 2px; padding: 8px 8px 6px; border-top: 1px solid rgba(148, 163, 184, .3); color: #64748b; white-space: normal; }
        .xvte-kieu, .xvte-kieu-tre { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; line-height: 1.35; color: var(--note-color, #64748b); }
        .xvte-kieu svg, .xvte-kieu-tre svg { flex: none; color: #64748b; }
        .xvts-the.xvts-nhuong { visibility: hidden; pointer-events: none; }
        .xvte-kieu-tre svg { color: #c2410c; }
        body.dark-mode .xvte-kieu-tre svg { color: #fb923c; }
        /* Núm nối ở hai đầu thanh (rê chuột hoặc chọn): đầu phải kéo xuống chọn việc làm sau, đầu trái kéo lên chọn việc làm trước; nhãn ngày dời sang phải một đoạn để không đè núm */
        .xvte-nut-lop { position: absolute; z-index: 9; pointer-events: none; overflow: visible; }
        .xvte-nut-lop circle { fill: #ffffff; stroke: #2563eb; stroke-width: 2; }
        body.dark-mode .xvte-nut-lop circle { fill: #0b1312; stroke: #60a5fa; }
        #timeline-table tr.xvte-nut-hien .gantt-inline-label.after { left: calc(100% + 24px); }
        #table-body tr.xvte-dich > td { background-color: rgba(37, 99, 235, .12) !important; }
        .xvte-keo { position: fixed; left: 0; top: 0; z-index: 1195; pointer-events: none; overflow: visible; }
        .xvte-keo line { stroke: #2563eb; stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; }
        /* Lời nhắc bật đường nối: thanh nhỏ màu đậm giữa đáy màn hình, ngay trên thanh công cụ nổi (không chạm nút gợi ý ở góc phải) */
        .xvte-nhac { position: fixed; left: 50%; transform: translateX(-50%); bottom: 70px; z-index: 1190; width: 320px; max-width: calc(100vw - 24px); padding: 10px 10px 10px 14px; border-radius: 10px; background: #12332d; color: #ffffff; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, .22); }
        .xvte-nhac .hinh { display: block; width: 100%; height: auto; margin: 0 0 8px; padding: 6px 8px; box-sizing: border-box; border-radius: 8px; background: rgba(255, 255, 255, .08); }
        .xvte-nhac .hinh .t1 { fill: #7aa496; } .xvte-nhac .hinh .t2 { fill: #a9c4ba; } .xvte-nhac .hinh .day { fill: none; stroke: #60a5fa; stroke-width: 2; } .xvte-nhac .hinh .mui { fill: #60a5fa; }
        .xvte-nhac .hinh .ch { font: 600 9px 'Be Vietnam Pro', system-ui, sans-serif; fill: #d6e3df; }
        .xvte-nhac .hang { display: flex; align-items: center; gap: 10px; }
        .xvte-nhac .hang span { flex: 1; }
        .xvte-nhac button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: #ffffff; color: #12332d; font: 800 12px 'Be Vietnam Pro', system-ui, sans-serif; cursor: pointer; }
        .xvte-nhac button.dong { width: 28px; padding: 0; background: transparent; color: #b9ccc6; font-size: 18px; line-height: 1; }
        .xvte-nhac button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
        @media (max-width: 760px) { .xvte-nhac { display: none; } }
        .xvte-keo line.bat { stroke-dasharray: none; stroke-width: 2.5; }
        /* Thanh đích đã bắt điểm: viền xanh và quầng sáng; thanh không hợp lệ: viền cam nhạt */
        #table-body tr.xvte-dich .gantt-continuous-bar { outline: 2px solid #2563eb; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(37, 99, 235, .22); }
        #table-body tr.xvte-dich-sai .gantt-continuous-bar { outline: 2px solid rgba(234, 88, 12, .55); outline-offset: 2px; }
        body.dark-mode #table-body tr.xvte-dich .gantt-continuous-bar { outline-color: #60a5fa; box-shadow: 0 0 0 5px rgba(96, 165, 250, .28); }
        .xvte-tip { position: fixed; z-index: 1196; max-width: 460px; padding: 5px 10px; border-radius: 8px; background: #12332d; color: #ffffff; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 26, 24, .25); }
        .xvte-tip.ok { background: #1d4ed8; }
        .xvts-noi { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
        .xvts-noi-ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
        button.xvts-noi-ten { padding: 0; border: 0; background: none; color: inherit; font-size: 12px; text-align: left; cursor: pointer; }
        button.xvts-noi-ten:hover { color: #2563eb; text-decoration: underline; }
        .xvts-noi-kieu { flex: none; color: var(--note-color, #64748b); font-size: 11.5px; }
        button.xvts-noi-kieu.sua { padding: 3px 8px; border: 0; border-radius: 7px; background: rgba(37, 99, 235, .1); color: #1d4ed8; font-weight: 700; cursor: pointer; }
        button.xvts-noi-kieu.sua:hover { background: rgba(37, 99, 235, .18); }
        body.dark-mode button.xvts-noi-kieu.sua { background: rgba(96, 165, 250, .16); color: #93c5fd; }
        .xvts-ln.moi { margin-left: 0; color: #2563eb; font-weight: 700; }
        .xvts-noi-ds { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .xvts-noi-sau { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
        .xvts-noi-sau:hover { background: rgba(37, 99, 235, .08); }
        .xvts-noi-sau span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
        .xvts-noi-sau small { flex: none; color: var(--note-color, #64748b); font-size: 11.5px; }
        .xvts-noi .xvts-ln { margin-left: auto; flex: none; }
        /* Bong bóng nối: tạo mới hoặc sửa liên kết ngay trên Timeline */
        body.xvte-tren-duong #table-body { cursor: pointer; }
        .xvte-bong { position: fixed; z-index: 1300; width: 332px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 14px; background: #ffffff; color: #0f172a; box-shadow: 0 14px 38px rgba(15, 23, 42, .22); font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 13px; outline: none; }
        .xvte-bong-ten { display: flex; flex-direction: column; gap: 4px; }
        .xvte-bong-ten b { font-size: 13.5px; font-weight: 800; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .xvte-bong-ten > span { color: #64748b; font-size: 12px; }
        .xvte-bong-ten select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; color: inherit; font: 600 13px 'Be Vietnam Pro', system-ui, sans-serif; }
        .xvte-bong-kieu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 10px 0; padding: 3px; border-radius: 10px; background: #eef2f1; }
        .xvte-bong-kieu button { height: 34px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: #475569; font: 700 12.5px 'Be Vietnam Pro', system-ui, sans-serif; cursor: pointer; }
        .xvte-bong-kieu button[aria-checked="true"] { background: #ffffff; color: #20564c; box-shadow: 0 1px 3px rgba(15, 23, 42, .16); outline: 1.5px solid #20564c; }
        .xvte-bong-hang { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; font-weight: 700; }
        .xvte-bong-hang small { display: block; margin-top: 1px; color: #64748b; font-size: 11.5px; font-weight: 500; }
        .xvte-bong-buoc { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 600; color: #475569; }
        .xvte-bong-buoc button { width: 30px; height: 30px; padding: 0; border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
        .xvte-bong-buoc input { width: 48px; height: 30px; padding: 0; border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; color: #0f172a; text-align: center; font: 800 14px 'JetBrains Mono', monospace; }
        .xvte-bong-ngay { margin-bottom: 8px; padding: 8px 10px; border-radius: 10px; background: #e6f0ed; color: #20564c; font-size: 12.5px; font-weight: 700; line-height: 1.45; }
        .xvte-bong .lk-tu-doi { margin-top: 0; }
        .xvte-bong-nut { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
        .xvte-bong-nut button { height: 36px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff; color: inherit; font: 800 13px 'Be Vietnam Pro', system-ui, sans-serif; cursor: pointer; }
        .xvte-bong-nut .chinh { border-color: #20564c; background: #20564c; color: #ffffff; }
        .xvte-bong-nut .xoa { margin-right: auto; border-color: #b42318; color: #b42318; }
        body.dark-mode .xvte-bong { border-color: #334155; background: #111e1b; color: #f1f5f9; }
        body.dark-mode .xvte-bong-ten select, body.dark-mode .xvte-bong-buoc button, body.dark-mode .xvte-bong-buoc input, body.dark-mode .xvte-bong-nut button { border-color: #334155; background: #0b1312; color: #f1f5f9; }
        body.dark-mode .xvte-bong-kieu { background: #0b1312; }
        body.dark-mode .xvte-bong-kieu button { color: #94a3b8; }
        body.dark-mode .xvte-bong-kieu button[aria-checked="true"] { background: #111e1b; color: #6ee7b7; outline-color: #34d399; }
        body.dark-mode .xvte-bong-ngay { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
        body.dark-mode .xvte-bong-nut .chinh { border-color: #34d399; background: #34d399; color: #062a21; }
        body.dark-mode .xvte-bong-nut .xoa { border-color: #f87171; color: #f87171; }
        /* Bóng mờ của thanh việc sau ở vị trí mới khi đang xem trước */
        .xvte-ghost { position: absolute; z-index: 8; pointer-events: none; overflow: visible; }
        .xvte-ghost rect { fill: rgba(37, 99, 235, .18); stroke: #2563eb; stroke-width: 1.5; stroke-dasharray: 5 3; }
        .xvte-ghost path { fill: none; stroke: #2563eb; stroke-width: 1.5; stroke-dasharray: 5 3; }
        @media print { .xvte-bong, .xvte-ghost, .xvte-nut-lop { display: none !important; } }
        @media print { .xvte-nhac, .xvte-lop, .xvte-keo, .xvte-tip, .xvte-bao { display: none !important; } }
        .xvte-nut-menu .gantt-style-sample::before { left: 0; top: 0; width: 22px; height: 5px; border-radius: 3px; background: #64748b; }
        .xvte-nut-menu .gantt-style-sample::after { content: ""; position: absolute; left: 28px; top: 7px; width: 22px; height: 5px; border-radius: 3px; background: #64748b; }

        /* Chế độ tối: ba hộp lớn (In báo cáo PDF, Báo cáo gửi Zalo, Link cho khách xem) phải tách khỏi trang phía sau.
           Trước đây lớp phủ là màu xanh đậm NHẠT HƠN nền trang và hộp chỉ hơn nền một chút, không viền, bóng đen trên nền đen: hộp lẫn vào nội dung.
           Nay lớp phủ tối và mờ nhẹ, hộp sáng hơn nền, có viền mảnh và bóng sâu. */
        body.dark-mode .popup-in-overlay, body.dark-mode div.btn-dong-hop-zalo { background: rgba(1, 5, 4, .8) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
        body.dark-mode .popup-in-dialog, body.dark-mode .bcp-zl-hop { background: #172822 !important; border: 1px solid rgba(148, 163, 184, .4) !important; box-shadow: 0 30px 90px rgba(0, 0, 0, .78), 0 0 0 1px rgba(0, 0, 0, .55) !important; }
        @media (min-width: 1001px) {
            body.dark-mode #xkd-ov { background: rgba(1, 5, 4, .8) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
            body.dark-mode #xkd { background: #172822 !important; border: 1px solid rgba(148, 163, 184, .4) !important; box-shadow: 0 30px 90px rgba(0, 0, 0, .78), 0 0 0 1px rgba(0, 0, 0, .55) !important; }
        }

        /* ===== Ba màn vào app dùng chung một khung: Đăng nhập, Tạo tài khoản, Truy cập lần đầu ===== */
        /* Khách mới: một nút chính xanh, hai nút phụ cùng hàng, mã mời là liên kết nhỏ */
        #login-free-hero-action { display: flex; flex-direction: column; gap: 8px; padding: 0; background: none; border: 0; margin-top: 4px; }
        #btn-login-offline { width: 100%; height: 50px; min-height: 50px; flex-shrink: 0; padding: 0 20px; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--xv-c1, #20564c); color: #ffffff; font-family: 'Be Vietnam Pro', sans-serif; font-size: 15.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: none; transition: background .2s, box-shadow .2s; }
        .xv-kd-ghi { display: block; text-align: center; font-size: 12.5px; line-height: 1.5; color: #64748b; }
        html.xv-kd-moi .xv-kd-dn-link { margin-top: 14px; }
        .xv-kd-dn-link .xv-kd-dn-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
        .xv-kd-dn-link .xv-kd-dn-nut a { display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 12px; box-sizing: border-box; border: 1.5px solid var(--xv-c1, #20564c); border-radius: 10px; background: transparent; color: var(--xv-c1, #20564c); font-size: 14.5px; font-weight: 700; text-decoration: none; }
        .xv-kd-dn-link .xv-kd-dn-nut a:hover { background: rgba(var(--xv-c1-rgb, 32,86,76), .08); }
        .xv-kd-dn-link .xv-kd-ma { margin-top: 16px; text-align: center; font-size: 13px; color: #5f736d; }
        .xv-kd-dn-link .xv-kd-ma a { padding: 4px 2px; font-size: 13px; }
        /* Đăng nhập: nút chính xanh đặc ở cả hai nền, lỗi có màu rõ chữ */
        #login-modal-overlay #btn-login-submit { background: var(--xv-c1, #20564c) !important; color: #ffffff !important; border: 1.5px solid var(--xv-c1, #20564c) !important; }
        body.dark-mode #login-modal-overlay #btn-login-submit { background: #2f7a6b !important; border-color: #2f7a6b !important; }
        body.dark-mode #login-error { background: #3b1717 !important; border-color: #7f2a2a !important; color: #fca5a5 !important; }
        /* Bảng thương hiệu bên phải: thẻ tiến độ ví dụ nằm trọn trong khung, lợi ích ngay bên dưới */
        .login-col-right-inner { justify-content: flex-start; gap: 28px; }
        .login-benefits-row { margin-top: auto; }
        .login-mini { box-sizing: border-box; width: calc(100% - clamp(36px, 4.5vw, 64px)); max-width: 520px; padding: 16px 18px; border-radius: 14px; background: #ffffff; color: #14231f; box-shadow: 0 14px 34px rgba(3, 20, 16, .34); }
        .login-mini-dau { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13.5px; }
        .login-mini-dau b { font-weight: 800; }
        .login-mini-dau span { font-size: 11px; font-weight: 700; color: #0b5f46; background: #e6f4ef; padding: 2px 10px; border-radius: 99px; }
        .login-mini-h { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: center; height: 28px; }
        .login-mini-h em { font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
        .login-mini-h i { position: relative; display: block; height: 9px; border-radius: 5px; background: #e8eeec; }
        .login-mini-h u { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--xv-c1, #20564c); }
        .login-mini-h u.nhat { background: #b7c6c1; }
        body.dark-mode .login-mini { background: #162723; color: #e6efe8; }
        body.dark-mode .login-mini-dau span { background: #1d3b33; color: #8fe0c4; }
        body.dark-mode .login-mini-h i { background: #243b37; }
        body.dark-mode .login-mini-h u { background: #34d399; }
        body.dark-mode .login-mini-h u.nhat { background: #4b625c; }
        body.dark-mode .xv-kd-ghi, body.dark-mode .xv-kd-dn-link .xv-kd-ma { color: #9ab3ac; }
        body.dark-mode .xv-kd-dn-link .xv-kd-dn-nut a { color: #6fd3b8; border-color: #2f7a6b; }
        body.dark-mode #btn-login-offline { background: #2f7a6b !important; }