/* BẢNG MÀU THƯƠNG HIỆU XONGVIEC.COM 1A ("RỪNG NGUYÊN BẢN") */
        :root {
            /* Xanh rếu — giữ vai chính */
            --brand-primary: var(--xv-c1, #20564c);
            --brand-primary-hover: var(--xv-c1-hover, #17423a);
            --brand-primary-light: var(--xv-c1-soft, #e6f4ef);
            --brand-primary-text: var(--xv-c1-hover, #17423a);
            --brand-primary-border: var(--xv-c1-line, #a3d9c7);

            /* Topbar */

            /* Cam điểm nhấn [MỚI] — dùng cho dấu X, vạch hôm nay, nút tạo mới, avatar */
            --brand-accent: #de7228;
            --brand-accent-hover: #c2611e;
            --brand-accent-text: #9a4a12;
            --brand-accent-tint: #fff7ed;
            --brand-accent-border: #f6c9a4;

            /* Hành động phụ & màu chức năng */
            --brand-blue: #0075ff;
            --brand-orange: #de7228;

            /* Surfaces & Neutrals */
            --bg-color: #f8fafc; 
            --card-bg: #ffffff;
            --panel-bg: #ffffff;
            --text-color: #0f172a; 
            --note-color: #475569; 
            --border-color: #e2e8f0; 
            --border-subtle: #f1f5f9;
            --highlight: #f8fafc; 
            --timeline-cols: 30; 
            
            /* Cụm 9 cột thông tin Gantt dùng kích thước px cố định, tổng 769px */
            --w-task: 240px; --w-note: 120px; --w-assignee: 0px; --w-nhan: 0px; --w-date: 58px; --w-days: 40px; --w-dep: 30px; --w-status: 88px; --w-progress: 61px;
            --gantt-row-height: 30px;
            --gantt-bar-height: 14px;

            /* Timeline — vạch hôm nay từ đỏ sang cam thương hiệu */
            --today-line-color: #de7228;
            --sticky-bg: #ffffff;
            --sticky-task-left: 45px;

            --radius-sm: 6px;
            --radius-md: 10px;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
            --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.03);
            --shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.08);
        }

        /* DARK MODE - MIDNIGHT SPRUCE PRO */
        body.dark-mode {
            --bg-color: var(--xv-s0, #0b1312);
            --card-bg: var(--xv-s1, #111e1b);
            --panel-bg: var(--xv-s1, #111e1b);
            --text-color: #f1f5f9;
            --note-color: #94a3b8;
            --border-color: var(--xv-s2, #1e332f);
            --border-subtle: var(--xv-s3, #162523);
            --highlight: var(--xv-s4, #172825);
            --sticky-bg: var(--xv-s1, #111e1b);

            --brand-primary: var(--xv-d1, #34d399);
            --brand-primary-hover: var(--xv-d1-hover, #10b981);
            --brand-primary-light: var(--xv-d1-soft-solid, #163830);
            --brand-primary-text: var(--xv-d1-text, #6ee7b7);
            --brand-primary-border: var(--xv-d1-line, #24574a);

            /* Cam sáng hơn cho nền tối */
            --brand-accent: #fb923c;
            --brand-accent-hover: #f97316;
            --brand-accent-text: #fdba74;
            --brand-accent-tint: #2b1a0f;
            --brand-accent-border: #5d3a20;

            --today-line-color: #fb923c;
        }

        /* THỤT LỀ NGOÀI CÙNG — bỏ 2026-08-23 theo yêu cầu người dùng.
           body vốn có padding 16px, mà .container ngay bên trong lại có padding 18px nữa
           nên toàn bộ ứng dụng bị thụt HAI LẦN so với mép trình duyệt, ăn mất 32px bề
           ngang cho vùng thao tác mà chẳng để làm gì.
           Giữ một lớp đệm duy nhất là của .container. Bảng vốn đã cuộn ngang trong
           #timeline-table-container nên phần thừa ra dồn hết cho dải timeline.
           Bản in không ảnh hưởng: khối @media print đặt padding riêng cho body. */
        body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 0; line-height: 1.4; -webkit-font-smoothing: antialiased; }
        
        /* HUY HIỆU PHIÊN BẢN KIÊM NÚT "CÓ GÌ MỚI" — 2026-08-23.
           Trước đây v1.1 chỉ là chữ trang trí, mà nó lại nằm trong khối có
           onclick="location.reload()" nên bấm vào là tải lại trang. Nay nó là <button>
           thật, tự chặn nổi bọt sự kiện để không kích hoạt cái reload đó.
           Chấm đỏ báo tin mới giữ NGUYÊN id #badge-header-whatsnew, chỉ dời chỗ vào đây —
           nhờ vậy mã có sẵn không phải sửa gì. */
        #btn-phien-ban {
            position: relative;
            font-family: inherit;
            font-size: 11px;
            font-weight: 700;
            color: #a7f3d0;
            background: rgba(255,255,255,0.1);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.15);
            margin-left: 3px;
            cursor: pointer;
            line-height: 1.4;
            transition: background 0.15s, border-color 0.15s;
        }
        #btn-phien-ban:hover {
            background: rgba(255,255,255,0.22);
            border-color: rgba(167,243,208,0.55);
        }
        /* Chấm đỏ nhô ra góc trên phải, không làm huy hiệu rộng thêm ra. */
        #btn-phien-ban #badge-header-whatsnew {
            position: absolute;
            top: -3px;
            right: -3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #ef4444;
            border: 1px solid #14342b;
        }
        .container { position: relative; width: 100%; margin: 0 auto; border: 1px solid #e2e8f0; padding: 18px; box-sizing: border-box; background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

        .dashboard-panel { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
        .dash-card { flex: 1 1 160px; border: 1px solid #e2e8f0; padding: 12px 14px; background: var(--card-bg); box-sizing: border-box; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; }
        .dash-card:hover { box-shadow: var(--shadow-md); }
        .dash-card-wide { flex: 2 1 260px; }
        .dash-label { font-size: 11px; text-transform: uppercase; color: var(--text-color); margin-bottom: 5px; font-weight: 800; letter-spacing: 0.5px; opacity: 0.92;} /* [SỬA 2026-08-20] opacity 0.7 kéo tương phản xuống 3.59 */
        .dash-value { font-size: 15px; font-weight: 900; line-height: 1.3; color: var(--text-color); }
        .dash-value-warn { font-weight: 900; color: #b91c1c !important; } /* [UX-10] Trước dùng var(--today-line-color) = #ee5959, trên nền trắng chỉ đạt 3,38 — cùng loại lỗi đã sửa cho .dash-value-ok ngay dưới. Không đổi chính biến đó vì nó còn vẽ vạch "hôm nay" trên timeline, nơi #ee5959 vẫn đúng. #b91c1c đạt 6,47. */
        .dash-value-ok { font-weight: 900; color: #047857 !important; } /* [SỬA 2026-08-20] #10b981 trên nền trắng chỉ đạt tương phản 2.54 — mà đây lại là CON SỐ TIẾN ĐỘ CHÍNH, thứ khách liếc đầu tiên. Đổi sang tông đậm hơn (#047857) đạt ~4.9, vẫn là xanh lá nhận ra ngay. */
        .dash-sub { font-size: 11px; color: var(--text-color); font-weight: 500; opacity: 0.8; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        #mobile-view { display: none; }
        /* Chỉ báo kéo xuống làm mới: mặc định ẩn hoàn toàn, chỉ hiện khi người dùng kéo. */
        #mv-pull-refresh { display: none; }
        @media (max-width: 760px) {
            #mv-pull-refresh { position: fixed; z-index: 9400; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 5px); display: flex; align-items: center; justify-content:center; width:36px; height:36px; padding:0; border: 1px solid var(--brLine); border-radius:50%; background: var(--card); color: var(--br); box-shadow: 0 6px 16px rgba(15,26,24,.12); pointer-events: none; transform: translate(-50%, -140%); opacity:0; visibility:hidden; transition: transform .18s ease, opacity .12s ease, visibility .12s ease; }
            #mv-pull-refresh.hien { opacity:1; visibility:visible; }
            #mv-pull-refresh .mv-pr-icon { font: 700 18px/1 'JetBrains Mono', monospace; }
            #mv-pull-refresh[data-loading="true"] .mv-pr-icon { animation: mvPullSpin .7s linear infinite; }
            @keyframes mvPullSpin { to { transform: rotate(360deg); } }
        }
        /* Trạng thái chưa có dự án: Ẩn triệt để thanh công cụ, tab chuyển chế độ, nút chia sẻ/xuất,
           chú giải màu sắc, nút bánh răng và các bảng/banner để khách hàng hoàn toàn tập trung vào Showroom Khởi Động. */
        /* Tắt cử chỉ kéo-tải-lại MẶC ĐỊNH của trình duyệt điện thoại (nó tải lại trang và làm mất dữ liệu đang gõ).
           Việc làm mới do app tự làm bằng khoiTaoKeoDeLamMoi() có kiểm soát (trang gốc ở đỉnh, không trong wizard). */
        /* Chỉ đặt ở html (khung cuộn gốc). Đặt cả ở body kèm overflow-x: hidden làm body thành khung cuộn riêng không cuộn được,
           và "contain" chặn cử chỉ vuốt chuyển lên trang gốc: trên một số điện thoại Android trang đứng im, không vuốt được. */
        html { overscroll-behavior-y: contain; }
        #empty-project-state { display: none; }
        body.empty-project-mode #dashboard-panel,
        body.empty-project-mode #khoi-ten-cong-trinh,
        body.empty-project-mode #table-wrapper,
        body.empty-project-mode .topbar-mode-tabs,
        body.empty-project-mode .export-actions-dropdown,
        body.empty-project-mode .control-panel,
        body.empty-project-mode #main-control-panel,
        body.empty-project-mode .control-panel-sentinel,
        body.empty-project-mode .gantt-legend,
        body.empty-project-mode .project-actions-dropdown,
        body.empty-project-mode #topbar { display: none !important; }
        body.empty-project-mode #empty-project-state {
            display: flex !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            min-height: 100vh !important;
            max-width: 100vw !important;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            flex-direction: row !important;
            align-items: stretch !important;
            justify-content: stretch !important;
            text-align: left !important;
            background: #ffffff !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            overflow: hidden !important;
            z-index: 99999 !important;
        }
        .eps-title { display: none; }
        .eps-copy {
            display: none !important;
        }

        /* Mũi tên góc phải */

        @media (max-width: 640px) {
            body.empty-project-mode #empty-project-state { padding: 0 !important; min-height: 100vh; height: auto !important; overflow-y: auto; }
        }

/* [2026-08-28] Nhóm ĐÓNG hiện tóm tắt (xong mấy / trễ mấy), nhóm MỞ hiện khoảng ngày.
           Đổi chỗ cho nhau nên tiêu đề vẫn đúng một dòng, không dài thêm px nào. */
                                                                /* [2026-08-30] Việc ĐÃ XONG ẩn đi, thay bằng một dòng gộp ở cuối thân nhóm. Ẩn bằng class
           trên thân nhóm để chạm một cái là đổi ngay, không phải dựng lại HTML rồi mất chỗ đang
           cuộn. Dùng con TRỰC TIẾP (>) để mai này có lồng thêm gì bên trong cũng không bị vạ lây. */

/* Bottom Nav & Mobile Menu Initial Hidden (Mặc định ẩn trên Desktop) */
        #mobile-bottom-nav, #mv-project-menu-sheet, #mv-project-menu-overlay { display: none; }

        h1 { text-align: center; text-transform: uppercase; font-size: 18px; margin: 0 0 5px 0; letter-spacing: 2px; outline: none; border-bottom: 1px dotted transparent; transition: all 0.2s; font-weight: 900;}
        h1:focus { border-bottom: 1px dotted var(--text-color); }
        
        .info-editable { text-align: center; font-style: italic; font-size: 13px; padding: 5px; border: 1px dotted transparent; outline: none; transition: all 0.2s; }
        .info-editable:hover { border: 1px dotted #999; }
        .info-editable:focus { border: 1px solid var(--border-color); }

        .control-panel { background-color: var(--panel-bg); padding: 0; margin-bottom: 15px; display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; font-size: 11px; font-weight: bold; border: none; z-index: 500; }

/* ====================================================================
           KHỐI TÊN CÔNG TRÌNH — HÀNG RIÊNG NGAY TRÊN BẢNG (2026-08-22)
           Trước đây khối này nằm trong .control-panel. Mà .control-panel mang
           class print-hide, nên khi in thẳng trang ra A4 thì TÊN CÔNG TRÌNH BỊ
           MẤT — bản in không có tiêu đề. Đưa ra ngoài là sửa luôn lỗi đó: khối
           này giờ không còn print-hide nên in ra bình thường.
           (Bản báo cáo PDF trong hộp thoại thì vẫn không phụ thuộc chỗ này — nó
           đọc innerText của #project-title rồi tự dựng tài liệu riêng.)
           Trên màn hình giữ đúng MỘT dòng: tên đậm bên trái, thông tin mờ hơn
           bên cạnh, cả hai cắt bằng dấu ... khi dài. Khi in thì bung ra thành
           tiêu đề hai dòng đầy đủ — xem khối @media print bên dưới. */
        #khoi-ten-cong-trinh {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: nowrap;
            min-width: 0;
            padding: 8px 16px !important;
            margin: 0 !important;
            box-sizing: border-box;
            background: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            width: 100%;
            max-height: 90px;
            opacity: 1;
            transform: translateY(0);
            overflow: hidden;
            transition: max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.2s ease,
                        padding 0.26s ease,
                        transform 0.26s ease;
        }
        body.cp-thu-gon #khoi-ten-cong-trinh {
            max-height: 0 !important;
            opacity: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0 !important;
            border-bottom: none !important;
            transform: translateY(-8px);
            pointer-events: none !important;
        }
        body.cp-thu-gon #pc-material-alert-banner {
            display: none !important;
        }
        .project-header-titles {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1 1 auto;
        }
        #khoi-ten-cong-trinh #project-title {
            font-size: 15px !important;
            font-weight: 900 !important;
            margin: 0 !important;
            padding: 0 !important;
            letter-spacing: 0.3px !important;
            text-align: left !important;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            min-width: 0;
            line-height: 1.35;
        }
        #khoi-ten-cong-trinh #project-info {
            font-size: 11.5px !important;
            text-align: left !important;
            padding: 0 !important;
            margin: 0 !important;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            min-width: 0; opacity: 0.75;
            line-height: 1.35;
        }
        /* MỐC HỢP ĐỒNG trong hàng tên công trình — thu gọn 23/08.
           Trong thanh bên nó bị bó trong cột 212px nên tự xuống hai dòng (86px cao, 181px
           rộng). Ra hàng ngang thoáng chỗ thì nó dàn hết ra: 482px rộng, 48px cao, kéo cả
           hàng tên từ 21px lên 54px. Ở đây siết lại thành một dải gọn: bỏ chữ "Mốc Hợp
           đồng:" (chỉ giữ icon + tooltip), rút đệm và cỡ chữ.
           flex-shrink: 0 để nó không bị bóp méo — phần co giãn nhường cho #project-info,
           ô đó có min-width:0 và tự cắt ba chấm. */
        #khoi-ten-cong-trinh .control-group-box {
            flex-shrink: 0;
            gap: 4px !important;
            padding: 1px 6px !important;
            white-space: nowrap;
        }
        #khoi-ten-cong-trinh .control-group-box > span:first-child {
            font-size: 0 !important;   /* giấu chữ, giữ icon svg bên trong */
        }
        #khoi-ten-cong-trinh .control-group-box > span:first-child svg {
            width: 11px; height: 11px;
        }
        #khoi-ten-cong-trinh .control-group-box label {
            font-size: 11px !important;
        }
        #khoi-ten-cong-trinh .control-group-box input[type="date"] {
            font-size: 11px !important;
            padding: 1px 3px !important;
        }
        @media screen and (max-width: 760px) {
            #khoi-ten-cong-trinh { display: none !important; }
        }

        /* Cụm KHUNG NHÌN gom vào một nút thả xuống.
           Trước đây 5 điều khiển (kiểu xem, số ngày hiển thị, HÔM NAY, số ngày lùi,
           XEM TOÀN BỘ) nằm dàn ngang, đẩy hàng 2 của bảng điều khiển lên 61px và hất
           nút "Ngày nghỉ" rớt xuống một hàng riêng. Gom lại còn một nút ~110px thì hàng 2
           về đúng một dòng. Các điều khiển bên trong giữ NGUYÊN id và sự kiện, chỉ đổi
           chỗ đứng — nên mọi hàm đang đọc chúng không phải sửa gì. */
        .cp-khungnhin-wrap { position: relative; display: inline-flex; }
        .cp-khungnhin-panel {
            display: none !important;
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            z-index: 1200;
            flex-direction: column;
            align-items: stretch;
            flex-wrap: nowrap !important;
            box-sizing: border-box !important;
            gap: 0 !important;
            width: 290px;
            max-width: min(320px, calc(100vw - 16px)) !important;
            max-height: calc(100dvh - 48px);
            overflow-y: auto;
            overflow-x: hidden;
            padding: 12px 14px !important;
            background: var(--card-bg) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            text-align: left;
            white-space: normal;
        }
        .cp-khungnhin-panel * {
            box-sizing: border-box;
        }
        .cp-khungnhin-wrap.mo .cp-khungnhin-panel { display: flex !important; }
        .cp-khungnhin-panel::-webkit-scrollbar {
            width: 6px;
        }
        .cp-khungnhin-panel::-webkit-scrollbar-thumb {
            background: var(--border-color, #cbd5e1);
            border-radius: 4px;
        }
        .cp-khungnhin-panel::-webkit-scrollbar-thumb:hover {
            background: var(--note-color, #94a3b8);
        }
        .kn-tieu-de {
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            color: var(--note-color);
            margin-bottom: 10px;
        }
        .kn-nhan {
            display: block;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 4px;
        }
        .kn-native { display: none !important; }
        .kn-stepper {
            display: flex; align-items: center; width: 100%; height: 34px; overflow: hidden;
            border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-color);
            box-sizing: border-box;
        }
        .kn-stepper button {
            width: 32px; height: 100%; flex: none; border: 0; background: transparent;
            color: var(--brand-primary); font: 800 18px/1 'Be Vietnam Pro', sans-serif; cursor: pointer;
        }
        .kn-stepper button:hover { background: var(--brand-primary-light); }
        .kn-stepper input {
            flex: 1; min-width: 0; padding: 0 2px; border: 0; outline: 0; box-shadow: none;
            background: transparent; color: var(--text-color); text-align: right;
            font: 700 12.5px 'JetBrains Mono', monospace;
        }
        .kn-stepper .kn-donvi { flex: none; padding: 0 4px 0 5px; }
        .kn-view-segments {
            display: flex; gap: 2px; width: 100%; padding: 2px; border: 1px solid var(--border-color);
            border-radius: 6px; background: var(--bg-color); box-sizing: border-box;
        }
        .kn-ngay-nghi {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .kn-ngay-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 32px;
            padding: 0 10px;
            border: 1px solid var(--border-color, #e2e8f0);
            border-radius: 8px;
            background: var(--bg-color, #f8fafc);
            cursor: pointer;
            font: 700 12px 'Be Vietnam Pro', sans-serif;
            color: var(--text-color, #0f172a);
            box-sizing: border-box;
            user-select: none;
        }
        .kn-ngay-chip input {
            margin: 0;
            width: 14px;
            height: 14px;
            accent-color: var(--brand-primary, #20564c);
        }
        .kn-ngay-chip:has(input:checked) {
            border-color: var(--brand-primary-border, #a3d9c7);
            background: var(--brand-primary-light, #e6f4ef);
            color: var(--brand-primary-text, #17423a);
        }
        body.dark-mode .kn-ngay-chip:has(input:checked) {
            border-color: var(--xv-d1-line, #24574a);
            background: var(--xv-d1-soft-solid, #163830);
            color: var(--xv-d1-text, #6ee7b7);
        }
        .kn-ngay-nghi.kn-highlight {
            outline: 2px solid var(--brand-primary, #20564c);
            outline-offset: 3px;
            border-radius: 8px;
            background: var(--brand-primary-light, #e6f4ef);
            padding: 4px;
            transition: outline 0.3s ease, background 0.3s ease;
        }
        body.dark-mode .kn-ngay-nghi.kn-highlight {
            outline-color: var(--xv-d1-text, #6ee7b7);
            background: rgba(110, 231, 183, 0.12);
        }
        .kn-o {
            font-family: inherit;
            font-size: 12px;
            font-weight: 700;
            padding: 5px 7px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            background: var(--bg-color);
            color: var(--text-color);
        }
        .cp-khungnhin-panel select.kn-o { width: 100%; }
        .kn-donvi { font-size: 11.5px; font-weight: 700; color: var(--note-color); }
        /* Câu giải thích: đây là phần gánh việc "cho dễ hiểu", nên KHÔNG được đặt
           opacity làm mờ đi — ở cỡ 10.5px thì mờ nữa là hụt ngưỡng tương phản. */
        .kn-ghi-chu {
            font-size: 11px;
            line-height: 1.45;
            color: var(--note-color);
            margin: 5px 0 0 0;
        }
        .kn-nhanh {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 4px;
            margin-top: 7px;
        }
        .cp-khungnhin-panel .kn-nhanh .btn-day-preset {
            min-width: 0; padding: 5px 0; border-radius: 5px;
            font: 600 11px 'Be Vietnam Pro', sans-serif; white-space: nowrap;
        }
        .cp-khungnhin-panel .kn-nhanh .btn-day-preset.is-chon {
            border-color: var(--brand-primary); background: var(--brand-primary-light);
            color: var(--brand-primary); font-weight: 800;
        }
        .kn-vach {
            border-top: 1px solid var(--border-color);
            margin: 12px 0;
        }
        .kn-meo { font-size: 11px; line-height: 1.45; color: var(--note-color); }
        .kn-phim {
            font-family: inherit;
            font-size: 11px;
            font-weight: 800;
            padding: 1px 5px;
            border: 1px solid var(--border-color);
            border-radius: 3px;
            background: var(--bg-color);
            white-space: nowrap;
        }
        /* Nút mở Khung nhìn: nhãn chức năng rõ ràng và số ngày đặt trong ngoặc đơn trang nhã */
        #btn-khungnhin-trigger { display: inline-flex; align-items: center; gap: 4px; }
        #btn-khungnhin-trigger .kn-trigger-label { font-weight: 600; color: var(--text-color); }
        #btn-khungnhin-trigger #kn-tom-tat { font-weight: 500; font-size: 11px; opacity: 0.85; }

        /* Băng thông báo hệ thống: ẩn luôn trên MÁY TÍNH (điện thoại đã ẩn từ trước).
           Nó chiếm 48px nằm ngay phía trên bảng dữ liệu chỉ để đăng tin của nhà phát triển —
           thứ khách xem một lần rồi thôi. Toàn bộ tin vẫn còn nguyên trong bảng
           "CÓ GÌ MỚI" (nút ở thanh trên), kèm chấm đỏ khi có tin chưa đọc nên không bỏ sót. */
        #system-announcement-banner { display: none !important; }

        /* ====================================================================
           BẢNG ĐIỀU KHIỂN DÍNH: ĐẦU TRANG ĐẦY ĐỦ, KHI CUỘN CÒN 1 HÀNG NHANH
           Trạng thái được quyết định bởi một mốc cố định nằm TRƯỚC bảng điều khiển,
           không dựa vào hướng lăn chuột hay chiều cao đang thay đổi của bảng. Vì vậy
           bảng chỉ thu một lần khi vượt mốc và bung một lần khi quay lại, không nháy.
           ==================================================================== */
        /* ====================================================================
           THANH BÊN TRÁI (GIAI ĐOẠN 1 · 2026-08-22)
           Gom nhóm nút thiết lập/báo cáo ra khỏi thanh ngang để bảng số liệu
           bắt đầu cao hơn. Đúng nhóm mà chế độ thu gọn sẵn có (body.cp-thu-gon)
           đã tự phân loại là "không cần khi đang làm việc".

           VÌ SAO TRƯỢT BẰNG transform CHỨ KHÔNG PHẢI ĐỔI BỀ NGANG:
           Bảng rộng đúng 100% khung chứa và MỌI cột tính theo phần trăm
           (--w-task 18.5%, và th.col-week = phần còn lại chia --timeline-cols).
           Đo thật trên công trình 15 hàng / 745 ô: đổi bề ngang 200px làm cột tuần
           co từ 12,61px xuống 10,75px và tốn 9,6ms một lần tính lại — tức 58%
           ngân sách của một khung hình 60fps, trên một công trình còn nhỏ.
           Nếu cho hiệu ứng chạy bằng cách đổi bề ngang trong 280ms thì trình
           duyệt phải tính lại toàn bộ bảng khoảng 15 lần liên tiếp, và các cột
           co giãn liên tục trong lúc trượt — trông như bảng bị bóp.
           Cách làm ở đây: panel trượt bằng transform (chạy trên card đồ họa,
           KHÔNG bắt bảng tính lại), còn padding của .container đổi đúng MỘT
           lần. TUYỆT ĐỐI KHÔNG thêm transition cho padding-left.
           ==================================================================== */
        /* Rail và panel đều là chuyện của MÁY TÍNH. Phải ẩn ở đây, NGOÀI media query —
           mọi quy tắc của chúng nằm trong khối min-width:761px, nên nếu không có dòng
           này thì dưới 761px chúng rơi về display mặc định và đổ ra giữa trang điện
           thoại. Điện thoại đã có thanh điều hướng đáy + bảng Menu riêng. */
        /* #rail-tai nằm chung dòng này CÓ LÝ DO: quy tắc bật/tắt nó đều nằm trong
           @media (min-width: 761px), nên nếu chỉ khai báo display:none ở trong đó thì
           dưới 761px KHÔNG quy tắc nào áp và <button> rơi về inline-block mặc định —
           một cái tai 12px lơ lửng giữa giao diện điện thoại. Đã đo thấy đúng lỗi này
           một lần với chính #rail; đừng dời dòng này vào trong media query. */
        #rail, #thanh-ben, #rail-tai { display: none; }
        #mv-project-menu-sheet, #mv-project-menu-overlay { display: none; }

        @media screen and (min-width: 761px) {
            #mv-project-menu-sheet, #mv-project-menu-overlay { display: none !important; } }
        /* ============================================================
           LOẠI BỎ THANH BÊN DỌC (#RAIL & #THANH-BEN) & CONTAINER TRÀN 100%
           ============================================================ */
        #rail, #rail-tai, #thanh-ben {
            display: none !important;
        }
        @media screen and (min-width: 761px) {
            .container {
                padding: 0 !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            body.rail-an .container,
            body.thanh-ben-dang-dong .container,
            body.thanh-ben-mo .container {
                padding-left: 0 !important;
            }
            .dashboard-panel {
                padding: 10px 16px !important;
                margin: 0 !important;
                box-sizing: border-box !important;
                border-bottom: 1px solid var(--border-color) !important;
            }
            #pc-material-alert-banner {
                margin: 8px 16px !important;
            }
        }
        
        .control-panel-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
        
        /* ============================================================
           THANH CÔNG CỤ RIBBON (EXCEL / WORD STYLE)
           ============================================================ */
        @media screen and (min-width: 761px) {
            .control-panel {
                position: sticky;
                top: 41px !important;
                z-index: 500 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                flex-wrap: nowrap !important;
                gap: 6px !important;
                padding: 6px 16px !important;
                background: var(--card-bg) !important;
                border: none !important;
                border-bottom: 1px solid var(--border-color) !important;
                border-radius: 0 !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
                margin: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
                overflow: visible !important;
            }
            body.fullscreen-gantt-active .control-panel {
                top: 0 !important;
            }
            .cp-cluster {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                flex-wrap: nowrap;
                flex-shrink: 0;
            }
            .project-actions-dropdown,
            .export-actions-dropdown,
            .help-actions-dropdown,
            .cp-khungnhin-wrap {
                position: relative;
                display: inline-flex;
                align-items: center;
                z-index: 501;
            }
            #project-menu-dropdown-content,
            #new-project-menu-dropdown-content,
            #display-menu-dropdown-content,
            #export-menu-dropdown-content,
            #help-menu-dropdown-content,
            .cp-khungnhin-panel {
                z-index: 10005 !important;
                box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
            }
            .pmd-mui-ten { font-size: 11px; line-height: 1; opacity: 0.8; }
            
        }

        .flex-task {
            display: flex !important;
            align-items: flex-start !important;
            gap: 5px !important;
            position: relative !important;
            width: 100% !important;
            white-space: normal !important;
            overflow: visible !important;
            flex-wrap: nowrap !important;
        }
        .flex-task .collapse-toggle {
            flex-shrink: 0 !important;
            margin-top: 1px !important;
            align-self: flex-start !important;
        }
        .task-name-edit {
            flex: 1 1 auto !important;
            width: auto !important;
            min-width: 0 !important;
            overflow: visible !important;
            text-overflow: clip !important;
            white-space: pre-wrap !important;
            display: block;
            line-height: 1.35;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            padding-right: 22px; /* Giữ cùng bề ngang khi đọc và sửa để hàng không đổi chiều cao. */
        }
        
        /* THAO TÁC INLINE TRONG CỘT HẠNG MỤC — NỔI LÊN, KHÔNG CHIẾM CHỖ
           [2026-08-22] Trước đây cụm này nằm trong dòng chảy và chiếm 44px BỀ NGANG
           VĨNH VIỄN, dù nó có opacity 0 và chỉ hiện khi rê chuột vào hàng. Tức là 44px
           bị một thứ vô hình giữ chỗ. Đo được: ô nhập tên hạng mục chỉ còn 122px trong
           một cột rộng 250px, nên tên phải xuống 3 dòng và hàng cao 58,6px.
           Cho nó nổi tuyệt đối lên mép phải: ô tên lên 170px, hàng xuống 44,2px, một
           màn hình xem được 15,1 hàng thay vì 11,4 — mà không lấy bề ngang của cột nào.
           Nền khi hiện phải khớp ĐÚNG màu nền hàng lúc rê chuột, nếu không sẽ thấy chữ
           lòi ra sau hai cái nút. */
        .task-inline-actions {
            position: absolute !important;
            right: 2px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
            display: inline-flex !important;
            align-items: center !important;
            gap: 3px !important;
            opacity: 0.25;
            transition: opacity 0.15s ease;
            padding: 0 2px;
            border-radius: 4px;
            flex-shrink: 0 !important;
            height: 20px;
        }
        #table-body tr:hover .task-inline-actions {
            opacity: 1;
            background: #f1f5f9;
            box-shadow: -8px 0 9px #f1f5f9;
        }
        body.dark-mode #table-body tr:hover .task-inline-actions {
            background: #1e293b;
            box-shadow: -8px 0 9px #1e293b;
        }
        .task-inline-actions .btn-insert {
            background: #dbeafe;
            color: #1e40af;
            border: 1px solid #93c5fd;
            border-radius: 4px;
            padding: 1px 5px;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            line-height: 1.1;
        }
        .task-inline-actions .btn-insert:hover {
            background: #2563eb;
            color: #ffffff;
        }
        .task-inline-actions .btn-delete {
            background: #f1f5f9;
            /* [UX-15] #64748b trên #f1f5f9 đạt 4,34, thiếu ngưỡng 4,5 ở cỡ chữ 10px. #475569
               đạt 6,98 — cùng giá trị đã dùng cho nút ✕ đóng modal, nên không thêm tông xám mới.
               Nút + bên cạnh vốn đã đạt 7,15, giờ hai nút cân nhau về độ rõ. */
            color: #475569;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            padding: 1px 5px;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            line-height: 1.1;
        }
        .task-inline-actions .btn-delete:hover {
            background: #ef4444;
            color: #ffffff;
            border-color: #ef4444;
        }
        .drag-handle {
            cursor: grab;
            font-size: 11px;
            font-weight: 800;
            /* [UX-10] Trước là #94a3b8 kèm opacity 0.35 — đo ra 2,56, tức gần như vô hình khi
               chưa rê chuột. Nhưng đây là ĐIỀU KHIỂN THẬT (kéo đổi thứ tự hạng mục), không phải
               hoa văn, và trên màn hình cảm ứng thì không có trạng thái hover để nó hiện ra.
               Bỏ opacity, đậm màu lên #64748b (4,76). Hiệu ứng nhấn khi rê chuột vẫn giữ
               nguyên ở quy tắc #table-body tr:hover ngay dưới. */
            color: #64748b;
            padding: 0;
            user-select: none;
            flex-shrink: 0;
            transition: opacity 0.15s ease, color 0.15s ease;
            line-height: 1;
            /* [2026-08-22] Đưa ra khỏi dòng chảy, nổi vào đúng dải lề trái của ô. Trước
               đây nó chiếm 15px bề ngang của MỌI hàng chỉ để chờ được kéo. Nay ô nhập tên
               được thêm 19px — phần lớn chỗ trống thu về trong đợt này là từ đây chứ
               không phải từ huy hiệu C/P/M.
               Ghi chú lịch sử: [UX-10] từng cố ý bỏ kiểu "mờ tịt khi chưa rê chuột" vì lý
               do tương phản, lập luận là màn cảm ứng không có hover. Lập luận đó nay không
               còn đúng: quy tắc @media (hover:none) bên dưới đã ẩn hẳn nút này trên cảm
               ứng rồi. Trên máy tính thì muốn kéo là buộc phải rê chuột vào hàng đã, nên
               hiện lúc đó là vừa đủ. Khi hiện thì hiện HẲN (opacity 1, màu xanh), không
               để nửa mờ — nửa mờ mới đúng là cái UX-10 bác bỏ. */
            position: absolute;
            /* Gốc định vị là .flex-task (nó có position:relative), KHÔNG phải ô. Mà
               .flex-task bắt đầu sau padding-left của ô, nên phải kéo ngược ra bằng left
               âm mới xuống được dải lề. Đặt left:1px như phản xạ thông thường là nút rơi
               đúng lên trên huy hiệu C/P/M — đã đo và dính đúng lỗi đó. */
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            z-index: 2;
        }
        #table-body tr:hover .drag-handle {
            opacity: 1;
            color: #2563eb;
        }
        .drag-handle:active {
            cursor: grabbing;
        }

        /* NÚT GẠT (TOGGLE SWITCH) NHỎ GỌN - DÙNG CHO CÁC NÚT BẬT/TẮT TRÊN THANH CÔNG CỤ */
        .mini-toggle-switch {
            display: inline-flex;
            align-items: center;
            width: 24px;
            height: 14px;
            border-radius: 20px;
            background: #cbd5e1;
            position: relative;
            flex-shrink: 0;
            transition: background 0.2s ease;
        }
        .mini-toggle-switch .toggle-knob {
            position: absolute;
            top: 1.5px;
            left: 1.5px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);
            transition: transform 0.2s ease;
        }
        .mini-toggle-switch.on { background: var(--brand-primary); }
        .mini-toggle-switch.on .toggle-knob { transform: translateX(10px); }
        body.dark-mode .mini-toggle-switch { background: #475569; }

        .control-panel input[type="date"], .control-panel input[type="number"], .control-panel select { font-size: 11px; padding: 4px 6px; width: auto; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); border-radius: var(--radius-sm) !important; font-family: inherit;}

        .btn-data { 
            background-color: var(--card-bg); 
            color: var(--text-color); 
            border: 1px solid var(--border-color); 
            padding: 4px 8px; 
            font-weight: 700; 
            font-size: 11px; 
            cursor: pointer; 
            transition: all 0.15s ease; 
            letter-spacing: 0.2px; 
            border-radius: var(--radius-sm) !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            line-height: 1.3;
        }
        .btn-data:hover { 
            background-color: var(--highlight); 
            border-color: #94a3b8; 
            color: var(--text-color); 
        }
        .btn-data:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
        
        .btn-brand-tint {
            background: var(--brand-primary-light) !important;
            color: var(--brand-primary-text) !important;
            border: 1px solid var(--brand-primary-border) !important;
        }
        .btn-brand-tint:hover {
            background: var(--highlight) !important;
            color: var(--brand-primary) !important;
        }

        .btn-primary-action {
            background: linear-gradient(135deg, #0075ff 0%, #0056cc 100%) !important;
            color: #ffffff !important;
            border: 1px solid #0056cc !important;
            box-shadow: 0 2px 8px rgba(0, 117, 255, 0.3) !important;
            font-weight: 800 !important;
            font-size: 11.5px !important;
            letter-spacing: 0.3px !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .btn-primary-action:hover {
            background: linear-gradient(135deg, #1a85ff 0%, #0047b3 100%) !important;
            box-shadow: 0 4px 14px rgba(0, 117, 255, 0.45) !important;
            transform: translateY(-1px) !important;
            color: #ffffff !important;
        }
        .btn-primary-action:active {
            transform: translateY(0) !important;
            box-shadow: 0 1px 4px rgba(0, 117, 255, 0.25) !important;
        }

        /* DARK MODE BUTTON ENHANCEMENTS */
        body.dark-mode .btn-data {
            background-color: var(--xv-s1, #111e1b);
            color: #f1f5f9;
            border-color: var(--xv-s2, #1e332f);
        }
        body.dark-mode .btn-data:hover {
            background-color: var(--xv-s4, #172825);
            border-color: var(--xv-s7, #334d47);
            color: #ffffff;
        }
        body.dark-mode .btn-primary-action {
            background: linear-gradient(135deg, #0075ff 0%, #0052cc 100%) !important;
            color: #ffffff !important;
            border-color: #388bfd !important;
            box-shadow: 0 2px 12px rgba(0, 117, 255, 0.45) !important;
        }
        body.dark-mode .btn-primary-action:hover {
            background: linear-gradient(135deg, #1a85ff 0%, #0047b3 100%) !important;
            box-shadow: 0 4px 16px rgba(0, 117, 255, 0.6) !important;
        }
        /* ============================================================
           MENU QUẢN LÝ CÔNG TRÌNH (gộp 2026-08-23) — ba phần có nhãn trong một bảng.
           Ba cụm cũ mỗi cụm một khuôn mục riêng (11px/600 so với 11.5px/700, đệm
           12px so với 14px); gộp vào một bảng mà giữ nguyên thì nhìn ra ngay ba
           mảnh chắp lại. Ba class dưới đây là khuôn chung cho cả bảng.
           CỐ Ý KHÔNG đặt !important cho display: ba mục #btn-del-project,
           #btn-leave-project và #btn-share-project bị ẩn/hiện theo quyền bằng
           style nội tuyến — style nội tuyến phải là bên thắng. Đây đúng cái bẫy
           đã dính hôm 23/08 trong thanh bên.
           ============================================================ */
        #project-menu-dropdown-content .pmd-muc,
        #new-project-menu-dropdown-content .pmd-muc {
            display: flex;
            align-items: center;
            gap: 7px;
            width: 100%;
            box-sizing: border-box;
            text-align: left;
            padding: 7px 14px;
            background: none;
            border: none;
            font-family: inherit;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-color);
            cursor: pointer;
        }
        #project-menu-dropdown-content .pmd-muc svg,
        #new-project-menu-dropdown-content .pmd-muc svg { flex-shrink: 0; }
        /* CỐ Ý KHÔNG có opacity. Khuôn nhãn nhóm quen dùng trong app (.tb-nhan) đặt
           opacity 0.75, nhưng ở cỡ chữ 9.5px thì mức đó chỉ cho tương phản 4,03 (sáng)
           và 4,46 (tối) — dưới ngưỡng 4,5:1 của chữ thường. Bỏ opacity đưa lên
           7,58 / 6,96 mà nhãn vẫn đủ mờ so với mục nhờ cỡ chữ và màu --note-color. */

        body.dark-mode #project-menu-dropdown-content,
        body.dark-mode #new-project-menu-dropdown-content {
            background-color: var(--xv-s1, #111e1b) !important;
            border-color: var(--xv-s2, #1e332f) !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
        }
        body.dark-mode #project-menu-dropdown-content button,
        body.dark-mode #new-project-menu-dropdown-content button {
            color: #f1f5f9 !important;
        }
        body.dark-mode #project-menu-dropdown-content button:hover,
        body.dark-mode #new-project-menu-dropdown-content button:hover {
            background-color: var(--xv-s4, #172825) !important;
            color: var(--xv-d1, #34d399) !important;
        }
        body.dark-mode input[type="date"],
        body.dark-mode input[type="number"],
        body.dark-mode select {
            background: var(--xv-s0, #0b1312) !important;
            color: #f1f5f9 !important;
            border-color: var(--xv-s2, #1e332f) !important;
        }

        /* Không để chỉ báo đang ẩn chiếm hơn 100px rồi đẩy các nút tách xa nhau. */
        /* [DỜI 2026-08-23] Nay nằm trên thanh trên cùng nền xanh đậm, không còn trên thanh
           điều khiển nền sáng — nên màu chữ phải là màu sáng. Khuôn viên bo tròn lấy đúng
           kiểu của chuông thông báo và ô tài khoản ngay cạnh. */
        #autosave-indicator {
            display: none;
            align-items: center;
            font-size: 11px;
            font-weight: bold;
            align-self: center;
            white-space: nowrap;
            padding: 4px 9px;
            border-radius: 999px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.22);
            color: #d1fae5;
            letter-spacing: 0.2px;
        }
        #autosave-indicator.show { display: inline-flex; opacity: 1; }
        /* Điện thoại đã có #mv-sync-status-text riêng trong thanh trạng thái của nó. */
        @media screen and (max-width: 760px) {
            #autosave-indicator, #autosave-indicator.show { display: none !important; }
        }

        table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
        th, td { border: 1px solid var(--border-color); padding: 4px 2px; text-align: center; vertical-align: top; position: relative; box-sizing: border-box; }
        /* [2026-08-22] Siết đệm trên/dưới của RIÊNG thân bảng tiến độ từ 4px xuống 2px.
           Chỉ nhắm tbody của #timeline-table chứ không sửa quy tắc th,td ở trên: quy tắc
           đó dùng chung cho mọi bảng khác trong app (vật tư, cảnh báo, báo cáo).
           Đo được: 4px -> 2px làm hàng thấp đi đúng 4px, cộng dồn với việc nới ô tên thì
           hàng còn 37,6px thay vì 58,6px — một màn hình xem được 17,8 hàng thay vì 11,4. */
        #timeline-table tbody td { padding-top: 2px; padding-bottom: 2px; }
        th { background-color: var(--highlight); font-weight: 900; vertical-align: middle; text-transform: uppercase; font-size: 11px;}
        /* ĐỆM NGANG CHO TIÊU ĐỀ CÁC CỘT TRÁI + CĂN GIỮA DỌC CHO Ô DỮ LIỆU — 2026-08-23.

           (1) th chung chỉ có padding ngang 2px nên chữ tiêu đề bám sát vạch kẻ hai bên,
               nhìn dính vào cột kế. Nới lên 6px. Các tiêu đề dài như "PHỤ THUỘC" và
               "TRẠNG THÁI" sẽ tự xuống hai dòng — người dùng đã đồng ý, và hàng tiêu đề
               cao 51px nên thừa chỗ cho hai dòng chữ 10px.
               CHỈ áp cho cột trái. Cột tuần .col-week chỉ rộng 11px, nới đệm là vỡ timeline.

           (2) td chung đang vertical-align: top nên nội dung mọi ô dính lên mép trên
               (đo được: cách trên 3px, cách dưới 8-13px). Tên hạng mục một dòng vì thế
               nằm sát viền trên. Đổi sang middle cho các cột dữ liệu bên trái.
               KHÔNG đụng .week-cell: thanh tiến độ trong đó vẽ bằng ::after định vị tuyệt
               đối, đổi canh dọc của ô là xê dịch cả dải timeline. */
        #timeline-table th.col-task, #timeline-table th.col-dep, #timeline-table th.col-note,
        #timeline-table th.col-date, #timeline-table th.col-days, #timeline-table th.col-status,
        #timeline-table th.col-progress {
            padding-left: 6px;
            padding-right: 6px;
            white-space: normal;
            line-height: 1.25;
        }
        #table-body td.col-task, #table-body td.col-dep, #table-body td.col-note,
        #table-body td.col-date, #table-body td.col-days, #table-body td.col-status,
        #table-body td.col-progress {
            vertical-align: middle;
        }
        thead { display: table-header-group; } 
        
        /* padding-left 16px (trước 10px) là để chừa DẢI LỀ cho nút kéo thả ↕ nay nổi
           tuyệt đối — xem .drag-handle. Gốc định vị của nó là .flex-task chứ không phải ô,
           nên nó được kéo ngược ra bằng left âm và cần đúng chỗ này để không đè lên huy
           hiệu C/P/M. Nới 6px ở đây nhưng lấy lại 15px từ việc nút kéo thả rời dòng chảy. */
        .col-task { width: var(--w-task); text-align: left; padding-left: 16px; position: relative; overflow: visible; white-space: normal !important; }
        .col-note { width: var(--w-note); position: relative; overflow: visible; white-space: normal !important; vertical-align: middle !important; text-align: center !important; }
        .col-assignee { width: var(--w-assignee); min-width: var(--w-assignee); max-width: var(--w-assignee); position: relative; overflow: hidden; text-align: center !important; vertical-align: middle; padding: 0 4px !important; box-sizing: border-box; }
        body:not(.has-multi-members) .col-assignee { display: none !important; }
        body.has-multi-members { --w-assignee: 110px; }
        body.has-multi-members .col-assignee { display: table-cell !important; }
        /* Cột Nhãn (sau Người phụ trách): ẩn mặc định, bật bằng nút Cột hiển thị hoặc tự bật khi công trình có nhãn */
        .col-nhan { width: var(--w-nhan); min-width: var(--w-nhan); max-width: var(--w-nhan); position: relative; overflow: hidden; vertical-align: middle; padding: 0 6px !important; box-sizing: border-box; display: none; text-align: left; }
        /* Độ rộng cột ở Timeline mở rộng: người dùng kéo đổi được, giá trị nhớ trong --xv-tl-* (xvCotRongNap) */
        body { --w-note: var(--xv-tl-note, 120px); --w-date: var(--xv-tl-date, 58px); --w-days: var(--xv-tl-days, 40px); --w-status: var(--xv-tl-status, 88px); }
        body.nhan-on-mode { --w-nhan: var(--xv-tl-nhan, 150px); }
        body.nhan-on-mode th.col-nhan, body.nhan-on-mode td.col-nhan { display: table-cell !important; }
        body.split-pane-collapsed, body.mode-timeline-focus { --w-nhan: 0px !important; }
        body.split-pane-collapsed th.col-nhan, body.split-pane-collapsed td.col-nhan, body.mode-timeline-focus th.col-nhan, body.mode-timeline-focus td.col-nhan { display: none !important; }
        .col-date { width: var(--w-date); position: relative; overflow: hidden; }
        .col-days { width: var(--w-days); position: relative; overflow: hidden; }
        .col-dep { width: var(--w-dep); min-width: var(--w-dep); max-width: var(--w-dep); position: relative; overflow: hidden; text-align: center !important; padding: 0 1px !important; }
        .col-status { width: var(--w-status); overflow: visible; } 
        .col-progress { width: var(--w-progress); text-align: center; position: relative; overflow: hidden; }
        
        th.col-week { width: calc( (100% - var(--w-task) - var(--w-note) - var(--w-assignee) - var(--w-nhan) - (var(--w-date) * 2) - var(--w-days) - var(--w-dep) - var(--w-status) - var(--w-progress)) / var(--timeline-cols) ); font-weight: bold; padding: 4px 0; overflow: hidden;}
        td.week-cell { overflow: visible; padding: 0; }
        th.col-week, td.week-cell { border-left: 1px dotted var(--border-color); border-right: 1px dotted var(--border-color); }

        body.mode-list th.col-week, body.mode-list td.week-cell,
        body.mode-list #today-line-overlay, body.mode-list #today-line-label { display: none !important; }
        body.mode-list { --w-task: 36%; --w-note: 18%; --w-date: 12%; --w-days: 6%; --w-status: 10%; --w-dep: 6%;}

        body.mode-timeline-focus { --w-task: 24%; --w-note: 0%; }
        body.mode-timeline-focus th.col-note, body.mode-timeline-focus td.col-note { display: none !important; }

        /* CHẾ ĐỘ XEM TỔNG HỢP TIẾN ĐỘ / BÁO CÁO PC (DESIGN HANDOFF 06/09/2026) */
        body.view-mode-report #khoi-ten-cong-trinh,
        body.view-mode-report .control-panel,
        body.view-mode-report #dashboard-panel,
        body.view-mode-report #welcome-banner,
        body.view-mode-report #table-wrapper,
        body.view-mode-report #pc-material-alert-banner,
        body.view-mode-report #system-announcement-banner {
            display: none !important;
        }
        body.view-mode-report #view-tong-hop {
            display: block !important;
            /* Cuộn xảy ra BÊN TRONG container Tổng hợp thay vì trên body/html.
               Giữ html/body overflow-y: hidden để nội dung Gantt bên dưới DOM
               không bao giờ lộ ra khi cuộn xuống cuối trang Báo cáo. */
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
            padding-bottom: 40px;
        }
        /* BÁO CÁO TỔNG QUAN TRÊN ĐIỆN THOẠI (bộ màn 390, nhóm 05): phủ kín màn hình, nằm DƯỚI hàng nút đáy
           (#mobile-bottom-nav z-index 8900) để vẫn có ☰ / GỬI BÁO CÁO / + như các màn khác. */
        @media screen and (max-width: 760px) {
            body.view-mode-report #mobile-view { display: none !important; }
            body.view-mode-report #view-tong-hop {
                position: fixed;
                inset: 0;
                height: auto;
                padding: 0;
                z-index: 8000;
                background: #eef0f5;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
        }
        /* CHẾ ĐỘ XEM BẢNG KANBAN */
        body.view-mode-kanban #khoi-ten-cong-trinh,
        body.view-mode-kanban .control-panel,
        body.view-mode-kanban #dashboard-panel,
        body.view-mode-kanban #welcome-banner,
        body.view-mode-kanban #table-wrapper,
        body.view-mode-kanban #pc-material-alert-banner,
        body.view-mode-kanban #system-announcement-banner,
        body.view-mode-kanban #view-tong-hop {
            display: none !important;
        }
        body.view-mode-kanban #view-kanban {
            display: block !important;
            height: calc(100vh - 52px);
            overflow: hidden;
            box-sizing: border-box;
        }
        body.view-mode-report #view-kanban,
        body.view-mode-report #view-materials {
            display: none !important;
        }

        /* ẨN TRIỆT ĐỂ CÁC BẢNG VIEW ĐỘC LẬP KHI KHÔNG Ở CHẾ ĐỘ ĐÓ */
        body:not(.view-mode-materials) #view-materials {
            display: none !important;
            min-height: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }
        body:not(.view-mode-kanban) #view-kanban {
            display: none !important;
            min-height: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }
        body:not(.view-mode-report) #view-tong-hop {
            display: none !important;
            min-height: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }

        /* CHẾ ĐỘ XEM BẢNG VẬT TƯ & MẪU MÃ CHUYÊN SÂU */
        body.view-mode-materials #khoi-ten-cong-trinh,
        body.view-mode-materials .control-panel,
        body.view-mode-materials #dashboard-panel,
        body.view-mode-materials #welcome-banner,
        body.view-mode-materials #table-wrapper,
        body.view-mode-materials #pc-material-alert-banner,
        body.view-mode-materials #system-announcement-banner,
        body.view-mode-materials #view-tong-hop,
        body.view-mode-materials #view-kanban {
            display: none !important;
        }
        body.view-mode-materials #view-materials {
            display: block !important;
            height: calc(100vh - 52px);
            overflow-y: auto;
            box-sizing: border-box;
        }
        body.view-mode-kanban #view-materials {
            display: none !important;
        }

        /* ================= HỘP THƯ GÓP Ý CŨ ĐÃ ĐƯỢC HỢP NHẤT VÀO BẢNG TÀI KHOẢN & HỖ TRỢ ================= */
        #modal-feedback-overlay,
        #modal-feedback-overlay.open {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        #modal-feedback-overlay .fb-modal-box {
            max-width: 500px;
            width: 95%;
            max-height: 90vh;
            background: var(--card-bg);
            border-radius: 14px;
            padding: 0;
            box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.45);
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            margin: auto;
        }
        #modal-feedback-overlay .fb-type-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        #modal-feedback-overlay .fb-type-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border: 1.5px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-color);
            background: var(--bg-color);
            user-select: none;
            box-sizing: border-box;
            transition: all 0.15s ease;
        }
        #modal-feedback-overlay .fb-type-item:hover {
            border-color: var(--brand-primary);
            background: var(--highlight);
        }
        #modal-feedback-overlay .fb-type-item input[type="radio"] {
            accent-color: var(--brand-primary);
            margin: 0;
            flex-shrink: 0;
            width: 15px;
            height: 15px;
        }
        #modal-feedback-overlay .fb-type-item span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
        }
        #modal-feedback-overlay .fb-user-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        #modal-feedback-overlay .fb-footer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-top: 4px;
        }

        @media (max-width: 760px) {
            #modal-feedback-overlay {
                padding: 10px !important;
                align-items: center !important;
                justify-content: center !important;
            }
            #modal-feedback-overlay .fb-modal-box {
                width: 95% !important;
                max-width: 450px !important;
                max-height: 88vh !important;
                border-radius: 14px !important;
                box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
            }
            #modal-feedback-overlay .fb-body-pane {
                padding: 12px 14px !important;
                max-height: calc(88vh - 95px) !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }
            #modal-feedback-overlay .fb-type-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 6px !important;
            }
            #modal-feedback-overlay .fb-type-item {
                padding: 6px 8px !important;
                font-size: 11px !important;
                gap: 6px !important;
            }
            #modal-feedback-overlay .fb-type-item span {
                font-size: 11px !important;
                line-height: 1.2 !important;
            }
            #modal-feedback-overlay .fb-user-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }
            #modal-feedback-overlay input,
            #modal-feedback-overlay textarea,
            #modal-feedback-overlay select {
                font-size: 13px !important;
                box-sizing: border-box !important;
            }
            #modal-feedback-overlay .fb-footer-row {
                display: flex !important;
                flex-direction: row !important;
                justify-content: space-between !important;
                align-items: center !important;
                gap: 8px !important;
            }
            #modal-feedback-overlay .fb-footer-buttons {
                display: flex !important;
                gap: 6px !important;
            }
            #modal-feedback-overlay .fb-footer-buttons button {
                padding: 7px 12px !important;
                font-size: 11px !important;
            }
            #modal-feedback-overlay .fb-zalo-link {
                font-size: 11px !important;
            }
        }

        /* ================= THẺ CHỈ SỐ DASHBOARD TINH GỌN (1 DÒNG DUY NHẤT) ================= */
        .dashboard-panel {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            margin-bottom: 10px;
            align-items: stretch;
        }
        .dash-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 6px 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 52px;
        }
        .dash-label {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--note-color);
            margin-bottom: 2px;
            white-space: nowrap;
        }
        /* [SỬA 2026-08-20] Hai thẻ "Vật tư khẩn cấp" và "Cảnh báo Tiến độ" có nhãn dạng flex
           (chữ bên trái + huy hiệu QUẢN LÝ ➔ / CHI TIẾT ➔ bên phải). Cả hai đều nowrap và mặc định
           flex item không co nhỏ hơn nội dung (min-width:auto), nên trên màn hình 375px huy hiệu
           bị đẩy TRÀN RA NGOÀI thẻ 19-20px — đo được, nhìn như bị cắt cụt. Cho phần chữ co lại và
           cắt bằng dấu ..., còn huy hiệu giữ nguyên vì đó mới là thứ bấm được. */
        .dash-label > span:first-child {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .dash-label > span:last-child:not(:first-child) {
            flex-shrink: 0;
            margin-left: 6px;
        }
        /* Huy hiệu hành động trên thẻ chỉ số. Trên máy tính hiện đủ chữ "QUẢN LÝ ➔"; trên điện
           thoại chỉ còn mũi tên ➔ — xem lý do ở khối @media. */
        .dash-cta {
            background: var(--text-color);
            color: var(--bg-color);
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 11px;
        }
        /* Nền cũ dùng var(--today-line-color) (#ee5959) với chữ gần trắng chỉ đạt tương phản 3.23.
           Không sửa biến đó vì nó còn vẽ đường "hôm nay" trên biểu đồ; chỉ đổi riêng nền huy hiệu
           sang tông đỏ đậm hơn, đạt ~5.4. */
        .dash-cta-warn { background: #c0392b; }

        /* Nhãn trạng thái trong giao diện điện thoại, do statusBadge() sinh ra. Màu nền/màu chữ
           vẫn đặt inline theo từng trạng thái; phần hình dáng và bố cục nằm ở đây. Các thuộc tính
           dưới đây trước kia nằm trong inline style của hàm đó — giữ nguyên để không vỡ hàng
           (nhãn nằm trong hàng flex nên bắt buộc phải có flex-shrink: 0). */
        .status-pill {
            display: inline-block;
            vertical-align: middle;
            flex-shrink: 0;
            margin-right: 8px;
            text-transform: uppercase;
            font-weight: 900;
            font-size: 11px;
            padding: 3px 6px;
            border-radius: 4px;
        }
        .dash-value {
            font-size: 13px;
            font-weight: 900;
            color: var(--text-color);
            white-space: nowrap;
        }
        .dash-value-ok { color: #047857; }
        .dash-value-warn { color: #ef4444; }
        .dash-progress-track {
            width: 100%;
            height: 5px;
            background: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 3px;
        }
        .dash-progress-fill {
            height: 100%;
            background: #10b981;
            width: 0%;
            transition: width 0.4s ease;
        }

        .collapse-toggle { cursor: pointer; display: none; font-size: 11px; margin-right: 5px; width: 12px; text-align: center; line-height: 16px; user-select: none; transition: transform 0.2s; float: left; }
        .main-task .collapse-toggle { display: inline-block; }
        .main-task[data-collapsed="true"] .collapse-toggle { transform: rotate(-90deg); }
        tr.hide-by-collapse { display: none !important; }

        #today-line-overlay { position: absolute; top: 0; width: 2px; background: var(--today-line-color); pointer-events: none; z-index: 6; opacity: 0.9; }
        #today-line-label { position: absolute; top: -16px; background: var(--today-line-color, #de7228); color: #ffffff; font-size: 9px; padding: 1px 4px; font-weight: bold; white-space: nowrap; transform: translateX(-50%); pointer-events: none; z-index: 6; }

        .drag-handle { cursor: grab; display: inline-block; font-weight: 900; padding: 0 4px; font-size: 14px; transition: transform 0.1s ease; user-select: none;}
        /* PHẢI giữ lại translateY(-50%). Nút này nay định vị tuyệt đối và được căn giữa
           theo chiều dọc bằng chính transform đó; viết mỗi scale() ở đây là GHI ĐÈ luôn
           phần căn giữa, nên vừa rê chuột vào là nút tụt xuống nửa thân — đúng lỗi người
           dùng gặp. transform không cộng dồn giữa các quy tắc, phải viết đủ cả hai. */
        .drag-handle:hover { transform: translateY(-50%) scale(1.3); }
        .drag-handle:active { cursor: grabbing; }
        
        /* ============================================================
           HIỆU ỨNG KÉO THẢ ĐỔI THỨ TỰ HẠNG MỤC — vẽ lại 2026-08-24.

           Hai lỗi của bản cũ, đều đã đo trên bản chạy thật:

           1. Đường báo vị trí thả dùng var(--text-color) = #0f172a, tức GẦN NHƯ ĐEN.
              Trên nền bảng trắng nó trông như một vệt lỗi hiển thị chứ không phải
              một dấu hiệu giao diện. Nay dùng màu thương hiệu.

           2. Đường báo BIẾN MẤT ĐÚNG Ở CỘT HẠNG MỤC. Nguyên nhân: cột đó là cột dính
              và đã dùng box-shadow để vẽ bóng mép phải — mà một phần tử chỉ có MỘT
              thuộc tính box-shadow, không cộng dồn được. Ba quy tắc
              .main-task / .sub-task / .milestone-task td.col-task (đặc hiệu 0,2,2 +
              !important) thắng quy tắc tr.drag-over-* td (0,2,1) nên xoá sạch đường báo.
              Cách sửa: GỘP cả hai vào một danh sách bóng, và nâng đặc hiệu lên (0,3,2).

           BÀI HỌC: trước khi thêm box-shadow cho một ô trong bảng này, kiểm xem ô đó
           đã dùng box-shadow cho việc khác chưa. Cột dính nào cũng có thể đang dùng.
           ============================================================ */
        /* ============================================================
           CHỈ BÁO VỊ TRÍ CHÈN KHI KÉO HÀNG TRÊN BẢNG GANTT TIMELINE
           - Sửa triệt để lỗi mất vạch ở cột Hạng Mục (td.col-task).
           - Loại bỏ hoàn toàn outset shadow (0 0 10px) gây nhòe sọc / răng cưa
             trên các ô timeline hẹp (mỗi ô ngày 25px).
           - Dải chỉ báo 3.5px phẳng, sắc nét, liền mạch xuyên suốt 100% các cột.
           ============================================================ */
        #timeline-table #table-body tr.drag-over-top > td,
        #timeline-table #table-body tr.drag-over-bottom > td {
            transition: box-shadow 0.08s ease;
        }
        #timeline-table #table-body tr.drag-over-top > td {
            box-shadow: inset 0 3.5px 0 0 #0f766e !important;
        }
        #timeline-table #table-body tr.drag-over-top > td.col-progress {
            box-shadow: inset 0 3.5px 0 0 #0f766e, 5px 0 7px -5px rgba(15,23,42,.10) !important;
        }

        #timeline-table #table-body tr.drag-over-bottom > td {
            box-shadow: inset 0 -3.5px 0 0 #0f766e !important;
        }
        #timeline-table #table-body tr.drag-over-bottom > td.col-progress {
            box-shadow: inset 0 -3.5px 0 0 #0f766e, 5px 0 7px -5px rgba(15,23,42,.10) !important;
        }

        /* Chế độ tối: Dùng màu ngọc sáng #14b8a6 tương phản rõ nét trên nền đậm */
        body.dark-mode #timeline-table #table-body tr.drag-over-top > td {
            box-shadow: inset 0 3.5px 0 0 var(--xv-d1-hover, #14b8a6) !important;
        }
        body.dark-mode #timeline-table #table-body tr.drag-over-top > td.col-progress {
            box-shadow: inset 0 3.5px 0 0 var(--xv-d1-hover, #14b8a6), 5px 0 7px -5px rgba(15,23,42,.25) !important;
        }

        body.dark-mode #timeline-table #table-body tr.drag-over-bottom > td {
            box-shadow: inset 0 -3.5px 0 0 var(--xv-d1-hover, #14b8a6) !important;
        }
        body.dark-mode #timeline-table #table-body tr.drag-over-bottom > td.col-progress {
            box-shadow: inset 0 -3.5px 0 0 var(--xv-d1-hover, #14b8a6), 5px 0 7px -5px rgba(15,23,42,.25) !important;
        }

        /* Hàng đang được nhấc lên */
        #timeline-table #table-body tr.dragging-row > td {
            opacity: 0.38 !important;
            background-color: #f0fdfa !important;
        }
        body.dark-mode #timeline-table #table-body tr.dragging-row > td {
            opacity: 0.45 !important;
            background-color: rgba(15, 118, 110, 0.25) !important;
        }
        
        @keyframes dropFlash {
            0% {
                background-color: #ccfbf1 !important;
                box-shadow: inset 0 0 0 1.5px #0f766e !important;
            }
            35% {
                background-color: #e6f4f1 !important;
                box-shadow: inset 0 0 0 1.5px var(--xv-d1-hover, #14b8a6) !important;
            }
            70% {
                background-color: #f0fdfa !important;
                box-shadow: inset 0 0 0 1px #5eead4 !important;
            }
            100% {
                background-color: transparent;
                box-shadow: none !important;
            }
        }
        @keyframes dropFlashDark {
            0% {
                background-color: rgba(20, 184, 166, 0.3) !important;
                box-shadow: inset 0 0 0 1.5px var(--xv-d1-hover, #14b8a6) !important;
            }
            40% {
                background-color: rgba(20, 184, 166, 0.18) !important;
                box-shadow: inset 0 0 0 1px #0f766e !important;
            }
            100% {
                background-color: transparent;
                box-shadow: none !important;
            }
        }
        #timeline-table #table-body tr.drop-animation > td {
            animation: dropFlash 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }
        body.dark-mode #timeline-table #table-body tr.drop-animation > td {
            animation: dropFlashDark 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        /* Hiệu ứng thả thanh Gantt bar */
        @keyframes ganttBarDropPulse {
            0% {
                filter: brightness(1.3) contrast(1.1);
                transform: translateY(-50%) scaleY(1.22);
            }
            40% {
                filter: brightness(1.18);
                transform: translateY(-50%) scaleY(1.1);
            }
            70% {
                filter: brightness(1.08);
                transform: translateY(-50%) scaleY(1.03);
            }
            100% {
                filter: brightness(1);
                transform: translateY(-50%) scaleY(1);
            }
        }
        td.week-cell.gantt-bar-just-dropped::after {
            animation: ganttBarDropPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
            box-shadow: 0 0 10px rgba(20, 184, 166, 0.8), inset 0 0 0 1.5px rgba(255, 255, 255, 0.6) !important;
            z-index: 10 !important;
        }
        body.dark-mode td.week-cell.gantt-bar-just-dropped::after {
            box-shadow: 0 0 12px rgba(45, 212, 191, 0.9), inset 0 0 0 1.5px rgba(255, 255, 255, 0.7) !important;
        }

        td.week-cell.active-main, td.week-cell.active-sub { cursor: grab; }
        td.week-cell.gantt-dragging { cursor: grabbing !important; }
        body.gantt-resizing td.week-cell.active-main, body.gantt-resizing td.week-cell.active-sub { cursor: ew-resize !important; }

        #material-modal-overlay, #risk-modal-overlay, #welcome-modal-overlay, #upgrade-modal-overlay, #import-template-modal-overlay, #weekend-settings-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(15, 23, 42, 0.75) !important; backdrop-filter: blur(4px) !important; z-index: 99999 !important; align-items: center !important; justify-content: center !important; overflow-y: auto !important; box-sizing: border-box !important; }
        .modal-overlay.open { display: flex !important; }
        /* Bảng checklist trước đây tự căn giữa bằng style nội tuyến có !important, mà style nội
           tuyến thì quy tắc CSS không đè được — nên nó không nhận được kiểu bảng-trượt-đáy
           của điện thoại như 8 bảng còn lại. Chuyển phần căn giữa ra đây để media query
           ở mục "ĐỒNG BỘ KIỂU MỞ" bên dưới đè lại được. Máy tính giữ nguyên như cũ. */
        #checklist-modal-overlay { align-items: center !important; }
        /* Cùng lý do như hai bảng trên, nhưng cho 12 bảng còn lại — chúng cũng mang
           align-items nội tuyến. Gắn class .bang-truot để khỏi phải liệt kê id ra bốn
           chỗ nữa: từ nay thêm bảng trượt mới chỉ cần thêm đúng một class vào markup.
           Ở máy tính .bang-truot vẫn căn giữa y như trước. */
        .bang-truot, #import-template-modal-overlay { align-items: center !important; }
        
        .modal-box { background: var(--bg-color); width: 760px; max-width: 94vw; max-height: 88vh; overflow-y: auto; border: 1px solid var(--border-color); padding: 20px; color: var(--text-color); box-sizing: border-box; margin: auto; border-radius: 4px !important;}
        .modal-box.small { width: 450px; text-align: center; }
        
        .modal-box h3 { margin: 0 0 15px 0; font-size: 16px; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;}
        
        .modal-close { display: block; width: 100%; margin-top: 15px; padding: 8px; background: var(--text-color); color: var(--bg-color); border: 1px solid var(--text-color); cursor: pointer; font-weight: bold; text-transform: uppercase; transition: opacity 0.2s;}
        .modal-close:hover { opacity: 0.8; }

/* ================= BẢNG VẬT TƯ & LOGISTICS: DESKTOP SAAS DATA GRID & CARD UI ================= */
        #material-modal {
            position: relative !important;
            width: min(1080px, 94vw) !important;
            max-width: 95vw !important;
            max-height: 88vh !important;
            background: var(--bg-color) !important;
            color: var(--text-color) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-xl, 16px) !important;
            padding: 16px 20px !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
            box-sizing: border-box !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
            font-family: inherit !important;
        }

        /* Ẩn hoàn toàn banner cảnh báo vật tư trên mobile */
        @media (max-width: 768px) {
            #pc-material-alert-banner {
                display: none !important;
            }
        }

        /* Top Bar: Title + Search + Close */
        .mm-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }
        .mm-title-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .mm-title {
            font-size: 16px;
            font-weight: 900;
            color: var(--text-color);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }
        .mm-btn-toggle {
            background: var(--brand-primary-light);
            color: var(--brand-primary-text);
            border: 1px solid var(--brand-primary-border);
            border-radius: var(--radius-sm, 6px);
            padding: 4px 9px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.15s;
        }
        .mm-btn-toggle:hover {
            background: var(--brand-primary);
            color: #ffffff;
            border-color: var(--brand-primary);
        }

        /* Bộ chuyển chế độ xem Bảng / Thẻ */
        .mm-view-toggle {
            display: inline-flex;
            background: var(--highlight);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 2px;
            gap: 2px;
        }
        .mm-view-btn {
            background: transparent;
            border: none;
            color: var(--note-color);
            padding: 4px 9px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .mm-view-btn:hover {
            color: var(--text-color);
        }
        .mm-view-btn.active {
            background: var(--card-bg, #ffffff);
            color: var(--brand-primary);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        body.dark-mode .mm-view-btn.active {
            background: #334155;
            color: #38bdf8;
        }
        @media (max-width: 600px) {
            .mm-view-toggle { display: none; }
        }

        .mm-search-wrap {
            position: relative;
            flex: 1;
            max-width: 240px;
            margin-left: auto;
        }
        .mm-search-wrap svg {
            position: absolute;
            left: 9px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--note-color);
            pointer-events: none;
        }
        .mm-search-wrap input {
            width: 100% !important;
            padding: 6px 10px 6px 28px !important;
            border: 1px solid var(--border-color) !important;
            background: var(--highlight) !important;
            color: var(--text-color) !important;
            border-radius: 20px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            text-align: left !important;
        }
        .mm-search-wrap input:focus {
            border-color: var(--brand-primary) !important;
            background: var(--bg-color) !important;
            outline: none !important;
        }

        .mm-top-close-btn {
            background: var(--highlight) !important;
            border: 1px solid var(--border-color) !important;
            color: var(--note-color) !important;
            font-size: 13px !important;
            font-weight: bold !important;
            width: 26px !important;
            height: 26px !important;
            border-radius: 50% !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.15s !important;
            padding: 0 !important;
            flex-shrink: 0;
        }
        .mm-top-close-btn:hover {
            background: #fee2e2 !important;
            color: #ef4444 !important;
            border-color: #fca5a5 !important;
        }

        /* Filter Tabs Bar dạng Chip chuẩn Mobile */
        .mm-tabs-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            flex-wrap: wrap;
        }
        .mm-tabs {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            scrollbar-width: none;
            padding: 2px 0;
        }
        .mm-tab {
            background: var(--highlight);
            color: var(--note-color);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s ease;
        }
        .mm-tab:hover {
            color: var(--text-color);
            border-color: var(--brand-primary-border);
        }
        .mm-tab.active {
            background: var(--brand-primary);
            color: #ffffff;
            border-color: var(--brand-primary);
            box-shadow: 0 2px 6px rgba(var(--xv-c1-rgb, 32,86,76), 0.25);
        }
        .mm-tab[data-filter="urgent"].active {
            background: #ea580c;
            border-color: #ea580c;
            color: #ffffff;
            box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
        }
        .mm-tab[data-filter="waiting"].active {
            background: #d97706;
            border-color: #d97706;
            color: #ffffff;
            box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
        }
        .mm-tab[data-filter="done"].active {
            background: #10b981;
            border-color: #10b981;
            color: #ffffff;
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
        }

        /* DANH SÁCH VẬT TƯ DẠNG THẺ (CARD UI THEO CHUẨN MOBILE) */
        .mm-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 12px;
            max-height: 480px;
            overflow-y: auto;
            scrollbar-width: thin;
            padding: 4px 2px;
        }
        .mm-card-item {
            border: 1.5px solid var(--border-color);
            border-radius: 14px;
            background: var(--card-bg, #ffffff);
            padding: 13px 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            transition: all 0.2s ease;
        }
        .mm-card-item:hover {
            box-shadow: 0 4px 14px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }
        body.dark-mode .mm-card-item {
            background: #1e293b;
            border-color: #334155;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        .mm-card-item.is-done {
            opacity: 0.72;
            background: rgba(248, 250, 252, 0.7);
            border-color: var(--border-color);
        }
        body.dark-mode .mm-card-item.is-done {
            background: rgba(15, 23, 42, 0.6);
            border-color: #1e293b;
        }
        .mm-card-item.is-urgent {
            border-color: #f97316;
            background: #fffdfa;
        }
        body.dark-mode .mm-card-item.is-urgent {
            border-color: #ea580c;
            background: rgba(234, 88, 12, 0.08);
        }
        .mm-card-item.is-overdue {
            border-color: #ef4444;
            background: #fffafa;
        }
        body.dark-mode .mm-card-item.is-overdue {
            border-color: #dc2626;
            background: rgba(220, 38, 38, 0.08);
        }
        .mm-card-item.is-waiting {
            border-color: #f59e0b;
            background: #fffdf5;
        }
        body.dark-mode .mm-card-item.is-waiting {
            border-color: #d97706;
            background: rgba(217, 119, 6, 0.08);
        }

        .mm-card-btn-edit {
            width: 34px;
            height: 34px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-color);
            color: var(--note-color);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        .mm-card-btn-edit:hover {
            background: #f0f9ff;
            color: #0284c7;
            border-color: #7dd3fc;
        }
        body.dark-mode .mm-card-btn-edit:hover {
            background: rgba(2, 132, 199, 0.2);
            color: #38bdf8;
            border-color: #0284c7;
        }
        .mm-card-btn-done {
            flex: 1;
            min-height: 34px;
            padding: 0 10px;
            border: none;
            border-radius: 9px;
            background: #10b981;
            color: #ffffff;
            font-size: 11.5px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
            transition: all 0.15s;
        }
        .mm-card-btn-done:hover {
            background: #059669;
        }
        .mm-card-btn-undo {
            flex: 1;
            min-height: 34px;
            padding: 0 10px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-color);
            color: var(--note-color);
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.15s;
        }
        .mm-card-btn-undo:hover {
            background: #f1f5f9;
            color: var(--text-color);
        }
        .mm-card-btn-del {
            width: 34px;
            height: 34px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: transparent;
            color: var(--note-color);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        .mm-card-btn-del:hover {
            background: #fef2f2;
            color: #ef4444;
            border-color: #fca5a5;
        }

        /* Form Nhập Mới Tinh Gọn */
        .mm-form-box {
            background: var(--highlight);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md, 8px);
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: all 0.2s ease;
        }
        .mm-form-grid-1 {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 8px;
        }
        .mm-form-grid-2 {
            display: grid;
            grid-template-columns: 1.1fr 0.8fr 0.8fr 1.3fr;
            gap: 8px;
            align-items: flex-end;
        }
        @media (max-width: 560px) {
            .mm-form-grid-1, .mm-form-grid-2 { grid-template-columns: 1fr; }
        }
        .mm-field {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .mm-field label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--note-color);
            letter-spacing: 0.3px;
        }
        .mm-field input, .mm-field select {
            width: 100% !important;
            padding: 6px 8px !important;
            border: 1px solid var(--border-color) !important;
            background: var(--bg-color) !important;
            color: var(--text-color) !important;
            border-radius: var(--radius-sm, 6px) !important;
            font-size: 11.5px !important;
            font-weight: 600 !important;
            box-sizing: border-box !important;
            margin-top: 0 !important;
            text-align: left !important;
        }
        .mm-field input:focus, .mm-field select:focus {
            border-color: var(--brand-primary) !important;
            outline: none !important;
        }
        .mm-btn-add {
            background: linear-gradient(135deg, #0075ff 0%, #0056cc 100%) !important;
            color: #ffffff !important;
            border: none !important;
            font-weight: 800 !important;
            font-size: 11px !important;
            padding: 6px 12px !important;
            border-radius: var(--radius-sm, 6px) !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 5px !important;
            box-shadow: 0 2px 6px rgba(0, 117, 255, 0.25) !important;
            height: 30px !important;
            transition: all 0.15s !important;
        }
        .mm-btn-add:hover {
            background: linear-gradient(135deg, #1a85ff 0%, #0047b3 100%) !important;
        }

        .mm-unit-chips {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
            padding-top: 1px;
        }
        .mm-chip-lbl {
            font-size: 11px;
            font-weight: 700;
            color: var(--note-color);
            text-transform: uppercase;
        }
        .mm-chip {
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            border-radius: 4px;
            padding: 1px 6px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        .mm-chip:hover {
            border-color: var(--brand-primary);
            color: var(--brand-primary-text);
            background: var(--brand-primary-light);
        }

        /* Nút Báo cáo tập kết nhanh trên Tabs Bar */
        .mm-btn-report {
            background: var(--brand-primary);
            color: #ffffff;
            border: 1px solid var(--brand-primary);
            border-radius: 6px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.15s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .mm-btn-report:hover {
            opacity: 0.92;
            transform: translateY(-1px);
        }

        /* Thanh thao tác hàng loạt (Batch Bar) */
        .mm-batch-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: #f0fdf4;
            border: 1px solid #86efac;
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 11.5px;
            font-weight: 700;
            color: #166534;
            animation: fadeIn 0.15s ease;
        }
        body.dark-mode .mm-batch-bar {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.4);
            color: var(--xv-d1-text, #a7f3d0);
        }
        .mm-batch-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .mm-batch-btn {
            border: 1px solid transparent;
            border-radius: 6px;
            padding: 4px 9px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.15s;
        }
        .mm-batch-copy {
            background: #0284c7;
            color: #ffffff;
        }
        .mm-batch-copy:hover { background: #0369a1; }
        .mm-batch-done {
            background: #10b981;
            color: #ffffff;
        }
        .mm-batch-done:hover { background: #059669; }
        .mm-batch-clear {
            background: transparent;
            border-color: #cbd5e1;
            color: #64748b;
        }
        .mm-batch-clear:hover {
            background: #fee2e2;
            color: #ef4444;
            border-color: #fca5a5;
        }

        /* Bảng Danh Sách Vật Tư Chuẩn SaaS Mở Rộng Cuộn Tiện Lợi */
        .mm-table-container {
            max-height: 480px;
            overflow-y: auto;
            overflow-x: auto;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md, 8px);
            scrollbar-width: thin;
            background: var(--card-bg, #ffffff);
            flex: 1;
        }
        body.dark-mode .mm-table-container {
            background: #1e293b;
        }
        #material-table {
            width: 100%;
            min-width: 760px;
            border-collapse: collapse;
            font-size: 12px;
            background: transparent;
            table-layout: fixed;
        }
        #material-table th {
            background: var(--highlight);
            color: var(--note-color);
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            padding: 9px 8px;
            border-bottom: 2px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 3;
            white-space: nowrap;
            box-sizing: border-box;
        }
        #material-table td {
            padding: 8px 8px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
            color: var(--text-color);
            box-sizing: border-box;
        }
        #material-table tr:last-child td {
            border-bottom: none;
        }
        #material-table tbody tr {
            transition: background 0.12s ease;
        }
        #material-table tbody tr:hover {
            background: rgba(0, 117, 255, 0.04);
        }
        body.dark-mode #material-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.04);
        }
        #material-table tr.is-selected {
            background: rgba(2, 132, 199, 0.08) !important;
        }
        body.dark-mode #material-table tr.is-selected {
            background: rgba(56, 189, 248, 0.12) !important;
        }
        #material-table tr.is-done td {
            opacity: 0.65;
        }
        #material-table tr.is-urgent {
            border-left: 3px solid #ea580c;
        }
        #material-table tr.is-overdue {
            border-left: 3px solid #ef4444;
        }

        /* Checkbox chọn hàng loạt & Checkbox hoàn thành */
        .mm-chk-select {
            width: 16px !important;
            height: 16px !important;
            accent-color: #0284c7 !important;
            cursor: pointer !important;
            margin: 0 !important;
            vertical-align: middle;
        }

        /* Nút hành động trên từng dòng bảng */
        .mm-act-btns {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            justify-content: center;
        }
        .mm-act-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 3px 6px;
            font-size: 11px;
            font-weight: 700;
            border-radius: 5px;
            border: 1px solid var(--border-color);
            background: var(--bg-color);
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.15s;
        }
        .mm-act-btn:hover {
            background: var(--highlight);
        }
        .mm-act-btn-done {
            background: #10b981;
            color: #ffffff;
            border-color: #10b981;
        }
        .mm-act-btn-done:hover { background: #059669; border-color: #059669; }
        .mm-act-btn-undo {
            color: var(--note-color);
        }
        .mm-act-btn-undo:hover {
            color: var(--text-color);
        }
        .mm-act-btn-edit:hover {
            border-color: #0284c7;
            color: #0284c7;
            background: #f0f9ff;
        }
        .mm-act-btn-del:hover {
            border-color: #ef4444;
            color: #ef4444;
            background: #fef2f2;
        }

        .mm-btn-copy {
            background: var(--highlight) !important;
            color: var(--text-color) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-sm, 6px) !important;
            padding: 5px 12px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 5px !important;
            transition: all 0.15s ease !important;
        }
        .mm-btn-copy:hover {
            background: var(--brand-primary) !important;
            color: #ffffff !important;
            border-color: var(--brand-primary) !important;
        }

        /* Nút chọn / badge trạng thái vật tư tương tác trực quan */
        .mm-status-select {
            font-family: inherit;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 6px;
            border-radius: 6px;
            border: 1px solid transparent;
            cursor: pointer;
            text-transform: uppercase;
            outline: none;
            text-align-last: center;
            transition: all 0.15s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .mm-status-select:hover {
            filter: brightness(0.95);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .mm-status-select.status-thieu {
            background: #fee2e2;
            color: #b91c1c;
            border-color: #fca5a5;
        }
        .mm-status-select.status-waiting {
            background: #fff7ed;
            color: #c2410c;
            border-color: #fdba74;
        }
        .mm-status-select.status-pending {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }
        .mm-status-select.status-done {
            background: #ecfdf5;
            color: #047857;
            border-color: #a7f3d0;
        }
        body.dark-mode .mm-status-select.status-thieu {
            background: rgba(239, 68, 68, 0.25);
            color: #fca5a5;
            border-color: rgba(239, 68, 68, 0.45);
        }
        body.dark-mode .mm-status-select.status-waiting {
            background: rgba(249, 115, 22, 0.25);
            color: #fdba74;
            border-color: rgba(249, 115, 22, 0.45);
        }
        body.dark-mode .mm-status-select.status-pending {
            background: rgba(59, 130, 246, 0.25);
            color: #93c5fd;
            border-color: rgba(59, 130, 246, 0.45);
        }
        body.dark-mode .mm-status-select.status-done {
            background: rgba(16, 185, 129, 0.25);
            color: #6ee7b7;
            border-color: rgba(16, 185, 129, 0.45);
        }

        /* ================= BẢNG CẢNH BÁO TIẾN ĐỘ & RỦI RO (SCHEDULE RISK HUB) ================= */
        #risk-modal {
            position: relative !important;
            width: 740px !important;
            max-width: 95vw !important;
            max-height: 90vh !important;
            background: var(--bg-color) !important;
            color: var(--text-color) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-xl, 16px) !important;
            padding: 16px 18px !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
            box-sizing: border-box !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
            font-family: inherit !important;
        }

        /* Top Bar: Title + Search + Close */
        .rk-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }
        .rk-title-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .rk-title {
            font-size: 15px;
            font-weight: 900;
            color: #e11d48;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }
        body.dark-mode .rk-title { color: #fb7185; }

        .rk-search-wrap {
            position: relative;
            flex: 1;
            max-width: 240px;
            margin-left: auto;
        }
        .rk-search-wrap svg {
            position: absolute;
            left: 9px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--note-color);
            pointer-events: none;
        }
        .rk-search-wrap input {
            width: 100% !important;
            padding: 6px 10px 6px 28px !important;
            border: 1px solid var(--border-color) !important;
            background: var(--highlight) !important;
            color: var(--text-color) !important;
            border-radius: 20px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            text-align: left !important;
        }
        .rk-search-wrap input:focus {
            border-color: #f43f5e !important;
            background: var(--bg-color) !important;
            outline: none !important;
        }

        .rk-top-close-btn {
            background: var(--highlight) !important;
            border: 1px solid var(--border-color) !important;
            color: var(--note-color) !important;
            font-size: 13px !important;
            font-weight: bold !important;
            width: 26px !important;
            height: 26px !important;
            border-radius: 50% !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.15s !important;
            padding: 0 !important;
            flex-shrink: 0;
        }
        .rk-top-close-btn:hover {
            background: #fee2e2 !important;
            color: #ef4444 !important;
            border-color: #fca5a5 !important;
        }

        /* Filter Tabs Bar */
        .rk-tabs-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            flex-wrap: wrap;
        }
        .rk-tabs {
            display: flex;
            gap: 5px;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .rk-tab {
            background: var(--highlight);
            color: var(--note-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm, 6px);
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s ease;
        }
        .rk-tab:hover {
            color: var(--text-color);
            border-color: var(--border-color);
        }
        .rk-tab.active {
            background: #e11d48;
            color: #ffffff;
            border-color: #e11d48;
        }
        body.dark-mode .rk-tab.active {
            background: #be123c;
            border-color: #be123c;
        }

        /* Table & Cards */
        .rk-table-container {
            max-height: 440px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md, 8px);
            scrollbar-width: thin;
            flex: 1;
            -webkit-overflow-scrolling: touch;
        }
        #risk-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11.5px;
            background: var(--bg-color);
        }
        #risk-table th {
            background: var(--highlight);
            color: var(--note-color);
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            padding: 8px 10px;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 2;
        }
        #risk-table td {
            padding: 9px 10px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
            color: var(--text-color);
        }
        #risk-table tr:last-child td { border-bottom: none; }
        #risk-table tr:hover { background: var(--highlight); }

        .rk-task-name {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-color);
            line-height: 1.35;
        }
        .rk-task-note {
            font-size: 11px;
            color: var(--note-color);
            margin-top: 2px;
            line-height: 1.3;
            font-style: italic;
            opacity: 0.85;
        }
        .rk-date-str {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-color);
        }

        /* Urgency Badges */
        .rk-badge {
            font-size: 11px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 4px;
            text-transform: uppercase;
            display: inline-block;
            white-space: nowrap;
        }
        .rk-badge-overdue { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
        .rk-badge-today   { background: #fee2e2; color: #b91c1c; border: 1px solid #f87171; animation: pulseRed 1.8s infinite; }
        .rk-badge-urgent  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
        body.dark-mode .rk-badge-overdue { background: rgba(239, 68, 68, 0.25); color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
        body.dark-mode .rk-badge-today   { background: rgba(239, 68, 68, 0.35); color: #fecaca; border-color: rgba(239, 68, 68, 0.6); }
        body.dark-mode .rk-badge-urgent  { background: rgba(245, 158, 11, 0.25); color: #fcd34d; border-color: rgba(245, 158, 11, 0.4); }

        @keyframes pulseRed {
            0% { opacity: 1; }
            50% { opacity: 0.6; }
            100% { opacity: 1; }
        }

        /* Highlight animation for jumped task row on Gantt */

        /* ================= RESPONSIVE MOBILE OPTIMIZATION (BẢNG VẬT TƯ & CẢNH BÁO) ================= */
        @media (max-width: 600px) {
            /* Modals container */
            #material-modal, #risk-modal {
                width: 96vw !important;
                max-height: 92vh !important;
                padding: 12px 10px !important;
                gap: 8px !important;
                border-radius: 12px !important;
            }

            /* Top Bar wraps gracefully on mobile */
            .mm-top-bar, .rk-top-bar {
                flex-wrap: wrap !important;
                gap: 6px !important;
                padding-bottom: 6px !important;
            }
            /* Tắt bỏ mục tìm kiếm trên mobile cho cả 2 bảng */
            .mm-search-wrap, .rk-search-wrap {
                display: none !important;
            }

            /* Tabs row horizontal scroll */
            .mm-tabs-bar, .rk-tabs-bar {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 4px !important;
            }
            .mm-tabs, .rk-tabs {
                width: 100% !important;
                padding-bottom: 4px !important;
            }

            /* Form grids on mobile */
            .mm-form-grid-1, .mm-form-grid-2 {
                grid-template-columns: 1fr !important;
                gap: 6px !important;
            }

            /* TABLE TO MOBILE APP CARDS: BẢNG VẬT TƯ */
            #material-table, #material-table tbody {
                display: block !important;
                width: 100% !important;
            }
            #material-table thead {
                display: none !important;
            }
            #material-table tbody tr {
                display: block !important;
                background: var(--highlight) !important;
                border: 1px solid var(--border-color) !important;
                border-radius: 8px !important;
                padding: 8px 10px !important;
                margin-bottom: 8px !important;
                position: relative !important;
            }
            #material-table tbody tr td {
                display: block !important;
                border: none !important;
                padding: 2px 0 !important;
                text-align: left !important;
                width: auto !important;
            }
            /* Ẩn nút xóa trên mobile để tránh chạm nhầm và giữ thẻ card sạch sẽ */
            #material-table tbody tr td:nth-child(5) {
                display: none !important;
            }
            /* Name offset for checkbox */
            #material-table tbody tr td:nth-child(2) {
                padding-left: 38px !important;
                padding-right: 8px !important;
                margin-bottom: 4px !important;
            }
            /* Date & Qty row */
            #material-table tbody tr td:nth-child(3),
            #material-table tbody tr td:nth-child(4) {
                padding-left: 38px !important;
                display: inline-block !important;
                margin-right: 8px !important;
            }
            /* Ẩn nút Xuất Excel trên mobile */
            #mm-export-excel-btn {
                display: none !important;
            }

            /* TABLE TO MOBILE APP CARDS: BẢNG CẢNH BÁO TIẾN ĐỘ */
            #risk-table, #risk-table tbody {
                display: block !important;
                width: 100% !important;
            }
            #risk-table thead {
                display: none !important;
            }
            #risk-table tbody tr {
                display: block !important;
                background: var(--highlight) !important;
                border: 1px solid var(--border-color) !important;
                border-radius: 8px !important;
                padding: 8px 10px !important;
                margin-bottom: 6px !important;
                position: relative !important;
            }
            #risk-table tbody tr td {
                border: none !important;
                padding: 0 !important;
                text-align: left !important;
                width: auto !important;
            }
            .rk-col-name {
                display: block !important;
                margin-bottom: 4px !important;
            }
            .rk-task-name {
                font-size: 12.5px !important;
                font-weight: 700 !important;
                line-height: 1.35 !important;
                color: var(--text-color) !important;
            }
            .rk-task-note {
                font-size: 11px !important;
                color: var(--note-color) !important;
                margin-top: 2px !important;
                margin-bottom: 4px !important;
                line-height: 1.3 !important;
                font-style: italic !important;
            }
            /* Thời gian & mức độ cảnh báo cùng 1 hàng ngang */
            .rk-col-date {
                display: inline-flex !important;
                align-items: center !important;
                font-size: 11px !important;
                color: var(--note-color) !important;
                margin-right: 8px !important;
                vertical-align: middle !important;
            }
            .rk-col-date::before {
                content: "Hạn: ";
                font-weight: 600;
                margin-right: 3px;
            }
            .rk-col-badge {
                display: inline-flex !important;
                align-items: center !important;
                vertical-align: middle !important;
            }
            /* Ở dạng thẻ trên điện thoại, nút "Đã xong" xuống hàng riêng và trải hết bề ngang —
               đây là hành động chính của cả thẻ, không phải một ô phụ nép bên phải như trên máy
               tính. Bỏ max-width của bản desktop đi thì ngón tay đeo găng mới bấm thoải mái. */
            .rk-col-xong {
                display: block !important;
                margin-top: 9px !important;
            }
            .rk-nut-xong { max-width: none !important; min-height: 44px !important; }
        }

        #table-wrapper { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-bottom: 1px solid var(--border-color);}

/* ===== GỢI Ý TRONG BẢNG CHO NGƯỜI DÙNG MỚI =====
           Ba gợi ý nối tiếp nhau, mỗi lúc chỉ một loại được hiện (xem capNhatGoiYTrongBang).
           Điều kiện hiện là dữ liệu còn thiếu nên hai gợi ý đầu tự tắt khi người dùng điền
           xong, không cần nút "Đã hiểu". Chip Khung nhìn nói về cài đặt tùy chọn nên có nút
           tắt thủ công. Lớp phủ ô ngày dùng pointer-events:none để không chắn thao tác cũ. */
        td.col-date.o-thieu-ngay { position: relative; }
        body.has-goiy-ngay td.col-date.o-thieu-ngay::after {
            content: "Chọn ngày";
            position: absolute;
            inset: 3px 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: -0.1px;
            color: var(--brand-accent-text);
            background: var(--brand-accent-tint);
            border: 1px dashed var(--brand-accent-border);
            border-radius: 4px;
            pointer-events: none;
            overflow: hidden;
        }
        body.dark-mode.has-goiy-ngay td.col-date.o-thieu-ngay::after {
            color: #f0b07a;
            background: #33231a;
            border-color: #6b4526;
        }
        /* Chế độ thu gọn ép --w-date về 0 và ẩn con của ô bằng "td.col-date-start *";
           pseudo-element không phải phần tử con nên phải tắt riêng, nếu không sẽ còn
           sót một vệt cam bị kẹp lại ở mép bảng. Chế độ danh sách cũng hẹp hơn nhiều. */
        body.split-pane-collapsed td.col-date.o-thieu-ngay::after,
        body.mode-list td.col-date.o-thieu-ngay::after {
            display: none !important;
        }

        body.has-goiy-pct tr.hang-goiy-pct .progress-cell-pill {
            animation: goiyVienNhay 1.9s ease-in-out infinite;
        }
        @keyframes goiyVienNhay {
            0%, 100% { box-shadow: 0 0 0 0 rgba(222, 114, 40, 0); }
            50%      { box-shadow: 0 0 0 3px rgba(222, 114, 40, 0.45); }
        }
        @media (prefers-reduced-motion: reduce) {
            body.has-goiy-pct tr.hang-goiy-pct .progress-cell-pill {
                animation: none;
                box-shadow: 0 0 0 2px rgba(222, 114, 40, 0.5);
            }
        }

        #goiy-khungnhin {
            display: none;
            align-items: center;
            gap: 2px;
            margin-right: 2px;
            padding: 2px 2px 2px 7px;
            border-radius: 6px;
            white-space: nowrap;
            color: var(--brand-accent-text);
            background: var(--brand-accent-tint);
            border: 1px solid var(--brand-accent-border);
        }
        body.has-goiy-khungnhin #goiy-khungnhin { display: inline-flex; }
        #goiy-khungnhin .goiy-kn-text {
            border: none;
            background: transparent;
            padding: 0;
            font-family: inherit;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            color: inherit;
            cursor: pointer;
            min-height: 24px;
        }
        #goiy-khungnhin .goiy-kn-dong {
            border: none;
            background: transparent;
            min-width: 24px;
            min-height: 24px;
            padding: 0 5px;
            font-family: inherit;
            font-size: 12px;
            line-height: 1;
            color: inherit;
            opacity: 0.6;
            cursor: pointer;
        }
        #goiy-khungnhin .goiy-kn-dong:hover { opacity: 1; }
        body.dark-mode #goiy-khungnhin {
            color: #f0b07a;
            background: #33231a;
            border-color: #6b4526;
        }
        /* Thanh công cụ chật ở màn hẹp: bỏ chip trước, giữ nguyên nút Khung nhìn. */
        @media screen and (max-width: 1100px) {
            #goiy-khungnhin { display: none !important; }
        }

        #table-body tr { contain: layout style; }

        th.col-task { position: sticky; left: 0; z-index: 15 !important; background-color: var(--highlight) !important; text-align: center !important; }
        td.col-task { position: sticky; left: 0; z-index: 9 !important; background: var(--sticky-bg) !important; }

        /* [FIX] Cố định (sticky) toàn bộ các cột thông tin bên trái (Phụ thuộc, Ghi chú, Bắt
           đầu, Ngày, Kết thúc, Trạng thái, Tiến độ) — trước đây chỉ cột Hạng Mục được cố định,
           khiến khi bấm "Hôm Nay" hoặc cuộn ngang, các cột còn lại bị cuốn trôi theo timeline
           thay vì đứng yên. Offset "left" cộng dồn theo đúng thứ tự cột, dùng chung biến CSS
           --w-* nên vẫn đúng kể cả khi người dùng kéo giãn độ rộng cột. */
        th.col-dep, td.col-dep { position: sticky; left: 0 !important; }
        th.col-task, td.col-task { position: sticky; left: var(--w-dep) !important; }
        th.col-note, td.col-note { position: sticky; left: calc(var(--w-dep) + var(--w-task)) !important; }
        th.col-assignee, td.col-assignee { position: sticky; left: calc(var(--w-dep) + var(--w-task) + var(--w-note)) !important; }
        th.col-nhan, td.col-nhan { position: sticky; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee)) !important; }
        th.col-date-start, td.col-date-start { position: sticky; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee) + var(--w-nhan)) !important; }
        th.col-days, td.col-days { position: sticky; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee) + var(--w-nhan) + var(--w-date)) !important; }
        th.col-date-end, td.col-date-end { position: sticky; left: calc(var(--w-dep) + var(--w-task) + var(--w-note) + var(--w-assignee) + var(--w-nhan) + var(--w-date) + var(--w-days)) !important; }
        th.col-status, td.col-status { position: sticky; 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; }
        th.col-progress, td.col-progress { position: sticky; 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; border-right: 1px solid var(--border-color) !important; box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.10) !important; }
        body.dark-mode th.col-progress, body.dark-mode td.col-progress { box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.45) !important; }
        /* CỘT PHỤ THUỘC (THIẾT KẾ ĐẶC BIỆT DẠNG TRACK LIÊN KẾT ĐỂ KHÔNG BỊ CHÌM) */
        th.col-dep {
            z-index: 15 !important;
            background-color: #f1f5f9 !important;
            border-left: 1px solid #cbd5e1 !important;
            border-right: 1px solid #cbd5e1 !important;
            padding: 2px 0 !important;
        }
        td.col-dep {
            z-index: 9 !important;
            background-color: #f8fafc !important;
            border-left: 1px solid #e2e8f0 !important;
            border-right: 1px solid #e2e8f0 !important;
            padding: 0 2px !important;
            text-align: center !important;
        }
        #table-body tr:hover td.col-dep {
            background-color: #eff6ff !important;
        }
        body.dark-mode th.col-dep {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }
        body.dark-mode td.col-dep {
            background-color: #0b1329 !important;
            border-color: #1e293b !important;
        }
        body.dark-mode #table-body tr:hover td.col-dep {
            background-color: #172554 !important;
        }

        th.col-note, th.col-assignee, th.col-nhan, th.col-date-start, th.col-days, th.col-date-end, th.col-status, th.col-progress {
            z-index: 15 !important; background-color: var(--highlight) !important;
        }
        td.col-note, td.col-assignee, td.col-nhan, td.col-date-start, td.col-days, td.col-date-end, td.col-status, td.col-progress {
            z-index: 9 !important; background: var(--sticky-bg) !important;
        }


        /* Styling cho Cột Phụ trách (.col-assignee) và Popover chọn nhanh */
        th.col-assignee { text-align: center !important; vertical-align: middle !important; padding: 2px 0 !important; }
        td.col-assignee { text-align: center !important; vertical-align: middle !important; padding: 0 4px !important; }
        .assignee-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            max-width: 100%;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            transition: all 0.15s ease;
            box-sizing: border-box;
        }
        .assignee-pill.has-assignee {
            background: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }
        body.dark-mode .assignee-pill.has-assignee {
            background: rgba(14, 165, 233, 0.18);
            color: #7dd3fc;
            border-color: rgba(14, 165, 233, 0.35);
        }
        .assignee-pill.has-assignee:hover {
            background: #bae6fd;
            border-color: #7dd3fc;
        }
        body.dark-mode .assignee-pill.has-assignee:hover {
            background: rgba(14, 165, 233, 0.28);
            border-color: rgba(14, 165, 233, 0.55);
        }
        /* Phân biệt hiển thị cho Tổ đội / Nhà thầu ngoài (Tên tự do) */
        .assignee-pill.has-assignee.is-custom-assignee {
            background: #f0fdf4;
            color: #15803d;
            border-color: #bbf7d0;
        }
        .assignee-pill.has-assignee.is-custom-assignee:hover {
            background: #dcfce7;
            border-color: #86efac;
        }
        body.dark-mode .assignee-pill.has-assignee.is-custom-assignee {
            background: rgba(22, 101, 52, 0.24);
            color: #86efac;
            border-color: rgba(34, 197, 94, 0.38);
        }
        body.dark-mode .assignee-pill.has-assignee.is-custom-assignee:hover {
            background: rgba(22, 101, 52, 0.36);
            border-color: rgba(34, 197, 94, 0.55);
        }
        .assignee-pill.has-assignee.is-custom-assignee .assignee-avatar {
            border-radius: 4px;
            background: #15803d;
        }
        .assignee-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #0284c7;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            flex-shrink: 0;
            line-height: 1;
        }
        .assignee-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 65px;
            line-height: 1.2;
        }
        .assignee-pill.unassigned {
            background: transparent;
            color: #94a3b8;
            border: 1px dashed transparent;
            padding: 2px 6px;
        }
        #table-body tr:hover .assignee-pill.unassigned {
            background: #f1f5f9;
            border-color: #cbd5e1;
            color: #64748b;
        }
        body.dark-mode #table-body tr:hover .assignee-pill.unassigned {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.15);
            color: #94a3b8;
        }

        /* Popover Phân công phụ trách nhanh (#assignee-quick-picker) */
        .assignee-quick-picker {
            position: fixed;
            z-index: 99999;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
            width: 250px;
            padding: 8px;
            font-family: inherit;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            animation: fadeInQuickPicker 0.15s ease-out;
        }
        body.dark-mode .assignee-quick-picker {
            background: #1e293b;
            border-color: #334155;
            box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.5);
        }
        @keyframes fadeInQuickPicker {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .aqp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 6px 8px 6px;
            border-bottom: 1px solid #f1f5f9;
            margin-bottom: 8px;
        }
        body.dark-mode .aqp-header {
            border-bottom-color: #334155;
        }
        .aqp-title {
            font-size: 11px;
            font-weight: 800;
            color: #64748b;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        body.dark-mode .aqp-title {
            color: #94a3b8;
        }
        .aqp-close {
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            color: #94a3b8;
            padding: 2px 5px;
            border-radius: 4px;
            user-select: none;
        }
        .aqp-close:hover {
            color: #ef4444;
            background: #f1f5f9;
        }
        body.dark-mode .aqp-close:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        .aqp-task-name {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 2px;
        }
        body.dark-mode .aqp-task-name {
            color: #f8fafc;
        }
        .aqp-search {
            display: flex;
            gap: 4px;
            margin-bottom: 8px;
        }
        .aqp-input {
            flex: 1;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            padding: 5px 8px;
            font-size: 11.5px;
            background: #f8fafc;
            color: #0f172a;
            outline: none;
            box-sizing: border-box;
        }
        body.dark-mode .aqp-input {
            background: #0f172a;
            border-color: #334155;
            color: #f8fafc;
        }
        .aqp-input:focus {
            border-color: #3b82f6;
            background: #ffffff;
        }
        body.dark-mode .aqp-input:focus {
            background: var(--xv-s1, #111e1b);
        }
        .aqp-btn-apply {
            background: #3b82f6;
            color: #ffffff;
            border: none;
            border-radius: 6px;
            padding: 0 10px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }
        .aqp-list {
            max-height: 180px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .aqp-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.12s ease;
        }
        .aqp-item:hover {
            background: #f1f5f9;
        }
        body.dark-mode .aqp-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        .aqp-item.selected {
            background: #eff6ff;
        }
        body.dark-mode .aqp-item.selected {
            background: rgba(59, 130, 246, 0.18);
        }
        .aqp-item .aqp-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #3b82f6;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            line-height: 1;
        }
        .aqp-meta {
            flex: 1;
            overflow: hidden;
            line-height: 1.25;
        }
        .aqp-name {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #1e293b;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .aqp-name {
            color: #f1f5f9;
        }
        .aqp-role {
            display: block;
            font-size: 11px;
            color: #64748b;
        }
        body.dark-mode .aqp-role {
            color: #94a3b8;
        }
        .aqp-check {
            font-size: 12px;
            font-weight: bold;
            color: #2563eb;
        }
        .aqp-section-title {
            font-size: 11px;
            font-weight: 800;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 7px 8px 3px 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        body.dark-mode .aqp-section-title {
            color: #94a3b8;
        }
        .aqp-item.is-custom .aqp-avatar {
            border-radius: 5px;
            background: #15803d;
        }
        .aqp-item-del {
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            color: #94a3b8;
            font-size: 13px;
            opacity: 0.6;
            cursor: pointer;
            transition: all 0.12s ease;
        }
        .aqp-item-del:hover {
            opacity: 1;
            color: #ef4444;
            background: rgba(239, 68, 68, 0.12);
        }
        .aqp-quick-add-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            padding: 8px;
            border: 1px dashed #22c55e;
            background: #f0fdf4;
            border-radius: 6px;
            color: #15803d;
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
            margin-top: 4px;
            transition: background 0.12s;
        }
        .aqp-quick-add-btn:hover {
            background: #dcfce7;
        }
        body.dark-mode .aqp-quick-add-btn {
            background: rgba(34, 197, 94, 0.12);
            border-color: rgba(34, 197, 94, 0.35);
            color: #86efac;
        }
        body.dark-mode .aqp-quick-add-btn:hover {
            background: rgba(34, 197, 94, 0.22);
        }
        .aqp-footer {
            border-top: 1px solid #f1f5f9;
            margin-top: 6px;
            padding-top: 6px;
        }
        body.dark-mode .aqp-footer {
            border-top-color: #334155;
        }
        .aqp-btn-unassign {
            width: 100%;
            background: transparent;
            border: none;
            color: #ef4444;
            font-size: 11.5px;
            font-weight: 600;
            padding: 6px 8px;
            border-radius: 6px;
            cursor: pointer;
            text-align: left;
            transition: background 0.12s ease;
        }
        .aqp-btn-unassign:hover {
            background: #fee2e2;
        }
        body.dark-mode .aqp-btn-unassign:hover {
            background: rgba(239, 68, 68, 0.15);
        }
        /* Xác nhận áp dụng việc con khi phân công Hạng mục chính */
        .aqp-confirm-box {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 4px 2px 2px 2px;
        }
        .aqp-confirm-badge {
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 6px;
            border-radius: 4px;
            background: #e0f2fe;
            color: #0284c7;
        }
        body.dark-mode .aqp-confirm-badge {
            background: rgba(2, 132, 199, 0.2);
            color: #38bdf8;
        }
        .aqp-confirm-msg {
            font-size: 12px;
            color: #334155;
            line-height: 1.45;
        }
        body.dark-mode .aqp-confirm-msg {
            color: #cbd5e1;
        }
        .aqp-confirm-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 4px;
        }
        .aqp-btn-apply-all {
            background: #2563eb;
            color: #ffffff;
            border: none;
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: background 0.15s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        .aqp-btn-apply-all:hover {
            background: #1d4ed8;
        }
        .aqp-btn-apply-only {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            padding: 7px 10px;
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: all 0.15s ease;
        }
        .aqp-btn-apply-only:hover {
            background: #e2e8f0;
            color: #1e293b;
        }
        body.dark-mode .aqp-btn-apply-only {
            background: #334155;
            border-color: #475569;
            color: #cbd5e1;
        }
        body.dark-mode .aqp-btn-apply-only:hover {
            background: #475569;
            color: #ffffff;
        }

        /* ===== CSS CHO HỆ THỐNG LỌC & SẮP XẾP ĐA TIÊU CHÍ (SW v333) ===== */
        tr.hide-by-filter { display: none !important; }
        .th-sortable { cursor: pointer; user-select: none; transition: background 0.15s ease; }
        .th-sortable:hover { background: rgba(0, 0, 0, 0.04); }
        body.dark-mode .th-sortable:hover { background: rgba(255, 255, 255, 0.06); }
        .th-sort-wrap { display: inline-flex; align-items: center; gap: 4px; }
        .sort-icon { font-size: 11px; opacity: 0.35; transition: opacity 0.15s, color 0.15s; font-family: monospace; }
        .th-sortable.is-sorted .sort-icon { opacity: 1; color: var(--brand-primary, #0d9488); font-weight: bold; }

        .xv-filter-dropdown-wrap { position: relative; }
        .badge-filter-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #ea580c;
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            border-radius: 99px;
            min-width: 15px;
            height: 15px;
            padding: 0 4px;
            margin-left: 4px;
            vertical-align: middle;
        }
        .xv-filter-popover {
            position: fixed;
            top: 0;
            left: 0;
            width: 320px;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
            scrollbar-width: thin;
            background: var(--card-bg, #ffffff);
            border: 1px solid var(--border-color, #cbd5e1);
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.18), 0 8px 10px -6px rgba(0,0,0,0.12);
            z-index: 9999;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-family: 'Be Vietnam Pro', sans-serif;
            box-sizing: border-box;
        }
        body.dark-mode .xv-filter-popover {
            background: #0f172a;
            border-color: #334155;
        }
        .xv-fp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color, #e2e8f0);
            padding-bottom: 8px;
        }
        .xv-fp-title {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--text-color, #0f172a);
        }
        .xv-fp-close {
            background: none;
            border: none;
            font-size: 14px;
            cursor: pointer;
            color: #94a3b8;
            border-radius: 4px;
            padding: 2px 5px;
            line-height: 1;
        }
        .xv-fp-close:hover {
            color: #ef4444;
            background: #fee2e2;
        }
        .xv-fp-row {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .xv-fp-label {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .xv-fp-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        .xv-fp-chip {
            border: 1px solid #cbd5e1;
            border-radius: 20px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 600;
            background: #f8fafc;
            color: #475569;
            cursor: pointer;
            transition: all 0.12s ease;
        }
        .xv-fp-chip:hover {
            border-color: var(--brand-primary, #0d9488);
            color: var(--brand-primary, #0d9488);
        }
        .xv-fp-chip.active {
            background: var(--brand-primary, #0d9488);
            border-color: var(--brand-primary, #0d9488);
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(13, 148, 136, 0.3);
        }
        .xv-fp-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--border-color, #e2e8f0);
            padding-top: 8px;
            margin-top: 2px;
        }
        .xv-fp-btn-reset {
            background: none;
            border: none;
            color: #ef4444;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 4px;
        }
        .xv-fp-btn-reset:hover {
            background: #fee2e2;
        }
        .xv-fp-btn-apply {
            background: var(--brand-primary, #0d9488);
            color: #ffffff;
            border: none;
            border-radius: 6px;
            padding: 6px 14px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }
        .xv-fp-btn-apply:hover {
            background: #0f766e;
        }

        .xv-filter-active-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff7ed;
            border: 1px solid #fed7aa;
            border-radius: 8px;
            padding: 6px 12px;
            margin: 0 0 8px 0;
            font-size: 12px;
            color: #9a3412;
            font-family: 'Be Vietnam Pro', sans-serif;
            box-sizing: border-box;
        }
        body.dark-mode .xv-filter-active-bar {
            background: rgba(234, 88, 12, 0.15);
            border-color: rgba(234, 88, 12, 0.3);
            color: #fdba74;
        }
        .xv-fab-btn-reset {
            background: #ea580c;
            color: #ffffff;
            border: none;
            border-radius: 6px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.12s;
        }
        .xv-fab-btn-reset:hover {
            background: #c2410c;
        }

        /* Mobile Bottom Sheet Lọc & Sắp xếp */
        .mvt-sheet-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(2px);
            z-index: 99999;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .mvt-sheet-box {
            background: var(--card-bg, #ffffff);
            border-radius: 20px 20px 0 0;
            max-height: 85vh;
            overflow-y: auto;
            padding: 16px 18px 24px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 14px;
            font-family: 'Be Vietnam Pro', sans-serif;
            animation: mvtSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes mvtSlideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        body.dark-mode .mvt-sheet-box {
            background: #0f172a;
            color: #f8fafc;
        }