:root{
    --orange:#ff7a00;
    --orange2:#ff9f1c;
    --black:#151515;
    --gray:#f4f4f4;
    --text:#333;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:"Segoe UI", Roboto, Arial, sans-serif;
    background:#f6f6f6;
    color:var(--text);
    font-weight:400;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit}
main{width:100%;overflow-x:hidden}

/* ===== Common ===== */
.btn{display:inline-block;border:0;background:var(--orange);color:#fff;padding:13px 22px;border-radius:8px;font-weight:bold;cursor:pointer}
.btn:hover{background:#e76700}
.btn.small{padding:9px 14px;font-size:13px}
.btn.full,.full{width:100%;margin-top:12px}
.danger{border:0;background:#d62828;color:#fff;padding:8px 12px;border-radius:7px;cursor:pointer}
.muted{color:#777;margin-bottom:22px}
.required-star{color:#dc2626;font-weight:900}
.page-title{margin:22px 7%;background:linear-gradient(135deg,#ff7a00,#ffad33);color:#fff;padding:28px;border-radius:14px}
.section{margin:25px 7%;background:#fff;border-radius:14px;padding:22px;box-shadow:0 2px 10px #0001}
.section h2{margin-top:0;border-left:5px solid var(--orange);padding-left:10px}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{border-bottom:1px solid #eee;padding:12px;text-align:left}
.table th{background:#fff4e8}
.zalo{position:fixed;right:22px;bottom:22px;background:#00a2ff;color:#fff;padding:14px 18px;border-radius:99px;font-weight:bold;box-shadow:0 8px 22px #0003;z-index:99}

/* ===== Header ===== */
.topbar{
    background:#2b2b2b;
    color:#fff;
    display:flex;
    justify-content:space-between;
    padding:8px 7%;
    font-size:13px;
}
.site-header{
    width:100%;
    background:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:100;
}
.header-inner{
    max-width:1600px;
    width:100%;
    margin:0 auto;
    padding:0 32px;
    display:grid;
    grid-template-columns:260px minmax(420px,620px) auto;
    align-items:center;
    gap:18px;
}
.logo{
    justify-self:start;
    display:flex;
    align-items:center;
    gap:10px;
    color:#ff7a00;
    font-weight:900;
    font-size:22px;
    white-space:nowrap;
}
.logo img{width:48px;height:48px;object-fit:contain}
.desktop-search{justify-self:center;width:100%;min-width:260px}
.desktop-search form{display:flex;width:100%}
.desktop-search input{flex:1;height:42px;border:1px solid #ddd;border-radius:10px 0 0 10px;padding:0 14px}
.desktop-search button{border:0;background:#ff7a00;color:#fff;padding:0 24px;border-radius:0 10px 10px 0;font-weight:700;cursor:pointer}
.desktop-nav{justify-self:end;display:flex;align-items:center;gap:10px;white-space:nowrap}
.header-icon-link,.user-btn{
    position:relative;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex!important;
    align-items:center;
    justify-content:center;
    border:none;
    background:#fff3e8;
    color:#ff6a00!important;
    font-size:20px;
    font-weight:900;
    cursor:pointer;
    line-height:1;
}
.header-icon-link:hover,.user-btn:hover{background:#ff6a00;color:#fff!important}
.register-icon-link{background:#ff6a00;color:#fff!important}
.register-icon-link:hover{background:#e85f00}
.cart-icon-link{position:relative}
.cart-badge{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
}
.user-menu{position:relative}
.user-dropdown{
    display:none;
    position:absolute;
    right:0;
    top:52px;
    min-width:210px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 14px 35px rgba(0,0,0,.14);
    padding:10px;
    z-index:9999;
}
.user-dropdown.show{display:block}
.user-dropdown a{display:block;padding:11px 12px;text-decoration:none;color:#222;font-weight:700;border-radius:10px;white-space:nowrap}
.user-dropdown a:hover{background:#f5f5f5;color:#ff6a00}
.dropdown-line{height:1px;background:#eee;margin:8px 0}
.user-dropdown .logout-link{color:#dc2626}
.mobile-menu-btn,.mobile-side-menu,.mobile-menu-overlay{display:none}

/* ===== Home / category / product cards ===== */
.layout{display:grid;grid-template-columns:250px 1fr;gap:18px;margin:22px 7%}
.sidebar{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px #0001}
.sidebar h3{background:var(--orange);color:#fff;margin:0;padding:14px}
.sidebar a{display:block;padding:13px 16px;border-bottom:1px solid #eee}
.sidebar a:hover{background:#fff3e7;color:var(--orange)}
.hero{
    min-height:400px;
    border-radius:14px;
    background:linear-gradient(135deg,#191919,#ff7a00);
    display:grid;
    grid-template-columns:2fr 3fr;
    overflow:hidden;
    color:#fff;
}
.hero-text{
    padding:50px 42px;
}
.hero h1{font-size:40px;margin:10px 0}
.hero p{font-size:17px;line-height:1.5}
.hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:.95;
}
.badge{display:inline-block;background:#fff2;border:1px solid #fff5;border-radius:99px;padding:7px 12px;font-weight:bold}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{position:relative;background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;text-align:center;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0002}
.card img{width:100%;height:175px;object-fit:contain}
.sale{position:absolute;top:10px;left:10px;background:#ff3b00;color:#fff;font-size:12px;padding:5px 8px;border-radius:5px;font-weight:bold}
.cat{font-size:12px;color:#888;text-transform:uppercase}
.card h3{font-size:16px;height:42px}
.price{display:flex;gap:8px;justify-content:center;align-items:center;margin:8px 0}
.price b{color:#e65100}
.price del{color:#999;font-size:13px}
.big{font-size:28px;justify-content:flex-start}

/* ===== Auth / profile / modal ===== */
.auth-page{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:36px 16px}
.auth-card{width:100%;max-width:430px;background:#fff;border-radius:18px;padding:28px;box-shadow:0 16px 40px rgba(0,0,0,.08);border:1px solid #eee}
.auth-card h1{text-align:center;margin-bottom:10px}
.auth-card .muted{text-align:center;margin-bottom:25px}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form label{font-weight:700;font-size:14px}
.auth-form input,.auth-form textarea{border:1px solid #ddd;border-radius:12px;padding:12px 14px;outline:none;font-family:inherit}
.auth-form input{height:44px}
.auth-form textarea{resize:vertical}
.auth-form input:focus{border-color:#ff6a00;box-shadow:0 0 0 3px rgba(255,106,0,.12)}
.password-wrap{display:flex;gap:8px}
.password-wrap input{flex:1}
.password-wrap button{border:none;border-radius:12px;padding:0 14px;background:#222;color:#fff;cursor:pointer}
.google-login{display:block;text-align:center;background:#fff;border:1px solid #ddd;color:#222;padding:12px;border-radius:12px;text-decoration:none;font-weight:700;margin-bottom:14px}
.google-login:hover{border-color:#ff6a00;color:#ff6a00}
.divider{text-align:center;color:#999;margin:12px 0}
.auth-links,.login-extra-links{text-align:center;margin-top:14px}
.auth-links a,.login-extra-links a{color:#ff6a00;text-decoration:none;font-weight:700}
.register-row{display:flex;justify-content:center;align-items:center;gap:5px;font-size:14px;color:#666}
.readonly-row{display:flex;gap:8px}
.readonly-row input{flex:1}
.small-btn{background:#222;color:#fff;border-radius:12px;padding:12px 14px;text-decoration:none;font-weight:700}
.radio-line{display:flex;align-items:center;gap:8px;font-weight:600}
.radio-line input{width:auto;height:auto}
#saveProfileBtn:disabled{opacity:.45;cursor:not-allowed}
.page-card{max-width:900px;margin:60px auto;background:#fff;padding:28px;border-radius:18px;box-shadow:0 14px 35px rgba(0,0,0,.08)}
.profile-card{max-width:560px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-overlay,.modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:10000;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.modal-overlay.show,.modal-backdrop.show{display:flex}
.modal-card,.modal-box{
    width:100%;
    max-width:460px;
    background:#fff;
    border-radius:18px;
    padding:28px;
    position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal-close{
    position:absolute;
    top:12px;
    right:14px;
    border:0;
    background:#111;
    color:#fff;
    width:34px;
    height:34px;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
}
.modal-alert{display:none;padding:12px 14px;border-radius:10px;margin-bottom:12px;font-weight:700}
.modal-alert.error{display:block;background:#fee2e2;color:#b91c1c}
.modal-alert.success{display:block;background:#dcfce7;color:#166534}
.top-toast{
    position:fixed;
    top:92px;
    left:50%;
    transform:translateX(-50%) translateY(-20px);
    z-index:20000;
    min-width:320px;
    max-width:520px;
    padding:14px 22px;
    border-radius:14px;
    color:#fff;
    font-weight:800;
    text-align:center;
    box-shadow:0 16px 40px rgba(0,0,0,.22);
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
}
.top-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.top-toast.error{background:#dc2626}
.top-toast.success{background:#16a34a}

/* ===== Flash ===== */
.flash-wrap{position:fixed;top:90px;right:20px;z-index:9999;width:380px}
.flash{padding:14px 18px;margin-bottom:10px;border-radius:12px;color:#fff;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.15);animation:slideIn .3s ease}
.flash-success{background:#16a34a}
.flash-error{background:#dc2626}
.flash-warning{background:#f59e0b}
@keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* ===== Product detail ===== */
.detail{
    width:auto;
    max-width:1180px;
    margin:25px auto;
    padding:32px;
    background:#fff;
    border-radius:18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    align-items:center;
    overflow:hidden;
}
.detail-img{width:100%;height:420px;object-fit:contain;border:1px solid #eee;border-radius:12px}
.product-gallery-wrap,.product-gallery{min-width:0;width:100%}
.product-gallery{
    position:relative;
    height:560px;
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}
.product-gallery img{width:100%;height:100%;object-fit:contain;padding:12px;display:block}
.gallery-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    z-index:2;
}
.gallery-btn:hover{background:#ff7a00}
.gallery-prev{left:12px}
.gallery-next{right:12px}
.gallery-counter{text-align:center;margin-top:10px;color:#777;font-size:13px}
.product-actions,.buybox{display:flex;align-items:center;gap:14px;margin-top:18px}
.buybox input{width:90px;padding:12px;border:1px solid #ddd;border-radius:8px}
.qty-control{display:flex;align-items:center;width:150px;height:48px;border:1px solid #ddd;border-radius:12px;overflow:hidden;background:#fff}
.qty-control button{width:46px;height:100%;border:0;background:#f5f5f5;font-size:24px;font-weight:900;cursor:pointer}
.qty-control input{width:58px;height:100%;border:0;text-align:center;font-size:16px;font-weight:800;outline:none}
.product-actions .btn{height:48px;min-width:180px;display:flex;align-items:center;justify-content:center;padding:0 24px}

/* ===== Cart / checkout / orders ===== */
.cart-section{margin-bottom:25px}
.cart-table input[type="number"]{width:80px;height:38px;border:1px solid #ddd;border-radius:8px;padding:0 10px}
.qty-form{display:flex;align-items:center;gap:8px}
.qty-form button{border:0;background:#222;color:#fff;border-radius:8px;padding:9px 12px;cursor:pointer;font-weight:700}
.cart-bottom-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;margin-top:24px;align-items:start}
.voucher-box,.summary-box{border:1px solid #eee;border-radius:14px;padding:18px;background:#fff}
.voucher-box h3,.summary-box h3{margin-top:0;border-left:5px solid var(--orange);padding-left:10px}
.voucher-form{display:flex;gap:10px}
.voucher-form select{flex:1;height:44px;border:1px solid #ddd;border-radius:10px;padding:0 12px}
.voucher-active{margin-bottom:0;color:#16a34a;font-weight:700}
.summary-group{border-bottom:1px solid #eee;padding:12px 0}
.summary-group h4{margin:0 0 10px;color:#333}
.summary-row,.summary-total,.order-total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0}
.summary-row span{color:#666}
.summary-row.discount b{color:#dc2626}
.summary-total{margin-top:16px;padding-top:16px;border-top:2px solid #eee;font-size:20px;font-weight:900}
.summary-total b{color:#e65100}
.checkout-btn{width:100%;text-align:center;margin-top:16px}
.checkout-grid{
    max-width:1280px;
    margin:0 auto;
    padding:0 24px;
    display:grid;
    grid-template-columns:minmax(360px,520px) minmax(320px,420px);
    justify-content:space-between;
    gap:40px;
    align-items:start;
}
.order-summary{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.08);position:sticky;top:20px;width:100%}
.order-summary h3{margin-bottom:15px}
.checkout-confirm-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:10000;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.checkout-confirm-modal.show{display:flex}
.checkout-confirm-box{width:min(520px,100%);background:#fff;border-radius:18px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.checkout-confirm-box h2{margin-top:0}
.confirm-row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #eee}
.confirm-row span{color:#666}
.confirm-row b{word-break:break-word}
.confirm-actions{display:flex;gap:12px;margin-top:20px}
.confirm-actions .btn{flex:1;text-align:center}
.back-btn{background:#222!important}
.orders-page{width:calc(100% - 40px)!important;max-width:900px!important;margin:40px auto!important;padding:0!important}
.order-card{width:100%!important;box-sizing:border-box!important;border:1px solid #eee;border-radius:14px;padding:18px;margin-bottom:14px}
.order-item{grid-template-columns:minmax(0,1fr) 50px 130px!important}
.order-item span:first-child{min-width:0;word-break:break-word}

/* ===== Admin ===== */
.form{display:grid;gap:10px;max-width:520px}
.form input,.form select,.form textarea{padding:12px;border:1px solid #ddd;border-radius:8px;font-family:inherit}
.form textarea{min-height:85px}
.admin-grid{display:grid;grid-template-columns:520px 1fr;gap:25px}
.admin-tabs-wrap{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid #eee;padding-bottom:12px}
.admin-tab-btn{border:0;padding:12px 18px;border-radius:10px;background:#f3f3f3;font-weight:700;cursor:pointer}
.admin-tab-btn.active{background:#ff7a00;color:#fff}
.admin-tab-content{display:none}
.admin-tab-content.active{display:block}
.admin-inline-form{display:flex;gap:10px;flex:1}
.admin-row,.voucher-row{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:12px;border:1px solid #eee;border-radius:10px}
.admin-row input{width:100%}
.status-form select{padding:8px 10px;border:1px solid #ddd;border-radius:8px;font-weight:600;background:#fff;cursor:pointer}
.status-form small{display:block;margin-top:4px;color:#777;font-size:12px}
.order-contact-cell{line-height:1.6;min-width:260px}
.order-contact-cell div{margin:3px 0}
.order-contact-cell b{color:#ff7a00}

/* Admin product options */
.option-box{margin:14px 0;padding:14px;border:1px solid #eee;border-radius:12px;background:#fafafa}
.option-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.option-pill input{display:none}
.option-pill span{display:inline-block;padding:9px 14px;border-radius:999px;border:1px solid #ddd;background:#fff;cursor:pointer;font-weight:700}
.option-pill input:checked+span{background:#ff7a00;color:white;border-color:#ff7a00}
.add-option-line{display:flex;gap:8px;margin-top:12px}
.add-option-line input{flex:1}
.option-hint{color:#777;font-size:13px;margin:6px 0 0}
#variantStockInputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.variant-card{padding:14px;border:1px solid #e5e5e5;border-radius:14px;background:#fff}
.variant-title{text-align:center;font-weight:800;font-size:16px;margin-bottom:12px;color:#222}
.variant-grid{display:grid;grid-template-columns:90px 1fr;gap:10px}
.variant-grid label{display:block;text-align:center;font-size:13px;font-weight:800;margin-bottom:6px}
.variant-grid input{width:100%;min-width:0}
.variant-grid input[name*="price"]{text-align:right;font-weight:700}
.editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.editor-toolbar button{border:1px solid #ddd;background:#fff;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer}
.editor-toolbar button:hover{background:#ff7a00;color:#fff;border-color:#ff7a00}
.rich-editor{min-height:180px;border:1px solid #ddd;border-radius:12px;background:#fff;padding:14px;outline:none;line-height:1.6;margin-bottom:18px}
.rich-editor:focus{border-color:#ff7a00;box-shadow:0 0 0 3px rgba(255,122,0,.12)}
.rich-editor img{max-width:100%}
.product-manage-grid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:24px;align-items:start}
.product-current-list,.product-form-side{background:#fff;border-radius:16px;padding:18px;border:1px solid #eee;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.product-current-list{max-height:760px;overflow-y:auto;position:sticky;top:110px}
.product-mini-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eee}
.product-mini-row b{display:block;font-size:14px}
.product-mini-row small{display:block;color:#777;margin-top:4px}
.edit-product-btn{border:none;background:#fff3e8;color:#ff7a00;width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:17px}
.edit-product-btn:hover{background:#ff7a00;color:#fff}
.edit-mode-note{padding:12px;border-radius:12px;background:#fff3e8;border:1px solid #ffd2ad;color:#333;margin-bottom:14px}
.edit-mode-note button{margin-left:10px;border:none;background:#111;color:#fff;padding:6px 10px;border-radius:8px;cursor:pointer}

/* Vouchers */
.voucher-create-grid,.voucher-list-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.voucher-create-card,.voucher-box{border:1px solid #eee;border-radius:14px;padding:20px;background:#fff}
.voucher-create-card h3,.voucher-box h3{margin-top:0;color:#ff7a00}
.voucher-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.voucher-form-grid label{display:block;margin-bottom:5px;font-weight:600}
.voucher-form-grid input,.voucher-form-grid select{width:100%;box-sizing:border-box}
.check-line{display:block;margin:14px 0}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.voucher-condition-box{margin-top:16px;padding:14px;border:1px solid #eee;border-radius:14px;background:#fafafa}
.voucher-condition-box h4{margin:0 0 10px;color:#ff7a00}
.voucher-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.voucher-days{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.voucher-days label{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #ddd;cursor:pointer;font-weight:700}
.voucher-days input{margin-right:5px}
.voucher-condition-text{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.voucher-condition-text span{display:inline-block;padding:5px 9px;border-radius:999px;background:#fff3e8;color:#ff7a00;font-size:12px;font-weight:800}

/* Review admin */
.review-toggle{border:none;border-radius:999px;padding:8px 18px;color:#fff;font-weight:800;cursor:pointer}
.review-toggle.on{background:#14a44d}
.review-toggle.off{background:#d71920}
.admin-review-item{padding:10px 0;border-bottom:1px dashed #ddd}
.admin-review-item:last-child{border-bottom:none}
.review-delete-btn{width:38px;height:38px;border:none;border-radius:12px;background:#fee2e2;color:#dc2626;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s ease}
.review-delete-btn:hover{background:#dc2626;color:#fff;transform:translateY(-1px)}
#reviewsTab table td:last-child,#reviewsTab table th:last-child{text-align:center;width:70px}

/* Inventory */
.inventory-select-form{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;margin-bottom:18px}
.inventory-summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.inventory-card{display:flex;align-items:center;gap:16px;padding:24px;border-radius:18px;background:white;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.inventory-card span{display:block;color:#777;font-weight:700;margin-bottom:8px}
.inventory-card b,.inventory-card h2{font-size:40px;color:#ff7a00;margin:0;font-weight:800}
.inventory-card .icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:16px;font-size:28px}
.inventory-card.import .icon{background:#dcfce7;color:#16a34a}
.inventory-card.sold .icon{background:#fee2e2;color:#dc2626}
.inventory-card.stock .icon{background:#ffedd5;color:#f97316}
.inventory-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.inventory-panel{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;margin-bottom:18px;box-shadow:0 8px 22px rgba(0,0,0,.05);overflow:hidden}
.inventory-panel canvas{display:block;width:100%!important;min-width:100%;height:250px;background:#fafafa;border-radius:14px}
.track-stock-btn{display:inline-block;padding:8px 12px;border-radius:10px;background:#fff3e8;color:#ff7a00;font-weight:800;text-decoration:none}
.track-stock-btn:hover{background:#ff7a00;color:#fff}
.ken-select-wrap{position:relative;width:100%}
.ken-select-wrap::after{content:"⌄";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#ff7a00;font-size:18px;font-weight:900;pointer-events:none}
.ken-select{width:100%;height:44px;padding:0 46px 0 16px;border:1px solid #e5e5e5;border-radius:14px;background:#fff;color:#222;font-size:15px;font-weight:700;outline:none;appearance:none;box-shadow:0 8px 22px rgba(0,0,0,.04);cursor:pointer}
.ken-select:focus{border-color:#ff7a00;box-shadow:0 0 0 4px rgba(255,122,0,.12)}
#kenChartTooltip{display:none;position:absolute;z-index:99999;padding:8px 12px;border-radius:10px;background:#111;color:#fff;font-size:13px;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:none}

/* Invoice popup */
.invoice-col{width:80px;text-align:center}
.invoice-btn{width:40px;height:40px;border:none;border-radius:12px;background:#fff3e8;color:#ff7a00;font-size:20px;cursor:pointer;transition:.2s ease}
.invoice-btn:hover{background:#ff7a00;color:#fff;transform:translateY(-1px)}
.invoice-modal{position:fixed;inset:0;background:rgba(0,0,0,.48);display:none;align-items:center;justify-content:center;z-index:99999;padding:20px}
.invoice-modal.show{display:flex}
.invoice-dialog{width:min(1000px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.invoice-modal-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:2}
.invoice-modal-head h3{margin:0;font-size:24px}
.invoice-modal-actions{display:flex;align-items:center;gap:10px}
.invoice-print-btn{border:none;background:#ff7a00;color:#fff;padding:10px 16px;border-radius:12px;font-weight:800;cursor:pointer}
.invoice-close-btn{width:40px;height:40px;border:none;border-radius:12px;background:#f4f4f4;cursor:pointer;font-size:18px;font-weight:800}
.invoice-content{padding:22px}
.invoice-paper,.invoice-paper *{font-family:Arial,Tahoma,"Helvetica Neue",sans-serif!important;letter-spacing:normal!important;text-rendering:geometricPrecision}
.invoice-paper{max-width:920px;margin:0 auto}
.invoice-header-split{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;margin-bottom:22px}
.invoice-shop-name{font-size:28px;font-weight:900;color:#ff7a00;margin-bottom:10px}
.invoice-shop-line{font-size:14px;margin-bottom:5px;color:#333}
.invoice-created-box{border:1px solid #ddd;border-radius:14px;padding:14px 16px;background:#fafafa;line-height:1.7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:82px}
.invoice-title-center{text-align:center;margin:18px 0 22px}
.invoice-main-title{display:inline-flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;line-height:1.15;color:#111;letter-spacing:0!important;padding:10px 30px;border:3px solid #ff7a00;border-radius:10px;margin-bottom:10px;text-transform:uppercase}
.invoice-number{font-size:16px;font-weight:800;color:#333;margin-top:8px;text-align:center}
.invoice-section-title{font-size:17px;font-weight:900;color:#ff7a00;margin-bottom:8px}
.invoice-customer-box{border:1px solid #ddd;border-radius:16px;background:#fafafa;padding:16px;line-height:1.8;margin-bottom:20px}
.invoice-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.invoice-table th,.invoice-table td{border:1px solid #e5e5e5;padding:10px 12px;font-size:14px}
.invoice-table th{background:#fff3e8;color:#222;font-weight:900;text-align:center}
.invoice-table .center{text-align:center}
.invoice-table .right{text-align:right}
.invoice-summary-row td{background:#fffdf9;font-weight:800}
.invoice-summary-row td:first-child{text-align:right;color:#444}
.invoice-grand-row td{background:#fff3e8;color:#ff7a00;font-weight:900;font-size:18px}
.invoice-grand-row td:first-child{text-align:right}
.invoice-money-text{margin:12px 0 20px;padding:14px 16px;border-radius:14px;background:#f8fafc;border:1px dashed #ddd;font-size:15px;line-height:1.6}
.invoice-note{margin-top:6px;margin-bottom:20px;color:#666;font-style:italic;font-size:13px}
.invoice-signatures{display:flex;justify-content:space-between;gap:30px;margin-top:24px}
.invoice-sign-col{width:46%;text-align:center;position:relative;min-height:220px}
.invoice-sign-title{font-weight:800;margin-bottom:4px}
.invoice-sign-sub{color:#666;font-size:13px;margin-bottom:12px}
.invoice-sign-space{height:140px}
.invoice-sign-image{font-family:"Brush Script MT",cursive;font-size:52px;color:#111827;margin-top:30px;line-height:1}
.invoice-sign-name{margin-top:10px;font-weight:700}
.invoice-stamp-box{position:absolute;right:16px;bottom:14px;width:128px;height:128px;border:4px solid #16a34a;color:#16a34a;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;line-height:1.35;transform:rotate(-8deg);opacity:.92;background:rgba(255,255,255,.65)}

/* ===== Policy pages ===== */
.policy-page{max-width:900px;margin:0 auto}
.policy-page h1{font-size:32px;margin-bottom:20px}
.policy-card{background:#fff;border-radius:18px;padding:28px;box-shadow:0 8px 26px rgba(0,0,0,.06);line-height:1.7}
.policy-card h2{color:#ff7a00;font-size:20px;margin-top:20px;margin-bottom:8px}
.policy-card h2:first-child{margin-top:0}
.policy-card p{color:#333;margin:0 0 10px}

/* ===== Footer ===== */
.site-footer{background:#111;color:#ddd;margin-top:0;padding:42px 20px 18px}
.footer-container{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.footer-col h3{color:#fff;font-size:15px;margin-bottom:14px;text-transform:uppercase}
.footer-col p,.footer-col a{display:block;color:#cfcfcf;font-size:14px;line-height:1.7;margin:0 0 7px;text-decoration:none}
.footer-col a:hover{color:#ff7a00}
.footer-trust{color:#ffb36b!important;font-weight:600;margin-top:12px!important}
.footer-bottom{max-width:1180px;margin:28px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);text-align:center;color:#aaa;font-size:13px}
.footer-map-link{color:#cfcfcf;text-decoration:none;line-height:1.6}
.footer-map-link:hover{color:#ff7a00;text-decoration:underline}

/* ===== Responsive ===== */
@media(max-width:900px){
    .layout{grid-template-columns:1fr}
    .hero{grid-template-columns:1fr}
    .grid{grid-template-columns:repeat(2,1fr)}
    .detail{grid-template-columns:1fr}
    .admin-grid{grid-template-columns:1fr}
    .product-manage-grid,.voucher-time-grid,.voucher-list-grid{grid-template-columns:1fr}
    .product-current-list{position:static;max-height:360px}
    .invoice-header-split{grid-template-columns:1fr}
    .invoice-created-box{align-items:flex-start;text-align:left}
    .invoice-main-title{font-size:26px;padding:9px 16px}
    .invoice-signatures{flex-direction:column}
    .invoice-sign-col{width:100%}
    .invoice-stamp-box{position:relative;right:auto;bottom:auto;margin:14px auto 0}
    .footer-container{grid-template-columns:1fr 1fr}
}
@media(max-width:850px){
    .cart-bottom-grid{grid-template-columns:1fr}
    .voucher-form{flex-direction:column}
    .cart-table{font-size:13px}
    .qty-form{flex-direction:column;align-items:flex-start}
}
@media(max-width:768px){
    .topbar{display:none}
    .site-header{position:sticky;top:0;z-index:999;background:#fff}
    .header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;width:100%;max-width:none}
    .logo{font-size:22px}
    .logo img{height:34px;width:auto}
    .desktop-search,.desktop-nav{display:none!important}
    .mobile-menu-btn{display:flex!important;width:44px;height:44px;align-items:center;justify-content:center;border:none;border-radius:12px;background:#ff6a00;color:#fff;font-size:26px;font-weight:900}
    .mobile-menu-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998}
    .mobile-side-menu{display:block;position:fixed;top:0;left:-86%;width:82%;max-width:340px;height:100vh;background:#fff;z-index:9999;padding:18px;box-shadow:8px 0 30px rgba(0,0,0,.2);transition:.25s ease;overflow-y:auto}
    .mobile-side-menu.show{left:0}
    .mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#ff6a00;font-size:20px;font-weight:900}
    .mobile-menu-head button{border:none;background:#f1f1f1;width:38px;height:38px;border-radius:50%;font-size:28px}
    .mobile-side-menu a{display:block;padding:14px 6px;color:#222;text-decoration:none;font-weight:700;border-bottom:1px solid #eee}
    .mobile-auth-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
    .mobile-auth-row a{text-align:center;background:#ff6a00;color:#fff;border-radius:12px;border:none;padding:12px}
    .mobile-side-menu hr{border:none;border-top:1px solid #ddd;margin:16px 0}
    .mobile-search{display:flex;gap:8px;margin-bottom:18px}
    .mobile-search input{flex:1;height:42px;border:1px solid #ddd;border-radius:10px;padding:0 12px}
    .mobile-search button{border:none;background:#ff6a00;color:#fff;border-radius:10px;padding:0 16px;font-weight:800}
    .mobile-side-menu h3{margin:12px 0 6px;color:#ff6a00}

    .layout{display:block!important;margin:16px 14px!important}
    .sidebar{display:none!important}
    .hero{margin-top:0}
    .hero-text{padding:28px}
    .hero h1{font-size:28px}
    .page-title{margin:16px 14px!important}

    .detail{width:calc(100% - 28px);margin:16px auto;padding:16px;grid-template-columns:1fr;gap:22px;overflow:hidden}
    .product-gallery{height:auto!important;aspect-ratio:1/1}
    .product-gallery img{width:100%;height:100%;object-fit:contain}
    .gallery-btn{width:36px;height:36px;font-size:28px}
    .product-actions{display:grid;grid-template-columns:150px 1fr;gap:12px}
    .product-actions .btn{width:100%;min-width:0}

    .checkout-grid{width:calc(100% - 28px)!important;max-width:none!important;margin:0 auto!important;padding:0!important;display:grid!important;grid-template-columns:1fr!important;gap:18px!important}
    .checkout-grid .auth-card,.order-summary{width:100%!important;max-width:none!important;box-sizing:border-box!important}
    .order-summary{position:static!important}
    .confirm-row{grid-template-columns:1fr;gap:4px}
    .confirm-actions{flex-direction:column}
    .orders-page{width:calc(100% - 28px)!important;margin:24px auto!important}
    .order-card{padding:16px!important}
    .order-head{align-items:flex-start}
    .order-item{grid-template-columns:minmax(0,1fr) 38px 105px!important;font-size:14px}

    .inventory-summary-cards,.inventory-grid,.inventory-select-form{grid-template-columns:1fr}
}
@media(max-width:600px){
    .footer-container{grid-template-columns:1fr;text-align:center}
}
@media(max-width:520px){
    .grid{grid-template-columns:1fr}
}


/* ===== Header laptop chỉnh lại ===== */
@media(min-width:769px){
    .header-inner{
        max-width:1600px !important;
        width:100% !important;
        padding:0 70px !important;

        display:grid !important;
        grid-template-columns:330px minmax(520px, 680px) 1fr !important;
        align-items:center !important;
        gap:24px !important;
    }

    .logo{
        justify-self:start !important;
        font-size:28px !important;
        font-weight:900 !important;
        gap:14px !important;
    }

    .logo img{
        width:62px !important;
        height:62px !important;
    }

    .desktop-search{
        justify-self:center !important;
        width:100% !important;
        max-width:680px !important;
    }

    .desktop-search form{
        width:100% !important;
        display:flex !important;
    }

    .desktop-search input{
        height:48px !important;
        font-size:15px !important;
    }

    .desktop-search button{
        height:48px !important;
        min-width:82px !important;
        font-size:15px !important;
    }

    .desktop-nav{
        justify-self:end !important;
    }
}

.social-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-right:8px;
    border-radius:50%;
    background:#fff;
    transition:.2s;
}

.social-icon img{
    width:24px;
    height:24px;
    object-fit:contain;
}

.social-icon:hover{
    transform:translateY(-2px);
}

/* ===== FIX PRODUCT DETAIL FULL WIDTH - KEN ===== */

html body main .product-detail-wrap{
    width:86% !important;
    max-width:none !important;
    margin:25px 7% !important;
    padding:0 !important;
}

html body main .product-detail-grid{
    width:100% !important;
    max-width:none !important;
    min-height:650px !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    background:#fff !important;
    border-radius:22px !important;
    overflow:hidden !important;
    box-shadow:0 10px 30px rgba(0,0,0,.05) !important;
}

html body main .product-gallery-box{
    width:100% !important;
    padding:22px !important;
    border-right:1px solid #eee !important;
    background:#fff !important;
}

html body main .product-info-box{
    width:100% !important;
    padding:58px 56px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
}

html body main .product-main-image-box{
    width:100% !important;
    max-width:none !important;
    height:590px !important;
    aspect-ratio:auto !important;

    border:1px solid #eee !important;
    border-radius:22px !important;
    background:#fff !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
}

html body main .product-main-image-box img,
html body main #mainProductImage{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
    padding:4px !important;
    display:block !important;
}

html body main .product-category-small{
    display:inline-flex !important;
    margin:0 0 28px !important;

    background:#f4f4f5 !important;
    color:#71717a !important;
    border:1px solid #eee !important;

    font-size:14px !important;
    font-weight:900 !important;
}

html body main .product-detail-name{
    margin:0 0 20px !important;

    color:#111 !important;
    font-size:44px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
}

html body main .product-detail-price{
    justify-content:flex-start !important;
    margin-bottom:24px !important;
}

html body main .product-detail-price del,
html body main .product-detail-price .old-price{
    font-size:18px !important;
    color:#999 !important;
}

html body main .product-detail-price b,
html body main #productPriceText{
    font-size:35px !important;
    color:#f05a00 !important;
    font-weight:950 !important;
}

html body main .product-short-desc{
    margin:0 0 32px !important;
    font-size:18px !important;
    line-height:1.65 !important;
    color:#222 !important;
}

html body main .product-options-form{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
}

html body main .product-actions.qty-buy-row{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    margin-top:20px !important;
}

html body main .qty-box,
html body main .qty-control{
    width:auto !important;
    height:56px !important;

    display:inline-flex !important;
    align-items:center !important;

    border:1px solid #eee !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:#f8f8f8 !important;
}

html body main .qty-box button,
html body main .qty-control button{
    width:48px !important;
    height:56px !important;
}

html body main .qty-box input,
html body main .qty-control input{
    width:62px !important;
    height:56px !important;
    padding:0 !important;
    border:0 !important;
    text-align:center !important;
}

html body main .add-cart-btn{
    min-width:200px !important;
    height:56px !important;
    border-radius:14px !important;
}

/* Điện thoại: hình trên, thông tin dưới */
@media(max-width:850px){
    html body main .product-detail-wrap{
        width:calc(100% - 28px) !important;
        margin:16px auto !important;
    }

    html body main .product-detail-grid{
        grid-template-columns:1fr !important;
        min-height:auto !important;
    }

    html body main .product-gallery-box{
        border-right:none !important;
        border-bottom:1px solid #eee !important;
        padding:16px !important;
    }

    html body main .product-main-image-box{
        height:auto !important;
        aspect-ratio:1 / 1 !important;
    }

    html body main .product-info-box{
        padding:24px 22px 28px !important;
    }

    html body main .product-detail-name{
        font-size:31px !important;
    }

    html body main .product-actions.qty-buy-row{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
    }

    html body main .add-cart-btn{
        width:100% !important;
    }
}


/* ===== Order success page ===== */

.order-success-page{
    width:100%;
    min-height:520px;

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

    padding:46px 18px 64px;
}

.order-success-card{
    width:min(760px, 100%);

    background:#fff;
    border:1px solid #eeeeee;
    border-radius:24px;

    padding:42px 44px;
    text-align:center;

    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.success-icon{
    width:86px;
    height:86px;

    margin:0 auto 18px;

    border-radius:50%;
    background:#16a34a;
    color:#fff;

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

    font-size:48px;
    font-weight:900;

    box-shadow:0 12px 30px rgba(22,163,74,.25);
}

.order-success-card h1{
    margin:0 0 12px;

    color:#111;
    font-size:36px;
    line-height:1.2;
    font-weight:950;
}

.success-sub{
    max-width:560px;
    margin:0 auto 26px;

    color:#555;
    font-size:16px;
    line-height:1.7;
}

.success-order-box{
    margin:26px auto;
    padding:6px 22px;

    max-width:560px;

    border:1px solid #eeeeee;
    border-radius:18px;
    background:#fafafa;

    text-align:left;
}

.success-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:15px 0;
    border-bottom:1px solid #eeeeee;
}

.success-row:last-child{
    border-bottom:none;
}

.success-row span{
    color:#666;
    font-weight:700;
}

.success-row b{
    color:#111;
    font-weight:900;
    text-align:right;
    word-break:break-word;
}

.success-row .success-total{
    color:#f05a00;
    font-size:20px;
}

.success-note{
    max-width:560px;
    margin:0 auto 26px;

    color:#777;
    font-size:14px;
    line-height:1.6;
}

.success-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

.success-actions .btn{
    min-width:150px;
    border-radius:12px;
    text-align:center;
}

.success-copy-btn{
    background:#111 !important;
}

.success-copy-btn:hover{
    background:#333 !important;
}

.success-home-btn{
    background:#fff3e8 !important;
    color:#ff7a00 !important;
}

.success-home-btn:hover{
    background:#ff7a00 !important;
    color:#fff !important;
}

@media(max-width:600px){
    .order-success-page{
        padding:26px 14px 42px;
    }

    .order-success-card{
        padding:30px 20px;
        border-radius:20px;
    }

    .order-success-card h1{
        font-size:29px;
    }

    .success-row{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .success-row b{
        text-align:left;
    }

    .success-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .success-actions .btn{
        width:100%;
    }
}



.settings-sub-card{
    margin:24px 0;
    padding:20px;
    border:1px solid #eeeeee;
    border-radius:18px;
    background:#fafafa;
}

.settings-sub-card h3{
    margin:0 0 16px;
    color:#ff7a00;
    font-size:20px;
    font-weight:900;
    border-left:5px solid #ff7a00;
    padding-left:10px;
}

.combo-suggest-box{
    width:100%;
    margin-top:28px;
    padding:18px;
    border:1px solid #eeeeee;
    border-radius:18px;
    background:#fafafa;
}

.combo-suggest-box h3{
    margin:0 0 14px;
    color:#ff7a00;
    font-size:20px;
    font-weight:900;
}

.combo-suggest-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:12px;
}

.combo-suggest-item{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:10px;
    align-items:center;
    padding:10px;
    border:1px solid #eeeeee;
    border-radius:14px;
    background:#fff;
    transition:.2s ease;
}

.combo-suggest-item:hover{
    transform:translateY(-2px);
    border-color:#ff7a00;
    box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.combo-suggest-item img{
    width:64px;
    height:64px;
    object-fit:contain;
    border-radius:10px;
    background:#fff;
}

.combo-suggest-item b{
    display:block;
    color:#222;
    font-size:14px;
    line-height:1.35;
}

.combo-suggest-item span{
    display:block;
    margin-top:4px;
    color:#f05a00;
    font-weight:900;
    font-size:13px;
}

.ken-header-svg{
    width:24px;
    height:24px;
    display:block;
}

.login-icon-link{
    color:#ff7a00;
}

.special-login-svg{
    width:24px;
    height:24px;
    display:block;
}

.fancy-login-link{
    background:#fff7ef;
    color:#ff7a00;
    border:1px solid #ffd4ad;
}

.google-login-with-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.google-login-with-logo img{
    width:22px;
    height:22px;
    object-fit:contain;
    display:block;
}

.google-login-with-logo span{
    font-weight:800;
}

.google-account-note{
    margin:6px 0 12px;
    padding:12px 14px;
    border-radius:12px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#c2410c;
    font-weight:700;
    line-height:1.5;
}

.google-password-help{
    display:block;
    margin-top:6px;
    margin-bottom:12px;
    color:#c2410c;
    font-weight:700;
    line-height:1.5;
}

.profile-password-row{
    display:grid;
    grid-template-columns:1fr 78px;
    gap:8px;
    align-items:center;
    margin-top:10px;
}

.profile-password-row input{
    width:100%;
}

.profile-pass-toggle{
    height:46px;
    border:none;
    border-radius:14px;
    background:#222;
    color:#fff;
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
}

.profile-pass-toggle:hover{
    background:#ff7a00;
}

@media(max-width:520px){
    .profile-password-row{
        grid-template-columns:1fr 68px;
    }

    .profile-pass-toggle{
        height:44px;
        border-radius:12px;
    }
}

.profile-card .btn,
.profile-form .btn,
.account-card .btn{
    width:100%;
    height:52px;
    margin-top:18px;
    border:none;
    border-radius:14px;
    background:#ff7a00 !important;
    color:#fff !important;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    opacity:1 !important;
    box-shadow:0 10px 24px rgba(255,122,0,.25);
}

.profile-card .btn:hover,
.profile-form .btn:hover,
.account-card .btn:hover{
    background:#e86f00 !important;
    transform:translateY(-1px);
}

/* ===== Nested categories ===== */
.category-sidebar .sidebar-category-group{
    border-bottom:1px solid #eee;
}

.sidebar-parent-toggle{
    width:100%;
    border:0;
    background:#fff;
    padding:13px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    font:inherit;
    color:#333;
    text-align:left;
}

.sidebar-parent-toggle:hover,
.sidebar-single-category:hover{
    background:#fff3e7;
    color:#ff7a00;
}

.sidebar-parent-toggle b{
    transition:.2s ease;
}

.sidebar-category-group.open .sidebar-parent-toggle b{
    transform:rotate(180deg);
}

.sidebar-child-list{
    display:none;
    background:#fffaf5;
    padding:4px 0 8px;
}

.sidebar-category-group.open .sidebar-child-list{
    display:block;
}

.sidebar-child-list a{
    padding:10px 18px 10px 34px;
    font-size:14px;
    border-bottom:0;
}

.sidebar-single-category{
    display:block;
    padding:13px 16px;
}

.mobile-category-group{
    border-bottom:1px solid #eee;
}

.mobile-category-parent{
    width:100%;
    border:0;
    background:transparent;
    padding:13px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    color:#222;
}

.mobile-category-parent b{
    transition:.2s ease;
}

.mobile-category-group.open .mobile-category-parent b{
    transform:rotate(180deg);
}

.mobile-category-children{
    display:none;
    padding:0 0 8px 16px;
}

.mobile-category-group.open .mobile-category-children{
    display:block;
}

.mobile-category-children a{
    display:block;
    padding:10px 0;
    font-size:14px;
}

.category-admin-create-form select,
.category-inline-form select{
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    min-width:150px;
}

.category-help{
    color:#777;
    line-height:1.5;
}

.category-parent-row{
    background:#fffdf9;
    border-left:5px solid #ff7a00;
}

.category-child-row{
    margin-left:34px;
    background:#fafafa;
    border-left:5px solid #dddddd;
}

.category-child-row .category-drag-handle{
    color:#999;
}


/* ===== Admin category parent / child layout ===== */
.category-admin-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:start;
}

.category-admin-card{
    border:1px solid #eeeeee;
    border-radius:18px;
    background:#fff;
    padding:18px;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
}

.category-admin-card h3{
    margin:0 0 16px;
    color:#ff7a00;
    font-size:20px;
    font-weight:900;
}

.category-admin-card .form{
    max-width:none;
}

.category-help{
    color:#777;
    line-height:1.5;
}

.category-parent-list{
    margin-top:18px;
    display:grid;
    gap:12px;
}

.category-parent-card{
    display:grid;
    grid-template-columns:44px 1fr auto;
    gap:12px;
    align-items:start;
    padding:14px;
    border:1px solid #eeeeee;
    border-radius:16px;
    background:#fffdf9;
}

.category-parent-edit-form{
    display:grid;
    grid-template-columns:90px 1fr 110px 1.5fr auto;
    gap:8px;
    align-items:center;
}

.category-parent-edit-form label{
    font-size:12px;
    font-weight:900;
    color:#777;
}

.category-parent-edit-form input{
    width:100%;
    min-width:0;
    padding:10px;
    border:1px solid #ddd;
    border-radius:10px;
}

.category-empty-note{
    color:#777;
    font-weight:700;
    margin:0;
}

.category-child-row{
    background:#fafafa;
}

.category-child-row .category-inline-form{
    display:grid;
    grid-template-columns:170px 1fr 220px auto;
    gap:10px;
    align-items:center;
}

.category-child-row input,
.category-child-row select{
    width:100%;
    min-width:0;
}

@media(max-width:1000px){
    .category-admin-split{
        grid-template-columns:1fr;
    }

    .category-parent-card{
        grid-template-columns:1fr;
    }

    .category-parent-edit-form,
    .category-child-row .category-inline-form{
        grid-template-columns:1fr;
    }
}

/* ===== Admin category parent / child / product list ===== */
.category-admin-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:start;
}

.category-admin-card{
    border:1px solid #eeeeee;
    border-radius:18px;
    background:#fff;
    padding:18px;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
}

.category-admin-card h3{
    margin:0 0 16px;
    color:#ff7a00;
    font-size:20px;
    font-weight:900;
}

.category-admin-card .form{
    max-width:none;
}

.category-help{
    color:#777;
    line-height:1.5;
}

.category-parent-list{
    margin-top:18px;
    display:grid;
    gap:12px;
}

.category-parent-card{
    display:grid;
    grid-template-columns:44px 1fr auto;
    gap:12px;
    align-items:center;
    padding:14px;
    border:1px solid #eeeeee;
    border-radius:16px;
    background:#fffdf9;
}

.category-parent-edit-form{
    display:grid;
    grid-template-columns:42px 90px 88px 1fr auto;
    gap:8px;
    align-items:center;
}

.category-parent-edit-form label{
    font-size:12px;
    font-weight:900;
    color:#777;
}

.category-parent-edit-form input{
    width:100%;
    min-width:0;
    padding:10px;
    border:1px solid #ddd;
    border-radius:10px;
}

.category-empty-note,
.category-product-empty,
.category-no-child{
    color:#777;
    font-weight:700;
    padding:12px;
    border-radius:12px;
    background:#f8f8f8;
}

.category-child-head{
    margin-bottom:16px;
}

.category-child-head h3{
    margin-bottom:6px;
    color:#222;
}

.category-child-head small{
    color:#666;
    font-weight:700;
}

.category-child-list{
    display:grid;
    gap:18px;
}

.category-parent-group{
    border:1px solid #eeeeee;
    border-radius:18px;
    padding:16px;
    background:#fff;
}

.category-parent-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid #eeeeee;
}

.category-parent-title b{
    color:#ff7a00;
    font-size:18px;
    font-weight:950;
}

.category-parent-title span{
    color:#777;
    font-size:13px;
    font-weight:800;
}

.category-child-card{
    border:1px solid #eeeeee;
    border-radius:16px;
    padding:14px;
    background:#fafafa;
    margin-bottom:12px;
}

.category-child-top{
    display:grid;
    grid-template-columns:44px 1fr auto;
    gap:12px;
    align-items:end;
}

.category-child-edit-form{
    display:grid;
    grid-template-columns:170px 1fr 230px auto;
    gap:10px;
    align-items:end;
}

.category-child-edit-form label{
    display:block;
    margin-bottom:5px;
    color:#666;
    font-size:12px;
    font-weight:900;
}

.category-child-edit-form input,
.category-child-edit-form select{
    width:100%;
    min-width:0;
    height:40px;
    padding:0 10px;
    border:1px solid #ddd;
    border-radius:10px;
    background:#fff;
}

.category-products-box{
    margin-top:14px;
    padding:12px;
    border-radius:14px;
    background:#fff;
    border:1px dashed #dddddd;
}

.category-products-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.category-products-title b{
    color:#222;
    font-weight:950;
}

.category-products-title span{
    padding:5px 10px;
    border-radius:999px;
    background:#fff3e8;
    color:#ff6a00;
    font-size:12px;
    font-weight:900;
}

.category-product-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    max-height:220px;
    overflow:auto;
    padding-right:4px;
}

.category-product-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    border:1px solid #eeeeee;
    border-radius:12px;
    background:#fff;
}

.category-product-item span{
    min-width:0;
    font-weight:800;
    color:#333;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.category-product-item button{
    flex:0 0 auto;
    border:0;
    border-radius:10px;
    background:#111;
    color:#fff;
    padding:8px 10px;
    cursor:pointer;
    font-weight:800;
    font-size:12px;
}

.category-product-item button:hover{
    background:#ff7a00;
}

@media(max-width:1100px){
    .category-admin-split{
        grid-template-columns:1fr;
    }

    .category-parent-card,
    .category-child-top,
    .category-parent-edit-form,
    .category-child-edit-form{
        grid-template-columns:1fr;
    }

    .category-product-list{
        grid-template-columns:1fr;
    }
}

/* ===== Sidebar category parent / child ===== */
.category-sidebar{
    overflow:hidden;
}

.sidebar-parent-block{
    border-bottom:1px solid #eeeeee;
}

.sidebar-parent-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:13px 16px;
    background:#fff;
    color:#222;
    font-weight:900;
}

.sidebar-parent-link:hover{
    background:#fff3e8;
    color:#ff6a00;
}

.sidebar-child-list{
    background:#fff8f0;
    border-top:1px solid #f1e1d2;
}

.sidebar-child-link{
    display:block;
    padding:12px 16px 12px 34px;
    background:#fff8f0;
    color:#333;
    font-weight:500;
    font-size:14px;
    border-bottom:1px solid #f3e6d8;
}

.sidebar-child-link:hover{
    background:#ffe8d1;
    color:#ff6a00;
}

/* Mobile menu category */
.mobile-parent-link{
    font-weight:900!important;
    background:#fff!important;
}

.mobile-child-link{
    padding-left:30px!important;
    background:#fff8f0!important;
    font-weight:500!important;
    color:#333!important;
}

.mobile-child-link:hover{
    background:#ffe8d1!important;
    color:#ff6a00!important;
}

/* ===== Sidebar xổ danh mục mẹ / con ===== */
.category-sidebar{
    overflow:hidden;
}

.sidebar-category-group{
    border-bottom:1px solid #eeeeee;
}

.sidebar-parent-row{
    display:grid;
    grid-template-columns:1fr 38px;
    align-items:center;
    background:#fff;
}

.sidebar-parent-link{
    display:flex;
    align-items:center;
    gap:8px;
    padding:13px 14px;
    color:#222;
    font-weight:900;
}

.sidebar-parent-link:hover{
    color:#ff6a00;
    background:#fff3e8;
}

/* ===== Sidebar xổ danh mục mẹ / con - bản gọn hơn ===== */
.category-sidebar{
    overflow:hidden;
}

.sidebar-category-group{
    border-bottom:1px solid #eeeeee;
}

.sidebar-parent-row{
    display:grid;
    grid-template-columns:1fr 34px;
    align-items:center;
    background:#fff;
}

.sidebar-parent-link{
    display:flex;
    align-items:center;
    gap:8px;
    padding:13px 14px;
    color:#222;
    font-weight:900;
}

.sidebar-parent-link:hover{
    color:#ff6a00;
    background:#fff3e8;
}

.sidebar-toggle-btn{
    width:28px;
    height:28px;
    margin-right:8px;

    border:none;
    border-radius:8px;

    background:transparent;
    color:#777;

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

    cursor:pointer;
    transition:.2s ease;
}

.sidebar-toggle-btn:hover{
    background:#fff3e8;
    color:#ff7a00;
}

.sidebar-arrow-icon{
    display:block;
    font-size:22px;
    font-weight:900;
    line-height:1;
    transform:rotate(0deg);
    transition:.2s ease;
}

.sidebar-category-group.open .sidebar-arrow-icon{
    transform:rotate(90deg);
    color:#ff7a00;
}

.sidebar-child-list{
    display:none;
    background:#fff8f0;
    border-top:1px solid #f1e1d2;
}

.sidebar-category-group.open .sidebar-child-list{
    display:block;
}

.sidebar-child-link{
    display:block;
    padding:12px 16px 12px 34px;
    background:#fff8f0;
    color:#333;
    font-weight:500;
    font-size:14px;
    border-bottom:1px solid #f3e6d8;
}

.sidebar-child-link:hover{
    background:#ffe8d1;
    color:#ff6a00;
}

.sidebar-child-list{
    display:none;
    background:#fff8f0;
    border-top:1px solid #f1e1d2;
}

.sidebar-category-group.open .sidebar-child-list{
    display:block;
}

.sidebar-child-link{
    display:block;
    padding:12px 16px 12px 34px;
    background:#fff8f0;
    color:#333;
    font-weight:500;
    font-size:14px;
    border-bottom:1px solid #f3e6d8;
}

.sidebar-child-link:hover{
    background:#ffe8d1;
    color:#ff6a00;
}

/* ===== Chỉnh rộng khung danh mục trang shop ===== */
.layout{
    grid-template-columns:320px 1fr;
    gap:22px;
}

.category-sidebar{
    width:320px;
    min-width:320px;
}

.sidebar-parent-link{
    font-size:15px;
    line-height:1.35;
    padding:14px 16px;
}

.sidebar-parent-link span{
    display:block;
    white-space:normal;
}

.sidebar-parent-row{
    grid-template-columns:1fr 36px;
}

.sidebar-child-link{
    padding:12px 18px 12px 38px;
    font-size:14px;
}

/* Màn hình nhỏ thì tự co lại */
@media(max-width:1100px){
    .layout{
        grid-template-columns:270px 1fr;
    }

    .category-sidebar{
        width:270px;
        min-width:270px;
    }
}

@media(max-width:900px){
    .layout{
        grid-template-columns:1fr;
    }

    .category-sidebar{
        width:100%;
        min-width:0;
    }
}

/* ===== Vietnamese font fix ===== */
h1, h2, h3, h4, h5, h6,
.logo span,
.sidebar h3,
.sidebar a,
.card h3,
.home-main-tab-btn,
.home-category-head h2,
.home-tab-head h2,
.page-title h1,
.btn,
button,
input,
textarea,
select{
    font-family:"Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3,
.home-main-tab-btn b,
.home-category-head h2,
.home-tab-head h2,
.sidebar h3{
    font-weight:800;
    letter-spacing:-0.2px;
}

.card h3,
.sidebar a,
.home-category-tab-btn,
.btn{
    font-weight:700;
}

.sidebar h3{
    font-size:17px;
    line-height:1.3;
}

.sidebar a,
.sidebar-parent-link,
.sidebar-child-link{
    line-height:1.35;
}

.home-main-tab-btn{
    line-height:1.25;
}

.home-main-tab-btn b{
    font-size:19px;
}

/* ===== Mobile category accordion ===== */
.mobile-category-list{
    display:flex;
    flex-direction:column;
    gap:0;
}

.mobile-category-group{
    border-bottom:1px solid #eeeeee;
}

.mobile-category-parent-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.mobile-parent-link{
    flex:1;
    display:block;
    padding:13px 14px;
    font-weight:800;
    color:#222;
}

.mobile-category-toggle{
    width:44px;
    height:44px;
    border:0;
    background:#fff3e8;
    color:#ff7a00;
    border-radius:10px;
    font-size:24px;
    font-weight:900;
    cursor:pointer;
    margin-right:8px;
    transition:.2s ease;
}

.mobile-category-group.open .mobile-category-toggle{
    transform:rotate(90deg);
    background:#ff7a00;
    color:#fff;
}

.mobile-child-list{
    display:none;
    padding:0 0 8px 0;
    background:#fffaf5;
}

.mobile-category-group.open .mobile-child-list{
    display:block;
}

.mobile-child-link{
    display:block;
    padding:10px 14px 10px 34px;
    font-size:14px;
    font-weight:700;
    color:#555;
}

.mobile-child-link:hover{
    color:#ff7a00;
    background:#fff3e8;
}

/* ===== Mobile cart icon on header ===== */
.mobile-cart-header{
    display:none;
}

@media(max-width:900px){
    .header-inner{
        display:grid;
        grid-template-columns:44px 1fr 46px;
        align-items:center;
        gap:10px;
        padding:8px 14px;
    }

    .mobile-menu-btn{
        display:flex;
        width:42px;
        height:42px;
        align-items:center;
        justify-content:center;
        border:0;
        border-radius:12px;
        background:#fff3e8;
        color:#ff7a00;
        font-size:24px;
        font-weight:900;
        cursor:pointer;
        grid-column:1;
        grid-row:1;
    }

    .logo{
        grid-column:2;
        grid-row:1;
        justify-self:center;
        font-size:18px;
        max-width:100%;
        overflow:hidden;
    }

    .logo img{
        width:38px;
        height:38px;
    }

    .logo span{
        max-width:180px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .mobile-cart-header{
        grid-column:3;
        grid-row:1;
        justify-self:end;
        position:relative;
        width:44px;
        height:44px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#ff7a00;
        color:#fff;
        box-shadow:0 8px 20px rgba(255,122,0,.28);
    }

    .mobile-cart-icon{
        font-size:22px;
        line-height:1;
    }

    .mobile-cart-badge{
        position:absolute;
        top:-5px;
        right:-5px;
        min-width:20px;
        height:20px;
        padding:0 5px;
        border-radius:999px;
        background:#ef4444;
        color:#fff;
        border:2px solid #fff;
        font-size:11px;
        font-weight:900;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .desktop-search,
    .desktop-nav{
        display:none;
    }
}

/* ===== Order product image: my orders + track order ===== */
.order-item.has-product-img{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 58px 130px !important;
    gap:12px !important;
    align-items:center !important;
}

.order-product-main{
    display:grid;
    grid-template-columns:62px minmax(0,1fr);
    gap:12px;
    align-items:center;
    min-width:0;
}

.order-product-img{
    width:62px;
    height:62px;
    border:1px solid #eeeeee;
    border-radius:14px;
    background:#fff;
    object-fit:contain;
    padding:5px;
    display:block;
}

.order-product-name-box{
    min-width:0;
}

.order-product-name{
    display:block;
    font-weight:900;
    color:#222;
    line-height:1.3;
    word-break:break-word;
}

.order-product-options{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    margin-top:5px;
}

.order-product-options small{
    color:#666;
    font-size:12.5px;
    font-weight:700;
}

.order-product-qty{
    text-align:center;
    font-weight:900;
    color:#333;
}

.order-product-price{
    text-align:right;
    color:#e65100;
    font-weight:950;
    white-space:nowrap;
}

@media(max-width:700px){
    .order-item.has-product-img{
        grid-template-columns:minmax(0,1fr) auto !important;
        grid-template-areas:
            "main qty"
            "main price" !important;
        gap:6px 10px !important;
        align-items:start !important;
        padding:10px 0 !important;
    }

    .order-product-main{
        grid-area:main;
        grid-template-columns:58px minmax(0,1fr);
        gap:10px;
    }

    .order-product-img{
        width:58px;
        height:58px;
        border-radius:13px;
    }

    .order-product-name{
        font-size:14.5px;
    }

    .order-product-qty{
        grid-area:qty;
        text-align:right;
        font-size:13px;
    }

    .order-product-price{
        grid-area:price;
        text-align:right;
        font-size:14px;
    }
}