/**
 * VL Child Theme - Custom CSS
 * Sử dụng Tailwind với prefix vl- để tránh conflict
 * 
 * Note: CSS cho Product with Banner overlay có thể chèn vào Elementor Pro Custom CSS
 * File: product-banner-overlay.css
 */

/* Custom Tailwind Utilities với prefix vl- */
@layer utilities {
    /* Container utilities */
    .vl-container {
        @apply max-w-7xl mx-auto px-4;
    }
    
    /* Hero Slider */
    .vl-hero-slider {
        @apply relative w-full h-screen overflow-hidden;
    }
    
    .vl-hero-slide {
        @apply absolute inset-0 w-full h-full;
    }
    
    .vl-hero-video,
    .vl-hero-image {
        @apply absolute inset-0 w-full h-full object-cover;
    }
    
    .vl-hero-overlay {
        @apply absolute inset-0 bg-black bg-opacity-30 z-10;
    }
    
    .vl-hero-content {
        @apply relative z-20 flex flex-col items-center justify-center h-full text-white text-center px-4;
    }
    
    /* Category Banner */
    .vl-cat-banner {
        @apply relative overflow-hidden rounded-lg transition-transform duration-300 hover:scale-105;
    }
    
    .vl-cat-banner-image {
        @apply w-full h-full object-cover;
    }
    
    .vl-cat-banner-overlay {
        @apply absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent flex flex-col justify-end p-6 text-white;
    }
    
    /* Product Carousel */
    .vl-product-carousel {
        @apply relative;
    }
    
    .vl-product-grid {
        @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
    }
    
    .vl-product-item {
        @apply bg-white rounded-lg overflow-hidden shadow-md transition-shadow hover:shadow-xl;
    }
    
    /* Instagram Feed */
    .vl-instagram-feed {
        @apply w-full;
    }
    
    .vl-instagram-gallery.vl-grid {
        @apply grid gap-4;
        grid-template-columns: repeat(var(--columns, 6), minmax(0, 1fr));
    }
    
    .vl-instagram-gallery.vl-carousel {
        @apply flex overflow-x-auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .vl-instagram-item {
        @apply relative;
        aspect-ratio: 1;
    }
    
    .vl-instagram-item-inner {
        @apply w-full h-full;
    }
    
    .vl-instagram-overlay {
        @apply bg-black bg-opacity-50;
        transition: opacity 0.3s ease;
    }
    
    .vl-instagram-icon {
        @apply w-12 h-12 text-white;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
    
    /* Popup */
    .vl-instagram-popup {
        @apply fixed inset-0 bg-black bg-opacity-90 z-50;
        display: none;
    }
    
    .vl-instagram-popup:not(.vl-hidden) {
        @apply flex items-center justify-center;
    }
    
    .vl-popup-content {
        @apply relative max-w-4xl max-h-screen p-4;
    }
    
    .vl-popup-image {
        @apply w-full h-auto rounded-lg;
        max-height: 90vh;
        object-fit: contain;
    }
    
    .vl-popup-close,
    .vl-popup-prev,
    .vl-popup-next {
        @apply absolute text-white text-4xl font-bold hover:text-gray-300 z-10;
        transition: color 0.2s ease;
    }
    
    .vl-popup-close {
        @apply top-4 right-4 text-2xl;
    }
    
    .vl-popup-prev {
        @apply left-4;
    }
    
    .vl-popup-next {
        @apply right-4;
    }
}

/* Override Tailwind với prefix vl- để tránh conflict */
.vl-absolute { position: absolute; }
.vl-relative { position: relative; }
.vl-z-10 { z-index: 10; }
.vl-z-20 { z-index: 20; }
.vl-flex { display: flex; }
.vl-grid { display: grid; }
.vl-w-full { width: 100%; }
.vl-h-full { height: 100%; }
.vl-object-cover { object-fit: cover; }
.vl-transition-transform { transition-property: transform; }
.vl-duration-300 { transition-duration: 300ms; }
.vl-hover\:scale-105:hover { transform: scale(1.05); }