/* SIDEBAR DESKTOP CHO HEADER DUY BÌNH
   Chỉ áp dụng từ 651px trở lên, mobile giữ nguyên hoàn toàn. */

@media (min-width:651px){
    :root{
        --duybinh-sidebar-width:220px;
        --duybinh-topbar-height:32px;
        --duybinh-blue:#087bbd;
        --duybinh-blue-dark:#075f92;
        --duybinh-orange:#f59e0b;
    }

    body{
        padding-left:var(--duybinh-sidebar-width);
    }

    /* Khối sticky header chỉ nằm trong phần nội dung bên phải */
    body > div[style*="position:sticky"]{
        width:auto;
    }

    /* Topbar vẫn phủ toàn màn hình như ban đầu */
    .topbar{
        position:relative;
        z-index:1601;
        width:calc(100% + var(--duybinh-sidebar-width));
        margin-left:calc(var(--duybinh-sidebar-width) * -1);
    }

    .topbar .container{
        width:min(1180px,calc(100% - 28px));
    }

    /* Header trên cùng bên phải giữ bố cục cũ */
    .main-header{
        position:relative;
        z-index:1300;
        background:#fff;
        border-bottom:1px solid #e2e8f0;
    }

    .main-header .container{
        width:min(1180px,calc(100% - 28px));
    }

    /* Sidebar menu */
    .nav{
        position:fixed;
        z-index:1500;
        top:var(--duybinh-topbar-height);
        bottom:0;
        left:0;
        width:var(--duybinh-sidebar-width);
        overflow-y:auto;
        color:#fff;
        background:linear-gradient(180deg,var(--duybinh-blue) 0%,var(--duybinh-blue-dark) 100%);
        box-shadow:6px 0 20px rgba(15,23,42,.14);
    }

    .nav .container{
        width:100%;
        max-width:none;
        margin:0;
        padding:18px 12px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:7px;
        overflow:visible;
    }

    .nav .container > a,
    .nav .desktop-products-dropdown,
    .nav .desktop-products-link{
        width:100%;
    }

    .nav .container > a,
    .nav .desktop-products-link{
        min-height:46px;
        display:flex;
        align-items:center;
        padding:0 15px;
        border-radius:10px;
        color:#fff;
        font-size:14px;
        font-weight:700;
        line-height:1.2;
        white-space:nowrap;
        background:transparent;
        transition:background .18s ease,transform .18s ease;
    }

    .nav .container > a:hover,
    .nav .desktop-products-link:hover,
    .nav a.active{
        background:rgba(255,255,255,.16)!important;
        transform:translateX(2px);
    }

    .desktop-products-dropdown{
        position:relative;
        display:block;
        align-self:auto;
    }

    /* Menu danh mục bung sang phải */
    .desktop-category-menu{
        top:0!important;
        left:calc(100% + 10px)!important;
        width:270px!important;
        padding:7px!important;
        border:1px solid rgba(255,255,255,.15);
        border-radius:12px;
        background:rgba(7,95,146,.97)!important;
        box-shadow:0 16px 36px rgba(15,23,42,.25)!important;
    }

    .desktop-category-menu a{
        padding:11px 13px!important;
        border-radius:8px;
        color:#fff!important;
        font-size:13px;
        white-space:nowrap;
    }

    .desktop-category-menu a:hover{
        padding-left:16px!important;
        background:rgba(255,255,255,.14)!important;
    }

    /* Không làm phần sản phẩm bị ép nhỏ */
    .container{
        max-width:none;
    }

    .section > .container,
    .page-head > .container,
    .footer > .container,
    .hero-wrap,
    .main-header > .container{
        width:min(1180px,calc(100% - 28px));
    }

    /* Giữ lưới sản phẩm giống trước */
    .catalog-layout{
        grid-template-columns:250px minmax(0,1fr);
    }

    .product-grid{
        min-width:0;
    }

    .mobile-products-menu,
    .mobile-toggle,
    .mobile-cart,
    .mobile-header-search-wrap,
    .nav-overlay{
        display:none!important;
    }
}

/* Màn hình desktop vừa: sidebar nhỏ hơn một chút để không chật */
@media (min-width:651px) and (max-width:1100px){
    :root{
        --duybinh-sidebar-width:190px;
    }

    .nav .container > a,
    .nav .desktop-products-link{
        padding:0 12px;
        font-size:13px;
    }
}