<!-- start Simple Custom CSS and JS -->
<script type="text/javascript">
 

jQuery(document).ready(function($) {
    var $customScrollNav = $('.custom-scroll-nav');
    var $scrollNavItems = $('.scroll-nav-list li');
    var $scrollArrowUp = $('.scroll-arrow-icon .icon-angle-up');
    var $scrollArrowDown = $('.scroll-arrow-icon .icon-angle-down');
    var $sections = $('.page-section');
    var currentSectionIndex = 0;
    var lastScrollTop = 0; // Để kiểm tra hướng cuộn

    // Cập nhật section hiện tại khi cuộn trang
    function updateCurrentSectionActive() {
        var scrollPos = $(document).scrollTop();
        var windowHeight = $(window).height();

        $sections.each(function(index) {
            var $this = $(this);
            var sectionTop = $this.offset().top - (windowHeight * 0.3); // Điều chỉnh để kích hoạt sớm hơn
            var sectionBottom = sectionTop + $this.outerHeight();

            if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
                $scrollNavItems.removeClass('active');
                $($scrollNavItems[index]).addClass('active');
                currentSectionIndex = index;
                return false; // Thoát vòng lặp
            }
        });
    }

    // Hiển thị mũi tên cuộn lên/xuống
    function updateScrollArrows() {
        var scrollTop = $(document).scrollTop();
        var documentHeight = $(document).height();
        var windowHeight = $(window).height();

        if (scrollTop > lastScrollTop && scrollTop + windowHeight < documentHeight) {
            // Cuộn xuống
            $customScrollNav.removeClass('scroll-up').addClass('scroll-down');
        } else if (scrollTop < lastScrollTop && scrollTop > 0) {
            // Cuộn lên
            $customScrollNav.removeClass('scroll-down').addClass('scroll-up');
        } else {
            // Đã ở đỉnh hoặc đáy, hoặc không cuộn
            $customScrollNav.removeClass('scroll-up scroll-down');
        }
        lastScrollTop = scrollTop;
    }

    // Hàm cuộn đến section
    function scrollToSection(index) {
        if (index >= 0 && index < $sections.length) {
            var targetOffset = $sections.eq(index).offset().top;
            $('html, body').animate({
                scrollTop: targetOffset
            }, 800); // Thời gian cuộn 800ms
        }
    }

    // Xử lý click vào mục điều hướng
    $scrollNavItems.on('click', function() {
        var targetSectionId = $(this).data('target-section');
        var targetSectionIndex = $sections.index($('#' + targetSectionId));
        scrollToSection(targetSectionIndex);
    });

    // Xử lý rê chuột vào mục điều hướng (để hiển thị tooltip)
    $scrollNavItems.on('mouseenter', function() {
        $(this).addClass('tooltip-active'); // Giữ tooltip hiển thị
    }).on('mouseleave', function() {
        var $this = $(this);
        // Delay ẩn tooltip một chút để cho phép di chuyển chuột qua tooltip
        setTimeout(function() {
            if (!$this.find('.nav-tooltip').is(':hover')) { // Kiểm tra chuột có còn trên tooltip không
                 $this.removeClass('tooltip-active');
            }
        }, 100);
    });

    // Xử lý lăn chuột trên tooltip
    $('.nav-tooltip').on('wheel', function(e) {
        e.preventDefault(); // Ngăn chặn cuộn trang mặc định
        var delta = Math.sign(e.originalEvent.deltaY); // -1 nếu cuộn lên, 1 nếu cuộn xuống

        var nextSectionIndex = currentSectionIndex;
        if (delta === 1) { // Cuộn xuống
            nextSectionIndex++;
        } else if (delta === -1) { // Cuộn lên
            nextSectionIndex--;
        }

        scrollToSection(nextSectionIndex);

        // Giữ tooltip hiển thị trong quá trình cuộn
        $(this).closest('li').addClass('tooltip-active');
    });

    // Xử lý khi chuột rời khỏi tooltip (để ẩn tooltip sau khi lăn chuột)
    $('.nav-tooltip').on('mouseleave', function() {
        $(this).closest('li').removeClass('tooltip-active');
    });

    // Gọi các hàm ban đầu
    $(window).on('scroll', function() {
        updateCurrentSectionActive();
        updateScrollArrows();
    });

    // Khởi tạo trạng thái ban đầu
    updateCurrentSectionActive();
    updateScrollArrows();
});</script>
<!-- end Simple Custom CSS and JS -->