/* Style riêng trang chủ, gom từ các khối <style> inline trong public/view/homepage.html cũ. */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hover: đổi ảnh mũi tên */
img[src$="arrow-icon.png"]:hover {
    content: url("/images/arrow-hover-black.png");
    filter: none !important;
}

#arrow-icon-special {
    transition: opacity 0.3s ease;
}
#arrow-icon-special:hover {
    content: url("/images/arrow-icon-hover.png");
    filter: none !important;
}

/* Mobile: crop video giữa trang */
@media (max-width: 768px) {
    #home-middle-video,
    #home-middle-video-en {
        width: 100%;
        height: 50vh;
        object-fit: cover;
        object-position: center;
    }
}

#animation1 {
    font-size: 20px;
    line-height: 160%;
    letter-spacing: 0%;
    text-align: center;
    width: 486px;
}

/* Fade-up cho các nhãn */
.scrollFadeUp {
    opacity: 0;
}

#intersect-image {
    width: 575px;
    height: 377px;
}

#text-labels {
    font-size: 22px;
    font-weight: 500;
}

#text-nhan {
    width: 377px;
    font-size: 20px;
}

@media screen and (max-width: 430px) {
    #homepage_mobile { display: block; }
    #arrow-icon-special-mobile { display: block; }
    #intersect-image { width: 253px; height: 173px; }
    #itemNhan { width: 180px; height: 180px; }
    #location-text { font-size: 16px; }
    #story-text-container { display: none; }
    #symbol { width: 42px; height: 40px; }
    #text-labels { font-size: 14px; }
    #text-nhan { font-size: 14px; width: 280px; }
    .arrow-icon { width: 32px; height: 32px; }
    #product-carousel-mobile { display: flex; }
    #product-carousel { display: none; }
    #product-title { display: none; }
    #product-title-mobile { display: flex; }
    #animation1 {
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 0%;
        text-align: center;
        width: 85%;
    }
}