/* Reset cơ bản cho tất cả phần tử */
* {
  margin: 0;               /* Loại bỏ margin mặc định của mọi phần tử */
  padding: 0;              /* Loại bỏ padding mặc định của mọi phần tử */
  box-sizing: border-box;  /* Tính kích thước bao gồm cả padding và border, giúp dễ tính toán kích thước */
}

/* Cấu hình font chữ chung cho toàn bộ trang */
body {
  font-family: 'Poppins', sans-serif; /* Chọn font chính là Poppins, nếu không có dùng font sans-serif mặc định */
}

/* Header chính của trang */
.site-header {
  background-color: #fff;            /* Màu nền trắng cho header */
  border-bottom: 1px solid #eaeaea; /* Đường viền mỏng màu xám nhạt dưới header */
}

/* Container bên trong header để căn chỉnh nội dung */
.container-header {
  max-width: 1200px;                 /* Giới hạn chiều rộng tối đa 1200px */
  margin: 0 auto;                   /* Căn giữa container theo chiều ngang */
  padding: 15px 20px;               /* Khoảng cách padding: 15px trên dưới, 20px trái phải */
  display: flex;                   /* Dùng flexbox để bố trí con theo hàng ngang */
  align-items: center;             /* Căn giữa các phần tử con theo chiều dọc */
  justify-content: space-between; /* Khoảng cách đều giữa các phần tử con, đẩy ra 2 đầu container */
  flex-wrap: wrap;                 /* Cho phép các phần tử con xuống dòng khi không đủ chỗ */
}

/* Logo thương hiệu */
.brand-logo {
  font-size: 28px;                  /* Cỡ chữ lớn 28px */
  text-decoration: none;            /* Bỏ gạch chân (liên kết) */
  color: #000;                     /* Màu chữ đen */
  font-weight: 600;                 /* Đậm vừa phải */
}

/* Menu chính */
.main-nav {
  display: flex;                   /* Hiển thị menu theo hàng ngang */
  gap: 25px;                      /* Khoảng cách giữa các mục menu 25px */
}

/* Link trong menu */
.menu-link {
  font-size: 16px;                 /* Cỡ chữ 16px */
  text-decoration: none;           /* Bỏ gạch chân */
  color: #000;                    /* Màu chữ đen */
  font-weight: 500;                /* Đậm vừa phải */
  transition: color 0.3s ease;    /* Hiệu ứng chuyển màu mượt trong 0.3 giây */
}

/* Hover effect cho link menu */
.menu-link:hover {
  color: #555;                    /* Khi hover đổi sang màu xám đậm hơn */
}

/* Các icon nằm trong header (ví dụ giỏ hàng, tìm kiếm...) */
.header-icons {
  display: flex;                  /* Hiển thị theo hàng ngang */
  align-items: center;            /* Căn giữa theo chiều dọc */
  gap: 20px;                     /* Khoảng cách giữa các icon 20px */
}

/* Link icon trong header */
.header-icons a {
  color: #000;                   /* Màu chữ/icon đen */
  font-size: 20px;               /* Kích thước icon 20px */
  text-decoration: none;         /* Bỏ gạch chân */
}

/* Dropdown cho người dùng (ví dụ menu tài khoản) */
.user-dropdown {
  position: relative;           /* Thiết lập vị trí tương đối để dropdown con có thể định vị tuyệt đối */
  display: inline-block;        /* Hiển thị dạng inline-block để giữ kích thước và vị trí */
}

/* Nút bấm dropdown người dùng */
.user-btn {
  background: none;             /* Bỏ nền mặc định */
  border: none;                 /* Bỏ viền */
  font-size: 16px;              /* Cỡ chữ 16px */
  font-weight: 500;             /* Đậm vừa phải */
  cursor: pointer;              /* Con trỏ chuột chuyển thành tay khi hover */
  font-family: 'Poppins', sans-serif; /* Giữ font thống nhất */
}

/* Nội dung dropdown (menu con) */
.dropdown-content {
  position: absolute;           /* Vị trí tuyệt đối so với phần tử cha .user-dropdown */
  right: 0;                    /* Canh lề phải */
  top: 120%;                   /* Bên dưới nút dropdown, cách 20% chiều cao nút */
  background-color: #000;      /* Màu nền đen */
  min-width: 180px;            /* Chiều rộng tối thiểu 180px */
  border-radius: 5px;          /* Bo góc nhẹ */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Đổ bóng mờ */
  overflow: hidden;            /* Ẩn phần tràn */
  transform: scaleY(0);        /* Thu nhỏ theo chiều dọc (ẩn dropdown) */
  transform-origin: top center; /* Tâm biến đổi ở phía trên giữa */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Hiệu ứng chuyển đổi mượt cho transform và opacity */
  opacity: 0;                  /* Ẩn dropdown bằng cách làm trong suốt */
  z-index: 1000;               /* Đặt lớp phủ cao để hiện trên các phần tử khác */
}

/* Link bên trong dropdown */
.dropdown-content a {
  color: #fff;                 /* Màu chữ trắng */
  padding: 12px 16px;          /* Khoảng cách padding: 12px trên dưới, 16px trái phải */
  text-decoration: none;       /* Bỏ gạch chân */
  display: block;              /* Hiển thị như block để dễ click */
  font-size: 14px;             /* Cỡ chữ nhỏ hơn */
}

/* Hover effect cho link dropdown */
.dropdown-content a:hover {
  background-color: #333;      /* Đổi nền xám đậm khi hover */
}

/* Khi dropdown được kích hoạt (class show) */
.dropdown-content.show {
  transform: scaleY(1);        /* Hiển thị dropdown phóng to lại theo chiều dọc */
  opacity: 1;                  /* Hiện dropdown */
}

/* Nút dành cho admin */
.btn-admin {
  background: #4CAF50;         /* Màu nền xanh lá tươi */
  color: white;                /* Màu chữ trắng */
  padding: 6px 12px;           /* Padding: 6px trên dưới, 12px trái phải */
  margin-left: 10px;           /* Cách nút phía trước 10px */
  border-radius: 5px;          /* Bo góc */
  text-decoration: none;       /* Bỏ gạch chân (nếu là link) */
  font-weight: 500;            /* Đậm vừa phải */
  transition: background 0.3s; /* Hiệu ứng chuyển nền mượt 0.3s */
  font-size: 14px;             /* Cỡ chữ 14px */
}

/* Hover effect cho nút admin */
.btn-admin:hover {
  background: #388E3C;         /* Màu nền xanh đậm hơn khi hover */
}

/* Nút menu 3 gạch (hamburger menu) */
.menu-toggle {
  display: none;               /* Ẩn mặc định */
  font-size: 26px;             /* Cỡ chữ lớn */
  cursor: pointer;             /* Con trỏ chuột dạng tay */
  background: none;            /* Bỏ nền */
  border: none;                /* Bỏ viền */
}

/* Responsive cho tablet & mobile */
@media (max-width: 768px) {
  .container-header {
    flex-direction: column;   /* Chuyển flex thành cột dọc */
    align-items: flex-start;  /* Căn các phần tử sang trái */
  }

  .menu-toggle {
    display: block;           /* Hiện nút 3 gạch */
    margin-left: auto;        /* Đẩy nút sang bên phải */
    font-size: 28px;          /* Tăng cỡ chữ lên 28px */
    color: #000;              /* Màu đen */
  }

  .main-nav {
    flex-direction: column;   /* Menu chính thành cột dọc */
    width: 100%;              /* Chiếm hết chiều ngang */
    display: none;            /* Ẩn menu mặc định */
    background: #fff;         /* Nền trắng */
    border-top: 1px solid #eee; /* Viền trên mỏng màu xám nhạt */
    margin-top: 10px;         /* Cách phần trên 10px */
  }

  .main-nav.show {
    display: flex;            /* Hiển thị menu khi thêm class show */
  }

  .menu-link {
    padding: 12px 20px;       /* Padding rộng hơn cho từng link */
    width: 100%;              /* Chiếm hết chiều ngang */
    border-bottom: 1px solid #f0f0f0; /* Viền dưới nhẹ */
  }

  .header-icons {
    margin-top: 10px;         /* Cách phần trên 10px */
    justify-content: flex-end; /* Căn các icon sang phải */
    width: 100%;              /* Chiếm hết chiều ngang */
  }

  .user-dropdown {
    margin-left: auto;        /* Đẩy dropdown người dùng sang phải */
  }

  .sale-banner {
    font-size: 13px;          /* Cỡ chữ nhỏ cho banner giảm giá */
    padding: 8px;             /* Padding đều 8px */
  }
}

/* Responsive cho màn hình điện thoại nhỏ */
@media (max-width: 480px) {
  .brand-logo {
    font-size: 22px;          /* Giảm cỡ chữ logo */
  }

  .menu-link {
    font-size: 15px;          /* Giảm cỡ chữ link menu */
  }

  .user-btn {
    font-size: 14px;          /* Giảm cỡ chữ nút user */
  }

  .btn-admin {
    font-size: 13px;          /* Giảm cỡ chữ nút admin */
    padding: 5px 10px;        /* Giảm padding */
  }

  .header-icons a {
    font-size: 18px;          /* Giảm cỡ chữ icon header */
  }
}

/* Màn hình desktop lớn */
@media (min-width: 769px) {
  .menu-toggle {
    display: none !important; /* Luôn ẩn nút 3 gạch trên desktop */
  }

  .main-nav {
    display: flex !important; /* Luôn hiển thị menu chính trên desktop */
  }
}