/* ==========================================================================
   Homepage — Featured Products (Front Page)
   - Chỉ định layout 4 cột và spacing section
   - Card dùng ĐÚNG style từ assets/css/product.css
   - Nút “So sánh sản phẩm” dùng style trong assets/css/compare.css
   ========================================================================== */

/* Heading thống nhất (style nền tảng đã có trong style.css) */
.featured-products .section-title { margin-bottom: .5rem; }
.featured-products .section-sub   { margin-bottom: 1.25rem; }

/* Grid: 4 cột desktop, fallback 2/1 cột theo breakpoint hệ thống */
.products-grid.grid-4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

/* ~1024px */
@media (max-width: 64rem){
  .products-grid.grid-4{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ~640px */
@media (max-width: 40rem){
  .products-grid.grid-4{
    grid-template-columns: 1fr;
  }
}

/* Bổ sung nhẹ để nút so sánh có khoảng cách đúng dưới khối .price.
   (compare.css cũng đã có margin; rule này an toàn không xung đột) */
.featured-products .product-card .cmp-under-price{
  margin: .625rem 0;
}