/* =========================================
   BANNER SLIDER
========================================= */
/* Khung chứa bên ngoài của toàn bộ banner: Giới hạn chiều rộng tối đa, tự động căn giữa màn hình (margin: 0 auto), ẩn phần hình ảnh bị tràn ra ngoài (overflow: hidden) và bo góc */
.carousel { 
    position: relative; width: 100%; max-width: 1200px; margin: 0 auto; max-height: 450px; 
    overflow: hidden; background-color: #ffe8df; border-radius: 8px; 
}
/* Khung chứa thanh trượt dài ngang bên trong (chứa tất cả các ảnh). Thiết lập hiệu ứng chuyển động mượt mà (transition) khi trượt ảnh qua lại */
.carousel-slides { display: flex; transition: transform 0.5s ease-in-out; height: 100%; }
/* Khung chứa từng bức ảnh quảng cáo riêng lẻ, đảm bảo mỗi khung luôn chiếm 100% chiều rộng của thẻ carousel bên ngoài */
.carousel-slide { min-width: 100%; }
/* Định dạng ảnh quảng cáo: ép chiều cao cố định 450px và dùng object-fit để ảnh tự động cắt cúp cho vừa khung mà không bị méo hình */
.carousel-slide img { width: 100%; height: 450px; object-fit: cover; }
/* Nút bấm chuyển slide (Mũi tên trái/phải): Căn giữa theo chiều dọc (top: 50% + translateY), hình tròn, nền trắng mờ và nằm đè lên trên ảnh (z-index: 10) */
.carousel-btn { 
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.8); 
    border: none; width: 45px; height: 45px; border-radius: 50%; font-size: 18px; color: var(--text-color);
    cursor: pointer; z-index: 10; transition: 0.3s;
}
/* Hiệu ứng khi rê chuột vào nút chuyển slide: Đổi màu nền thành màu cam và chữ màu trắng */
.carousel-btn:hover { background: var(--primary-color); color: var(--white); }
/* Định vị khoảng cách riêng cho mũi tên trái (cách lề trái 30px) và mũi tên phải (cách lề phải 30px) */
.prev-btn { left: 30px; }
.next-btn { right: 30px; }

/* =========================================
   DANH SÁCH SẢN PHẨM
========================================= */ 
 
/* Khung chứa tiêu đề của từng danh mục sản phẩm (VD: Quà tặng trái cây): Căn giữa, tạo khoảng cách trên dưới cho thoáng */
.section-title { text-align: center; margin: 50px 0 30px; }
/* Hình khối của tiêu đề: Nền cam, chữ trắng, bo góc tròn 2 bên thật mạnh để tạo thành hình dạng giống viên thuốc */
.section-title span { 
    background: var(--primary-color); color: var(--white); padding: 12px 40px; 
    border-radius: 30px; font-size: 22px; font-weight: bold; display: inline-block; 
}
/* Bố cục Lưới (Grid) chứa các thẻ sản phẩm: Chia làm 6 cột bằng nhau (trên máy tính), khoảng cách giữa các khối sản phẩm là 15px */
.product-grid { 
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; 
    width: 100%; max-width: 1200px; margin: 0 auto 50px; padding: 0; 
}
/* Thẻ hình chữ nhật bao quanh 1 sản phẩm: Nền trắng, viền xám nhạt, bo góc. Thiết lập sẵn các hiệu ứng chuyển động mượt mà (viền, đổ bóng, nhấc lên) khi chuẩn bị hover */
.product-card { 
    background: var(--white); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease; 
    display: flex; flex-direction: column; position: relative;
}
/* Hiệu ứng khi rê chuột (hover) vào thẻ sản phẩm: Thẻ nẩy lên trên 8px (translateY), tỏa ra viền phát sáng màu cam, đổ bóng to ra tạo cảm giác 3D nhấc lên khỏi mặt phẳng */
.product-card:hover { 
    transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 30px rgba(239, 98, 54, 0.15); border-color: var(--primary-color);
}
/* Khung chứa phần hình ảnh của sản phẩm: Cố định chiều cao 240px, ẩn đi phần ảnh thừa (overflow: hidden) để khi ảnh phóng to không bị chèn ra ngoài chữ */
.product-img { width: 100%; height: 240px; position: relative; background: var(--bg-color); overflow: hidden; }
/* Ảnh sản phẩm: Chiếm toàn bộ không gian của khung, thiết lập thời gian phóng to mượt mà (0.6s) */
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
/* TÍNH NĂNG CỰC HAY: Khi rê chuột vào thẻ sản phẩm bên ngoài, bức ảnh bên trong thẻ sẽ từ từ phóng to lên 1 chút (scale 1.08) */
.product-card:hover .product-img img { transform: scale(1.08); }

/* Cụm chứa các nhãn dán (Tag) hiển thị ở góc trái trên cùng của bức ảnh: Nằm đè lên trên ảnh nhờ position: absolute */
.product-tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
/* Hình dáng chung của các nhãn dán: Chữ nhỏ, in đậm, nền bo viền tròn */
.tag { font-size: 11px; padding: 4px 10px; border-radius: 4px; color: white; font-weight: bold; }
/* Quy định màu sắc riêng biệt cho từng loại nhãn dán: Xanh lá, Vàng cam, Đỏ */
.tag-gion { background: #4caf50; }
.tag-ngot { background: #ffb300; }
.tag-hong { background: #e53935; }

/* Vùng chứa thông tin chữ (Tên, Giá, Nút Mua) bên dưới bức ảnh: Thiết lập dạng cột (flex-column) để đẩy nút mua luôn ghim sát xuống phần đáy hộp */
.product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
/* Tên sản phẩm: Chữ vừa, in đậm, màu xám đen. Ép chiều cao tối thiểu 48px (tương đương 2 dòng chữ) để các thẻ sản phẩm luôn bằng nhau dù tên dài hay ngắn */
.product-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--text-color); min-height: 48px; }
/* Giá sản phẩm: Chữ to, in đậm mạnh */
.product-price { font-size: 18px; font-weight: bold; color: var(--text-color); margin-bottom: 15px; }

/* Định dạng Nút "Chọn Mua" mặc định: Nền trắng, có viền cam, chữ cam, căn giữa Icon cái túi và chữ. Chuẩn bị sẵn hiệu ứng transition để chuyển màu mượt */
.btn-buy { 
    background: var(--white); color: var(--primary-color); border: 1px solid var(--primary-color); 
    padding: 12px; border-radius: 5px; cursor: pointer; font-family: var(--font-main); 
    font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: center; 
    gap: 8px; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; 
}
/* TÍNH NĂNG CỰC HAY: Khi người dùng rê chuột vào Thẻ sản phẩm (chưa chạm vào nút Mua), Nút Mua sẽ tự động "cảm ứng" đổi ngay sang nền Cam, chữ Trắng để mời gọi click */
.product-card:hover .btn-buy {
    background: var(--primary-color); color: var(--white); box-shadow: 0 4px 10px rgba(239, 98, 54, 0.3);
}
/* Hiệu ứng khi rê chuột trúng vào bề mặt của nút Chọn Mua: Nút nẩy to lên một chút xíu (scale 1.02) */
.btn-buy:hover { transform: scale(1.02); }

/* RESPONSIVE TRANG CHỦ */
/* 1. Khi màn hình nhỏ hơn 1200px (Laptop nhỏ, iPad Pro dọc): Thu hẹp 2 bên lề, bẻ lưới từ 6 cột xuống hiển thị 4 sản phẩm/hàng */
@media (max-width: 1200px) {
  .carousel { max-width: 95%; }
  .product-grid {
      grid-template-columns: repeat(4, 1fr);
      max-width: 95%;
      padding: 0;
  }
}
/* 2. Khi màn hình nhỏ hơn 992px (Máy tính bảng phổ thông): Hiển thị 3 sản phẩm/hàng để hình ảnh không bị chật chội */
@media (max-width: 992px) {
  .product-grid {
      grid-template-columns: repeat(3, 1fr);
  }
}
/* 3. Khi màn hình nhỏ hơn 768px (Điện thoại di động): Hiển thị 2 sản phẩm/hàng, đồng thời thu nhỏ chiều cao ảnh Banner cho vừa với màn hình */
@media (max-width: 768px) {
  .product-grid { 
      grid-template-columns: repeat(2, 1fr);
      padding: 0 15px; 
      gap: 15px; 
  }
  .carousel-slide img {
      height: 200px;
  }
  .carousel {
      max-height: 200px;
  }
}