.product-listing {
  padding: 30px 0; /* Khoảng đệm trên dưới cho vùng danh sách sản phẩm, 30px trên và dưới */
}

.product-grid {
  display: grid; /* Sử dụng grid layout để bố trí các sản phẩm */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  /* Tạo cột grid tự động vừa khít, mỗi cột tối thiểu 200px, tối đa 1 phần chia đều */
  gap: 30px; /* Khoảng cách giữa các ô grid là 30px */
  padding: 0 20px; /* Khoảng đệm trái phải 20px cho vùng grid */
}

.product-card {
  background: #fff; /* Nền thẻ sản phẩm màu trắng */
  border-radius: 8px; /* Bo tròn góc 8px */
  overflow: hidden; /* Ẩn phần thừa ra ngoài viền */
  box-shadow: 0 5px 10px rgba(0,0,0,0.05); /* Đổ bóng nhẹ phía dưới thẻ */
  transition: transform 0.3s; /* Hiệu ứng chuyển động khi transform trong 0.3s */
  text-align: center; /* Căn giữa toàn bộ nội dung trong thẻ */
}

.product-card:hover {
  transform: translateY(-5px); /* Khi hover nâng thẻ lên trên 5px */
}

.product-img {
  width: 100%; /* Ảnh chiếm toàn bộ chiều ngang thẻ */
  height: 250px; /* Chiều cao cố định 250px */
  object-fit: cover; /* Ảnh giữ tỷ lệ và cắt vừa khít khu vực */
}

.product-info {
  padding: 10px 15px; /* Đệm trong phần thông tin: trên dưới 10px, trái phải 15px */
}

.product-name {
  font-size: 18px; /* Cỡ chữ tên sản phẩm 18px */
  color: #333; /* Màu chữ tối gần đen */
  margin: 10px 0; /* Lề trên dưới 10px, trái phải 0 */
}

.product-price {
  font-weight: bold; /* Chữ giá sản phẩm in đậm */
}

.old-price {
  text-decoration: line-through; /* Giá cũ gạch ngang */
  color: #888; /* Màu chữ xám vừa */
  margin-right: 8px; /* Cách phải 8px, để giá mới không sát giá cũ */
}

.sale-price {
  color: #e91e63; /* Giá giảm giá màu hồng đậm nổi bật */
}

/* Responsive cho màn hình nhỏ hơn 1024px */
@media (max-width: 1024px) {
  .product-img {
    height: 220px; /* Ảnh giảm chiều cao còn 220px */
  }

  .product-name {
    font-size: 16px; /* Cỡ chữ nhỏ hơn, 16px */
  }

  .product-price {
    font-size: 15px; /* Cỡ chữ giá giảm còn 15px */
  }
}

/* Responsive cho màn hình nhỏ hơn 768px */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* Chỉ còn 2 cột đều nhau */
    gap: 20px; /* Khoảng cách nhỏ lại 20px */
    padding: 0 15px; /* Đệm trái phải nhỏ hơn 15px */
  }

  .product-img {
    height: 200px; /* Chiều cao ảnh giảm còn 200px */
  }

  .product-name {
    font-size: 15px; /* Cỡ chữ tên sản phẩm 15px */
  }
}

/* Responsive cho màn hình nhỏ hơn 480px (điện thoại nhỏ) */
@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr; /* Chỉ còn 1 cột duy nhất */
    padding: 0 10px; /* Đệm trái phải 10px */
  }

  .product-img {
    height: 180px; /* Chiều cao ảnh giảm tiếp còn 180px */
  }

  .product-name {
    font-size: 14px; /* Cỡ chữ tên sản phẩm nhỏ 14px */
  }

  .product-price {
    font-size: 14px; /* Cỡ chữ giá sản phẩm 14px */
  }

  .product-info {
    padding: 8px 12px; /* Đệm phần info nhỏ lại 8px trên dưới, 12px trái phải */
  }
}