/* frontend/assets/css/style.css - PHIÊN BẢN ĐÃ DỌN DẸP VÀ TỐI ƯU HÓA */

/* =================================================================
   --- 1. THIẾT LẬP CHUNG & BỐ CỤC (Layout) ---
   ================================================================= */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
h1 {
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* Bố cục Master/Detail (cho Báo giá) */
#content.master-detail-layout {
    display: flex;
    flex-direction: column;
    /* (Trừ padding 40px của #content-wrapper) */
    height: calc(100vh - 40px); 
}

/* =================================================================
   --- 2. CÁC NÚT BẤM (Buttons) ---
   ================================================================= */
.btn {
    padding: 3px 5px; 
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin: 0 3px;
}
.btn-primary { background-color: #007bff; color: white; }
.btn-primary:hover { background-color: #0056b3; }
.btn-edit { background-color: #ffc107; color: #212529; }
.btn-delete { background-color: #dc3545; color: white; }
.btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* =================================================================
   --- 3. BỘ ĐIỀU KHIỂN TRANG (Tìm kiếm, Thêm mới) ---
   ================================================================= */
.page-controls {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 15px; 
}
/* Thu hẹp khoảng cách cho Báo giá */
.page-controls.compact-controls {
    margin-bottom: 5px; /* Thu hẹp */
    padding: 0;
    flex-shrink: 0; 
}
.search-container {
    display: flex;
}
.search-container input[type="search"] {
    padding: 8px 10px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px; 
    min-width: 250px; 
    border-right: none; 
}
.search-container .btn {
    border-radius: 0 4px 4px 0; 
    margin: 0;
}

/* =================================================================
   --- 4. BẢNG DỮ LIỆU (Tables) ---
   ================================================================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
table thead tr {
    background-color: #007bff;
    color: #ffffff;
    text-align: left;
}
table th, table td {
    padding: 8px 10px; /* Hàng hẹp */
    border: 1px solid #ddd;
    /* Xử lý tràn (nếu cần) */
    /* white-space: nowrap; 
    overflow: hidden;    
    text-overflow: ellipsis; */
}
table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
table tbody tr:hover {
    background-color: #e9ecef;
}

/* --- 4.1. Độ rộng cột Bảng (Tất cả Module) --- */
#khachhang-table, #nhomsanpham-table, #sanpham-table, 
#kho-table, #nhanvien-table, #chungtu-table, 
#trangthaict-table, #baogia-table, #hoadon-table {
    table-layout: fixed;
}

/* --- 4.2. Bố cục Master-Detail (Báo giá) --- */
#baogia-master-pane {
    flex-basis: 60%; /* 60% */
    flex-grow: 6;
    flex-shrink: 1; 
    overflow-y: auto; /* Cuộn riêng */
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#baogia-detail-pane {
    flex-basis: 40%; /* 40% */
    flex-grow: 4;
    flex-shrink: 1;
    overflow-y: auto; /* Cuộn riêng */
    margin-top: 2px; /* Khoảng cách 2px */
    display: flex; 
    flex-direction: column;
}

/* (SỬA) CSS ĐỂ HIGHLIGHT HÀNG ĐƯỢC CHỌN (TẤT CẢ CÁC BẢNG) */
table tbody tr.active {
    background-color: #e0e9f5 !important; /* Màu xanh nhạt */
    font-weight: bold; /* Chữ đậm */
}

/* (MỚI) Ghi đè màu của cột cuối (sticky) khi được chọn */
table tbody tr.active td:last-child {
    background-color: #e0e9f5 !important;
}

#baogia-detail-pane h4.detail-header {
    font-size: 1em; /* Nhỏ */
    color: #000; /* Màu đen */
    margin: 5px 0 5px 0; /* Hẹp */
    flex-shrink: 0; 
}

/* --- 4.3. Cột Hành động (Sticky) ---
table th:last-child {
    position: sticky; 
    right: 0; 
    background-color: #007bff; 
    z-index: 11; 
}
 */
/*
table td:last-child {
    position: sticky; 
    right: 0; 
    background-color: #ffffff; 
    z-index: 9; 
    border-left: 1px solid #ccc; 
    overflow: hidden; 
}*/

/* Yêu cầu 4: Tiêu đề Bảng Master/Detail cố định */
/* Fix z-index cho Báo giá */
#baogia-master-pane thead th,
#baogia-detail-pane thead th {
    position: sticky;
    top: 0;
    z-index: 10; /* SỬA: Tăng z-index (cao hơn body) */
    background-color: #007bff; /* SỬA: Thêm nền (để không bị trong suốt) */
    color: #ffffff; /* SỬA: Thêm chữ trắng (nếu cần) */
}

/* (THÊM MỚI) Đặt góc trên-phải có z-index cao nhất */
#baogia-master-pane thead th:last-child,
#baogia-detail-pane thead th:last-child {
    z-index: 11;
}

#baogia-detail-table thead tr {
    background-color: #007bff;
    color: #ffffff;
}
#baogia-master-pane th:last-child,
#baogia-detail-pane th:last-child {
    z-index: 11; /* Đè lên header */
}


/* =================================================================
   --- 5. MODAL (Cửa sổ Pop-up) ---
   ================================================================= */
.modal {
    display: none; 
    position: absolute; /* SỬA: Nằm trong #content-wrapper */
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.4); 
    align-items: center; 
    justify-content: center; 
}

/* Yêu cầu 1: Kích thước Modal (vừa vặn) */
.modal-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    width: 95%; /* SỬA: 95% của #content-wrapper */
    height: 95%; /* SỬA: 95% của #content-wrapper */
    max-width: none; 
    max-height: none; 
    
    display: flex; 
    flex-direction: column; 
    box-sizing: border-box; 
}

.modal-header {
    padding: 10px 20px; 
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; 
}
.modal-header h2 {
    margin: 0;
    font-size: 1.1em; 
}
.modal-header .close-btn {
    cursor: pointer;
    font-size: 1.5em;
    color: #aaa;
}

/* Yêu cầu 2 & 3: Master/Detail cuộn riêng */
.modal-body {
    padding: 15px 20px; 
    overflow-y: auto; /* SỬA: Cho phép body cuộn (nếu cần) */
    flex-grow: 1; 
    /*display: flex;
    flex-direction: column; */
}

.modal-footer {
    padding: 10px 20px;
    border-top: 1px solid #eee;
    text-align: right;
    display: flex;
    justify-content: space-between; /* SỬA: Đẩy 2 nhóm nút ra 2 bên */
    align-items: center; /* (Mới) Căn giữa các nút */
    flex-shrink: 0; 
}

/* =================================================================
   --- 6. FORM (Bên trong Modal) ---
   ================================================================= */

#main-form {
    flex-shrink: 0; /* Master không co lại */
    padding-right: 15px; 
    /* SỬA: Biến main-form thành flex container */
    display: flex;
    flex-direction: column;
    /* Chiếm 100% chiều cao của modal-body */
    height: 100%; 
    overflow: hidden; /* Tắt cuộn của form */
}

#main-form .form-row {
    display: flex;
    margin-bottom: 8px; 
    /*width: 100%;*/
}
#main-form .form-group {
    margin-bottom: 0; 
    padding-right: 0; 
    box-sizing: border-box; 
    /*width: 100%;*/
}
#main-form .form-row > .form-group {
    padding-right: 10px;
}
#main-form .form-row > .form-group:last-child {
    padding-right: 0 !important; 
}

/* Định nghĩa cột tĩnh (Dùng cho HTML tĩnh) */
.form-group.col-5 { width: 5%; }
.form-group.col-10 { width: 10%; }
.form-group.col-15 { width: 15%; }
.form-group.col-20 { width: 20%; }
.form-group.col-25 { width: 25%; }
.form-group.col-30 { width: 30%; }
.form-group.col-35 { width: 35%; }
.form-group.col-40 { width: 40%; }
.form-group.col-45 { width: 45%; }
.form-group.col-50 { width: 50%; }
.form-group.col-55 { width: 55%; }
.form-group.col-60 { width: 60%; }
.form-group.col-65 { width: 65%; }
.form-group.col-70 { width: 70%; }
.form-group.col-75 { width: 75%; }
.form-group.col-80 { width: 80%; }
.form-group.col-85 { width: 85%; }
.form-group.col-90 { width: 90%; }
.form-group.col-95 { width: 95%; }
.form-group.full-width { width: 100%; }

/* Thu nhỏ label và input */
.form-group label {
    display: block;
    margin-bottom: 3px;
    font-size: 0.85em; 
    font-weight: bold; 
}
.form-group input:not([type="checkbox"]),
.form-group select { 
    width: 100%; 
    padding: 6px; 
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 5px;
}
.check-group {
    display: flex;
    align-items: center;
}
.check-group label {
    font-weight: normal;
    margin-bottom: 0;
    font-size: 0.85em;
}
.form-group.col-50.check-group,
.form-group.col-20.check-group {
    align-self: flex-end; 
    padding-bottom: 6px; 
}

/* =================================================================
   --- 7. CÁC THÀNH PHẦN NÂNG CAO (Autocomplete, Bảng Detail) ---
   ================================================================= */

/* --- Autocomplete --- */
.autocomplete-container {
    position: relative;
}
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 1050; 
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
    color: #000; /* <-- THÊM DÒNG NÀY ĐỂ ĐỔI MÀU CHỮ */
}
.autocomplete-items div:hover {
    background-color: #e9e9e9; 
}

/* --- Bảng Detail (Trong Modal Báo giá) --- */
#main-form h4.detail-header {
    color: #000;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1em; 
}

/* Yêu cầu 2 & 3: Detail cuộn được và không che nút "Thêm dòng" */
#baogia-detail-table-wrapper {
    flex-grow: 1; /* Chiếm hết không gian */
    overflow-y: auto; /* Cuộn riêng */
    border-bottom: 1px solid #eee;
    min-height: 100px; 
    padding-right: 15px;
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding-top: 10px;
}
/*them*/

#btn-add-detail-row-bg {
    flex-shrink: 0; 
    /*margin-top: 5px;*/
    align-self: flex-start; 
}

#baogia-detail-modal-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: sticky; /* SỬA: Giữ cố định */
    top: 0; /* SỬA: Dính vào cạnh trên của khung cuộn */
    z-index: 10; /* SỬA: Đảm bảo nó nổi lên trên nội dung */
    
    /*background-color: #007bff; */
    color: #ffffff; 
}

#baogia-detail-modal-table th, 
#baogia-detail-modal-table td {
    padding: 2px;
    border: 1px solid #ddd;
    text-align: left;
}


/* === SỬA LỖI TIÊU ĐỀ TRÔI (THÊM ĐOẠN NÀY) === */
#baogia-detail-modal-table thead th {
    position: sticky; /* Giữ cố định */
    top: 0; /* Dính vào cạnh trên */
    z-index: 10; /* Nổi lên trên */
    
    background-color: #007bff; 
    color: #ffffff; 
}
/* === KẾT THÚC SỬA LỖI === */

#baogia-detail-modal-table input[type="text"],
#baogia-detail-modal-table input[type="number"] {
    width: 100%;
    padding: 5px;
    box-sizing: border-box; 
    border: 1px solid #ccc;
    border-radius: 4px;
}

#baogia-detail-modal-table input.detail-thanhtien {
    background-color: #eee;
}
#baogia-detail-modal-table .btn-delete-row {
    padding: 5px 10px;
    font-size: 0.8em;
    margin: 0;
}

#baogia-detail-modal-table th {
    background-color: #007bff; 
    color: #ffffff; 
}

/* TRONG frontend/assets/css/style.css */
/* CHÈN VÀO CUỐI FILE */

/* --- (CSS MỚI) BỐ CỤC BẢNG ĐƠN HÀNG --- */

#donhang-master-pane {
    flex-basis: 60%; 
    flex-grow: 7;
    flex-shrink: 1; 
    overflow-y: auto; 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

#donhang-detail-pane {
    flex-basis: 40%; 
    flex-grow: 3;
    flex-shrink: 1;
    overflow-y: auto; 
    margin-top: 2px; 
    display: flex; 
    flex-direction: column;
}

#donhang-table-body tr.active {
    background-color: #e0e9f5 !important;
    font-weight: bold;
}
#donhang-detail-pane h4.detail-header {
    font-size: 1em; 
    color: #000; 
    margin: 5px 0 5px 0; 
    flex-shrink: 0; 
}

/* Tiêu đề Bảng cố định */
#donhang-detail-table thead tr {
    background-color: #007bff;
    color: #ffffff;
}

#donhang-master-pane th:last-child,
#donhang-detail-pane th:last-child {
    z-index: 11; 
}

/* Tiêu đề Bảng cố định */
#donhang-master-pane thead th,
#donhang-detail-pane thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #007bff;
    color: #ffffff;
}

/* --- (CSS MỚI) BẢNG DETAIL ĐƠN HÀNG (TRONG MODAL) --- */
#donhang-detail-table-wrapper {
    flex-grow: 1; 
    overflow-y: auto; /* Yêu cầu 3: Cuộn riêng */
    border-bottom: 1px solid #eee;
    min-height: 100px; 
    padding-right: 3px;
    border-top: 1px solid #eee;
    margin-top: 3px; /* Sửa: Thu hẹp khoảng cách */
    padding-top: 3px;
}

#btn-add-detail-row-dh { /* ID mới cho nút Thêm dòng ĐH */
    flex-shrink: 0; 
    /*margin-top: 5px;*/
    align-self: flex-start; 
}
#donhang-detail-modal-table {
    width: 120%;
    table-layout: fixed;
    border-collapse: collapse;
}
#donhang-detail-modal-table input[type="text"],
#donhang-detail-modal-table input[type="number"] {
    width: 100%;
    padding: 5px;
    box-sizing: border-box; 
    border: 1px solid #ccc;
    border-radius: 4px;
}
#donhang-detail-modal-table th, 
#donhang-detail-modal-table td {
    padding: 2px;
    border: 1px solid #ddd;
    text-align: left;
}
#donhang-detail-modal-table th {
    background-color: #007bff; 
    color: #ffffff; 
}
#donhang-detail-modal-table input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box; 
    border: 1px solid #ccc;
    border-radius: 4px;
}

#donhang-detail-modal-table input.detail-thanhtien {
    background-color: #eee;
}
#donhang-detail-modal-table .btn-delete-row {
    padding: 3px 3px;
    font-size: 0.8em;
    margin: 0;
}

/* Yêu cầu 4: Cố định tiêu đề Bảng Chi tiết */
#donhang-detail-modal-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #007bff; 
    color: #ffffff; 
}

/* --- (CSS MỚI) BỐ CỤC DANH MỤC (FULL TABLE) --- */

/* Yêu cầu 4: Tắt cuộn dọc của #content khi ở layout này */
#content.full-table-layout {
    display: flex;
    flex-direction: column;
    height: 100%; 
    overflow-y: hidden; 
    padding-top: 10px; 
}

/* Yêu cầu 1: Thu hẹp khoảng cách nút Thêm mới */
#content.full-table-layout .page-controls {
    margin-bottom: 2px;
    padding: 0;
    flex-shrink: 0; 
}

/* Yêu cầu 3 & 4: Khung cuộn riêng cho Bảng */
#dm-table-pane {
    flex-grow: 1; /* Chiếm hết không gian còn lại */
    overflow: auto; /* BẬT CUỘN 2 CHIỀU (Dọc và Ngang) */
    border-top: 1px solid #ddd;
}

/* Yêu cầu 4: Tiêu đề Bảng DM cố định khi cuộn dọc */
#dm-table-pane thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #007bff;
    color: #ffffff;
}

/* Fix z-index cho cột sticky (để đè lên aheader sticky) 
#dm-table-pane th:last-child {
    z-index: 11;
}
    */

/*them*/


/* --- (CSS MỚI) CHO BẢNG CÓ THỂ RESIZE --- */

/* 1. Đảm bảo bảng tuân thủ chiều rộng cột */
table.resizable-table {
    table-layout: fixed;
    /* (Đảm bảo width 100% đã có ở quy tắc 'table' chung) */
}

/* 2. Định dạng cho tiêu đề */
table.resizable-table th {
    position: relative; /* Quan trọng để định vị resizer */
}

/* 3. Định dạng cho Resizer (tay cầm) */
.resizer {
    position: absolute;
    top: 0;
    right: -2;
    width: 5px; /* Độ rộng vùng có thể click */
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 12; /* Phải cao hơn z-index của header (11) */
}

.resizer:hover,
.resizer.resizing {
    border-right: 2px solid #007bff; /* Highlight khi kéo */
}


/* Hủy bỏ 'position: sticky' cho ô dữ liệu cột cuối (Email) */

#khachhang-table td:last-child {
    position: static; /* SỬA: Đặt lại về 'static' */
    z-index: 1;
    border-left: 1px solid #ddd; /* Giữ lại viền mặc định */
}
/*mặc định dộ rộng cho bảng va cho các cột của Danh mục khách hàng*/
#khachhang-table { table-layout: fixed; width: 1850px; }
#khachhang-table thead th:nth-child(1) { width: 3%;  /* ID */ }
#khachhang-table thead th:nth-child(2) { width: 4%;  /* MaKH */}
#khachhang-table thead th:nth-child(3) { width: 20%; /* TenKH */}
#khachhang-table thead th:nth-child(4) { width: 24%; /* Dia chi DKKD */}
#khachhang-table thead th:nth-child(5) { width: 16%; /* Dia chi giao dich */}
#khachhang-table thead th:nth-child(6) { width: 6%; /* Dien thoai */}
#khachhang-table thead th:nth-child(7) { width: 6%; /* Mst */}
#khachhang-table thead th:nth-child(8) { width: 6%; /* CCCD */}
#khachhang-table thead th:nth-child(9) { width: 10%; /* SỬA: Email (Cột cuối) */}
/* (Đã xóa cột 10) */

/*mặc định dộ rộng cho bảng va cho các cột của Danh mục hàng hóa*/
#sanpham-table { table-layout: fixed; width: 100%; }
#sanpham-table th:nth-child(1) { width: 5%; }  /*Id*/
#sanpham-table th:nth-child(2) { width: 8%; }  /*Mã hàng*/
#sanpham-table th:nth-child(3) { width: 44%; }  /*Tên hàng*/
#sanpham-table th:nth-child(4) { width: 4%; }   /*Đvt*/
#sanpham-table th:nth-child(5) { width: 16%; }  /*Nhóm hàng*/
#sanpham-table th:nth-child(6) { width: 4%; }  /*Thuế suất*/
#sanpham-table th:nth-child(7) { width: 4%; }   /*Quy cách*/
#sanpham-table th:nth-child(8) { width: 8%; }  /*Giá bán*/
#sanpham-table th:nth-child(9) { width: 7%; }  /*Trạng thái*/
/*#sanpham-table th:nth-child(9) { width: 7%; } /**/

#nhomsanpham-table { table-layout: fixed; width: 60%; }
#nhomsanpham-table th:nth-child(1) { width: 15%; } /*Id*/
#nhomsanpham-table th:nth-child(2) { width: 15%; } /*Ma Nhom*/
#nhomsanpham-table th:nth-child(3) { width: 40%; } /*Ten nhom*/
#nhomsanpham-table th:nth-child(4) { width: 30%; } /*is_active*/
/*#nhomsanpham-table th:nth-child(5) { width: 15%; }/**/

#nhanvien-table { table-layout: fixed; width: 100%; }
#nhanvien-table th:nth-child(1) { width: 5%; }/*id*/
#nhanvien-table th:nth-child(2) { width: 6%; }/*Ma Nv*/
#nhanvien-table th:nth-child(3) { width: 22%; }/*Ten NV*/
#nhanvien-table th:nth-child(4) { width: 10%; }/*Chuc vu*/
#nhanvien-table th:nth-child(5) { width: 10%; }/*Dien thoai*/
#nhanvien-table th:nth-child(6) { width: 29%; }/*Dia chi*/
#nhanvien-table th:nth-child(7) { width: 10%; } /*Email*/
#nhanvien-table th:nth-child(8) { width: 8%; }/*Trang thai*/

/* (ĐÃ SỬA) ĐỘ RỘNG CỘT BẢNG VÙNG (4 CỘT) */
#vung-table { table-layout: fixed; width: 60%; }
#vung-table th:nth-child(1) { width: 10%; } /* ID */
#vung-table th:nth-child(2) { width: 25%; } /* Mã Vùng */
#vung-table th:nth-child(3) { width: 45%; } /* Tên Vùng */
#vung-table th:nth-child(4) { width: 20%; } /* Trạng thái (Cột cuối) */
/* (Đã xóa cột 5) */

/* (ĐÃ SỬA) ĐỘ RỘNG CỘT BẢNG KHO HÀNG (6 CỘT) */
#kho-table { table-layout: fixed; width: 100%; }
#kho-table th:nth-child(1) { width: 5%; }  /* ID */
#kho-table th:nth-child(2) { width: 10%; } /* Mã Kho */
#kho-table th:nth-child(3) { width: 25%; } /* Tên Kho */
#kho-table th:nth-child(4) { width: 25%; } /* Địa chỉ */
#kho-table th:nth-child(5) { width: 28%; } /* Khách hàng (Chủ kho) */
#kho-table th:nth-child(6) { width: 7%; } /* Trạng thái (Cột cuối) */
/* (Đã xóa cột 7) */

/* TRONG frontend/assets/css/style.css */
/* CHÈN VÀO CUỐI FILE */

/* --- (CSS MỚI) ĐỘ RỘNG CỘT BẢNG TIỀN TỆ --- */

#tiente-table { table-layout: fixed; width: 50%; }
#tiente-table th:nth-child(1) { width: 10%; } /* Mã Tiền tệ */
#tiente-table th:nth-child(2) { width: 75%; } /* Tên Tiền tệ (Cột cuối) */
#tiente-table th:nth-child(3) { width: 15%; }/*Tỷ giá*/

/* (ĐÃ SỬA) ĐỘ RỘNG CỘT BẢNG CHỨNG TỪ (4 CỘT) */
#chungtu-table { table-layout: fixed; width: 70%; }
#chungtu-table th:nth-child(1) { width: 5%; } /* Mã CT */
#chungtu-table th:nth-child(2) { width: 40%; } /* Tên Chứng từ */
#chungtu-table th:nth-child(3) { width: 35%; } /* Trạng thái Lập */
#chungtu-table th:nth-child(4) { width: 20%; } /* Định dạng Số (Cột cuối) */
/* (Đã xóa cột 5) */

/* (ĐÃ SỬA) ĐỘ RỘNG CỘT BẢNG TRẠNG THÁI CT (5 CỘT) */
#trangthaict-table { table-layout: fixed; width: 100%; }
#trangthaict-table th:nth-child(1) { width: 5%; } /* ID */
#trangthaict-table th:nth-child(2) { width: 40%; } /* Chứng từ */
#trangthaict-table th:nth-child(3) { width: 5%; } /* Mã TT */
#trangthaict-table th:nth-child(4) { width: 40%; } /* Tên TT */
#trangthaict-table th:nth-child(5) { width: 10%; } /* Trạng thái (Cột cuối) */
/* (Đã xóa cột 6) */

/*them */




/* --- (CSS MỚI) YÊU CẦU 2: ĐỘ RỘNG MẶC ĐỊNH BÁO GIÁ --- */
#baogia-table {
    width: 150%;
    /*table-layout: fixed;
    border-collapse: collapse;*/
}


/* Detail Modal (5 cột) *//*
#baogia-detail-modal-table th:nth-child(1) { width: 3%; } /*Mã hàng*//*
#baogia-detail-modal-table th:nth-child(2) { width: 66%; } /*Tên hàng *//*
#baogia-detail-modal-table th:nth-child(3) { width: 3%; } /*Đvt*//*
#baogia-detail-modal-table th:nth-child(4) { width: 8%; } /*Số lượng  *//*
#baogia-detail-modal-table th:nth-child(5) { width: 10%; } /*Đơn giá *//*
#baogia-detail-modal-table th:nth-child(6) { width: 10%; } /*Thành tiền */*/



/* Detail Modal (8 cột) */
#donhang-detail-modal-table th:nth-child(1) { width: 25%; } /* Hàng hóa */
#donhang-detail-modal-table th:nth-child(2) { width: 10%; } /* SL */
#donhang-detail-modal-table th:nth-child(3) { width: 10%; } /* Giá */
#donhang-detail-modal-table th:nth-child(4) { width: 15%; } /* Thành tiền */
#donhang-detail-modal-table th:nth-child(5) { width: 10%; } /* Ngày nợ */
#donhang-detail-modal-table th:nth-child(6) { width: 10%; } /* Địa điểm giao */
#donhang-detail-modal-table th:nth-child(7) { width: 10%; } /* Ghi chú */
#donhang-detail-modal-table th:nth-child(8) { width: 10%; } /* Xóa */

/* --- (CSS MỚI) YÊU CẦU 2: ĐỘ RỘNG MẶC ĐỊNH ĐỀ NGHỊ XUẤT KHO --- */

/* Master (5 cột) */
#denghi-table th:nth-child(1) { width: 5%; } /* ID */
#denghi-table th:nth-child(2) { width: 13%; } /* Số Đn */
#denghi-table th:nth-child(3) { width: 10%; } /* Ngày Đn */
#denghi-table th:nth-child(4) { width: 15%; } /* KhO XUẤT */
#denghi-table th:nth-child(5) { width: 12%; } /* Lái xe */
#denghi-table th:nth-child(6) { width: 10%; } /*BKS xe*/
#denghi-table th:nth-child(7) { width: 10%; } /*Ngày xuất*/
#denghi-table th:nth-child(8) { width: 15%; } /*Mục đích*/
#denghi-table th:nth-child(9) { width: 10%; } /*Trạng thái*/

/* Detail Modal (8 cột) */
#denghi-detail-table th:nth-child(1) { width: 60%; } /* Hàng hóa */
#denghi-detail-table th:nth-child(2) { width: 10%; } /* SL */
#denghi-detail-table th:nth-child(3) { width: 30%; } /* ghi chú */

/* --- (CSS MỚI) YÊU CẦU 3: CĂN PHẢI Ô SỐ --- */
/* (Áp dụng cho cả Báo giá và Đơn hàng) */
#baogia-detail-modal-table .detail-soluong,
#baogia-detail-modal-table .detail-dongia,
#baogia-detail-modal-table .detail-thanhtien,

#donhang-detail-modal-table .detail-soluong,
#donhang-detail-modal-table .detail-dongia,
#donhang-detail-modal-table .detail-thanhtien,
#donhang-detail-modal-table .detail-songayno,

#hoaodon-detail-modal-table .detail-soluong,
#hoaodon-detail-modal-table .detail-dongia,
#hoaodon-detail-modal-table .detail-songayno
#hoaodon-detail-modal-table .detail-thanhtien {
    text-align: right;
}
/* Căn phải cho <td> (bảng read-only) */
#baogia-detail-table td:nth-child(4),
#baogia-detail-table td:nth-child(5),
#baogia-detail-table td:nth-child(6),

#donhang-detail-table td:nth-child(2),
#donhang-detail-table td:nth-child(3),
#donhang-detail-table td:nth-child(4),
#donhang-detail-table td:nth-child(5),

#hoadon-detail-table td:nth-child(2),
#hoadon-detail-table td:nth-child(3),
#hoadon-detail-table td:nth-child(4),
#hoadon-detail-table td:nth-child(5),
#hoadon-detail-table td:nth-child(6),
#hoadon-detail-table td:nth-child(7),
#hoadon-detail-table td:nth-child(8),
#hoadon-detail-table td:nth-child(9),
#hoadon-detail-table td:nth-child(10),
#hoadon-detail-table td:nth-child(11),

#nhapmua-detail-table td:nth-child(3),
#nhapmua-detail-table td:nth-child(4),
#nhapmua-detail-table td:nth-child(5),
#nhapmua-detail-table td:nth-child(6),
#nhapmua-detail-table td:nth-child(7),
#nhapmua-detail-table td:nth-child(8),
#nhapmua-detail-table td:nth-child(9),
#nhapmua-detail-table td:nth-child(10),
#nhapmua-detail-table td:nth-child(11),
#nhapmua-detail-table td:nth-child(12),
#nhapmua-detail-table td:nth-child(13),
#nhapmua-detail-table td:nth-child(14),
#nhapmua-detail-table td:nth-child(15),
#nx-detail-table td:nth-child(3),
#nx-detail-table td:nth-child(4),
#nx-detail-table td:nth-child(5)
{
    text-align: right;
}

#hoadon-table {
    width: 250%;
    /*table-layout: fixed;
    border-collapse: collapse;*/
}
/* Master (18 cột) */

#hoadon-table th:nth-child(1) { width: 3%; } /* ID */
#hoadon-table th:nth-child(2) { width: 8%; } /* Số PX */
#hoadon-table th:nth-child(3) { width: 5%; } /* Ngày PX */
#hoadon-table th:nth-child(4) { width: 9%; } /* Tên NV */
#hoadon-table th:nth-child(5) { width: 30%; } /* Tên KH */
#hoadon-table th:nth-child(6) { width: 8%; } /* Số đơn hàng */
#hoadon-table th:nth-child(7) { width: 15%; } /* Kho xuất */
#hoadon-table th:nth-child(8) { width: 10%; } /* Người vc */
#hoadon-table th:nth-child(9) { width: 5%; } /* BKS Xe vận chuyển */
#hoadon-table th:nth-child(10) { width: 10%; } /* Số BBGN*/
#hoadon-table th:nth-child(11) { width: 5%; } /* Ngày BBGN */
#hoadon-table th:nth-child(12) { width: 10%; } /* Địa điểm giao nhận*/
#hoadon-table th:nth-child(13) { width: 10%; } /* Người nhận */
#hoadon-table th:nth-child(14) { width: 10%; } /* Người tạo */
#hoadon-table th:nth-child(15) { width: 5%; } /* Ngày tạo */
#hoadon-table th:nth-child(16) { width: 10%; } /* Người sửa cuối */
#hoadon-table th:nth-child(17) { width: 5%; } /* Ngày sửa */
#hoadon-table th:nth-child(18) { width: 8%; } /* Trạng thái */

#hoadon-detail-table {
    width: 130%;
    /*table-layout: fixed;
    border-collapse: collapse;*/
}

#nx-table {
    width: 150%;
    /*table-layout: fixed;
    border-collapse: collapse;*/
}
#nx-table th:nth-child(1) { width: 8%; } /*So ct*/
#nx-table th:nth-child(2) { width: 5%; } /*ngay*/
#nx-table th:nth-child(3) { width: 12%; } /*Kho*/
#nx-table th:nth-child(4) { width: 12%; } /*Kho doi ung*/
#nx-table th:nth-child(5) { width: 10%; } /*nguoi vc*/
#nx-table th:nth-child(6) { width: 20%; } /*ghi chu*/
#nx-table th:nth-child(7) { width: 8%; } /*trang thai*/
#nx-table th:nth-child(8) { width: 10%; } /*nguoi tao*/
#nx-table th:nth-child(9) { width: 5%; } /*Ngay tao*/
#nx-table th:nth-child(10) { width: 10%; } /*Nguoi sua*/
#nx-table th:nth-child(11) { width: 5%; } /*Ngay sua*/

#nx-detail-table th:nth-child(1) { width: 50%; } /*San pham*/
#nx-detail-table th:nth-child(2) { width: 4%; } /*Dvt*/
#nx-detail-table th:nth-child(3) { width: 7%; } /*So luong*/
#nx-detail-table th:nth-child(4) { width: 7%; } /*Don gia*/
#nx-detail-table th:nth-child(5) { width: 9%; } /*Thanh tien*/
#nx-detail-table th:nth-child(6) { width: 5%; } /*Xuat kho*/
#nx-detail-table th:nth-child(7) { width: 18%; } /*Ghi chu*/

/* --- SỬA LỖI GIAO DIỆN BẢNG NHẬP XUẤT --- */

/* 1. Ép ô tìm kiếm và input rộng 100% ô chứa */
#nx-detail-modal-table .autocomplete-container {
    width: 100%;
    position: relative;
}

/* 2. Ép tất cả input trong bảng giãn 100% và tính cả padding */
#nx-detail-modal-table input {
    width: 100% !important;
    box-sizing: border-box; /* Quan trọng: Để padding không làm vỡ khung */
    min-width: 0; /* Ngăn lỗi tràn trên một số trình duyệt */
}

/* 3. Căn chỉnh bảng */
#nx-detail-modal-table {
    table-layout: fixed; /* Cố định cột theo px */
    width: max-content;  /* Bảng tự động dài ra theo tổng px các cột */
}

/*Nhap mua*/
#nhapmua-table {
    width: 220%;
    /*table-layout: fixed;
    border-collapse: collapse;*/
}
/* Master (18 cột) */

#nhapmua-table th:nth-child(1) { width: 3%; } /* ID */
#nhapmua-table th:nth-child(2) { width: 6%; } /* Số Ct */
#nhapmua-table th:nth-child(3) { width: 4%; } /* Ngày Ct */
#nhapmua-table th:nth-child(4) { width: 6%; } /* Loại nhập */
#nhapmua-table th:nth-child(5) { width: 6%; } /* Kho */
#nhapmua-table th:nth-child(6) { width: 20%; } /* Nhà cung cấp */
#nhapmua-table th:nth-child(7) { width: 3%; } /* Mã tiền tệ */
#nhapmua-table th:nth-child(8) { width: 4%; } /* Tỷ giá */
#nhapmua-table th:nth-child(9) { width: 20%; } /* Đv VC */
#nhapmua-table th:nth-child(10) { width: 4%; } /* BKS Xe vận chuyển */
#nhapmua-table th:nth-child(11) { width: 10%; } /* Ghi chu*/
#nhapmua-table th:nth-child(12) { width: 6%; } /* Trạng thái */
#nhapmua-table th:nth-child(13) { width: 8%; } /* Người tạo */
#nhapmua-table th:nth-child(14) { width: 4%; } /* Ngày tạo */
#nhapmua-table th:nth-child(15) { width: 8%; } /* Người sửa cuối */
#nhapmua-table th:nth-child(16) { width: 4%; } /* Ngày sửa */


#nhapmua-detail-table {
    width: 180%;
    /*table-layout: fixed;
    border-collapse: collapse;*/
}
/* Detail Modal (5 cột) */
#nhapmua-detail-table th:nth-child(1) { width: 25%; } /*Tên hàng*/
#nhapmua-detail-table th:nth-child(2) { width: 8%; } /*Kho*/
#nhapmua-detail-table th:nth-child(3) { width: 5%; } /*Số lượng */
#nhapmua-detail-table th:nth-child(4) { width: 5%; } /*Đơn giá Nt */
#nhapmua-detail-table th:nth-child(5) { width: 6%; } /*Thành tiền Nt*/
#nhapmua-detail-table th:nth-child(6) { width: 5%; } /*Đơn giá  */
#nhapmua-detail-table th:nth-child(7) { width: 6%; } /*Thành tiền */
#nhapmua-detail-table th:nth-child(8) { width: 5%; } /*Cước VC*/
#nhapmua-detail-table th:nth-child(9) { width: 5%; }/*CP khác*/
#nhapmua-detail-table th:nth-child(10) { width: 5%; } /*Thue NK */
#nhapmua-detail-table th:nth-child(11) { width: 5%; } /*Thuế VAT*/
#nhapmua-detail-table th:nth-child(12) { width: 5%; } /* Phí KtCL*/
#nhapmua-detail-table th:nth-child(13) { width: 5%; } /* Phí DVHQ*/
#nhapmua-detail-table th:nth-child(14) { width: 5%; } /* Phí LoCharGh*/
#nhapmua-detail-table th:nth-child(15) { width: 5%; } /* Giá tri nhap kho*/

/*Nhap mua*/
#dn-table {
    width: 150%;
    /*table-layout: fixed;
    border-collapse: collapse;*/
}
/* Master (18 cột) */

#dn-table th:nth-child(1) { width: 3%; } /* ID */
#dn-table th:nth-child(2) { width: 6%; } /* Số Ct */
#dn-table th:nth-child(3) { width: 4%; } /* Ngày Ct */
#dn-table th:nth-child(4) { width: 4%; } /* Ngày nhập */
#dn-table th:nth-child(5) { width: 20%; } /* Người vc */
#dn-table th:nth-child(6) { width: 4%; } /* BKS Xe vận chuyển */
#dn-table th:nth-child(9) { width: 10%; } /* Ghi chu*/
#dn-table th:nth-child(10) { width: 6%; } /* Trạng thái */
#dn-table th:nth-child(11) { width: 8%; } /* Người tạo */
#dn-table th:nth-child(12) { width: 4%; } /* Ngày tạo */
#dn-table th:nth-child(13) { width: 8%; } /* Người sửa cuối */
#dn-table th:nth-child(14) { width: 4%; } /* Ngày sửa */

/* --- (CSS MỚI) BỐ CỤC MODAL TRA CỨU (LOOKUP) --- */
#lookup-table-pane {
    height: 400px; /* Cố định chiều cao cho bảng tra cứu */
    overflow-y: auto;
    border-top: 1px solid #ddd;
}
#lookup-table {
    table-layout: fixed;
}
#lookup-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}
#lookup-table-body tr {
    cursor: pointer;
}
#lookup-table-body tr:hover {
    background-color: #e9ecef;
}
#lookup-table-body tr.active {
    background-color: #e0e9f5 !important;
    font-weight: bold;
}



/* Dòng được chọn (trong Bảng Detail Modal) */
#baogia-detail-modal-body tr.selected-row,
#donhang-detail-modal-body tr.selected-row {
    background-color: #e0e9f5 !important;
}

/* Điều chỉnh khoảng cách nút footer */
.modal-footer > div {
    display: flex;
    gap: 10px; /* Khoảng cách giữa các nút */
    align-items: center;
}

/* TRONG: frontend/assets/css/style.css */
/* CHÈN VÀO CUỐI FILE */

/* --- (CSS MỚI) BỐ CỤC BẢNG ĐỀ NGHỊ XUẤT KHO --- */


/* Bố cục trang Master-Detail */
#denghi-master-pane {
    flex-basis: 60%; 
    flex-grow: 7;
    flex-shrink: 1; 
    overflow-y: auto; 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#denghi-detail-pane {
    flex-basis: 40%; 
    flex-grow: 3;
    flex-shrink: 1;
    overflow-y: auto; 
    margin-top: 2px; 
    display: flex; 
    flex-direction: column;
}
#denghi-table-body tr.active {
    background-color: #e0e9f5 !important;
    font-weight: bold;
}
#denghi-detail-pane h4.detail-header {
    font-size: 1em; 
    color: #000; 
    margin: 5px 0 5px 0; 
    flex-shrink: 0; 
}

/* Tiêu đề Bảng cố định */
#denghi-master-pane thead th,
#denghi-detail-pane thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #007bff;
    color: #ffffff;
}
#denghi-detail-table thead tr {
    background-color: #007bff;
    color: #ffffff;
}
#denghi-master-pane th:last-child,
#denghi-detail-pane th:last-child {
    z-index: 11; 
}

/* Bảng Detail (trong Modal) */
#denghi-detail-table-wrapper {
    flex-grow: 1; 
    overflow-y: auto; 
    border-bottom: 1px solid #eee;
    min-height: 100px; 
    padding-right: 15px;
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding-top: 10px;
}
#denghi-detail-modal-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
#denghi-detail-modal-table th, 
#denghi-detail-modal-table td {
    padding: 2px;
    border: 1px solid #ddd;
    text-align: left;
}
#denghi-detail-modal-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #007bff; 
    color: #ffffff; 
}
#denghi-detail-modal-table input {
    width: 100%;
    padding: 2px;
    box-sizing: border-box; 
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* TRONG: frontend/assets/css/style.css */
/* CHÈN VÀO CUỐI FILE */

/* --- (CSS MỚI) BỐ CỤC BẢNG HÓA ĐƠN --- */

#hoadon-master-pane {
    flex-basis: 60%; 
    flex-grow: 7;
    flex-shrink: 1; 
    overflow-y: auto; 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#hoadon-detail-pane {
    flex-basis: 40%; 
    flex-grow: 3;
    flex-shrink: 1;
    overflow-y: auto; 
    margin-top: 2px; 
    display: flex; 
    flex-direction: column;
    width: 100%;
}
#nx-master-pane {
    flex-basis: 60%; 
    flex-grow: 7;
    flex-shrink: 1; 
    overflow-y: auto; 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#nx-detail-pane {
    flex-basis: 40%; 
    flex-grow: 3;
    flex-shrink: 1;
    overflow-y: auto; 
    margin-top: 2px; 
    display: flex; 
    flex-direction: column;
    width: 100%;
}
#hoadon-table-body tr.active {
    background-color: #e0e9f5 !important;
    font-weight: bold;
}
#hoadon-detail-pane h4.detail-header {
    font-size: 1em; 
    color: #000; 
    margin: 5px 0 5px 0; 
    flex-shrink: 0; 
}

/* Tiêu đề Bảng cố định */
#hoadon-master-pane thead th,
#hoadon-detail-pane thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #007bff;
    color: #ffffff;
}
/* Tìm ID của bảng chi tiết Hóa đơn, ví dụ: */
#hoadon-detail-table {
    table-layout: auto; /* Quan trọng nhất */
    width: 100%;
    min-width: 1800px;
}
#hoadon-detail-table thead tr {
    background-color: #007bff;
    color: #ffffff;
}
#hoadon-master-pane th:last-child,
#hoadon-detail-pane th:last-child {
    z-index: 11; 
}

/* --- (CSS MỚI) BẢNG DETAIL HÓA ĐƠN (TRONG MODAL) --- */
#hoadon-detail-table-wrapper {
    flex-grow: 1; 
    overflow-y: auto; 
    border-bottom: 1px solid #eee;
    min-height: 100px; 
    padding-right: 15px;
    border-top: 1px solid #eee;
    margin-top: 5px;
    padding-top: 5px;
}/*
#hoadon-detail-modal-table {
    width: 150%;
    table-layout: fixed;
    border-collapse: collapse;
}*/
#hoadon-detail-modal-table th, 
#hoadon-detail-modal-table td {
    border: 1px solid #ddd;
    padding: 2px 4px !important; /* Trên-Dưới: 2px, Trái-Phải: 4px */
    vertical-align: middle !important; /* Căn giữa theo chiều dọc */
    height: 24px !important; /* Chiều cao tối thiểu của dòng */
}

#hoadon-detail-modal-table th {
    border: none !important;
}
   
#hoadon-detail-modal-table tr {
    border-bottom: 1px solid #dee2e6; /* Giữ lại đường kẻ ngang */
}
#hoadon-detail-modal-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #007bff; 
    color: #ffffff; 
}
#hoadon-detail-modal-table input {
    width: 100%;
    padding: 2px;
    box-sizing: border-box; 
    /*border: 1px solid #ccc;*/
    /*border-radius: 4px;*/
    border: none;
    border-radius: 0;
    box-shadow: none;
    
    /* 2. Xóa nền trắng để nó hòa vào bảng */
    background-color: transparent;
    padding: 7px 0
}

/* (CHÈN MỚI) CSS cho TFOOT STICKY (Báo giá, Đơn hàng, Hóa đơn) */

#baogia-detail-modal-table tfoot td,
#donhang-detail-modal-table tfoot td,
#hoadon-detail-modal-table tfoot td {
    position: sticky;
    bottom: 0;
    background-color: #f4f4f4; /* Màu nền để che nội dung cuộn bên dưới */
    z-index: 10;
    border-top: 2px solid #007bff; /* Viền xanh cho nổi bật */
    color: #000; /* <-- THÊM DÒNG NÀY ĐỂ ĐỔI CHỮ THÀNH MÀU ĐEN */
}

/* Định dạng các ô tổng cộng */
.total-field {
    background-color: #eee;
    font-weight: bold;
    text-align: right;
    border: none !important;
}

.number-input {
    text-align: right;
}

.button-group {
    display: flex;       /* Sắp xếp các nút theo hàng ngang */
    gap: 8px;            /* Tạo khoảng cách 8px giữa các nút */
    align-items: center; /* Căn giữa các nút theo chiều dọc (nếu cần) */
    margin-right: auto;
}

/* Yêu cầu 3: Bật thanh cuộn cho bảng chi tiết Nhập Mua */
#nhapmua-detail-table-wrapper {
    overflow-x: auto; /* Đã có (cho cuộn ngang) */
    overflow-y: auto; /* THÊM MỚI (cho cuộn dọc) */
    
    /* THÊM MỚI: Giới hạn chiều cao của bảng */
    height: 300px; /* Bạn có thể điều chỉnh 300px thành 250px, 400px... */
    
    display: block; /* Đảm bảo nó hoạt động nhất quán */
}

/* (Tùy chọn) Giữ tiêu đề bảng (thead) cố định khi cuộn dọc */
#nhapmua-detail-modal-table thead th {
    position: sticky;
    top: 0;
    /* (Bạn cần đặt màu nền cho tiêu đề, nếu không nó sẽ bị trong suốt) */
    background-color: #007bff; /* (Màu tiêu đề bảng của bạn) */
    color: white;
    z-index: 10;
}

/* ======================================= */
/* --- TÙY CHỈNH BẢNG CHI TIẾT NHẬP MUA --- */
/* ======================================= */

/* Yêu cầu 3: Thay đổi khoảng cách (padding) giữa các ô */
#nhapmua-detail-modal-table th,
#nhapmua-detail-modal-table td {
    padding: 3px 5px !important; /* Giảm khoảng cách bên trong ô */
    vertical-align: middle;
}

/* Yêu cầu 2: Bỏ đường viền của các ô input */
#nhapmua-detail-modal-table input[type="text"],
#nhapmua-detail-modal-table input[type="number"] {
    
    /* 1. Xóa viền, bo góc, nền, và bóng */
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    outline: none; /* Xóa viền xanh khi click */
    
    /* 2. Chỉ vẽ một đường kẻ mỏng ở dưới */
    border-bottom: 1px solid #ccc;
    
    /* 3. Đảm bảo input chiếm hết ô */
    width: 100%;
    padding: 2px 0; 
}

/* (Tùy chọn) Đổi màu đường kẻ khi đang gõ (focus) */
#nhapmua-detail-modal-table input[type="text"]:focus,
#nhapmua-detail-modal-table input[type="number"]:focus {
    border-bottom: 2px solid #007bff; /* Đổi thành màu xanh */
}

/* (Tùy chọn) Ẩn mũi tên tăng/giảm của ô input số 
#nhapmua-detail-modal-table input[type="number"] {
  -moz-appearance: textfield;
}*/
#nhapmua-detail-modal-table input[type="number"]::-webkit-inner-spin-button,
#nhapmua-detail-modal-table input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#nhapmua-detail-modal-table {
    width: 170%;
    /*table-layout: fixed;
    border-collapse: collapse;*/
}

/* ================================================= */
/* --- TÙY CHỈNH THANH CUỘN RIÊNG (NHẬP MUA) --- */
/* ================================================= */

#nhapmua-master-pane {
    flex-basis: 60%; 
    flex-grow: 7;
    flex-shrink: 1; 
    overflow-y: auto; 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#nhapmua-detail-pane {
    flex-basis: 40%; 
    flex-grow: 3;
    flex-shrink: 1;
    overflow-y: auto; 
    margin-top: 2px; 
    display: flex; 
    flex-direction: column;
    width: 100%;
}

/* Yêu cầu 2: Bỏ đường viền của các ô input */
#dnnk-detail-modal-table input[type="text"],
#dnnk-detail-modal-table input[type="number"] {
    
    /* 1. Xóa viền, bo góc, nền, và bóng */
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    outline: none; /* Xóa viền xanh khi click */
    
    /* 2. Chỉ vẽ một đường kẻ mỏng ở dưới */
    border-bottom: 1px solid #ccc;
    
    /* 3. Đảm bảo input chiếm hết ô */
    width: 100%;
    padding: 2px 0; 
}

/* (Tùy chọn) Đổi màu đường kẻ khi đang gõ (focus) */
#dnnk-detail-modal-table input[type="text"]:focus,
#dnnk-detail-modal-table input[type="number"]:focus {
    border-bottom: 2px solid #007bff; /* Đổi thành màu xanh */
}

/* (Tùy chọn) Ẩn mũi tên tăng/giảm của ô input số 
#dnnk-detail-modal-table input[type="number"] {
  -moz-appearance: textfield;
}*/
#dnnk-detail-modal-table input[type="number"]::-webkit-inner-spin-button,
#dnnk-detail-modal-table input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- TÙY CHỈNH GIAO DIỆN ĐỀ NGHỊ NHẬP KHO (Split View) --- */
/* ========================================================= */

/* 1. Khóa thanh cuộn của cả trang (khi ở chế độ master-detail) */
.master-detail-layout #content {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Chiếm toàn bộ chiều cao màn hình */
    overflow: hidden; /* Ẩn thanh cuộn to của trang */
    padding-bottom: 10px;
}

/* 2. Khung chứa chia đôi màn hình */
.split-view-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Tự động chiếm hết khoảng trống còn lại */
    overflow: hidden; 
    gap: 10px;
}

/* 3. Định dạng chung cho các vùng cuộn */
.scrollable-pane {
    overflow: auto; /* Tự động hiện thanh cuộn khi cần */
    background-color: white;
    border: 1px solid #ccc;
    width: 100%;
}

/* 4. Phân chia chiều cao cho Đề nghị Nhập kho */
#dn-master-pane {
    flex: 0 0 50%; /* Master chiếm 50% chiều cao */
    min-height: 150px;
}

#dn-detail-pane {
    flex: 1; /* Detail chiếm phần còn lại */
    min-height: 150px;
}

/* 5. Cố định tiêu đề bảng (Sticky Header) */
#dn-table thead th,
#dn-detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #007bff; /* Màu xanh của header */
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 6. Đảm bảo bảng rộng hơn khung để hiện cuộn ngang */
#dn-table, #dn-detail-table {
    width: max-content; 
    min-width: 100%;
}

#btnLogout {
    background: none;
    border: none;
    color: #ff6b6b; /* Màu đỏ nhạt cho nút thoát */
    cursor: pointer;
    padding: 5px;
    margin-left: 10px;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
}

#btnLogout:hover {
    color: #ff4757;
    transform: scale(1.1);
}

/* 1. Cho phép header hiển thị nội dung tràn ra ngoài */


/* 3. Tạo vùng cuộn RIÊNG cho menu (để menu vẫn cuộn được) */
#mainMenu {
    overflow-y: auto; /* Chỉ cuộn phần menu */
    flex-grow: 1; /* Chiếm hết chiều cao còn lại */
    height: 0; /* Mẹo để flex-grow hoạt động đúng trên một số trình duyệt */
}
/* --- TOAST NOTIFICATION (Thông báo nổi) --- */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast-message {
    min-width: 250px;
    padding: 15px 20px;
    border-radius: 4px;
    color: rgb(4, 165, 69);
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateX(100%); /* Bắt đầu từ bên phải màn hình */
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
}

.toast-message.show {
    opacity: 1;
    transform: translateX(0); /* Trượt vào */
}

/* Màu sắc cho các loại thông báo */
.toast-success {
    background-color: #ffffff; /* Xanh lá */
    border-left: 5px solid #ffffff;
}

.toast-error {
    background-color: #dc3545; /* Đỏ */
    border-left: 5px solid #bd2130;
}

.toast-info {
    background-color: #17a2b8; /* Xanh dương */
    border-left: 5px solid #117a8b;
}
/*Kết thúc thông bao toast*/

/* CSS cho Tabs Hóa đơn*/
.tab-container {
    margin-top: 15px;
    border-bottom: 1px solid #dee2e6;
}
.tab-button {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
    color: #6c757d;
}
.tab-button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.tab-content {
    display: none; /* Ẩn mặc định */
    padding: 15px 0;
    border-top: 1px solid #007bff; /* Đường kẻ màu xanh khớp với tab active */
}
.tab-content.active {
    display: block; /* Hiện khi active */
}
/*Kết thúc css cho tab hóa đơn*/

/* --- THU HẸP KHOẢNG CÁCH BẢNG CHI TIẾT (PS_NX) --- */

/* 1. Giảm đệm (padding) cho tiêu đề và nội dung ô */
#nx-detail-modal-table th, 
#nx-detail-modal-table td {
    padding: 2px 4px !important; /* Trên/Dưới: 2px, Trái/Phải: 4px */
    vertical-align: middle;      /* Căn giữa theo chiều dọc */
}

/* 2. Điều chỉnh ô Input để nằm gọn và đẹp hơn */
#nx-detail-modal-table input.text-input,
#nx-detail-modal-table input.number-input {
    padding: 2px 2px; /* Giảm đệm trong ô nhập liệu */
    margin: 0;        /* Xóa lề thừa */
    height: 28px;     /* (Tùy chọn) Giảm chiều cao dòng nếu muốn bảng gọn hơn */
    font-size: 12px;  /* (Tùy chọn) Giảm cỡ chữ một chút */
}

/* 3. (Tùy chọn) Thu nhỏ ô checkbox */
#nx-detail-modal-table .detail-is-output {
    transform: scale(1.2); /* Giảm scale từ 1.5 xuống 1.2 cho đỡ to */
    margin-top: 4px;
}
/* ================================================= */
/* --- LAYOUT DANH SÁCH CỐ ĐỊNH HEADER (FIXED) --- */
/* ================================================= */

/* 1. Khóa thanh cuộn của cả trang */
.fixed-header-layout {
    height: 100vh;       /* Chiều cao bằng màn hình */
    overflow: hidden;    /* Ẩn thanh cuộn trang */
    display: flex;
    flex-direction: column;
}

/* 2. Vùng chứa bảng sẽ tự động co giãn và có thanh cuộn riêng */
.fixed-header-layout .page-content {
    flex-grow: 1;        /* Chiếm hết khoảng trống còn lại */
    overflow: auto;      /* Tự động hiện thanh cuộn Dọc/Ngang cho bảng */
    padding: 0;          /* Xóa đệm để bảng sát lề */
    margin-bottom: 10px;
}

/* 3. Cố định tiêu đề bảng (Sticky Header) */
.fixed-header-layout table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #007bff; /* Màu nền xanh (hoặc màu bạn thích) */
    color: white;              /* Chữ trắng */
    box-shadow: 0 2px 2px rgba(0,0,0,0.1); /* Bóng nhẹ ngăn cách */
    border-top: none;
}

/* --- BÁO CÁO TỔNG HỢP NXT --- */

/* 2. Custom Multi-select Dropdown (Chọn nhiều có checkbox) */
.multiselect-wrapper {
    position: relative;
    width: 100%;
}

.multiselect-btn {
    width: 100%;
    text-align: left;
    background: white;
    border: 1px solid #ced4da;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.multiselect-btn::after {
    content: '▼';
    position: absolute;
    right: 12px;
    font-size: 0.8em;
    color: #666;
}

.multiselect-dropdown {
    display: none; /* Ẩn mặc định */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ced4da;
    border-top: none;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.multiselect-dropdown.show {
    display: block;
}

.multiselect-item {
    padding: 5px 5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.multiselect-item:hover {
    background-color: #f1f1f1;
}

.multiselect-item input[type="checkbox"] {
    margin-right: 5px;
    transform: scale(1.2);
}

/* --- TÙY CHỈNH GIAO DIỆN BÁO CÁO --- */

/* 1. Thu hẹp tiêu đề trang */
.page-header h3 {
    margin: 2px 0; /* Giảm lề trên dưới */
    font-size: 15px;
}
.page-header {
    padding-bottom: 2px; /* Giảm khoảng cách với phần dưới */
    min-height: auto;
}

/* 2. Style cho ô tìm kiếm trong Dropdown (Smart Select) */
.multiselect-search-box {
    padding: 2px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
    position: sticky;
    top: 0;
    z-index: 1;
}
.multiselect-search-box input {
    width: 100%;
    padding: 4px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
}



/* 4. Giảm khoảng cách giữa các phần */
.filter-container {
    padding: 5px 5px !important; /* Giảm đệm bên trong */
    margin-bottom: 5px !important; /* Giảm khoảng cách với bảng */
}
/* --- CSS CHO BÁO CÁO TỔNG HỢP NXT (MỚI) --- */

/* Dòng Tổng nhóm */
.row-group-total td {
    background-color: #e2e6ea; /* Màu xám nhạt */
    font-weight: bold;
    color: #495057;
}

/* Dòng Tổng cộng toàn bảng */
.row-grand-total td {
    background-color: #fff3cd; /* Màu vàng nhạt */
    font-weight: bold;
    color: #856404;
    border-top: 2px solid #dee2e6;
}

/* Chỉnh chiều cao đồng bộ cho các ô input/select trên báo cáo */
.filter-row .form-control,
.filter-row .multiselect-btn {
    height: 16px !important; /* Độ cao chuẩn */
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px;
    line-height: 1.2;
}



/* --- STYLE CHO BÁO CÁO PHÂN NHÓM ĐA CẤP --- */

/* Cấp 1: Header (Ví dụ: Tên Kho) */
.group-header-1 td {
    background-color: #cce5ff; /* Xanh dương nhạt */
    color: #004085;
    font-weight: bold;
    text-transform: uppercase;
}

/* Cấp 1: Tổng cộng */
.group-total-1 td {
    background-color: #d1ecf1; /* Xanh ngọc nhạt */
    color: #0c5460;
    font-weight: bold;
    border-top: 2px solid #a1c4fd;
}

/* Cấp 2: Header (Ví dụ: Tên Nhóm SP) */
.group-header-2 td {
    background-color: #e2e6ea; /* Xám nhạt */
    color: #495057;
    font-weight: bold;
    padding-left: 30px !important; /* Thụt đầu dòng */
    font-style: italic;
}

/* Cấp 2: Tổng cộng */
.group-total-2 td {
    background-color: #f8f9fa; /* Trắng xám */
    color: #333;
    font-weight: bold;
    font-style: italic;
    border-top: 1px solid #dee2e6;
}

/* Dòng Tiêu đề Nhóm (chứa cả tên nhóm và số liệu tổng) */
.group-header-row td {
    background-color: #e2e6ea; /* Màu xám xanh nhạt */
    color: #212529;
    position: sticky; /* (Tùy chọn) Nếu muốn header nhóm dính khi cuộn */
    /* top: 40px; (Nếu dùng sticky thì phải tính toán top so với thead) */
    vertical-align: middle;
}

/* --- STYLE BÁO CÁO PHÂN CẤP (TỔNG TRÊN HEADER) --- */

/* Cấp 1 (Cha - Ví dụ: Kho) */
.group-level-1 td {
    background-color: #cce5ff; /* Xanh dương đậm hơn chút */
    color: #004085;
    font-weight: bold; /* Rất đậm */
    text-transform: uppercase;
    border-top: 2px solid #b8daff;
    vertical-align: middle;
}

/* Cấp 2 (Con - Ví dụ: Nhóm SP) */
.group-level-2 td {
    background-color: #e2e6ea; /* Xám xanh */
    color: #495057;
    font-weight: bold; /* Đậm vừa */
    font-style: italic;
    vertical-align: middle;
}
/* Thụt đầu dòng cho tên Cấp 2 */
.group-level-2 .group-label {
    padding-left: 25px !important;
}

/* Dòng Tổng cộng chung (cuối bảng) */
.grand-total-row td {
    background-color: #ffeeba; /* Màu vàng */
    font-weight: bold;
    color: #856404;
    border-top: 2px solid #dee2e6;
    font-size: 1.1em;
}

/* --- BÁO CÁO TỔNG HỢP NHẬP XUẤT TỒN (FIXED LAYOUT) --- */

/* 1. Khóa chiều cao trang, chia layout thành 3 phần: Header, Filter, Table */
.report-fixed-layout {
    height: calc(100vh - 60px); /* Trừ đi chiều cao header chung của app */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Bỏ thanh cuộn của trang */
    padding-bottom: 5px;
}

/* 2. Phần bộ lọc: Không cho co lại, có border dưới */
.report-filter-section {
    flex-shrink: 0; /* Không bị co lại */
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 8px;
    margin-bottom: 8px;
}

/* 3. Phần bảng: Chiếm toàn bộ không gian còn lại, có thanh cuộn riêng */
.report-table-section {
    flex-grow: 1;
    overflow: auto; /* Thanh cuộn xuất hiện ở đây */
    border: 1px solid #ccc;
    background: white;
}

/* 4. Cố định tiêu đề bảng */
.report-table-section thead th {
    position: sticky;
    top: 0;
    z-index: 100; /* Nổi lên trên */
    background-color: #007bff;
    color: white;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}

/* 5. Style cho các ô lọc (Giải quyết vụ đè nhau) */
.filter-item {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Quan trọng: Cho phép co nhỏ hơn nội dung nếu cần */
}

.filter-label {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
}

/* =========================================================== */
/* --- GIẢI PHÁP LAYOUT BÁO CÁO NXT (CSS GRID + FIXED) --- */
/* =========================================================== */

/* 1. Khóa cứng chiều cao trang, bỏ thanh cuộn Body */
.nxt-page-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px); /* Trừ header chung của web */
    overflow: hidden; /* CẮT BỎ THANH CUỘN TRANG */
    padding: 0 10px;
    box-sizing: border-box;
}

/* 2. Header tiêu đề */
.nxt-header {
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* 3. Khung Bộ lọc dùng CSS GRID (Giải quyết triệt để việc đè nhau) */
.nxt-filter-box {
    flex-shrink: 0;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 2px;
}

.nxt-grid-row {
    display: grid;
    /* Định nghĩa cột: Ngày(120px) Ngày(120px) Kho(200px) Nhóm(200px) SP(Tự giãn) */
    grid-template-columns: 120px 120px 200px 200px minmax(200px, 1fr); 
    gap: 15px; /* Khoảng cách cứng 15px, KHÔNG BAO GIỜ ĐÈ NHAU */
    align-items: end;
}

.nxt-grid-row-2 {
    display: grid;
    grid-template-columns: 250px auto; /* Cột phân nhóm và Nút xem */
    gap: 15px;
    margin-top: 5px;
    align-items: end;
}

/* 4. Label và Input */
.nxt-label {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    display: block;
}

.nxt-input, .multiselect-btn, .form-control {
    width: 100%; /* Luôn chiếm 100% ô grid chứa nó */
    height: 36px;
    font-size: 13px;
    box-sizing: border-box !important; /* Ngăn tràn do padding */
}

/* 5. Vùng Bảng dữ liệu (Có thanh cuộn riêng) */
.nxt-table-container {
    flex-grow: 1; /* Chiếm hết phần còn lại */
    overflow: auto; /* Thanh cuộn xuất hiện ở đây */
    border: 1px solid #ccc;
    background: white;
    position: relative;
}



/* 6. Responsive: Nếu màn hình quá nhỏ, chuyển sang cột dọc */
@media (max-width: 1200px) {
    .nxt-grid-row {
        grid-template-columns: 1fr 1fr 1fr; /* 3 cột */
    }
}
/* Dòng được chọn trong báo cáo */
tr.selected-row td {
    background-color: #fff3cd !important; /* Màu vàng nhạt */
    color: #856404;
}


/* 4. Xử lý dòng Tổng nhóm/Tổng cộng (Khi cuộn cũng phải dính) */
/* Dòng Header nhóm (Cấp 1 & 2) */
.group-level-1 td.fix-group,
.group-level-2 td.fix-group {
    position: sticky;
    left: 0;
    z-index: 19;
    border-right: 2px solid #ccc;
}
/* Giữ màu nền của nhóm khi sticky */
.group-level-1 td.fix-group { background-color: #cce5ff; }
.group-level-2 td.fix-group { background-color: #e2e6ea; }

/* Dòng Tổng cộng chung */
.grand-total-row td.fix-total {
    position: sticky;
    left: 0;
    z-index: 19;
    background-color: #fff3cd;
    border-right: 2px solid #ccc;
}

/* --- CỐ ĐỊNH HEADER CỦA 2 CỘT ĐẦU TIÊN --- */

/* 1. Định dạng chung cho cột cố định (Cả Header và Body) */
.fix-col-1, .fix-col-2 {
    position: sticky !important;
    background-color: #ffffff; /* Màu nền mặc định cho ô dữ liệu */
    z-index: 20; /* Nổi lên trên các ô dữ liệu thường */
}

/* 2. Thiết lập vị trí (Cột 1 dính lề trái, Cột 2 dính sau cột 1) */
/* 2. Cột Tên SP (Cột thứ hai) */



/* 3. QUAN TRỌNG: Cấu hình riêng cho HEADER (TH) để nó không bị trôi */
/* 3. Xử lý Header (Giao điểm của Sticky Ngang và Dọc) */
/* Header của cột cố định phải nổi cao nhất */

/* 4. Xử lý vị trí Ngang (Sticky Left) cho Cột Cố định */
/* Cột 1: Mã SP */

/* 6. Màu nền cho dòng được chọn (khi sticky) */
tr.selected-row .fix-col-1,
tr.selected-row .fix-col-2 {
    background-color: #fff3cd !important; /* Màu vàng nhạt */
}

/* --- SỬA LỖI CỐ ĐỊNH CỘT MÃ HÀNG & TÊN HÀNG (BẢN FINAL) --- */

/* 1. Đảm bảo bảng dùng border-collapse: separate (Bắt buộc cho Sticky) */
.nxt-table-container table {
    border-collapse: separate !important; 
    border-spacing: 0;
}


/* 2. Xử lý Header chung (Dòng 1 và Dòng 2) */
.nxt-table-container thead th {
    position: sticky;
    background-color: #007bff;
    color: white;
    z-index: 50;
}

/* Dòng 1 (Mã, Tên, ĐVT, Tồn đầu...) dính sát đỉnh */
.nxt-table-container thead tr:first-child th {
    top: 0;
}

/* Dòng 2 (SL, Giá trị...) dính dưới dòng 1 (cách đỉnh 30px) */
.nxt-table-container thead tr:nth-child(2) th {
    top: 30px; 
    border-top: 1px solid #e9ecef;
}

/* CỘT 1: MÃ SP */
.nxt-table-container thead th.fix-col-1 {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;  /* Bắt buộc dính đỉnh */
    z-index: 100 !important; /* Cao nhất: Nổi lên trên tất cả */
    background-color: #007bff !important; /* Màu nền xanh che nội dung trôi qua */
    border-right: 1px solid #ddd;
}

/* CỘT 2: TÊN SP */
.nxt-table-container thead th.fix-col-2 {
    position: sticky !important;
    left: 80px !important; /* Cách lề trái = Width cột 1 */
    top: 0 !important;  /* Bắt buộc dính đỉnh */
    z-index: 100 !important; 
    background-color: #007bff !important;
    border-right: 2px solid #bbb !important;
}

/* 4. Xử lý cột Dữ liệu bên dưới (Body) */
.fix-col-1 {
    position: sticky;
    left: 0;
    z-index: 20;
    background-color: #fff;
}


/* Cột 2: Tên SP */
.fix-col-2 {
    position: sticky;
    left: 80px; /* Cách lề trái = Width cột 1 */
    z-index: 20;
    background-color: #fff;
    border-right: 2px solid #bbb !important; /* Đường kẻ đậm ngăn cách */
}

/* --- CỐ ĐỊNH CỘT CHO SỔ CHI TIẾT (SCT) --- */

/* 1. Cấu hình chung cho các cột cố định */
.fix-sct-1, .fix-sct-2, .fix-sct-3 {
    position: sticky !important;
    z-index: 20;
    background-color: #ffffff; /* Màu nền trắng cho dữ liệu */
    border-right: 1px solid #ddd;
}

/* 2. Vị trí cố định (Left) */
/* Cột 1: Ngày CT (Rộng 100px) */
.fix-sct-1 { left: 0 !important; }

/* Cột 2: Số CT (Rộng 120px) -> Cách trái 100px */
.fix-sct-2 { left: 100px !important; }

/* Cột 3: Diễn giải (Rộng 300px) -> Cách trái 100 + 120 = 220px */
.fix-sct-3 { 
    left: 220px !important; 
    border-right: 2px solid #bbb !important; /* Đường kẻ đậm ngăn cách */
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* 3. Xử lý Header (TH) - Phải nổi lên trên cùng */
.nxt-table-container thead th.fix-sct-1,
.nxt-table-container thead th.fix-sct-2,
.nxt-table-container thead th.fix-sct-3 {
    z-index: 60 !important; /* Cao nhất */
    background-color: #007bff !important; /* Giữ màu xanh */
    color: white !important;
    top: 0 !important; /* Dính đỉnh */
}

/* 4. Xử lý dòng Tồn đầu/Tổng cộng (Phải dính và có màu nền riêng) */
tr[style*="background"] .fix-sct-1,
tr[style*="background"] .fix-sct-2,
tr[style*="background"] .fix-sct-3 {
    background-color: inherit !important; /* Kế thừa màu nền của dòng (xám/vàng) */
    font-weight: bold;
}

.text-right {
    text-align: right !important; /* Dùng !important để chắc chắn căn phải */
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.bold {
    font-weight: bold;
}

/* Style cho ô tổng trong Footer của Hóa đơn*//*
.footer-input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    font-weight: bold;
    text-align: right;
    padding: 0 4px;
    color: #333;
}*/