/* Homepage V2 Styles */

/* Top Banner - Red Background */
.homepage-v2-top-banner {
    background-color: #E31E24;
    color: #FFFFFF;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.homepage-v2-top-banner a {
    color: #FFFFFF;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 4px;
}

.homepage-v2-top-banner a:hover {
    opacity: 0.9;
}

/* Hero Section - Purple Gradient */
.homepage-v2-hero {
    background: linear-gradient(135deg, #6B46C1 0%, #7C3AED 100%);
    padding: 80px 0;
    color: #FFFFFF;
}

/* Services Section */
.homepage-v2-services {
    margin: 48px 0;
}

/* Services Grid - Force 3 columns on mobile, 6 columns on desktop */
.homepage-v2-services .grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

@media (min-width: 768px) {
    .homepage-v2-services .grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* Feature Banners */
.homepage-v2-features {
    padding: 48px 0;
    background-color: #FFFFFF;
}

/* Promotional Banners Section */
.homepage-v2-promotional-banners {
    margin: 48px 0;
}

/* Flash Sale Section - spacing only, background nằm trong box */
/* Dùng class flash-sale-section thay vì homepage-v2-flash-sale để style nền riêng */
.flash-sale-section {
    background: transparent;
}

.flash-sale-section .flash-sale-inner {
    background: radial-gradient(circle at 20% 20%, rgba(255, 69, 0, 0.18), transparent 30%),
                radial-gradient(circle at 80% 30%, rgba(255, 0, 0, 0.12), transparent 32%),
                linear-gradient(180deg, rgba(26, 10, 10, 0.9), rgba(24, 8, 8, 0.92));
    border: 1px solid rgba(255, 68, 68, 0.35);
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    max-width: 1200px;
    margin: 0 auto;
    width:100%;
}

/* Mobile: Full width, no border radius */
@media (max-width: 640px) {
    .flash-sale-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .flash-sale-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    
    .flash-sale-section .flash-sale-inner {
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* Override inline style border-radius */
        border-radius: 0 !important;
        /* Mobile padding 16px */
        padding: 16px !important;
    }
    
    /* Category Products Section - Mobile: Full width, no border radius */
    .homepage-v2-category-products {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .homepage-v2-category-products .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    
    .homepage-v2-category-products .category-products-inner {
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* Override inline style border-radius */
        border-radius: 0 !important;
        /* Mobile padding 16px */
        padding: 16px !important;
    }
    
    /* Category Products Carousel - Show 3 items, scroll with buttons */
    .homepage-v2-category-products .products-carousel-container {
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        align-items: stretch !important;
    }
    
    /* Desktop: Force height 480px */
    @media (min-width: 641px) {
        .homepage-v2-category-products .products-carousel-item {
            flex-shrink: 0 !important;
            height: 480px !important;
            min-height: 480px !important;
            max-height: 480px !important;
        }
        
        /* Force all product cards to same height - override app.css */
        .homepage-v2-category-products .products-carousel-item,
        .homepage-v2-category-products .products-carousel-item > div,
        .homepage-v2-category-products .products-carousel-item .group,
        .homepage-v2-category-products .products-carousel-container .group,
        .homepage-v2-category-products .products-carousel-container .products-carousel-item .group {
            height: 480px !important;
            min-height: 480px !important;
            max-height: 480px !important;
        }
    }
    
    /* Mobile: Allow natural height, ensure info section is visible */
    @media (max-width: 640px) {
        .homepage-v2-category-products .products-carousel-item {
            flex-shrink: 0 !important;
            height: auto !important;
            min-height: auto !important;
            max-height: none !important;
        }
        
        .homepage-v2-category-products .products-carousel-item > div {
            height: auto !important;
            min-height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }
    
    /* Banner desktop - same height as product items (only for desktop banner with max-lg:hidden) */
    @media (min-width: 1024px) {
        .homepage-v2-category-products .grid .col-span-1.flex {
            height: 480px !important;
            min-height: 480px !important;
            max-height: 480px !important;
        }
        
        .homepage-v2-category-products .grid .col-span-1.flex > a,
        .homepage-v2-category-products .grid .col-span-1.flex > a > img {
            height: 100% !important;
            object-fit: cover !important;
        }
    }
}

.flash-sale-section .flash-sale-title {
    margin-bottom: 24px;
}

/* Flash Sale Countdown Timer */
.flash-sale-countdown {
    text-align: center;
}

.flash-sale-countdown .countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .flash-sale-countdown .countdown-timer {
        gap: 16px;
    }
}

.flash-sale-countdown .countdown-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 6px;
    padding: 4px 8px;
    width: 35px;
    height: 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .flash-sale-countdown .countdown-box {
        width: 45px;
        height: 40px;
        padding: 6px 10px;
        border-radius: 8px;
    }
}

.flash-sale-countdown .countdown-value {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    will-change: contents;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #dc2626 !important; /* text-red-600 */
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    width: 100%;
    height: 100%;
}

.flash-sale-countdown .countdown-separator {
    line-height: 1;
    padding: 0 2px;
    color: white !important;
    font-weight: 700;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* Mobile adjustments for countdown */
@media (max-width: 640px) {
    .flash-sale-countdown {
        margin-top: 8px;
    }
    
    .flash-sale-countdown .countdown-timer {
        gap: 4px;
    }
    
    .flash-sale-countdown .countdown-box {
        width: 30px;
        height: 28px;
        padding: 4px 6px;
        border-radius: 4px;
    }
    
    .flash-sale-countdown .countdown-value {
        font-size: 1rem;
    }
    
    .flash-sale-countdown .countdown-separator {
        font-size: 1.25rem;
    }
}

/* Ẩn arrow carousel */
.flash-sale-section .flash-sale-carousel .v-products-carousel .icon-arrow-left-stylish,
.flash-sale-section .flash-sale-carousel .v-products-carousel .icon-arrow-right-stylish {
    display: none !important;
}

/* Ẩn button "Xem tất cả" */
.flash-sale-section .flash-sale-carousel .secondary-button {
    display: none !important;
}

.flash-sale-section .flash-sale-carousel .carousel-title {
    display: none;
}

.flash-sale-section .flash-sale-carousel .v-products-carousel {
    margin-top: 0;
}

/* Disable hover effect - Đã được xử lý trong app.css cho tất cả sections */
/* Không cần override riêng ở đây để tránh conflict với CSS chung */

/* CSS cũ cho v-products-carousel đã được xóa - giờ dùng card-v2 */

/* Product Sections */
.homepage-v2-section {
    padding: 72px 0;
    background-color: #FFFFFF;
}

.homepage-v2-section-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
    color: #111827;
}

/* Gaming Monitors Section - Purple Gradient */
.homepage-v2-gaming-monitors {
    background: linear-gradient(135deg, #6B46C1 0%, #7C3AED 100%);
    color: #FFFFFF;
    padding: 80px 0;
}

/* Air Conditioners Section - Blue Gradient */
.homepage-v2-air-conditioners {
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    color: #FFFFFF;
    padding: 80px 0;
}

/* Bottom Banner - Orange Background */
.homepage-v2-bottom-banner {
    background-color: #FB923C;
    color: #FFFFFF;
    padding: 60px 0;
    text-align: center;
}

/* Override Product Carousel for V2 */
.homepage-v2-section .v-products-carousel {
    margin-top: 0;
}

.homepage-v2-section .v-products-carousel .carousel-title {
    display: none; /* Hide default title since we have custom title */
}

/* Override container max-width to 1200px */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px !important;
    }
}

/* Section 5: Featured Products - Grid 4x2 */
.homepage-v2-featured-products .grid.grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.homepage-v2-featured-products .grid.grid-cols-4 > * {
    max-width: 100% !important;
    width: 100% !important;
}

/* Override product card max-width trong featured products */
.homepage-v2-featured-products [class*="max-w-"] {
    max-width: 100% !important;
}

.homepage-v2-featured-products .group > div:first-child {
    max-width: 100% !important;
}

/* Override shimmer card max-width để hiển thị grid đúng */
.homepage-v2-featured-products .grid.grid-cols-4 > div[class*="grid"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Product card styling - đã dùng CSS chung trong app.css */

/* Rating section - hiển thị sao vàng */
.homepage-v2-featured-products .group > div:last-child .icon-star-fill,
.homepage-v2-featured-products .group > div:first-child .icon-star-fill {
    color: #FFD700 !important;
}

.homepage-v2-featured-products .group > div:last-child .icon-star,
.homepage-v2-featured-products .group > div:first-child .icon-star {
    color: #ddd !important;
}

/* Rating section cho New Products - hiển thị sao vàng */
.homepage-v2-new-products .group > div:last-child .icon-star-fill,
.homepage-v2-new-products .group > div:first-child .icon-star-fill {
    color: #FFD700 !important;
}

.homepage-v2-new-products .group > div:last-child .icon-star,
.homepage-v2-new-products .group > div:first-child .icon-star {
    color: #ddd !important;
}

/* Rating container - force row layout để sao và số nằm cùng hàng */
/* Flash-sale dùng chung homepage-v2-featured-products nên không cần CSS riêng */
.homepage-v2-featured-products .group > div:last-child .product-rating-container,
.homepage-v2-new-products .group > div:last-child .product-rating-container,
.homepage-v2-category-products-1 .group > div:last-child .product-rating-container {
    display: block !important;
    margin: 0 !important;
}

/* Rating content - đảm bảo nằm cùng hàng - override mọi rule khác */
.homepage-v2-featured-products .group > div:last-child .product-rating-container .product-rating-content,
.homepage-v2-new-products .group > div:last-child .product-rating-container .product-rating-content,
.homepage-v2-featured-products .group > div:last-child .product-rating-content,
.homepage-v2-new-products .group > div:last-child .product-rating-content,
.homepage-v2-category-products-1 .group > div:last-child .product-rating-container .product-rating-content,
.homepage-v2-category-products-1 .group > div:last-child .product-rating-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    width: auto !important;
}

/* Flash-sale nền tối: đảm bảo rating hiển thị rõ */
.flash-sale-section .product-rating-container {
    display: block !important;
    margin: 0 !important;
}

.flash-sale-section .product-rating-container .product-rating-content,
.flash-sale-section .product-rating-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    color: #111 !important; /* số đánh giá */
}

/* Category section nền tím: đảm bảo rating hiển thị rõ */
.category-products-section .product-rating-container {
    display: block !important;
    margin: 0 !important;
}

.category-products-section .product-rating-container .product-rating-content,
.category-products-section .product-rating-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    color: #111 !important;
}

/* Đảm bảo icon font hoạt động đúng trong rating container */
.homepage-v2-featured-products .group > div:last-child .product-rating-container [class^="icon-"],
.homepage-v2-featured-products .group > div:last-child .product-rating-container [class*=" icon-"],
.homepage-v2-new-products .group > div:last-child .product-rating-container [class^="icon-"],
.homepage-v2-new-products .group > div:last-child .product-rating-container [class*=" icon-"] {
    font-family: "bagisto-shop" !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    display: inline-block !important;
    speak: never !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Ẩn 3 icon: wishlist, compare, view */
.homepage-v2-featured-products .group .icon-heart,
.homepage-v2-featured-products .group .icon-heart-fill,
.homepage-v2-featured-products .group .icon-compare,
.homepage-v2-featured-products .group .icon-eye {
    display: none !important;
}

/* Button section - đã dùng CSS chung trong app.css */


/* Section 10: New Products - Grid 4x2 - max-width đã dùng CSS chung trong app.css */

/* Product card styling - đã dùng CSS chung trong app.css */


/* Section 7: Category Products 1 - Banner + 3 Products */
/* Đảm bảo banner và sản phẩm có cùng chiều cao và khoảng cách đều */
.homepage-v2-category-products-1 .grid.grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 1rem !important; /* 16px gap đều nhau */
}

/* Override product card max-width trong category-products-1 - giống featured-products và new-products */
.homepage-v2-category-products-1 .grid.grid-cols-4 > * {
    max-width: 100% !important;
    width: 100% !important;
}

.homepage-v2-category-products-1 [class*="max-w-"] {
    max-width: 100% !important;
}

.homepage-v2-category-products-1 .group > div:first-child {
    max-width: 100% !important;
}

.homepage-v2-category-products-1 .grid.grid-cols-4 > div[class*="grid"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Banner container - đảm bảo chiều cao bằng product card */
.homepage-v2-category-products-1 .grid.grid-cols-4 > div:first-child {
    display: flex !important;
    height: 100% !important;
}

/* Banner link và image */
.homepage-v2-category-products-1 .grid.grid-cols-4 > div:first-child > a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
}

.homepage-v2-category-products-1 .grid.grid-cols-4 > div:first-child > a > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Product card wrapper - đảm bảo chiều cao - đã được xử lý trong app.css cho tất cả sections */

/* Đảm bảo banner có cùng chiều cao với product card */
.homepage-v2-category-products-1 .grid.grid-cols-4 > div:first-child {
    min-height: fit-content !important;
}

/* Button section - đã dùng CSS chung trong app.css */

/* Section 7: Category Products 1 - Banner + 3 Products */
/* Không cần CSS phức tạp, dùng Tailwind và component Vue đơn giản */

@media (max-width: 768px) {
    .homepage-v2-hero {
        padding: 48px 0;
    }
    
    .homepage-v2-hero h1 {
        font-size: 28px !important;
    }
    
    .homepage-v2-section {
        padding: 48px 0;
    }
    
    .homepage-v2-section-title {
        font-size: 24px;
        margin-bottom: 24px;
    }
    
    .flash-sale-section .flash-sale-title {
        font-size: 24px;
        margin-bottom: 24px;
    }
    
    .homepage-v2-gaming-monitors,
    .homepage-v2-air-conditioners {
        padding: 48px 0;
    }
    
    .homepage-v2-bottom-banner {
        padding: 40px 0;
    }
    
    .homepage-v2-bottom-banner p {
        font-size: 20px !important;
    }
}