.home-main {
    font-family: 'Poppins', sans-serif; /* Đặt font chữ chính cho toàn bộ nội dung trong phần home-main */
}

/* Hero Banner */
.hero-banner {
    position: relative; /* Tạo cơ sở để vị trí con bên trong được định vị tuyệt đối */
    width: 100%; /* Chiếm toàn bộ chiều rộng của vùng chứa cha */
    overflow: hidden; /* Ẩn phần thừa bên ngoài khung */
    height: 80vh; /* Chiều cao bằng 80% chiều cao cửa sổ trình duyệt (viewport height) */
    /* Có thể thay đổi thành 70vh hoặc 90vh tùy ý */
}

.hero-video {
    width: 100%; /* Video chiếm toàn bộ chiều rộng cha */
    height: 100%; /* Video chiếm toàn bộ chiều cao cha */
    object-fit: cover; /* Video sẽ tự động co giãn, cắt vừa khít vùng chứa mà không bị méo */
}

.hero-content {
    position: absolute; /* Định vị tuyệt đối trong hero-banner */
    top: 50%; /* Vị trí trên cách mép trên 50% chiều cao cha */
    left: 10%; /* Cách mép trái 10% chiều rộng cha */
    transform: translateY(-50%); /* Dịch chuyển nội dung lên trên 50% chiều cao để căn giữa theo chiều dọc */
    color: #fff; /* Màu chữ trắng */
    text-align: left; /* Canh lề trái */
}

.hero-content h1 {
    font-size: 48px; /* Kích thước chữ lớn cho tiêu đề */
    margin-bottom: 20px; /* Khoảng cách dưới tiêu đề */
}

.btn-shop {
    padding: 10px 20px; /* Khoảng cách trong nút: trên/dưới 10px, trái/phải 20px */
    background-color: #fff; /* Nền trắng */
    color: #000; /* Chữ màu đen */
    text-decoration: none; /* Bỏ gạch chân */
    font-weight: bold; /* Chữ đậm */
    transition: background-color 0.3s; /* Hiệu ứng chuyển màu nền mượt khi hover */
}

.btn-shop:hover {
    background-color: #eaeaea; /* Màu nền hơi xám khi hover */
}

/* Categories (Danh mục sản phẩm) */
.categories {
    margin: 50px 0; /* Cách trên dưới 50px, trái phải 0 */
}

.category-grid {
    display: grid; /* Dùng grid layout để hiển thị các phần tử con */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Tạo cột tự động vừa với min 300px, tối đa 1fr (chia đều) */
    gap: 20px; /* Khoảng cách giữa các cột và hàng */
    padding: 0 20px; /* Padding trái phải 20px */
}

.category-item {
    position: relative; /* Tạo khung tham chiếu cho các phần tử con định vị tuyệt đối */
    overflow: hidden; /* Ẩn phần thừa bên ngoài */
}

.category-item img {
    width: 100%; /* Ảnh chiếm toàn bộ chiều rộng phần tử cha */
    display: block; /* Hiển thị dạng block tránh khoảng trắng dưới ảnh */
    border-radius: 8px; /* Bo góc ảnh 8px */
}

.category-link {
    position: absolute; /* Định vị tuyệt đối trong category-item */
    bottom: 20px; /* Cách đáy 20px */
    left: 20px; /* Cách trái 20px */
    background-color: rgba(0, 0, 0, 0.6); /* Nền đen trong suốt 60% */
    color: #fff; /* Chữ trắng */
    padding: 8px 12px; /* Padding trên/dưới 8px, trái/phải 12px */
    text-decoration: none; /* Bỏ gạch chân */
    border-radius: 4px; /* Bo góc nhẹ */
}

/* Collection Highlight (Nổi bật bộ sưu tập) */
.collection-highlight {
    position: relative; /* Tạo khung tham chiếu cho phần tử con định vị tuyệt đối */
    margin: 60px 0; /* Cách trên dưới 60px, trái phải 0 */
}

.collection-highlight img {
    width: 100%; /* Ảnh chiếm toàn bộ chiều rộng */
    height: auto; /* Chiều cao tự động theo tỉ lệ */
    border-radius: 8px; /* Bo góc 8px */
}

.collection-content {
    position: absolute; /* Định vị tuyệt đối */
    top: 50%; /* Căn giữa theo chiều dọc */
    left: 50%; /* Căn giữa theo chiều ngang */
    transform: translate(-50%, -50%); /* Dịch chuyển lên trên và sang trái 50% kích thước để căn giữa chính xác */
    color: #fff; /* Chữ trắng */
    text-align: center; /* Canh giữa chữ */
}

.collection-content h2 {
    font-size: 36px; /* Kích thước chữ lớn */
    margin-bottom: 20px; /* Khoảng cách dưới tiêu đề */
}

/* Promo Banner (Banner khuyến mãi) */
.promo-banner {
    margin: 60px 0; /* Cách trên dưới 60px */
}

.promo-img {
    width: 100%; /* Ảnh chiếm toàn bộ chiều rộng */
    border-radius: 8px; /* Bo góc 8px */
}

/* Lưới sản phẩm */
.product-grid {
  display: grid; /* Dùng grid để bố trí sản phẩm */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Tự động tạo cột, tối thiểu 200px, tối đa 1fr */
  gap: 20px; /* Khoảng cách giữa các sản phẩm */
  padding: 20px; /* Padding xung quanh */
}

/* Card sản phẩm */
.product-card {
  background: #fff; /* Nền trắng */
  border-radius: 8px; /* Bo góc 8px */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Đổ bóng nhẹ tạo chiều sâu */
  overflow: hidden; /* Ẩn phần thừa */
  text-align: center; /* Canh giữa nội dung */
  padding: 20px; /* Khoảng cách trong card */
}

.product-card img {
  width: 100%; /* Ảnh chiếm hết chiều rộng */
  height: 250px; /* Chiều cao cố định 250px */
  object-fit: cover; /* Ảnh được co giãn, cắt vừa khít, không méo */
}

.product-card h3 {
  margin: 10px 0; /* Khoảng cách trên dưới 10px */
  font-size: 18px; /* Cỡ chữ */
}

.product-card p {
  color: #888; /* Màu chữ xám nhạt */
  margin-bottom: 10px; /* Khoảng cách dưới */
}

/* Nút mua hàng */
.btn-shop {
  display: inline-block; /* Hiển thị như inline block */
  padding: 8px 16px; /* Padding trong nút */
  background: #000; /* Nền đen */
  color: #fff; /* Chữ trắng */
  text-decoration: none; /* Bỏ gạch chân */
  border-radius: 5px; /* Bo góc */
}
.btn-shop:hover {
  background: #333; /* Nền đậm hơn khi hover */
}

/* =================== RESPONSIVE HOME =================== */

/* Với màn hình dưới 1024px */
@media (max-width: 1024px) {
    .hero-content h1 {
      font-size: 38px; /* Giảm cỡ chữ tiêu đề hero */
    }
  
    .collection-content h2 {
      font-size: 30px; /* Giảm cỡ chữ bộ sưu tập */
    }
  
    .product-card img {
      height: 220px; /* Giảm chiều cao ảnh sản phẩm */
    }
}

/* Với màn hình dưới 768px (tablet, điện thoại to) */
@media (max-width: 768px) {
    .hero-banner {
      height: 65vh; /* Giảm chiều cao hero */
    }
  
    .hero-content {
      top: 50%; /* Vẫn căn giữa theo chiều dọc */
      left: 5%; /* Giảm khoảng cách trái */
      transform: translateY(-50%);
    }
  
    .hero-content h1 {
      font-size: 28px; /* Giảm kích thước chữ */
    }
  
    .btn-shop {
      font-size: 14px; /* Giảm font nút */
      padding: 8px 14px; /* Giảm padding */
    }
  
    .category-grid {
      grid-template-columns: 1fr; /* Chuyển lưới danh mục thành 1 cột */
      padding: 0 10px; /* Giảm padding 2 bên */
    }
  
    .collection-content h2 {
      font-size: 24px; /* Giảm chữ bộ sưu tập */
    }
  
    .product-grid {
      grid-template-columns: 1fr 1fr; /* 2 cột sản phẩm */
      gap: 15px; /* Giảm khoảng cách */
      padding: 10px; /* Giảm padding */
    }
  
    .product-card img {
      height: 200px; /* Giảm chiều cao ảnh */
    }
  
    .product-card h3 {
      font-size: 16px; /* Giảm cỡ chữ */
    }
  
    .promo-banner {
      margin: 40px 0; /* Giảm margin */
    }
}

/* Với màn hình nhỏ dưới 480px (điện thoại nhỏ) */
@media (max-width: 480px) {
    .hero-banner {
      height: 55vh; /* Giảm chiều cao hero */
    }
  
    .hero-content {
      left: 50%; /* Căn giữa ngang */
      transform: translate(-50%, -50%); /* Căn giữa ngang và dọc */
      text-align: center; /* Canh giữa chữ */
    }
  
    .hero-content h1 {
      font-size: 22px; /* Giảm chữ hero */
    }
  
    .btn-shop {
      font-size: 13px; /* Giảm chữ nút */
      padding: 7px 12px; /* Giảm padding */
    }
  
    .collection-content h2 {
      font-size: 20px; /* Giảm chữ bộ sưu tập */
    }
  
    .category-grid {
      grid-template-columns: 1fr; /* 1 cột danh mục */
      gap: 10px; /* Giảm khoảng cách */
    }
  
    .product-grid {
      grid-template-columns: 1fr; /* 1 cột sản phẩm */
      padding: 10px; /* Padding nhỏ */
    }
  
    .product-card {
      padding: 15px; /* Giảm padding */
    }
  
    .product-card img {
      height: 180px; /* Giảm chiều cao ảnh */
    }
  
    .product-card h3 {
      font-size: 15px; /* Giảm chữ */
    }
  
    .product-card p {
      font-size: 13px; /* Giảm chữ mô tả */
    }
}