/**
 * Xuan Cuong Handicraft - Swiper Enhancements & Integration
 * Ensures 100% UI preservation across all sliders migrated to Swiper v11
 */

/* ==========================================================================
   Global Swiper Resets (Prevents legacy CSS gaps and padding from skewing slides)
   ========================================================================== */
.swiper-wrapper {
    box-sizing: border-box !important;
}

/* ==========================================================================
   1. Contact Page: Space Discovery Slider (Khám phá không gian)
   Specs: 1.4 slides visible per view, centered, aspect-ratio 13/7, max-width 1300px
   ========================================================================== */
.space-slider-outer.swiper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
    user-select: none;
    padding: 20px 0 !important;
    position: relative !important;
}

.space-slider-outer.swiper .space-slider-track.swiper-wrapper {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.space-slider-outer.swiper .space-slide-item.swiper-slide {
    /* slidesPerView: 'auto' → Swiper dùng width này để căn slide active vào giữa */
    width: min(calc(100% / 1.4), 1300px) !important;
    aspect-ratio: 13 / 7 !important;
    height: auto !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 0.65;
}

.space-slider-outer.swiper .space-slide-item.swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}

.space-slider-outer.swiper .space-slide-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.space-slider-outer.swiper .space-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.space-slider-outer.swiper .space-slide-item:hover .space-slide-img {
    transform: scale(1.025);
}

@media (max-width: 1023px) {
    .space-slider-outer.swiper .space-slide-item.swiper-slide {
        width: calc(100% / 1.25) !important;
    }
}

@media (max-width: 639px) {
    .space-slider-outer.swiper .space-slide-item.swiper-slide {
        width: calc(100% / 1.12) !important;
    }
}

@media (max-width: 768px) {
    .space-slider-outer.swiper .space-slide-item.swiper-slide {
        aspect-ratio: 16 / 10 !important;
        opacity: 0.85;
    }

    .space-slider-outer.swiper .space-slide-item.swiper-slide.swiper-slide-active {
        opacity: 1 !important;
    }
}

/* ==========================================================================
   2. Materials Section Slider (Bảy chất liệu, ba kỹ thuật thủ công)
   ========================================================================== */
.materials-slider-viewport.swiper {
    flex: 1 !important;
    overflow: hidden !important;
    width: 100% !important;
    cursor: grab;
    user-select: none;
    padding: 10px 0 !important;
    position: relative !important;
}

.materials-slider-viewport.swiper:active {
    cursor: grabbing;
}

.materials-slider-viewport.swiper .materials-slider-track.swiper-wrapper {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

.materials-slider-viewport.swiper .material-slide-card.swiper-slide {
    width: 386.667px !important;
    max-width: none !important;
    height: 460px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Card 386px chỉ hợp màn ~1920px: thu nhỏ cho desktop nhỏ & tablet */
@media (min-width: 641px) and (max-width: 1519px) {
    .materials-slider-viewport.swiper .material-slide-card.swiper-slide {
        width: 320px !important;
        height: 400px !important;
    }
}

@media (max-width: 640px) {
    .materials-slider-viewport.swiper .material-slide-card.swiper-slide {
        width: 300px !important;
        height: 380px !important;
    }
}

/* ==========================================================================
   3. Sale Products Slider (Ưu đãi đặc biệt)
   ========================================================================== */
.sale-slider-viewport.swiper {
    width: 90% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.sale-slider-viewport.swiper .sale-slider-track.swiper-wrapper {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

.sale-slider-viewport.swiper .sale-product-card.swiper-slide {
    height: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #FFFFFF !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* ==========================================================================
   5. Single Product Reviews Slider (Đánh giá của khách hàng)
   ========================================================================== */
.reviews-cards-slider.swiper {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.reviews-cards-slider.swiper .reviews-slider-track.swiper-wrapper {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

.reviews-cards-slider.swiper .review-slide-card.swiper-slide {
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #2D3748 !important;
}

/* Chặn kéo link/ảnh mặc định của trình duyệt để thao tác kéo slide hoạt động */
.materials-slider-viewport.swiper .material-slide-card.swiper-slide {
    -webkit-user-drag: none;
    user-select: none;
}