document.addEventListener('DOMContentLoaded', function () {
  const wgSwiper = new Swiper('.wg_component-new', {
    // Custom Classes
    wrapperClass: 'wg_list',
    slideClass: 'wg_item-new',

    // Layout Settings
    slidesPerView: 1,
    spaceBetween: 40,

    // Pagination
    // Bạn cần tạo Div có class 'wg_pagination' bên trong component
    pagination: {
      el: '.wg_pagination',
      clickable: true,
    },

    // Navigation Arrows
    // Bạn cần tạo Button/Div có class 'wg_arrow-next' và 'wg_arrow-prev'
    navigation: {
      nextEl: '.wg_arrow-next',
      prevEl: '.wg_arrow-prev',
    },
    breakpoints: {
      // Khi màn hình >= 480px (Mobile Landscape)
      480: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      // Khi màn hình >= 768px (Tablet)
      768: {
        slidesPerView: 2,
        spaceBetween: 30, // Gap vừa phải cho Tablet
      },
      // Khi màn hình >= 992px (Desktop)
      992: {
        slidesPerView: 3,
        spaceBetween: 40, // Gap gốc theo thiết kế
      },
    },
  });
});