/* 🌐 Lớp chung dùng lại khắp site */
/* .container {
  width: min(1200px, 90%);
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
} */

/* --- CHỈNH KHUNG BAO NGOÀI (CONTAINER) --- */
.container {
  /* 1. Tăng độ thụt lề (Padding) hai bên */
  /* Giả sử mặc định là 20px, mình tăng lên 40px để tụt vào thêm 20px nữa */
  padding-left: 100px !important; 
  padding-right: 100px !important;

  /* 2. Đảm bảo căn giữa màn hình */
  margin-left: auto;
  margin-right: auto;
  
  /* 3. Giới hạn chiều rộng tối đa (để trên màn hình to nó không bị bè ra quá) */
  max-width: 1280px; 
  
  /* 4. Đảm bảo padding không làm vỡ kích thước */
  box-sizing: border-box;
}

/* --- RESPONSIVE MOBILE (Màn hình nhỏ) --- */
/* Trên điện thoại thì không nên tụt vào sâu quá vì sẽ mất diện tích */
@media (max-width: 768px) {
  .container {
    padding-left: 20px !important; /* Mobile để 20px là đẹp */
    padding-right: 20px !important;
  }
}



.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-uppercase {
  text-transform: uppercase;
}

/* 🧭 Header */
/* .site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 12px 0;
  font-family: 'Poppins', sans-serif;
} */



/* --- Thiết lập biến để dễ điều chỉnh chiều cao --- */
:root {
  --topbar-h: 26px;
  --header-h: 80px;
}

/* 🔹 TOPBAR — nằm trên header */
.topbar {
  position: fixed;           /* cố định ở đầu trang, nằm trên header */
  top: 0;
  left: 0;
  width: 100%;
  height: var(--topbar-h);
  /* line-height: var(--topbar-h); */
  display: flex;                  /* 👈 dùng flex để căn giữa chữ */
  align-items: center;            /* 👈 căn giữa theo chiều dọc */
  justify-content: center;
  background: #DA5036;
  color: #fff;
  text-align: center;
  z-index: 1001;             /* lớn hơn header để nằm trên */
}

/* 🔹 HEADER — nằm dưới topbar */
.site-header {
  position: fixed;
  top: var(--topbar-h);      /* nằm ngay dưới topbar */
  left: 0;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 12px 0;
  z-index: 1000;             /* nhỏ hơn topbar */
  transition: top 0.3s ease, box-shadow 0.3s ease;
}

/* 🔹 Chừa khoảng trống ở đầu trang = topbar + header */
body {
  margin: 0;
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

body.topbar-hidden .topbar {
  transform: translateY(-100%);
}
body.topbar-hidden .site-header {
  top: 0;
}


/* Khi topbar bị ẩn (cuộn qua), nếu muốn header dịch lên trên thì JS có thể thêm class like .topbar-hidden */
/* Ví dụ (tùy chọn):
body.topbar-hidden .site-header { top: 0; }
*/



.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.header-logo img {
  height: 36px;
}









/* (tuỳ chọn) hiệu ứng bóng mờ khi cuộn */
body.scrolled .main-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.main-nav .nav-list {
  /* display: flex;
  gap: 32px;
  list-style: none; */
  display: flex;
  align-items: center;
  /* Giảm khoảng cách giữa các mục (nếu trước đây là 32px thì giảm xuống 15-20px để tiết kiệm chỗ) */
  gap: 20px;          
  list-style: none;
  margin: 0;
  padding: 0;
  /* QUAN TRỌNG: Không cho phép các thành phần rớt xuống dòng thứ 2 */
  flex-wrap: nowrap;
}

.main-nav a {
  /* text-decoration: none;
  color: #DC505D;
  font-weight: 500;
  font-size: 15px;
  position: relative; */
  text-decoration: none;
  color: #DC505D;
  
  /* --- CÁC PHẦN CHỈNH SỬA KÍCH THƯỚC VÀ DÒNG --- */
  font-size: 12px;       /* Giảm kích thước chữ (Thử 12px hoặc 13px) */
  white-space: nowrap;   /* QUAN TRỌNG: Bắt buộc dòng chữ dài phải nằm thẳng hàng, cấm tự ngắt dòng */
  font-weight: 700;      /* Giữ độ đậm để chữ nhỏ vẫn dễ đọc và sắc nét */
  text-transform: uppercase; /* Đảm bảo chữ luôn in hoa */
  letter-spacing: 0.5px; /* Giãn chữ nhẹ cho thoáng */
  position: relative;
}

.main-nav a:hover {
  /* text-decoration: underline;
  text-decoration-color: #b2aaa9;         
  text-decoration-thickness: 1px;    
  text-underline-offset: 6px;         */
  text-decoration: underline;
  text-decoration-color: #b2aaa9;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Hành động bên phải */
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Ngôn ngữ */
.lang-switch select {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #DC505D;
}

/* Icon chung */
.header-icon {
  position: relative;
  font-size: 18px;
  color: #DC505D;
  transition: color 0.3s;
}

.header-icon:hover {
  color: #d45a47;
}

/* Giỏ hàng - có badge */
.cart-count {
  position: absolute;
  top: -6px;
  right: -10px;
  background: #d45a47;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 50%;
}





/* 🎨 Footer & Product có thể dùng lại */
.footer,
.product-section {
  padding: 40px 0;
}

.footer a,
.product-section a {
  color: inherit;
  text-decoration: none;
}