.elementor-1328 .elementor-element.elementor-element-0eda621{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1328 .elementor-element.elementor-element-56b7f16{text-align:center;}.elementor-1328 .elementor-element.elementor-element-56b7f16 img{width:100%;max-width:100%;border-style:none;}.elementor-1328 .elementor-element.elementor-element-4dde99a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1328 .elementor-element.elementor-element-a574c95{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-1328 .elementor-element.elementor-element-e22bc19 > .elementor-widget-container{margin:0px 0px -31px 0px;}.elementor-1328 .elementor-element.elementor-element-e22bc19 .elementor-heading-title{font-family:"Baloo Chettan 2", Sans-serif;font-size:35px;font-weight:700;color:#174619;}.elementor-1328 .elementor-element.elementor-element-d9521ae > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1328 .elementor-element.elementor-element-2938038{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1328 .elementor-element.elementor-element-f2f34d1{text-align:center;}.elementor-1328 .elementor-element.elementor-element-f2f34d1 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-1328 .elementor-element.elementor-element-20f0382{--display:flex;}.elementor-1328 .elementor-element.elementor-element-0e8515f{--display:flex;}.elementor-1328 .elementor-element.elementor-element-90c8d83{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1328 .elementor-element.elementor-element-5fedca3 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-posts .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-1328 .elementor-element.elementor-element-d0650b6{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-1328 .elementor-element.elementor-element-d0650b6 .elementor-post__title, .elementor-1328 .elementor-element.elementor-element-d0650b6 .elementor-post__title a{color:#174619;font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-1328 .elementor-element.elementor-element-c81616d{--display:flex;}@media(min-width:768px){.elementor-1328 .elementor-element.elementor-element-a574c95{--width:20%;}.elementor-1328 .elementor-element.elementor-element-2938038{--width:60%;}.elementor-1328 .elementor-element.elementor-element-90c8d83{--width:20%;}}@media(max-width:1024px){.elementor-widget-posts .elementor-post__meta-data{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-posts a.elementor-post__read-more{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-posts .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-posts .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-posts .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-1328 .elementor-element.elementor-element-d0650b6 .elementor-post__title, .elementor-1328 .elementor-element.elementor-element-d0650b6 .elementor-post__title a{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}}@media(max-width:767px){.elementor-widget-posts .elementor-post__meta-data{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-posts a.elementor-post__read-more{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-posts .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-posts .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-posts .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-1328 .elementor-element.elementor-element-d0650b6 .elementor-post__title, .elementor-1328 .elementor-element.elementor-element-d0650b6 .elementor-post__title a{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}}/* Start custom CSS for html, class: .elementor-element-d9521ae */#custom-category-list {
  font-family: 'Baloo Chettan 2', serif;
  font-size: 18px;
  color: #174619;
}
#custom-category-list a {
  color: #174619;
  font-family: 'Baloo Chettan 2', serif;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.2s;
}
#custom-category-list a:hover {
  color: #267d2a;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a574c95 */#category-list li {
  cursor: pointer;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-f2f34d1 */#main-heading {
  font-family: 'Baloo Chettan', cursive;
  color: #174619;
  font-weight: bold;
  font-size: 36px;
}
#main-heading .highlight-number {
  font-family: 'Allerta Stencil', sans-serif;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9452bae */#breadcrumb {
  font-family: 'Baloo Chettan 2', serif;
  font-size: 18px;
  color: #174619;
}
#breadcrumb a {
  color: #174619;
  font-family: 'Baloo Chettan 2', serif;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.2s;
}
#breadcrumb a:hover {
  color: #267d2a;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0c04eac */<script>
window.addEventListener('load', function () {
  const dynamicProducts = document.getElementById('dynamic-products');
  const loadMoreBtn = document.getElementById('load-more-button');
  const rateSection = document.getElementById('rate-products-section');
  const categorySection = document.getElementById('category-products-section');
  const links = document.querySelectorAll('#custom-category-list a');

  let allProducts = [];
  let productsShown = 0;
  const PRODUCTS_PER_LOAD = 9;

  links.forEach(link => {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      const slug = this.dataset.slug;

      fetch(`/wp-json/wp/v2/product_cat?slug=${slug}`)
        .then(res => res.json())
        .then(data => {
          if (!data.length) return;
          const cat = data[0];
          const catId = cat.id;

          updateCategoryUI(cat);

          fetch(`/wp-json/wp/v2/product?product_cat=${catId}&_embed=1&per_page=100`)
            .then(res => res.json())
            .then(products => {
              allProducts = products;
              productsShown = 0;
              dynamicProducts.innerHTML = '';
              rateSection.style.display = 'none';
              categorySection.style.display = 'block';
              showNextProducts();
              loadMoreBtn.style.display = (allProducts.length > PRODUCTS_PER_LOAD) ? 'block' : 'none';
            });
        });
    });
  });

  function updateCategoryUI(cat) {
    const catName = cat.name;
    const catImage = cat.thumbnail_url || '';
    const banner = document.querySelector('#banner-image img, #banner-image');

    if (banner && catImage) {
      banner.src = catImage;
    }

    const heading = document.getElementById('main-heading');
    if (heading) {
      heading.innerHTML = catName.replace(/(\d+)/g, '<span class="highlight-number">$1</span>');
    }

    const breadcrumb = document.getElementById('breadcrumb');
    if (breadcrumb) {
      breadcrumb.textContent = 'Trang chủ / ' + catName;
    }
  }

  function showNextProducts() {
    const slice = allProducts.slice(productsShown, productsShown + PRODUCTS_PER_LOAD);
    const fragment = document.createDocumentFragment();

    slice.forEach(product => {
      const div = document.createElement('div');
      div.className = 'custom-product-card';
      div.innerHTML = `
        <img src="${product._embedded?.['wp:featuredmedia']?.[0]?.source_url || ''}" alt="${product.title.rendered}" loading="lazy">
        <h3 class="product-title">${product.title.rendered}</h3>
        ${product.short_description?.rendered ? `<div class="product-description">${product.short_description.rendered}</div>` : ''}
        <a href="${product.link}" class="add-to-cart-button">
          <span class="icon">🛒</span> Liên Hệ
        </a>
      `;
      fragment.appendChild(div);
    });

    dynamicProducts.appendChild(fragment);
    productsShown += PRODUCTS_PER_LOAD;
    if (productsShown >= allProducts.length) {
      loadMoreBtn.style.display = 'none';
    }
  }

  loadMoreBtn.addEventListener('click', showNextProducts);

  // --- Load sản phẩm nổi bật ---
  function renderFeaturedProducts(products) {
    const containerEl = document.getElementById('rate-featured-products');
    if (!containerEl) return;

    const fragment = document.createDocumentFragment();
    products.forEach(product => {
      const div = document.createElement('div');
      div.className = 'custom-product-card';
      div.innerHTML = `
        <img src="${product._embedded?.['wp:featuredmedia']?.[0]?.source_url || ''}" alt="${product.title.rendered}" loading="lazy">
        <h3 class="product-title">${product.title.rendered}</h3>
        ${product.short_description?.rendered ? `<div class="product-description">${product.short_description.rendered}</div>` : ''}
        <a href="${product.link}" class="add-to-cart-button">
          <span class="icon">🛒</span> Liên Hệ
        </a>
      `;
      fragment.appendChild(div);
    });

    containerEl.innerHTML = '';
    containerEl.appendChild(fragment);
  }

  function loadFeaturedProducts() {
    fetch('/wp-json/wp/v2/product_tag?slug=noi-bat')
      .then(res => res.json())
      .then(tags => {
        if (!tags.length) return;
        const tagId = tags[0].id;

        fetch(`/wp-json/wp/v2/product?product_tag=${tagId}&_embed=1&per_page=9`)
          .then(res => res.json())
          .then(products => {
            renderFeaturedProducts(products);
          });
      });
  }

  loadFeaturedProducts();
});
</script>/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b5d99b3 */#category-products-section {
  display: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0e8515f */#category-products-section {
  display: none;
}/* End custom CSS */
/* Start custom CSS for posts, class: .elementor-element-d0650b6 */#blog .elementor-post__title {
  position: relative;
  margin-bottom: 1px;
  padding-bottom: 1px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4dde99a */#main-container {
  display: flex;
  gap: 0; /* không dùng gap vì sẽ tạo khoảng cách giữa border */
}

#left-column {
  width: 20%;
  padding-right: 20px;
  border-right: 2px solid #ccc; /* Đường chia giữa trái và giữa */
}

#middle-column {
  width: 60%;
  padding: 0 20px;
  /* không cần border nếu bạn chỉ muốn chia 2 bên */
}

#right-column {
  width: 20%;
  padding-left: 20px;
  border-left: 2px solid #ccc; /* Đường chia giữa giữa và phải */
}

@media screen and (max-width: 768px) {
  #main-container {
    flex-direction: column;
  }
  #left-column,
  #middle-column,
  #right-column {
    width: 100%;
    border: none;
    padding: 0;
  }
}/* End custom CSS */
/* Start custom CSS *//* Grid layout cho các khu vực hiển thị sản phẩm */
#rate-featured-products,
#dynamic-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  #rate-featured-products,
  #dynamic-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #rate-featured-products,
  #dynamic-products {
    grid-template-columns: 1fr;
  }
}

/* Custom card sản phẩm */
.custom-product-card {
  border: 1px solid rgba(23, 70, 25, 0.3);
  border-radius: 10px;
  padding: 15px;
  background: #fff;
  text-align: center;
}

.custom-product-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* Tiêu đề sản phẩm */
.product-title {
  font-weight: bold;
  font-size: 20px;
  color: #174619;
  margin-bottom: 6px;
  font-family: 'Baloo Chettan', sans-serif;
}

/* Mô tả ngắn sản phẩm */
.product-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
}

/* Nút liên hệ */
.add-to-cart-button {
  background-color: #174619;
  color: #fff;
  font-size: 16px;
  padding: 10px 16px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  font-family: 'Baloo Chettan', sans-serif;
}

.add-to-cart-button .icon {
  margin-right: 6px;
}/* End custom CSS */