/* Style riêng trang our-store, gom từ các khối <style> inline trong public/view/our-store.html cũ. */
.store-animation {
        opacity: 0;
        transform: translateY(20px);
    }
    
    @keyframes smoothFadeIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Hover effects for images */
    .grid img {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .grid img:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    /* Custom font for headings */
    @import url('https://fonts.googleapis.com/css2?family=CC+HVD+Poster+Clean:wght@400&display=swap');
    #background-store {
            background-image: url('/images/our-store/Intersect.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
    }
    /* Enhanced responsive design */
    @media (max-width: 438px) {
        .store-animation {
            margin-bottom: 2rem;
        }
        
        .grid {
            gap: 1rem;
        }
        #map {
            display: none;
        }
        #map-mobile {
            display: block;
        }
        #mention {
            display: none;
        }
        #mention_mobile {
            display: block;
            margin-bottom: 0px !important;
        }
        #background-store {
            background-image: url('/images/our-store/Intersect.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
    }
    
    /* Add subtle animation to store description */
    .store-animation p {
        opacity: 0;
        transform: translateY(10px);
        animation: fadeInStagger 0.8s ease forwards;
    }
    
    .store-animation p:nth-child(1) { animation-delay: 0.1s; }
    .store-animation p:nth-child(2) { animation-delay: 0.2s; }
    .store-animation p:nth-child(3) { animation-delay: 0.3s; }
    .store-animation p:nth-child(4) { animation-delay: 0.4s; }
    
    @keyframes fadeInStagger {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Scrolling images animation */
    .scrolling-images {
        animation: scrollRight 65s linear infinite;
        width: max-content;
    }
    
    @keyframes scrollRight {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%); /* Move by 50% since we have 2 identical sets of images */
        }
    }
    
    /* Pause animation on hover */
    .scrolling-images:hover {
        animation-play-state: paused;
    }
    
    /* Also pause when hovering on the container */
    .overflow-hidden:hover .scrolling-images {
        animation-play-state: paused;
    }