:root {
            --primary-color: #0056b3;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --dark-color: #343a40;
            --light-bg: #f8f9fa;
            --border-color: #ced4da;
            --text-color: #333;
            --tab-bg: #e2e8f0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #eef1f4;
            padding: 20px;
            color: var(--text-color);
            margin: 0;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            background: transparent;
        }

        /* ======== DASHBOARD THỐNG KÊ ======== */
        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }

        .stat-card {
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
        }

        .stat-card.revenue::before {
            background: var(--primary-color);
        }

        .stat-card.profit::before {
            background: var(--success-color);
        }

        .stat-card.orders::before {
            background: var(--warning-color);
        }

        .stat-title {
            font-size: 14px;
            font-weight: bold;
            color: #6c757d;
            text-transform: uppercase;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
            text-align: center;
        }

        .stat-value {
            font-size: 26px;
            font-weight: 900;
        }

        .stat-card.revenue .stat-value {
            color: var(--primary-color);
        }

        .stat-card.profit .stat-value {
            color: var(--success-color);
        }

        .stat-card.orders .stat-value {
            color: #d39e00;
        }

        /* Cảnh báo kho */
        .ton-kho-thap {
            color: var(--danger-color) !important;
            font-weight: bold;
            background: #fdf2f2 !important;
            border-color: #fad2d2 !important;
        }

        /* ======== TAB HỆ THỐNG ======== */
        .tabs-wrapper {
            display: flex;
            align-items: flex-end;
            margin-bottom: -1px;
            position: relative;
            z-index: 10;
            gap: 4px;
            overflow-x: auto;
            padding: 0 10px;
        }

        .tabs-wrapper::-webkit-scrollbar {
            height: 6px;
        }

        .tabs-wrapper::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .tab-item {
            background: var(--tab-bg);
            color: #64748b;
            padding: 12px 20px;
            border-radius: 10px 10px 0 0;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: 0.2s;
            border: 1px solid transparent;
            border-bottom: none;
            white-space: nowrap;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tab-item:hover {
            background: #cbd5e1;
            color: var(--dark-color);
        }

        .tab-item.active {
            background: var(--light-bg);
            color: var(--primary-color);
            border-color: var(--border-color);
            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.03);
        }

        .tab-close {
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            font-size: 16px;
            padding: 0 4px;
            line-height: 1;
            border-radius: 50%;
            opacity: 0.6;
            transition: 0.2s;
        }

        .tab-close:hover {
            background: rgba(220, 53, 69, 0.1);
            color: var(--danger-color);
            opacity: 1;
        }

        /* Group lịch sử giá */
        .input-history-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .select-gia-cu,
        .select-gia-von {
            font-size: 11px;
            padding: 2px;
            border-radius: 4px;
            border: 1px solid #ddd;
            background: #fdfdfd;
        }

        /* ======== CẤU HÌNH TỐI ƯU BẢN IN (Ctrl+P & PDF) ======== */
        @media print {

            /* 1. Ẩn cột Giá Vốn mặc định */
            .col-gia-von {
                display: none !important;
            }

            /* 2. BẮT BUỘC ẨN cụm text tóm tắt mobile hiển thị rác ở cột Hạng mục */
            .summary-info {
                display: none !important;
            }

            /* 3. DỌN RÁC: Ẩn đi hoàn toàn các nút thao tác dư thừa & bảng điều khiển */
            .btn-add-row,
            .btn-remove-row,
            .btn-add-tab,
            .tab-close,
            .select-gia-cu,
            .select-gia-von,
            .dashboard-controls,
            .dashboard-stats,
            .tabs-wrapper {
                display: none !important;
            }

            /* 4. Xóa các viền đứt (dashed) của thông tin Khách hàng để giống y hệt Word */
            .input-inline {
                border-bottom: none !important;
                background: transparent !important;
            }

            /* Đảm bảo các ô nhập dữ liệu (như số lượng, giá, ghi chú) không bị hiện viền mờ */
            input.cell-input,
            input.so-luong {
                border: none !important;
                background: transparent !important;
            }
        }

        /* CLASS DÙNG CHUNG CHO XUẤT CÁC FILE (PDF/Ảnh) GIỐNG Y BẢN IN */
        .export-mode .col-gia-von,
        .export-mode .summary-info,
        .export-mode .btn-add-row,
        .export-mode .btn-remove-row,
        .export-mode .btn-add-tab,
        .export-mode .tab-close,
        .export-mode .select-gia-cu,
        .export-mode .select-gia-von,
        .export-mode .dashboard-controls,
        .export-mode .dashboard-stats,
        .export-mode .tabs-wrapper {
            display: none !important;
        }

        .export-mode .input-inline {
            border-bottom: none !important;
            background: transparent !important;
        }

        .export-mode input.cell-input,
        .export-mode input.so-luong {
            border: none !important;
            background: transparent !important;
        }

        .btn-add-tab {
            background: #cbd5e1;
            color: #475569;
            border: none;
            border-radius: 10px 10px 0 0;
            padding: 12px 18px;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            transition: 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-add-tab:hover {
            background: var(--success-color);
            color: white;
        }

        /* ======== KHUNG NỘI DUNG CHÍNH ======== */
        .main-content {
            background: #fff;
            padding: 25px 30px;
            border-radius: 0 12px 12px 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border-color);
        }

        /* ======== KHU VỰC ĐIỀU KHIỂN ======== */
        .dashboard-controls {
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 25px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .control-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .control-row.secondary {
            border-top: 1px dashed var(--border-color);
            padding-top: 15px;
            justify-content: flex-start;
            gap: 30px;
        }

        .btn-group-segmented {
            display: flex;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--primary-color);
        }

        .btn-segmented {
            padding: 10px 20px;
            border: none;
            background: #fff;
            color: var(--primary-color);
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
            font-size: 14px;
            outline: none;
        }

        .btn-segmented:not(:last-child) {
            border-right: 1px solid var(--primary-color);
        }

        .btn-segmented:hover {
            background: #e6f0fa;
        }

        .btn-segmented.active {
            background: var(--primary-color);
            color: #fff;
        }

        .btn-group.actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 9px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            color: white;
            transition: all 0.2s ease;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            outline: none;
        }

        .btn:active {
            transform: scale(0.96);
            box-shadow: none;
        }

        .btn-pc {
            background-color: #6f42c1;
        }

        .btn-pc:hover {
            background-color: #59339d;
        }

        .btn-save {
            background-color: var(--warning-color);
            color: #212529;
        }

        .btn-save:hover {
            background-color: #e0a800;
        }

        .btn-load {
            background-color: #6c757d;
        }

        .btn-load:hover {
            background-color: #5a6268;
        }

        .btn-excel {
            background-color: var(--success-color);
        }

        .btn-excel:hover {
            background-color: #218838;
        }

        .btn-print {
            background-color: var(--info-color);
        }

        .btn-print:hover {
            background-color: #138496;
        }

        .btn-reset {
            background-color: var(--danger-color);
        }

        .btn-reset:hover {
            background-color: #c82333;
        }

        .btn-setting {
            background-color: var(--dark-color);
        }

        .btn-setting:hover {
            background-color: #23272b;
        }

        .btn-refresh {
            background-color: var(--info-color);
        }

        .btn-refresh:hover {
            background-color: #138496;
        }

        .btn-chotdon {
            background-color: #fd7e14;
        }

        .btn-chotdon:hover {
            background-color: #e86e04;
        }

        .btn-lichsu {
            background-color: #20c997;
        }

        .btn-lichsu:hover {
            background-color: #1aa179;
        }

        .btn-giao-hang {
            background-color: #6f42c1;
        }

        .btn-giao-hang:hover {
            background-color: #59339d;
        }

        .control-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .control-item.flex-grow {
            flex-grow: 1;
            max-width: 400px;
        }

        .control-item label {
            font-size: 13px;
            font-weight: bold;
            color: #495057;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .control-item select {
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-weight: bold;
            color: var(--primary-color);
            cursor: pointer;
            outline: none;
            background: #fff;
            transition: 0.2s;
            font-family: inherit;
            font-size: 14px;
        }

        .control-item select:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, .1);
        }

        .flex-row {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .flex-row .btn {
            flex: 1;
        }

        /* ======== TIÊU ĐỀ & LOGO ======== */
        .header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            border-bottom: 3px solid var(--primary-color);
            padding-bottom: 20px;
            gap: 25px;
            position: relative;
        }

        .logo-shop {
            max-height: 90px;
            width: auto;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            object-fit: contain;
        }

        .title-shop-container {
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .title-shop-container h2 {
            color: var(--primary-color);
            margin: 0 0 5px 0;
            font-size: 28px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .info-shop {
            font-size: 15px;
            color: #555;
            line-height: 1.6;
            margin: 0;
        }

        .date-info {
            font-style: italic;
            color: #555;
            font-size: 14.5px;
            margin-top: 5px;
        }

        /* ======== THÔNG TIN KHÁCH HÀNG ======== */
        .customer-info {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 15px;
            font-weight: bold;
            align-items: flex-end;
            gap: 20px;
        }

        .customer-info-item {
            display: flex;
            align-items: baseline;
            flex: 1;
            min-width: 250px;
            white-space: nowrap;
        }

        .input-inline {
            border: none;
            border-bottom: 2px dashed #adb5bd;
            background: transparent;
            font-size: 16px;
            font-family: inherit;
            color: var(--primary-color);
            font-weight: bold;
            outline: none;
            padding: 4px 8px;
            margin-left: 8px;
            flex-grow: 1;
            transition: 0.2s;
        }

        .input-inline:focus {
            border-bottom-color: var(--primary-color);
            background: rgba(0, 86, 179, 0.03);
            border-radius: 4px 4px 0 0;
        }

        .input-inline::placeholder {
            color: #adb5bd;
            font-weight: normal;
            font-style: italic;
        }

        /* ======== BẢNG DỮ LIỆU ======== */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 14.5px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            background: #fff;
        }

        th,
        td {
            border: 1px solid #e1e4e8;
            padding: 12px 10px;
            text-align: center;
            vertical-align: middle;
        }

        th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 13px;
        }

        td:nth-child(2) {
            text-align: left;
            font-weight: bold;
            color: var(--primary-color);
        }

        input[type="text"].cell-input,
        input[type="number"].cell-input {
            width: 100%;
            padding: 8px;
            border: 1px solid transparent;
            border-radius: 4px;
            box-sizing: border-box;
            font-family: inherit;
            font-size: 14px;
            transition: 0.2s;
            outline: none;
            background: transparent;
            text-align: center;
        }

        td:nth-child(2) input.cell-input,
        td:nth-child(3) input.cell-input,
        td:nth-child(7) input.cell-input,
        td:nth-child(8) input.cell-input {
            text-align: left;
        }

        input[type="text"].cell-input:hover,
        input[type="number"].cell-input:hover {
            border-color: #e1e4e8;
            background: #f8f9fa;
        }

        input[type="text"].cell-input:focus,
        input[type="number"].cell-input:focus {
            border-color: #80bdff;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, .1);
        }

        input[type="number"].cell-input::-webkit-outer-spin-button,
        input[type="number"].cell-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input.so-luong {
            text-align: center;
            font-weight: bold;
            color: var(--danger-color);
            background-color: #fdf2f2;
            border-color: #fad2d2;
        }

        input.gia-nhap,
        input.gia-ban {
            font-weight: 600;
        }

        .total-row td {
            font-weight: bold;
            font-size: 16px;
            background-color: #f1f3f5 !important;
            color: #212529;
        }

        .total-text {
            color: var(--danger-color);
            background-color: transparent;
            border: none !important;
            font-weight: bold;
            font-size: 22px;
            width: 100%;
            text-align: center;
            outline: none;
        }

        .btn-add-row {
            background-color: var(--success-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 22px;
            height: 22px;
            font-weight: bold;
            font-size: 14px;
            float: right;
            margin-left: 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
            line-height: 1;
        }

        .btn-remove-row {
            background-color: var(--danger-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 22px;
            height: 22px;
            font-weight: bold;
            font-size: 14px;
            float: right;
            margin-left: 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
            line-height: 1;
        }

        .btn-add-row:hover {
            background-color: #218838;
            transform: scale(1.1);
        }

        .btn-remove-row:hover {
            background-color: #c82333;
            transform: scale(1.1);
        }

        /* ======== MODALS ======== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            animation: fadeIn 0.2s forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        .modal-content {
            background: #fff;
            padding: 0;
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            width: 90%;
            max-width: 450px;
            transform: translateY(-20px);
            animation: slideDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            overflow: hidden;
        }

        @keyframes slideDown {
            to {
                transform: translateY(0);
            }
        }

        .modal-header {
            background: var(--primary-color);
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .close-btn {
            font-size: 24px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            transition: 0.2s;
            font-weight: bold;
            line-height: 1;
        }

        .close-btn:hover {
            color: #fff;
        }

        .modal-body {
            padding: 25px 20px;
        }

        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 8px;
            color: #495057;
            font-size: 14px;
        }

        .modal-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 15px;
            outline: none;
            transition: border 0.2s;
            font-family: inherit;
            font-weight: bold;
            color: var(--primary-color);
        }

        .modal-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
        }

        .input-group {
            display: flex;
            align-items: center;
            position: relative;
        }

        .input-group input {
            padding-right: 35px;
        }

        .input-group .unit {
            position: absolute;
            right: 15px;
            color: #6c757d;
            font-weight: bold;
        }

        .modal-footer {
            padding: 15px 20px;
            background: var(--light-bg);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .dialog-icon {
            font-size: 45px;
            margin-bottom: 15px;
        }

        .dialog-icon.success {
            color: var(--success-color);
        }

        .dialog-icon.warning {
            color: var(--warning-color);
        }

        .dialog-icon.error {
            color: var(--danger-color);
        }

        /* ======== KHU VỰC IN TEM GIAO HÀNG ======== */
        #khu-vuc-nhan-giao {
            display: none;
        }

        .tem-giao-hang {
            border: 3px solid #000;
            padding: 25px;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            font-family: Arial, sans-serif;
            background: #fff;
            border-radius: 10px;
        }

        .tem-header {
            border-bottom: 2px dashed #000;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }

        .tem-title {
            font-size: 16px;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .tem-sender {
            font-size: 24px;
            font-weight: 900;
            margin-bottom: 5px;
        }

        .tem-receiver {
            font-size: 26px;
            font-weight: 900;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        /* ======== CSS IN ẤN ======== */
        @media print {
            @page {
                size: A4 portrait;
                margin: 12mm 15mm;
                /* Cân đối chiều ngang và dọc, chống lệch logo */
            }

            body {
                background: white;
                padding: 0;
                margin: 0;
            }

            .container {
                box-shadow: none;
                padding: 0;
                border: none;
                max-width: 100%;
                border-radius: 0;
            }

            /* Ẩn toàn bộ nút bấm, điều khiển, và biểu đồ doanh thu */
            .tabs-wrapper,
            .dashboard-controls,
            .dashboard-stats,
            .btn-add-row,
            .btn-remove-row,
            button {
                display: none !important;
            }

            .main-content {
                padding: 0;
                box-shadow: none;
                border: none;
                margin-top: 0 !important;
            }

            /* Đẩy tiêu đề lên trên, xóa khoảng trắng */
            .header {
                margin-top: 0 !important;
                padding-top: 0 !important;
                border-bottom: 3px solid #000 !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .title-shop-container h2 {
                color: #000 !important;
            }

            input[type="text"].cell-input,
            input[type="number"].cell-input {
                border: none !important;
                background: transparent !important;
                padding: 0;
                box-shadow: none !important;
                font-size: 13.5px !important;
                width: 100% !important;
                overflow: visible !important;
            }

            input::placeholder {
                color: transparent;
            }

            .input-inline {
                border-bottom: 1.5px dotted #000;
                color: #000;
                padding: 0;
                border-radius: 0;
                background: transparent !important;
            }

            .input-inline::placeholder {
                color: transparent;
            }

            th {
                background-color: #f2f2f2 !important;
                color: #000 !important;
                -webkit-print-color-adjust: exact;
                border-color: #000 !important;
                padding: 8px 4px !important;
                font-size: 12px !important;
            }

            td {
                border-color: #000 !important;
                padding: 8px 4px !important;
            }

            .total-row {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }

            .total-row td {
                background-color: #f2f2f2 !important;
                -webkit-print-color-adjust: exact;
            }

            tr.hide-on-print {
                display: none !important;
            }

            .total-text {
                color: #000 !important;
                font-size: 15px !important;
                overflow: visible !important;
                width: 100% !important;
            }

            .so-luong {
                color: #000 !important;
            }

            /* Khi in tem giao hàng, ẩn mọi thứ khác */
            body.dang-in-nhan .container,
            body.dang-in-nhan .modal-overlay {
                display: none !important;
            }

            body.dang-in-nhan #khu-vuc-nhan-giao {
                display: flex !important;
                align-items: center;
                justify-content: center;
                height: 100vh;
            }
        }

        /* ======== TỐI ƯU GIAO DIỆN ĐIỆN THOẠI (MOBILE RESPONSIVE) ======== */
        @media screen and (max-width: 768px) {
            body {
                padding: 6px;
                background-color: #f4f6f8;
            }

            .main-content {
                padding: 12px 8px;
                border-radius: 10px;
            }

            .header {
                flex-direction: column;
                text-align: center;
                gap: 5px;
                margin-bottom: 12px;
                padding-bottom: 12px;
            }

            .title-shop-container {
                text-align: center;
            }

            .title-shop-container h2 {
                font-size: 20px;
            }

            .info-shop {
                font-size: 13px;
                line-height: 1.4;
            }

            .date-info {
                font-size: 13px;
            }

            .customer-info {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
                margin-bottom: 15px;
            }

            .customer-info-item {
                flex-direction: row;
                align-items: center;
                width: 100%;
                white-space: nowrap;
                margin-bottom: 0;
            }

            .input-inline {
                margin-left: 8px;
                margin-top: 0;
                width: auto;
                flex-grow: 1;
                font-size: 14px;
            }

            /* Dashboard stats dạng cuộn ngang tối ưu không gian */
            .dashboard-stats {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 10px;
                padding-bottom: 8px;
                margin-bottom: 12px;
            }

            .dashboard-stats::-webkit-scrollbar {
                height: 4px;
            }

            .dashboard-stats::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border-radius: 4px;
            }

            .stat-card {
                flex: 0 0 85%;
                scroll-snap-align: center;
                padding: 12px 10px;
                margin: 0;
            }

            .dashboard-controls {
                padding: 10px;
                margin-bottom: 15px;
                gap: 10px;
            }

            .btn-group-segmented {
                flex-direction: row;
                width: 100%;
            }

            .btn-segmented {
                flex: 1;
                padding: 8px 5px;
                font-size: 13px;
            }

            .btn-segmented:not(:last-child) {
                border-right: 1px solid var(--primary-color);
                border-bottom: none;
            }

            /* Thu gọn các nút phụ thành màn hình Grid 2 cột */
            .btn-group.actions {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                width: 100%;
            }

            .btn {
                padding: 10px 5px;
                font-size: 12px;
                justify-content: center;
                width: 100%;
            }

            .control-row.secondary {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
                padding-top: 10px;
            }

            .control-item select {
                padding: 8px;
                font-size: 13px;
            }

            #vung-in {
                overflow-x: hidden;
            }

            table,
            thead,
            tbody,
            th,
            td,
            tr {
                display: block;
                width: 100%;
                box-sizing: border-box;
            }

            thead tr {
                display: none !important;
            }

            /* Căn lề padding bảng linh kiện cho gọn */
            tbody tr:not(.total-row) {
                border: 1px solid var(--border-color);
                border-radius: 8px;
                margin-bottom: 12px;
                padding: 6px 8px;
                background: #fff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                position: relative;
            }

            tbody tr:not(.total-row) td {
                display: flex !important;
                flex-wrap: nowrap !important;
                justify-content: space-between !important;
                align-items: center !important;
                width: 100% !important;
                padding: 6px 0 !important;
                box-sizing: border-box !important;
                border: none !important;
                border-bottom: 1px dashed #eee !important;
            }

            tbody td:last-child {
                border-bottom: none !important;
            }

            /* ========= BẢNG CHÍNH (BÁO GIÁ) - ACCORDION MOBILE ========= */
            #bang-linh-kien td:nth-of-type(1) {
                display: none;
            }

            #bang-linh-kien td:nth-of-type(2) {
                display: flex !important;
                justify-content: space-between;
                align-items: center;
                gap: 8px;
                flex-wrap: nowrap;
                position: relative;
                text-align: left;
                font-size: 15px;
                font-weight: bold;
                background: #f1f5f9;
                border-radius: 8px;
                padding: 12px 75px 12px 15px !important;
                /* Dành khoảng trống an toàn cho nút bấm */
                margin: -6px -8px 0 -8px;
                border-bottom: 2px solid var(--primary-color);
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            }

            .summary-info {
                display: block !important;
                flex: 1;
                text-align: right;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 13.5px;
            }

            #bang-linh-kien td:nth-of-type(2)::after {
                content: "▼";
                position: absolute;
                right: 48px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
                color: #64748b;
                transition: transform 0.3s ease;
                pointer-events: none;
            }

            #bang-linh-kien tr.expanded td:nth-of-type(2) {
                border-radius: 8px 8px 0 0;
                margin-bottom: 8px;
                background: #e0e7ff;
            }

            #bang-linh-kien tr.expanded td:nth-of-type(2)::after {
                transform: translateY(-50%) rotate(180deg);
                color: var(--primary-color);
            }

            #bang-linh-kien tbody tr:not(.total-row) td:nth-of-type(3),
            #bang-linh-kien tbody tr:not(.total-row) td:nth-of-type(4),
            #bang-linh-kien tbody tr:not(.total-row) td:nth-of-type(5),
            #bang-linh-kien tbody tr:not(.total-row) td:nth-of-type(6),
            #bang-linh-kien tbody tr:not(.total-row) td:nth-of-type(7),
            #bang-linh-kien tbody tr:not(.total-row) td:nth-of-type(8) {
                display: none !important;
            }

            #bang-linh-kien tbody tr.expanded:not(.total-row) td:nth-of-type(3),
            #bang-linh-kien tbody tr.expanded:not(.total-row) td:nth-of-type(4),
            #bang-linh-kien tbody tr.expanded:not(.total-row) td:nth-of-type(5),
            #bang-linh-kien tbody tr.expanded:not(.total-row) td:nth-of-type(6),
            #bang-linh-kien tbody tr.expanded:not(.total-row) td:nth-of-type(7),
            #bang-linh-kien tbody tr.expanded:not(.total-row) td:nth-of-type(8) {
                display: flex !important;
                animation: slideDownFade 0.3s ease forwards;
            }

            @keyframes slideDownFade {
                from {
                    opacity: 0;
                    transform: translateY(-5px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* CSS Tóm tắt thẻ Accordion trên Mobile */
            . {
                display: flex !important;
                flex-grow: 1;
                justify-content: space-between;
                align-items: center;
                overflow: hidden;
                margin-left: 6px;
                padding-right: 25px;
                /* Tránh đè mũi tên */
                pointer-events: none;
            }

            .summary-name {
                color: #475569;
                font-weight: 500;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .summary-price {
                margin-left: auto;
                color: var(--danger-color);
                font-weight: 800;
                font-size: 14.5px;
                white-space: nowrap;
                padding-left: 8px;
            }

            .summary-empty {
                font-weight: normal;
                font-style: italic;
                color: #94a3b8;
                font-size: 13px;
            }

            #bang-linh-kien tbody tr:not(.total-row) td::before {
                width: 35% !important;
                text-align: left !important;
                font-weight: bold !important;
                color: #555;
                font-size: 13px;
                flex-shrink: 0 !important;
            }

            #bang-linh-kien td:nth-of-type(3)::before {
                content: "Chi tiết: ";
            }

            #bang-linh-kien td:nth-of-type(4)::before {
                content: "Số lượng: ";
            }

            #bang-linh-kien td:nth-of-type(5)::before {
                content: "Giá Nhập: ";
            }

            #bang-linh-kien td:nth-of-type(6)::before {
                content: "Giá Bán: ";
            }

            #bang-linh-kien td:nth-of-type(7)::before {
                content: "Bảo hành: ";
            }

            #bang-linh-kien td:nth-of-type(8)::before {
                content: "Ghi chú: ";
            }

            #bang-linh-kien .btn-remove-row,
            #bang-linh-kien .btn-add-row {
                position: absolute;
                top: 6px;
                right: 6px;
                width: 28px;
                height: 28px;
                font-size: 14px;
                margin: 0;
            }

            #bang-linh-kien tbody tr:not(.total-row) td input.cell-input {
                width: 65% !important;
                flex-grow: 1 !important;
                border: 1px solid #e1e4e8 !important;
                padding: 5px 8px !important;
                border-radius: 5px !important;
                text-align: right !important;
                font-size: 13px !important;
            }

            #bang-linh-kien tfoot tr,
            .total-row {
                display: flex !important;
                flex-direction: column !important;
                background: #fff !important;
                border: 2px solid var(--primary-color) !important;
                border-radius: 8px !important;
                padding: 10px !important;
                margin-top: 10px !important;
            }

            #bang-linh-kien tfoot td,
            .total-row td {
                display: flex !important;
                justify-content: space-between !important;
                width: 100% !important;
                border: none !important;
                padding: 6px 0 !important;
                font-size: 15px !important;
                border-bottom: 1px solid #eee !important;
            }

            #bang-linh-kien tfoot td:last-child,
            .total-row td:last-child {
                border-bottom: none !important;
            }

            #bang-linh-kien tfoot td:empty,
            .total-row td[colspan="4"] {
                display: none !important;
            }

            .total-row td.col-nhap::before {
                content: "TỔNG VỐN:";
                font-weight: bold;
                color: #555;
            }

            .total-row td.col-ban::before {
                content: "TỔNG BÁN:";
                font-weight: bold;
                color: var(--danger-color);
            }

            #bang-linh-kien tfoot td:nth-last-child(2),
            .total-row td.col-ban {
                font-size: 18px !important;
                color: var(--danger-color) !important;
                font-weight: bold !important;
                background: #fff0f0 !important;
                border-top: 1px solid #fad2d2 !important;
                padding-top: 8px !important;
            }

            /* ========= BẢNG KHO HÀNG ========= */
            #bang-kho-hang td:nth-of-type(1) {
                display: none;
            }

            #bang-kho-hang td:nth-of-type(2) {
                display: block;
                text-align: left;
                font-size: 14px;
                font-weight: bold;
                background: #fff3cd;
                margin: -6px -8px 6px -8px;
                border-radius: 6px 6px 0 0;
                padding: 8px 10px;
                border-bottom: 2px solid #ffc107;
            }

            #bang-kho-hang td:nth-of-type(3)::before {
                content: "Giá Nhập:";
                font-weight: bold;
                color: #666;
                font-size: 13px;
            }

            #bang-kho-hang td:nth-of-type(4)::before {
                content: "Giá Bán:";
                font-weight: bold;
                color: #666;
                font-size: 13px;
            }

            #bang-kho-hang td:nth-of-type(5)::before {
                content: "Bảo Hành:";
                font-weight: bold;
                color: #666;
                font-size: 13px;
            }

            #bang-kho-hang td:nth-of-type(6)::before {
                content: "Ghi Chú:";
                font-weight: bold;
                color: #666;
                font-size: 13px;
            }

            #bang-kho-hang td:nth-of-type(7) {
                justify-content: flex-end;
                gap: 8px;
            }

            #bang-kho-hang td:nth-of-type(7)::before {
                content: "Tồn Kho:";
                font-weight: bold;
                color: #666;
                margin-right: auto;
                font-size: 13px;
            }

            /* ========= BẢNG LỊCH SỬ ========= */
            #bang-lich-su td:nth-of-type(1) {
                display: none;
            }

            #bang-lich-su td:nth-of-type(2) {
                display: block;
                text-align: left;
                font-size: 14px;
                font-weight: bold;
                background: #e2e3e5;
                margin: -6px -8px 6px -8px;
                border-radius: 6px 6px 0 0;
                padding: 8px 10px;
                border-bottom: 2px solid #6c757d;
            }

            #bang-lich-su td:nth-of-type(3)::before {
                content: "Tổng Tiền:";
                font-weight: bold;
                color: #555;
                font-size: 13px;
            }

            #bang-lich-su td:nth-of-type(4)::before {
                content: "Trạng Thái:";
                font-weight: bold;
                color: #555;
                font-size: 13px;
            }

            #bang-lich-su td:nth-of-type(5) {
                justify-content: flex-end;
                gap: 8px;
                display: flex;
                flex-wrap: wrap;
                border-top: 1px dashed #ddd !important;
                padding-top: 8px !important;
            }

            .modal-content {
                width: 95%;
                margin: auto;
            }

            .tab-item {
                padding: 10px 12px;
                font-size: 13px;
                max-width: 140px;
            }
        }

        /* Style cho container chứa logo, giả sử nó có class 'col-logo' */
        .col-logo {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            background-color: transparent;
        }

        /* Style cho logo mới */
        .product-logo-new {
            width: 70px;
            height: 70px;
            object-fit: contain;
        }

        /* Đẩy Z-Index của SweetAlert2 (Hộp thoại xác nhận xoá) lên cao nhất mức 10000 */
        .swal2-container {
            z-index: 10000 !important;
        }

        @media screen and (min-width: 769px) {

            /* Ẩn .summary-info trên PC, chỉ hiện trên Mobile */
            .summary-info {
                display: none !important;
            }

            #bang-linh-kien td:nth-child(2) {
                display: flex;
                align-items: center;
                white-space: nowrap;
            }

            #bang-linh-kien td:nth-child(2) button:first-of-type {
                margin-left: auto;
            }

            .btn-add-row,
            .btn-remove-row {
                float: none !important;
            }
        }