/*  */
        /* form đăn kí */
        @media (max-width: 576px) {
            #registerModal .modal-dialog {
                margin: 1.5rem auto;
                max-width: 98vw;
            }

            #registerModal .modal-content {
                border-radius: 16px;
                padding: 5px 0;
            }

            #registerModal .modal-title {
                font-size: 1.09rem;
            }

            #registerModal input.form-control {
                font-size: 1.01rem;
                min-height: 44px;
            }

            #registerModal .btn {
                font-size: 1.02rem;
                min-height: 42px;
            }
        }

        /* Ẩn thanh bar trên cùng Blogger */
        #navbar,
        #navbar-iframe,
        .navbar,
        .navbar-fixed-top {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            min-height: 0 !important;
            max-height: 0 !important;
            z-index: -1 !important;
        }

        body {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        /* vẽ biểu đồ thống kê */
        /* Responsive wrapper cho canvas chart, giúp kéo ngang trên mobile */
        .chart-responsive-wrapper {
            width: 100%;
            overflow-x: auto;
            padding-bottom: 4px;
        }

        #chartMonthStat {
            min-width: 480px;
            /* Đủ rộng cho nhiều tháng, tự scroll ngang trên mobile */
        }

        @media (max-width: 768px) {
            #monthChartCard .card-body {
                padding: 10px 5px 12px 5px !important;
            }

            #chartMonthStat {
                min-width: 360px;
                max-height: 280px;
            }

            .card-title {
                font-size: 15px !important;
            }
        }

        /* form nhập otp */
        #otpOverlay {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            max-width: 360px;
            width: 94vw;
            padding: 32px 20px;
            border-radius: 16px;
            box-shadow: 0 10px 36px rgba(60, 60, 60, 0.20);
        }


        @media (max-width: 500px) {
            #otpOverlay {
                padding: 24px 8px;
                margin: 24px auto;
                max-width: 98vw;
            }
        }

        .otp-input {
            letter-spacing: 6px;
            text-align: center;
            font-size: 1.8rem;
            font-weight: 600;
            border-radius: 12px;
            height: 52px;
            background: #f9f9fa;
            border: 1px solid #d4d4d4;
            margin-bottom: 18px;
        }

        .otp-input:focus {
            border-color: #17b978;
            box-shadow: 0 0 4px #17b97833;
            background: #f3fff6;
        }

        .resend-otp-btn {
            background: none;
            border: none;
            color: #17b978;
            padding: 0;
            text-decoration: underline;
            font-size: 0.95rem;
            margin-top: 12px;
            cursor: pointer;
        }

        /* hiệu ứng viền sáng người có >365 công */
        .shine-glow {
            box-shadow: 0 0 0 2px #ffd70088, 0 0 12px 2px #ffd70060, 0 0 0 4px #fffbe666;
            border-radius: 8px !important;
            position: relative;
        }

        @keyframes shine-border-small {
            0% {
                box-shadow:
                    0 0 0 2px #ffd70088,
                    0 0 12px 2px #ffd70060,
                    0 0 0 4px #fffbe666;
            }

            60% {
                box-shadow:
                    0 0 0 4px #ffe259bb,
                    0 0 22px 6px #ffd70099,
                    0 0 0 7px #fffbe699;
            }

            100% {
                box-shadow:
                    0 0 0 2px #ffd70088,
                    0 0 12px 2px #ffd70060,
                    0 0 0 4px #fffbe666;
            }
        }





        /* hiệu ứng trái tim bay khi thêm mới lao động */
        /* ảnh nền */

        .welcome-bg {
            background: url('https://131874657-359133672657790718.preview.editmysite.com/uploads/1/3/1/8/131874657/z6768838596358-658c14d8a6fd893f511257f5b0d7ef95_orig.jpg') center center/cover no-repeat;
            min-height: 270px;
            border-radius: 12px;
            position: relative;
        }

        .welcome-bg .modal-body {
            background: rgba(255, 255, 255, 0.18);
            border-radius: 12px;
            z-index: 2;
            min-height: 240px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            /* Dồn xuống dưới */
            align-items: center;
        }

        .welcome-bg .modal-body h4,
        .welcome-bg .modal-body div {
            color: #fff !important;
            text-shadow: 0 2px 10px #000;
        }

        /*  */
        .btn-voice {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            padding: 0;
            outline: none;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-voice .spinner {
            width: 16px;
            height: 16px;
            border: 2.5px solid #007bff;
            border-top: 2.5px solid #e3f0ff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            background: transparent;
            margin-left: 2px;
            display: inline-block;
        }

        .btn-voice .spinner.d-none {
            display: none;
        }

        /* Nút Lưu đang lưu: quay + nhấp nháy nhẹ (vẫn bấm được để nhập tiếp người khác) */
        #submitBtn.lb-saving-btn { opacity: .75; cursor: progress; }
        @keyframes lbBtnPulse { 50% { opacity: .72; } }
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .btn-voice:focus svg,
        .btn-voice.active svg {
            stroke: #007bff;
        }

        /* dieu chinh hightligh */
        #formSection {
            border: 1px solid #ff8800;
            /* Màu cam, bạn có thể đổi */
            border-radius: 2px;
            /* Bo góc mềm mại */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
            /* Đổ bóng nhẹ */
            padding: 24px;
            /* Thoáng nội dung */
            background: #fff;
            /* Nền trắng */
            transition: box-shadow 0.2s;
            /* Hiệu ứng hover */
        }

        #formSection:focus-within,
        #formSection:hover {
            box-shadow: 0 4px 16px rgba(255, 136, 0, 0.2);
            /* Nhấn mạnh khi focus/hover */
            border-color: #ffab40;
            /* Border sáng hơn khi hover */
        }

        /*  */

        /* ========== CODE CŨ ========== */
        .focus-highlight {
            transition: box-shadow 0.18s, border-color 0.18s;
            border: 2px solid transparent;
            border-radius: 12px;
        }

        .focus-highlight:hover,
        .focus-highlight:focus-within {
            border-color: #e7770e;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.17);
        }

        .bg-orange {
            background-color: #fd7e14 !important;
            color: white !important;
        }

        .btn-orange {
            background-color: #fd7e14;
            border-color: #fd7e14;
            color: #fff;
        }

        .btn-orange:hover {
            background-color: #e96b0c;
            border-color: #e96b0c;
            color: #fff;
        }

        .text-orange {
            color: #fd7e14 !important;
        }

        .table-wrapper {
            max-height: calc(100vh - 300px);
            overflow-y: auto;
        }

        .select2-container--default .select2-selection--single {
            height: 38px !important;
            padding: 6px 12px;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
            right: 10px;
        }

        .hidden-phone {
            color: transparent !important;
            text-shadow: none !important;
            user-select: none;
        }

        .hidden-phone::before {
            content: "*********";
            color: #000;
        }

        .form-label {
            font-weight: 600;
            font-size: 0.95rem;
            color: #343a40;
            margin-bottom: 4px;
            display: inline-block;
        }

        #confirmDeleteModal .modal-content {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
        }

        .table thead th {
            vertical-align: middle;
        }

        .table-hover tbody tr:hover {
            background-color: #f2f6fc;
        }

        .table-responsive {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
        }

        #dataTable td,
        #dataTable th {
            white-space: nowrap;
        }

        .badge-view {
            background-color: #0d6efd;
            color: #fff;
            text-decoration: none;
            padding: 4px 8px;
            border-radius: 5px;
            font-size: 0.875rem;
        }

        .badge-view:hover {
            background-color: #0b5ed7;
        }

        .table-wrapper {
            max-height: 400px;
            overflow-y: auto;
        }

        .table-wrapper table {
            margin-bottom: 0;
        }

        #passwordOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        body {
            display: none;
        }

        .table-responsive {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow-x: auto;
        }

        #advanceTable th,
        #advanceTable td {
            min-width: 120px;
            white-space: nowrap;
        }

        /* ===== Ứng lương v2 ===== */
        .adv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
        .adv-stat { border: 1px solid #dee2e6; border-left-width: 4px; border-radius: 8px; padding: .5rem .75rem; background: #fff; }
        .adv-stat-paid { border-left-color: #198754; }
        .adv-stat-pend { border-left-color: #ffc107; }
        .adv-stat-people { border-left-color: #0d6efd; }
        .adv-stat-l { font-size: .8rem; color: #6c757d; }
        .adv-stat-v { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
        .adv-stat-s { font-size: .78rem; color: #6c757d; }
        .adv-person { border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: .5rem; background: #fff; }
        .adv-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; padding: .6rem .75rem; cursor: pointer; user-select: none; }
        .adv-person-head:hover { background: #f8f9fa; }
        .adv-person-head:focus-visible { outline: 2px solid #0d6efd; outline-offset: -2px; }
        .adv-name { font-weight: 600; }
        .adv-total { margin-left: auto; font-weight: 700; color: #198754; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .adv-caret { transition: transform .15s; }
        .adv-person.open .adv-caret { transform: rotate(90deg); }
        .adv-person-body { display: none; border-top: 1px solid #eee; padding: .6rem .75rem; }
        .adv-person.open .adv-person-body { display: block; }
        /* ===== THẺ PHIẾU ỨNG (thay bảng ngang: đọc hết, không cần kéo thanh trượt) ===== */
        .adv-tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
        .adv-tk { position: relative; background: #fff; border: 1px solid #EFE8DD; border-left: 4px solid #1E9B5C; border-radius: 12px; padding: 11px 13px 10px; box-shadow: 0 1px 2px rgba(60, 40, 10, .04); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
        .adv-tk.is-pend { border-left-color: #F5A524; background: #FFFBF1; }
        .adv-tk.is-cancel { border-left-color: #B8B2A8; background: #F7F5F1; }
        .adv-tk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
        .adv-tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
        .adv-tk-lan { font-weight: 700; font-size: .78rem; color: #8A4B08; background: #FDEBD3; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
        .adv-tk-lan small { font-weight: 500; opacity: .7; }
        .adv-tk-date { font-weight: 600; font-size: .92rem; color: #2B2A28; white-space: nowrap; }
        .adv-tk-ky { font-size: .75rem; color: #6c757d; background: #F1EEE8; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
        .adv-tk-amt { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; color: #0E7040; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15; }
        .adv-tk.is-pend .adv-tk-amt { color: #A86400; }
        .adv-tk.is-cancel .adv-tk-amt { color: #9A948A; text-decoration: line-through; }
        .adv-tk-st { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
        .adv-tk-who { padding-bottom: 6px; border-bottom: 1px dashed #EFE8DD; }
        .adv-tk-who b { font-size: .98rem; }
        .adv-tk-kv { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 6px 10px; font-size: .84rem; align-items: start; }
        .adv-tk-kv > span:nth-child(odd) { color: #8B867D; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
        .adv-tk-kv > :nth-child(even) { min-width: 0; overflow-wrap: anywhere; }
        .adv-tk.is-cancel .adv-tk-kv { color: #9A948A; }
        .adv-tk-reason { color: #B02A37; font-size: .82rem; }
        .adv-tk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding-top: 8px; border-top: 1px solid #F1ECE4; }
        .adv-tk-act { display: flex; flex-wrap: wrap; gap: 5px; }
        .adv-tk-act .btn { min-height: 32px; }
        @media (max-width: 575.98px) {
            .adv-person-body { padding: .6rem .5rem; }
            .adv-tk-grid { grid-template-columns: 1fr; }
            .adv-tk-act .btn { min-height: 38px; min-width: 38px; }
            .adv-tk-kv { grid-template-columns: 100px minmax(0, 1fr); }
        }
        .adv-lines th, .adv-lines td { white-space: nowrap; font-size: .9rem; }
        .adv-lines td.adv-note { white-space: normal; min-width: 140px; max-width: 260px; }
        .adv-money { text-align: right; font-variant-numeric: tabular-nums; }
        .adv-id { font-family: Consolas, monospace; font-size: .78rem; color: #6c757d; }
        tr.adv-cancel > td:not(:last-child) { text-decoration: line-through; color: #adb5bd; }
        @media (prefers-reduced-motion: reduce) { .adv-caret { transition: none; } }

        /* ===== Khung cuộn riêng cho danh sách dài (không kéo dài cả trang) ===== */
        .sbox {
            max-height: 70vh; max-height: 70dvh;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid #dee2e6; border-radius: 8px;
            background: #fcfcfd; padding: .5rem;
        }
        .sbox:empty { display: none; }
        .sbox-bar {
            display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
            font-size: .82rem; color: #6c757d; margin-bottom: .35rem;
        }
        .sbox-bar .sbox-info { margin-right: auto; }
        .sbox-bar .btn { padding: .1rem .5rem; font-size: .8rem; }
        #ldCardScroll { max-height: 80vh; max-height: 80dvh; padding: .5rem .35rem; }
        /* ----- Danh sách thẻ trên điện thoại: chế độ TOÀN MÀN HÌNH + chế độ GỌN ----- */
        .ld-fs-only { display: none; }
        #ldFsBtn { padding: .1rem .55rem; font-size: .8rem; font-weight: 600; }
        body.ld-fs-open { overflow: hidden !important; }
        body.ld-fs-open .lb-tabs { display: none !important; }
        #ldCardBox.ld-fs {
            position: fixed; inset: 0; z-index: 1060; display: flex !important; flex-direction: column;
            background: #f7f5f2; margin: 0; animation: none;
        }
        #ldCardBox.ld-fs .sbox-bar {
            flex: 0 0 auto; margin: 0; flex-wrap: nowrap; gap: .35rem; overflow-x: auto; white-space: nowrap;
            padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; background: #fff; border-bottom: 1px solid #ece6df;
            box-shadow: 0 2px 10px rgba(31, 27, 22, .06); color: #3d342b; font-size: .84rem; font-weight: 600;
        }
        #ldCardBox.ld-fs .sbox-bar .sbox-info { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        #ldCardBox.ld-fs .sbox-bar .btn { flex: 0 0 auto; padding: .3rem .6rem; font-size: .84rem; }
        #ldCardBox.ld-fs .ld-nofs { display: none !important; }
        #ldCardBox.ld-fs .ld-fs-only { display: inline-block; }
        #ldCardBox.ld-fs #ldCardScroll {
            flex: 1 1 auto; min-height: 0; max-height: none !important; border: 0; border-radius: 0; background: transparent;
            padding: 10px 8px calc(16px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain;
        }
        /* chế độ gọn: bỏ dòng "Tạo lúc / Cập nhật / Lần cập nhật", thu khoảng trắng → thấy nhiều người hơn, chữ giữ nguyên cỡ */
        @media (max-width: 768px) {
            body.ld-dense #ldCardList { gap: 10px; }
            body.ld-dense .ld-card { padding: 11px 11px 12px !important; border-radius: 16px; gap: 9px; }
            body.ld-dense .ld-card .ld-info-list.mt-1 { display: none !important; }
            body.ld-dense .ld-card .ld-info-list { margin: 1px 0 3px; gap: 2px 12px; }
            body.ld-dense .ld-card .ld-actions, body.ld-dense .ld-card .ld-actions-bottom { margin-top: 6px; }
        }
        #ldCardScroll #ldCardList { margin-top: 0; }
        /* bảng "Từng phiếu": tiêu đề dính trên, tổng dính dưới */
        .sbox .adv-flat { margin: 0; }
        .sbox .adv-flat thead th { position: sticky; top: -.5rem; z-index: 2; }
        .sbox .adv-flat tfoot td { position: sticky; bottom: -.5rem; z-index: 2; background: #f1f3f5; }
        @media print {
            .sbox, #ldCardScroll { max-height: none !important; overflow: visible !important; border: 0 !important; }
            #ldCardBox { display: block !important; }
            .sbox-bar { display: none !important; }
        }

        /* ===== Chung SĐT / gợi ý người trùng: dấu hiệu nhận biết + thẻ đối chiếu ===== */
        .lb-shared { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px solid #f0c36d; background: #fff7e0; color: #8a5a00; border-radius: 999px; padding: 1px 9px; font-size: .74rem; font-weight: 600; line-height: 1.5; cursor: pointer; white-space: nowrap; }
        .lb-shared span { overflow: hidden; text-overflow: ellipsis; }
        .lb-shared:hover { filter: brightness(.97); }
        .lb-shared--dup { border-color: #f1a9a0; background: #fdecea; color: #a12a1f; }
        .lb-pc { border: 1px solid #e6e1da; border-left-width: 4px; border-radius: 12px; background: #fff; padding: 10px 12px; margin-bottom: 10px; }
        .lb-pc--success { border-left-color: #2e8b57; }
        .lb-pc--warn { border-left-color: #e0a526; }
        .lb-pc--info { border-left-color: #4a90d9; }
        .lb-pc--neutral { border-left-color: #b7b0a6; }
        .lb-pc--me { border-left-color: #D6650F; background: #fffaf2; }
        .lb-pc-head { display: flex; align-items: center; gap: 10px; }
        .lb-pc-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; background: #b9672a; }
        .lb-pc-verdict { margin: 6px 0 4px; font-size: .88rem; font-weight: 600; }
        .lb-v--success { color: #1f6f43; } .lb-v--warn { color: #8a5a00; } .lb-v--info { color: #1f5f9e; } .lb-v--neutral { color: #4a443c; }
        .lb-pc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
        .lb-chip { border-radius: 999px; padding: 1px 9px; font-size: .76rem; font-weight: 600; border: 1px solid transparent; }
        .lb-chip--ok { background: #e6f4ec; color: #1f6f43; border-color: #bfe0cd; }
        .lb-chip--no { background: #fdecea; color: #a12a1f; border-color: #f4c4be; }
        .lb-chip--na { background: #f1efeb; color: #6b645b; border-color: #e2ded7; }
        .lb-pc-info { font-size: .82rem; color: #4a443c; display: flex; flex-wrap: wrap; gap: 2px 14px; }
        .lb-pc-dots { font-size: .78rem; color: #6c757d; margin-top: 3px; }
        .lb-pc-sum { font-size: .88rem; background: #fff; border: 1px dashed #9fcbe0; border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; }

        .lb-shared--old { border-color: #d6d2cb; background: #f4f2ee; color: #6b645b; font-weight: 500; }
        .lb-shared { margin: 0 4px 4px 0; }
        .lb-shared--own { border-color: #a8d5b9; background: #e9f6ee; color: #1f6f43; }
        .lb-shared--use { border-color: #a9c8ea; background: #e8f1fb; color: #1f5f9e; }
        .lb-own-phone { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e6e1da; border-radius: 10px; padding: 6px 10px; margin-bottom: 10px; }
        .lb-own-phone-n { font-family: 'Roboto Mono', ui-monospace, monospace; font-weight: 600; font-size: 1.08rem; letter-spacing: .02em; color: #0d6efd; }
        #sdtShareNote:empty { display: none; }
        .lb-own-ban { border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: .88rem; border: 1px solid transparent; }
        .lb-own-ban--ok { background: #e9f6ee; color: #1f6f43; border-color: #bfe0cd; }
        .lb-own-ban--warn { background: #fff7e0; color: #8a5a00; border-color: #f0dba0; }
        .lb-own-ban--bad { background: #fdecea; color: #a12a1f; border-color: #f4c4be; }
        .lb-own-pick { background: #fff; border: 1px dashed #9fcbe0; border-radius: 10px; padding: 8px 10px; margin: 2px 0 8px; font-size: .86rem; }
        .lb-own-pick-t { font-weight: 600; margin-bottom: 4px; }
        .lb-own-opt { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
        .lb-own-opt input[type=radio] { flex: 0 0 auto; }

        /* ===== Tab xem ứng lương ===== */
        .adv-tabs .btn { white-space: nowrap; }
        @media (max-width: 576px) {
            .adv-tabs { width: 100%; }
            .adv-tabs .btn { flex: 1 1 0; }
        }
        .adv-day .adv-name { font-variant-numeric: tabular-nums; }
        .adv-day-who { min-width: 150px; }
        .adv-day-who .small { white-space: nowrap; }

        .bi {
            font-family: "bootstrap-icons" !important;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            display: inline-block;
        }

        .modal-content {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
        }

        @media (max-width: 576px) {
            body {
                font-size: 13px;
            }

            .btn,
            .form-control,
            .form-select {
                font-size: 13px;
                padding: 0.375rem 0.5rem;
            }

            .btn .bi,
            .btn i {
                font-size: 1rem;
            }
        }

        /* ========== HẾT CODE CŨ ========== */


        /* ========== MOBILE CARD TỐI ƯU - CODE MỚI ========== */
        @media (max-width: 768px) {

            #dataTable,
            #dataTable thead,
            #dataTable tbody,
            #dataTable th,
            #dataTable td,
            #dataTable tr {
                display: none !important;
            }

            #ldCardList {
                display: flex;
                flex-direction: column;
                gap: 16px;
                margin-top: 10px;
            }

            .ld-card {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                background: #fff;
                border-radius: 18px;
                box-shadow: 0 2px 16px #fd7e1422;
                padding: 15px 12px 20px 12px !important;
                gap: 13px;
                position: relative;
                transition: box-shadow 0.18s;
                border: 1.5px solid #fbeadd;
                box-sizing: border-box;
                width: 100%;
                max-width: 100%;
                word-break: break-word;
                overflow-wrap: anywhere;
            }

            .ld-main {
                flex: 1;
                min-width: 0;
                width: 100%;
                padding-bottom: 0 !important;
                overflow: hidden;
            }

            .ld-name {
                font-weight: 700;
                font-size: 1.18rem;
                color: #fd7e14;
                margin-bottom: 3px;
                display: flex;
                align-items: center;
                gap: 7px;
                line-height: 1.15;
                word-break: break-word;
            }

            .ld-status {
                display: inline-block;
                font-size: 0.95rem;
                margin-left: 6px;
                padding: 0.5px 7px;
                border-radius: 6px;
                background: #fff3ea;
                color: #e7770e;
                font-weight: 600;
                border: 1px solid #fd7e1440;
            }

            .ld-phone {
                margin: 2px 0 2px 0;
                font-size: 1.02rem;
                color: #0d6efd;
                display: flex;
                align-items: center;
                gap: 8px;
                font-family: 'Roboto Mono', monospace;
                font-weight: 500;
            }

            .ld-info-list {
                display: flex;
                flex-wrap: wrap;
                gap: 6px 13px;
                margin: 2px 0 5px 0;
                font-size: 0.96rem;
                max-width: 100%;
                word-break: break-word;
                overflow-wrap: anywhere;
            }

            .ld-info-list.mt-1 {
                margin-bottom: 14px !important;
            }

            .ld-info {
                color: #444;
                font-size: 0.97rem;
                min-width: 86px;
                white-space: normal !important;
                max-width: 100%;
                word-break: break-word;
            }

            .ld-label {
                color: #888;
                font-size: 0.93rem;
                font-weight: 500;
                margin-right: 2px;
                word-break: break-word;
            }

            .ld-actions,
            .ld-actions-bottom {
                display: flex;
                gap: 12px;
                margin-top: 10px;
                justify-content: flex-start;
                position: static !important;
                margin-bottom: 0 !important;
            }

            .ld-actions button,
            .ld-actions-bottom button {
                border-radius: 9px !important;
                box-shadow: 0 1px 2px #fd7e1433;
                padding: 6px 10px !important;
                font-size: 1.15rem !important;
                background: #fff8f2;
                border: 1.3px solid #fd7e1427;
                color: #fd7e14;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 35px;
                min-height: 35px;
                transition: background 0.18s, color 0.15s, border 0.15s;
            }

            .ld-actions button:hover,
            .ld-actions-bottom button:hover {
                background: #fd7e14;
                color: #fff;
                border-color: #fd7e14;
            }

            .ld-image-list {
                margin: 4px 0 0 0;
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
            }

            .badge-view {
                background-color: #0d6efd;
                color: #fff;
                text-decoration: none;
                padding: 2.5px 8px;
                border-radius: 5px;
                font-size: 0.91rem;
                border: none;
            }

            .badge-view:hover {
                background: #0b5ed7;
            }

            .ld-avatar {
                width: 56px;
                height: 56px;
                border-radius: 12px;
                object-fit: cover;
                background: #f4f4f4;
                border: 1.5px solid #fd7e1440;
                flex-shrink: 0;
            }
        }

        /* Fix icon size trong btn mobile */
        @media (max-width: 768px) {

            .btn .bi,
            .btn i {
                font-size: 1.13rem !important;
            }
        }

        /* in */
        @media print {
            body * {
                visibility: hidden !important;
            }

            #ldCardList,
            #ldCardList * {
                visibility: visible !important;
            }

            #ldCardList {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                /* 2 cột */
                grid-template-rows: repeat(3, 1fr) !important;
                /* 3 dòng */
                gap: 4px 8px !important;
                /* Giảm gap */
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                width: 100vw !important;
                min-height: 100vh !important;
                background: #fff !important;
                z-index: 9999 !important;
                margin: 0 !important;
                padding: 4px !important;
                box-sizing: border-box !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }

            .ld-card {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
                min-height: 0 !important;
                /* BỎ dòng height/max-height để card tự co giãn chiều cao */
                box-sizing: border-box !important;
                background: #fff !important;
                border-radius: 7px !important;
                border: 1px solid #fbeadd !important;
                box-shadow: 0 0 2px #eee !important;
                padding: 2px 4px !important;
                font-size: 10px !important;
                line-height: 1.05 !important;
                margin: 0 !important;
                display: block !important;
                overflow: visible !important;
                word-break: break-word !important;
            }

            .ld-card * {
                font-size: 10px !important;
                line-height: 1.1 !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Sau mỗi 6 card thì xuống trang */
            .ld-card:nth-of-type(6n) {
                page-break-after: always !important;
                break-after: page !important;
            }

            /* Ẩn các phần không liên quan */
            #dataDisplaySection,
            #dataTable,
            .table-responsive,
            .btn,
            .form-control,
            .form-select,
            #filterSection,
            #summaryCard,
            #monthChartCard,
            nav,
            #paginationControls {
                display: none !important;
            }
        }

        /* ===== Thống kê nhanh: cố định size + scroll khi dài ===== */

        /* Mỗi ô thống kê cao bằng nhau */
        #summaryStats .card.h-100 {
            height: 280px !important;
            /* chỉnh số này cho “đẹp chuẩn” */
        }

        /* Scroll chỉ nằm bên trong từng ô */
        #summaryStats .card.h-100 .card-body {
            height: 100%;
            overflow-y: auto;
            /* dài quá thì cuộn */
            overflow-x: hidden;
        }

        /* Giữ tiêu đề luôn nhìn thấy khi cuộn trong ô */
        #summaryStats .card-title {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 2;
            padding-top: 2px;
            padding-bottom: 6px;
        }

        /* ✅ FIX z-index: backdrop < modal (và cao hơn mọi overlay của bạn) */
        .modal-backdrop {
            z-index: 10040 !important;
        }

        .modal {
            z-index: 10050 !important;
        }

        /* nếu bạn có overlay login z-index cao, hạ nó xuống hoặc giữ < backdrop */
        #passwordOverlay {
            z-index: 10000 !important;
        }

        /* hoặc thấp hơn 10040 */

        /* ✅ backdrop < modal và tất cả modal đều nổi trên overlay */
        .modal-backdrop {
            z-index: 10040 !important;
        }

        .modal {
            z-index: 10050 !important;
        }

        /* ✅ nhớ include cả forgotOtpModal */
        #forgotModal,
        #forgotOtpModal,
        #resetPassModal {
            z-index: 10050 !important;
        }

        .modal-backdrop {
            z-index: 10040 !important;
        }

        .modal {
            z-index: 10050 !important;
        }

        #passwordOverlay {
            z-index: 10000 !important;
        }

        /* hoặc thấp hơn 10040 */
        /* backdrop luôn thấp hơn modal */
        .modal-backdrop {
            z-index: 10040 !important;
        }

        .modal {
            z-index: 10050 !important;
        }

        /* nếu overlay login của bạn quá cao thì hạ xuống dưới backdrop */
        #passwordOverlay {
            z-index: 10000 !important;
        }

        /* Bootstrap backdrop + modal (để không còn đen/đè nhau) */
        .modal-backdrop {
            z-index: 10040 !important;
        }

        .modal {
            z-index: 10050 !important;
        }


        #otpOverlay {
            z-index: 20000 !important;
        }

        .modal-backdrop {
            z-index: 10040 !important;
        }

        .modal {
            z-index: 10050 !important;
        }

        /* ===== Bảng phân tích lao động ===== */
        .an-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
        .an-kpi{background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.08);border-left:4px solid #adb5bd;cursor:help}
        .an-kpi-label{font-size:.78rem;color:#6c757d}
        .an-kpi-value{font-size:1.45rem;font-weight:700;line-height:1.25}
        .an-kpi-sub{font-size:.74rem;color:#6c757d}
        .an-green{border-left-color:#2e7d32}.an-blue{border-left-color:#1976d2}.an-red{border-left-color:#d32f2f}
        .an-teal{border-left-color:#00897b}.an-orange{border-left-color:#f57c00}.an-purple{border-left-color:#7b1fa2}.an-gray{border-left-color:#607d8b}
        .an-h6{font-size:.9rem;font-weight:600;color:#1565c0;margin-bottom:.5rem}
        .an-table-wrap{max-height:320px;overflow:auto}
        .an-table th{position:sticky;top:0;background:#f8f9fa;font-size:.78rem;white-space:nowrap;z-index:1}
        .an-table td{font-size:.82rem}
        .an-list{max-height:260px;overflow:auto}
        .an-li{font-size:.82rem;padding:3px 2px}
        .an-bar{height:4px;background:#eef2f7;border-radius:2px;margin-top:2px}
        .an-bar span{display:block;height:100%;background:#42a5f5;border-radius:2px}
        .voice-interim{color:#6c757d !important;font-style:italic}
        /* Voice input – bong bóng trạng thái */
        .btn-voice.active{animation:vbPulse 1.2s ease-in-out infinite}
        @keyframes vbPulse{50%{opacity:.55}}

        /* ================= DANH SÁCH HIỂN THỊ LIÊN TỤC ================= */
        .ls-footer {
            display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
            padding: 14px 12px; color: #7a6d62; font-size: .85rem;
            position: sticky; left: 0; /* đứng yên khi cuộn ngang bảng rộng */
        }
        .ls-footer[hidden], .ls-footer [hidden] { display: none; }
        .ls-empty { padding: 28px 12px; text-align: center; color: #7a6d62; }
        @media print { .ls-footer { display: none !important; } }

        /* ================= LƯU TỨC THÌ + TỰ ĐỒNG BỘ ================= */
        #dataTable tr.lb-pending > td, .ld-card.lb-pending { opacity: .6; }
        .lb-saving { display: inline-block; font-size: .72rem; font-weight: 600; color: #6c757d; background: #f1f3f5; border-radius: 999px; padding: 1px 8px; white-space: nowrap; animation: lbPulse 1.2s ease-in-out infinite; }
        @keyframes lbPulse { 50% { opacity: .45; } }
        .lb-sync { font-style: normal; font-size: .78rem; color: #2f9e44; white-space: nowrap; }
        .lb-sync-busy { color: #6c757d; }
        .lb-sync-err { color: #d63939; }
        @media (prefers-reduced-motion: reduce) { .lb-saving { animation: none; } }

        /* ================= SỬA TRẠNG THÁI HÀNG LOẠT ================= */
        #dataTable th.bk-col, #dataTable td.bk-col { width: 36px; min-width: 36px; text-align: center; padding-left: 4px; padding-right: 4px; }
        #dataTable .bk-col .form-check-input { cursor: pointer; margin: 0; width: 1.1em; height: 1.1em; }
        #dataTable tr.bk-selected > td { background-color: #e7f1ff !important; }
        .ld-card { position: relative; }
        .bk-card-tick {
            display: none; position: absolute; top: 10px; right: 10px; z-index: 2;
            width: 26px; height: 26px; border-radius: 50%; border: 2px solid #adb5bd; background: #fff;
            align-items: center; justify-content: center; color: transparent; font-size: 16px;
        }
        body.bk-selecting .bk-card-tick { display: flex; }
        body.bk-selecting .ld-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
        .ld-card.bk-selected { outline: 2px solid #0d6efd; outline-offset: -2px; background: #f0f6ff !important; }
        .ld-card.bk-selected .bk-card-tick { background: #0d6efd; border-color: #0d6efd; color: #fff; }
        #bkModeBtn.active { background: #212529; color: #fff; }

        /* ===== CỐ ĐỊNH 2 CỘT (Mã NLĐ / Mã đợt + Họ tên) khi cuộn ngang bảng danh sách (màn hình rộng) ===== */
        #freezeColBtn.active { background: var(--lb-or, #212529); border-color: var(--lb-or, #212529); color: #fff; }
        @media (max-width: 991.98px) { #freezeColGroup { display: none !important; } }
        @media (min-width: 992px) {
            #dataTable.ld-freeze thead th:nth-child(3), #dataTable.ld-freeze tbody td:nth-child(3),
            #dataTable.ld-freeze thead th:nth-child(4), #dataTable.ld-freeze tbody td:nth-child(4) { position: sticky; z-index: 2; }
            #dataTable.ld-freeze thead th:nth-child(3), #dataTable.ld-freeze thead th:nth-child(4) { z-index: 3; }
            #dataTable.ld-freeze thead th:nth-child(3), #dataTable.ld-freeze tbody td:nth-child(3) { left: 0; }
            #dataTable.ld-freeze thead th:nth-child(4), #dataTable.ld-freeze tbody td:nth-child(4) { left: var(--ld-f2, 160px); }
            #dataTable.ld-freeze tbody td:nth-child(4) { white-space: normal; min-width: 200px; max-width: 320px; }
            /* viền bảng gộp không đi theo ô sticky → tự vẽ lại đường kẻ dưới và cạnh phải của 2 cột cố định */
            #dataTable.ld-freeze thead th:nth-child(3)::before, #dataTable.ld-freeze thead th:nth-child(4)::before,
            #dataTable.ld-freeze tbody td:nth-child(3)::before, #dataTable.ld-freeze tbody td:nth-child(4)::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #F1ECE4; pointer-events: none; }
            #dataTable.ld-freeze thead th:nth-child(3)::after, #dataTable.ld-freeze thead th:nth-child(4)::after,
            #dataTable.ld-freeze tbody td:nth-child(3)::after, #dataTable.ld-freeze tbody td:nth-child(4)::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: #E4DACD; pointer-events: none; }
            #dataTable.ld-freeze.ld-sx thead th:nth-child(4)::after, #dataTable.ld-freeze.ld-sx tbody td:nth-child(4)::after { box-shadow: 4px 0 8px -2px rgba(0, 0, 0, .18); }
        }

        #bkBar {
            position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 10030;
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
            max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 14px;
            background: #212529; color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
        }
        #bkBar[hidden] { display: none; }
        #bkBar .bk-count { font-weight: 600; white-space: nowrap; margin-right: 4px; }
        #bkBar .btn { white-space: nowrap; }
        @media (max-width: 768px) {
            #bkBar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; padding: 8px 10px; }
            #bkBar .bk-count { width: 100%; text-align: center; }
            #bkBar .btn { flex: 1 1 auto; }
        }

        /* Ứng lương hàng loạt + đổi thông tin hàng loạt */
        #baModal .ba-defaults { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 12px; }
        #baModal .ba-head, #baModal .ba-row {
            display: grid; align-items: center; gap: 8px;
            grid-template-columns: minmax(150px, 1.5fr) minmax(120px, 1fr) minmax(120px, 1.1fr) minmax(130px, 1fr) minmax(130px, 1fr) 28px;
        }
        #baModal .ba-head { font-size: .8rem; font-weight: 600; color: #6c757d; padding: 6px 8px; border-bottom: 1px solid #dee2e6; position: sticky; top: 0; background: #fff; z-index: 2; }
        #baModal .ba-row { padding: 8px; border-bottom: 1px solid #f1f3f5; }
        #baModal .ba-row.ba-err { background: #fff5f5; }
        #biModal .bi-list { max-height: 45vh; overflow: auto; border: 1px solid #e9ecef; border-radius: 10px; }
        #biModal .bi-row { padding: 6px 10px; border-bottom: 1px solid #f1f3f5; }
        #biModal .bt-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(220px, 2.4fr) 140px; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #f1f3f5; }
        #biModal .bt-row.bt-err { background: #fff5f5; }
        #biModal .bt-flow { min-width: 0; line-height: 1.5; }
        #biModal [data-bi-mode].active { background: #0d6efd; color: #fff; }
        @media (max-width: 768px) {
            #biModal .bt-row { grid-template-columns: 1fr 130px; }
            #biModal .bt-flow { grid-column: 1 / 3; order: 3; }
        }
        @media (max-width: 768px) {
            #baModal .ba-head { display: none; }
            #baModal .ba-row { grid-template-columns: 1fr 1fr 28px; }
            #baModal .ba-row > div:nth-child(1) { grid-column: 1 / 3; }
            #baModal .ba-row > div:nth-child(3) { grid-column: 2 / 4; }
            #baModal .ba-row > div:nth-child(4), #baModal .ba-row > div:nth-child(5) { grid-column: 1 / 4; }
            #baModal .ba-row > div:nth-child(6) { grid-column: 3; grid-row: 1; }
        }

        /* Ô ngày / tháng tiếng Việt */
        .lb-fp-foot { display: flex; justify-content: space-between; padding: 6px 12px 8px; border-top: 1px solid #e6e6e6; }
        .lb-fp-foot button { border: 0; background: none; color: #0d6efd; font-size: .82rem; padding: 2px 4px; cursor: pointer; }
        .lb-fp-foot button:hover { text-decoration: underline; }
        .lb-datefield.is-invalid { border-color: #dc3545 !important; }
        .flatpickr-monthSelect-month { font-size: .85rem; }
        #bkUndo {
            position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 10031;
            display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 16px);
            padding: 10px 14px; border-radius: 12px; background: #198754; color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
        }
        #bkUndo[hidden] { display: none; }
        #bkUndo .btn { white-space: nowrap; }

        /* Hộp thoại sửa hàng loạt: lưới dùng chung máy tính + điện thoại */
        #bkModal .bk-defaults { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 12px; }
        #bkModal .bk-head, #bkModal .bk-row {
            display: grid; align-items: center; gap: 8px;
            grid-template-columns: 28px minmax(150px, 1.6fr) minmax(120px, 1fr) minmax(140px, 1fr) minmax(130px, 1fr) minmax(140px, 1.2fr) 32px;
        }
        #bkModal .bk-head { font-size: .8rem; font-weight: 600; color: #6c757d; padding: 6px 8px; border-bottom: 1px solid #dee2e6; position: sticky; top: 0; background: #fff; z-index: 1; }
        #bkModal .bk-row { padding: 8px; border-bottom: 1px solid #f1f3f5; }
        #bkModal .bk-row > *, #bkModal .bk-head > * { min-width: 0; }
        #bkModal .bk-defaults .btn { white-space: normal; }
        #bkModal .bk-row.bk-manual { background: #fff8e1; }
        #bkModal .bk-row.bk-err { background: #fdecea; }
        #bkModal .bk-row.bk-same { opacity: .6; }
        #bkModal .bk-name { font-weight: 600; line-height: 1.2; }
        #bkModal .bk-sub { font-size: .78rem; color: #6c757d; }
        #bkModal .bk-msg { font-size: .8rem; }
        #bkModal .bk-msg.text-danger { font-weight: 600; }
        #bkModal .bk-lbl { display: none; font-size: .72rem; color: #6c757d; margin-bottom: 2px; }
        #bkModal .bk-list { max-height: 55vh; overflow-y: auto; }
        @media (max-width: 768px) {
            #bkModal .bk-head { display: none; }
            #bkModal .bk-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 32px; grid-template-areas: "chk name name del" ". tt end end" ". start msg msg"; }
            #bkModal .bk-row > .bk-c-chk { grid-area: chk; }
            #bkModal .bk-row > .bk-c-name { grid-area: name; }
            #bkModal .bk-row > .bk-c-start { grid-area: start; }
            #bkModal .bk-row > .bk-c-tt { grid-area: tt; }
            #bkModal .bk-row > .bk-c-end { grid-area: end; }
            #bkModal .bk-row > .bk-c-msg { grid-area: msg; align-self: end; }
            #bkModal .bk-row > .bk-c-del { grid-area: del; }
            #bkModal .bk-lbl { display: block; }
            #bkModal .bk-list { max-height: none; }
        }
        @media print { .bk-col, #bkBar, #bkUndo, #bkModeBtn, .bk-card-tick { display: none !important; } }

        /* ================= KIỂM TRA ĐỘ ĐẦY ĐỦ HỒ SƠ (DQ) ================= */
        :root {
            --dq-req: #d63939;
            --dq-req-bg: #fdecec;
            --dq-rec: #c98a00;
            --dq-rec-bg: #fff6dc;
            --dq-chk: #6d4bd8;
            --dq-chk-bg: #f1edfd;
            --dq-ok: #2f9e44;
            --dq-ok-bg: #ebf8ee;
            --dq-ink: #2b2118;
            --dq-muted: #7a6d62;
            --dq-line: #f0e6dc;
            --dq-brand: #fd7e14;
        }

        /* Điểm nhận diện: vòng = % hồ sơ đã có, số giữa = số mục cần xử lý */
        .dq-dot {
            position: relative;
            display: inline-grid;
            place-items: center;
            width: 26px;
            height: 26px;
            padding: 0;
            margin-left: 6px;
            border: 0;
            border-radius: 50%;
            background: #fff;
            vertical-align: middle;
            cursor: pointer;
            flex: 0 0 auto;
            color: var(--dq-tone);
            -webkit-tap-highlight-color: transparent;
        }
        .dq-dot::after { /* vùng chạm rộng hơn cho ngón tay */
            content: '';
            position: absolute;
            inset: -9px;
        }
        .dq-dot svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
        .dq-dot circle { fill: none; stroke-width: 3.4; }
        .dq-dot .dq-track { stroke: color-mix(in srgb, var(--dq-tone) 18%, #fff); }
        .dq-dot .dq-arc { stroke: var(--dq-tone); stroke-linecap: round; }
        .dq-dot span { position: relative; font: 700 11px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
        .dq-dot--req { --dq-tone: var(--dq-req); }
        .dq-dot--chk { --dq-tone: var(--dq-chk); }
        .dq-dot--rec { --dq-tone: var(--dq-rec); }
        .dq-dot:hover { background: color-mix(in srgb, var(--dq-tone) 8%, #fff); }
        .dq-dot:focus-visible { outline: 2px solid var(--dq-tone); outline-offset: 2px; }
        .dq-dot[aria-expanded="true"] { background: color-mix(in srgb, var(--dq-tone) 12%, #fff); }
        .ld-name .dq-dot { width: 28px; height: 28px; margin-left: auto; }

        /* Ô bảng bị thiếu */
        #dataTable td.dq-miss--req { background: var(--dq-req-bg); }
        #dataTable td.dq-miss--rec { background: var(--dq-rec-bg); }
        #dataTable td.dq-miss--chk { background: var(--dq-chk-bg); }
        #dataTable td.dq-miss:empty::before {
            content: 'Thiếu';
            font-size: .75rem;
            font-style: italic;
            color: var(--dq-muted);
        }

        /* Bảng chi tiết (popover trên máy tính, bottom sheet trên điện thoại) */
        .dq-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1079;
            background: rgba(35, 25, 15, .38);
        }
        .dq-pop {
            position: fixed;
            z-index: 1080;
            width: 340px;
            max-width: calc(100vw - 16px);
            max-height: min(560px, calc(100vh - 16px));
            display: flex;
            flex-direction: column;
            background: #fff;
            color: var(--dq-ink);
            border: 1px solid var(--dq-line);
            border-radius: 14px;
            box-shadow: 0 14px 36px rgba(60, 35, 10, .18), 0 2px 6px rgba(60, 35, 10, .08);
            font-size: .9rem;
            overflow: hidden;
            animation: dqIn .14s ease-out;
        }
        .dq-pop[hidden], .dq-backdrop[hidden] { display: none; }
        @keyframes dqIn { from { opacity: 0; transform: translateY(-4px); } }

        .dq-grip { display: none; }
        .dq-head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 14px 8px; }
        .dq-who { flex: 1; min-width: 0; }
        .dq-name { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
        .dq-meta { color: var(--dq-muted); font-size: .8rem; margin-top: 2px; }
        .dq-x {
            border: 0; background: transparent; color: var(--dq-muted);
            width: 30px; height: 30px; border-radius: 8px; margin: -4px -6px 0 0;
        }
        .dq-x:hover { background: #f6f1ec; color: var(--dq-ink); }

        .dq-meter { padding: 4px 14px 12px; border-bottom: 1px solid var(--dq-line); }
        .dq-meter-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--dq-muted); margin-bottom: 6px; }
        .dq-meter-row b { color: var(--dq-ink); font-weight: 600; }
        .dq-bar { height: 6px; border-radius: 6px; background: #f3ede7; overflow: hidden; }
        .dq-bar i { display: block; height: 100%; border-radius: 6px; background: var(--dq-tone, var(--dq-ok)); }
        .dq-meter--req { --dq-tone: var(--dq-req); }
        .dq-meter--chk { --dq-tone: var(--dq-chk); }
        .dq-meter--rec { --dq-tone: var(--dq-rec); }

        .dq-body { overflow-y: auto; padding: 4px 0 6px; overscroll-behavior: contain; }
        .dq-sec h6 {
            display: flex; align-items: center; gap: 6px;
            margin: 10px 14px 4px; font-size: .8rem; font-weight: 700; color: var(--dq-tone);
        }
        .dq-sec h6 span {
            margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px;
            background: var(--dq-bg); font-size: .75rem; text-align: center;
        }
        .dq-sec--req { --dq-tone: var(--dq-req); --dq-bg: var(--dq-req-bg); }
        .dq-sec--rec { --dq-tone: var(--dq-rec); --dq-bg: var(--dq-rec-bg); }
        .dq-sec--chk { --dq-tone: var(--dq-chk); --dq-bg: var(--dq-chk-bg); }
        .dq-sec ul { list-style: none; margin: 0; padding: 0; }
        .dq-sec li button {
            width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
            border: 0; background: transparent; padding: 7px 14px 7px 12px;
            border-left: 3px solid var(--dq-tone); margin: 2px 0;
            color: inherit;
        }
        .dq-sec li button:hover, .dq-sec li button:focus-visible { background: #fbf6f1; outline: none; }
        .dq-sec li .bi-chevron-right { color: #c4b8ad; font-size: .8rem; }
        .dq-item-main { flex: 1; min-width: 0; }
        .dq-item-main b { display: block; font-weight: 600; }
        .dq-item-main small { display: block; color: var(--dq-muted); font-size: .78rem; line-height: 1.3; }

        .dq-foot {
            display: flex; justify-content: flex-end; gap: 8px;
            padding: 10px 14px; border-top: 1px solid var(--dq-line); background: #fffbf7;
        }
        .dq-cta { background: var(--dq-brand); border-color: var(--dq-brand); color: #fff; font-weight: 600; }
        .dq-cta:hover, .dq-cta:focus-visible { background: #e96c05; border-color: #e96c05; color: #fff; }

        .dq-pop--sheet {
            left: 0 !important; right: 0; bottom: 0; top: auto !important;
            width: 100%; max-width: 100%; max-height: 82vh;
            border-radius: 18px 18px 0 0; border-bottom: 0;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            animation: dqUp .2s ease-out;
        }
        .dq-pop--sheet .dq-grip { display: block; width: 40px; height: 4px; border-radius: 4px; background: #e2d7cd; margin: 8px auto 0; }
        .dq-pop--sheet .dq-sec li button { padding-top: 10px; padding-bottom: 10px; }
        .dq-pop--sheet .dq-foot .btn { flex: 1; min-height: 42px; }
        @keyframes dqUp { from { transform: translateY(100%); } }

        /* Form sửa: bảng tóm tắt + đánh dấu ô cần bổ sung */
        .dq-panel {
            border-radius: 12px; padding: 10px 12px;
            border: 1px solid var(--dq-line); background: #fffaf5;
        }
        .dq-panel[hidden] { display: none; }
        .dq-panel--req { background: var(--dq-req-bg); border-color: #f6caca; }
        .dq-panel--chk { background: var(--dq-chk-bg); border-color: #ddd3fa; }
        .dq-panel--rec { background: var(--dq-rec-bg); border-color: #f3e0a6; }
        .dq-panel--ok  { background: var(--dq-ok-bg);  border-color: #c6ebcf; color: #1f6f31; }
        .dq-panel-head { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
        .dq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .dq-chip {
            border: 1px solid currentColor; background: #fff; border-radius: 999px;
            padding: 2px 10px; font-size: .8rem; font-weight: 600; line-height: 1.6;
        }
        .dq-chip--req { color: var(--dq-req); }
        .dq-chip--rec { color: var(--dq-rec); }
        .dq-chip--chk { color: var(--dq-chk); }
        .dq-chip:hover { color: #fff; }
        .dq-chip--req:hover { background: var(--dq-req); }
        .dq-chip--rec:hover { background: var(--dq-rec); }
        .dq-chip--chk:hover { background: var(--dq-chk); }

        .dq-need { --dq-tone: var(--dq-rec); }
        .dq-need--req { --dq-tone: var(--dq-req); }
        .dq-need--chk { --dq-tone: var(--dq-chk); }
        .dq-need > .form-label::after {
            content: 'Cần bổ sung';
            margin-left: 6px; padding: 0 7px; border-radius: 999px;
            font-size: .72rem; font-weight: 600; vertical-align: 1px;
            color: #fff; background: var(--dq-tone);
        }
        .dq-need--chk > .form-label::after { content: 'Kiểm tra lại'; }
        .dq-need .form-control, .dq-need .form-select, .dq-need .select2-selection {
            border-color: var(--dq-tone) !important;
            box-shadow: inset 3px 0 0 var(--dq-tone);
        }
        .dq-flash { animation: dqFlash 1.2s ease-out; border-radius: 10px; }
        @keyframes dqFlash {
            0%, 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dq-tone, var(--dq-brand)) 35%, transparent); }
            100% { box-shadow: 0 0 0 0 transparent; }
        }

        #dqCountBadge { margin-left: 6px; background: var(--dq-req); color: #fff; font-weight: 600; }

        @media (prefers-reduced-motion: reduce) {
            .dq-pop, .dq-pop--sheet, .dq-flash { animation: none; }
        }
        @media print {
            .dq-dot, .dq-pop, .dq-backdrop, .dq-panel { display: none !important; }
            #dataTable td.dq-miss { background: none !important; }
            #dataTable td.dq-miss:empty::before { content: none; }
        }
        /* ===== Tài khoản ngân hàng ===== */
        .bank-box { border: 1px dashed #c9d6e3; border-radius: 10px; padding: 10px 12px 4px; background: #f8fbff; }
        .bank-box-title { font-weight: 600; font-size: .9rem; color: #0d6efd; margin-bottom: 6px; }
        .bank-qr-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #0d6efd; background: #fff; color: #0d6efd; border-radius: 8px; padding: 3px 10px; font-size: .8rem; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; }
        .bank-qr-btn:hover:not(:disabled) { background: #0d6efd; color: #fff; }
        .bank-qr-btn:disabled { opacity: .65; cursor: progress; }
        .bank-box.qr-drop { outline: 2px dashed #0d6efd; outline-offset: 2px; background: #f1f6ff; }
        .bank-cell { white-space: nowrap; font-size: .85rem; line-height: 1.25; }
        .bank-cell .bank-stk { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }
        .bank-cell .bank-name { color: #6c757d; font-size: .78rem; white-space: normal; }
        .bank-copy { border: 0; background: none; padding: 0 2px; color: #0d6efd; cursor: pointer; }
        /* ===== Ô tài khoản ngân hàng: STK + tên ngân hàng, mỗi dòng 1 nút sao chép, cột nút thẳng hàng ===== */
        .bank-cell.bx { display: block; min-width: 150px; }
        .bx-grid { display: grid; grid-template-columns: max-content auto; align-items: center; column-gap: 6px; row-gap: 3px; }
        .bx-grid .bank-stk { font-size: .9rem; letter-spacing: .01em; line-height: 22px; }
        .bx-chip { justify-self: start; max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; font-weight: 600; line-height: 1.55; padding: 0 9px; border-radius: 999px; color: #0b5ed7; background: #e8f0fe; }
        .bx-act { display: inline-flex; justify-content: flex-end; align-items: center; gap: 2px; min-width: 22px; }
        .bx-sub { margin-top: 2px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: #6c757d; font-size: .72rem; line-height: 1.3; }
        .bx-cp { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #6c757d; opacity: .5; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
        .bx-cp:hover, .bx-cp:focus-visible { background: #e7f1ff; color: #0d6efd; opacity: 1; outline: none; }
        .bx-cp.done { background: #e6f4ea; color: #198754; opacity: 1; }
        .bank-cell:hover .bx-cp, tr:hover .bx-cp { opacity: .95; }
        @media (hover: none) { .bx-cp { opacity: .85; } }
        @media print { .bx-cp { display: none !important; } }

        /* ===== Thẻ lao động trên điện thoại: khối "Ngân hàng / STK" – nhãn thẳng cột, nút chép thẳng hàng, chữ dài tự xuống dòng gọn ===== */
        .ld-bank { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; margin: 4px 0 8px; padding: 7px 7px 7px 12px; max-width: 100%; box-sizing: border-box; background: #FFF8F1; border: 1px solid #F6E3D0; border-radius: 12px; }
        .ld-bank .ld-label { margin: 0; white-space: nowrap; }
        .ld-bank-v { min-width: 0; color: #333; font-size: .98rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
        .ld-bank-v.ld-bank-stk { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.06rem; font-weight: 700; letter-spacing: .03em; }
        .ld-bank-v.is-empty { color: #9aa0a6; font-weight: 500; font-style: italic; }
        .bx-cp.bx-cp-lg { width: 34px; height: 34px; justify-self: end; border-radius: 10px; background: #fff; border: 1px solid #F3D9BF; color: #fd7e14; opacity: 1; font-size: 1rem; }
        .bx-cp.bx-cp-lg:hover, .bx-cp.bx-cp-lg:focus-visible { background: #FFF1E3; color: #e8690b; }
        .bx-cp.bx-cp-lg.done { background: #e6f4ea; border-color: #bfe3cc; color: #198754; }
        .ld-bank-gap { width: 34px; height: 34px; }
        body.ld-dense .ld-card .ld-bank { margin: 2px 0 4px; padding: 4px 5px 4px 10px; gap: 2px 8px; }
        body.ld-dense .ld-card .bx-cp.bx-cp-lg, body.ld-dense .ld-card .ld-bank-gap { width: 28px; height: 28px; }
        body.ld-dense .ld-card .ld-bank { grid-template-columns: max-content minmax(0, 1fr) auto; }

        /* ===== Thêm / sửa tài khoản ngân hàng nhanh ===== */
        .bx-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
        .bx-foot .bx-sub { margin-top: 0; flex: 1 1 auto; min-width: 0; max-width: 190px; }
        .bq-add { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--lb-or, #e7770e); background: #FFF8F1; color: #b45309; border-radius: 8px; padding: 3px 10px; font-size: .78rem; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer; }
        .bq-add:hover, .bq-add:focus-visible { background: #FFEFD9; outline: none; }
        .bq-add.bq-add-card { display: flex; width: 100%; justify-content: center; padding: 10px; font-size: .95rem; border-radius: 12px; margin: 4px 0 8px; }
        .bq-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #F3D9BF; background: #fff; color: #b45309; border-radius: 999px; padding: 2px 12px; font-size: .8rem; font-weight: 600; line-height: 1.6; cursor: pointer; }
        .ld-bank-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 600; color: #8a7a6a; }
        body.ld-dense .ld-card .bq-add.bq-add-card { padding: 6px; margin: 2px 0 4px; }
        tr.bq-over > *, .ld-card.bq-over { background-color: #FFF6EC !important; box-shadow: inset 0 0 0 2px var(--lb-or, #e7770e) !important; }
        #bqModal .modal-content { border-radius: 16px; border: 1px solid #fbeadd; }
        #bqModal .bq-drop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0; border: 2px dashed var(--lb-or, #e7770e); border-radius: 14px; background: #FFF8F1; color: #6b4a22; cursor: pointer; transition: background .15s; }
        #bqModal .bq-drop:hover, #bqModal .bq-drop:focus-visible, #bqModal .bq-drop.is-over { background: #FFEFD9; outline: none; }
        #bqModal .bq-drop > i { font-size: 1.9rem; color: var(--lb-or, #e7770e); }
        #bqModal .bq-drop b { display: block; font-size: .98rem; }
        #bqModal .bq-drop small { display: block; color: #8a7a6a; }
        #bqModal .bq-cur { margin-top: 10px; padding: 6px 10px; border-radius: 10px; background: #f6f6f4; color: #555; font-size: .88rem; }
        #bqModal .bq-checks { margin-top: 8px; }
        #bqModal .bq-c { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 7px 10px; border-radius: 10px; font-size: .88rem; line-height: 1.35; }
        #bqModal .bq-c > i { margin-top: 2px; }
        #bqModal .bq-ok { background: #e9f7ef; color: #146c43; }
        #bqModal .bq-warn { background: #fff4e0; color: #7a4a00; }
        #bqModal .bq-err { background: #fde8e6; color: #8f1d14; }
        #bqModal .bq-info { background: #eef3fb; color: #1d4e89; }
        @media print { .bq-add, .bq-pill, .bx-edit { display: none !important; } }

        /* ===== Ẩn / hiện số tài khoản (giống SĐT) + nút phạm vi "Thêm STK" ===== */
        .hidden-stk { user-select: none; }
        .hidden-stk::before { content: "*********"; color: #000; font-weight: 600; letter-spacing: .06em; }
        .stk-cell.hidden-stk + .bx-act .bx-cp-stk, .ld-bank-stk.hidden-stk + .ld-bank-btns .bx-cp-stk { display: none !important; }
        .stk-inline { cursor: pointer; border-bottom: 1px dotted #9aa0a6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
        .bx-eye { opacity: .75; }
        .ld-bank-btns { display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; min-height: 34px; }
        #stkCtlGroup .dropdown-menu { min-width: 270px; padding: 6px; border-radius: 12px; }
        #stkCtlGroup .stk-mi { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; white-space: normal; }
        #stkCtlGroup .stk-mi > i { margin-top: 3px; color: #b0b5ba; }
        #stkCtlGroup .stk-mi small { display: block; color: #8a7a6a; font-size: .76rem; line-height: 1.3; }
        #stkCtlGroup .stk-mi.active { background: #FFF1E3; color: #5a3000; }
        #stkCtlGroup .stk-mi.active > i { color: var(--lb-or, #e7770e); }
        #stkCtlGroup .stk-mi:disabled { opacity: .5; }
        #stkModeBtn.on { background: var(--lb-or, #212529); border-color: var(--lb-or, #212529); color: #fff; }
        #stkEyeBtn.active { background: #212529; color: #fff; }
        @media print { .bx-eye { display: none !important; } }
        
        /* ===== Ô bắt buộc (*) ===== */
        .req-mark { color: #dc3545; font-weight: 700; margin-left: 3px; }
        .req-mark[hidden] { display: none; }
        .req-note { font-size: .8rem; color: #6c757d; }
        .req-miss .form-control, .req-miss .form-select, .req-miss .select2-selection,
        .req-miss input.flatpickr-input + input {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .18) !important;
            background-color: #fff8f8;
        }
        .req-msg { color: #dc3545; font-size: .8rem; margin-top: 3px; }

        /* =====================================================================
           Ô NHẬP GỌN – ĐỒNG ĐỀU (web + điện thoại)
           Một chiều cao, một cỡ chữ, một độ bo góc cho mọi ô: ô chữ, ô chọn, ô chọn công ty (select2), ô ngày / tháng.
           ===================================================================== */
        :root { --lb-h: 34px; --lb-r: 8px; --lb-bd: #ced4da; --lb-fs: .875rem; }
        @media (max-width: 767.98px) { :root { --lb-h: 38px; --lb-fs: .9rem; } }

        #appScreen .form-control:not(.form-control-sm):not(textarea):not([type="file"]):not([type="range"]):not([type="color"]),
        #appScreen .form-select:not(.form-select-sm),
        .modal .form-control:not(.form-control-sm):not(textarea):not([type="file"]):not([type="range"]):not([type="color"]),
        .modal .form-select:not(.form-select-sm) {
            height: var(--lb-h); min-height: 0; padding-top: 0; padding-bottom: 0; padding-left: .65rem;
            font-size: var(--lb-fs); border-radius: var(--lb-r); border-color: var(--lb-bd);
        }
        #appScreen .form-control-sm, #appScreen .form-select-sm, .modal .form-control-sm, .modal .form-select-sm {
            border-radius: 7px; border-color: var(--lb-bd);
        }
        #appScreen .form-control:focus, #appScreen .form-select:focus, .modal .form-control:focus, .modal .form-select:focus {
            border-color: #86b7fe; box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .14);
        }
        #appScreen textarea.form-control, .modal textarea.form-control { border-radius: var(--lb-r); font-size: var(--lb-fs); }
        #appScreen input[type="file"].form-control, .modal input[type="file"].form-control { font-size: var(--lb-fs); border-radius: var(--lb-r); padding: .3rem .65rem; }
        #appScreen .form-label, .modal .form-label { font-size: .8rem; font-weight: 600; color: #495057; margin-bottom: .2rem; line-height: 1.25; }
        #appScreen .form-label.small, .modal .form-label.small { font-size: .78rem; }
        #appScreen .form-text { font-size: .76rem; margin-top: .2rem; }
        #appScreen input::placeholder, .modal input::placeholder { color: #8a949e; opacity: 1; }
        .lb-datefield { background-image: none; }

        /* Ô chọn công ty (select2) cùng cỡ với các ô khác */
        .select2-container--default .select2-selection--single {
            height: var(--lb-h) !important; padding: 0 .65rem; border-radius: var(--lb-r); border-color: var(--lb-bd);
            display: flex; align-items: center;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.2; padding: 0 20px 0 0; font-size: var(--lb-fs); color: #212529; flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #8a949e; }
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0; right: 6px; }
        .select2-container--default .select2-selection--single .select2-selection__clear { margin: 0 4px 0 0; line-height: 1; height: auto; color: #8a949e; }
        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--single { border-color: #86b7fe; box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .14); }
        .select2-dropdown { border-color: var(--lb-bd); border-radius: var(--lb-r); font-size: var(--lb-fs); overflow: hidden; }
        .select2-search--dropdown .select2-search__field { border-radius: 6px; font-size: var(--lb-fs); }
        .select2-results__option { padding: 6px 10px; }

        /* ===== Bộ lọc dữ liệu: 1 thẻ gọn, lưới đều ===== */
        .lb-filter { padding: 12px 14px !important; margin: 14px 0 !important; border-radius: 12px; }
        .lb-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
        .lb-filter-head h6 { margin: 0; font-size: .95rem; font-weight: 600; }
        .lb-filter-head #statsDisplay { float: none !important; font-size: .8rem; text-align: right; }
        .lb-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .lb-fgrid > * { min-width: 0; }
        .lb-fgrid .m2 { grid-column: span 2; }
        .lb-fgrid .form-control, .lb-fgrid .form-select {
            height: var(--lb-h); min-height: 0; padding-top: 0; padding-bottom: 0; padding-left: .65rem; font-size: var(--lb-fs); border-radius: var(--lb-r);
        }
        .lb-fgrid .select2-container { width: 100% !important; }
        .lb-fgrid input, .lb-fgrid select { width: 100%; }
        @media (min-width: 768px) {
            .lb-fgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
            .lb-fgrid .m2, .lb-fgrid > div { grid-column: span 3; }
            .lb-fgrid > .t6 { grid-column: span 6; }
        }
        @media (min-width: 1200px) {
            .lb-fgrid .m2, .lb-fgrid > div { grid-column: span 2; }
            .lb-fgrid > .d4 { grid-column: span 4; }
        }
        .lb-factions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e3e7ec; }
        .lb-act-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .lb-act-main .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: var(--lb-h); padding: 0 14px; font-size: var(--lb-fs); border-radius: var(--lb-r); white-space: nowrap; }
        .lb-act-main .btn-orange { min-width: 108px; font-weight: 600; }
        .lb-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 4px; padding: 0; min-height: 0; font-size: .8rem; color: #5b6770; cursor: pointer; }
        .lb-switch .form-check-input { margin: 0; float: none; cursor: pointer; }
        .lb-seg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
        .lb-seg-t { font-size: .8rem; font-weight: 600; color: #5b6770; white-space: nowrap; }
        .lb-seg-g { display: inline-flex; border: 1px solid var(--lb-bd); border-radius: var(--lb-r); overflow: hidden; background: #fff; }
        .lb-seg-o { position: relative; margin: 0; cursor: pointer; }
        .lb-seg-o input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
        .lb-seg-o span { display: block; padding: 0 12px; line-height: calc(var(--lb-h) - 2px); font-size: .82rem; color: #495057; white-space: nowrap; transition: background .15s, color .15s; }
        .lb-seg-o + .lb-seg-o span { border-left: 1px solid var(--lb-bd); }
        .lb-seg-o input:checked + span { background: #0d6efd; color: #fff; font-weight: 600; }
        .lb-seg-o input:focus-visible + span { outline: 2px solid #86b7fe; outline-offset: -2px; }
        @media (max-width: 767.98px) {
            .lb-filter { padding: 10px 10px !important; margin: 10px 0 !important; }
            .lb-factions { display: grid; grid-template-columns: 1fr; gap: 10px; }
            .lb-act-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
            .lb-act-main .btn { padding: 0 8px; }
            .lb-act-main .lb-switch { grid-column: span 2; margin: 2px 0 0; }
            .lb-seg { display: grid; grid-template-columns: 1fr; gap: 4px; }
            .lb-seg-g { display: grid; grid-template-columns: 1fr 1fr; }
            .lb-seg-o span { text-align: center; padding: 0 6px; }
            .lb-filter-head #statsDisplay { text-align: left; width: 100%; }
        }


        /* =====================================================================
           KHOÁ BỐ CỤC THEO MÀN HÌNH – vừa khít mọi cỡ, KHÔNG BAO GIỜ cuộn / xê dịch ngang cả trang
           (bảng rộng chỉ cuộn bên trong khung của nó)
           ===================================================================== */
        html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; }
        body { max-width: 100%; overflow-x: clip; overflow-wrap: break-word; }
        #appScreen { max-width: 100%; box-sizing: border-box; }
        #appScreen img, #appScreen canvas, #appScreen video, #appScreen svg:not(.keep-size) { max-width: 100%; }
        #appScreen .card, #appScreen .card-body, #appScreen .modal-content, #appScreen form, #appScreen .row > *, #appScreen .d-flex > .flex-fill { min-width: 0; }
        #appScreen pre, #appScreen code { white-space: pre-wrap; overflow-wrap: anywhere; }
        #appScreen a { overflow-wrap: anywhere; }
        .table-responsive, .chart-responsive-wrapper, .an-table-wrap, .adv-scroll { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
        .modal-dialog { max-width: calc(100vw - 1rem); }
        @media (min-width: 576px) { .modal-dialog { max-width: var(--bs-modal-width, 500px); } }

        /* Thanh tiêu đề */
        .lb-hdr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; }
        .lb-hdr-title { margin: 0; font-size: 1.45rem; font-weight: 600; line-height: 1.2; min-width: 0; color: #fff; }
        .lb-hdr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; max-width: 100%; }
        .lb-hdr-user { font-size: .85rem; font-weight: 700; min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .lb-hdr-btns { display: flex; align-items: center; gap: 6px; }
        .lb-hdr-btns .btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 38px; padding: 0 10px; font-size: .85rem; line-height: 1; border-radius: 8px; white-space: nowrap; }
        @media (max-width: 575.98px) {
            .lb-hdr { padding: 10px 12px; gap: 6px; }
            .lb-hdr-title { font-size: 1.3rem; flex: 1 1 100%; }
            .lb-hdr-tools { flex: 1 1 100%; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
            .lb-hdr-user { flex: 1 1 auto; max-width: none; }
            .lb-hello { display: none; }          /* điện thoại: chỉ hiện tên, đủ chỗ cho các nút */
            .lb-hdr-btns { flex: 0 0 auto; }
            .lb-hdr-btns .btn { height: 36px; min-width: 40px; padding: 0 8px; }
            .lb-hdr-btns .lb-hdr-out { padding: 0 12px; }
        }
        .lb-by { margin-top: 2px; line-height: 1.25; font-size: .74rem; }
        .lb-by i { font-size: .7rem; }

        /* ===== Tài khoản / đổi mật khẩu / nhật ký ===== */
        .lb-acct-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px 112px 108px 92px; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #e9ecef; border-radius: 10px; margin-bottom: 6px; background: #fff; }
        .lb-acct-row .badge { justify-self: start; }
        .lb-acct-row.locked { background: #fff5f5; border-color: #f5c2c7; }
        .lb-acct-who { min-width: 0; }
        .lb-acct-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .lb-acct-who small { color: #6c757d; word-break: break-all; }
        .lb-acct-row .form-select { width: 100%; min-width: 0; }
        .lb-acct-row .btn { height: 32px; width: 100%; padding: 0 8px; font-size: .8rem; border-radius: 8px; white-space: nowrap; }
        .lb-acct-add { display: grid; grid-template-columns: 1fr 1.3fr 120px auto; gap: 8px; align-items: end; }
        .lb-temp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .lb-temp code { font-size: 1.15rem; letter-spacing: .06em; background: #fff; padding: 2px 10px; border-radius: 6px; border: 1px dashed #198754; user-select: all; color: #14532d; }
        .lb-audit-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
        .lb-audit-table td { font-size: .82rem; vertical-align: top; }
        .lb-audit-table td.lb-ad-detail { min-width: 240px; white-space: normal; word-break: break-word; }
        @media (max-width: 991.98px) { .lb-audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 767.98px) {
            .lb-acct-row { grid-template-columns: 1fr 1fr; }
            .lb-acct-who { grid-column: 1 / -1; }
            .lb-acct-row .btn { height: 36px; }
            .lb-acct-add { grid-template-columns: 1fr 1fr; }
            .lb-acct-add .lb-acct-btn { grid-column: span 2; }
        }

        /* ===== Bấm huy hiệu "Đợt x/y" → xem mọi đợt của người đó ===== */
        .lb-stints { cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; border-radius: 999px; transition: box-shadow .15s; }
        .lb-stints:hover, .lb-stints:focus-visible { box-shadow: 0 0 0 3px rgba(13, 110, 253, .22); outline: none; }
        .lb-stints .lb-st-count { color: #0d6efd !important; border-color: #9ec5fe !important; background: #eef5ff !important; }
        .lb-stints .lb-st-count i { font-size: .6rem; margin-left: 2px; }
        .lb-personbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: #e8f1ff; border: 1px solid #b6d4fe; color: #084298; border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; font-size: .88rem; }
        .lb-personbar[hidden] { display: none; }
        .lb-personbar .btn { margin-left: auto; height: 30px; padding: 0 12px; font-size: .82rem; border-radius: 8px; white-space: nowrap; }
        @media (max-width: 575.98px) { .lb-personbar .btn { margin-left: 0; width: 100%; } }

        /* ===== Thẻ Phí: dòng "Tính công" + nút chọn nhanh ===== */
        .lb-feerange { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 6px; }
        .lb-feerange-t { font-size: .8rem; font-weight: 600; color: #5b6770; white-space: nowrap; }
        .lb-feerange-a { color: #8a949e; font-size: .9rem; }
        .lb-feerange .form-control { width: 100%; min-width: 0; height: var(--lb-h); min-height: 0; padding: 0 .4rem; text-align: center; font-size: var(--lb-fs); border-radius: var(--lb-r); }
        .lb-feequick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--lb-bd); border-radius: var(--lb-r); overflow: hidden; background: #fff; margin-bottom: 8px; }
        .lb-feequick button { border: 0; background: #fff; height: 30px; padding: 0 4px; font-size: .78rem; color: #495057; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s; }
        .lb-feequick button + button { border-left: 1px solid var(--lb-bd); }
        .lb-feequick button:hover:not(.on) { background: #f1f5f9; }
        .lb-feequick button.on { background: #0d6efd; color: #fff; font-weight: 600; }
        @media (max-width: 359px) {
            .lb-feerange .form-control { font-size: .8rem; padding: 0 2px; }
            .lb-feequick button { font-size: .74rem; }
        }
        @media (max-width: 299px) {
            .lb-feerange { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
            .lb-feerange-t { grid-column: 1 / -1; }
        }

        /* ===== Form nhập lao động: gọn, đều, không dòng lẻ ===== */
        #formSection .card-body { padding: 14px 16px; }
        #labourForm { --bs-gutter-y: .55rem; }
        #personHintWrap:has(#personHint:empty) { display: none; }
        #labourForm input.form-control[type="text"] { padding-right: 30px; }
        #labourForm .bank-box { padding: 8px 10px 2px; }
        #labourForm .bank-box-title { margin-bottom: 4px; font-size: .85rem; }
        #labourForm #bankHint { margin: 2px 0 6px; }
        /* Khối tài khoản ngân hàng: nhãn 1 dòng, các ô luôn thẳng hàng, không bị cắt chữ */
        #labourForm .bank-box { padding: 10px 12px 6px; }
        #labourForm .bank-box .row > [class*="col"] { display: flex; flex-direction: column; justify-content: flex-end; }
        #labourForm .bank-box .form-label { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; min-height: 1.6rem; margin-bottom: 4px !important; font-weight: 600; }
        #labourForm .bank-box .form-control { min-width: 0; }
        #labourForm .bank-box #bankHint { color: #6b645b; font-size: .8rem; line-height: 1.35; margin: 8px 2px 4px; }
        @media (max-width: 575.98px) {
            /* Điện thoại: Tên ngân hàng 1 hàng đầy đủ; Mã NH + Số tài khoản chia 2 cột đều nhau, cùng độ cao */
            #labourForm .bank-box { padding: 12px 12px 8px; }
            #labourForm .bank-box .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 4px 10px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
            #labourForm .bank-box .row > [class*="col"] { width: auto; max-width: none; flex: none; margin: 0; padding: 0; }
            #labourForm .bank-box .row > :first-child { grid-column: 1 / -1; }
            #labourForm .bank-box .dq-need > .form-label::after { content: 'Thiếu'; }
            #labourForm .bank-box .dq-need--chk > .form-label::after { content: 'Kiểm tra'; }
            #labourForm .bank-box #manh, #labourForm .bank-box #stk { font-size: .92rem; letter-spacing: 0; }   /* 2 ô cùng cỡ chữ → cùng độ cao */
        }
        #labourForm .btn { height: var(--lb-h); padding: 0 18px; font-size: var(--lb-fs); border-radius: var(--lb-r); }
        @media (max-width: 767.98px) {
            #formSection .card-body { padding: 10px; }
            #labourForm .col-12.text-end { display: flex; gap: 8px; }
            #labourForm .col-12.text-end .btn { flex: 1; }
        }
        @media (max-width: 576px) {
            #appScreen > .container { padding-left: 8px; padding-right: 8px; margin-top: 12px !important; margin-bottom: 16px !important; }
        }

        /* ===================== GIAO DIỆN TAB ===================== */
        html { scroll-padding-top: 66px; }
        .lb-tabs {
            position: sticky; top: 0; z-index: 1020;
            display: flex; gap: 6px; align-items: stretch;
            margin: 10px 0 14px; padding: 6px;
            background: #fff; border-radius: 14px;
            box-shadow: 0 2px 10px rgba(0,0,0,.10);
            overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        }
        .lb-tabs::-webkit-scrollbar { display: none; }
        .lb-tab {
            flex: 1 1 0; min-width: 78px;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 9px 10px; border: 0; border-radius: 10px;
            background: transparent; color: #555; font-weight: 600; font-size: .95rem;
            white-space: nowrap; position: relative; cursor: pointer;
            transition: background .15s, color .15s;
        }
        .lb-tab i { font-size: 1.1rem; }
        .lb-tab:hover { background: #fff3e6; color: #e7770e; }
        .lb-tab.active { background: #ff8800; color: #fff; box-shadow: 0 2px 8px rgba(255,136,0,.35); }
        .lb-tab-aux { flex: 0 0 auto; background: #f4f5f7; }
        .lb-tab-badge {
            font-size: .68rem; line-height: 1; padding: 3px 6px; border-radius: 10px;
            background: #dc3545; color: #fff; font-weight: 700;
        }
        .lb-tab.active .lb-tab-badge { background: #fff; color: #e7770e; }
        .lb-tabpane[hidden] { display: none !important; }
        .lb-tabpane { animation: lbTabIn .18s ease-out; }
        @keyframes lbTabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
        .lb-tabpane > .card:first-child { margin-top: 0 !important; }
        @media (max-width: 576px) {
            .lb-tabs { margin: 8px -4px 12px; gap: 4px; padding: 5px; }
            .lb-tab { flex-direction: column; gap: 2px; padding: 7px 4px; font-size: .74rem; min-width: 0; }
            .lb-tab i { font-size: 1.25rem; }
            .lb-tab-aux { min-width: 62px; }
            .lb-tab-badge { position: absolute; top: 3px; right: 6px; }
        }
        @media print { .lb-tabs { display: none !important; } }

        /* ===== Nút công cụ ngoài "Chấm công" + khung mô tả (hover / chạm) ===== */
        .lb-tab-tool { text-decoration: none; }
        .lb-tab-tool .lb-tool-ext { display: none; font-size: .78rem !important; margin-left: auto; opacity: .55; }
        #lbToolTip {
            position: fixed; z-index: 1100; left: 0; top: 0; width: max-content; max-width: min(280px, calc(100vw - 16px));
            padding: 11px 13px; border-radius: 12px; background: #1F1B16; color: #fff;
            box-shadow: 0 10px 28px rgba(31,27,22,.28); font-size: .8rem; line-height: 1.45;
            pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease;
        }
        #lbToolTip.on { opacity: 1; transform: none; }
        #lbToolTip[hidden] { display: none; }
        #lbToolTip b { display: block; font-size: .86rem; margin-bottom: 3px; }
        #lbToolTip span { display: block; color: #E9E2D9; }
        #lbToolTip em { display: none; font-style: normal; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.18); color: #FFC48A; font-weight: 600; }
        @media (hover: none) { #lbToolTip em { display: block; } }
        @media (min-width: 992px) {
            .lb-tab-tool { margin-top: 12px; }
            .lb-tab-tool::before { content: ''; position: absolute; left: 14px; right: 14px; top: -7px; height: 1px; background: var(--lb-line); }
            .lb-tab-tool .lb-tool-ext { display: inline-block; }
        }
        @media print { #lbToolTip { display: none !important; } }

        /* ===================== DANH MỤC ===================== */
        .dm-modal { height: min(720px, 90vh); border: 0; border-radius: 16px; overflow: hidden; }
        .dm-head { background: linear-gradient(135deg, #ff8800, #e7770e); color: #fff; border: 0; padding: 14px 18px; }
        .dm-head .modal-title { font-weight: 700; font-size: 1.1rem; }
        .dm-sub { font-size: .78rem; opacity: .9; margin-top: 2px; }
        .dm-body { display: flex; gap: 0; padding: 0; overflow: hidden; background: #f6f7f9; }
        .dm-side { flex: 0 0 210px; padding: 12px; display: flex; flex-direction: column; gap: 4px; background: #fff; border-right: 1px solid #e9ecef; overflow-y: auto; }
        .dm-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: #495057; font-weight: 600; text-align: left; transition: background .12s, color .12s; }
        .dm-cat i { font-size: 1.1rem; color: #868e96; }
        .dm-cat span { flex: 1; }
        .dm-cat b { font-size: .72rem; min-width: 24px; text-align: center; padding: 2px 7px; border-radius: 10px; background: #eceff1; color: #495057; }
        .dm-cat:hover { background: #fff3e6; }
        .dm-cat.active { background: #ff8800; color: #fff; box-shadow: 0 2px 8px rgba(255,136,0,.3); }
        .dm-cat.active i { color: #fff; }
        .dm-cat.active b { background: rgba(255,255,255,.25); color: #fff; }
        .dm-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px; gap: 10px; }
        .dm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
        .dm-title { display: flex; align-items: baseline; gap: 8px; }
        .dm-title h6 { font-weight: 700; font-size: 1.05rem; }
        .dm-count { font-size: .78rem; color: #868e96; }
        .dm-tools { display: flex; gap: 8px; align-items: center; }
        .dm-search { position: relative; }
        .dm-search i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: #adb5bd; font-size: .8rem; pointer-events: none; }
        .dm-search input { padding-left: 28px; min-width: 190px; }
        .dm-add { display: flex; gap: 8px; }
        .dm-add .form-control { border-radius: 10px; }
        .dm-add .btn { border-radius: 10px; font-weight: 600; }
        .dm-note { font-size: .8rem; color: #856404; background: #fff8e1; border-radius: 8px; padding: 6px 10px; }
        .dm-list { flex: 1; min-height: 0; overflow-y: auto; background: #fff; border: 1px solid #e9ecef; border-radius: 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
        .dm-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f1f3f5; transition: background .15s; }
        .dm-item:last-child { border-bottom: 0; }
        .dm-item:hover { background: #fafbfc; }
        .dm-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 500; }
        .dm-name span { overflow: hidden; text-overflow: ellipsis; }
        .dm-name mark { background: #ffe8a3; padding: 0 1px; border-radius: 2px; }
        .dm-sys { font-style: normal; font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: #e7f1ff; color: #0a58ca; white-space: nowrap; }
        .dm-use { font-size: .74rem; padding: 2px 9px; border-radius: 10px; background: #e6f4ea; color: #1e7e34; white-space: nowrap; }
        .dm-use.zero { background: #f1f3f5; color: #868e96; }
        .dm-act { display: flex; gap: 4px; }
        .dm-act .btn { width: 32px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
        .dm-item.editing { background: #fff8e1; }
        .dm-item.editing .form-control { flex: 1; border-radius: 8px; }
        .dm-item.editing .btn, .dm-item.deleting .btn { border-radius: 8px; white-space: nowrap; }
        .dm-item.deleting { background: #fff1f0; }
        .dm-del-msg { flex: 1; min-width: 0; }
        .dm-del-msg small { display: block; color: #6c757d; margin-top: 2px; }
        .dm-item.flash { animation: dmFlash 1.6s ease-out; }
        @keyframes dmFlash { 0%, 30% { background: #d3f9d8; } 100% { background: transparent; } }
        .dm-skel span { flex: 1; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eceff1 25%, #f6f7f9 50%, #eceff1 75%); background-size: 200% 100%; animation: dmShimmer 1.1s infinite; }
        .dm-skel i { width: 70px; height: 14px; border-radius: 8px; background: #eceff1; }
        @keyframes dmShimmer { to { background-position: -200% 0; } }
        .dm-empty { padding: 40px 16px; text-align: center; color: #868e96; }
        .dm-empty i { font-size: 2rem; display: block; margin-bottom: 6px; color: #ced4da; }
        @media (max-width: 767.98px) {
            .dm-modal { height: 100%; border-radius: 0; }
            .dm-body { flex-direction: column; }
            .dm-side { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 6px; border-right: 0; border-bottom: 1px solid #e9ecef; scrollbar-width: none; }
            .dm-side::-webkit-scrollbar { display: none; }
            .dm-cat { width: auto; flex: 0 0 auto; padding: 8px 12px; white-space: nowrap; }
            .dm-cat i { display: none; }
            .dm-main { padding: 10px; }
            .dm-search input { min-width: 0; width: 100%; }
            .dm-tools { width: 100%; }
            .dm-search { flex: 1; }
            .dm-add .form-control, .dm-item.editing .form-control { font-size: 16px; }   /* tránh iOS tự phóng to */
        }
        @media (prefers-reduced-motion: reduce) { .dm-item.flash, .dm-skel span, .lb-tabpane { animation: none; } }

        /* ===================== KỲ BÁO CÁO (Phân tích) ===================== */
        .an-period { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
        .an-period-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
        .an-period-t { font-weight: 600; font-size: .85rem; white-space: nowrap; }
        .an-period-row .form-select { width: auto; min-width: 0; max-width: 100%; flex: 0 1 200px; }
        .an-export { margin-left: auto; white-space: nowrap; }
        .an-custom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; width: 100%; max-width: 440px; }
        .an-arrow { color: #8a949e; }
        .an-custom .form-control {
            display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
            height: 32px; min-height: 32px; padding: 0 .4rem; line-height: 30px; text-align: center;
            -webkit-appearance: none; appearance: none;
        }
        .an-period-line { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
        .an-period-info { font-size: .8rem; color: #6c757d; }

        /* ===================== ĐỒNG BỘ iPHONE / ANDROID / MỌI CỠ MÀN ===================== */
        /* ô ngày/tháng: không bao giờ tràn khung (iOS Safari có kích thước gốc rất rộng) */
        input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
        input[type="date"]::-webkit-date-and-time-value, input[type="month"]::-webkit-date-and-time-value { min-height: 1.2em; text-align: inherit; margin: 0; }
        .lb-feerange .form-control { -webkit-appearance: none; appearance: none; min-height: var(--lb-h, 32px); }
        button, .btn, .lb-tab, select, label, summary, [role="button"] { touch-action: manipulation; }
        body { -webkit-tap-highlight-color: rgba(255, 136, 0, .15); }
        html { scroll-padding-top: calc(66px + env(safe-area-inset-top, 0px)); }
        .lb-tabs { top: env(safe-area-inset-top, 0px); }
        /* tai thỏ / thanh điều hướng iPhone: chừa lề an toàn */
        #appScreen > .container { padding-left: max(.75rem, env(safe-area-inset-left, 0px)); padding-right: max(.75rem, env(safe-area-inset-right, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
        .position-fixed.bottom-0.end-0 { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
        @supports (height: 1dvh) {
            .dm-modal { height: min(720px, 90dvh); }
            @media (max-width: 767.98px) { .dm-modal { height: 100dvh; } }
        }
        @media (max-width: 767.98px) { .dm-main { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
        /* iPhone: chữ ô nhập < 16px sẽ làm Safari tự phóng to khi chạm vào → ép 16px (Android giữ nguyên) */
        @supports (-webkit-touch-callout: none) {
            .form-control, .form-select, textarea, input.flatpickr-input + input, .select2-search__field { font-size: 16px !important; }
            .lb-feerange .form-control, .an-custom .form-control { font-size: 16px !important; padding: 0 2px; }
        }
        @media (max-width: 575.98px) {
            #appScreen > .container { margin-top: .5rem !important; margin-bottom: 1rem !important; }
            /* Phân tích */
            .an-period-row { display: grid; grid-template-columns: auto minmax(0, 1fr); }
            .an-period-row .form-select { flex: none; width: 100%; }
            .an-export { grid-column: 1 / -1; margin-left: 0; width: 100%; }
            .an-custom { max-width: none; }
            .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
            .an-kpi { padding: 8px 10px; }
            .an-kpi-value { font-size: 1.2rem; }
            .an-kpi-label, .an-kpi-sub { overflow-wrap: anywhere; }
            #summaryCard { padding: 6px !important; margin-top: 0 !important; margin-bottom: 8px !important; }
            #summaryCardInner { padding: 10px !important; margin: 0 !important; }
            #monthChartCard { margin-bottom: 12px !important; }
        }
        @media (max-width: 380px) {
            .lb-tab span { font-size: .66rem; }
            .lb-tab-aux span { display: none; }
            .lb-tab-aux { min-width: 44px; }
            .an-kpis { grid-template-columns: minmax(0, 1fr); }     /* màn hình siêu nhỏ (≤380px): 1 cột cho dễ đọc */
        }
        .phone-cell { font-variant-numeric: tabular-nums; letter-spacing: .2px; }

        /* ===================== NÚT SAO CHÉP SĐT ===================== */
        .lb-copy-phone { display: none !important; }
        .phone-cell:not(.hidden-phone) ~ .lb-copy-phone { display: inline-flex !important; align-items: center; }
        .lb-copy-phone, .lb-copy-phone-adv, [data-copy-phone] { min-width: 24px; min-height: 24px; justify-content: center; text-decoration: none; }
        [data-copy-phone] i { font-size: 1rem; }
        /* màn hình cảm ứng: bỏ viền cam "kẹt" do :hover dính sau khi chạm */
        @media (hover: none) {
            .focus-highlight:hover { border-color: transparent; box-shadow: none; }
            #formSection:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .10); border-color: #ff8800; }
        }
        /* thẻ thống kê: 2 cột đến tận 340px, chỉ màn siêu nhỏ mới 1 cột */
        @media (max-width: 380px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 339.98px) { .an-kpis { grid-template-columns: minmax(0, 1fr); } }
        /* ô ngày ở kỳ báo cáo (đã đổi sang bộ chọn ngày riêng): luôn vừa khung */
        .an-custom > input, .an-custom > .lb-datefield { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
        .an-period-row .form-select { text-overflow: ellipsis; }

        /* ===================== THÔNG BÁO NHẸ ===================== */
        #liveToast { display: none !important; }
        #lbToasts {
            position: fixed; z-index: 20050; pointer-events: none;
            top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
            width: min(420px, calc(100vw - 20px)); display: flex; flex-direction: column; gap: 8px;
        }
        @media (min-width: 768px) { #lbToasts { left: auto; right: 16px; transform: none; top: 16px; } }
        .lb-toast {
            pointer-events: auto; position: relative; overflow: hidden;
            display: flex; align-items: flex-start; gap: 10px;
            background: #fff; color: #212529; border-radius: 12px; border-left: 4px solid #2e9d5b;
            padding: 10px 12px; font-size: .9rem; line-height: 1.35;
            box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
            opacity: 0; transform: translateY(-8px);
            transition: opacity .16s ease, transform .16s ease;
        }
        .lb-toast.in { opacity: 1; transform: none; }
        .lb-toast.out { opacity: 0; transform: translateY(-6px); }
        .lb-toast > i.bi { flex: 0 0 auto; font-size: 1.15rem; line-height: 1.2; color: #2e9d5b; }
        .lb-toast--err { border-left-color: #d64545; }  .lb-toast--err > i.bi { color: #d64545; }
        .lb-toast--warn { border-left-color: #e8a317; } .lb-toast--warn > i.bi { color: #e8a317; }
        .lb-toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-top: 1px; }
        .lb-toast-x { border: 0; background: none; color: #868e96; font-size: 1.2rem; line-height: 1; padding: 0 2px; cursor: pointer; }
        .lb-toast-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #2e9d5b; opacity: .35; transform-origin: left; animation: lbToastBar var(--d, 2600ms) linear forwards; }
        .lb-toast--err .lb-toast-bar { background: #d64545; } .lb-toast--warn .lb-toast-bar { background: #e8a317; }
        @keyframes lbToastBar { to { transform: scaleX(0); } }
        @media (prefers-reduced-motion: reduce) { .lb-toast { transition: none; } .lb-toast-bar { animation: none; } }

        /* ===================== TAB DANH MỤC (thay cho popup) ===================== */
        #tab-dm.dm-modal {
            height: clamp(480px, calc(100vh - 190px), 780px);
            border: 1px solid #e9ecef; border-radius: 16px; overflow: hidden; background: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .08); display: flex; flex-direction: column;
        }
        @supports (height: 1dvh) { #tab-dm.dm-modal { height: clamp(480px, calc(100dvh - 190px), 780px); } }
        #tab-dm .dm-head { flex: 0 0 auto; }
        #tab-dm .dm-body { flex: 1 1 auto; min-height: 0; }
        @media (max-width: 767.98px) {
            #tab-dm.dm-modal { height: calc(100dvh - 170px); min-height: 460px; border-radius: 12px; }
            #tab-dm .dm-head { padding: 10px 14px; }
        }
        .dm-edit-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 6px; }
        .dm-item.editing .dm-edit-fields .form-control { border-radius: 8px; min-width: 0; }
        .dm-item.deleting { flex-wrap: wrap; }
        .dm-item.deleting .dm-del-msg { flex: 1 1 100%; }
        .dm-item.deleting .dm-pass { flex: 1 1 140px; min-width: 0; border-radius: 8px; }
        @media (max-width: 575.98px) { .dm-edit-fields { grid-template-columns: minmax(0, 1fr); } .dm-item.editing { align-items: flex-start; } }
        @supports (-webkit-touch-callout: none) { #dmPass, #dmEditInput, #dmSearch, #dmAddInput { font-size: 16px !important; } }

        /* ===================== Ô NHẬP SĐT (form nhập liệu) ===================== */
        .sdt-group { flex-wrap: nowrap; }
        .sdt-group .form-control { min-width: 0; font-size: 1.05rem; letter-spacing: .4px; font-variant-numeric: tabular-nums; }
        .sdt-group .btn { flex: 0 0 auto; min-width: 46px; display: inline-flex; align-items: center; justify-content: center; }
        .sdt-group .btn i { font-size: 1.1rem; }

        /* =====================================================================
           HIỆU ỨNG – gọn, nhanh, thống nhất (chỉ dùng opacity / transform, ≤ .16s)
           ===================================================================== */
        :root { --lb-ease: cubic-bezier(.2, .8, .2, 1); --lb-fast: .12s; --lb-med: .16s; }
        html { scroll-behavior: auto !important; }

        /* Bỏ trang trí thừa */
        .focus-highlight, #formSection { transition: none !important; }
        .focus-highlight:hover, .focus-highlight:focus-within { border-color: transparent; box-shadow: none; }
        #formSection:hover, #formSection:focus-within { border-color: #ff8800; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); }
        .shine-glow { animation: none !important; }
        .lb-saving { animation: none !important; }
        .dm-skel span { animation: none !important; background: #eceff1; }
        .dm-item.flash { animation-duration: .9s; }
        .dq-flash { animation-duration: .6s; }
        .flatpickr-calendar, .flatpickr-calendar.animate.open { animation: none !important; transition: none !important; }

        /* Chuyển tab: mờ dần rất nhanh (không dịch chuyển → không giật layout) */
        .lb-tabpane { animation: lbFade var(--lb-med) ease-out; }
        @keyframes lbFade { from { opacity: 0; } }

        /* Hộp thoại: hiện nhanh, nhẹ (thay cho trượt từ trên xuống 0.3s của Bootstrap) */
        .modal.fade .modal-dialog { opacity: 0; transform: translateY(8px) scale(.985); transition: transform var(--lb-med) var(--lb-ease), opacity var(--lb-med) ease; }
        .modal.show .modal-dialog { opacity: 1; transform: none; }
        .modal.modal-static .modal-dialog { transform: none; }
        .modal-backdrop.fade { transition: opacity var(--lb-fast) linear; }
        .fade { transition: opacity var(--lb-fast) linear; }
        .collapsing { transition-duration: .15s !important; }

        /* Nút: phản hồi chạm gọn, đồng bộ mọi nút */
        .btn { transition: background-color var(--lb-fast), border-color var(--lb-fast), color var(--lb-fast), box-shadow var(--lb-fast), opacity var(--lb-fast), transform .08s; }
        .btn:active:not(:disabled):not(.disabled) { transform: scale(.97); }
        .lb-tab { transition: background-color var(--lb-fast), color var(--lb-fast), box-shadow var(--lb-fast), transform .08s; }
        .lb-tab:active { transform: scale(.97); }

        @media (prefers-reduced-motion: reduce) {
            .lb-tabpane, .modal.fade .modal-dialog, .btn, .lb-tab { animation: none !important; transition: none !important; transform: none !important; }
        }

        /* ===================== GIỌNG NÓI (gọn, ngay trong ô) ===================== */
        .voice-listening::placeholder { color: #dc3545 !important; opacity: 1; font-weight: 600; }
        .voice-interim { color: #6c757d !important; font-style: italic; }
        .btn-voice.active { color: #dc3545; }

        /* ===================== HOÀN THIỆN GIAO DIỆN ===================== */
        /* Vòng tiêu điểm thống nhất theo màu thương hiệu (bàn phím + ô nhập) */
        :focus-visible { outline: 2px solid #ff8800; outline-offset: 2px; }
        .form-control:focus, .form-select:focus, .form-check-input:focus {
            border-color: #ff9a2e; box-shadow: 0 0 0 .2rem rgba(255, 136, 0, .18); outline: 0;
        }
        .btn:focus-visible, .lb-tab:focus-visible { outline: 2px solid #ff8800; outline-offset: 2px; box-shadow: none; }
        .lb-tab:focus:not(:focus-visible) { outline: 0; }
        /* Thanh cuộn mảnh, kín đáo cho các khung cuộn riêng */
        .dm-list, .sbox, .an-table-wrap, .an-list, .table-responsive, .dm-side, .adv-scroll, #ldCardScroll {
            scrollbar-width: thin; scrollbar-color: #ccd2d8 transparent;
        }
        .dm-list::-webkit-scrollbar, .sbox::-webkit-scrollbar, .an-table-wrap::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
        .dm-list::-webkit-scrollbar-thumb, .sbox::-webkit-scrollbar-thumb, .an-table-wrap::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb { background: #ccd2d8; border-radius: 8px; }
        /* Trạng thái trống */
        .lb-empty { padding: 36px 16px; text-align: center; color: #6c757d; }
        .lb-empty > i { display: block; font-size: 2.2rem; color: #ced4da; margin-bottom: 6px; }
        .lb-empty-t { font-weight: 700; color: #495057; margin-bottom: 2px; }
        .lb-empty-s { font-size: .85rem; margin-bottom: 12px; }
        .lb-empty-row td { border: 0 !important; background: transparent !important; }
        /* Chữ số căn đều cho các cột số liệu */
        .an-kpi-value, .an-table td, .dm-cat b, .dm-count, .lb-tab-badge { font-variant-numeric: tabular-nums; }

        /* ===================== NÓI LIÊN TỤC ===================== */
        /* Thanh ghi chú + công tắc: 1 dòng, nhỏ, mờ – mọi cỡ màn hình */
        .req-note.vf-bar { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; line-height: 1.2; font-size: .72rem; color: #9aa3ab; }
        .vf-note { white-space: nowrap; }
        .vf-note .req-mark { margin: 0 2px 0 0; }
        .vf-switch { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; font-size: .72rem; color: #8a949e; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none; }
        .vf-switch > i { font-size: .8rem; }
        .vf-switch .form-check-input { float: none; margin: 0; width: 1.9em; height: 1.05em; cursor: pointer; flex: 0 0 auto; }
        .vf-switch .form-check-input:checked { background-color: #ff8800; border-color: #ff8800; }
        .vf-switch:has(.form-check-input:checked) { color: #c26a00; }
        .btn-voice.vf-next, #voiceSDTBtn.vf-next { animation: vfRing 1.1s ease-out infinite; border-radius: 8px; }
        @keyframes vfRing { 0% { box-shadow: 0 0 0 0 rgba(255, 136, 0, .55); } 100% { box-shadow: 0 0 0 10px rgba(255, 136, 0, 0); } }
        @media (prefers-reduced-motion: reduce) { .btn-voice.vf-next, #voiceSDTBtn.vf-next { animation: none; box-shadow: 0 0 0 3px rgba(255, 136, 0, .5); } }

        /* ===================== PHÂN TÍCH: phạm vi riêng, thẻ gọn, bấm để lọc ===================== */
        #summaryStats .card.h-100 { height: auto !important; }
        #summaryStats .card.h-100 .card-body { height: auto; overflow: visible; }
        .an-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; padding: 8px 10px; background: #f7f9fb; border: 1px solid #e9eef3; border-radius: 10px; }
        .an-scope-t { font-weight: 600; font-size: .82rem; color: #5b6770; white-space: nowrap; }
        .an-scope .an-pop { flex: 0 1 300px; min-width: 210px; }
        .an-scope .form-select { flex: 0 1 190px; min-width: 0; width: auto; max-width: 100%; }
        .an-scope-list { font-size: .82rem; color: #5b6770; min-width: 0; overflow-wrap: anywhere; }
        .an-listsw { margin-left: auto; }
        .an-dcard .an-list { max-height: none; overflow: visible; }
        .an-dcard:not(.open) .an-li.an-x { display: none; }
        .an-li.an-drill, tr.an-drill { cursor: pointer; }
        .an-li.an-drill { border-radius: 6px; padding: 3px 4px; margin: 0 -4px; transition: background-color var(--lb-fast, .12s); }
        .an-li.an-drill:hover, .an-li.an-drill:focus-visible { background: #fff3e6; }
        tr.an-drill:hover > td, tr.an-drill:focus-visible > td { background: #fff3e6; }
        .an-morebtn { border: 0; background: none; color: #0d6efd; font-size: .76rem; padding: 6px 0 0; cursor: pointer; }
        .an-morebtn:hover { text-decoration: underline; }
        @media (max-width: 575.98px) {
            .an-scope .an-pop { flex: 1 1 100%; min-width: 0; }
            .an-scope .form-select { flex: 1 1 100%; }
            .an-listsw { margin-left: 0; }
        }

        /* ===================== PHÂN TÍCH: bố cục thống nhất ===================== */
        .an-fee { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; }
        @media (min-width: 768px) { .an-fee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
        .an-fee-col { min-width: 0; }
        .an-dhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 6px; padding: 0 2px; }
        .an-dhead-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
        .an-dnote { font-size: .78rem; color: #6c757d; overflow-wrap: anywhere; }
        .an-dhead .an-listsw { margin-left: auto; }

        /* ===================== NÚT "i" GIẢI THÍCH ===================== */
        .lb-i { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 16px; height: 16px; margin-left: 6px; padding: 0; border: 1px solid #b4bcc4; border-radius: 50%; background: #fff; color: #6c757d; font: italic 700 10px/1 Georgia, 'Times New Roman', serif; cursor: pointer; vertical-align: middle; text-transform: none; letter-spacing: 0; transition: border-color var(--lb-fast, .12s), color var(--lb-fast, .12s), background-color var(--lb-fast, .12s); }
        .lb-i::after { content: ''; position: absolute; inset: -8px; }          /* vùng chạm rộng hơn cho ngón tay */
        .lb-i:hover, .lb-i[aria-expanded="true"] { border-color: #ff8800; color: #e7770e; background: #fff8ee; }
        #lbHelpPop {
            position: fixed; z-index: 20060; left: 0; top: 0; pointer-events: none;
            max-width: min(330px, calc(100vw - 16px)); padding: 10px 13px; border-radius: 10px;
            background: #212529; color: #f1f3f5; font-size: .8rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(-3px);
            transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
        }
        #lbHelpPop.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
        #lbHelpPop b { display: block; margin-bottom: 3px; color: #ffcf99; font-size: .84rem; }
        .an-kpi { cursor: default !important; }
        .an-kpi-label { display: flex; align-items: center; }
        @media print { .lb-i, #lbHelpPop { display: none !important; } }

        .lb-toast-act { flex: 0 0 auto; align-self: center; border: 0; background: #fff3e6; color: #c26a00; font-weight: 700; font-size: .78rem; padding: 4px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
        .lb-toast-act:hover { background: #ffe5c7; }

        /* ===================== XUẤT ỨNG LƯƠNG ===================== */
        .adv-exp-wrap { position: relative; display: inline-block; }
        .adv-bg .adv-i { padding-left: .5rem; padding-right: .5rem; line-height: 1; }
        .adv-bg .btn-primary.adv-i, .adv-bg .btn-success.adv-i { border-left: 1px solid rgba(255,255,255,.55); }
        .adv-bg .btn-outline-primary.adv-i, .adv-bg .btn-outline-success.adv-i, .adv-bg .btn-outline-danger.adv-i { background: rgba(0,0,0,.03); }
        .adv-exp-scope { margin: 4px 0 8px; padding: 6px 8px; border-radius: 6px; background: #fff8e1; border: 1px solid #ffe08a; font-size: .85rem; }
        /* Máy tính: mở rộng gần full màn hình (điện thoại giữ nguyên) */
        /* ===================== GIAO DIỆN MỚI v14 ===================== */
        body { font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; }

        /* Menu "Thêm" ở màn Ứng lương */
        .adv-more { position: relative; }
        .adv-more-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1040; width: 360px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #E4E0DA; border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(27,31,36,.16); }
        .adv-more-panel[hidden] { display: none; }
        .adv-mi { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 10px; text-align: left; color: #1B1F24; }
        .adv-mi:hover { background: #F5F3EF; }
        .adv-mi > i { font-size: 1.15rem; margin-top: 1px; }
        .adv-mi b { display: block; font-weight: 600; }
        .adv-mi small { display: block; color: #5A6472; font-size: .8rem; line-height: 1.35; }
        .adv-mi-sep { height: 1px; background: #EFEBE5; margin: 6px 8px; }
        .adv-mi-danger, .adv-mi-danger > i, .adv-mi-danger b { color: #B42318; }

        /* Màn Ứng lương: thẻ gọn, sạch */
        #advanceCard { border: 1px solid #E4E0DA; border-radius: 14px; box-shadow: none; }
        #advanceCard .card-header { background: #fff !important; border-bottom: 1px solid #EFEBE5; padding: 16px 20px; border-radius: 14px 14px 0 0; }
        #advanceCard .card-header h5 { font-size: 1.4rem; font-weight: 600; }
        .adv-stat { border: 1px solid #E4E0DA !important; border-radius: 14px; padding: .9rem 1.1rem; }
        .adv-stat-v { font-size: 1.75rem; font-weight: 600; }
        .adv-stat-l { font-size: .85rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
        .adv-stat-l::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #adb5bd; flex: none; }
        .adv-stat-paid .adv-stat-l::before { background: #0E7040; }
        .adv-stat-pend .adv-stat-l::before { background: #B7791F; }
        .adv-stat-people .adv-stat-l::before { background: #2F6FDB; }
        .adv-stat[style*="fd7e14"] { background: #FFF3E6; border-color: #F3D9BE !important; }
        .adv-stat[style*="fd7e14"] .adv-stat-l::before { background: #B64F0A; }
        .adv-person { border-color: #E4E0DA; border-radius: 12px; }
        .adv-person-head { padding: .8rem 1rem; }

        /* Máy tính: thanh trái sáng – thoáng, thanh trên mờ kính */
        @media (min-width: 992px) {
            #appScreen > .container { max-width: none !important; margin: 0 !important; padding: 0 36px 48px 284px !important; }
            #appScreen > .container > .card.shadow { position: sticky; top: 0; z-index: 1015; margin: 0 -36px 22px; padding: 14px 36px; border: 0 !important; border-radius: 0; box-shadow: none !important; background: rgba(247,245,242,.78) !important; -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
            #appScreen .card-header.bg-orange { background: transparent !important; color: var(--lb-ink) !important; border: 0 !important; padding: 0; }
            .lb-hdr { justify-content: flex-end; padding: 0; }
            .lb-hdr-title { display: none; }

            .lb-tabs { position: fixed; top: 0; left: 0; bottom: 0; width: 248px; margin: 0; padding: 96px 14px 20px; flex-direction: column; align-items: stretch; gap: 2px; background: #fff; border-radius: 0; border-right: 1px solid var(--lb-line); box-shadow: none; overflow-x: hidden; overflow-y: auto; }
            .lb-tabs::before { content: ''; position: absolute; top: 28px; left: 22px; width: 40px; height: 40px; border-radius: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19c.5-3.2 2.8-5 5.5-5s5 1.8 5.5 5'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M16.5 14.2c2.2.1 3.7 1.5 4 4'/%3E%3C/svg%3E") center / 22px 22px no-repeat, linear-gradient(135deg, #D6650F, #AE4906); box-shadow: 0 6px 16px rgba(191,85,10,.32); }
            .lb-tabs::after { content: 'Quản lý nhân sự'; position: absolute; top: 28px; left: 74px; right: 14px; height: 40px; line-height: 40px; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; color: var(--lb-ink); white-space: nowrap; }
            .lb-tab { flex: 0 0 auto; justify-content: flex-start; gap: 12px; height: 44px; padding: 0 14px; border-radius: 12px; color: #5C5147; font-weight: 500; }
            .lb-tab i { font-size: 1.15rem; color: #9A8D80; transition: color .18s ease; }
            .lb-tab:hover { background: #F7F2EB; color: var(--lb-ink); }
            .lb-tab:hover i { color: var(--lb-or); }
            .lb-tab.active { background: #FFF1E3; color: #A34508; font-weight: 600; box-shadow: none; }
            .lb-tab.active i { color: var(--lb-or); }
            .lb-tab .lb-tab-badge { margin-left: auto; }
            .lb-tab.active .lb-tab-badge { background: #fff; color: #A34508; }
        }
        @media print { #appScreen > .container { padding: 0 !important; } }
        /* ---- Điện thoại / máy tính bảng: menu "Thêm" thành bảng kéo từ dưới lên (không bị cắt) ---- */
        @media (max-width: 991.98px) {
            .adv-more-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; max-height: 82vh; overflow: auto; padding: 8px; }
            .adv-mi { padding: 14px 12px; }
            body.adv-sheet-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 1035; }
        }
        /* Nút phụ kiểu viền trắng, đồng bộ */
        .ld-toolbar > .btn-secondary { background: #fff; color: #44505E; border-color: #D6D1C9; }
        .ld-toolbar > .btn-secondary:hover { background: #F5F3EF; color: #1B1F24; }
        @media (max-width: 576px) {
            /* Ứng lương: 2 nút chính ngang bằng nhau + nút ⋯ */
            .adv-actions { flex: 1 1 100%; flex-wrap: nowrap !important; gap: 8px !important; }
            .adv-actions > .adv-bg, .adv-actions > .adv-exp-wrap { flex: 1 1 0; min-width: 0; display: flex; }
            .adv-actions .adv-exp-wrap > .adv-bg { width: 100%; }
            .adv-actions .adv-bg > .btn:first-child { flex: 1 1 auto; min-height: 44px; border-radius: .375rem !important; padding-left: .4rem; padding-right: .4rem; }
            .adv-actions .adv-bg > .adv-i, .ld-toolbar .adv-bg > .adv-i { display: none; }
            .adv-actions > .adv-more > .btn { min-height: 44px; width: 48px; padding: 0; }
            .adv-more-t { display: none; }
            /* Danh sách lao động: Xuất / Nhập là 2 nút chính, còn lại xếp lưới 2 cột */
            .ld-toolbar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
            .ld-toolbar > .adv-bg { display: flex; }
            .ld-toolbar .adv-bg > .btn:first-child { flex: 1 1 auto; border-radius: .375rem !important; }
            .ld-toolbar .btn { min-height: 44px; white-space: normal; }
        }

        /* ===================== HỆ GIAO DIỆN v17 – "Ember" =====================
           Nền giấy ấm · một màu nhấn cam đất · chữ nâu đen ấm · đổ bóng mềm · chuyển động 180–260ms */
        :root {
            --lb-ink: #1F1B16; --lb-ink2: #4A4036; --lb-mute: #7B6F63; --lb-line: #E8E3DC; --lb-paper: #F7F5F2;
            --lb-or: #BF550A; --lb-or-d: #A34508; --lb-tint: #FFF1E3; --lb-tint-line: #F6D7B8;
            --lb-sh1: 0 1px 2px rgba(31,27,22,.05), 0 1px 1px rgba(31,27,22,.03);
            --lb-sh2: 0 8px 24px rgba(31,27,22,.09), 0 2px 6px rgba(31,27,22,.05);
            --lb-ease: cubic-bezier(.2,.8,.2,1);
        }
        body.bg-light { background: radial-gradient(900px 360px at 85% -8%, #FFEBD6 0%, rgba(255,235,214,0) 70%), var(--lb-paper) !important; color: var(--lb-ink); }
        ::selection { background: #FFD9B8; }
        a { color: var(--lb-or); } a:hover { color: var(--lb-or-d); }
        .bg-orange { background: var(--lb-or) !important; }
        .text-primary { color: var(--lb-or) !important; }
        .text-muted { color: var(--lb-mute) !important; }
        * { scrollbar-width: thin; scrollbar-color: #D9CDBF transparent; }

        /* ---- Chuyển động mượt dùng chung ---- */
        .btn, .form-control, .form-select, .card, .adv-person, .adv-stat, .lb-tab, .adv-mi, .badge, .lb-i, .iconbtn {
            transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .22s var(--lb-ease), transform .18s var(--lb-ease);
        }
        .btn:active { transform: scale(.975); }
        .lb-tabpane { animation: lbIn .26s var(--lb-ease); }
        @keyframes lbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        @keyframes lbPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
        @keyframes lbSheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
        @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
        .adv-more-panel:not([hidden]), .adv-exp:not([hidden]) { animation: lbPop .2s var(--lb-ease); transform-origin: top right; }
        .adv-person.open .adv-person-body { animation: lbIn .24s var(--lb-ease); }
        body.adv-sheet-open::after { animation: lbFade .2s ease; }
        @media (max-width: 991.98px) { .adv-more-panel:not([hidden]), .adv-exp:not([hidden]) { animation: lbSheet .28s var(--lb-ease); } }
        @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

        /* ---- Nút: một màu nhấn, nổi nhẹ ---- */
        .btn { border-radius: 10px; font-weight: 500; letter-spacing: .005em; }
        .btn-primary { --bs-btn-bg: #BF550A; --bs-btn-border-color: #BF550A; --bs-btn-hover-bg: #A34508; --bs-btn-hover-border-color: #A34508; --bs-btn-active-bg: #8E3C06; --bs-btn-active-border-color: #8E3C06; --bs-btn-disabled-bg: #BF550A; --bs-btn-disabled-border-color: #BF550A; --bs-btn-focus-shadow-rgb: 191,85,10; box-shadow: 0 1px 2px rgba(143,61,5,.35), inset 0 1px 0 rgba(255,255,255,.16); }
        .btn-primary:hover { box-shadow: 0 6px 16px rgba(191,85,10,.28), inset 0 1px 0 rgba(255,255,255,.16); }
        .btn-outline-primary { --bs-btn-color: #A34508; --bs-btn-border-color: #E8C9A8; --bs-btn-hover-bg: #FFF1E3; --bs-btn-hover-color: #8E3C06; --bs-btn-hover-border-color: #E3B48C; --bs-btn-active-bg: #FFE4CC; --bs-btn-active-color: #8E3C06; --bs-btn-active-border-color: #E3B48C; --bs-btn-disabled-color: #A34508; --bs-btn-disabled-border-color: #E8C9A8; --bs-btn-focus-shadow-rgb: 191,85,10; background: #fff; }
        .btn-check:checked + .btn-outline-primary { background: var(--lb-or); border-color: var(--lb-or); color: #fff; box-shadow: 0 1px 2px rgba(143,61,5,.3); }
        .btn-dark { --bs-btn-bg: #BF550A; --bs-btn-border-color: #BF550A; --bs-btn-hover-bg: #A34508; --bs-btn-hover-border-color: #A34508; --bs-btn-active-bg: #8E3C06; --bs-btn-active-border-color: #8E3C06; --bs-btn-focus-shadow-rgb: 191,85,10; }
        .btn-outline-dark, .btn-outline-secondary { --bs-btn-color: #4A4036; --bs-btn-border-color: #DDD3C7; --bs-btn-hover-bg: #F7F2EB; --bs-btn-hover-color: #1F1B16; --bs-btn-hover-border-color: #CFC2B3; --bs-btn-active-bg: #F1E9DF; --bs-btn-active-color: #1F1B16; --bs-btn-active-border-color: #CFC2B3; --bs-btn-focus-shadow-rgb: 191,85,10; background: #fff; }
        .btn-orange { background-color: #BF550A; border-color: #BF550A; }
        .btn-orange:hover { background-color: #A34508; border-color: #A34508; }
        .btn:focus-visible, .lb-tab:focus-visible { outline: 2px solid #E8710A; outline-offset: 2px; box-shadow: none; }
        #bkModeBtn.active { background: var(--lb-or); border-color: var(--lb-or); color: #fff; }
        #bkBar { background: #2A2119; border-radius: 16px; box-shadow: var(--lb-sh2); }
        .ld-card.bk-selected { outline-color: var(--lb-or); background: #FFF6EC !important; }
        .ld-card.bk-selected .bk-card-tick { background: var(--lb-or); border-color: var(--lb-or); }
        .badge { font-weight: 600; letter-spacing: .01em; }
        .badge.text-bg-primary { background-color: #FFE8D2 !important; color: #8F3D05 !important; }
        .badge.text-bg-light { background-color: #F4EFE8 !important; color: #4A4036 !important; }
        .badge.text-bg-light.border { border-color: transparent !important; }

        /* ---- Thẻ · ô nhập · bảng · hộp thoại ---- */
        .card { border-color: var(--lb-line); border-radius: 16px; background: #fff; }
        .card.shadow, .card.shadow-sm { box-shadow: var(--lb-sh1) !important; }
        .form-control, .form-select { border-color: #DDD3C7; border-radius: 10px; background-color: #fff; }
        .form-control:hover, .form-select:hover { border-color: #CFC2B3; }
        .form-control:focus, .form-select:focus { border-color: #E8710A; box-shadow: 0 0 0 .22rem rgba(232,113,10,.16); }
        .form-check-input:checked { background-color: var(--lb-or); border-color: var(--lb-or); }
        .form-check-input:focus { border-color: #E8710A; box-shadow: 0 0 0 .22rem rgba(232,113,10,.16); }
        #appScreen .form-label { color: var(--lb-ink2); }
        .lb-filter { border-radius: 16px; border: 1px solid var(--lb-line); }
        #dataTable thead th { background: #FAF6F0 !important; color: var(--lb-mute); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--lb-line); }
        #dataTable tbody tr > * { border-color: #F1ECE4; }
        #dataTable tbody tr:hover > * { background-color: #FFFAF3; }
        .modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 64px rgba(31,27,22,.28); }
        .modal-header:not(.bg-danger):not(.text-white) { border-bottom-color: #F1ECE4; }
        .modal-footer { border-top-color: #F1ECE4; }
        #monthChartCard .card-title { color: #8F3D05 !important; }
        #lbHelpPop { background: #2A2119; border-radius: 12px; box-shadow: var(--lb-sh2); }
        .lb-i:hover, .lb-i[aria-expanded="true"] { border-color: var(--lb-or); color: var(--lb-or); background: var(--lb-tint); }

        /* ---- Thanh trên (mọi kích cỡ): sáng, gọn ---- */
        .lb-hdr-btns .btn-outline-light { color: var(--lb-ink2); border-color: var(--lb-line); background: #fff; }
        .lb-hdr-btns .btn-outline-light:hover { background: var(--lb-tint); border-color: var(--lb-tint-line); color: #8E3C06; }
        .lb-hdr-user { background: #fff; border: 1px solid var(--lb-line); border-radius: 999px; padding: 6px 14px; color: var(--lb-ink) !important; box-shadow: var(--lb-sh1); }

        /* ---- Màn Ứng lương ---- */
        #advanceCard { border-radius: 18px; }
        #advanceCard .card-header { border-radius: 18px 18px 0 0; border-bottom-color: #F1ECE4; }
        #advanceCard .card-header h5 { letter-spacing: -.01em; }
        #advanceCard .card-body > .row.g-2.align-items-end { --bs-gutter-x: .75rem; margin: 0 0 16px !important; padding: 14px 6px 6px; background: #FBF8F3; border: 1px solid #F1ECE4; border-radius: 14px; }
        #advKyBar:not(:empty) { background: var(--lb-tint); border: 1px solid var(--lb-tint-line); border-radius: 12px; padding: 10px 14px; color: #6A3A0F !important; font-size: .85rem; }
        #advKyBar a { color: #8E3C06; font-weight: 600; }
        .adv-stat { box-shadow: var(--lb-sh1); }
        .adv-stat:hover { box-shadow: var(--lb-sh2); transform: translateY(-1px); }
        .adv-stat-v { letter-spacing: -.015em; }
        .adv-person { background: #fff; border-color: var(--lb-line); border-radius: 14px; box-shadow: var(--lb-sh1); }
        .adv-person:hover { border-color: #EBCFB1; box-shadow: var(--lb-sh2); }
        .adv-person.open { border-color: #EBCFB1; box-shadow: var(--lb-sh2); }
        .adv-person-head:hover { background: #FFFAF3; border-radius: 14px; }
        .adv-person.open .adv-person-head { background: #FFFBF6; border-radius: 14px 14px 0 0; }
        .adv-person-head:focus-visible { outline-color: #E8710A; }
        .adv-person-body { border-top-color: #F1ECE4; background: #FFFCF8; border-radius: 0 0 14px 14px; }
        .adv-total { color: #0E7040; letter-spacing: -.01em; }
        .adv-lines { --bs-table-bg: transparent; border-color: var(--lb-line); }
        .adv-lines > :not(caption) > * > * { border-width: 0 0 1px; border-color: #F1ECE4; }
        .adv-lines thead th { background: #FAF6F0 !important; color: var(--lb-mute); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
        .adv-av { width: 38px; height: 38px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; letter-spacing: .02em; background: #FFE8D2; color: #9A3F00; }
        .adv-av[data-c="1"] { background: #DDF3EF; color: #0F6B5E; }
        .adv-av[data-c="2"] { background: #E6E9FB; color: #3B49A6; }
        .adv-av[data-c="3"] { background: #FCE4EC; color: #A3214F; }
        .adv-av[data-c="4"] { background: #EEF0D8; color: #5A6112; }
        .adv-ph-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .adv-ph-id { display: flex; flex-direction: column; min-width: 0; }
        .adv-ph-th { display: none; }
        @media (min-width: 769px) {
            .adv-ph-grid, .adv-ph-th { --advcols: 22px minmax(230px, 2.2fr) minmax(90px, .8fr) minmax(190px, 2fr) minmax(130px, 1fr) 120px 140px; }
            .adv-person-head.adv-ph-grid { display: grid; grid-template-columns: var(--advcols); align-items: center; gap: 14px; padding: .8rem 1.1rem; }
            .adv-ph-sub { display: contents; }
            .adv-ph-bank .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .adv-person-head .adv-total { margin-left: 0; text-align: right; font-size: 1.02rem; }
            .adv-person-head .adv-total .small { display: none; }
            .adv-ph-th { display: grid; grid-template-columns: var(--advcols); gap: 14px; padding: .6rem 1.1rem; margin-bottom: .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-mute); background: #FAF6F0; border: 1px solid #F1ECE4; border-radius: 12px; }
        }
        @media (max-width: 768px) {
            .adv-person-head.adv-ph-grid { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px 10px; align-items: start; padding: .85rem .9rem; }
            .adv-ph-grid > .adv-caret { grid-row: 1; margin-top: 11px; }
            .adv-ph-main { grid-column: 2; }
            .adv-person-head .adv-total { grid-column: 3; grid-row: 1; margin-left: 0; text-align: right; font-size: 1rem; }
            .adv-person-head .adv-total .small { display: block; text-align: right; }
            .adv-ph-sub { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
            .adv-ph-sub:empty, .adv-ph-co:empty, .adv-ph-bank:empty { display: none; }
        }

        /* ---- Đăng nhập ---- */
        #passwordOverlay { background: radial-gradient(900px 500px at 15% 10%, #FFB878 0%, rgba(255,184,120,0) 60%), linear-gradient(135deg, #E2701A 0%, #A94406 100%) !important; }
        #passwordOverlay > .card { border: 0; border-radius: 24px; box-shadow: 0 30px 70px rgba(60,25,0,.38) !important; padding: 30px !important; }
        #passwordOverlay > .card::before { content: 'Quản lý nhân sự'; display: block; text-align: center; font-weight: 700; color: var(--lb-or); font-size: .92rem; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 4px; }
        #passwordOverlay .btn-orange, #passwordOverlay .form-control { min-height: 46px; }

        /* ---- Điện thoại ---- */
        @media (max-width: 576px) {
            #appScreen > .container > .card.shadow { margin: 0 0 10px; border-radius: 16px; }
            #appScreen .card-header.bg-orange { background: #fff !important; color: var(--lb-ink) !important; border-radius: 16px; padding: 8px 10px; }
            .lb-hdr { flex-wrap: nowrap; padding: 0; gap: 8px; }
            .lb-hdr-title { display: none; }
            .lb-hdr-tools { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; gap: 6px; }
            .lb-hdr-user { flex: 1 1 auto; min-width: 0; max-width: none; padding: 6px 12px; font-size: .82rem; }
            .lb-hdr-btns { gap: 4px; }
            .lb-hdr-btns .btn { height: 36px; min-width: 36px; padding: 0 6px; }
            .lb-hdr-btns .lb-hdr-out { padding: 0 10px; font-size: .78rem; }

            .lb-tabs { position: fixed !important; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); top: auto !important; margin: 0 !important; border-radius: 22px; padding: 6px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--lb-line); box-shadow: 0 10px 30px rgba(31,27,22,.18); z-index: 1030; gap: 2px; }
            .lb-tab { flex-direction: column; gap: 2px; min-height: 54px; padding: 6px 2px; border-radius: 16px; color: var(--lb-mute); font-weight: 500; }
            .lb-tab i { color: #9A8D80; }
            .lb-tab span { font-size: .68rem; }
            .lb-tab.active { background: var(--lb-tint); color: #A34508; box-shadow: none; font-weight: 600; }
            .lb-tab.active i { color: var(--lb-or); }
            #appScreen > .container { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
            #bkBar, #bkUndo { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
            .adv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .adv-stat { padding: .65rem .8rem; }
            .adv-stat-v { font-size: 1.25rem; }
            .adv-actions .adv-chev { display: none; }
            .adv-actions .btn { font-size: .8rem; white-space: normal; line-height: 1.15; }
            .adv-exp-wrap { display: flex; }
        }
        .adv-exp { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1040; width: min(380px, calc(100vw - 24px)); padding: 12px 14px; background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
        .adv-exp, .adv-exp * { box-sizing: border-box; }
        .adv-exp[hidden] { display: none !important; }
        .adv-exp-t { font-weight: 700; margin-bottom: 8px; }
        .adv-exp-f { display: block; margin: 0 0 8px; }
        .adv-exp-f > span { display: block; font-size: .8rem; font-weight: 600; color: #495057; margin-bottom: 2px; }
        .adv-exp-f input { width: 100%; border: 1px solid #ced4da; border-radius: 8px; padding: 5px 9px; font-size: .9rem; }
        .adv-exp-f input:focus { border-color: #ff9a2e; box-shadow: 0 0 0 .2rem rgba(255, 136, 0, .18); outline: 0; }
        .adv-exp-f small { display: block; color: #8a949e; font-size: .74rem; margin-top: 2px; overflow-wrap: anywhere; }
        .adv-exp-c { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-size: .84rem; cursor: pointer; }
        .adv-exp-c input { margin-top: 3px; accent-color: #ff8800; }
        .adv-bt-card { border: 1px solid #dee2e6; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
        .adv-bt-head { padding: 10px 12px; background: #f7f9fb; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
        .adv-bt-det { max-height: 320px; overflow: auto; }
        .adv-bt-det table { font-size: .8rem; margin: 0; }
        .adv-exp-pend { margin: 0 0 10px; padding: 8px 10px; background: #fff8e1; border: 1px solid #ffe08a; border-radius: 8px; font-size: .82rem; }
        .adv-exp-pend .btn { margin-top: 6px; margin-right: 4px; }
        .adv-exp-act { flex-wrap: wrap; }
        .adv-exp-modes { margin: 0 0 8px; font-size: .78rem; color: #555; line-height: 1.45; }
        .adv-exp-modes b.v { color: #198754; } .adv-exp-modes b.s { color: #6f42c1; }
        .lbd-html { margin: 10px 0; }
        .lbd-chk { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 2px; font-weight: 600; font-size: .9rem; cursor: pointer; }
        .lbd-chk input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
        .lb-sens-b { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fdecea; color: #b42318; font-size: .68rem; font-weight: 700; white-space: nowrap; }
        .lb-sens-warn { padding: 8px 10px; border-radius: 8px; background: #fdecea; border: 1px solid #f5c2c0; color: #8a1c14; font-size: .84rem; line-height: 1.45; }
        .lb-sens-ok { padding: 8px 10px; border-radius: 8px; background: #e8f5ee; border: 1px solid #b7e0c8; color: #14532d; font-size: .84rem; line-height: 1.45; }
        .adv-rv { max-height: 42vh; overflow: auto; border: 1px solid #dee2e6; border-radius: 8px; }
        .adv-rv table { width: 100%; border-collapse: collapse; font-size: .8rem; }
        .adv-rv th { position: sticky; top: 0; background: #f1f3f5; text-align: left; padding: 5px 8px; font-weight: 600; }
        .adv-rv td { padding: 4px 8px; border-top: 1px solid #eee; vertical-align: top; }
        .adv-rv .r { text-align: right; white-space: nowrap; }
        .adv-rv tfoot td { background: #f8f9fa; font-weight: 700; border-top: 2px solid #dee2e6; }
        .adv-rv .bad { color: #dc3545; font-weight: 600; } .adv-rv-w { color: #dc3545; font-size: .72rem; font-weight: 600; }
        .adv-bt-banner { margin: 0 0 10px; border: 1px solid #cdb8f0; background: #f6f0ff; border-radius: 10px; padding: 6px 10px; }
        .adv-bt-bn { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 4px 0; }
        .adv-bt-bn + .adv-bt-bn { border-top: 1px dashed #cdb8f0; }
        .adv-bt-bn-t { font-size: .85rem; } .adv-bt-bn-b { display: flex; gap: 6px; flex-wrap: wrap; }
        .adv-exp-sum { margin: 8px 0 10px; padding: 8px 10px; background: #f7f9fb; border-radius: 8px; font-size: .82rem; }
        .adv-exp-act { display: flex; gap: 8px; justify-content: flex-end; }
        @media (max-width: 575.98px) {
            .adv-exp { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); top: auto; width: auto; max-height: 82vh; overflow: auto; }
        }

        /* ===== Hộp xuất file: nút chính trước, có chú thích dễ hiểu, desktop + mobile ===== */
        .adv-exp .adv-exp-act { display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; margin-top: 4px; }
        .adv-exp .adv-exp-opt { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #e3e8ee; border-radius: 12px; background: #fbfcfd; }
        .adv-exp .adv-exp-opt-send { border-color: #cdb8f0; background: #f8f4ff; }
        .adv-exp .adv-exp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; font-size: .95rem; font-weight: 600; line-height: 1.2; white-space: normal; text-align: center; cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s; -webkit-tap-highlight-color: transparent; }
        .adv-exp .adv-exp-btn i { font-size: 1.05rem; flex: none; }
        .adv-exp .adv-exp-btn:active { transform: scale(.98); }
        .adv-exp .adv-exp-btn:focus-visible { outline: 0; box-shadow: 0 0 0 .22rem rgba(111, 66, 193, .28); }
        .adv-exp .adv-exp-btn-send { background: #6f42c1; border-color: #6f42c1; color: #fff; min-height: 48px; font-size: 1rem; box-shadow: 0 4px 12px rgba(111, 66, 193, .28); }
        .adv-exp .adv-exp-btn-send:hover { background: #5f37a8; border-color: #5f37a8; }
        .adv-exp .adv-exp-btn-view { background: #fff; border-color: #198754; color: #198754; }
        .adv-exp .adv-exp-btn-view:hover { background: #198754; color: #fff; }
        .adv-exp .adv-exp-hint { margin: 0; font-size: .78rem; line-height: 1.5; color: #5b6570; }
        .adv-exp .adv-exp-hint b { color: #343a40; font-weight: 600; }
        .adv-exp .adv-exp-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 2px; }
        .adv-exp .adv-exp-btn-ghost { background: #fff; border-color: #f0b27a; color: #b45f06; min-height: 42px; font-size: .88rem; }
        .adv-exp .adv-exp-btn-ghost:hover { background: #fff3e6; }
        .adv-exp .adv-exp-btn-close { background: #f1f3f5; border-color: #e3e8ee; color: #495057; min-height: 42px; font-size: .88rem; }
        .adv-exp .adv-exp-btn-close:hover { background: #e9ecef; }
        @media (min-width: 576px) { .adv-exp { width: min(420px, calc(100vw - 24px)); } }
        @media (max-width: 575.98px) {
            .adv-exp { max-height: 88vh; max-height: 88dvh; padding: 14px 14px 12px; }
            .adv-exp .adv-exp-btn-send { min-height: 52px; }
            .adv-exp .adv-exp-hint { font-size: .76rem; }
        }

        /* ===================== v18 – Thương hiệu · Giới thiệu · Chân trang ===================== */
        .lb-foot { margin: 28px 0 8px; padding: 14px 8px 4px; text-align: center; color: #7B6F63; font-size: .78rem; line-height: 1.7; border-top: 1px solid #E8E3DC; }
        .lb-foot b { color: #4A4036; font-weight: 600; }
        .lb-foot .lb-dot { margin: 0 6px; opacity: .5; }
        .lb-foot button, .lb-login-credit button { background: none; border: 0; padding: 0; color: #A34508; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
        .lb-foot button:focus-visible, .lb-login-credit button:focus-visible { outline: 2px solid #E8710A; outline-offset: 2px; border-radius: 4px; }
        .lb-login-credit { margin-top: 14px; padding-top: 12px; border-top: 1px solid #F1ECE4; text-align: center; font-size: .76rem; color: #7B6F63; line-height: 1.7; }
        .lb-login-credit b { color: #4A4036; font-weight: 600; }
        .lb-pass-wrap { position: relative; }
        .lb-pass-wrap .form-control { padding-right: 46px; }
        .lb-eye { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; background: transparent; color: #7B6F63; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
        .lb-eye:hover { color: #A34508; background: #FFF1E3; }
        #lbAboutModal .modal-content { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(31, 27, 22, .28); }
        .lb-ab-hero { background: radial-gradient(500px 220px at 12% 0%, #FFB878 0%, rgba(255, 184, 120, 0) 65%), linear-gradient(135deg, #E2701A 0%, #A94406 100%); color: #fff; padding: 22px 22px 18px; position: relative; }
        .lb-ab-hero .btn-close { position: absolute; top: 14px; right: 14px; filter: invert(1) grayscale(1) brightness(2); opacity: .85; }
        .lb-ab-logo { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 10px; }
        .lb-ab-hero h5 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
        .lb-ab-hero .lb-ab-ver { opacity: .9; font-size: .82rem; margin-top: 2px; }
        .lb-ab-sec { margin-bottom: 18px; }
        .lb-ab-sec:last-child { margin-bottom: 0; }
        .lb-ab-sec h6 { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7B6F63; margin: 0 0 8px; }
        .lb-ab-dev { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #FFF1E3; border: 1px solid #F6D7B8; border-radius: 14px; }
        .lb-ab-av { width: 42px; height: 42px; flex: none; border-radius: 13px; background: #BF550A; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
        .lb-ab-dev small { display: block; color: #7B6F63; }
        .lb-ab-dev strong { color: #1F1B16; font-size: 1rem; }
        .lb-ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .lb-ab-chips span { background: #F7F5F2; border: 1px solid #E8E3DC; border-radius: 999px; padding: 4px 11px; font-size: .78rem; color: #4A4036; }
        .lb-ab-chips span i { color: #BF550A; margin-right: 5px; }
        .lb-ab-kv { display: grid; grid-template-columns: 112px 1fr; gap: 6px 10px; font-size: .84rem; margin: 0; }
        .lb-ab-kv dt { font-weight: 500; color: #7B6F63; }
        .lb-ab-kv dd { margin: 0; color: #1F1B16; overflow-wrap: anywhere; }
        .lb-ab-keys { width: 100%; font-size: .84rem; border-collapse: collapse; }
        .lb-ab-keys td { padding: 5px 0; border-bottom: 1px solid #F1ECE4; vertical-align: top; }
        .lb-ab-keys tr:last-child td { border-bottom: 0; }
        .lb-ab-keys td:first-child { width: 128px; white-space: nowrap; }
        .lb-ab-keys kbd { background: #2A2119; color: #fff; border-radius: 6px; padding: 2px 7px; font-size: .74rem; font-family: inherit; }
        .lb-ab-copy { font-size: .74rem; color: #7B6F63; text-align: center; padding: 10px 16px 0; line-height: 1.6; }
        #lbLibWarn { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 2100; max-width: 94vw; background: #2A2119; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: .84rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
        #lbLibWarn button { margin-left: 8px; border: 0; background: #E8710A; color: #fff; font-weight: 600; border-radius: 8px; padding: 3px 10px; }
        @media (max-width: 576px) { .lb-ab-kv { grid-template-columns: 96px 1fr; } .lb-ab-keys td:first-child { width: 112px; } }
        @media print { .lb-foot, #lbAboutModal, #lbLibWarn { display: none !important; } }

        /* ===================== v19 – Thanh công cụ Ứng lương cân đối + thẻ thống kê ===================== */
        .adv-tools { display: flex; align-items: center; gap: 8px; }
        .adv-sortbox { position: relative; display: block; margin: 0; flex: 1 1 auto; min-width: 0; }
        .adv-sortbox > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #7B6F63; pointer-events: none; font-size: .95rem; }
        .adv-sortbox .form-select { width: 100%; padding-left: 32px; text-overflow: ellipsis; }
        .adv-tools .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; height: 32px; }
        .adv-tool-icon { width: 36px; padding: 0 !important; }
        .adv-tool-phone.is-on { background: #FFF1E3; border-color: #F6D7B8; color: #8E3C06; }
        .adv-tools .btn:disabled { opacity: .45; }
        @media (min-width: 577px) { .adv-sortbox { flex: 0 0 auto; } .adv-sortbox .form-select { width: auto; min-width: 160px; } }
        @media (max-width: 576px) {
            .adv-tools { flex: 1 1 100%; gap: 8px; }
            .adv-tools .btn, .adv-sortbox .form-select { height: 42px; font-size: .9rem; }
            .adv-tool-icon { width: 46px; font-size: 1.05rem; }
            .adv-tool-phone { padding: 0 14px !important; font-weight: 500; }
            #advanceView.sbox-flow { max-height: none; overflow: visible; border: 0; background: transparent; padding: 0; }
        }
        .adv-stat-l { flex-wrap: nowrap; }
        .adv-stat-l .lb-i { margin-left: auto; }

        /* ===================== v20 – Sửa lỗi bố cục laptop / điện thoại nhỏ ===================== */
        /* Lưới "Theo người": trước đây cần ≥1024px nên cột tiền bị đẩy ra ngoài mép ở laptop 1100–1366px */
        @media (min-width: 769px) {
            .adv-ph-grid, .adv-ph-th { --advcols: 22px minmax(160px, 2.2fr) minmax(70px, .8fr) minmax(140px, 2fr) minmax(64px, .7fr) minmax(96px, 1fr) minmax(110px, 1fr); }
            .adv-person-head.adv-ph-grid, .adv-ph-th { gap: 12px; }
            .adv-ph-th > :last-child, .adv-person-head .adv-total { min-width: 0; }
        }
        @media (min-width: 769px) and (max-width: 1199px) {
            .adv-ph-grid, .adv-ph-th { --advcols: 20px minmax(120px, 1.6fr) minmax(56px, .7fr) minmax(110px, 1.6fr) minmax(48px, .5fr) minmax(80px, .9fr) minmax(92px, 1fr); }
            .adv-person-head.adv-ph-grid, .adv-ph-th { gap: 8px; padding-left: .8rem; padding-right: .8rem; }
        }
        .adv-find { flex: 1 1 200px; min-width: 200px; }
        /* Thanh trên ở điện thoại: gom nút phụ vào menu ⋮ để tên người dùng hiện đủ */
        .lb-hdr-more { display: none; }
        .lb-hdr-menu { border: 1px solid #E8E3DC; border-radius: 14px; padding: 6px; min-width: 220px; box-shadow: 0 12px 32px rgba(31, 27, 22, .18); }
        .lb-hdr-menu .dropdown-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; font-size: .92rem; color: #1F1B16; }
        .lb-hdr-menu .dropdown-item i { color: #BF550A; width: 18px; text-align: center; }
        .lb-hdr-menu .dropdown-item:hover, .lb-hdr-menu .dropdown-item:active { background: #FFF1E3; color: #8E3C06; }
        .lb-hdr-menu li[hidden] { display: none; }
        @media (max-width: 576px) {
            .lb-hdr-more { display: block; }
            .lb-hdr-btns > .btn:not(.lb-hdr-out) { display: none !important; }
            .adv-tabs-wrap { width: 100%; }
            .adv-tabs { flex: 1 1 0; min-width: 0; width: auto; }
            .adv-tabs .btn { padding-left: 6px; padding-right: 6px; font-size: .84rem; }
            .adv-stat-v { white-space: nowrap; font-size: clamp(1.05rem, 5.4vw, 1.3rem); }
            .lb-foot .lb-foot-a, .lb-foot .lb-foot-b { display: block; }
        }
        @media (min-width: 577px) { .lb-foot .lb-foot-b::before { content: '·'; margin: 0 8px; opacity: .5; } }
        .lb-foot .lb-foot-a, .lb-foot .lb-foot-b { white-space: nowrap; }
        @media (max-width: 380px) { .adv-tabs-wrap > .lb-i { display: none; } }
        /* Phân tích: thẻ phân bố cao bằng nhau, tiêu đề phần không đè lên thẻ trên */
        /* ===================== v22 – Đánh dấu người lâu năm (từ 100 công) ===================== */
        .shine-glow { box-shadow: none !important; }
        .lb-vet { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #FFF6DD; border: 1px solid #F1D68A; color: #8A5A00; font-size: .7rem; font-weight: 600; line-height: 1.55; white-space: nowrap; vertical-align: middle; }
        .lb-vet i { color: #E0A526; font-size: .62rem; }
        #dataTable tbody tr.lb-vet-row > td:nth-child(2) { box-shadow: inset 3px 0 0 #E0A526; }
        .ld-card.lb-vet-row::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #E0A526; }
        .an-dcard { height: 100%; }
        /* ===================== v34 – hoàn thiện chi tiết thiết kế ===================== */
        body { font-variant-numeric: tabular-nums; }                                   /* chữ số thẳng hàng: tiền, ngày, số công */
        button, a, label, select, summary, .btn, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }   /* bỏ trễ 300ms / zoom đúp trên điện thoại */
        .lb-i { position: relative; }
        .lb-i::after { content: ''; position: absolute; inset: -9px; }                   /* vùng chạm ⓘ rộng ra mà nhìn vẫn gọn */
        @media (pointer: coarse) { .ld-actions .btn, .ld-actions-bottom .btn { min-width: 42px; min-height: 40px; } }
        @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
        #passwordOverlay .card .btn-link.w-100 { margin-top: 8px; }
        /* form ứng lương: nhóm có tiêu đề + chọn nhanh số tiền */
        .adv-sec-t { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7B6F63; margin: 0 0 8px; }
        .adv-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
        .adv-chip { border: 1px solid #F1CFA8; background: #FFF6EC; color: #8E3C06; border-radius: 999px; padding: 6px 4px; text-align: center; font-size: .84rem; font-weight: 600; cursor: pointer; line-height: 1.4; }
        .adv-chip:hover, .adv-chip:active { background: #FFE9D2; }
        #advanceModal #advanceAmount { font-size: 1.1rem; }
        /* Ứng lương (điện thoại): bộ lọc phụ gấp lại, ưu tiên số liệu */
        .advf-wrap { display: none; }
        @media (max-width: 576px) {
            .advf-wrap { display: block; order: 1; }
            .advf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #E8E3DC; border-radius: 999px; background: #fff; color: #8E3C06; font-size: .84rem; font-weight: 600; }
            .advf-btn .badge { background: #BF550A; color: #fff; border-radius: 999px; padding: 2px 7px; font-size: .68rem; }
            .advf-btn .bi-chevron-down { font-size: .7rem; transition: transform .15s; }
            .adv2.adv-f-open .advf-btn .bi-chevron-down { transform: rotate(180deg); }
            #advanceCard .card-body > .row > .adv-find, #advanceCard .card-body > .row > :nth-child(5), #advanceCard .card-body > .row > :nth-child(6) { order: 2; }
            .adv2:not(.adv-f-open) .card-body > .row > .adv-find, .adv2:not(.adv-f-open) .card-body > .row > :nth-child(5), .adv2:not(.adv-f-open) .card-body > .row > :nth-child(6) { display: none; }
            #summaryCard { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }   /* bỏ khung đôi ở tab Phân tích */
        }
        /* v33 – trạng thái lao động nổi bật: chấm màu cạnh tên + nhãn màu */
        .lb-sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex: none; }
        .lb-sdot-work { background: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .20); }
        .lb-sdot-left { background: #A3ADB8; }
        .lb-sdot-cancel { background: #DC3545; }
        .lb-sdot-other { background: #E0A526; }
        .lb-stp { display: inline-flex; align-items: center; gap: 6px; padding: 2px 11px; border-radius: 999px; border: 1px solid; font-size: .78rem; font-weight: 700; line-height: 1.55; white-space: nowrap; }
        .lb-stp .lb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
        .lb-stp-work { background: #E3F6E8; border-color: #A8DDB8; color: #0B6B2E; }
        .lb-stp-left { background: #EEF1F4; border-color: #D9DEE4; color: #5B6770; }
        .lb-stp-left .lb-dot { opacity: .45; }
        .lb-stp-cancel { background: #FDECEA; border-color: #F3C2BD; color: #A32117; }
        .lb-stp-other { background: #FFF6DD; border-color: #F1D68A; color: #8A5A00; }
        tr.lb-st-left .lb-nm { color: #6B7580; }
        .ld-card.lb-st-left .ld-name { color: #8A929B; }
        .ld-name .lb-stp { margin-left: 4px; font-size: .8rem; }
        /* v29 – nổi bật công ty tôi quản lý / tên "Tôi là" */
        .lb-mine { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; background: #FFF1E3; border: 1px solid #F1CFA8; color: #8E3C06; font-weight: 600; line-height: 1.5; max-width: 100%; }
        .lb-mine > i { color: #BF550A; font-size: .85em; }
        .lb-mine-gt { background: #E3F4F1; border-color: #B7E0D9; color: #0F6B5E; }
        .lb-mine-gt > i { color: #0F8A78; }
        .badge.lb-mine-badge { background: #FFF1E3 !important; border-color: #F1CFA8 !important; color: #8E3C06 !important; font-weight: 700; }
        .lb-mine-tag { font-style: normal; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: #FFF1E3; border: 1px solid #F1CFA8; color: #8E3C06; font-size: .7rem; font-weight: 700; white-space: nowrap; }
        .lb-mine-tag.gt { background: #E3F4F1; border-color: #B7E0D9; color: #0F6B5E; }
        /* v28 – Danh sách trên điện thoại: gọn, kết quả lên sát đầu trang */
        .lb-f-toggle, .lb-t-toggle { display: none; }
        @media (max-width: 576px) {
            .lb-f-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 12px; border: 1px solid #E8E3DC; border-radius: 999px; background: #fff; color: #8E3C06; font-size: .8rem; font-weight: 600; }
            .lb-f-toggle .badge { background: #BF550A; color: #fff; border-radius: 999px; padding: 2px 7px; font-size: .68rem; }
            .lb-f-toggle .bi-chevron-down { font-size: .7rem; transition: transform .15s; }
            #filterSection.lb-f-open .lb-f-toggle .bi-chevron-down { transform: rotate(180deg); }
            #filterSection:not(.lb-f-open) .lb-fgrid > :nth-child(3), #filterSection:not(.lb-f-open) .lb-fgrid > :nth-child(n+5) { display: none; }
            #filterSection:not(.lb-f-open) .lb-act-main > :nth-child(n+3), #filterSection:not(.lb-f-open) #dateModeBox { display: none !important; }
            /* Thanh công cụ (Xuất Excel / In / Xem theo người / Chọn nhiều / STK): gấp gọn sau nút "Công cụ khác" */
            .ld-toolbar > .lb-t-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; grid-column: 1 / -1 !important; order: -1 !important; min-height: 44px; padding: 0 14px; border: 1px solid #E8E3DC; border-radius: 12px; background: #fff; color: #8E3C06; font-size: .9rem; font-weight: 600; }
            .ld-toolbar > .lb-t-toggle .bi-chevron-down { font-size: .72rem; transition: transform .15s; }
            .ld-toolbar.lb-t-open > .lb-t-toggle { background: var(--lb-tint, #FFF1E3); border-color: var(--lb-tint-line, #F1CFA8); }
            .ld-toolbar.lb-t-open > .lb-t-toggle .bi-chevron-down { transform: rotate(180deg); }
            #dataDisplaySection .ld-toolbar:not(.lb-t-open) > :not(.lb-t-toggle) { display: none !important; }
        }
        #advPaidGrp.d-none + .adv-mi-sep { display: none; }
        /* v27 – phạm vi công ty */
        .lb-scope-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid #F6D7B8; background: #FFF6EC; border-radius: 12px; font-size: .84rem; color: #6A3A0F; }
        .lb-scope-bar[hidden] { display: none; }
        .lb-scope-bar > i { color: #BF550A; }
        .lb-scope-bar.warn { background: #FDECEA; border-color: #F3C2BD; color: #8A1F14; }
        .lb-scope-bar.warn > i { color: #C0392B; }
        .lb-scope-bar.info { background: #EEF4FB; border-color: #CFE0F3; color: #26496F; }
        .lb-scope-bar.info > i { color: #2F6FDB; }
        .lb-scope-bar a { font-weight: 600; }
        .lb-sc-t { font-weight: 600; }
        .lb-sc-chip { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px; background: #fff; border: 1px solid #F1D2B2; color: #8E3C06; font-size: .78rem; font-weight: 600; }
        .lb-sc-sw { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding-left: 0; font-size: .8rem; color: #5b6770; cursor: pointer; }
        .lb-sc-sw .form-check-input { margin: 0; float: none; cursor: pointer; }
        .lb-oos-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #EEF1F4; border: 1px solid #D9DEE4; color: #5B6770; font-size: .7rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
        .lb-acct-scope { margin: -4px 0 10px; padding: 8px 12px 10px; background: #FBF8F3; border: 1px solid #EFE9DF; border-top: 0; border-radius: 0 0 12px 12px; font-size: .84rem; }
        .lb-sc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
        .lb-sc-line > i { color: #7B6F63; }
        .lb-sc-lbl { color: #7B6F63; }
        .lb-sc-toila { color: #4A4036; font-weight: 500; }
        .lb-sc-edit { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E3DDD2; }
        .lb-sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; }
        .lb-sc-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 8px; border: 1px solid #E8E3DC; border-radius: 10px; background: #fff; cursor: pointer; }
        .lb-sc-opt input { margin: 0; accent-color: #BF550A; }
        .lb-sc-me { margin-top: 8px; max-width: 320px; }
        .lb-sc-me label { display: block; font-size: .78rem; color: #7B6F63; margin-bottom: 2px; }
        /* v23 – công tắc + ⓘ gọn trên một hàng */
        .lb-sw-wrap { display: inline-flex; align-items: center; margin-left: 4px; }
        .lb-sw-wrap .lb-switch { margin: 0; }
        .lb-seg-t { display: inline-flex; align-items: center; }
        @media (max-width: 576px) { .lb-act-main .lb-sw-wrap { grid-column: span 2; margin: 2px 0 0; } }
        .an-dhead { margin-top: .6rem; }
        /* ===== Thanh tab điện thoại gọn: 5 tab, mỏng, tab đang chọn = viên thuốc sau icon ===== */
        .lb-hdr-menu .lb-hdr-tool { text-decoration: none; }
        .lb-hdr-menu .lb-hdr-tool span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
        .lb-hdr-menu .lb-hdr-tool b { font-weight: 600; }
        .lb-hdr-menu .lb-hdr-tool small { color: #7B6F63; font-size: .74rem; }
        .lb-hdr-menu .lb-hdr-tool .bi-box-arrow-up-right { margin-left: auto; color: #9A8D80; font-size: .8rem; }
        @media (max-width: 576px) {
            #lbTabs .lb-tab-tool { display: none; }
            #lbTabs.lb-tabs { left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 5px 4px; gap: 0; border-radius: 20px; box-shadow: 0 6px 20px rgba(31,27,22,.13); }
            #lbTabs .lb-tab, #lbTabs .lb-tab:hover, #lbTabs .lb-tab.active { background: transparent; box-shadow: none; }
            #lbTabs .lb-tab { min-height: 0; padding: 3px 0 2px; gap: 1px; border-radius: 14px; }
            #lbTabs .lb-tab i { width: 50px; height: 27px; display: grid; place-items: center; border-radius: 14px; font-size: 1.2rem; transition: background-color .18s ease, color .18s ease; }
            #lbTabs .lb-tab span { font-size: .64rem; line-height: 1.2; letter-spacing: 0; }
            #lbTabs .lb-tab.active i { background: var(--lb-tint); color: var(--lb-or); }
            #lbTabs .lb-tab.active span { color: #A34508; font-weight: 700; }
            #lbTabs .lb-tab-badge { position: absolute; top: 0; left: calc(50% + 7px); right: auto; font-size: .6rem; padding: 2px 5px; }
        }
    
        /* =====================================================================
           v49 – HỘP THOẠI XÁC NHẬN (lbDlg) + KHỐI "NHẬP HÀNG LOẠT" + THANH CÔNG CỤ DANH SÁCH
           ===================================================================== */
        .lbd-ov { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(27, 31, 36, .52); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; }
        .lbd-ov.in { opacity: 1; }
        .lbd { --t: #BF550A; --tbg: #FFF1E3; --tbd: #F6D7B8; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 22px; box-shadow: 0 28px 70px rgba(27, 31, 36, .38), 0 0 0 1px rgba(27, 31, 36, .04); color: #1B1F24; transform: translateY(14px) scale(.97); transition: transform .22s cubic-bezier(.2, .8, .2, 1); outline: none; }
        .lbd-ov.in .lbd { transform: none; }
        .lbd.t-warn { --t: #B86E00; --tbg: #FFF5DB; --tbd: #F3DDA0; }
        .lbd.t-danger { --t: #C0392B; --tbg: #FDECEA; --tbd: #F3C2BD; }
        .lbd.t-success { --t: #0F7F5A; --tbg: #E3F4EC; --tbd: #B5E0CC; }
        .lbd-bar { height: 5px; flex: none; background: linear-gradient(90deg, var(--t), color-mix(in srgb, var(--t) 55%, #fff)); }
        .lbd-hd { display: flex; align-items: center; gap: 14px; padding: 20px 22px 6px; flex: none; }
        .lbd-ic { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 1.45rem; background: var(--tbg); color: var(--t); box-shadow: inset 0 0 0 1px var(--tbd); }
        .lbd-tt { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: #1B1F24; }
        .lbd-kicker { display: block; margin-bottom: 2px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t); }
        .lbd-bd { padding: 8px 22px 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
        .lbd-lead { margin: 10px 0; font-size: .94rem; line-height: 1.55; color: #44505E; }
        .lbd-lead b { color: #1B1F24; }
        .lbd-facts { margin: 12px 0; border: 1px solid #EDE7DF; border-radius: 14px; background: #FBF9F6; overflow: hidden; }
        .lbd-f { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 14px; font-size: .9rem; }
        .lbd-f + .lbd-f { border-top: 1px dashed #E3DDD4; }
        .lbd-f > span { color: #6B7580; flex: none; }
        .lbd-f > b { text-align: right; font-weight: 700; color: #1B1F24; min-width: 0; overflow-wrap: anywhere; }
        .lbd-f > b.money { color: var(--t); font-size: 1.12rem; font-variant-numeric: tabular-nums; }
        .lbd-note { display: flex; gap: 10px; margin: 12px 0; padding: 11px 13px; border-radius: 13px; background: var(--tbg); border: 1px solid var(--tbd); font-size: .86rem; line-height: 1.5; color: #3F3326; }
        .lbd-note > i { flex: none; margin-top: 2px; color: var(--t); }
        .lbd-ask { margin: 14px 0 6px; font-size: .98rem; font-weight: 700; line-height: 1.4; color: #1B1F24; }
        .lbd-field { margin: 12px 0 4px; }
        .lbd-field > label { display: block; margin-bottom: 6px; font-size: .84rem; font-weight: 600; color: #44505E; }
        .lbd-field > input { box-sizing: border-box; display: block; width: 100%; max-width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; background-color: #fff; min-height: 48px; padding: 0 14px; border: 1.5px solid #D6D1C9; border-radius: 12px; background: #fff; font-size: 1rem; color: #1B1F24; }
        .lbd-field > input:focus { outline: none; border-color: var(--t); box-shadow: 0 0 0 4px var(--tbg); }
        .lbd-hint { margin-top: 6px; font-size: .78rem; color: #6B7580; }
        .lbd-ft { display: flex; flex-direction: row-reverse; gap: 10px; padding: 14px 22px 22px; flex: none; }
        .lbd-btn { flex: 1 1 0; min-height: 48px; padding: 8px 14px; border-radius: 13px; border: 1.5px solid transparent; font-size: .95rem; font-weight: 700; line-height: 1.25; cursor: pointer; transition: transform .08s ease, background .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
        .lbd-btn:active { transform: scale(.98); }
        .lbd-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--t) 40%, transparent); outline-offset: 2px; }
        .lbd-btn[disabled] { opacity: .45; cursor: not-allowed; }
        .lbd-ok { background: var(--t); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--t) 38%, transparent); }
        .lbd-ok:hover:not([disabled]) { filter: brightness(1.07); }
        .lbd-no { background: #fff; color: #44505E; border-color: #D6D1C9; }
        .lbd-no:hover { background: #F5F3EF; }
        @media (max-width: 576px) {
            .lbd-ov { align-items: flex-end; padding: 0; }
            .lbd { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
            .lbd::before { content: ''; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: #D9D3CA; flex: none; order: -1; }
            .lbd-bar { display: none; }
            .lbd-hd { padding: 12px 20px 4px; }
            .lbd-bd { padding: 8px 20px 4px; }
            .lbd-ft { flex-direction: column; padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
            .lbd-btn { flex: none; width: 100%; min-height: 50px; }
        }
        @media (prefers-reduced-motion: reduce) { .lbd-ov, .lbd { transition: none !important; } }

        /* ---- Tab Nhập liệu: khối "Nhập hàng loạt" ---- */
        .lbx-bulk { margin: 0 0 12px; padding: 14px; border: 1px solid #F0DCC4; border-radius: 18px; background: linear-gradient(180deg, #FFF8F0, #FFFDFA); box-shadow: 0 1px 2px rgba(27, 31, 36, .04); }
        .lbx-hd { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
        .lbx-hd > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #FFF1E3; color: #BF550A; font-size: 1rem; box-shadow: inset 0 0 0 1px #F6D7B8; }
        .lbx-hd b { display: block; font-size: .98rem; line-height: 1.2; color: #1B1F24; }
        .lbx-hd span { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.35; color: #6B7580; }
        .lbx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .lbx-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0; padding: 10px 12px; border: 1px solid #E8E0D5; border-radius: 14px; background: #fff; color: #1B1F24; text-align: left; cursor: pointer; font: inherit; transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; -webkit-tap-highlight-color: transparent; }
        .lbx-card:hover { border-color: #E2B88A; box-shadow: 0 4px 14px rgba(191, 85, 10, .1); }
        .lbx-card:active { transform: scale(.985); }
        .lbx-card:focus-within, .lbx-card:focus-visible { outline: 3px solid rgba(191, 85, 10, .3); outline-offset: 2px; }
        .lbx-card[disabled] { opacity: .6; pointer-events: none; }
        .lbx-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #FFF1E3; color: #BF550A; font-size: 1.15rem; }
        .lbx-card.is-xl .lbx-ic { background: #E3F4EC; color: #0F7F5A; }
        .lbx-card.is-tpl .lbx-ic { background: #EEF2F6; color: #44505E; }
        .lbx-tx { min-width: 0; display: block; }
        .lbx-tx b { display: block; font-size: .92rem; line-height: 1.25; font-weight: 700; }
        .lbx-tx small { display: block; margin-top: 2px; font-size: .74rem; line-height: 1.3; color: #6B7580; overflow-wrap: anywhere; }
        .lbx-card.is-main { grid-column: 1 / -1; min-height: 72px; border: 0; background: linear-gradient(135deg, #D9742A, #B3500B); color: #fff; box-shadow: 0 8px 20px rgba(179, 80, 11, .28); }
        .lbx-card.is-main:hover { box-shadow: 0 10px 24px rgba(179, 80, 11, .36); filter: brightness(1.04); }
        .lbx-card.is-main .lbx-ic { background: rgba(255, 255, 255, .2); color: #fff; width: 46px; height: 46px; font-size: 1.3rem; }
        .lbx-card.is-main .lbx-tx b { font-size: 1rem; }
        .lbx-card.is-main .lbx-tx small { color: rgba(255, 255, 255, .88); font-size: .8rem; }
        .lbx-card.is-main::after { content: '\F285'; font-family: 'bootstrap-icons'; margin-left: auto; font-size: 1.1rem; opacity: .85; }
        .lbx-card.has-file { border-color: #8FD0B3; background: #F2FBF6; }
        .lbx-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
        @media (min-width: 768px) {
            .lbx-grid { grid-template-columns: 1.4fr 1fr 1fr; }
            .lbx-card.is-main { grid-column: auto; }
        }

        /* ---- Tab Danh sách: thanh công cụ còn 4 nút, luôn hiện đủ ---- */
        .ld-toolbar > .btn-secondary { background: #fff; color: #44505E; border-color: #D6D1C9; }
        @media (max-width: 576px) {
            .ld-toolbar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
            .ld-toolbar > * { order: 0 !important; grid-column: auto !important; max-width: none !important; }
            .ld-toolbar > .adv-bg { display: flex; }
            .ld-toolbar .btn { min-height: 46px; white-space: normal; }
        }
        @media (max-width: 576px) {
            .lbx-bulk { padding: 12px; border-radius: 16px; }
            .lbx-hd { margin-bottom: 10px; }
            .lbx-grid { gap: 8px; }
            .lbx-card { gap: 9px; padding: 9px 10px; min-height: 58px; }
            .lbx-ic { width: 34px; height: 34px; font-size: 1.05rem; border-radius: 10px; }
            .lbx-tx b { font-size: .86rem; white-space: nowrap; }
            .lbx-tx small { font-size: .7rem; }
            .lbx-card.is-main { min-height: 66px; }
            .lbx-card.is-main .lbx-ic { width: 42px; height: 42px; }
        }

        /* v50 – nút thao tác phiếu ứng: trên điện thoại hiện chú thích nhỏ dưới icon (không cần rê chuột) */
        .adv-ab .adv-cap { display: none; }
        .adv-ab.adv-ab-t .adv-cap { display: inline; }
        @media (max-width: 576px) {
            .adv-ab { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 50px; padding: 5px 3px !important; line-height: 1.1; vertical-align: top; }
            .adv-ab > i { font-size: 1.05rem; line-height: 1; }
            .adv-ab .adv-cap, .adv-ab.adv-ab-t .adv-cap { display: block; font-size: .6rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
        }
        /* v52 – thống kê chuyển khoản */
        .adv-stat-ckwait { border-left-color: #D9480F; }
        .adv-stat-cksent { border-left-color: #0F8A78; }
        .adv-stat-ckwait .adv-stat-l::before { background: #D9480F; }
        .adv-stat-cksent .adv-stat-l::before { background: #0F8A78; }

/* ===================== v73 – Thanh công cụ danh sách: gọn, cân đối, chuyên nghiệp ===================== */
#tableCountInfo { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-style: normal !important; font-size: .86rem; color: #5f5548 !important; margin: 4px 2px 10px !important; }
#tableCountInfo #lsCountText { font-weight: 600; color: #3d342b; }
#tableCountInfo #lsCountText::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--lb-or, #e7770e); vertical-align: 1px; }
#tableCountInfo .ls-hint { font-weight: 400; color: #8a7a6a; }
#tableCountInfo #lsShowAllBtn { margin: 0 !important; padding: 3px 14px !important; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.5; background: #fff; }
#tableCountInfo .lb-sync { flex: 0 1 auto; margin: 0 0 0 auto !important; padding: 0; font-size: .76rem; }
#stkCtlGroup .dropdown-header { font-size: .72rem; font-weight: 600; color: #8a7a6a; padding: 4px 10px 6px; }
#stkModeTxt .stk-v { font-weight: 600; }
@media (max-width: 576px) {
    .ld-toolbar { gap: 10px !important; margin-bottom: 12px !important; }
    .ld-toolbar > .btn, .ld-toolbar > .adv-bg > .btn:first-child, .ld-toolbar > #stkCtlGroup .btn:not(.adv-i) {
        min-height: 50px !important; padding: 0 12px; border-radius: 14px !important; font-size: .95rem; font-weight: 600; letter-spacing: 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap !important;
    }
    .ld-toolbar .btn i { font-size: 1.2rem; line-height: 1; }
    .ld-toolbar .adv-bg > .adv-i { display: none !important; }
    .ld-toolbar > .btn-secondary, .ld-toolbar .btn-outline-primary:not(.adv-i), .ld-toolbar .btn-outline-dark:not(.adv-i) { background: #fff; color: #4A4036; border: 1px solid #E6DCCD; box-shadow: 0 1px 2px rgba(80, 50, 20, .07); }
    .ld-toolbar > .btn-secondary i, .ld-toolbar .btn-outline-primary:not(.adv-i) i, .ld-toolbar .btn-outline-dark:not(.adv-i) i { color: #BF550A; }
    .ld-toolbar .btn:active { background: #FFF1E3 !important; }
    .ld-toolbar > .adv-bg:first-child > .btn-primary:first-child { box-shadow: 0 6px 14px rgba(191, 85, 10, .28); }
    #bkModeBtn.active, #bkModeBtn.active:active { background: #BF550A !important; border-color: #BF550A; color: #fff; }
    #bkModeBtn.active i { color: #fff; }
    #stkEyeBtn.active, #stkModeBtn.on { background: #FFF1E3; border-color: #EFC79D; color: #8E3C06; }
    #stkEyeBtn.active i, #stkModeBtn.on i { color: #8E3C06; }
    .ld-toolbar > #stkCtlGroup { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
    #stkCtlGroup > .btn-group { display: flex; width: 100%; }
    #stkCtlGroup > .btn-group > .btn { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
    #stkModeTxt { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
    #stkModeTxt .stk-c { display: none; }
    #stkModeTxt .stk-v { font-size: .76rem; font-weight: 500; opacity: .85; }
    #stkModeBtn.dropdown-toggle::after { margin-left: 2px; }
    .ld-opt, #tableCountInfo .ls-hint { display: none; }
    #tableCountInfo #lsCountText { flex: 1 1 100%; }
    #tableCountInfo #lsShowAllBtn { margin: 0 !important; }
    #ldCardBox:not(.ld-fs) .sbox-bar { display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: 8px; align-items: stretch; margin-bottom: 10px; }
    #ldCardBox:not(.ld-fs) .sbox-bar .sbox-info { grid-column: 1 / 3; align-self: center; margin: 0; font-size: .8rem; color: #8a7a6a; }
    #ldCardBox:not(.ld-fs) .sbox-bar #ldDensityBtn { grid-column: 3; }
    #ldCardBox:not(.ld-fs) .sbox-bar .btn { min-height: 42px; padding: 0 8px; border-radius: 12px; font-size: .86rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
    #ldCardBox:not(.ld-fs) .sbox-bar .btn:not(.btn-orange) { background: #fff; color: #4A4036; border: 1px solid #E6DCCD; }
    #ldCardBox:not(.ld-fs) .sbox-bar .ld-fs-only { display: none !important; }
}
/* ===================== v74 – Tinh chỉnh giao diện tab Danh sách =====================
   Mục tiêu: phân cấp rõ (nút chính > nút phụ > tiện ích), thoáng hơn, đồng nhất bo góc – độ cao – màu,
   gom dòng đếm + trạng thái đồng bộ về một hàng. Chỉ thêm CSS (+ vài chữ nhãn), không đổi logic. */
:root { --v74-field: #FBF9F6; --v74-line: #E9E0D3; --v74-ink2: #4A4036; }

/* ---------- Header: ô tên có avatar ---------- */
.lb-hdr-user:not(:empty)::before {
    content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; border-radius: 50%;
    background: var(--lb-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23BF550A' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='5.6' r='2.6'/%3E%3Cpath d='M3 13.4c.4-2.6 2.5-4 5-4s4.6 1.4 5 4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* ---------- Thẻ bộ lọc ---------- */
.card.lb-filter { background: #fff; border: 1px solid var(--lb-line) !important; border-radius: 18px !important; box-shadow: 0 1px 2px rgba(31, 27, 22, .04), 0 10px 28px -14px rgba(31, 27, 22, .16) !important; }
.lb-filter-head #statsDisplay:empty { display: none; }
.lb-filter-head h6.text-primary { color: var(--lb-ink) !important; display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; letter-spacing: -.005em; }
.lb-filter-head h6 > i.bi-funnel { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0 !important; border-radius: 10px; background: var(--lb-tint); color: var(--lb-or); font-size: .95rem; }
.lb-fgrid .form-control, .lb-fgrid .form-select,
.lb-fgrid .select2-container--default .select2-selection--single { background-color: var(--v74-field); border: 1px solid var(--v74-line); }
.lb-fgrid .form-control::placeholder { color: #A39688; }
.lb-fgrid .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #A39688; }
.lb-fgrid .form-control:focus, .lb-fgrid .form-select:focus,
.lb-fgrid .select2-container--default.select2-container--focus .select2-selection--single,
.lb-fgrid .select2-container--default.select2-container--open .select2-selection--single { background-color: #fff; border-color: var(--lb-or); box-shadow: 0 0 0 .22rem rgba(191, 85, 10, .14); }
.lb-fgrid #filterHoten, .lb-fgrid #filterSDT { padding-left: 2.2rem !important; background-repeat: no-repeat; background-position: .8rem 50%; background-size: 16px 16px; }
.lb-fgrid #filterHoten { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A8998A' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='5' r='2.8'/%3E%3Cpath d='M2.6 14c.4-3 2.6-4.6 5.4-4.6s5 1.6 5.4 4.6'/%3E%3C/svg%3E"); }
.lb-fgrid #filterSDT { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A8998A' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='4.4' y='1.2' width='7.2' height='13.6' rx='1.8'/%3E%3Cpath d='M7 12.6h2'/%3E%3C/svg%3E"); }
.lb-factions { border-top: 1px solid #F2ECE3; }
#stkModeMenu { border: 1px solid var(--lb-line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(31, 27, 22, .18); }
#stkModeMenu .dropdown-item { border-radius: 10px; padding: 10px 12px; }

@media (max-width: 576px) {
    /* --- Bộ lọc --- */
    .card.lb-filter { --lb-h: 46px; --lb-r: 12px; --lb-fs: 1rem; padding: 14px 12px !important; }
    .lb-filter-head { flex-wrap: nowrap; margin-bottom: 12px; }
    .lb-filter-head h6.text-primary { min-width: 0; white-space: nowrap; }
    .lb-filter-head .lb-f-toggle { flex: 0 0 auto; height: 36px; padding: 0 12px; font-size: .82rem; }
    #filterSection.lb-f-open .lb-f-toggle { background: var(--lb-tint); border-color: var(--lb-tint-line); }
    .lb-fgrid { gap: 10px; }
    .lb-factions { margin-top: 14px; padding-top: 14px; }
    .lb-act-main { gap: 10px; }
    .lb-act-main .btn { height: var(--lb-h); border-radius: var(--lb-r); font-size: .95rem; font-weight: 600; gap: 8px; }
    .lb-act-main .btn-orange { background-image: linear-gradient(180deg, #CB5E0F 0%, #B24C07 100%); border-color: #A94707; color: #fff; box-shadow: 0 8px 16px -6px rgba(191, 85, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .2); }
    .lb-act-main .btn-outline-secondary { background: #fff; border-color: var(--v74-line); color: var(--v74-ink2); }
    #filterSection.lb-f-open .lb-act-main > .btn:nth-child(n+3) { height: 42px; font-size: .86rem; }

    /* --- Thanh công cụ: nút chính (Xuất / In) lớn, nút phụ nhỏ & nhạt hơn --- */
    body .ld-toolbar { gap: 8px !important; margin-bottom: 10px !important; }
    body .ld-toolbar > .adv-bg:first-child > .btn:first-child,
    body .ld-toolbar > #printButton { min-height: 54px !important; border-radius: 16px !important; font-size: .98rem !important; font-weight: 700 !important; }
    body .ld-toolbar > .adv-bg:first-child > .btn-primary:first-child { background-image: linear-gradient(180deg, #CB5E0F 0%, #B24C07 100%); box-shadow: 0 10px 20px -8px rgba(191, 85, 10, .6), inset 0 1px 0 rgba(255, 255, 255, .2); }
    body .ld-toolbar > #printButton { background: var(--lb-tint) !important; border: 1px solid var(--lb-tint-line) !important; color: #8E3C06 !important; box-shadow: none !important; }
    body .ld-toolbar > #printButton i { color: var(--lb-or) !important; }
    body .ld-toolbar > .adv-bg:not(:first-child) > .btn:first-child,
    body .ld-toolbar > #stkCtlGroup .btn:not(.adv-i) { min-height: 44px !important; padding: 0 10px; border-radius: 12px !important; font-size: .88rem !important; font-weight: 600 !important; gap: 8px !important; background: var(--v74-field); border: 1px solid #EDE5D9; color: var(--v74-ink2); box-shadow: none; }
    body .ld-toolbar .btn i { font-size: 1.15rem; }
    body .ld-toolbar > .adv-bg:not(:first-child) > .btn:first-child i,
    body .ld-toolbar > #stkCtlGroup .btn i { font-size: 1.05rem; }
    body .ld-toolbar #stkCtlGroup #stkEyeBtn.active, body .ld-toolbar #stkCtlGroup #stkModeBtn.on { background: var(--lb-tint); border-color: #EFC79D; color: #8E3C06; }
    body .ld-toolbar #stkModeTxt .stk-t { font-size: .88rem; font-weight: 600; }
    body .ld-toolbar #stkModeTxt .stk-v { font-size: .68rem; font-weight: 500; opacity: .8; }

    /* --- Dòng đếm + trạng thái đồng bộ: gọn về một hàng --- */
    #tableCountInfo { margin: 2px 2px 8px !important; gap: 4px 10px; }
    #tableCountInfo #lsCountText { flex: 0 1 auto !important; font-size: .9rem; }
    #tableCountInfo #lsCountText b { color: var(--lb-or); font-size: 1.05em; }
    #tableCountInfo .lb-sync { margin-left: auto !important; padding: 2px 10px; border-radius: 999px; background: #EAF7EE; font-size: .72rem; font-weight: 600; }
    #tableCountInfo .lb-sync.lb-sync-busy { background: #F1EEE9; }
    #tableCountInfo .lb-sync.lb-sync-err { background: #FDECEA; }

    /* --- Thanh điều khiển danh sách thẻ --- */
    #ldCardBox:not(.ld-fs) .sbox-bar { gap: 8px; margin-bottom: 8px; }
    #ldCardBox:not(.ld-fs) .sbox-bar .sbox-info { font-size: .78rem; }
    #ldCardBox:not(.ld-fs) .sbox-bar #ldDensityBtn { justify-self: end; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: .8rem; background: transparent; border-color: var(--v74-line); color: var(--lb-mute); }
    #ldCardBox:not(.ld-fs) .sbox-bar .btn:not(.btn-orange):not(#ldDensityBtn) { background: var(--v74-field); border-color: #EDE5D9; }
    #ldCardBox:not(.ld-fs) .sbox-bar .btn-orange { box-shadow: 0 8px 16px -8px rgba(191, 85, 10, .55); }
}

/* ===== Kiểm tra STK khi ứng lương: banner + ô "Nhận tiền" (hàng loạt) + chip (phiếu lẻ) ===== */
#baModal .ba-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid #ffe08a; background: #fff8e1; border-radius: 12px; font-size: .86rem; }
#baModal .ba-banner[hidden] { display: none; }
#baModal .ba-banner > i { color: #f08c00; font-size: 1.1rem; }
#baModal .ba-banner-txt { flex: 1 1 240px; min-width: 0; line-height: 1.4; }
#baModal .ba-banner-act { display: flex; flex-wrap: wrap; gap: 6px; }
#baModal .ba-bank { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: .8rem; line-height: 1.3; }
#baModal .ba-bank.ok { color: #146c43; }
#baModal .ba-bank.ok > span { color: #212529; overflow-wrap: anywhere; }
#baModal .ba-bank.cash { color: #5c6770; }
#baModal .ba-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #fff3cd; color: #7a5200; font-weight: 600; font-size: .75rem; white-space: nowrap; }
#baModal .ba-bank .ba-fix { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem; }
#baModal .ba-bank .ba-cash, #baModal .ba-bank .ba-cash-undo { font-size: .75rem; text-decoration: none; }
.bank-state { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.bank-state.ok { background: #d1e7dd; color: #0a3622; }
.bank-state.miss { background: #fff3cd; color: #664d03; }
.bank-box.bank-need { animation: bankNeed 1.3s ease 1; }
@keyframes bankNeed { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } 30% { box-shadow: 0 0 0 .25rem rgba(255, 193, 7, .55); } }
@media (prefers-reduced-motion: reduce) { .bank-box.bank-need { animation: none; } }

/* =====================================================================
 * MÀN HÌNH ĐĂNG NHẬP – nền gradient động (KHÔNG dùng ảnh)
 * - Nền cam đất nhiều lớp (giữ tông cũ) + "cực quang" mềm trôi chậm + vệt sáng + hạt mịn.
 * - Chỉ dùng transform (GPU) nên nhẹ; tự tắt chuyển động nếu máy bật "giảm chuyển động".
 * - Chỉ đổi hình thức, không đụng logic đăng nhập. Không cần thư mục img cho màn hình này.
 * ===================================================================== */
#passwordOverlay {
    background:
        radial-gradient(1000px 560px at 12% 6%, rgba(255, 196, 140, .60) 0%, rgba(255, 196, 140, 0) 62%),
        radial-gradient(900px 620px at 94% 96%, rgba(110, 38, 0, .72) 0%, rgba(110, 38, 0, 0) 64%),
        linear-gradient(135deg, #F58A2C 0%, #DC6512 34%, #B04A07 68%, #6A2703 100%) !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: hidden; overflow-y: auto;
}
/* cực quang: các vầng sáng mềm trôi chậm (position:fixed để không tạo thanh cuộn) */
#passwordOverlay::before {
    content: ''; position: fixed; left: -20%; top: -20%; width: 140%; height: 140%; z-index: 0; pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(closest-side, rgba(255, 224, 178, .58), rgba(255, 224, 178, 0)),
        radial-gradient(closest-side, rgba(255, 128, 38, .52), rgba(255, 128, 38, 0)),
        radial-gradient(closest-side, rgba(255, 244, 222, .34), rgba(255, 244, 222, 0));
    background-repeat: no-repeat;
    background-size: 100% 100%, 56% 56%, 50% 50%, 38% 38%;
    background-position: 0 0, 20% 24%, 80% 76%, 60% 8%;
    animation: lgAurora 22s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes lgAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(4%, 3%, 0) scale(1.10) rotate(5deg); }
    100% { transform: translate3d(-2%, 5%, 0) scale(1.04) rotate(-4deg); }
}

/* hạt mịn rất nhẹ cho chiều sâu */
#passwordOverlay::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---- HIỆU ỨNG ĐỘNG ĐĂNG NHẬP: mạng lưới nhân sự + dòng tiền ứng lương + biểu đồ tăng trưởng (vẽ bằng canvas #lgFx, xem index.html) ---- */
#lgFx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
@property --lgA { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* viền ánh sáng chạy quanh thẻ đăng nhập */
#passwordOverlay > .card::after {
    content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--lgA), rgba(255, 200, 130, 0) 0%, rgba(255, 200, 130, 0) 58%, rgba(255, 196, 120, .95) 80%, #fff 88%, rgba(255, 200, 130, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: lgSpin 7s linear infinite;
}
@keyframes lgSpin { to { --lgA: 360deg; } }
/* dòng chữ nhỏ phía dưới (chỉ máy tính) */
.lg-brand { display: none; }
@media (min-width: 880px) and (min-height: 640px) {
    .lg-brand {
        display: block; position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(20px, 5vh, 48px); text-align: center;
        color: rgba(255, 255, 255, .92); font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
        text-shadow: 0 2px 14px rgba(35, 12, 0, .5); pointer-events: none;
    }
    .lg-brand::before { content: ''; display: block; width: 34px; height: 3px; margin: 0 auto 12px; border-radius: 3px; background: #FFB878; }
}
/* thẻ đăng nhập luôn ở giữa, mọi cỡ màn hình */
#passwordOverlay > .card {
    position: relative; z-index: 1; flex-shrink: 0; margin: auto !important;
    width: min(400px, calc(100% - 24px)); border-radius: 26px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 34px 90px rgba(60, 20, 0, .45), 0 0 0 1px rgba(255, 255, 255, .35), 0 0 80px rgba(255, 170, 90, .25) !important;
    animation: lgUp .6s cubic-bezier(.2, .7, .2, 1) backwards;
}
@keyframes lgUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    #passwordOverlay > .card, #passwordOverlay::before, #passwordOverlay > .card::after { animation: none; }
}