/* =========================
   HEADER LAYOUT CHÍNH
========================= */
.container-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    gap: 20px;
    max-width: 1521px;
	    margin: auto;
}

.left-side,
.right-side-menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* =========================
   LOGO
========================= */
.banner-column img {
  height: 51px;
  width: auto;
  object-fit: contain;
  transition: .2s ease;
}



/* Responsive logo */
@media (max-width: 576px) {
  .banner-column img {
    height: 40px;
  }
}

/* =========================
   MENU CHÍNH
========================= */
#navigation {
  display: flex;
  align-items: center;
}

#navigation #responsive {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#navigation #responsive > li {
  position: relative;
}

#navigation #responsive > li > a {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #003C47;
  text-decoration: none;
  transition: .2s;
}

#navigation #responsive > li > a:hover {
  color: #d81b60;
}

/* =========================
   SUBMENU XỔ XUỐNG NHẸ – ĐẸP
========================= */
#navigation ul.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 8px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .18s ease;
  z-index: 50;
}

#navigation li:hover > ul.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#navigation ul.submenu li a {
  display: block;
  padding: 8px 14px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

#navigation ul.submenu li a:hover {
  background: #f7f7f7;
  color: #d81b60;
}
/* ===== MENU CHÍNH ===== */
#navigation #responsive {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

#navigation #responsive > li {
  position: relative;
}

#navigation #responsive > li > a {
  padding: 10px 14px;
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #003C47;
  text-decoration: none;
}

#navigation #responsive > li > a:hover {
  color: #D4A017;
}

/* ===== SUBMENU CẤP 1 (XUỐNG DƯỚI) ===== */
#navigation ul.submenu,
#navigation ul li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  padding: 8px 0;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  list-style: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .2s ease;
  z-index: 999;
}

#navigation li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Item submenu */
#navigation ul li a {
  padding: 10px 14px;
  display: block;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

#navigation ul li a:hover {
  background: #f5f5f5;
  color: #D4A017;
}
/* Thêm mũi tên ▼ cho menu có submenu */
#navigation #responsive li.menu-item-has-children > a::after {
    content: " ▼";
    font-size: 12px;
    margin-left: 4px;
    transition: 0.2s ease;
    color: #555;
}

/* Hiệu ứng khi hover */
#navigation #responsive li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
    color: #D4A017;
}
#navigation #responsive li.menu-item-has-children > a:hover {
    color: #D4A017;
}
/* ===== SUBMENU CẤP 2 (MỞ NGANG SANG BÊN PHẢI) ===== */
#navigation ul li ul ul {
  top: 0;
  left: 100%;
  transform: translateX(10px);
}

#navigation li:hover ul ul {
  transform: translateX(0);
}

/* ===== FIX LỖI TRÀN MÀN HÌNH ===== */
#navigation ul li {
  position: relative;
  white-space: nowrap;
}

/* =========================
   NÚT ĐĂNG KÝ / ĐĂNG NHẬP + ICON
========================= */
.right-side-menu a {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  transition: .2s ease;
  font-size: 13px;
}

.icon-btn {
  color: #d81b60;
  border: 1px solid rgba(216,27,96,0.1);
  background: rgba(216,27,96,0.05);
}

.auth-btn {
      background: #003C47;
    color: #fff;
}

.auth-btn.login {
  background: #003C47;
  color: #fff;
}

/* Hover */
.right-side-menu a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* =========================
   STICKY HEADER
========================= */
#header-container {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: .25s ease;
  padding: 3px 0;
}

#header-container.sticky {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  backdrop-filter: blur(6px);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .container-header { gap: 8px; }
  #navigation #responsive > li > a { padding: 8px 10px; font-size: 14px; }
}

@media (max-width: 768px) {
  .right-side-menu { display: none; }
  #navigation { display: none; }  /* bật menu mobile nếu bạn có */
}