:root {


    --sidebar-width: 268px;


    --sidebar-collapsed: 78px;


    --border: #e5e7eb;


    --primary: #24a35a;


    --primary-soft: #ebf8f0;


    --text: #1f2937;


    --muted: #667085;


    --surface: #ffffff;


    --background: #f5f7fb;


}


html, body { min-height: 100%; }


body { margin: 0; color: var(--text); background: var(--background); font-family: "Segoe UI", Arial, sans-serif; }


.app-shell { display: flex; min-height: 100vh; }


.sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--border); transition: .22s ease; z-index: 1050; }


.sidebar-brand { height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }


.brand-title { font-size: 18px; font-weight: 700; }


.brand-subtitle { font-size: 12px; color: var(--muted); }


.sidebar-scroll { flex: 1; overflow-y: auto; padding: 12px 9px; }


.menu-item { display: flex; align-items: center; gap: 12px; color: #344054; padding: 10px 12px; border-radius: 10px; margin-bottom: 3px; white-space: nowrap; }


.menu-item:hover { color: var(--primary); background: var(--primary-soft); }


.menu-item i { width: 22px; font-size: 17px; text-align: center; }


.sidebar-footer { padding: 14px; border-top: 1px solid var(--border); }


.sidebar.collapsed { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); }


.sidebar.collapsed .brand-wrap, .sidebar.collapsed .menu-item span, .sidebar.collapsed .sidebar-footer { display: none; }


.sidebar.collapsed .menu-item { justify-content: center; }


.main-area { flex: 1; min-width: 0; }


.topbar { height: 72px; position: sticky; top: 0; z-index: 1040; display: flex; align-items: center; padding: 0 18px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); }


.topbar-title { font-size: 18px; font-weight: 700; }


.topbar-search { position: relative; width: min(420px, 38vw); }


.topbar-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #98a2b3; }


.topbar-search input { padding-left: 39px; border-radius: 12px; background: #f8fafc; }


.avatar { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: white; background: var(--primary); }


.content-area { padding: 20px; }


.page-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 2px 12px rgba(16,24,40,.04); overflow: hidden; }


.page-card-header { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--border); }


.stat-card { height: 100%; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }


.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-size: 20px; }


.table thead th { color: #667085; font-size: 13px; font-weight: 600; white-space: nowrap; }


.table tbody td { vertical-align: middle; }


.login-body { min-height: 100vh; background: radial-gradient(circle at top left, rgba(35,164,85,.15), transparent 35%), linear-gradient(135deg, #f7faf8, #eef3f8); }


.login-card { max-width: 430px; border: 0; border-radius: 20px; box-shadow: 0 20px 60px rgba(16,24,40,.12); }


.login-logo { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--primary); color: white; font-size: 30px; }


.sidebar-backdrop { display: none; }


@media (max-width: 991.98px) {


    .sidebar { position: fixed; left: 0; transform: translateX(-105%); box-shadow: 18px 0 50px rgba(16,24,40,.14); }


    .sidebar.mobile-open { transform: translateX(0); }


    .sidebar-backdrop.show { display: block; position: fixed; inset: 0; z-index: 1045; background: rgba(15,23,42,.42); }


    .content-area { padding: 12px; }


    .topbar-search { display: none; }


}


.order-manage-shell { display: flex; align-items: flex-start; gap: 18px; }


.order-manage-list { flex: 1; min-width: 0; }


.order-header-flex { flex-wrap: wrap; }


.order-toolbar-right { align-items: center; }


.order-search-box { min-width: 260px; }


.order-info-banner { font-size: 14px; }


.order-grid-wrap { overflow: auto; }


.order-grid { min-width: 1480px; }


.order-grid td, .order-grid th { white-space: nowrap; }


.order-icon-btn { min-width: 38px; }


.order-grid-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; background: #f8fafc; }


.order-detail-drawer { width: 460px; min-width: 460px; position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow: hidden; display: flex; flex-direction: column; }


.order-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }


.order-detail-title-group { min-width: 0; }


.order-detail-caption { font-size: 12px; color: var(--muted); margin-bottom: 4px; }


.order-detail-title { font-size: 18px; font-weight: 700; word-break: break-word; }


.order-detail-actions { display: flex; align-items: center; gap: 8px; }


.order-close-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }


.order-detail-body { padding: 18px; overflow: auto; }


.order-main-image-panel { display: flex; align-items: center; justify-content: center; min-height: 240px; border: 1px solid var(--border); background: #f8fafc; border-radius: 14px; overflow: hidden; }


.order-main-image { width: 100%; max-height: 320px; object-fit: contain; background: #fff; }


.order-main-image-empty { width: 100%; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }


.order-main-image-empty i { font-size: 34px; }


.order-thumb-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }


.order-thumb-item { width: 72px; height: 72px; }


.order-detail-thumb { width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; cursor: pointer; background: #fff; }


.order-detail-section { margin-top: 18px; }


.order-detail-section-title { font-weight: 700; margin-bottom: 10px; }


.order-detail-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }


.order-detail-field { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff; }


.order-detail-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }


.order-detail-value { white-space: pre-wrap; word-break: break-word; }


.field-span-2 { grid-column: 1 / -1; }


.table-pager table { margin: 0 auto; }


.table-pager td { padding: 8px 4px; }


@media (max-width: 1399.98px) {


    .order-detail-drawer { width: 420px; min-width: 420px; }


}


@media (max-width: 1199.98px) {


    .order-manage-shell { flex-direction: column; }


    .order-detail-drawer { width: 100%; min-width: 0; position: static; max-height: none; }


}


@media (max-width: 767.98px) {


    .order-search-box { min-width: 0; width: 100%; }


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


    .field-span-2 { grid-column: auto; }


}





/* Quản lý đơn hàng - giao diện bảng rộng + popup chi tiết */


.order-manage-shell { display: block !important; }


.order-manage-list { width: 100%; min-width: 0; }


.order-grid-wrap {


    width: 100%;


    max-width: 100%;


    overflow-x: auto !important;


    overflow-y: visible;


    padding-bottom: 8px;


    scrollbar-gutter: stable;


}


.order-grid-wrap::-webkit-scrollbar { height: 13px; }


.order-grid-wrap::-webkit-scrollbar-track { background: #eef2f6; border-radius: 10px; }


.order-grid-wrap::-webkit-scrollbar-thumb { background: #a7b0bd; border-radius: 10px; border: 3px solid #eef2f6; }


.order-grid-wrap::-webkit-scrollbar-thumb:hover { background: #7d8998; }


.order-grid {


    width: 2350px !important;


    min-width: 2350px !important;


    table-layout: auto !important;


    margin-bottom: 0;


}


.order-grid thead th {


    position: sticky;


    top: 0;


    z-index: 2;


    background: #fff;


    vertical-align: middle;


    padding: 13px 12px;


    white-space: nowrap;


    color: #111827;


    font-weight: 700;


}


.order-grid tbody td {


    padding: 11px 12px;


    white-space: nowrap;


    vertical-align: middle;


}


.order-grid tbody tr:hover { background: #f8fbf9; }


.order-col-code { min-width: 135px; width: 135px; }


.order-col-date { min-width: 125px; width: 125px; }


.order-col-staff { min-width: 180px; width: 180px; }


.order-col-customer { min-width: 260px; width: 260px; }


.order-col-service { min-width: 260px; width: 260px; }


.order-col-product { min-width: 320px; width: 320px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }


.order-col-note { min-width: 320px; width: 320px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }


.order-col-after { min-width: 280px; width: 280px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }


.order-col-status { min-width: 170px; width: 170px; }


.order-grid-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 7px; border: 1px solid #dce2ea; cursor: pointer; background: #fff; }





.order-detail-modal-dialog {


    width: min(94vw, 1460px);


    max-width: min(94vw, 1460px);


}


.order-detail-modal-content {


    border: 0;


    border-radius: 16px;


    overflow: hidden;


    box-shadow: 0 24px 80px rgba(15, 23, 42, .24);


}


.order-detail-modal-header {


    padding: 15px 18px;


    border-bottom: 1px solid #e5e7eb;


    background: #fff;


}


.order-detail-modal-body {


    padding: 20px;


    background: #f8fafc;


}


.order-main-image-panel {


    min-height: 390px;


    background: #fff;


    border: 1px solid #e2e8f0;


    border-radius: 14px;


}


.order-main-image {


    width: 100%;


    height: 390px;


    max-height: 390px;


    object-fit: contain;


    background: #fff;


}


.order-main-image-empty { min-height: 390px; }


.order-thumb-list {


    flex-wrap: nowrap;


    overflow-x: auto;


    padding: 3px 2px 8px;


}


.order-thumb-item { flex: 0 0 82px; width: 82px; height: 82px; }


.order-detail-thumb { width: 82px; height: 82px; }


.order-detail-field-grid { gap: 10px; }


.order-detail-field {


    background: #fff;


    border: 1px solid #e2e8f0;


    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);


}


.order-detail-label { color: #64748b; font-weight: 500; }


.order-detail-value { color: #0f172a; line-height: 1.45; }


.order-detail-section-title { font-size: 16px; }


.order-close-btn { border-radius: 8px; }





@media (max-width: 767.98px) {


    .order-detail-modal-dialog {


        width: calc(100vw - 14px);


        max-width: calc(100vw - 14px);


        margin: 7px auto;


    }


    .order-detail-modal-body { padding: 12px; }


    .order-main-image-panel,


    .order-main-image-empty { min-height: 240px; }


    .order-main-image { height: 240px; max-height: 240px; }


}





/* ===== Quản lý đơn hàng / popup kỹ thuật ===== */


.order-list-header {


    flex-wrap: wrap;


}





.order-search-box {


    width: 320px;


    min-width: 260px;


}





.order-grid-scroll {


    width: 100%;


    overflow-x: auto;


    overflow-y: hidden;


    border-top: 1px solid var(--border);


    scrollbar-width: auto;


}





.order-grid-scroll::-webkit-scrollbar {


    height: 14px;


}





.order-grid-scroll::-webkit-scrollbar-track {


    background: #eef2f6;


}





.order-grid-scroll::-webkit-scrollbar-thumb {


    background: #8d969f;


    border-radius: 8px;


    border: 3px solid #eef2f6;


}





.order-wide-grid {


    min-width: 2200px;


    table-layout: fixed;


}





.order-wide-grid th,


.order-wide-grid td {


    padding: 13px 12px !important;


    vertical-align: middle !important;


    white-space: normal;


    word-break: break-word;


}





.order-wide-grid th {


    font-weight: 700;


    background: #fff;


    position: sticky;


    top: 0;


    z-index: 1;


}





.order-col-code {


    width: 125px;


}





.order-col-date {


    width: 115px;


}





.order-col-staff {


    width: 165px;


}





.order-col-customer {


    width: 235px;


}





.order-col-service {


    width: 230px;


}





.order-col-product {


    width: 300px;


}





.order-col-note {


    width: 320px;


}





.order-col-image {


    width: 90px;


    text-align: center;


}





.order-col-after-note {


    width: 280px;


}





.order-col-status {


    width: 150px;


}





.order-view-button {


    width: 38px;


    height: 38px;


    display: inline-flex;


    align-items: center;


    justify-content: center;


}





.order-grid-thumb {


    width: 58px;


    height: 58px;


    object-fit: cover;


    border-radius: 8px;


    border: 1px solid var(--border);


    background: #fff;


}





.technical-order-dialog {


    max-width: 1100px;


}





.technical-order-modal {


    border: 0;


    border-radius: 14px;


    overflow: hidden;


}





.technical-order-header {


    padding: 14px 18px;


    border-bottom: 1px solid #e5e7eb;


    background: #fff;


}





.technical-close-x {


    font-size: 20px;


    text-decoration: none !important;


}





.technical-order-body {


    background: #fff;


    padding: 0;


}





.technical-form-container {


    width: min(100%, 760px);


    margin: 0 auto;


    padding: 24px 26px 38px;


}





.technical-readonly-grid,


.technical-money-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 18px 20px;


}





.technical-field label,


.technical-section-title {


    display: block;


    margin-bottom: 8px;


    color: #5f6770;


    font-size: 14px;


    font-weight: 500;


}





.technical-field .form-control,


.technical-field .form-select,


.technical-section .form-control,


.technical-section .form-select {


    min-height: 48px;


    border-color: #cfd5dc;


    border-radius: 5px;


}





.technical-field textarea.form-control {


    min-height: 86px;


}





.technical-field .form-control[readonly] {


    background: #f8fafc;


    color: #38414a;


}





.technical-span-2 {


    grid-column: 1 / -1;


}





.technical-section {


    margin-top: 26px;


}





.technical-map-wrap {


    height: 340px;


    border: 1px solid #26a644;


    overflow: hidden;


    background: #f8fafc;


}





.technical-map-wrap iframe {


    width: 100%;


    height: 100%;


    border: 0;


}





.technical-image-gallery {


    display: grid;


    grid-template-columns: repeat(3, minmax(0, 1fr));


    gap: 12px;


    margin-bottom: 16px;


}





.technical-image-card {


    display: block;


    min-height: 150px;


    border: 1px solid #d7dde3;


    border-radius: 8px;


    overflow: hidden;


    background: #f8fafc;


}





.technical-image-card img {


    width: 100%;


    height: 190px;


    object-fit: cover;


}





.technical-status-buttons {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 8px;


}





.technical-status-button {


    min-height: 48px;


    border: 1px solid #d6dbe1;


    background: #f7f8fa;


    color: #626b75;


    border-radius: 3px;


}





.technical-status-button.active {


    background: #3aa645;


    border-color: #3aa645;


    color: #fff;


    font-weight: 700;


}





.technical-money-grid .input-group .form-control {


    text-align: left;


}





.technical-money-grid .input-group .btn {


    width: 46px;


    font-size: 24px;


    line-height: 1;


}





.technical-switch {


    padding: 16px 18px 16px 48px;


    border: 1px solid #d7dde3;


    border-radius: 6px;


    background: #f8fafc;


}





.technical-order-footer {


    border-top: 1px solid #e5e7eb;


    background: #fff;


}





@media (max-width: 991.98px) {


    .technical-order-dialog {


        max-width: calc(100% - 18px);


        margin: 9px auto;


    }





    .technical-form-container {


        padding: 20px 18px 30px;


    }


}





@media (max-width: 767.98px) {


    .order-search-box {


        width: 100%;


        min-width: 0;


    }





    .technical-readonly-grid,


    .technical-money-grid {


        grid-template-columns: 1fr;


    }





    .technical-span-2 {


        grid-column: auto;


    }





    .technical-image-gallery {


        grid-template-columns: 1fr 1fr;


    }





    .technical-map-wrap {


        height: 280px;


    }


}








/* Refactor module 16/09 */


.filter-bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--border);background:#fff}.filter-item{min-width:150px}.filter-item.search{min-width:240px;flex:1}.compact-grid{min-width:1050px}.compact-grid th{font-weight:650;background:#fff;white-space:nowrap}.compact-grid td{vertical-align:middle}.row-click{cursor:pointer}.row-click:hover td{background:#f4fbf7!important}.icon-action{width:36px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px}.popup-detail-label{font-size:12px;color:#64748b;margin-bottom:4px}.popup-detail-value{font-weight:500;white-space:pre-wrap}.map-box{height:280px;border:1px solid #dbe2ea;border-radius:10px;overflow:hidden}.map-box iframe{width:100%;height:100%;border:0}.thumb-serial{width:46px;height:46px;object-fit:cover;border-radius:4px;border:1px solid #dbe2ea}.form-drawer-modal .modal-dialog{max-width:760px}.reward-grid{min-width:900px}.modal-sticky-footer{position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e7eb;z-index:2}





/* Bộ lọc chuẩn Bootstrap: luôn một hàng trên desktop */


.filter-bar.filter-inline{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:10px;align-items:flex-end;padding:14px 16px;border-bottom:1px solid var(--border);background:#fff;overflow-x:auto}


.filter-bar.filter-inline .filter-item{flex:0 0 175px!important;min-width:175px!important;width:175px!important;margin:0!important}


.filter-bar.filter-inline .filter-item.search{flex:1 1 280px!important;min-width:240px!important;width:auto!important}


.filter-bar.filter-inline .form-label{margin-bottom:5px;white-space:nowrap}


.filter-bar.filter-inline>.btn,.filter-bar.filter-inline>.list-action-btn{flex:0 0 auto!important;white-space:nowrap}


.list-action-btn{white-space:nowrap}


@media(max-width:991.98px){.filter-bar.filter-inline{flex-wrap:wrap!important;overflow-x:visible}.filter-bar.filter-inline .filter-item,.filter-bar.filter-inline .filter-item.search{flex:1 1 calc(50% - 10px)!important;min-width:220px!important;width:auto!important}.filter-bar.filter-inline>.btn,.filter-bar.filter-inline>.list-action-btn{flex:1 1 auto!important}}


@media(max-width:575.98px){.filter-bar.filter-inline .filter-item,.filter-bar.filter-inline .filter-item.search{flex:1 1 100%!important;min-width:100%!important}.filter-bar.filter-inline>.btn,.filter-bar.filter-inline>.list-action-btn{width:100%}}






/* DonHang: click dòng / mã đơn để mở popup chi tiết */

.order-click-row {

    cursor: pointer;

}



.order-click-row:hover > td {

    background-color: #f5fbf8 !important;

}



.order-code-link {

    display: inline-flex;

    align-items: center;

    min-height: 34px;

    padding: 4px 8px;

    color: #1f2937;

    text-decoration: none;

    border: 1px solid transparent;

    border-radius: 6px;

    white-space: nowrap;

}



.order-code-link:hover,

.order-code-link:focus {

    color: #198754;

    background: #eef9f2;

    border-color: #b9e2c7;

    text-decoration: none;

}



/* ===== DonHang: cột thao tác riêng + click toàn dòng ===== */
.order-wide-grid .order-col-view {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.order-wide-grid .order-col-code {
    min-width: 125px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.order-view-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

.order-view-icon:hover,
.order-view-icon:focus {
    background: #eef9f2 !important;
    border-color: #198754 !important;
    color: #198754 !important;
}

.order-code-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.order-click-row > td {
    transition: background-color .15s ease;
}

.order-click-row:hover > td {
    background-color: #f3faf6 !important;
}

.order-click-row > td:not(:has(input)):not(:has(button)):not(:has(a)) {
    cursor: pointer;
}


/* ===== FIX tách cột icon xem riêng ===== */
.order-wide-grid .order-col-check {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.order-wide-grid .order-col-view {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-right: 1px solid #e9ecef !important;
}

.order-wide-grid .order-col-code {
    min-width: 150px !important;
    width: 150px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.order-wide-grid .order-col-code .order-code-link {
    display: inline-block !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
}

.order-view-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
}


/* Danh mục sản phẩm/thương hiệu */
.reward-calculated {
    background: #f8f9fa !important;
}

.technical-status-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 575.98px) {
    .technical-status-buttons {
        grid-template-columns: 1fr;
    }
}