/* =========================================================
   CAROUSEL CUỘN NGANG — điện thoại & iPad (≤1180px)
   Bỏ nút ‹ ›, thanh trượt ngang, 2 thẻ/hàng
   ========================================================= */

@media (max-width: 1180px) {
    .best-nav,
    .category-nav {
        display: none !important;
    }

    .best-carousel,
    .category-carousel {
        width: 92% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .best-viewport {
        overflow: visible !important;
    }

    .best-seller-grid,
    .category-track.category-track--scroll {
        --carousel-gap: clamp(8px, 1.2vw, 12px);
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: var(--carousel-gap) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 12px !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(184, 137, 73, 0.75) rgba(255, 250, 240, 0.5);
    }

    .best-seller-grid::-webkit-scrollbar,
    .category-track.category-track--scroll::-webkit-scrollbar {
        height: 6px;
    }

    .best-seller-grid::-webkit-scrollbar-track,
    .category-track.category-track--scroll::-webkit-scrollbar-track {
        background: rgba(255, 250, 240, 0.55);
        border-radius: 99px;
    }

    .best-seller-grid::-webkit-scrollbar-thumb,
    .category-track.category-track--scroll::-webkit-scrollbar-thumb {
        background: rgba(184, 137, 73, 0.72);
        border-radius: 99px;
    }

    .best-product-card {
        flex: 0 0 calc((100% - var(--carousel-gap)) / 2) !important;
        min-width: calc((100% - var(--carousel-gap)) / 2) !important;
        max-width: calc((100% - var(--carousel-gap)) / 2) !important;
        width: auto !important;
        scroll-snap-align: start;
        display: flex !important;
        border-radius: clamp(10px, 1.2vw, 14px) !important;
    }

    .best-product-card:nth-child(n + 7) {
        display: flex !important;
    }

    .best-product-image {
        aspect-ratio: 1 / 1 !important;
        max-height: none !important;
    }

    .best-product-info {
        width: 90% !important;
        margin: -8% auto 4% !important;
        padding: clamp(16px, 2vw, 22px) clamp(6px, 0.8vw, 10px) clamp(8px, 0.8vw, 10px) !important;
        min-height: clamp(72px, 9vw, 100px) !important;
        border-radius: clamp(8px, 1vw, 12px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
    }

    .best-product-info h3 {
        font-size: clamp(9px, 0.95vw, 12px) !important;
        min-height: 0 !important;
        margin: 0 0 2px !important;
        line-height: 1.25 !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    .best-product-icon {
        width: clamp(24px, 2.6vw, 32px) !important;
        height: clamp(24px, 2.6vw, 32px) !important;
        top: clamp(-12px, -1.4vw, -16px) !important;
        padding: 3px !important;
    }

    .best-buy-btn {
        height: clamp(24px, 2.4vw, 30px) !important;
        font-size: clamp(8px, 0.75vw, 10px) !important;
        border-radius: 6px !important;
        padding: 0 6px !important;
        min-width: 0 !important;
        width: 88% !important;
        margin: 2px auto 0 !important;
        flex-shrink: 0 !important;
    }

    .collection-btn-wrap {
        position: relative !important;
        margin: clamp(8px, 1vw, 14px) auto 0 !important;
        padding: 0 4% !important;
        transform: none !important;
    }

    .collection-btn {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 360px !important;
        height: clamp(34px, 3.2vw, 42px) !important;
        font-size: clamp(10px, 0.95vw, 13px) !important;
        gap: 8px !important;
        padding: 0 14px !important;
        border-radius: 8px !important;
    }

    .category-track.category-track--scroll {
        height: auto !important;
        min-height: 0 !important;
    }

    .category-track.category-track--scroll .category-card,
    .category-track.category-track--scroll .category-card.active {
        flex: 0 0 calc((100% - var(--carousel-gap)) / 2) !important;
        min-width: calc((100% - var(--carousel-gap)) / 2) !important;
        max-width: calc((100% - var(--carousel-gap)) / 2) !important;
        height: clamp(190px, 22vw, 250px) !important;
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
        scroll-snap-align: start;
        padding: 5px !important;
        border-radius: clamp(10px, 1.1vw, 14px) !important;
    }

    .category-track.category-track--scroll .category-image-box,
    .category-track.category-track--scroll .category-card.active .category-image-box {
        height: 62% !important;
    }

    .category-track.category-track--scroll .category-info {
        height: auto !important;
        min-height: 0 !important;
        padding: clamp(18px, 2vw, 24px) 4px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
    }

    .category-track.category-track--scroll .category-info h3,
    .category-track.category-track--scroll .category-card.active .category-info h3 {
        font-size: clamp(9px, 0.9vw, 11px) !important;
        line-height: 1.2 !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .category-track.category-track--scroll .category-icon {
        width: clamp(22px, 2.4vw, 28px) !important;
        height: clamp(22px, 2.4vw, 28px) !important;
        top: clamp(-11px, -1.2vw, -14px) !important;
    }

    .category-track.category-track--scroll .category-detail-btn {
        display: inline-flex !important;
        min-width: 0 !important;
        width: 88% !important;
        max-width: none !important;
        height: clamp(22px, 2.2vw, 28px) !important;
        font-size: clamp(7px, 0.7vw, 9px) !important;
        padding: 0 6px !important;
        margin: 2px auto 0 !important;
        flex-shrink: 0 !important;
    }

    .category-btn-wrap {
        margin-top: clamp(6px, 0.8vw, 10px) !important;
        padding: 0 4% !important;
    }

    .category-all-btn {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 360px !important;
        height: clamp(34px, 3.2vw, 42px) !important;
        font-size: clamp(10px, 0.95vw, 13px) !important;
        gap: 8px !important;
        padding: 0 14px !important;
        border-radius: 8px !important;
    }

    .hero-btn {
        min-width: clamp(120px, 14vw, 180px) !important;
        height: clamp(34px, 3.2vw, 44px) !important;
        font-size: clamp(11px, 1vw, 14px) !important;
        padding: 0 12px !important;
    }

    .knowledge-main-btn {
        min-width: clamp(140px, 16vw, 220px) !important;
        height: clamp(32px, 3vw, 40px) !important;
        font-size: clamp(10px, 0.9vw, 12px) !important;
    }
}