/* style.css - Phong cách Tối Viền Vàng Gold */

/* 1. Thiết lập chung cho body: Nền tối, chữ sáng cơ bản */
body {
  background-color: #1a1a1a; /* Màu nền xám rất tối sang trọng */
  font-family: Arial, sans-serif;
  color: #e0e0e0; /* Màu chữ xám nhạt để dễ đọc, ấm áp */
  margin: 0;
  padding: 20px;
}

/* 2. Dàn trang danh sách sản phẩm (Flexbox): Tự rớt dòng, căn giữa */
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* 3. Thẻ sản phẩm (Product Card): Nền tối hơn body, viền vàng gold */
.product-card {
  background-color: #2a2a2a; /* Nền thẻ tối hơn body để tạo chiều sâu */
  border: 1px solid #c5a059; /* Viền màu vàng gold sang trọng */
  border-radius: 8px; /* Bo góc nhẹ cho hiện đại hơn viền thẳng đứng cũ */
  width: 260px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  /* Đảm bảo nội dung không tràn ra ngoài viền */
  box-sizing: border-box; 
}

/* 4. Khung chứa ảnh (Thumb Box): Căn giữa ảnh, bo góc ảnh */
.thumb-box {
  position: relative;
  text-align: center;
  height: 180px;
  margin-bottom: 15px;
}

.thumb-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px; /* Bo góc ảnh nhẹ nhàng */
}

/* Thẻ year-box riêng cho sản phẩm đồ cổ (1980) */
.year-box {
  border: 1px solid #c5a059; /* Viền vàng gold cho khung đồ cổ */
  border-radius: 4px;
}

/* 5. Nhãn góc trái (Badges): Màu vàng gold, chữ đen để nổi bật */
.badge, .sale-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: #d4af37; /* Màu nền vàng gold sáng cho huy hiệu */
  color: #1a1a1a; /* Màu chữ đen để tương phản tốt */
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
}

.sale-tag {
  background-color: #c5a059; /* Màu nền vàng gold đậm hơn cho sale-tag */
  color: #1a1a1a;
}

/* 6. Tiêu đề sản phẩm (H3): Màu tiêu đề trắng ấm cho không bị rối */
.product-card h3 {
  font-size: 16px;
  margin: 10px 0;
  line-height: 1.3;
  color: #e0e0e0; /* Giữ tiêu đề màu chữ sáng để không quá rối với viền card */
}

/* 7. Giá (Price): Màu giá vàng gold sáng hơn nổi bật */
.price {
  color: #d4af37; /* Màu giá vàng gold sáng và sang trọng */
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}

/* 8. Xếp hạng (Rating): Sao vàng sáng */
.rating {
  color: #ffd700; /* Màu sao vàng sáng rực rỡ */
  font-size: 14px;
  margin-bottom: 10px;
}

.rating span {
  color: #aaa; /* Màu số đánh giá xám nhạt */
  font-size: 12px;
}

/* 9. Mô tả (Desc): Chữ xám nhạt */
.desc {
  font-size: 13px;
  color: #ccc; /* Màu mô tả xám nhạt */
  margin-top: auto; /* Tự động đẩy phần mô tả xuống cuối thẻ */
}

/* 10. Chi tiết cho year-box (năm và ghi chú Happy new year) */
.year-box .year-text {
  font-size: 20px;
  font-weight: bold;
  color: #d4af37; /* Màu năm vàng gold sáng */
  margin-top: 10px;
  margin-bottom: 5px;
}

.year-box .year-note {
  font-style: italic;
  color: #ccc;
  margin-bottom: 10px;
}

/* Đảm bảo ảnh cổ trong year-box hiển thị tốt */
.thumb-box.year-box img {
  margin-top: 10px;
  border: 1px solid #c5a059; /* Viền mỏng cho ảnh */
}