/* =============================================================================
   HEADER – thanh trên cùng, logo + tìm kiếm, thanh menu đỏ, mega menu, ngăn kéo điện thoại
   ============================================================================= */

.wb-header {
  position: sticky; top: calc(var(--wb-topbar-h) * -1); z-index: 80;
  background: #fff;
  box-shadow: 0 1px 0 var(--wb-line);
  transition: box-shadow 0.25s;
}
.wb-header.is-stuck { box-shadow: 0 6px 24px rgba(61, 3, 16, 0.14); }

/* ----- Thanh trên cùng ----- */
.wb-topbar { height: var(--wb-topbar-h); color: rgba(255, 255, 255, 0.88); background: var(--wb-deep); font-size: 0.8rem; }
.wb-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.wb-topbar__msg { display: flex; align-items: center; gap: 8px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wb-topbar__links { display: flex; align-items: center; gap: 20px; }
.wb-topbar a { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.wb-topbar a:hover { color: var(--wb-accent); }

/* ----- Hàng chính ----- */
.wb-header__row {
  display: grid; align-items: center; gap: 24px;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  padding-block: 14px;
}
.wb-burger, .wb-nav__close {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; color: var(--wb-primary);
  background: transparent; border: 0; border-radius: 12px; cursor: pointer;
}
.wb-burger:hover, .wb-nav__close:hover { background: var(--wb-cream); }

.wb-brand { min-width: 0; }
.wb-brand img { max-height: 56px; width: auto; }
.wb-brand__link { display: inline-flex; align-items: center; gap: 12px; color: var(--wb-ink); }
.wb-brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; color: #fff; background: var(--wb-primary); border-radius: 14px;
}
.wb-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.wb-brand__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--wb-primary); }
.wb-brand__tag { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-muted); }

.wb-header__search { order: 3; grid-column: 1 / -1; }
.wb-header__actions { display: flex; align-items: center; gap: 12px; }

.wb-header__call {
  display: none; align-items: center; gap: 10px; color: var(--wb-primary);
}
.wb-header__call span { display: flex; flex-direction: column; line-height: 1.2; }
.wb-header__call small { font-size: 0.72rem; color: var(--wb-muted); }
.wb-header__call strong { font-size: 1.05rem; color: var(--wb-ink); }

.wb-header__account {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--wb-primary);
  background: var(--wb-cream); border-radius: 50%;
}
.wb-header__account:hover { color: #fff; background: var(--wb-primary); }

/* ----- Ô tìm kiếm ----- */
.wb-search { position: relative; display: flex; }
.wb-search input[type="search"] {
  padding: 12px 52px 12px 20px;
  background: var(--wb-cream); border-color: transparent; border-radius: 999px;
}
.wb-search input[type="search"]:focus { background: #fff; border-color: var(--wb-primary); }
.wb-search button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; color: #fff;
  background: var(--wb-primary); border: 0; border-radius: 50%; cursor: pointer;
}
.wb-search button:hover { background: var(--wb-primary-dark); }

/* ----- Thanh menu chính ----- */
.wb-navbar { background: var(--wb-primary); }
.wb-navbar__inner { position: relative; }
.wb-nav__head, .wb-nav__search { display: none; }

.wb-menu { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.wb-menu li { list-style: none; margin: 0; }
.wb-menu > li { position: relative; }
.wb-menu > li.wb-mega { position: static; }

.wb-menu > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 16px;
  font-size: 0.92rem; font-weight: 600; color: #fff; text-transform: none;
  transition: background 0.2s;
}
.wb-menu > li > a:hover,
.wb-menu > li:hover > a,
.wb-menu > li.current-menu-item > a,
.wb-menu > li.current-menu-ancestor > a,
.wb-menu > li.current_page_item > a { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Mũi tên cho mục có menu con */
.wb-menu > li.menu-item-has-children > a::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

/* Bảng menu con */
.wb-menu .sub-menu {
  display: none; margin: 0; padding: 12px; list-style: none;
  background: #fff; box-shadow: var(--wb-shadow-lg);
}
.wb-menu > li > .sub-menu {
  position: absolute; left: 0; top: 100%; z-index: 20;
  min-width: 250px; max-height: 70vh; overflow: auto;
  border-radius: 0 0 var(--wb-radius) var(--wb-radius);
}
.wb-menu > li:hover > .sub-menu,
.wb-menu > li:focus-within > .sub-menu,
.wb-menu > li.is-open > .sub-menu { display: block; }

.wb-menu .sub-menu a { display: block; padding: 8px 12px; color: var(--wb-ink); font-size: 0.92rem; border-radius: 8px; }
.wb-menu .sub-menu a:hover { color: var(--wb-primary); background: var(--wb-cream); }

/* Mega menu: mục có menu con nhiều cấp -> hiện nhiều cột trải rộng */
.wb-menu > li.wb-mega > .sub-menu { left: 0; right: 0; padding: 24px; }
.wb-menu > li.wb-mega:hover > .sub-menu,
.wb-menu > li.wb-mega:focus-within > .sub-menu,
.wb-menu > li.wb-mega.is-open > .sub-menu {
  display: grid; gap: 8px 24px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.wb-menu > li.wb-mega > .sub-menu > li > a {
  font-weight: 700; color: var(--wb-primary); padding-inline: 0; border-bottom: 2px solid var(--wb-line); border-radius: 0; margin-bottom: 4px;
}
.wb-menu > li.wb-mega > .sub-menu > li > a:hover { background: transparent; }
.wb-menu > li.wb-mega .sub-menu .sub-menu { display: block; position: static; padding: 0; box-shadow: none; background: transparent; }
.wb-menu > li.wb-mega .sub-menu .sub-menu a { padding: 5px 0; font-size: 0.88rem; color: var(--wb-muted); }
.wb-menu > li.wb-mega .sub-menu .sub-menu a:hover { color: var(--wb-primary); background: transparent; }

/* Menu 2 cấp thường (không phải mega): cấp 3 hiện dạng danh sách thụt vào */
.wb-menu > li:not(.wb-mega) .sub-menu .sub-menu { display: block; padding: 0 0 0 12px; box-shadow: none; }

.wb-sub-toggle { display: none; }

/* ----- Máy tính bảng và lớn hơn ----- */
@media (min-width: 720px) {
  .wb-header__row { grid-template-columns: auto minmax(200px, 1fr) auto; }
}

@media (min-width: 1024px) {
  .wb-header__row { grid-template-columns: auto minmax(280px, 520px) 1fr; gap: 32px; }
  .wb-header__search { order: 0; grid-column: auto; }
  .wb-header__actions { justify-content: flex-end; }
  .wb-header__call { display: inline-flex; }
}

/* ----- Điện thoại: menu thành ngăn kéo bên trái ----- */
@media (max-width: 1023px) {
  .wb-burger { display: inline-flex; }
  .wb-header__row { grid-template-columns: auto 1fr auto; gap: 10px; padding-block: 10px; }
  .wb-header__row .wb-brand { justify-self: start; }
  .wb-header__search { display: none; }        /* Ô tìm kiếm nằm trong ngăn kéo */
  .wb-brand__tag { display: none; }
  .wb-brand__mark { width: 40px; height: 40px; }
  .wb-brand__name { font-size: 1.15rem; }
  .wb-topbar__links { display: none; }

  .wb-navbar { background: transparent; }
  .wb-navbar__inner { padding: 0; }

  .wb-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
    width: min(88vw, 380px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; box-shadow: var(--wb-shadow-lg);
    transform: translateX(-102%); visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s;
  }
  .wb-nav.is-open { transform: none; visibility: visible; }

  .wb-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 12px 12px 20px; color: #fff; background: var(--wb-primary);
  }
  .wb-nav__head .wb-nav__close { display: inline-flex; color: #fff; }
  .wb-nav__head .wb-nav__close:hover { background: rgba(255, 255, 255, 0.16); }
  .wb-nav__title { font-weight: 700; font-size: 1.05rem; }
  .wb-nav__search { display: block; padding: 14px 16px 6px; }

  .wb-menu { display: block; padding: 8px 8px 24px; }
  .wb-menu > li { position: relative; border-bottom: 1px solid var(--wb-line); }
  .wb-menu > li > a { padding: 14px 52px 14px 12px; color: var(--wb-ink); font-size: 1rem; }
  .wb-menu > li > a:hover, .wb-menu > li:hover > a { background: transparent; color: var(--wb-primary); }
  .wb-menu > li.menu-item-has-children > a::after { display: none; }

  .wb-sub-toggle {
    position: absolute; right: 4px; top: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; color: var(--wb-primary);
    background: transparent; border: 0; cursor: pointer;
  }
  .wb-sub-toggle svg { transition: transform 0.2s; }
  li.is-open > .wb-sub-toggle svg { transform: rotate(180deg); }

  /* Cấp con: co giãn bằng nút, không hiện khi rê chuột */
  .wb-menu .sub-menu,
  .wb-menu > li > .sub-menu,
  .wb-menu > li.wb-mega > .sub-menu { position: static; display: none; min-width: 0; max-height: none; padding: 0 0 10px 12px; box-shadow: none; border-radius: 0; background: transparent; }
  .wb-menu > li:hover > .sub-menu,
  .wb-menu > li:focus-within > .sub-menu { display: none; }
  .wb-menu > li.is-open > .sub-menu,
  .wb-menu > li.wb-mega.is-open > .sub-menu { display: block; }
  .wb-menu li > .sub-menu li { position: relative; }
  .wb-menu li > .sub-menu li > a { padding: 9px 44px 9px 8px; }
  .wb-menu .sub-menu .sub-menu { display: none; padding-left: 12px; }
  .wb-menu .sub-menu li.is-open > .sub-menu { display: block; }
  .wb-menu > li.wb-mega > .sub-menu > li > a { border-bottom: 0; margin: 0; color: var(--wb-ink); font-weight: 600; padding-inline: 8px; }
  .wb-menu .sub-menu .wb-sub-toggle { top: 0; height: 40px; }
}