body{
    margin:0;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    background:#f4f6f9;
}

.sidebar{
    width:240px;
    height:100vh;
    background:linear-gradient(180deg,#0f172a,#111827);
    position:fixed;
    left:0;
    top:0;
    padding:20px 14px;
    box-shadow:4px 0 20px rgba(0,0,0,0.18);
}

.logo{
    text-align:center;
    margin-bottom:25px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.logo img{
    width:145px;
}

.menu{
    padding:0;
}

.menu a{
    display:flex;
    align-items:center;
    color:#e5e7eb;
    padding:13px 16px;
    margin-bottom:6px;
    border-radius:10px;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:0.2s;
}

.menu a:hover,
.menu a.active{
    background:#16a34a;
    color:white;
}
.main{
    margin-left:250px;
    padding:20px;
}

.card{
    background:white;
    padding:20px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
/* =========================
   GIAO DIỆN CHUNG
========================= */

body{
    background:#f4f6f9;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    color:#111827;
}

.main{
    margin-left:240px;
    padding:28px;
}

h1,h2,h3,h4{
    font-weight:700;
    color:#111827;
}

/* =========================
   KHUNG TRẮNG / CARD
========================= */

.box,
.table-box,
.staff-box{
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(15,23,42,0.06);
}

.box{
    padding:22px;
    margin-bottom:20px;
}

.box-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:16px;
}

/* =========================
   FORM
========================= */

label{
    font-size:15px;
    font-weight:600;
    color:#374151;
    margin-bottom:6px;
}

.form-control,
.form-select{
    height:44px;
    border-radius:10px;
    border:1px solid #dbe2ea;
    font-size:14px;
}

textarea.form-control{
    height:auto;
    min-height:85px;
}

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

.btn{
    border-radius:10px;
    font-weight:600;
}

.btn-primary{
    background:#2563eb;
    border:none;
}

.btn-primary:hover{
    background:#1d4ed8;
}

.btn-success{
    background:#16a34a;
    border:none;
}

.btn-success:hover{
    background:#15803d;
}

/* =========================
   BẢNG ĐƠN HÀNG
========================= */

.orders-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
}

.orders-table th{
    background:#16a34a;
    color:white;
    font-size:13px;
    font-weight:700;
    padding:16px 14px !important;
}
.orders-table td{
    font-size:14px;
    color:#1f2937;
    padding:16px 14px !important;
    border-bottom:1px solid #edf0f3;
    vertical-align:middle;
}

.orders-table tr:hover{
    background:#f9fafb;
}

/* =========================
   TRẠNG THÁI
========================= */

.status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 12px;
    border-radius:999px;
    color:white;
    font-size:12px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
}

.unpaid{ background:#6b7280; }
.deposit{ background:#f59e0b; }
.completed{ background:#16a34a; }
.pending{ background:#f59e0b; }
.printing{ background:#2563eb; }
.delivered{ background:#7c3aed; }
.cancel{ background:#dc2626; }
.invoice-no{ background:#dc2626; }
.invoice-yes{ background:#16a34a; }

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

.modal-content{
    border:none;
    border-radius:18px;
    overflow:hidden;
}

.modal-header{
    padding:18px 24px;
    border-bottom:1px solid #e5e7eb;
}

.modal-body{
    padding:22px 26px;
}

.modal-body p{
    margin-bottom:6px;
    line-height:1.45;
}

.modal-footer{
    background:#fff;
    border-top:1px solid #e5e7eb;
    padding:14px 20px;
}

.modal-footer .btn{
    min-width:120px;
    height:42px;
    font-size:15px;
}

/* =========================
   MENU TRÁI
========================= */

.sidebar{
    background:linear-gradient(180deg,#0f172a,#111827);
    box-shadow:4px 0 20px rgba(0,0,0,0.15);
}

.menu a{
    border-radius:10px;
    font-weight:600;
}

.menu a:hover,
.menu a.active{
    background:#16a34a;
    color:white;
}
.page-header{
    background:linear-gradient(
        135deg,
        #f97316,
        #7c3aed,
        #4f46e5
    );

    color:white;

    padding:35px 40px;

    border-radius:25px;

    margin-bottom:25px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);
}
body{
    background:#f3f4f6 !important;
}

.main{
    background:#f3f4f6;
    min-height:100vh;
}
table th,
.staff-box th,
.table-box th,
.orders-table th{
    background:#16a34a !important;
    color:#fff !important;
}
.btn-dark{
    background:#16a34a !important;
    border-color:#16a34a !important;
    color:#fff !important;
}

.btn-dark:hover{
    background:#15803d !important;
    border-color:#15803d !important;
}
/* Đổi màu toàn bộ thanh tiêu đề bảng */
table th,
.table th,
.orders-table th,
.staff-box th,
.table-box th,
.box th{
    background:#16a34a !important;
    color:#ffffff !important;
}
/* MENU ĐỒNG BỘ TOÀN HỆ THỐNG */
.sidebar{
    width:240px !important;
    padding:20px 14px !important;
    box-sizing:border-box;
}

.menu{
    padding:0 !important;
    margin:0 !important;
}

.menu a{
    width:100% !important;
    height:56px !important;

    display:flex !important;
    align-items:center !important;
    gap:12px !important;

    padding:0 16px !important;
    margin:0 0 10px 0 !important;

    border-radius:12px !important;

    color:#fff !important;
    text-decoration:none !important;

    font-size:17px !important;
    font-weight:800 !important;

    box-sizing:border-box !important;
    transition:.25s !important;
}

.menu a i{
    width:22px !important;
    min-width:22px !important;
    text-align:center !important;
    font-size:18px !important;
}

.menu a span{
    display:inline-block !important;
}

.menu a:hover,
.menu a.active{
    background:#16a34a !important;
    color:#fff !important;
    transform:none !important;
}

/* ==============================
   FIX FONT TIẾNG VIỆT TOÀN HỆ THỐNG
   Dùng font hệ thống để máy nhân viên không bị lỗi font
============================== */
html, body, body *, input, textarea, select, button{
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}


/* =====================================================
   FIX RESPONSIVE - KHÔNG CẦN ZOOM NHỎ MÀN HÌNH
   Áp dụng cho máy nhân viên màn nhỏ/laptop 13-14 inch
===================================================== */
*{
    box-sizing:border-box;
}

html{
    font-size:14px;
}

body{
    overflow-x:hidden;
}

.main{
    width:calc(100% - 240px) !important;
    max-width:100% !important;
    overflow-x:hidden;
    padding:22px !important;
}

.card,
.box,
.table-box,
.staff-box{
    max-width:100%;
}

.table-responsive,
.responsive-table,
.table-box{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    max-width:100%;
}

.table,
.orders-table{
    width:100% !important;
}

.table th,
.table td,
.orders-table th,
.orders-table td{
    white-space:normal;
    word-break:break-word;
}

input,
select,
textarea,
.form-control,
.form-select{
    max-width:100%;
}

img{
    max-width:100%;
    height:auto;
}

/* Màn laptop phổ biến: 1280px - 1366px */
@media (max-width:1366px){

    .sidebar{
        width:210px !important;
        height:100vh !important;
    }

    .menu{
        overflow-y:auto !important;
    }
}
    /* MENU ĐỒNG BỘ TOÀN HỆ THỐNG */
.sidebar{
    width:240px !important;
    height:100vh !important;

    position:fixed !important;
    top:0 !important;
    left:0 !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    padding:20px 14px !important;
    box-sizing:border-box;

    background:linear-gradient(180deg,#0f172a,#111827);
}

.logo{
    flex-shrink:0;
}

.menu{
    flex:1;
    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding:0 !important;
    margin:0 !important;
}
    .logo img,
    .sidebar .logo img{
        width:110px !important;
    }

    .menu a{
        height:46px !important;
        font-size:14px !important;
        padding:0 12px !important;
        margin-bottom:7px !important;
        gap:9px !important;
    }

    .menu a i{
        font-size:15px !important;
        width:18px !important;
        min-width:18px !important;
    }

    .main{
        margin-left:210px !important;
        width:calc(100% - 210px) !important;
        padding:18px !important;
    }

    h1{font-size:30px !important;}
    h2{font-size:24px !important;}
    h3{font-size:20px !important;}

    .page-header{
        padding:22px 26px !important;
        min-height:120px !important;
        border-radius:18px !important;
    }

    .page-header h1{
        font-size:34px !important;
    }

    .page-header p{
        font-size:16px !important;
    }

    .box,
    .card,
    .table-box,
    .staff-box{
        padding:16px !important;
        border-radius:14px !important;
    }

    .form-control,
    .form-select{
        height:40px !important;
        font-size:13px !important;
    }

    .btn{
        font-size:13px !important;
        padding:8px 12px !important;
    }

    .table th,
    .table td,
    .orders-table th,
    .orders-table td{
        font-size:12.5px !important;
        padding:10px 8px !important;
    }
}

/* Màn nhỏ hơn 1200px: thu menu trái gọn hơn */
@media (max-width:1200px){
    .sidebar{
        width:76px !important;
        padding:14px 8px !important;
    }

    .sidebar .logo img{
        width:50px !important;
    }

    .menu a{
        justify-content:center !important;
        padding:0 !important;
        height:44px !important;
    }

    .menu a span{
        display:none !important;
    }

    .menu a i{
        margin:0 !important;
        font-size:18px !important;
    }

    .main{
        margin-left:76px !important;
        width:calc(100% - 76px) !important;
        padding:14px !important;
    }
}

/* Điện thoại/tablet: menu chuyển lên trên để không vỡ màn */
@media (max-width:768px){
    body{
        overflow-x:auto;
    }

    .sidebar{
        position:relative !important;
        width:100% !important;
        height:auto !important;
        padding:10px !important;
    }

    .logo{
        display:none !important;
    }

    .menu{
        display:flex !important;
        gap:8px !important;
        overflow-x:auto !important;
        padding-bottom:4px !important;
    }

    .menu a{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:46px !important;
        padding:0 12px !important;
    }

    .main{
        margin-left:0 !important;
        width:100% !important;
        padding:12px !important;
    }

    .table,
    .orders-table{
        min-width:760px;
    }
}
.menu::-webkit-scrollbar{
    width:6px;
}

.menu::-webkit-scrollbar-track{
    background:transparent;
}

.menu::-webkit-scrollbar-thumb{
    background:#22c55e;
    border-radius:20px;
}

/* ===== FIX ĐỒNG BỘ SIDEBAR + CHỐNG TRÀN LINK TEST ===== */
:root{ --sidebar-w:230px; }
.sidebar{
    width:var(--sidebar-w) !important;
    height:100vh !important;
    height:100dvh !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    box-sizing:border-box !important;
    z-index:9999 !important;
}
.main{
    margin-left:var(--sidebar-w) !important;
    width:calc(100% - var(--sidebar-w)) !important;
    max-width:calc(100% - var(--sidebar-w)) !important;
    overflow-x:auto !important;
    box-sizing:border-box !important;
}
.table-box, .card, .box, .staff-box{
    max-width:100% !important;
}
@media (max-width:1200px){
    :root{ --sidebar-w:215px; }
}
/* Fix modal chi tiết đơn hàng */
.modal{
    z-index: 1060 !important;
}

.modal-backdrop{
    z-index: 1050 !important;
}

.modal.show{
    display:block !important;
    opacity:1 !important;
}

.modal-content{
    background:#fff !important;
    opacity:1 !important;
    border-radius:20px;
}

.modal-dialog{
    max-width:95%;
    margin:20px auto;
}

body.modal-open{
    overflow:hidden;
}