.search-overlay {
  position: fixed; /* Cố định vị trí overlay trên màn hình */
  top: 0; right: 0; /* Căn góc trên bên phải */
  width: 400px; /* Chiều rộng cố định 400px */
  height: 100%; /* Chiều cao chiếm 100% viewport */
  background: #000; /* Nền màu đen */
  color: #fff; /* Màu chữ trắng */
  z-index: 9999; /* Ưu tiên hiển thị trên các thành phần khác */
  padding: 30px 20px; /* Đệm trong: trên dưới 30px, trái phải 20px */
  transform: translateX(100%); /* Ban đầu dịch sang phải ra ngoài màn hình (ẩn) */
  transition: transform 0.3s ease; /* Hiệu ứng chuyển động mượt khi thay đổi transform */
  overflow-y: auto; /* Thanh cuộn dọc nếu nội dung vượt quá chiều cao */
  box-shadow: -2px 0 10px rgba(0,0,0,0.3); /* Đổ bóng phía bên trái tạo cảm giác nổi */
}

/* Khi lớp active được thêm vào thì hiển thị overlay */
.search-overlay.active {
  transform: translateX(0); /* Dịch về vị trí ban đầu (xuất hiện trên màn hình) */
}

/* Nút đóng trong search box */
.search-box .close-btn {
  position: absolute; /* Định vị tuyệt đối so với cha */
  top: 20px; /* Cách trên 20px */
  right: 20px; /* Cách phải 20px */
  font-size: 28px; /* Cỡ chữ lớn 28px */
  background: none; /* Không nền */
  border: none; /* Không viền */
  color: #fff; /* Màu trắng */
  cursor: pointer; /* Con trỏ chuột là dạng pointer khi hover */
}

/* Input tìm kiếm */
.search-input {
  width: 100%; /* Chiếm toàn bộ chiều ngang */
  padding: 12px; /* Đệm trong 12px đều */
  margin: 20px 0; /* Lề trên dưới 20px */
  font-size: 16px; /* Cỡ chữ 16px */
  border: none; /* Không viền */
  border-radius: 5px; /* Bo góc nhẹ 5px */
}

/* Tiêu đề các phần danh mục trong tìm kiếm */
.search-section h4 {
  margin-bottom: 10px; /* Cách dưới 10px */
  color: #ccc; /* Màu chữ xám nhạt */
}

/* Danh sách trong phần tìm kiếm */
.search-section ul {
  list-style: none; /* Bỏ dấu đầu dòng */
  padding: 0; /* Bỏ đệm trong */
  margin: 0; /* Bỏ lề ngoài */
}

/* Các link trong danh sách */
.search-section ul li a {
  color: #fff; /* Màu trắng */
  text-decoration: none; /* Bỏ gạch chân */
  display: block; /* Hiển thị dạng block */
  margin-bottom: 6px; /* Cách dưới 6px */
  padding: 6px 0; /* Đệm trên dưới 6px */
  transition: color 0.3s; /* Hiệu ứng chuyển màu mượt */
}

/* Khi hover vào link đổi màu */
.search-section ul li a:hover {
  color: #f0c040; /* Màu vàng nổi bật */
}

/* Phần sản phẩm nổi bật */
.best-sellers {
  display: flex; /* Sử dụng flexbox */
  gap: 10px; /* Khoảng cách giữa các mục 10px */
  margin-top: 10px; /* Cách trên 10px */
  flex-wrap: wrap; /* Cho phép xuống dòng */
}

/* Mỗi item sản phẩm nổi bật */
.best-sellers .item {
  background: #111; /* Nền màu xám đen */
  padding: 10px; /* Đệm trong 10px */
  border-radius: 6px; /* Bo góc 6px */
  width: 48%; /* Chiếm 48% chiều ngang (2 item trên 1 dòng) */
  text-align: center; /* Căn giữa chữ */
}

/* Ảnh trong sản phẩm nổi bật */
.best-sellers .item img {
  width: 100%; /* Chiếm toàn bộ chiều ngang thẻ */
  border-radius: 4px; /* Bo góc ảnh 4px */
  margin-bottom: 6px; /* Cách dưới ảnh 6px */
}

/* Chữ mô tả trong item */
.best-sellers .item p {
  font-size: 14px; /* Cỡ chữ nhỏ 14px */
  margin: 6px 0; /* Lề trên dưới 6px */
}

/* Giá nổi bật trong item */
.best-sellers .item strong {
  color: #f0c040; /* Màu vàng nổi bật */
  font-weight: bold; /* In đậm */
}

/* Kết quả tìm kiếm realtime */
.search-section-results {
  margin-top: 20px; /* Cách trên 20px */
  padding-top: 10px; /* Đệm trên 10px */
  border-top: 1px solid #444; /* Viền trên màu xám đậm */
}

/* Tiêu đề kết quả tìm kiếm */
.search-result-title {
  font-size: 16px; /* Cỡ chữ 16px */
  font-weight: bold; /* In đậm */
  margin-bottom: 10px; /* Cách dưới 10px */
  color: #ccc; /* Màu xám nhạt */
}

/* Mỗi gợi ý kết quả tìm kiếm */
.suggest-item {
  display: flex; /* Dùng flexbox để căn giữa */
  align-items: center; /* Căn giữa theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa ảnh và chữ 10px */
  background: #111; /* Nền xám đậm */
  padding: 10px; /* Đệm trong 10px */
  border-radius: 5px; /* Bo góc 5px */
  margin-bottom: 10px; /* Cách dưới 10px */
  color: #fff; /* Màu chữ trắng */
  text-decoration: none; /* Bỏ gạch chân */
  transition: background 0.3s; /* Hiệu ứng chuyển nền mượt */
}

/* Khi hover lên gợi ý đổi nền */
.suggest-item:hover {
  background: #1a1a1a; /* Nền xám đậm hơn */
}

/* Ảnh trong gợi ý */
.suggest-item img {
  width: 50px; /* Chiều ngang 50px */
  height: 50px; /* Chiều cao 50px */
  object-fit: cover; /* Giữ tỉ lệ ảnh và cắt vừa */
  border-radius: 5px; /* Bo góc ảnh 5px */
}

/* Chữ mô tả trong gợi ý */
.suggest-item p {
  margin: 0; /* Bỏ lề */
  font-size: 14px; /* Cỡ chữ nhỏ 14px */
}

/* Giá hoặc thông tin nổi bật trong gợi ý */
.suggest-item strong {
  color: #f0c040; /* Màu vàng nổi bật */
  display: block; /* Hiển thị thành block */
  font-size: 14px; /* Cỡ chữ 14px */
  margin-top: 2px; /* Cách trên 2px */
}

/* Thông báo khi không có kết quả */
.no-result {
  color: #aaa; /* Màu xám nhạt */
  font-size: 14px; /* Cỡ chữ 14px */
  text-align: left; /* Căn trái */
  margin-top: 10px; /* Cách trên 10px */
}

  .search-section-results {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #444;
  }