body { font-family: 'Lato', sans-serif; background-color: #f3f4f6; }
        .tab-btn { border-bottom: 2px solid transparent; transition: all 0.3s ease; padding-bottom: 0.5rem; white-space: nowrap; }
        .tab-btn.active { border-color: #0d9488; color: #0d9488; font-weight: 600; }
        .filter-btn.active { background-color: #0d9488; color: white; }
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
        .modal-content { background: white; padding: 1.5rem; border-radius: 0.5rem; max-width: 90%; width: 600px; max-height: 90vh; overflow-y: auto; }
        .status-badge { padding: 4px 12px; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: white; text-align: center; white-space: nowrap; }
        .status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: white; /* Mặc định chữ màu trắng */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    white-space: nowrap;
    line-height: 1.5;
}

/* ========================================================= */
/* ==   ĐỊNH DẠNG HOÀN CHỈNH CHO TẤT CẢ CÁC NHÃN TRẠNG THÁI   == */
/* ========================================================= */

/* Định dạng chung cho tất cả các nhãn */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: white; /* Mặc định chữ màu trắng */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    white-space: nowrap;
    line-height: 1.5;
}

/* --- Trạng thái Thanh toán (Đơn hàng) --- */
.status-đang-báo-giá { background-color: #64748b; } /* Slate 500 */
.status-chưa-thanh-toán { background-color: #ef4444; } /* Red 500 */
.status-thanh-toán-một-phần { background-color: #f97316; } /* Orange 500 */
.status-đã-thanh-toán { background-color: #22c55e; } /* Green 500 */

/* --- Trạng thái Sản xuất (Đơn hàng) --- */
.status-chờ-sản-xuất,
.status-chưa-sản-xuất { background-color: #eab308; } /* Yellow 500 */
.status-đang-sản-xuất { background-color: #3b82f6; } /* Blue 500 */
.status-đã-sản-xuất-xong { background-color: #14b8a6; } /* Teal 500 */
.status-đã-xuất-hàng { background-color: #8b5cf6; } /* Violet 500 */
.status-đã-kết-thúc { background-color: #16a34a; } /* Green 600 */
.status-đã-hủy { background-color: #71717a; } /* Zinc 500 */

/* --- Trạng thái Yêu Cầu Nhập (PR) --- */
.status-đơn-nhập-chờ { background-color: #f59e0b; } /* Amber 500 */
.status-đã-duyệt { background-color: #0891b2; } /* Cyan 600 */
.status-đã-đặt-hàng { background-color: #6d28d9; } /* Violet 700 */
.status-đã-nhập { background-color: #16a34a; } /* Green 600 */
.status-đã-từ-chối { background-color: #4b5563; } /* Gray 600 */

/* Dành cho trạng thái: Đã duyệt */
.status-đã-duyệt {
    background-color: #0891b2; /* Màu Xanh lơ */
}

/* --- Trạng thái chung --- */
.status-n\/a {
    background-color: #e4e4e7; /* Zinc 200 */
    color: #52525b; /* Chữ màu xám đậm */
    text-shadow: none;
}
        .loader { width: 48px; height: 48px; border: 3px solid #0d9488; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
        #app-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.3s ease; }
        @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        #quote-printable-area { font-family: 'Lato', sans-serif; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 0.5rem; overflow: hidden; background-color: #ffffff; }
        /* MODIFIED: Reduced top/bottom padding */
        #quote-header { background-color: #0d9488; color: white; padding: 0.75rem 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: center; }
        /* MODIFIED: Removed Playfair font for consistency */
        #quote-header h3 { font-size: 1.125rem; font-weight: bold; }
        #quote-header p { font-size: 0.875rem; opacity: 0.9; }
        #quote-header .contact-info { text-align: right; }
        #quote-body { padding: 2rem; }
        #quote-body h2 { color: #111827; } /* Removed Playfair font */
        #quote-printable-area table { width: 100%; border-collapse: collapse; }
        /* MODIFIED: Removed Playfair font for consistency */
        #quote-printable-area thead th { background-color: #0d9488; color: white; padding: 0.35rem 1rem; text-align: left; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
        #quote-printable-area thead th:nth-child(3), #quote-printable-area thead th:nth-child(4), #quote-printable-area thead th:nth-child(5), #quote-printable-area thead th:nth-child(6) { text-align: right; }
        #quote-printable-area tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
        #quote-printable-area tbody tr:nth-child(even) { background-color: #f9fafb; }
        #quote-printable-area tbody td:nth-child(3), #quote-printable-area tbody td:nth-child(4), #quote-printable-area tbody td:nth-child(5), #quote-printable-area tbody td:nth-child(6) { text-align: right; }
        #quote-printable-area tfoot td { padding: 0.25rem 1rem; font-weight: bold; }
        #quote-printable-area tfoot tr:last-child { background-color: #f0fdfa; color: #134e4a; font-size: 0.8rem; } /* Light green background */
        /* MODIFIED: Removed Playfair font for consistency */
        #quote-printable-area tfoot tr:last-child td { font-weight: bold; }
        #quote-footer { padding: 0.75rem 2rem; background-color: #f9fafb; border-top: 1px solid #e5e7eb; font-size: 0.8125rem; }
        /* MODIFIED: Removed Playfair font for consistency */
        #quote-footer h4 { font-size: 1rem; font-weight: bold; }
        #quote-footer .signature-area { margin-top: 2rem; }

        @media print {
            /* Thiết lập cho trang in */
            @page {
                size: A4;
                margin: 0; /* Canh lề cho trang in */
            }
        
            body {
                background-color: #fff; /* Đảm bảo nền trắng */
            }
        
            /* Ẩn tất cả các phần tử không thuộc modal báo giá */
            body > div:not(#quote-modal), 
            body > header, 
            body > footer,
            #app-container > header,
            #app-container > .mb-6.border-b {
                display: none !important;
            }
        
            /* Hiển thị modal và nội dung của nó như một phần tử bình thường */
            .modal-overlay {
                position: static !important;
                display: block !important;
                background: none !important;
                width: 100% !important;
                height: auto !important;
                overflow: visible !important;
                justify-content: flex-start !important;
                align-items: flex-start !important;
            }
            
            .modal-content {
                max-width: 100% !important;
                width: 100% !important;
                max-height: none !important;
                height: auto !important;
                box-shadow: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
        
            /* Ẩn các nút bấm ở cuối modal */
            #quote-modal .print-hidden {
                display: none !important;
            }
        
            /* Phần quan trọng: không dùng position:absolute cho khu vực in */
            #quote-printable-area {
                position: static !important;
                border: none !important;
                box-shadow: none !important;
            }
            

        }
        @media (max-width: 768px) { .responsive-table thead { display: none; } .responsive-table tr { display: block; margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background-color: white; padding: 0.5rem; } .responsive-table td { display: flex; justify-content: space-between; align-items: center; text-align: right; padding: 0.75rem 0.5rem; border-bottom: 1px solid #f3f4f6; } .responsive-table td:last-child { border-bottom: none; } .responsive-table td::before { content: attr(data-label); text-align: left; font-weight: 600; color: #4b5563; } .responsive-table td.actions-cell { justify-content: center; } /* Dán đoạn mã này vào file style.css, bên trong khối @media (max-width: 768px) */

.responsive-table thead {
    display: none;
}

.responsive-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: white;
    padding: 0.5rem;
    /* Thêm dòng này để tránh lỗi tràn nội dung không mong muốn */
    overflow: hidden;
}

.responsive-table tfoot {
    /* Đảm bảo phần tổng cộng được hiển thị */
    display: block; 
}

.responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap; /* Cho phép nội dung trong ô tự xuống dòng */
}

.responsive-table td:last-child {
    border-bottom: none;
}

.responsive-table td::before {
    content: attr(data-label);
    text-align: left;
    font-weight: 600;
    color: #4b5563;
}

/* === PHẦN SỬA LỖI QUAN TRỌNG NHẤT CHO Ô "HÀNH ĐỘNG" === */
.responsive-table td.actions-cell {
    /* Chuyển sang bố cục block để nhãn và nút tự xếp chồng lên nhau */
    display: block;
    padding: 0.75rem;
}

.responsive-table td.actions-cell::before {
    /* Căn giữa cho nhãn "Hành Động" */
    width: 100%;
    text-align: center;
    margin-bottom: 0.75rem; /* Tạo khoảng cách giữa nhãn và các nút */
}

.responsive-table td.actions-cell > button,
.responsive-table td.actions-cell > span {
     /* Căn giữa các nút và cho phép chúng xuống dòng */
    display: inline-block;
    margin: 4px; /* Tạo khoảng cách giữa các nút */
}
/* === KẾT THÚC PHẦN SỬA LỖI Ô "HÀNH ĐỘNG" === */


/* === PHẦN LÀM ĐẸP CHO DÒNG TỔNG CỘNG === */
.responsive-table tfoot tr {
    display: block;
    margin-top: 1rem;
    border: 1px solid #0d9488;
    border-radius: 0.5rem;
    background-color: #f0fdfa;
    padding: 0.5rem;
    font-weight: bold;
}

.responsive-table tfoot td {
    border-bottom: 1px solid #ccfbf1;
}

#orders-summary-row td[colspan="4"] {
    justify-content: center;
    font-size: 1.1rem;
    color: #134e4a;
}
/* === KẾT THÚC PHẦN LÀM ĐẸP TỔNG CỘNG === */}

/* ========================================================= */
/* == MÃ TÙY CHỈNH ĐỂ CO GỌN BÁO GIÁ VÀO 1 TRANG PDF == */
/* ========================================================= */

#quote-printable-area {
    font-family: 'Lato', sans-serif; /* Đảm bảo font nhất quán */
}

/* Giảm padding tổng thể của báo giá */
#quote-printable-area #quote-header,
#quote-printable-area #quote-body {
    padding: 1rem 1.5rem; /* Giảm khoảng trống trên/dưới và trái/phải */
}

/* Giảm khoảng cách của khu vực thông tin khách hàng (phần bạn khoanh đỏ) */
#quote-printable-area #quote-body > .flex.justify-between {
    margin-bottom: 1rem; /* Giảm từ mb-6 (24px) xuống 16px */
}
#quote-printable-area #quote-body > .italic {
    margin-bottom: 1rem !important; /* Giảm từ mb-6 (24px) xuống 16px */
}

/* Giảm font size và padding của bảng */
#quote-printable-area table {
    font-size: 11px; /* Giảm cỡ chữ chung của bảng */
    width: 100%;
    table-layout: fixed; /* Bắt buộc bảng tuân thủ chiều rộng cột */
}
#quote-printable-area table th,
#quote-printable-area table td {
    padding: 4px 6px; /* Giảm padding các ô để các dòng gần nhau hơn */
    word-wrap: break-word; 
}
#quote-printable-area table th {
    font-size: 10px; /* Cỡ chữ tiêu đề bảng nhỏ hơn */
}

/* Phân chia lại độ rộng các cột cho phù hợp */
#quote-printable-area table th:nth-child(1),
#quote-printable-area table td:nth-child(1) { width: 5%; } /* Cột STT */

#quote-printable-area table th:nth-child(2),
#quote-printable-area table td:nth-child(2) { width: 45%; } /* Cột Nội dung sản phẩm - Rộng nhất */

#quote-printable-area table th:nth-child(3),
#quote-printable-area table td:nth-child(3) { width: 8%; text-align: center; } /* Cột S.LƯỢNG */

#quote-printable-area table th:nth-child(4),
#quote-printable-area table td:nth-child(4) { width: 8%; text-align: center; } /* Cột ĐVT */

#quote-printable-area table th:nth-child(5),
#quote-printable-area table td:nth-child(5) { width: 17%; text-align: right; } /* Cột Đơn giá */

#quote-printable-area table th:nth-child(6),
#quote-printable-area table td:nth-child(6) { width: 17%; text-align: right; } /* Cột Thành tiền */


/* Giảm khoảng cách của phần tổng kết */
#quote-printable-area #quote-body tfoot td {
    padding-top: 5px;
    padding-bottom: 5px;
}
#quote-printable-area #quote-body > p { /* Dòng "Bằng chữ" */
    margin-top: 0.5rem;
    font-size: 12px;
}

/* Giảm khoảng cách phần chân trang */
#quote-printable-area #quote-footer {
    font-size: 10px;
}
#quote-printable-area #quote-footer .grid {
    margin-top: 2rem; 
    padding-top: 1rem;
}
#quote-printable-area #quote-footer .signature-area {
    margin-top: 2rem;
}
/* style.css */

/* Thêm vào cuối file */
.search-results .p-2:hover {
    background-color: #f0fdfa; /* Tương ứng với bg-teal-50 của Tailwind */
}
/* style.css */

.pagination-btn {
  background-color: #f3f4f6; /* bg-gray-100 */
  border: 1px solid #d1d5db; /* border-gray-300 */
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #e5e7eb; /* bg-gray-200 */
}

.pagination-btn:disabled {
  color: #9ca3af; /* text-gray-400 */
  cursor: not-allowed;
  opacity: 0.6;
}