<!-- start Simple Custom CSS and JS -->
<script type="text/javascript">
// Tải fullPage.js cho desktop
(function() {
    if (window.innerWidth <= 768) {
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(setupMobileBasic, 1000);
        });
        return;
    }
    
    var cssLink = document.createElement('link');
    cssLink.rel = 'stylesheet';
    cssLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css';
    document.head.appendChild(cssLink);
    
    var script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js';
    script.onload = function() {
        setTimeout(initFullPage, 500);
    };
    document.head.appendChild(script);
})();

function isMobileDevice() {
    return window.innerWidth <= 768;
}

// Trigger UX Builder animations
function triggerUXBuilderAnimation(element, delay) {
    delay = delay || 0;
    
    setTimeout(function() {
        element.style.opacity = '1';
        element.style.visibility = 'visible';
        element.classList.add('animated');
        
        var animationType = element.getAttribute('data-animate');
        if (animationType) {
            element.classList.add(animationType);
        }
    }, delay);
}

// Xử lý animations trong section
function handleSectionAnimations(section) {
    if (!section) return;
    
    var animatedElements = section.querySelectorAll('[data-animate]');
    
    animatedElements.forEach(function(element, index) {
        element.style.opacity = '0';
        element.style.visibility = 'hidden';
        element.classList.remove('animated');
        
        var delay = element.getAttribute('data-delay') || (index * 100);
        triggerUXBuilderAnimation(element, parseInt(delay));
    });
}

// Reset animations
function resetSectionAnimations(section) {
    if (!section) return;
    
    var animatedElements = section.querySelectorAll('[data-animate]');
    animatedElements.forEach(function(element) {
        element.style.opacity = '0';
        element.style.visibility = 'hidden';
        element.classList.remove('animated');
    });
}

function initFullPage() {
    if (!document.querySelector('.myfullpage') || isMobileDevice()) {
        return;
    }
    
    // CSS tương thích
    var styles = `
        <style>
        .myfullpage .section-1 [data-animate] {
            opacity: 0;
            visibility: hidden;
            transition: all 0.6s ease;
        }
        
        .myfullpage .section-1 [data-animate].animated {
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }
        
        @keyframes fadeInLeft {
            from { opacity: 0; transform: translate3d(-100%, 0, 0); }
            to { opacity: 1; transform: none; }
        }
        
        @keyframes fadeInRight {
            from { opacity: 0; transform: translate3d(100%, 0, 0); }
            to { opacity: 1; transform: none; }
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translate3d(0, 100%, 0); }
            to { opacity: 1; transform: none; }
        }
        
        @keyframes fadeInDown {
            from { opacity: 0; transform: translate3d(0, -100%, 0); }
            to { opacity: 1; transform: none; }
        }
        
        .fadeInLeft { animation-name: fadeInLeft; }
        .fadeInRight { animation-name: fadeInRight; }
        .fadeInUp { animation-name: fadeInUp; }
        .fadeInDown { animation-name: fadeInDown; }
        </style>
    `;
    
    document.head.insertAdjacentHTML('beforeend', styles);
    
    // Khởi tạo fullPage.js
    var myFullpage = new fullpage('.myfullpage', {
        verticalCentered: false,
        navigation: false,
        scrollingSpeed: 700,
        autoScrolling: true,
        fitToSection: true,
        
        onLeave: function(origin, destination, direction) {
            var leavingSection = document.querySelectorAll('.myfullpage .section-1')[origin.index];
            resetSectionAnimations(leavingSection);
        },
        
        afterLoad: function(origin, destination, direction) {
            var currentSection = document.querySelectorAll('.myfullpage .section-1')[destination.index];
            setTimeout(function() {
                handleSectionAnimations(currentSection);
            }, 200);
        }
    });
    
    window.myFullpage = myFullpage;
    
    // Trigger animation cho section đầu tiên
    setTimeout(function() {
        var firstSection = document.querySelector('.myfullpage .section-1');
        handleSectionAnimations(firstSection);
    }, 800);
}

// Setup mobile
function setupMobileBasic() {
    if (!isMobileDevice()) return;
    
    var mobileStyles = `
        <style>
        @media (max-width: 768px) {
            .myfullpage {
                height: auto !important;
                overflow: visible !important;
            }
            
            .myfullpage .section-1 {
                height: auto !important;
                min-height: 100vh;
                position: relative !important;
                overflow: visible !important;
            }
            
            [data-animate] {
                opacity: 1 !important;
                visibility: visible !important;
            }
        }
        </style>
    `;
    
    document.head.insertAdjacentHTML('beforeend', mobileStyles);
    
    // Trigger animations cho mobile
    document.querySelectorAll('.myfullpage .section-1').forEach(function(section) {
        handleSectionAnimations(section);
    });
}

// Xử lý resize
window.addEventListener('resize', function() {
    if (window.myFullpage && typeof window.myFullpage.destroy === 'function') {
        window.myFullpage.destroy('all');
        window.myFullpage = null;
    }
    
    setTimeout(function() {
        if (isMobileDevice()) {
            setupMobileBasic();
        } else {
            initFullPage();
        }
    }, 500);
});

// Khởi tạo
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            if (!isMobileDevice()) initFullPage();
        }, 1000);
    });
} else {
    setTimeout(function() {
        if (!isMobileDevice()) initFullPage();
    }, 1000);
}</script>
<!-- end Simple Custom CSS and JS -->