jQuery(document).ready(function(){
    faqs()
    product_cat()
    append_div()
    location_active()
    jQuery('.sustainability_sec_6 .ux-menu .ux-menu-link:nth-child(1) a').addClass('active')

    jQuery('.sustainability_sec_6 .ux-menu a').click(function (e){
        e.preventDefault()
        jQuery('.sustainability_sec_6 .ux-menu a').removeClass('active')
        jQuery(this).addClass('active')

        var id = jQuery(this).attr('href')
        jQuery('ul li.tab a[href='+id+']').click()
    })

    if (jQuery('.home_items_4 .icon-box strong span').size()){
        jQuery('.home_items_4 .icon-box strong span').countUp();
    }
    if (jQuery('.logictic_items_1 .icon-box-text>p span').size()){
        jQuery('.logictic_items_1 .icon-box-text>p span').countUp();
    }
    if (jQuery('.product_item_2 .text strong span').size()){
        jQuery('.product_item_2 .text strong span').countUp();
    }

    jQuery('a.button.open-video').click(function(e){
        e.preventDefault();
        var url = jQuery(this).attr('href');
        location.href = url;
    })

    jQuery('.menu_about a,.value_items_1 .box a,.scroll_to_div').click(function(e){
        e.preventDefault();
        var target = jQuery(jQuery(this).attr('href'));
        console.log(jQuery(this).attr('href'));

        if(target.length){

            var scrollTo = target.offset().top;
            jQuery('body, html').animate({scrollTop: scrollTo+'px'}, 1000);
        }
    });

    jQuery('.scroll_to_form').click(function(e){
        e.preventDefault();
        var target = jQuery(jQuery(this).attr('href'));
        console.log(jQuery(this).attr('href'));

        if(target.length){

            var scrollTo = target.offset().top - 300;
            jQuery('body, html').animate({scrollTop: scrollTo+'px'}, 1000);
        }
    });
    // jQuery('.tax-packaging-category header#header,.single-packaging header#header,.page-template-news header#header,.category header#header,.single-post header#header,.single-recruitment header#header,.search header#header,.tag header#header').addClass('nomal')

    SmoothScroll({
        animationTime: 800,
        stepSize: 100,
        accelerationDelta: 50,
        accelerationMax: 3,
        keyboardSupport: true,
        arrowScroll: 50,
        pulseAlgorithm: true,
        pulseScale: 4,
        pulseNormalize: 1,
        touchpadSupport: false,
        fixedBackground: true,
        excluded          : ''
    });

    slick_slider($)

    open_popup_content($)


    jQuery('.slick-arrow').hover(function (){
        jQuery(this).click()
    })
})

function faqs(){
    var rowCount = jQuery('.accordion-item').length;
    if (rowCount > 10) {
        jQuery('.load_more_faq').css('display', 'inline-flex');
    }
    jQuery(".accordion-item").slice(0, 10)

    jQuery(".load_more_faq").on("click", function(e){
        e.preventDefault();
        jQuery(".accordion-item:hidden").slice(0, 10 ).slideDown();
        if(jQuery(".accordion-item:hidden").length == 0) {
            jQuery(".load_more_faq").remove()
        }
    });
    jQuery('.view_more_content').click(function (e){
        e.preventDefault()
        jQuery('.content_hidden').addClass('active')
        jQuery(this).remove()
    })
}

function product_cat(){
    var rowCount = jQuery('.list_cat_product .col').length;
    if (rowCount > 10) {
        jQuery('.load_more_cat').css('display', 'inline-flex');
    }

    jQuery(".load_more_cat").on("click", function(e){
        e.preventDefault();
        jQuery(".list_cat_product .col:hidden").slice(0, 10 ).slideDown();
        if(jQuery(".list_cat_product .col:hidden").length == 0) {
            jQuery(".load_more_cat").remove()
        }
    });

    jQuery(".load_more_td").on("click", function(e){
        e.preventDefault();
        if (screen.width > 850) {
            jQuery("table.table_td tr:hidden").slice(0, 10 ).slideDown();
            if(jQuery("table.table_td tr:hidden").length == 0) {
                jQuery(".load_more_td").remove()
                console.log('aaaaa')
            }
        }else{
            jQuery("table.table_td tr:hidden").slice(0, 10 ).slideDown().css('display','block');
            
            if(jQuery("table.table_td tr:hidden").length == 1) {
                jQuery(".load_more_td").remove()
                console.log('aaaaa')
            }
        }

    });
}

function slick_slider() {

    jQuery('.stack>style').remove()
    // if(jQuery('html[class="js"]').size()){
    jQuery('.slider_post_related').slick({
        dots: false,
        infinite: true,
        speed: 1000,
        slidesToShow: 3,
        slidesToScroll: 3,
        prevArrow: "<button type='button' class='slick-prev pull-left'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M14 1L1 14L14 27\" stroke=\"url(#paint0_linear_3099_3937)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_3937\" x1=\"1\" y1=\"14\" x2=\"14\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        nextArrow: "<button type='button' class='slick-next pull-left'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M1 1L14 14L1 27\" stroke=\"url(#paint0_linear_3099_4341)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_4341\" x1=\"14\" y1=\"14\" x2=\"1\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });

    jQuery('.slider_product_related').slick({
        dots: false,
        infinite: true,
        speed: 1000,
        slidesToShow: 3,
        slidesToScroll: 3,
        prevArrow: "<button type='button' class='slick-prev pull-left'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M14 1L1 14L14 27\" stroke=\"url(#paint0_linear_3099_3937)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_3937\" x1=\"1\" y1=\"14\" x2=\"14\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        nextArrow: "<button type='button' class='slick-next pull-left'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M1 1L14 14L1 27\" stroke=\"url(#paint0_linear_3099_4341)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_4341\" x1=\"14\" y1=\"14\" x2=\"1\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });

    jQuery('.slider_core_values').slick({
        dots: false,
        infinite: true,
        speed: 1000,
        slidesToShow: 4,
        slidesToScroll: 1,
        prevArrow: "<button type='button' class='slick-prev pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M14 1L1 14L14 27\" stroke=\"url(#paint0_linear_3099_3937)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_3937\" x1=\"1\" y1=\"14\" x2=\"14\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        nextArrow: "<button type='button' class='slick-next pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M1 1L14 14L1 27\" stroke=\"url(#paint0_linear_3099_4341)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_4341\" x1=\"14\" y1=\"14\" x2=\"1\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });

    jQuery('.tabs_cn [role="tabpanel"]').slick({
        dots: false,
        infinite: true,
        speed: 1000,
        slidesToShow: 5,
        slidesToScroll: 1,
        centerMode: true,
        prevArrow: "<button type='button' class='slick-prev pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M14 1L1 14L14 27\" stroke=\"url(#paint0_linear_3099_3937)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_3937\" x1=\"1\" y1=\"14\" x2=\"14\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        nextArrow: "<button type='button' class='slick-next pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M1 1L14 14L1 27\" stroke=\"url(#paint0_linear_3099_4341)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_4341\" x1=\"14\" y1=\"14\" x2=\"1\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });

    jQuery('.about_items_7').slick({
        dots: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 4,
        slidesToScroll: 1,
        centerMode: false,
        arrows: false,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });

    jQuery('.slider_for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider_nav'
    });

    jQuery('.slider_nav').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.slider_for',
        dots: false,
        centerMode: false,
        focusOnSelect: true,
        prevArrow: "<button type='button' class='slick-prev pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M14 1L1 14L14 27\" stroke=\"url(#paint0_linear_3099_3937)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_3937\" x1=\"1\" y1=\"14\" x2=\"14\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        nextArrow: "<button type='button' class='slick-next pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M1 1L14 14L1 27\" stroke=\"url(#paint0_linear_3099_4341)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_4341\" x1=\"14\" y1=\"14\" x2=\"1\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
    });


    jQuery('.slider_location .col-inner').slick({
        dots: false,
        infinite: true,
        speed: 1000,
        slidesToShow: 3,
        centerMode: true,
        focusOnSelect: true,
        slidesToScroll: 1,
        prevArrow: "<button type='button' class='slick-prev pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M14 1L1 14L14 27\" stroke=\"url(#paint0_linear_3099_3937)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_3937\" x1=\"1\" y1=\"14\" x2=\"14\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        nextArrow: "<button type='button' class='slick-next pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M1 1L14 14L1 27\" stroke=\"url(#paint0_linear_3099_4341)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_4341\" x1=\"14\" y1=\"14\" x2=\"1\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });

    jQuery('.home_items_7 .col-inner').slick({
        dots: false,
        infinite: true,
        speed: 1000,
        slidesToShow: 3,
        slidesToScroll: 1,
        prevArrow: "<button type='button' class='slick-prev pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M14 1L1 14L14 27\" stroke=\"url(#paint0_linear_3099_3937)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_3937\" x1=\"1\" y1=\"14\" x2=\"14\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        nextArrow: "<button type='button' class='slick-next pull-left style_2'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"28\" viewBox=\"0 0 15 28\" fill=\"none\">\n" +
            "  <path d=\"M1 1L14 14L1 27\" stroke=\"url(#paint0_linear_3099_4341)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
            "  <defs>\n" +
            "    <linearGradient id=\"paint0_linear_3099_4341\" x1=\"14\" y1=\"14\" x2=\"1\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n" +
            "      <stop stop-color=\"#F7A500\"/>\n" +
            "      <stop offset=\"1\" stop-color=\"#F7A500\" stop-opacity=\"0\"/>\n" +
            "    </linearGradient>\n" +
            "  </defs>\n" +
            "</svg></button>",
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });


}

function append_div(){
    var x = jQuery('.home_sec_6 .tabbed-content .nav')
    jQuery('.nav_tabs_news').append(x)
}

function location_active(){
    jQuery('.wrap_location .icon-box').click(function (e){
        jQuery('.wrap_location .icon-box').removeClass('active')
        jQuery(this).addClass('active')
        var index = jQuery(this).index('.wrap_location .icon-box');
            index = index + 1;
            console.log(index)
        jQuery('.slider_location .col-inner').slick('slickGoTo', index); // Slide thứ 5 (index bắt đầu từ 0)

    })

    jQuery('.slider_location .col-inner').on('afterChange', function(event, slick, currentSlide){
        var index = currentSlide + 1;
        jQuery('.wrap_location .icon-box').removeClass('active')
        jQuery('.wrap_location .icon-box:nth-child('+index+')').addClass('active')

    });
}


function open_popup_content($){
    jQuery('.popup_content_logo').each(function() {
        var newId = jQuery(this).attr('class').split(' ').pop(); // Lấy class cuối cùng
        jQuery(this).attr('id', newId); // Đặt id mới
    });
    jQuery('.about_items_7 .icon-box a.button').attr('data-fancybox','')

    // $(".popupTrigger").on("click", function() {
    //     var index = $(".popupTrigger").index(this);
    //     $.fancybox.open({
    //         src  : $('.popupContent').eq(index),
    //         type : 'inline'
    //     });
    // });

    jQuery('.about_items_7 .icon-box a.button').click(function($) {
        // event.preventDefault(); // Prevent the default anchor behavior
        var index = jQuery(".about_items_7 .icon-box a.button").index(this);

        var target = jQuery(this).attr('href'); // Get the target from href attribute
        var data = target.replace('#', '.');

        $.fancybox.open({
            src  : jQuery(data).eq(index),
            type : 'inline'
        });

    });

    // jQuery(".open_popup_content").on({
    //     mouseenter: function () {
    //         var data = jQuery(this).attr('data-popup')
    //         // jQuery('[data-popup="personnel_content"]').click()
    //         data = '#'+data
    //         console.log(data)
    //         $.fancybox.open({
    //             src  : data, // ID cĂ¡Â»Â§a form
    //             type : 'inline'
    //         });
    //     },
    //     mouseleave: function () {
    //         //stuff to do on mouse leave
    //     }
    // });
}

jQuery(document).ready(function($){
    let $wrap = $(".wrap_brands");
    let $firstItem = $(".wrap_brands .item_brand").first();

    // Active mặc định
    $firstItem.addClass("active");
    $wrap.css("background-image", "url(" + $firstItem.data("image") + ")");

    // Hover item
    $(".wrap_brands .item_brand").hover(function(){
        let $this = $(this);
        $(".wrap_brands .item_brand").removeClass("active");
        $this.addClass("active");
        let bg = $this.data("image");
        $wrap.css("background-image", "url(" + bg + ")");
    });
});

jQuery(document).ready(function($){
    let $wrap = $(".product_wrap");
    let $firstItem = $wrap.find(".item").first();

    // Active mặc định khi load trang
    $firstItem.addClass("active");

    // Hover vào item
    $wrap.on("mouseenter", ".item", function(){
        $wrap.find(".item").removeClass("active");
        $(this).addClass("active");
    });
});
