* { box-sizing: border-box; }
body { font-family: Arial; background: #f4f4f4; margin: 0; padding: 20px; }
.container { max-width: 1000px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #333; }
table { width: 100%; border-collapse: collapse; margin: 15px 0; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
th { background: #f0f0f0; }
input, select { width: 100%; padding: 6px; }
button { padding: 8px 16px; margin: 5px; cursor: pointer; }
.alert { padding: 10px; margin: 10px 0; border-radius: 4px; }
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
.btn-config, .btn-back { display: inline-block; padding: 8px 16px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; margin-top: 10px; }

input[list] {
    padding: 8px 30px 8px 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 12px;
    width: 100%;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#submit-btn.loading {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- GLOBAL STYLE (Dùng chung cho cả 4 file) --- */
* { box-sizing: border-box; }
body { 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Font hiện đại hơn */
    background: #f0f2f5; 
    margin: 0; 
    padding: 20px; 
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Container chính dạng Card */
.container { 
    width: 100%;
    max-width: 1400px; /* Cho phép rộng hơn trên màn to */
    margin: 0 auto; 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    display: flex;
    flex-direction: column;
    max-height: 95vh; /* Giới hạn chiều cao để tạo thanh cuộn bên trong */
}

h1 { text-align: center; color: #343a40; margin-top: 0; font-size: 24px; }
h2 { color: #495057; border-bottom: 2px solid #eee; padding-bottom: 10px; }

/* Alert Styles */
.alert { padding: 12px; margin: 10px 0; border-radius: 6px; font-weight: 500; }
.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* --- RIÊNG CHO BẢNG NHẬP LIỆU (INDEX.EJS) --- */

/* Wrapper tạo thanh cuộn cho bảng */
.table-responsive {
    flex: 1; /* Chiếm hết khoảng trống còn lại */
    overflow: auto; /* Cuộn ngang và dọc */
    border: 1px solid #dee2e6;
    margin-bottom: 15px;
    border-radius: 4px;
}

#order-table { 
    width: 100%; 
    border-collapse: separate; /* Để hỗ trợ sticky header */
    border-spacing: 0;
}

/* Sticky Header: Luôn nổi ở trên khi cuộn */
#order-table thead th { 
    position: sticky; 
    top: 0; 
    background: #e9ecef; 
    color: #495057; 
    z-index: 10;
    padding: 12px 10px;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    white-space: nowrap;
    text-align: left;
    font-weight: 600;
}

#order-table tbody td {
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    padding: 0; /* Bỏ padding để input tràn viền */
    background: #fff;
}

/* CẤU HÌNH ĐỘ RỘNG CỘT - GIẢI QUYẾT TÊN DÀI */
#order-table th:nth-child(1), #order-table td:nth-child(1) { min-width: 220px; width: 20%; text-align: center; } /* Đại lý */
#order-table th:nth-child(2) { min-width: 80px; text-align: center; } /* CK */
#order-table th:nth-child(3), 
#order-table td:nth-child(3),
#order-table th:nth-child(4), 
#order-table th:nth-child(5), 
#order-table th:nth-child(6), 
#order-table th:nth-child(7) { min-width: 120px; text-align: center; } /* Các cột tiền */

/* Input trong bảng: Tràn viền, nhìn sạch sẽ */
#order-table input { 
    width: 100%; 
    padding: 10px 12px; 
    border: none; 
    outline: none;
    font-size: 14px;
    background: transparent;
}

#order-table input:focus { 
    background: #e8f0fe; /* Highlight màu xanh nhạt khi nhập */
    box-shadow: inset 0 -2px 0 #0d6efd;
}

/* Căn phải cho số */
.price, .qty, .total, .discount, .discount-amount, .final-amount { text-align: right; }

/* Các ô Readonly (không sửa) làm màu xám nhẹ */
input[readonly] { color: #555; cursor: default; }

/* --- BUTTONS & ACTIONS --- */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    background: white;
    border-top: 1px solid #eee;
}

button { 
    padding: 10px 18px; 
    cursor: pointer; 
    border-radius: 5px; 
    border: none; 
    font-size: 14px;
    font-weight: 500;
    transition: 0.2s;
}

.btn-add { background: #28a745; color: white; }
.btn-add:hover { background: #218838; }

#submit-btn { background: #007bff; color: white; }
#submit-btn:hover { background: #0069d9; }
#submit-btn:disabled { background: #ccc; cursor: not-allowed; }

.btn-remove { 
    background: transparent; 
    color: #dc3545; 
    font-weight: bold;
    padding: 5px 10px;
}
.btn-remove:hover { background: #fee; border-radius: 4px; }

/* Custom icon dropdown cho input list */
input[list] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/* Style cơ bản cho các bảng Admin/Config (kế thừa style đẹp) */
table:not(#order-table) { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
table:not(#order-table) th, table:not(#order-table) td { padding: 10px; border: 1px solid #dee2e6; text-align: left; }
table:not(#order-table) th { background: #e9ecef; }

/* --- GIỮ LẠI CÁC STYLE CŨ VÀ CẬP NHẬT CÁC PHẦN SAU --- */

/* 2. Header chứa Tiêu đề và Nút Admin */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.page-header h1 {
    margin: 0;
    text-align: left; /* Căn trái cho đẹp mắt khi có nút bên cạnh */
}

/* 3. Nút Đăng xuất - Ghim góc màn hình (Fixed Position) */
.btn-logout-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #dc3545;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    z-index: 1000;
}

.btn-logout-fixed:hover {
    background-color: #c82333;
    transform: translateY(-2px); /* Hiệu ứng nảy lên nhẹ */
}

/* Wrapper cho bảng trong trang Admin */
.admin-table-container {
    max-height: 400px; /* Giới hạn chiều cao danh sách người dùng */
    overflow-y: auto;  /* Cuộn dọc nếu nhiều người dùng */
    overflow-x: auto;  /* Cuộn ngang nếu màn hình nhỏ */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-top: 15px;
}

/* Làm bảng admin đẹp hơn */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Đảm bảo không bị quá hẹp */
}

.admin-table th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 5;
    border-bottom: 2px solid #dee2e6;
    padding: 12px;
}

.admin-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

/* Nút xóa trong bảng admin */
.btn-delete {
    background-color: #ff4d4f;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-delete:hover {
    background-color: #ff7875;
}

/* --- RESPONSIVE CHO ĐIỆN THOẠI (Dưới 768px) --- */
/* ==================== TỐI ƯU TOÀN DIỆN CHO MOBILE (Dưới 768px) ==================== */
@media screen and (max-width: 768px) {
    body { padding: 5px; height: auto; }

    .container { 
        padding: 10px; 
        max-width: 100% !important; 
        width: 100%;
        margin: 0;
        max-height: none; /* Cho phép cuộn trang tự nhiên */
    }

    /* 1. Header & Logout */
    .page-header { flex-direction: column; align-items: center; gap: 10px; }
    .btn-logout-fixed {
        position: static;
        display: block;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    /* 2. Bảng nhập liệu: Chuyển hoàn toàn sang dạng Card */
    .table-responsive { 
        overflow: visible; 
        border: none; 
        width: 100% !important;
    }

    #order-table thead { display: none; } /* Ẩn tiêu đề bảng */

    #order-table tbody tr {
        display: block;
        width: 100% !important;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 12px;
        background: #fff;
        position: relative;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        box-sizing: border-box; /* Đảm bảo không tràn màn hình */
    }

    /* 3. Căn chỉnh từng dòng (Dùng Flexbox để chia Nhãn - Ô nhập) */
    #order-table tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        width: 100% !important;
        min-height: auto !important;
    }

    /* Nhãn bên trái */
    #order-table td::before {
        content: attr(data-label);
        font-weight: bold;
        flex: 0 0 30%;
        text-align: left;
        font-size: 13px;
        color: #555;
    }

    /* 4. Ô nhập liệu và hiển thị số bên phải */
    #order-table input, 
    .display, 
    .price-display.display,
    .ts-control {
        flex: 1; /* Chiếm 65% diện tích còn lại */
        width: auto !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 16px !important;
        text-align: right !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        margin: 0;
        box-sizing: border-box;
    }

    /* Tối ưu riêng cho TomSelect trên mobile */
    .ts-control { display: flex !important; align-items: center; justify-content: flex-end; }

    /* 5. Fix Background hiển thị số tiền */
    /* Màu nền xám nhẹ cho Giá, CK, SL để dễ nhìn */
    .display { background: #f8f9fa !important; color: #333 !important; }

    /* Màu hồng cho các cột kết quả (Tổng, Tiền CK, Thành tiền) */
    #order-table td[data-label="Thành tiền"] .display,
    #order-table td[data-label="Tiền CK"] .display,
    #order-table td[data-label="Tổng"] .display,
    .final-amount.display {
        background: #fff0f6 !important; 
        color: #d63384 !important;
        border: 1px solid #ffadd2 !important;
        font-weight: bold !important;
    }

    .note-textarea {
        min-height: 60px;
    }

    /* 6. Nút Xóa (Ghim vào góc card) */
    .btn-remove {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #ff4d4f !important;
        color: #fff !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* 7. Phần Tổng cộng cuối bảng (Footer) */
    #order-table tfoot td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20px 10px !important;
        background: #fff;
        border-radius: 10px;
        margin-top: 10px;
    }

    #grand-final-amount {
        font-size: 26px !important;
        color: #d63384 !important;
        font-weight: 800;
    }

    /* 8. Action Bar (Nút thêm, Nút Gửi đơn) */
    .action-bar {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 15px;
        flex-direction: column;
        gap: 12px;
        margin: 15px -10px -10px -10px;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
        z-index: 100;
    }

    .action-bar button {
        width: 100%;
        height: 55px;
        font-size: 18px;
        border-radius: 12px;
    }
}

/* Popup thành công */
.success-popup {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.success-popup.show {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: popupScale 0.4s ease-out;
}

@keyframes popupScale {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.popup-icon {
    font-size: 60px;
    color: #28a745;
    margin-bottom: 15px;
}

.popup-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.popup-order-code {
    font-size: 28px;
    font-weight: bold;
    color: #d63384;
    background: #f8f9fa;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 20px 0;
    letter-spacing: 2px;
}

.popup-btn {
    background: #007bff;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

.popup-btn:hover {
    background: #0056b3;
}

@media (max-width: 768px) {
    .popup-content { padding: 20px; }
    .popup-order-code { font-size: 24px; }
}

.display {
    display: block;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    text-align: right;
    font-family: 'Segoe UI', sans-serif;
    min-height: 38px;
    line-height: 1.5;
    font-size: 15px;
}

@media print {
body { 
    font-family: 'Segoe UI', Arial, sans-serif; 
    margin: 15mm; 
    color: #000;
}
h1 { 
    text-align: center; 
    font-size: 24pt; 
    margin-bottom: 20pt; 
    color: #333;
}
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 20px 0; 
    font-size: 11pt;
}
th, td { 
    border: 1px solid #999; 
    padding: 10px; 
    text-align: left; 
    vertical-align: top;
}
th { 
    background-color: #f0f0f0; 
    font-weight: bold; 
    text-align: center;
}
.text-right { text-align: right; }
.text-center { text-align: center; }
.bold { font-weight: bold; }
.large { font-size: 14pt; }
.highlight { 
    background-color: #e8f5e9; 
    font-size: 14pt; 
    font-weight: bold;
}
.header-info td { 
    background-color: #f8f9fa; 
    font-size: 12pt;
}
.no-border { border: none; }
}


.ts-control, .ts-dropdown {
  font-size: 16px !important;
}
.ts-dropdown {
    z-index: 9999 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    border: 1px solid #ced4da !important;
}

/* ==================== TOM SELECT FIXES - QUAN TRỌNG NHẤT ==================== */

/* Đảm bảo TomSelect dropdown không bị cắt khi nằm trong bảng cuộn */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* TomSelect wrapper phải có position relative để dropdown định vị đúng */
.ts-wrapper {
    position: relative !important;
    width: 100% !important;
}

/* Nội dung trong dropdown item */
.ts-dropdown .option {
    white-space: normal !important; 
    word-break: break-word;        
    padding: 10px 15px !important;
    line-height: 1.4;
}

.ts-dropdown .ts-dropdown-content {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* Input trong TomSelect */
.ts-control {
    min-height: 48px !important;
    display: flex;
    align-items: center;
    font-size: 16px !important;
}

.ts-control input {
    font-size: 15px !important;
    height: auto !important;
}

/* Khi đang tìm kiếm - cho phép xuống dòng nếu cần */
.ts-control .input-active {
    width: 100% !important;
}

/* ==================== BẢNG NHẬP LIỆU - FIX Ô BỊ CẮT NỘI DUNG ==================== */

#order-table tbody td {
    padding: 6px 4px !important; /* Giảm padding để dành chỗ cho TomSelect */
    vertical-align: top;
    min-height: 50px; /* Đảm bảo ô đủ cao */
    position: relative; /* Cần cho TomSelect dropdown */
}

/* Đặc biệt: ô Sản phẩm (cột rộng nhất) */
#order-table td:nth-child(1) { /* Cột Sản phẩm */
    min-width: 280px !important;
    width: 35% !important;
}

/* Các cột số: căn phải, đủ rộng */
#order-table td:nth-child(2), /* CK % */
#order-table td:nth-child(3), /* Giá */
#order-table td:nth-child(4), /* SL */
#order-table td:nth-child(5), /* Tổng */
#order-table td:nth-child(6), /* Tiền CK */
#order-table td:nth-child(7)  /* Thành tiền */
{
    text-align: right;
    min-width: 100px !important;
    padding-right: 12px !important;
}

/* Input số trong bảng */
#order-table input[type="number"] {
    text-align: right;
    padding: 10px 8px;
    font-size: 15px;
}

/* Span hiển thị số (display) */
.display {
    display: block;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    text-align: right;
    font-family: 'Segoe UI', sans-serif;
    min-height: 44px;
    line-height: 1.4;
    font-size: 15px;
    font-weight: 500;
}

/* ==================== RESPONSIVE MOBILE - CẢI THIỆN TOMSELECT ==================== */

@media screen and (max-width: 768px) {
    .ts-control, 
    .ts-dropdown,
    .ts-dropdown .option {
        font-size: 16px !important;
    }

    .ts-control {
        min-height: 48px !important;
        padding: 12px !important;
    }

    #order-table tbody td {
        padding: 10px 5px !important;
        min-height: 60px !important;
    }

    /* Ô sản phẩm rộng hơn trên mobile */
    #order-table td:nth-child(1) {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* Các cột số vẫn căn phải */
    #order-table td:nth-child(2),
    #order-table td:nth-child(3),
    #order-table td:nth-child(4),
    #order-table td:nth-child(5),
    #order-table td:nth-child(6),
    #order-table td:nth-child(7) {
        min-width: 0 !important;
        width: 100% !important;
    }

    .display {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 12px !important;
    }

    /* Nút xóa góc trên phải */
    .btn-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        background: #fff0f0;
        border: 1px solid #ffbaba;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
        z-index: 10;
    }
}

/* ==================== ĐẢM BẢO DROPDOWN HIỆN TRÊN POPUP ==================== */

.success-popup {
    z-index: 2000 !important;
}

.note-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}



.note-textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  resize: vertical;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}