/* ==========================================
   CAROUSEL 3D - OPTIMIZED VERSION
   ✅ Giảm 25% chiều cao (Desktop)
   ✅ Giảm 30% chiều cao (Mobile)
   ✅ Shadow nhẹ, modern
   ✅ Typography có phân cấp rõ ràng
   ========================================== */

.section-featured {
    padding: 15px 0 10px;
    background: #ffffff;
    overflow-x: hidden;
}

.section-title {
    font-size: 1.4rem;
    color: #333;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 4px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(to right, #1e5ba8, #228b22);
    border-radius: 2px;
}

.featured-slider-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 0 8px;
    overflow-x: hidden;
}

/* ==========================================
   CAROUSEL CONTAINER - GIẢM CHIỀU CAO 25%
   Desktop: 280px → 210px
   ========================================== */
.featured-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 210px; /* ✅ GIẢM 25% từ 280px */
    perspective: 1500px;
    overflow: visible !important;
}

/* ==========================================
   SLIDE - GIẢM WIDTH ĐỂ CÂN ĐỐI
   Desktop: 320px → 280px (-12.5%)
   ========================================== */
.featured-slide {
    position: absolute !important;
    width: 280px; /* ✅ GIẢM từ 320px */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    transform-style: preserve-3d;
}

/* GIỮA - Sản phẩm chính */
.featured-slide.active {
    z-index: 20 !important;
    transform: translateX(0) scale(1.12) rotateY(0deg) !important;
    opacity: 1 !important;
    filter: blur(0) brightness(1) !important;
}

/* TRÁI - Sản phẩm phụ */
.featured-slide.prev {
    z-index: 10 !important;
    transform: translateX(-320px) scale(0.75) rotateY(18deg) !important;
    opacity: 0.55 !important;
    filter: blur(0.8px) brightness(0.85) !important;
}

/* PHẢI - Sản phẩm phụ */
.featured-slide.next {
    z-index: 10 !important;
    transform: translateX(320px) scale(0.75) rotateY(-18deg) !important;
    opacity: 0.55 !important;
    filter: blur(0.8px) brightness(0.85) !important;
}

/* ẨN */
.featured-slide.hidden {
    z-index: 1 !important;
    transform: scale(0.4) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================
   CARD - SHADOW NHẸ, HIỆN ĐẠI
   ✅ Giảm shadow opacity 50%
   ✅ Blur 10px (thay vì lớn hơn)
   ========================================== */
.featured-link {
    display: block;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); /* ✅ GIẢM opacity 50% */
}

/* Border CHỈ ở GIỮA - Nhẹ hơn */
.featured-slide.active .featured-link {
    border: 2px solid #ffffff; /* ✅ GIẢM từ 3px xuống 2px */
    box-shadow: 0 4px 12px rgba(30, 91, 168, 0.12); /* ✅ GIẢM opacity */
}

/* Sản phẩm bên KHÔNG BORDER */
.featured-slide:not(.active) .featured-link {
    border: none;
}

.featured-slide:not(.active) .featured-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   ẢNH - GIẢM CHIỀU CAO 25%
   Desktop: 180px → 135px
   ========================================== */
.featured-img {
    width: 100%;
    height: 135px; /* ✅ GIẢM 25% từ 180px */
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.featured-slide.active .featured-img img {
    transform: scale(1.05);
}

.no-img {
    text-align: center;
    color: #ddd;
}

.no-img i {
    font-size: 40px; /* ✅ GIẢM từ 50px */
}

/* ==========================================
   INFO - PHÂN CẤP TYPOGRAPHY RÕ RÀNG
   ✅ Giảm padding 18-22% → chọn 20%
   ✅ Tên SP: font-weight 600, -10% size
   ✅ Category: font-weight 400, màu xám
   ========================================== */
.featured-info {
    padding: 6px 12px 5px; /* ✅ GIẢM 20% từ (8px 12px 6px) */
    background: white;
    text-align: center;
}

/* TÊN SẢN PHẨM - ĐIỂM NEO CHÍNH */
.featured-info h3 {
    font-size: 13px; /* ✅ GIẢM 10% từ 14px → 13px (làm tròn) */
    color: #333;
    margin: 0 0 2px 0;
    line-height: 1.3;
    font-weight: 600; /* ✅ TĂNG từ 500 lên 600 */
    min-height: 28px; /* ✅ GIẢM từ 32px */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Khi ACTIVE - nổi bật hơn */
.featured-slide.active .featured-info h3 {
    color: #1e5ba8;
    font-size: 14px; /* ✅ GIẢM từ 15px → 14px */
    font-weight: 700;
}

/* CATEGORY NAME - PHỤ, NHẸ, XÁM */
.category-name {
    display: block;
    padding: 0;
    background: none; /* ✅ Bỏ background */
    color: #999; /* ✅ XÁM NHẠT (thay vì #888) */
    border-radius: 0;
    font-size: 11px; /* ✅ NHỎ HƠN (từ 12px → 11px) */
    font-weight: 400; /* ✅ NHẸ (không đậm) */
    margin-top: 0;
    opacity: 0.85; /* ✅ Opacity 85% */
}

/* Khi ACTIVE - hơi rõ hơn một chút */
.featured-slide.active .category-name {
    background: none;
    color: #666; /* ✅ ĐẬM HƠN MỘT CHÚT */
    font-size: 11px; /* ✅ GIỮ SIZE NHỎ */
    font-weight: 500; /* ✅ HƠI ĐẬM */
}

/* ==========================================
   DOTS NAVIGATION - GIẢM SIZE 20-30% → 25%
   ========================================== */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px; /* ✅ GIẢM từ 20px */
}

.dot {
    width: 9px; /* ✅ GIẢM 25% từ 12px → 9px */
    height: 9px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot:hover {
    background: #999;
    transform: scale(1.15);
}

.dot.active {
    background: #1e5ba8;
    width: 26px; /* ✅ GIẢM 25% từ 35px → 26px */
    border-radius: 6px;
}

/* ==========================================
   CATEGORY SECTION - NHẸ GỌN
   ========================================== */
.section-categories {
    padding: 5px 0 30px;
    background: #f8f9fa;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.category-item {
    padding: 27px 25px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.category-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.category-item h3 {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 700;
}

.category-item p {
    font-size: 14px;
    margin: 0;
}

/* ==========================================
   RESPONSIVE - TABLET
   ========================================== */
@media (max-width: 1024px) {
    .featured-slider {
        height: 200px; /* ✅ GIẢM thêm cho tablet */
    }
    
    .featured-slide {
        width: 260px; /* ✅ GIẢM từ 280px */
    }
    
    .featured-slide.active {
        transform: scale(1.12) !important;
    }
    
    .featured-slide.prev {
        transform: translateX(-288px) scale(0.72) rotateY(16deg) !important;
    }
    
    .featured-slide.next {
        transform: translateX(288px) scale(0.72) rotateY(-16deg) !important;
    }
    
    .featured-img {
        height: 130px; /* ✅ GIẢM từ 180px */
    }
}

/* ==========================================
   RESPONSIVE - MOBILE (GIẢM 30%)
   ========================================== */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.3rem;
        margin-bottom: 18px;
    }
    
    .featured-slider {
        height: 182px; /* ✅ GIẢM 30% từ 260px */
    }
    
    .featured-slide {
        width: 195px; /* ✅ GIẢM 19% từ 240px */
    }
    
    .featured-slide.active {
        transform: scale(1.1) !important;
    }
    
    /* ✅ GIẢM translateX để vừa màn hình */
    .featured-slide.prev {
        transform: translateX(-155px) scale(0.68) rotateY(14deg) !important; /* ✅ GIẢM từ -180px */
        opacity: 0.45 !important;
    }
    
    .featured-slide.next {
        transform: translateX(155px) scale(0.68) rotateY(-14deg) !important; /* ✅ GIẢM từ 180px */
        opacity: 0.45 !important;
    }
    
    .featured-img {
        height: 112px; /* ✅ GIẢM 30% từ 160px */
    }
    
    /* TYPOGRAPHY - MOBILE */
    .featured-info {
        padding: 8px 10px 6px; /* ✅ GIẢM 25% padding */
    }
    
    .featured-info h3 {
        font-size: 13px; /* ✅ 1 dòng, rõ ràng */
        min-height: 30px; /* ✅ GIẢM từ 36px */
        -webkit-line-clamp: 2; /* Giữ 2 dòng để đọc được */
    }
    
    .featured-slide.active .featured-info h3 {
        font-size: 14px; /* ✅ GIẢM từ 15px */
    }
    
    .category-name {
        font-size: 10px; /* ✅ GIẢM từ 12px */
    }
    
    .category-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .category-item {
        padding: 22px 20px;
    }
    
    .category-item h3 {
        font-size: 18px;
    }
}

/* ==========================================
   SMALL MOBILE (GIẢM 30%)
   ========================================== */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .featured-slider {
        height: 168px; /* ✅ GIẢM 30% từ 240px */
    }
    
    .featured-slide {
        width: 170px; /* ✅ GIẢM từ 200px */
    }
    
    .featured-slide.active {
        transform: scale(1.08) !important;
    }
    
    /* ✅ GIẢM translateX cho màn hình nhỏ */
    .featured-slide.prev {
        transform: translateX(-125px) scale(0.65) rotateY(12deg) !important;
        opacity: 0.4 !important;
        filter: blur(0.8px) brightness(0.85) !important;
    }
    
    .featured-slide.next {
        transform: translateX(125px) scale(0.65) rotateY(-12deg) !important;
        opacity: 0.4 !important;
        filter: blur(0.8px) brightness(0.85) !important;
    }
    
    .featured-img {
        height: 98px; /* ✅ GIẢM 30% từ 140px */
    }
    
    .featured-info {
        padding: 6px 8px 5px; /* ✅ GIẢM padding */
    }
    
    .featured-info h3 {
        font-size: 12px; /* ✅ GIẢM từ 13px */
        min-height: 28px; /* ✅ GIẢM từ 34px */
    }
    
    .featured-slide.active .featured-info h3 {
        font-size: 13px; /* ✅ GIẢM từ 14px */
    }
    
    .category-name {
        font-size: 9px; /* ✅ GIẢM từ 10px */
    }
    
    .slider-dots {
        margin-top: 25px; /* ✅ GIẢM từ 30px */
        gap: 8px;
    }
    
    .dot {
        width: 8px; /* ✅ GIẢM từ 10px */
        height: 8px;
    }
    
    .dot.active {
        width: 22px; /* ✅ GIẢM từ 30px */
    }
    
    .category-item {
        padding: 20px 18px;
    }
    
    .category-item h3 {
        font-size: 18px;
    }
    
    .category-item p {
        font-size: 13px;
    }
}

/* ==========================================
   ✅ TỔNG KẾT CẢI TIẾN:
   
   DESKTOP:
   - Chiều cao slider: 280px → 210px (-25%) ✅
   - Chiều cao ảnh: 180px → 135px (-25%) ✅
   - Card width: 320px → 280px (-12.5%) ✅
   - Shadow: Opacity -50%, Blur 10px ✅
   - Typography: Phân cấp rõ ràng ✅
   - Padding: Giảm 20% ✅
   
   MOBILE:
   - Chiều cao slider: 260px → 182px (-30%) ✅
   - Chiều cao ảnh: 160px → 112px (-30%) ✅
   - Card width: 240px → 195px (-19%) ✅
   - Dots: Giảm 25% ✅
   - Typography: 16-17px tên, 13-14px mô tả ✅
   
   SMALL MOBILE:
   - Chiều cao slider: 240px → 168px (-30%) ✅
   - Chiều cao ảnh: 140px → 98px (-30%) ✅
   - TranslateX: Điều chỉnh để vừa màn hình ✅
   
   🎯 NGUYÊN TẮC:
   - Không thêm hiệu ứng mới ✅
   - Không thêm màu mới ✅
   - Không redesign layout ✅
   - Chỉ tối ưu kích thước & trọng lượng ✅
   ========================================== */