/**
 * Hệ thống Hiệu ứng Cuộn Xuất hiện & Xuất hiện Toàn màn hình (Scroll Reveal & Full-Screen Entrance Animation) VNSIC
 * Tối ưu hóa 60fps/120fps bằng phần cứng GPU (translate3d, opacity)
 * Thiết kế tinh tế, nhịp nhàng theo phong cách định chế hiện đại
 * Áp dụng thống nhất cho Trang chủ và Toàn bộ các Trang Menu Con
 */

/* 1. Ngăn thanh cuộn ngang khi thẻ trượt từ 2 bên mép vào trên cả Desktop & Mobile */
html, body, #main, .home-page, body.sub_page, .vnsic-chuyen-trang-intro, .contact-page-wrapper, .vnsic-faq-hub-page, .vnsic-dmst-hub {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* 2. Trạng thái ẩn ban đầu khi thẻ HTML đã sẵn sàng */
html.co-hieu-ung-cuon [data-cuon-hieu-ung] {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: opacity, transform;
    transition-duration: 0.75s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* Out-Cubic gia tốc phanh mượt */
}

/* Kiểu 1: Trượt từ bên TRÁI vào */
html.co-hieu-ung-cuon [data-cuon-hieu-ung="truot-trai"] {
    transform: translate3d(-50px, 0, 0);
}

/* Kiểu 2: Trượt từ bên PHẢI vào */
html.co-hieu-ung-cuon [data-cuon-hieu-ung="truot-phai"] {
    transform: translate3d(50px, 0, 0);
}

/* Kiểu 3: Trượt từ DƯỚI lên */
html.co-hieu-ung-cuon [data-cuon-hieu-ung="truot-len"] {
    transform: translate3d(0, 36px, 0);
}

/* Kiểu 4: Trượt từ TRÊN xuống */
html.co-hieu-ung-cuon [data-cuon-hieu-ung="truot-xuong"] {
    transform: translate3d(0, -28px, 0);
}

/* Kiểu 5: Phóng to nhẹ */
html.co-hieu-ung-cuon [data-cuon-hieu-ung="phong-to"] {
    transform: scale(0.94);
}

/* 3. Trạng thái ĐÃ XUẤT HIỆN khi cuộn đến */
/* QUAN TRỌNG: transform: none không dùng !important để giữ nguyên 100% hiệu ứng :hover của thẻ */
html.co-hieu-ung-cuon [data-cuon-hieu-ung].da-xuat-hien {
    opacity: 1;
    transform: none;
}

/* 4. Bộ định thời trễ phân tầng (Stagger Delays) */
html.co-hieu-ung-cuon [data-cuon-do-tre="50"]  { transition-delay: 0.05s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="60"]  { transition-delay: 0.06s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="80"]  { transition-delay: 0.08s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="100"] { transition-delay: 0.1s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="120"] { transition-delay: 0.12s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="140"] { transition-delay: 0.14s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="150"] { transition-delay: 0.15s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="160"] { transition-delay: 0.16s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="180"] { transition-delay: 0.18s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="200"] { transition-delay: 0.2s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="240"] { transition-delay: 0.24s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="250"] { transition-delay: 0.25s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="300"] { transition-delay: 0.3s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="320"] { transition-delay: 0.32s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="350"] { transition-delay: 0.35s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="400"] { transition-delay: 0.4s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="450"] { transition-delay: 0.45s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="500"] { transition-delay: 0.5s; }
html.co-hieu-ung-cuon [data-cuon-do-tre="600"] { transition-delay: 0.6s; }

/* =========================================================================
   5. HIỆU ỨNG XUẤT HIỆN TOÀN MÀN HÌNH CHO CÁC TRANG MENU (FULL-SCREEN ENTRANCE)
   Khởi động mượt mà khi người dùng vừa chuyển qua bất kỳ trang menu nào
   ========================================================================= */

@keyframes vnsicHeroZoomIn {
    0% {
        transform: scale(1.06);
        opacity: 0.85;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes vnsicOverlayFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes vnsicFadeDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -18px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes vnsicFadeUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* Áp dụng cho Hero Banner trên toàn bộ trang menu */
body.sub_page .vnsic-hero-banner-section .vnsic-hero-bg-img {
    animation: vnsicHeroZoomIn 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

body.sub_page .vnsic-hero-banner-section .vnsic-hero-navy-overlay {
    animation: vnsicOverlayFade 1.1s ease-out forwards;
}

body.sub_page .vnsic-hero-banner-section .vnsic-hero-breadcrumb {
    animation: vnsicFadeDown 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

body.sub_page .vnsic-hero-banner-section .vnsic-hero-title {
    animation: vnsicFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

body.sub_page .vnsic-hero-banner-section .vnsic-hero-desc {
    animation: vnsicFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
}

/* Banner thu gọn & Breadcrumb của các trang ĐMST / Báo cáo */
body.sub_page .dmst-hero-compact .dmst-hero-badge {
    animation: vnsicFadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

body.sub_page .dmst-hero-compact h1 {
    animation: vnsicFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

body.sub_page .dmst-hero-compact p {
    animation: vnsicFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}

body.sub_page .dmst-breadcrumb-wrap {
    animation: vnsicFadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

/* Dải băng và khối tìm kiếm / bộ lọc trên đỉnh trang con lướt vào êm dịu */
body.sub_page .dmst-search-filter-card,
body.sub_page .vnsic-faq-filter-wrap,
body.sub_page .bo-loc-don-vi {
    animation: vnsicFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* 6. Tinh chỉnh trên thiết bị Di động & Tablet (Chuyển sang chuyển động dọc để không tràn mép ngang) */
@media (max-width: 991.98px) {
    html.co-hieu-ung-cuon [data-cuon-hieu-ung="truot-trai"]:not(.da-xuat-hien),
    html.co-hieu-ung-cuon [data-cuon-hieu-ung="truot-phai"]:not(.da-xuat-hien) {
        transform: translate3d(0, 20px, 0);
    }
    html.co-hieu-ung-cuon [data-cuon-hieu-ung="truot-len"]:not(.da-xuat-hien) {
        transform: translate3d(0, 18px, 0);
    }
    html.co-hieu-ung-cuon [data-cuon-hieu-ung="truot-xuong"]:not(.da-xuat-hien) {
        transform: translate3d(0, -16px, 0);
    }
}

/* 7. Tiêu chuẩn trợ năng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
    html.co-hieu-ung-cuon [data-cuon-hieu-ung],
    body.sub_page .vnsic-hero-banner-section .vnsic-hero-bg-img,
    body.sub_page .vnsic-hero-banner-section .vnsic-hero-navy-overlay,
    body.sub_page .vnsic-hero-banner-section .vnsic-hero-breadcrumb,
    body.sub_page .vnsic-hero-banner-section .vnsic-hero-title,
    body.sub_page .vnsic-hero-banner-section .vnsic-hero-desc,
    body.sub_page .dmst-hero-compact h1,
    body.sub_page .dmst-hero-compact p {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}