/* 🌐 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;
  

}


.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;
}

.main-nav a {
  text-decoration: none;
  color: #DC505D;
  font-weight: 500;
  font-size: 15px;
  position: relative;
}

.main-nav a:hover {
  /* color: #d45a47; */
  text-decoration: underline;
  text-decoration-color: #b2aaa9;         /* màu gạch */
  text-decoration-thickness: 1px;    /* độ dày */
  text-underline-offset: 6px;        /* khoảng cách với chữ */
}

/* 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;
}