:root {
  --clr-header-nav: #ece5da; /* Màu nền thanh điều hướng chính */
  --clr-header-text: #333333; /* Màu chữ thanh điều hướng chính */
  --clr-header-promo: #c78903; /* Màu nền promo thanh điều hướng */
  --clr-header-button: #fbfbfb; /* Màu nền nút trong header */

  --clr-hero-bg: #f5f7fa; /* Màu nền hero section */
  --clr-hero-text: #2c3e50; /* Màu chữ hero section */

  /* Header panel    */
  --logo-width: 300px; /* Tỷ lệ hiển thị của logo trên màn hình */
  --logo-height: 80px; /* Chiều cao hiển thị của logo trên màn hình */
  --rad-btn-header: 1.5rem; /* Bo tròn nút trong header */
}

/* Thanh header trên cùng */
.header-top {
  display: flex; /* Dùng hiện thị theo cột để hiện thị nội dung*/
  justify-content: space-between; /* Căn đều 2 bên */
  align-items: center; /* Căn giữa theo chiều dọc */
}
.header-top__logo {
  width: var(--logo-width);
  height: auto;
}
.header-top__right {
  display: flex; /* Hiển thị theo hàng */
  flex-direction: column; /* Sắp xếp theo cột */
  align-items: flex-end; /* Căn phải */
}
.header-top__user {
  display: flex; /* Hiển thị theo hàng */
  margin-top: 10px; /* Khoảng cách trên của phần user */
  padding-right: 10px; /* Khoảng cách bên trái của phần user */
}
.header-top__btn {
  display: inline-block; /* Hiển thị dạng khối nhưng không chiếm hết chiều ngang */
  padding: 5px 10px; /* Khoảng cách bên trong của nút */
  margin-left: 5px; /* Khoảng cách bên trái của nút */
  background-image: linear-gradient(
    to left,
    #c02425 0%,
    #f0cb35 51%,
    #c02425 100%
  ); /* Tạo hiệu ứng gradient cho nền nút */
  background-size: 200% auto; /* Kích thước nền để tạo hiệu ứng chuyển động */
  color: white; /* Màu chữ */
  border-radius: var(--rad-btn-header); /* Bo góc nút */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Bóng nút */
  transition: 0.5s; /* Thời gian chuyển tiếp */
  text-align: center; /* Căn giữa chữ trong nút */
  cursor: pointer; /* Con trỏ chuột khi hover */
  font-size: var(--fs-sm); /* Kích thước chữ nút */
  background-position: left center; /* đặt vị trí ban đầu của nền */
}
.header-top__btn:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none; /* Bỏ gạch chân */
}
.header-top__promo {
  font-size: var(--fs-sm); /* Kích thước chữ nhỏ */
  font-style: italic; /* Chữ in nghiêng */
  color: var(--clr-header-promo); /* Màu chữ thanh điều hướng */
  background-color: var(--clr-bg); /* Màu nền promo */
  align-self: flex-end; /* Căn phải */
  padding: 5px 10px; /* Padding trong promo */
}

.highlight-btn {
  background: #0a5104; /* Màu nền đặc biệt cho nút nổi bật */
}

/* Thanh điều hướng chính */
.header-nav {
  background-color: var(--clr-header-nav); /* Màu nền thanh điều hướng */
  border-radius: var(--radius); /* Bo góc xung quanh */
  margin-top: 10px; /* Khoảng cách trên của thanh điều hướng */
}
.header-nav__list {
  width: 100%; /* Chiều rộng đầy đủ */
  height: 50px; /* Chiều cao của thanh điều hướng */
  list-style: none; /* Bỏ dấu chấm đầu dòng */
  display: flex; /* Hiển thị theo hàng */
  justify-content: space-around; /* Căn đều các mục */
  align-items: center; /* Căn giữa theo chiều dọc */
  margin: 0; /* Bỏ margin mặc định */
  padding: 0 15px; /* Padding bên trái và phải */
  font-weight: bold; /* Chữ in đậm */
  background-color: var(--clr-header-nav); /* Màu nền */
}
.header-nav__item {
  position: relative; /* Đặt vị trí tương đối cho mục */
  height: 100%; /* Chiều cao đầy đủ của mục */
  min-width: 130px; /* Chiều rộng tối thiểu của mục */
  display: flex; /* Hiển thị theo hàng */
  justify-content: flex-start; /* Căn trái theo chiều ngang */
  align-items: center; /* Căn giữa theo chiều dọc */
  cursor: pointer; /* Con trỏ chuột khi hover */
}
.header-nav__dropdown {
  position: relative; /* Đặt vị trí tương đối cho dropdown */
}
.header-nav__dropdown-menu {
  display: none; /* Ẩn menu dropdown ban đầu */
  position: absolute; /* Đặt vị trí tuyệt đối cho menu */
  left: 0; /* Căn trái menu */
  top: 100%; /* Đặt menu ngay dưới mục cha */
  width: 100%; /* Chiều rộng đầy đủ của mục cha */
  background-color: var(--clr-header-nav); /* Màu nền menu */
  box-shadow: var(--shadow-md); /* Bóng vừa */
  padding: var(--sp-2) 0; /* Padding trên và dưới */
}
.header-nav__dropdown:hover .header-nav__dropdown-menu {
  display: block; /* Hiển thị menu khi hover */
}
.header-nav__dropdown-menu li {
  padding: var(--sp-2) var(--sp-4); /* Padding trong mục menu */
}

.search-box-container {
  margin-left: auto; /* Đẩy hộp tìm kiếm về bên phải */
  margin-right: 0; /* Căn sát bên phải */
}
.header-nav__link {
  font-size: var(--fs-base); /* Kích thước chữ */
  color: var(--clr-text); /* Màu chữ */
  text-decoration: none; /* Bỏ gạch chân */
  padding: 5px 10px; /* Khoảng cách bên trong của liên kết */
  border-radius: var(--radius); /* Bo góc liên kết */
  transition: background-color var(--transition), color var(--transition); /* Chuyển tiếp màu nền và màu chữ */
}
.header-nav__link:hover {
  background-color: var(--clr-bg-hover); /* Màu nền khi hover */
  color: var(--clr-header-text); /* Màu chữ khi hover */
}
.search-box {
  display: flex; /* Hiển thị theo hàng */
  gap: 5px; /* Khoảng cách giữa input và button */
  border-radius: var(--radius); /* Bo góc hộp tìm kiếm */
}
.search-box__input {
  border: none; /* Bỏ viền mặc định */
  outline: none; /* Bỏ viền khi focus */
  padding: 8px 12px; /* Padding trong ô input */
  font-size: var(--fs-base); /* Kích thước chữ */
  background-color: var(--clr-bg); /* Màu nền trắng */
  border-radius: var(--radius); /* Bo góc nhỏ */
}
.search-box__btn {
  background-color: var(--clr-header-button); /* Màu nền nút tìm kiếm */
  color: var(--clr-header-text); /* Màu chữ nút tìm kiếm */
  border: none; /* Bỏ viền nút */
  padding: 8px 15px; /* Padding trong nút */
  border-radius: var(--radius); /* Bo góc nút */
  cursor: pointer; /* Con trỏ chuột khi hover */
  transition: background-color var(--transition); /* Chuyển tiếp màu nền */
}

.search-box__btn:hover {
  background-color: var(--clr-bg-hover); /* Màu nền khi hover */
}

.header-notice {
  background-color: var(--clr-notice-bg); /* Màu nền thông báo */
  color: var(--clr-notice-text); /* Màu chữ thông báo */
  font-size: var(--fs-base); /* Kích thước chữ */
  padding: 10px 15px; /* Padding trong thông báo */
  text-align: left; /* Căn giữa chữ */
  border-radius: var(--radius); /* Bo góc thông báo */
  box-shadow: var(--shadow-sm); /* Bóng nhỏ */
}
.text-strong {
  font-weight: bold; /* Chữ in đậm */
}

/* Hero */

.hero {
  background-color: var(--clr-hero-bg); /* Màu nền hero section */
  color: var(--clr-hero-text); /* Màu chữ hero section */
  padding: var(--sp-8) var(--sp-6); /* Padding trong hero section */
  box-shadow: var(--shadow-md); /* Bóng vừa */
  text-align: center; /* Căn giữa chữ */
}
.hero__title {
  font-size: var(--fs-xl); /* Kích thước chữ lớn */
  margin-bottom: var(--sp-4); /* Khoảng cách dưới tiêu đề */
}
/* Footer AI creator*/
.footer {
  margin-top: var(--sp-8); /* Khoảng cách trên footer */
  background-color: var(--clr-bg); /* Màu nền footer */
  border: 1px solid var(--clr-border); /* Viền footer */
  border-radius: var(--radius) (--radius); /* Bo góc footer */
  padding: var(--sp-5) var(--sp-6); /* Padding trong footer */
  box-shadow: var(--shadow-sm); /* Bóng nhỏ */
}

.footer__grid {
  display: grid; /* Hiển thị dạng lưới */
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* Tạo cột tự động với kích thước tối thiểu 200px */
  gap: var(--sp-5); /* Khoảng cách giữa các cột */
}

.footer__title {
  font-size: var(--fs-lg); /* Kích thước chữ lớn */
  margin-bottom: var(--sp-3); /* Khoảng cách dưới tiêu đề */
  color: var(--clr-text); /* Màu chữ tiêu đề */
}

.footer__text {
  color: var(--clr-text-muted); /* Màu chữ phụ */
  font-size: var(--fs-base); /* Kích thước chữ */
  line-height: 1.6; /* Chiều cao dòng */
}

.footer__list {
  list-style: none; /* Bỏ dấu chấm đầu dòng */
  padding: 0; /* Bỏ padding mặc định */
  margin: 0; /* Bỏ margin mặc định */
  display: grid; /* Hiển thị dạng lưới */
  gap: var(--sp-2); /* Khoảng cách giữa các mục */
  color: var(--clr-text); /* Màu chữ */
}

.footer__list a {
  color: var(--clr-primary); /* Màu chữ liên kết */
  text-decoration: none; /* Bỏ gạch chân */
  transition: color var(--transition); /* Chuyển tiếp màu sắc */
}

.footer__list a:hover {
  color: var(--clr-primary-dark); /* Màu chữ liên kết khi hover */
}

.footer__description {
  list-style: none; /* Bỏ dấu chấm đầu dòng */
  color: var(--clr-text-muted); /* Màu chữ phụ */
  font-size: var(--fs-sm); /* Kích thước chữ */
  font-weight: var(--fw-bold); /* Độ đậm chữ nhẹ */
}
.footer__bottom {
  margin-top: var(--sp-4); /* Khoảng cách trên footer bottom */
  padding-top: var(--sp-3); /* Padding trên footer bottom */
  border-top: 1px solid var(--clr-border); /* Viền trên footer bottom */
  display: flex; /* Hiển thị dạng flex */
  justify-content: space-between; /* Căn đều 2 bên */
  gap: var(--sp-3); /* Khoảng cách giữa các phần tử */
  color: var(--clr-text-muted); /* Màu chữ phụ */
  font-size: var(--fs-sm); /* Kích thước chữ nhỏ */
  flex-wrap: wrap; /* Cho phép xuống dòng nếu không đủ chỗ */
}