/* =========================================
   KHỐI HEADER (ĐẦU TRANG)
========================================= */
/* Dải băng thông báo trên cùng (Màu cam nhạt) */
.top-banner { 
    background-color: #f67a52; 
    color: var(--white); 
    text-align: center; 
    padding: 8px; 
    font-size: 14px; 
    font-weight: 600; 
}
/* Khung bao ngoài giúp toàn bộ header luôn dính chặt ở mép trên màn hình khi cuộn chuột */
.sticky-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
/* Khu vực chính chứa Logo, Tìm kiếm và các icon tiện ích (Nền cam đậm) */
.main-header { 
    background-color: var(--primary-color); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 15px 5%; 
    color: var(--white); 
}
.header-left { display: flex; align-items: center; gap: 20px; }

/* Nút menu 3 gạch (Chỉ hiện trên điện thoại) */
.menu-btn { font-size: 24px; cursor: pointer; display: none; }

/* Chữ Logo to, in đậm */
.logo { font-size: 28px; font-weight: 700; cursor: pointer; display: flex; align-items: center; }

/* Thanh tìm kiếm: Nền trắng, bo góc, xếp các thành phần nằm ngang */
.search-bar { 
    display: flex; 
    background: var(--white); 
    border-radius: 5px; 
    overflow: hidden; 
    padding: 8px 15px; 
    width: 400px; 
}
.search-bar input { border: none; outline: none; width: 100%; font-family: var(--font-main); font-size: 14px; }
.search-bar button { background: none; border: none; color: #999; cursor: pointer; font-size: 16px; }

/* Cụm các nút tiện ích (Tài khoản, Đơn hàng, Giỏ hàng) xếp ngang, cách nhau 30px */
.header-right { display: flex; gap: 30px; align-items: center; }

/* Từng nút tiện ích: Icon ở trên, chữ ở dưới (flex-direction: column) */
.header-item { display: flex; flex-direction: column; align-items: center; font-size: 13px; cursor: pointer; transition: 0.3s; }
.header-item:hover { opacity: 0.8; }
.header-item i { font-size: 22px; margin-bottom: 5px; }
.cart-icon-wrapper { position: relative; }

/* Con số màu đỏ đè lên icon giỏ hàng: Hình tròn nhỏ, nằm góc phải trên */
.cart-badge { 
    background: #d32f2f; color: white; border-radius: 50%; padding: 2px 6px; 
    font-size: 11px; font-weight: bold; position: absolute; top: -8px; right: -12px; 
}

/* =========================================
   THANH MENU ĐIỀU HƯỚNG
========================================= */
/* Thanh ngang chứa các danh mục, nền trắng, có đổ bóng mờ */
.navbar { 
    background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    padding: 12px 5%; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; 
}
/* Định dạng từng nút menu: Bo góc, thêm hiệu ứng chuyển màu 0.3s */
.nav-item { 
    padding: 8px 16px; text-decoration: none; color: var(--text-color); font-weight: 600; font-size: 14px;
    border: 1px solid transparent; border-radius: 5px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}
/* Đổi sang nền cam, chữ trắng khi rê chuột hoặc khi đang ở mục đó */
.nav-item:hover, .nav-item.active { 
    border-color: var(--primary-color); color: var(--white); background-color: var(--primary-color);
}
/* Nút Trang chủ (icon ngôi nhà): Rỗng nền, viền cam */
.nav-item.nav-home { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); }
.nav-item.nav-home:hover { background-color: var(--primary-color); color: var(--white); }
/* Nút đặc biệt (Nguyệt Cát): Đóng khung viền vàng nổi bật */
.nav-item.nav-highlight { border: 1px solid #ffd54f !important; color: var(--primary-color) !important; background-color: transparent; }
.nav-item.nav-highlight:hover { background-color: #ffd54f !important; color: var(--text-color) !important; border-color: #ffd54f !important; }

/* Icon Header Active */
/* Đổi màu cam cho Icon Tài khoản/Đơn hàng trên header khi đang ở trang tương ứng */
.active-header-item { color: var(--primary-color) !important; }
.active-header-item span { color: var(--primary-color) !important; }

/* RESPONSIVE HEADER */
/* Khi màn hình điện thoại (< 768px): Hiện nút menu 3 gạch, thu nhỏ ô tìm kiếm, ẩn bớt phần chữ ở Header và biến thanh Navbar thành dạng vuốt ngang gọn gàng */
@media (max-width: 768px) {
  .menu-btn { display: block; }
  .search-bar { width: 100%; max-width: 250px; }
  .navbar { 
      justify-content: flex-start; overflow-x: auto; white-space: nowrap; padding: 10px 15px; scrollbar-width: none;
  }
  .navbar::-webkit-scrollbar { display: none; }
  .nav-item { padding: 6px 12px; font-size: 13px; }
  .header-item span { display: none; }
}