/* ===== Bottom app nav + header mobile cố định (petyeu) =====
   Chỉ áp dụng ở mobile (<=1001px). Desktop giữ nguyên. */
.app-bottomnav{display:none}

@media (max-width:1001px){
    /* 1) Bỏ 2 thanh marquee khuyến mãi chạy trên cùng */
    .head,.head2{display:none!important}

    /* 2) Cố định header mobile ngay từ đầu (không cần scroll mới fixed) */
    .menu_mobi_all{position:fixed;top:0;left:0;right:0;width:100%;z-index:999;background:#fff;box-shadow:0 2px 12px -6px rgba(0,0,0,.28)}
    .menu_mobi_all.menu-fix{animation:none}

    /* 2b) Header 1 hàng gọn (~44px): logo · ô tìm kiếm · avatar user
       (ép display:flex vì base .search-res/.search-grid vốn là dropdown desktop
        position:absolute/width:0/opacity:0 — phải reset để nằm inline trong header) */
    .menu_mobi_all{padding:0}
    .menu_mobi{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:10px;padding:5px 12px;min-height:44px;justify-content:flex-start}
    /* nền mờ của drawer phủ lên cả header + bottom nav (nhưng dưới panel drawer) */
    .menu_baophu{z-index:1001}
    .menu_mobi .logo-mobi{flex:none;margin:0;display:flex;align-items:center;height:34px}
    .menu_mobi .logo-mobi img{width:auto;max-width:82px;height:32px;object-fit:contain}
    /* ô tìm kiếm chiếm phần giữa, là 1 flex item trong header */
    .menu_mobi .search-res{flex:1 1 auto!important;width:auto!important;min-width:0!important;margin:0!important;position:relative!important}
    /* reset .search-grid từ dropdown-desktop -> hộp tìm kiếm inline bo nhẹ */
    .menu_mobi .search-res .search-grid{position:relative!important;top:auto!important;right:auto!important;left:auto!important;width:100%!important;height:34px!important;margin:0!important;padding:0!important;display:flex;align-items:center;overflow:hidden;opacity:1!important;background:#f4f4f2;border:1px solid #e5e5e8;border-radius:8px}
    .menu_mobi .search-res .search-grid:focus-within{border-color:var(--cl-0,#008001);background:#fff}
    /* input trong suốt lấp đầy hộp, bấm Enter để tìm (đã bỏ nút icon) */
    .menu_mobi .search-res .search-grid input{flex:1 1 auto;width:100%;height:100%;border:0;background:transparent;padding:0 12px;font-size:13px;outline:none;color:#333;margin:0}
    .menu_mobi .user-mobi{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;padding:0;text-decoration:none}
    .menu_mobi .user-mobi i{font-size:19px;color:#333;line-height:1}
    .menu_mobi .user-mobi-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#008001,#02690a);color:#fff;font-weight:700;font-size:14px;line-height:1}

    /* 3) Ẩn các icon/nút nổi góc phải (giỏ hàng + hỗ trợ + nút liên hệ digital) — thay bằng bottom nav */
    body #social,body #hotline,body .digital_social{display:none!important}

    /* 4) Thanh điều hướng dưới cùng dạng app */
    .app-bottomnav{
        display:flex;position:fixed;left:0;right:0;bottom:0;z-index:999;
        background:#fff;border-top:1px solid #ececec;
        box-shadow:0 -6px 22px -14px rgba(0,0,0,.3);
        padding-bottom:env(safe-area-inset-bottom);
    }
    .app-bottomnav__item{
        flex:1 1 0;min-width:0;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
        padding:8px 4px 7px;text-decoration:none;color:#8a8f98;cursor:pointer;
        font-size:11px;font-weight:600;line-height:1.1;
        -webkit-tap-highlight-color:transparent;transition:color .15s ease;
    }
    /* item "Danh mục" mang class .icon_menu_mobi để mở drawer — reset style gốc
       (base ép width/height:40px, chữ IN HOA, bold) cho khớp các item khác */
    .app-bottomnav .icon_menu_mobi{width:auto;height:auto;flex-direction:column;gap:3px;color:#8a8f98;font-size:11px;font-weight:600;text-transform:none}
    .app-bottomnav .icon_menu_mobi i{display:block;margin:0}
    .app-bottomnav__item i{font-size:20px;line-height:1}
    .app-bottomnav__item span{white-space:nowrap}
    .app-bottomnav__item.is-active,.app-bottomnav__item:active{color:var(--cl-0,#008001)}
    .app-bottomnav__cart{position:relative;display:inline-flex}
    .app-bottomnav__cart .count-cart{
        position:absolute;top:-7px;right:-11px;min-width:17px;height:17px;padding:0 4px;
        display:flex;align-items:center;justify-content:center;
        background:#e5432b;color:#fff;border-radius:980px;
        font-size:10px;font-weight:700;line-height:1;
    }
    .app-bottomnav__cart .count-cart:empty{display:none}

    /* 5) Chừa chỗ cho bottom nav (khoảng trống header phía trên do JS tự tính theo chiều cao thật) */
    body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}