/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

/* Container chính của chi tiết sản phẩm */
.product-detail-container {
  max-width: 1200px;        /* Giới hạn chiều rộng tối đa của container */
  margin: 60px auto 80px;   /* Margin trên 60px, dưới 80px, căn giữa ngang (auto) */
  display: flex;            /* Sử dụng flexbox để xếp các phần con theo hàng ngang */
  gap: 40px;                /* Khoảng cách giữa các phần tử con là 40px */
  padding: 0 20px;          /* Padding trái phải 20px */
}

/* Khung chứa ảnh sản phẩm */
.product-images {
  flex: 1;                  /* Chiếm tỷ lệ 1 phần trong tổng flex container */
  max-width: 600px;         /* Giới hạn chiều rộng tối đa 600px */
  border-radius: 10px;      /* Bo góc viền 10px */
  overflow: hidden;         /* Ẩn phần ảnh tràn ra ngoài khung */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ bên dưới khung */
}

/* Ảnh chính sản phẩm */
.product-images img {
  width: 100%;              /* Chiều rộng ảnh 100% khung chứa */
  aspect-ratio: 1 / 1;      /* Tỷ lệ ảnh vuông (1:1) */
  object-fit: cover;        /* Ảnh cắt vừa khung, giữ tỷ lệ */
  border-radius: 10px;      /* Bo góc ảnh 10px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ quanh ảnh */
  cursor: zoom-in;          /* Con trỏ chuột dạng kính lúp khi hover */
}

/* Khung chứa thông tin sản phẩm */
.product-info {
  flex: 1;                  /* Chiếm 1 phần tỷ lệ flex */
  display: flex;            /* Flexbox để xếp các phần con theo cột */
  flex-direction: column;   /* Xếp theo chiều dọc */
  gap: 20px;                /* Khoảng cách 20px giữa các phần tử con */
}

/* Tên sản phẩm */
.product-name {
  font-size: 32px;          /* Kích thước chữ lớn 32px */
  font-weight: 600;         /* Đậm chữ (semi-bold) */
}

/* Khung chứa giá sản phẩm */
.product-pricing {
  font-size: 24px;          /* Chữ lớn 24px */
  font-weight: 500;         /* Đậm chữ vừa phải */
  display: flex;            /* Dùng flex để xếp các phần con theo hàng ngang */
  gap: 15px;                /* Khoảng cách 15px giữa các phần tử con */
  align-items: center;      /* Canh giữa theo chiều dọc */
}

/* Giá cũ (bị gạch) */
.old-price {
  color: #999;              /* Màu xám nhạt */
  text-decoration: line-through; /* Gạch ngang chữ để thể hiện giá cũ */
}

/* Giá giảm (giá sale) */
.sale-price {
  color: #e91e63;           /* Màu hồng đậm */
  font-weight: bold;        /* Chữ in đậm */
}

/* Giá bình thường */
.normal-price {
  color: #333;              /* Màu đen xám đậm */
  font-weight: bold;        /* Chữ đậm */
}

/* Thể hiện danh mục sản phẩm */
.product-category {
  font-size: 14px;          /* Chữ nhỏ 14px */
  color: #777;              /* Màu xám vừa */
}

/* Mô tả sản phẩm */
.product-description {
  font-size: 16px;          /* Chữ cỡ trung bình */
  line-height: 1.6;         /* Khoảng cách dòng 1.6 */
  color: #555;              /* Màu xám đậm hơn một chút */
}

/* Form thêm vào giỏ hàng */
.add-to-cart-form {
  margin-top: 20px;         /* Cách phần trên 20px */
  display: flex;            /* Flexbox cho form */
  flex-direction: column;   /* Xếp theo cột */
  gap: 10px;                /* Khoảng cách 10px giữa các phần tử form */
}

/* Select dropdown và input number trong form */
.add-to-cart-form select,
.add-to-cart-form input[type="number"] {
  padding: 8px;             /* Padding bên trong 8px */
  font-size: 16px;          /* Cỡ chữ 16px */
  border-radius: 6px;       /* Bo góc 6px */
  border: 1px solid #ccc;   /* Viền 1px màu xám nhạt */
}

/* Input số lượng */
.add-to-cart-form input[type="number"] {
  width: 80px;              /* Chiều rộng cố định 80px */
}

/* Nút thêm giỏ hàng */
.btn-add-cart {
  background-color: #000;   /* Nền đen */
  color: #fff;              /* Chữ trắng */
  padding: 12px 20px;       /* Padding trên dưới 12px, trái phải 20px */
  font-size: 16px;          /* Cỡ chữ 16px */
  border: none;             /* Không viền */
  border-radius: 8px;       /* Bo góc 8px */
  cursor: pointer;          /* Con trỏ chuột dạng pointer */
  transition: background 0.3s; /* Hiệu ứng chuyển màu nền 0.3 giây */
}

/* Hiệu ứng hover nút */
.btn-add-cart:hover {
  background-color: #333;   /* Nền chuyển sang xám đậm khi hover */
}

/* Dòng form */
.form-row {
  display: flex;            /* Flexbox xếp ngang */
  gap: 15px;                /* Khoảng cách 15px */
  margin-bottom: 15px;      /* Cách dưới 15px */
  flex-wrap: wrap;          /* Cho phép xuống dòng nếu không đủ chỗ */
}

/* Nửa chiều rộng */
.half-width {
  flex: 1;                  /* Chiếm 1 phần tỷ lệ flex */
  min-width: 150px;         /* Chiều rộng tối thiểu 150px */
}

/* Nhóm form */
.form-group label {
  display: block;           /* Hiển thị dạng block (xuống dòng) */
  font-weight: 500;         /* Đậm vừa phải */
  margin-bottom: 6px;       /* Cách dưới 6px */
  color: #333;              /* Màu chữ đen xám */
}

/* Select trong form-group */
.form-group select {
  width: 100%;              /* Chiều rộng 100% */
  padding: 8px;             /* Padding 8px */
  font-size: 15px;          /* Cỡ chữ 15px */
  border-radius: 6px;       /* Bo góc 6px */
  border: 1px solid #ccc;   /* Viền xám nhạt */
}

/* Phần sản phẩm liên quan */
.products {
  max-width: 1200px;        /* Giới hạn chiều rộng 1200px */
  margin: 60px auto;        /* Cách trên dưới 60px, căn giữa ngang */
  padding: 0 20px;          /* Padding trái phải 20px */
}

/* Tiêu đề phần sản phẩm liên quan */
.products h2 {
  text-align: center;       /* Canh giữa chữ */
  font-size: 28px;          /* Cỡ chữ lớn 28px */
  font-weight: bold;        /* In đậm */
  margin-bottom: 30px;      /* Cách dưới 30px */
}

/* Lưới sản phẩm */
.product-grid {
  display: flex;            /* Flexbox để xếp sản phẩm ngang */
  flex-wrap: wrap;          /* Cho phép xuống dòng */
  gap: 20px;                /* Khoảng cách 20px */
  justify-content: center;  /* Căn giữa các phần tử */
}

/* Thẻ sản phẩm riêng lẻ */
.product-card {
  width: 200px;             /* Chiều rộng cố định 200px */
  background: #fff;         /* Nền trắng */
  border-radius: 12px;      /* Bo góc 12px */
  padding: 15px;            /* Padding 15px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ */
  transition: transform 0.3s ease; /* Hiệu ứng chuyển động mượt khi hover */
  text-align: center;       /* Canh giữa chữ */
}

/* Hiệu ứng hover thẻ sản phẩm */
.product-card:hover {
  transform: translateY(-5px); /* Dịch lên 5px */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Đổ bóng đậm hơn */
}

/* Ảnh trong thẻ sản phẩm */
.product-img {
  width: 100%;              /* Chiều rộng 100% */
  height: 260px;            /* Chiều cao 260px */
  object-fit: cover;        /* Ảnh cắt vừa khung */
  border-radius: 8px;       /* Bo góc 8px */
  margin-bottom: 10px;      /* Cách dưới 10px */
}

/* Tên sản phẩm */
.product-name {
  font-size: 16px;          /* Cỡ chữ 16px */
  font-weight: 600;         /* Đậm */
  margin: 5px 0;            /* Margin trên dưới 5px */
  color: #333;              /* Màu chữ đen xám */
}

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

/* Giá cũ trong phần giá */
.product-price .old-price {
  color: #999;              /* Màu xám nhạt */
  text-decoration: line-through; /* Gạch ngang */
  margin-right: 5px;        /* Cách phải 5px */
}

/* Giá sale trong phần giá */
.product-price .sale-price {
  color: #e91e63;           /* Màu hồng */
  font-weight: bold;        /* Đậm */
}

/* Giá bình thường trong phần giá */
.product-price .normal-price {
  color: #000;              /* Màu đen */
  font-weight: bold;        /* Đậm */
}

/* Phần đánh giá sản phẩm */
.reviews {
  max-width: 900px;         /* Giới hạn chiều rộng 900px */
  margin: 60px auto 40px;   /* Margin trên 60px, dưới 40px, căn giữa ngang */
  padding: 30px;            /* Padding trong 30px */
  border-top: 2px solid #eee; /* Viền trên 2px màu xám nhạt */
  background-color: #fefefe; /* Màu nền trắng hơi ngả */
  border-radius: 12px;      /* Bo góc 12px */
  overflow: visible;        /* Cho phép nội dung tràn ra nếu cần */
}

/* Tiêu đề phần đánh giá */
.reviews h2 {
  font-size: 26px;          /* Cỡ chữ 26px */
  text-align: center;       /* Canh giữa */
  margin-bottom: 25px;      /* Cách dưới 25px */
  font-weight: 600;         /* Đậm vừa */
  color: #e91e63;           /* Màu hồng */
}

/* Form đánh giá sản phẩm */
.review-form {
  margin: 0 auto 30px;      /* Căn giữa, cách dưới 30px */
  max-width: 500px;         /* Chiều rộng tối đa 500px */
  background: #fff;         /* Nền trắng */
  padding: 20px;            /* Padding trong 20px */
  border-radius: 10px;      /* Bo góc 10px */
  box-shadow: 0 2px 12px rgba(0,0,0,0.05); /* Đổ bóng nhẹ */
  display: flex;            /* Flexbox */
  flex-direction: column;   /* Xếp theo cột */
  gap: 15px;                /* Khoảng cách 15px */
}

/* Label trong form đánh giá */
.review-form label {
  font-weight: 500;         /* Đậm vừa */
  margin-bottom: 5px;       /* Cách dưới 5px */
  color: #333;              /* Màu đen xám */
}

/* Textarea nhập đánh giá */
.review-form textarea {
  font-family: 'Poppins', sans-serif; /* Font Poppins */
  padding: 10px;             /* Padding 10px */
  font-size: 14px;           /* Cỡ chữ 14px */
  border-radius: 8px;        /* Bo góc 8px */
  border: 1px solid #ccc;    /* Viền xám nhạt */
  width: 100%;              
}
.review-form textarea::placeholder {
  color: #aaa; /* Màu chữ placeholder trong textarea của form đánh giá là màu xám nhạt */
}

.review-form button {
  align-self: flex-end; /* Căn nút gửi về cuối khung chứa (flexbox) */
  background-color: #e91e63; /* Màu nền nút là hồng đậm */
  color: white; /* Màu chữ nút là trắng */
  padding: 10px 18px; /* Khoảng đệm trong nút: trên dưới 10px, trái phải 18px */
  font-size: 14px; /* Cỡ chữ 14px */
  border: none; /* Bỏ viền mặc định */
  border-radius: 8px; /* Bo tròn góc nút 8px */
  cursor: pointer; /* Con trỏ chuột biến thành tay khi hover */
  transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu nền trong 0.3 giây mượt mà */
}

.review-form button:hover {
  background-color: #d81b60; /* Khi hover đổi sang màu hồng đậm hơn */
}

.review-item {
  background: #fff; /* Nền trắng cho từng đánh giá */
  border: 1px solid #ddd; /* Viền mỏng màu xám nhạt */
  padding: 15px 20px; /* Khoảng đệm trong: trên dưới 15px, trái phải 20px */
  margin-bottom: 20px; /* Cách dưới mỗi đánh giá 20px */
  border-radius: 10px; /* Bo góc 10px */
  box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* Bóng mờ nhẹ phía dưới */
  overflow: hidden; /* Ẩn phần nội dung thừa */
}

.review-item p {
  margin: 4px 0; /* Lề trên dưới nhỏ 4px, trái phải 0 */
  font-size: 15px; /* Cỡ chữ 15px */
}

.review-item strong {
  color: #333; /* Màu chữ đậm tối */
  font-weight: 600; /* Đậm chữ vừa phải */
}

.review-item small {
  font-size: 12px; /* Cỡ chữ nhỏ 12px */
  color: #777; /* Màu chữ xám vừa */
  display: block; /* Hiển thị như block, xuống dòng mới */
  margin-top: 6px; /* Cách trên 6px */
}

.review-list {
  max-height: 400px; /* Chiều cao tối đa của danh sách đánh giá là 400px */
  overflow-y: auto; /* Khi nội dung vượt cao, xuất hiện thanh cuộn dọc */
  padding-right: 10px; /* Đệm phải 10px (dành cho thanh cuộn) */
  margin-top: 20px; /* Cách trên 20px so với phần trên */
}

.review-list::-webkit-scrollbar {
  width: 6px; /* Độ rộng thanh cuộn dọc là 6px (chỉ Chrome và trình duyệt dùng engine WebKit) */
}

.review-list::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Màu nền của thanh cuộn (phần kéo) là xám nhạt */
  border-radius: 4px; /* Bo góc thanh cuộn */
}

.review-list::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* Khi hover lên thanh cuộn, đổi màu xám đậm hơn */
}

/* ========== Đánh giá sao ========== */
.star-rating {
  font-size: 28px; /* Kích thước biểu tượng sao lớn 28px */
  display: flex; /* Hiển thị dạng flexbox cho các sao */
  gap: 6px; /* Khoảng cách giữa các sao là 6px */
  cursor: pointer; /* Con trỏ chuột dạng tay khi hover lên sao */
  color: #ccc; /* Màu sao mặc định là xám nhạt */
}

.star-rating span {
  color: #ccc; /* Màu sao từng phần tử con là xám nhạt */
  cursor: pointer; /* Con trỏ tay khi hover */
  font-size: 28px; /* Cỡ chữ 28px */
  transition: color 0.2s; /* Hiệu ứng đổi màu nhanh trong 0.2 giây */
}

/* Khi sao có class active, hoặc khi hover lên sao, hoặc khi hover sao này thì tất cả sao phía sau cũng đổi màu */
.star-rating span.active,
.star-rating span:hover,
.star-rating span:hover ~ span {
  color: #fbc02d; /* Màu vàng sáng đại diện sao được chọn hoặc hover */
}

/* Responsive cho màn hình nhỏ hơn 768px */
@media (max-width: 768px) {
  .product-detail-container {
    flex-direction: column; /* Chuyển bố cục dọc thay vì ngang */
    align-items: center; /* Căn giữa các phần tử con */
  }

  .product-images,
  .product-info {
    width: 100%; /* Chiếm toàn bộ chiều ngang */
    max-width: 100%; /* Không vượt quá 100% */
  }

  .product-pricing {
    font-size: 20px; /* Cỡ chữ lớn hơn một chút */
    flex-direction: column; /* Chuyển bố cục dọc */
    align-items: flex-start; /* Căn trái phần tử con */
  }

  .add-to-cart-form input[type="number"] {
    width: 100%; /* Input số lượng giỏ hàng chiếm toàn bộ ngang */
  }

  .btn-add-cart {
    width: 100%; /* Nút thêm vào giỏ chiếm toàn bộ ngang */
    text-align: center; /* Canh giữa chữ */
  }

  .products h2 {
    font-size: 22px; /* Cỡ chữ tiêu đề danh sách sản phẩm lớn 22px */
  }

  .product-grid {
    display: grid; /* Dùng grid cho bố cục */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Tự động tạo cột tối thiểu 160px, tối đa 1 phần rộng có sẵn */
    gap: 15px; /* Khoảng cách giữa các ô grid 15px */
  }

  .product-card {
    width: 100%; /* Mỗi thẻ sản phẩm chiếm toàn bộ chiều ngang cột */
    padding: 10px; /* Đệm trong thẻ 10px */
  }

  .product-img {
    height: 200px; /* Chiều cao hình ảnh sản phẩm cố định 200px */
  }

  .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 */
  }
}

/* Giá gốc được gạch ngang, màu xám nhạt */
.original-price {
  color: #999; /* Màu xám nhạt */
  text-decoration: line-through; /* Gạch ngang chữ */
  font-size: 14px; /* Cỡ chữ 14px */
}

/* Giá cuối cùng nổi bật, màu hồng, chữ đậm */
.final-price {
  color: #e91e63; /* Màu hồng nổi bật */
  font-weight: bold; /* Chữ đậm */
  font-size: 16px; /* Cỡ chữ 16px */
}