* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f6f7f9;
    color: #252525;
}

/* =========================
   SIDEBAR
========================= */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 235px;
    height: 100vh;
    background: #f1e9e9;
    border-right: 1px solid #e7e7e7;
    padding: 14px 14px 24px;
}
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}

.logo img {
    width: 195px;
    height: auto;
    display: block;
    object-fit: contain;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.menu-item {
    width: 100%;
    border: none;
    background: transparent;
    padding: 13px 15px;
    border-radius: 8px;
    text-align: left;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-item span {
    width: 22px;
    font-size: 17px;
}

.menu-item:hover {
    background: #f5f5f5;
}

.menu-item.active {
    background: #222;
    color: white;
    font-weight: 600;
}


/* =========================
   MAIN
========================= */

.main-content {
    margin-left: 235px;
    padding: 32px 38px;
    min-height: 100vh;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.page-header h1 {
    font-size: 28px;
    margin-bottom: 7px;
}

.page-header p {
    color: #888;
    font-size: 14px;
}

.header-actions {
    display: flex;
    gap: 10px;
}


/* =========================
   BUTTON
========================= */

.btn {
    border: none;
    padding: 11px 17px;
    border-radius: 7px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}

.btn.primary {
    background: #222;
    color: white;
}

.btn.primary:hover {
    background: #000;
}

.btn.secondary {
    background: white;
    border: 1px solid #dddddd;
    color: #333;
}

.btn.secondary:hover {
    background: #f7f7f7;
}


/* =========================
   SUMMARY
========================= */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.summary-card {
    background: white;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.summary-icon {
    width: 45px;
    height: 45px;
    border-radius: 9px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.summary-label {
    color: #888;
    font-size: 13px;
    margin-bottom: 5px;
}

.summary-number {
    font-size: 23px;
    font-weight: 700;
}


/* =========================
   CONTENT CARD
========================= */

.content-card {
    background: white;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    overflow: hidden;
}

.card-header {
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
}

.card-header h2 {
    font-size: 17px;
    margin-bottom: 5px;
}

.card-header p {
    color: #999;
    font-size: 13px;
}


/* =========================
   SEARCH
========================= */

.search-box {
    width: 280px;
    height: 40px;
    border: 1px solid #dddddd;
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #999;
    gap: 8px;
}

.search-box input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 13px;
}


/* =========================
   TABLE
========================= */

.table-container {
    overflow-x: auto;
}

.product-table {
    width: 100%;
    border-collapse: collapse;
}

.product-table th {
    background: #fafafa;
    color: #777;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid #eeeeee;
    white-space: nowrap;
}

.product-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #eeeeee;
    font-size: 13px;
    vertical-align: middle;
}

.product-table tbody tr:hover {
    background: #fcfcfc;
}

.product-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================
   PRODUCT CODE
========================= */

.product-code {
    display: inline-block;
    background: #f1f1f1;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}


/* =========================
   BADGE
========================= */

.badge {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 11px;
}

.badge.gray {
    background: #f1f1f1;
    color: #777;
}


/* =========================
   TABLE BUTTON
========================= */

.table-btn {
    border: 1px solid #dddddd;
    background: white;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 4px;
}

.table-btn:hover {
    background: #f5f5f5;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1000px) {

    .sidebar {
        width: 190px;
    }

    .main-content {
        margin-left: 190px;
        padding: 25px;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        align-items: flex-start;
        gap: 20px;
    }

}

@media (max-width: 750px) {

    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    .main-content {
        margin-left: 0;
    }

    .page-header {
        flex-direction: column;
    }

    .header-actions {
        width: 100%;
    }

    .search-box {
        width: 100%;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

}
/* =========================================
   THANH LINH SALES - GIAO DIỆN ĐƠN HÀNG
========================================= */

/* Khung bảng */
#orderPage .content-card {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    background: #ffffff;
}

/* Phần đầu bảng */
#orderPage .card-header {
    padding: 20px 24px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
}

/* =========================================
   BẢNG DANH SÁCH ĐƠN HÀNG - KHÔNG CO CỘT
========================================= */

#orderPage .table-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#orderPage .product-table {
    width: max-content;
    min-width: 1250px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

#orderPage .product-table th,
#orderPage .product-table td {
    white-space: nowrap;
}

/* Không cho các cột thông tin dài bị ép quá nhỏ */
#orderPage .product-table th:nth-child(2),
#orderPage .product-table td:nth-child(2) {
    min-width: 100px;
}

#orderPage .product-table th:nth-child(3),
#orderPage .product-table td:nth-child(3) {
    min-width: 100px;
}

/* CỘT ĐỊA CHỈ - CHO PHÉP XUỐNG DÒNG */
#orderPage .product-table th:nth-child(5),
#orderPage .product-table td:nth-child(5) {
    min-width: 200px;
    max-width: 280px;
    width: 240px;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.5;
}

#orderPage .product-table th:nth-child(6),
#orderPage .product-table td:nth-child(6) {
    min-width: 100px;
}

/* Cột thao tác */
#orderPage .product-table th:last-child,
#orderPage .product-table td:last-child {
    min-width: 260px;
    white-space: nowrap;
}

/* Tiêu đề cột */
#orderPage .product-table th {
    background: #f8f9fb;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    vertical-align: middle;
}

/* Các ô */
#orderPage .product-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    vertical-align: middle;
}

/* Khoảng cách thị giác giữa các dòng */
#orderPage .product-table tbody tr {
    transition: background 0.15s ease;
}

/* Hover */
#orderPage .product-table tbody tr:hover {
    background: #fafafa;
}

/* Dòng cuối */
#orderPage .product-table tbody tr:last-child td {
    border-bottom: none;
}

/* Mã đơn */
#orderPage .product-table td:first-child {
    font-weight: 700;
    white-space: nowrap;
}

/* Số điện thoại */
#orderPage .product-table td:nth-child(4) {
    white-space: nowrap;
}

/* Tổng tiền */
#orderPage .product-table td:nth-child(7) {
    font-weight: 700;
    white-space: nowrap;
}

/* Trạng thái */
#orderPage .product-table td:nth-child(8) {
    white-space: nowrap;
}

/* Ô thao tác */
#orderPage .product-table td:last-child {
    white-space: nowrap;
}

/* =========================================
   NÚT XEM CHI TIẾT
========================================= */

.view-order-btn {
    border: 1px solid #d9d9d9;
    background: #ffffff;
    color: #333;
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: 8px;
}

.view-order-btn:hover {
    background: #222;
    color: #ffffff;
    border-color: #222;
}

/* Checkbox đơn hàng */
.order-select-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
}


/* =========================================
   MODAL CHUNG
========================================= */

#orderModal,
#orderDetailModal {
    backdrop-filter: blur(3px);
}

/* Khung modal */
#orderModal .modal-content,
#orderDetailModal .modal-content {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Header modal */
#orderModal .modal-header,
#orderDetailModal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
}

/* Tiêu đề modal */
#orderModal .modal-header h2,
#orderDetailModal .modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

/* Nội dung modal */
#orderModal .modal-body,
#orderDetailModal .modal-body {
    padding: 24px;
}

/* Footer modal */
#orderModal .modal-footer,
#orderDetailModal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #eeeeee;
    background: #fafafa;
}


/* =========================================
   THÔNG TIN CHI TIẾT ĐƠN
========================================= */

.order-detail-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    background: #f8f9fb;
    border: 1px solid #e8e9ec;
    border-radius: 10px;
    padding: 18px;
}

.order-detail-info p {
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.6;
}

.order-detail-info strong {
    display: inline-block;
    min-width: 105px;
    color: #555;
}


/* =========================================
   BẢNG SẢN PHẨM TRONG CHI TIẾT
========================================= */

#orderDetailModal .product-table {
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

#orderDetailModal .product-table th {
    background: #f7f8fa;
    padding: 12px 14px;
}

#orderDetailModal .product-table td {
    padding: 13px 14px;
}


/* =========================================
   TỔNG TIỀN CHI TIẾT
========================================= */

.order-detail-summary {
    margin-left: auto;
    max-width: 380px;
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 20px;
}

.order-detail-summary p {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 9px 0;
    font-size: 13px;
    border-bottom: 1px solid #e8e8e8;
}

.order-detail-summary p:last-child {
    border-bottom: none;
    padding-top: 14px;
    font-size: 16px;
    font-weight: 700;
}


/* =========================================
   RESPONSIVE MODAL
========================================= */

@media (max-width: 750px) {

    .order-detail-info {
        grid-template-columns: 1fr;
    }

    #orderDetailModal .modal-content {
        width: calc(100% - 24px);
        max-width: none;
    }

    .order-detail-summary {
        max-width: none;
    }

}
/* =========================================
   MODAL TẠO ĐƠN HÀNG - GIAO DIỆN MỚI
========================================= */

/* Lớp nền */
#orderModal {
    padding: 20px;
    backdrop-filter: blur(3px);
}

/* Khung chính */
#orderModal > div {
    background: #ffffff;
    width: 94%;
    max-width: 1100px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

/* Thanh tiêu đề */
#orderModal > div > div:first-child {
    padding: 22px 26px;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
}

/* Tiêu đề */
#orderModal > div > div:first-child h2 {
    font-size: 21px;
    font-weight: 700;
    color: #222;
}

/* Mô tả dưới tiêu đề */
#orderModal > div > div:first-child p {
    font-size: 13px;
    color: #999 !important;
}

/* Nút X */
#closeOrderModal {
    width: 36px;
    height: 36px;
    border-radius: 8px !important;
    color: #777;
    transition: 0.15s;
}

#closeOrderModal:hover {
    background: #f3f3f3 !important;
    color: #222;
}


/* =========================================
   CÁC KHỐI TRONG MODAL
========================================= */

#orderModal .content-card {
    margin: 20px 26px 0 !important;
    padding: 22px !important;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}

/* Tiêu đề từng khu vực */
#orderModal .content-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

/* Mô tả khu vực */
#orderModal .content-card p {
    color: #999;
    font-size: 12px;
}


/* =========================================
   LABEL
========================================= */

#orderModal label {
    display: block;
    margin-bottom: 7px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================
   Ô NHẬP
========================================= */

#orderModal input[type="text"],
#orderModal input[type="number"],
#orderModal select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dfe2e6;
    border-radius: 8px;
    background: #ffffff;
    color: #333;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#orderModal input[type="text"]:focus,
#orderModal input[type="number"]:focus,
#orderModal select:focus {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

#orderModal input::placeholder {
    color: #aaa;
}


/* =========================================
   ĐỊA CHỈ CŨ / MỚI
========================================= */

#orderOldAddressFields,
#orderNewAddressFields {
    margin-top: 12px;
    padding: 16px;
    background: #f8f9fb;
    border: 1px solid #e9ebee;
    border-radius: 10px;
}

/* Hai lựa chọn địa chỉ */
#orderModal input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #222;
}

#orderModal input[type="radio"] + * {
    margin: 0;
}


/* =========================================
   KHU VỰC SẢN PHẨM
========================================= */

#orderProductList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Các dòng sản phẩm được JS tạo ra */
#orderProductList > div {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafbfc;
}

/* Nút thêm sản phẩm */
#addOrderProductBtn {
    min-height: 40px;
    border-radius: 8px;
}


/* =========================================
   TỔNG ĐƠN HÀNG
========================================= */

#orderModal .content-card:has(#orderTotalQuantity) {
    background: #f8f9fb;
    border-color: #e2e4e8;
    padding: 20px 22px !important;
}

#orderModal .content-card:has(#orderTotalQuantity) h3 {
    margin-bottom: 4px;
}

#orderModal .content-card:has(#orderTotalQuantity) > div {
    line-height: 1.5;
}

/* Tổng thanh toán */
#orderGrandTotal {
    font-size: 20px;
    color: #222;
}


/* =========================================
   KHU VỰC NÚT CUỐI
========================================= */

#orderModal > div > div:last-child {
    padding: 20px 26px 24px;
}

/* Nút Hủy */
#cancelOrderBtn {
    min-width: 90px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #dcdfe3;
    border-radius: 8px;
    color: #555;
}

#cancelOrderBtn:hover {
    background: #f5f5f5;
}

/* Nút Lưu đơn */
#saveOrderBtn {
    min-width: 110px;
    height: 40px;
    border-radius: 8px;
}


/* =========================================
   THANH CUỘN MODAL
========================================= */

#orderModal > div::-webkit-scrollbar {
    width: 8px;
}

#orderModal > div::-webkit-scrollbar-track {
    background: #f5f5f5;
}

#orderModal > div::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 10px;
}


/* =========================================
   MÀN HÌNH NHỎ
========================================= */

@media (max-width: 750px) {

    #orderModal {
        padding: 10px;
    }

    #orderModal > div {
        width: 100%;
        max-height: 96vh;
        border-radius: 12px;
    }

    #orderModal .content-card {
        margin-left: 14px !important;
        margin-right: 14px !important;
        padding: 16px !important;
    }

    #orderModal > div > div:first-child {
        padding: 18px;
    }

}

/* =========================================
   MODAL CHỐT ĐƠN
========================================= */

#confirmOrderModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(0, 0, 0, 0.45);

    z-index: 99999 !important;
}

#confirmOrderModal .modal-content {
    width: 94%;
    max-width: 700px;
    max-height: 90vh;

    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);

    overflow: hidden;
}

#confirmOrderModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 22px;

    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
}

#confirmOrderModal .modal-header h2 {
    margin: 0;

    font-size: 20px;
    font-weight: 700;
    color: #222;
}

#confirmOrderModal .modal-header button {
    border: none;
    background: transparent;

    width: 36px;
    height: 36px;

    border-radius: 8px;

    font-size: 18px;
    cursor: pointer;
}

#confirmOrderModal .modal-header button:hover {
    background: #f3f3f3;
}

#confirmOrderModal textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;

    resize: vertical;

    padding: 15px;

    font-size: 15px;
    line-height: 1.6;

    border: 1px solid #ddd;
    border-radius: 8px;

    outline: none;
}

#confirmOrderModal textarea:focus {
    border-color: #999;
}

#confirmOrderModal > .modal-content > div:last-child {
    overflow-y: auto;
    max-height: calc(90vh - 75px);
}
/* Thu nhỏ các nút trong cột Thao tác */
.view-order-btn,
.edit-order-btn,
.confirm-order-btn {
    padding: 5px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    margin: 2px !important;
}

/* Giữ các nút thao tác trên cùng một hàng */
.view-order-btn,
.edit-order-btn,
.confirm-order-btn {
    display: inline-block !important;
}

/* Giữ toàn bộ nút Thao tác trên một hàng */
.view-order-btn,
.edit-order-btn,
.confirm-order-btn {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    margin: 1px !important;
}

/* Không cho ô Thao tác tự xuống dòng */
.order-select-checkbox {
    vertical-align: middle !important;
}

td:has(.view-order-btn) {
    white-space: nowrap !important;
    min-width: 260px !important;
}

/* =========================================
   TỔNG QUAN
========================================= */

#overviewPage {
    display: none;
}


/* Bộ lọc thời gian */

.overview-date-filter {
    padding: 9px 14px;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.overview-date-filter:focus {
    border-color: #999;
}


/* 4 ô thống kê */

.overview-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}


.overview-card {
    background: white;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 22px 24px;
    min-height: 90px;
    box-sizing: border-box;
}


.overview-card-label {
    font-size: 13px;
    color: #777;
    margin-bottom: 10px;
}


.overview-card-number {
    font-size: 24px;
    font-weight: 700;
    color: #222;
}


/* Hàng thứ hai */

.overview-summary-grid-secondary {
    margin-bottom: 20px;
}


/* Biểu đồ */

.overview-chart-card {
    background: white;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 22px 24px;
    box-sizing: border-box;
}


.overview-chart-header {
    margin-bottom: 15px;
}


.overview-chart-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #222;
}


.overview-chart-container {
    position: relative;
    width: 100%;
    height: 330px;
}


#overviewChart {
    width: 100%;
    height: 100%;
    display: block;
}


.overview-chart-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}


.overview-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}


.legend-dot.revenue {
    background: #333;
}


.legend-dot.profit {
    background: #888;
}


/* Responsive */

@media (max-width: 1000px) {

    .overview-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .overview-summary-grid {
        grid-template-columns: 1fr;
    }

    .overview-chart-container {
        height: 260px;
    }

}
 /* =========================
           INVENTORY
        ========================= */

        .inventory-card {
            background: white;
            border: 1px solid #e7e7e7;
            border-radius: 10px;
            overflow: hidden;
        }

        .inventory-toolbar {
            padding: 20px 24px;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .inventory-toolbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .inventory-product {
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 7px;
            font-size: 14px;
            width: 300px;
            outline: none;
        }

        .inventory-product:focus {
            border-color: #999;
        }

        .inventory-info {
            padding: 15px 24px;
            background: #fafafa;
            color: #777;
            font-size: 13px;
            border-bottom: 1px solid #eee;
        }

        .inventory-table-container {
            overflow-x: auto;
        }

        .inventory-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1050px;
        }

        .inventory-table th {
            background: #fafafa;
            color: #555;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            padding: 13px 12px;
            border-bottom: 1px solid #eeeeee;
            border-right: 1px solid #eeeeee;
            white-space: nowrap;
        }

        .inventory-table th:first-child {
            text-align: left;
            min-width: 180px;
        }

        .inventory-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #eeeeee;
            border-right: 1px solid #eeeeee;
            text-align: center;
            font-size: 13px;
        }

        .inventory-table td:first-child {
            text-align: left;
        }

        .inventory-size {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: #333;
        }

        .inventory-kg {
            display: block;
            margin-top: 4px;
            font-size: 11px;
            font-weight: normal;
            color: #999;
        }

        .color-name-input {
            width: 100%;
            min-width: 150px;
            padding: 9px 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            outline: none;
            font-size: 13px;
        }

        .color-name-input:focus {
            border-color: #999;
        }

        .stock-input {
            width: 90px;
            padding: 9px;
            border: 1px solid #ddd;
            border-radius: 6px;
            outline: none;
            text-align: center;
            font-size: 14px;
        }

        .stock-input:focus {
            border-color: #999;
        }

        .inventory-row-total {
            font-weight: 700;
            font-size: 14px;
        }

        .inventory-delete {
            border: 1px solid #ddd;
            background: white;
            color: #c00;
            border-radius: 5px;
            padding: 7px 9px;
            cursor: pointer;
        }

        .inventory-delete:hover {
            background: #fafafa;
        }

        .inventory-table tfoot td {
            background: #f8f8f8;
            font-weight: 700;
        }

        .inventory-grand-total {
            font-size: 17px;
        }

        .inventory-empty {
            text-align: center !important;
            padding: 30px !important;
            color: #999;
        }

        .inventory-status {
            color: #198754;
            font-size: 13px;
            font-weight: 600;
        }

    /* =========================================
   NỀN GIAO DIỆN - TRẮNG + XÁM NHẸ
   ========================================= */

body {
    background: #e9e9e7;
}

/* Khu vực nội dung chính */
.main-content {
    background: #e9e9e7;
}

/* Các khối nội dung giữ màu trắng */
.content-card,
.summary-card,
.inventory-card {
    background: #f7f7f5;
}

/* Các hàng bảng xen kẽ rất nhẹ */
table tbody tr:nth-child(even) {
    background: #eeeeec10;
}

table tbody tr:nth-child(odd) {
    background: #f6f7f58d;
}

/* Khi rê chuột vào hàng */
table tbody tr:hover {
    background: #f1f1f1;
}

/* Popup / cửa sổ mở ra */
.modal-content {
    background: #f5f6f700;
}

/* CĂN CHỈNH LOGO THANH LINH */

.logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.logo-main {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}

body {
    background-color: #d13d5f;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f8b4c4' fill-opacity='0.35'%3E%3Ccircle cx='30' cy='30' r='8'/%3E%3Ccircle cx='42' cy='22' r='8'/%3E%3Ccircle cx='42' cy='38' r='8'/%3E%3Ccircle cx='22' cy='22' r='8'/%3E%3Ccircle cx='22' cy='38' r='8'/%3E%3Ccircle cx='32' cy='30' r='4' fill='%23fce7f0'/%3E%3Ccircle cx='90' cy='80' r='7'/%3E%3Ccircle cx='100' cy='73' r='7'/%3E%3Ccircle cx='100' cy='87' r='7'/%3E%3Ccircle cx='82' cy='73' r='7'/%3E%3Ccircle cx='82' cy='87' r='7'/%3E%3Ccircle cx='91' cy='80' r='3.5' fill='%23fce7f0'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 160px;
}
body {
    background-color: rgb(62, 30, 30) !important;
}

.sidebar,
.main-content {
    background-color: rgba(248, 206, 215, 0.85) !important;
}


/* ===== TÔNG MÀU HOA ĐÀO ===== */
:root {
    --mau-nen: #eac5cc;
    --mau-chu: #130305;
    --mau-hoa: #ba1f5a;
    --mau-nut-chinh: #e88a9a;
    --mau-nut-phu: #f3d1d8;
    --mau-nut-chinh-hover: #d46b7a;
}

/* Nút chính */
.btn.primary,
button.btn.primary,
#qoSaveBtn,
#saveOrderBtn,
#saveSettingsBtn {
    background-color: var(--mau-nut-chinh) !important;
    border-color: var(--mau-nut-chinh) !important;
    color: white !important;
}

.btn.primary:hover,
button.btn.primary:hover {
    background-color: var(--mau-nut-chinh-hover) !important;
}

/* Nút phụ */
.btn.secondary,
button.btn.secondary,
.btn:not(.primary) {
    background-color: var(--mau-nut-phu) !important;
    border-color: var(--mau-nut-phu) !important;
    color: var(--mau-chu) !important;
}