/* Thiết lập nền và văn bản */
body {
  background-color: #000000;
  color: white;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow: visible;
}
#content {
  margin-top: 10vh;
}

/* Thanh tìm kiếm */
#searchInput {
  top: 15vh;
  left: 0;
  width: 50vw;
  height: 2vh;
  border: solid 3px white;
  border-radius: 0 20px 20px 0;
  padding: 10px;
  font-size: 16px;
  background-color: #1a1a1a; /* Màu nền cho thanh tìm kiếm */
  color: white;
  outline: none;
  transition: border-color 0.3s;
  position: fixed;
}

#searchInput:focus {
  border-color: #0073e6; /* Đổi màu viền khi focus */
}

/* Suggestions container */
#suggestions {
  position: absolute; /* Đặt gợi ý bên dưới thanh tìm kiếm */
  top: calc(15vh + 10px + 15px);
  left: 0;
  width: 50vw;
  background-color: #1a1a1a; /* Nền cho danh sách gợi ý */
  border: solid 1px #444;    /* Viền của danh sách gợi ý */
  border-radius: 0 20px 20px 0;
  margin-top: 20px; /* Khoảng cách từ thanh tìm kiếm */
  max-height: 270px; /* Giới hạn chiều cao */
  overflow-y: auto;  /* Cuộn khi danh sách dài */
  z-index: 1000;     /* Đảm bảo gợi ý luôn trên cùng */
}

/* Mỗi gợi ý */
.suggestion {
  display: flex;      /* Hiển thị dạng flex để căn hình ảnh và text */
  align-items: center; /* Căn giữa theo chiều dọc */
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  color: white;
  border-bottom: solid 1px #444;
  transition: background-color 0.3s;
}

.suggestion:last-child {
  border-bottom: none; /* Xóa viền cuối */
}

.suggestion:hover {
  background-color: #333; /* Hiệu ứng hover */
}

/* Hình ảnh trong suggestion */
.suggestion img {
  width: 50px;          /* Kích thước ảnh nhỏ */
  height: 50px;         /* Kích thước ảnh nhỏ */
  border-radius: 5px;   /* Bo góc ảnh */
  margin-right: 10px;   /* Khoảng cách giữa ảnh và text */
  object-fit: cover;    /* Đảm bảo ảnh không bị méo */
}

/* Đường dẫn */
a {
  color: #0073e6;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #00aaff; /* Đổi màu khi hover */
}