/* ===== Header Sticky ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 3000;
  isolation: isolate;
  background-color: #fff;
  transition: background-color 0.25s ease, box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
  will-change: background-color, box-shadow, backdrop-filter;
  /* overflow: visible; */
  margin-inline: auto;
}

/* Bóng mềm khi cuộn */
.site-header.scrolled {
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.08), 0 1px 0 rgba(19, 18, 18, 0.06);
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Fallback không hỗ trợ backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
  }
}

.site-header .container {
  z-index: 1001;
}

.headers-utils {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 2rem;
}

/* ===== Navbar ===== */
.header-nav {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 215px auto auto auto;
  background: #fff;
  padding-block: 12px;
  margin-inline: auto;
  overflow: visible;
  gap: clamp(20px, 2.083vw + 3.333px, 30px);
  padding-inline: clamp(16px, 4vw, 40px);
  max-width: min(1280px, 92vw);
}

/* ===== Breakpoints gọn gàng cho layout ===== */

/* Tablet: thu gọn khoảng cách cột, ưu tiên logo + toggle */

/* ===== Mobile: Logo – Search – Hamburger (CSS-only) ===== */
@media (max-width: 1080px) {
  .header-nav {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr) max-content;
    /* 3 cột cùng 1 dòng */
    grid-template-areas: "brand search toggle";
    align-items: center;
    column-gap: clamp(8px, 2.5vw, 14px);
    padding-block: 10px;
    padding-inline: clamp(10px, 4vw, 16px);
    position: relative;

    /* để đặt popover search */
    overflow: visible;
  }

  /* Gán area theo class hiện có (không đổi tên) */
  .brand {
    grid-area: brand;
  }

  .headers-utils {
    gap: 0.5rem;
  }

  /* Nút search icon đang là .search-wrap */
  .search-wrap {
    grid-area: search;
    min-width: 0;
    width: 100%;
    justify-self: stretch;
    /* cho search chiếm hết cột giữa nếu bạn muốn */
  }

  /* Popover search giữ đúng vị trí ngay dưới header */
  .search-box {
    position: absolute;
    top: calc(100% + 6px);
    left: 55%;
    z-index: 1200;
  }

  .lang-menu {
    position: relative !important;
  }

  .lang-pop {
    position: absolute;
    z-index: 100000000000;
  }

  /* Ẩn menu điều hướng & language ở mobile */
  .site-nav,
  .lang-switch {
    display: none !important;
  }

  /* Nếu bạn ĐÃ có nút hamburger (vd .oc-toggle) thì hiện nó ở cột 3 */
  .oc-toggle,
  .hamburger,
  .header-toggle {
    grid-area: toggle;
    display: inline-grid;
    /* đảm bảo hiện */
    place-items: center;
  }
}

@media (max-width: 640px) {

  html,
  body {
    overflow-x: hidden;
    /* chỉ chặn tràn ngang, không đụng overflow-y */
  }

  /* Nếu bạn có wrapper cuộn riêng (ví dụ .page, .site, main), hãy để visible */

  .container,
  .site-header,
  .header-nav {
    transform: none;
    filter: none;
    perspective: none;
    will-change: auto;
  }

  /* Nếu đang dùng -webkit-overflow-scrolling: touch trên wrapper cuộn – nên bỏ với header nằm ngoài */
  .page,
  main {
    -webkit-overflow-scrolling: auto;
  }

  /* Popover search vẫn hoạt động mà không phá sticky */
  .search-box {
    position: absolute;
    left: 60% !important;
  }
}

/* iPhone tai thỏ: tránh đè phần safe-area */
@supports (top: env(safe-area-inset-top)) {
  .site-header {
    top: max(0px, env(safe-area-inset-top));
  }
}

.brand img {
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  /* Safari mobile fix */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ===== Main Menu ===== */
.main-menu {
  display: flex;
  align-items: center;

  justify-content: center;

  gap: clamp(20px, 2.083vw + 3.333px, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  /* text trong item ở giữa */
}

.main-menu>li {
  position: relative;
}

.main-menu>li>a {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  color: #0b1726;
  text-decoration: none;
  font-weight: 500;
  /* 16px → min 14px (yêu cầu đặc biệt) */
  font-size: clamp(14px, calc(0.3125vw + 10px), 16px);
  line-height: 1.2;
}

.main-menu>li.current_page_item>a,
.main-menu>li>a:hover {
  position: relative;
}

.main-menu>li.current_page_item>a::after,
.main-menu>li>a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #055ea9;
  opacity: 0.9;
  border-radius: 2px;
}

.site-nav .current-menu-item>a::after,
.site-nav .current_page_item>a::after,
.site-nav .current-menu-parent>a::after,
.site-nav .li.current_page_parent>a::after,
.site-nav .current-menu-ancestor>a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #055ea9;
  opacity: 0.9;
  border-radius: 2px;
}

/* ===== Submenu ===== */
.main-menu .sub-menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translate(-50%, 6px);
  /* submenu căn giữa so với item cha */
  min-width: 220px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1000;
  text-align: start;
  /* text submenu giữa */
}

.main-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  /* tam giác giữa */
  width: 16px;
  height: 16px;
  background: #fff;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Hiện khi hover / focus */
.main-menu>li:hover>.sub-menu,
.main-menu>li:focus-within>.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Link trong submenu */
.main-menu .sub-menu>li>a {
  display: block;
  padding: 10px 16px;
  color: #0b1726;
  text-decoration: none;
  white-space: nowrap;
  /* 16px → min 14px (nếu bạn muốn đồng bộ) */
  font-size: clamp(14px, calc(0.3125vw + 10px), 16px);
}

.main-menu .sub-menu>li>a:hover {
  background: #f3f6fa;
  color: #055ea9;
}

/* ===== Search ===== */
.search-wrap {
  position: relative;
  justify-self: center;
  align-self: center;
  width: max-content;
  min-width: 0;
  text-align: center;
  display: inline-grid;
}

.btn-search {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  background: #fff;
  color: #0b1726;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s;
}

.btn-search:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
  border-radius: 50%;
}

.btn-search[aria-expanded="true"] {
  filter: brightness(0.95);
  transform: translateY(-1px);
  border-radius: 50%;
}

/* Search box dropdown */
.search-box {
  position: absolute;
  top: calc(100% + 8px);
  /* 8px là khoảng cách, tùy chỉnh */
  left: 75%;
  transform: translateX(-50%);
  z-index: 1200;
}

.search-form {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.search-input {
  height: 44px;
  width: 200px;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: #fff;
  color: #0b1726;
  font-size: 14px;
  /* giữ nguyên, không thuộc quy tắc 16→14 */
}

.search-input::placeholder {
  color: #b6b6b6;
}

.search-submit {
  height: 44px;
  padding: 0 20px;

  border: 0;
  background: #055ea9;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.search-submit:hover {
  background: #000;
}

.site-header .main-menu>li>a,
.site-header .main-menu .sub-menu a {
  text-transform: uppercase;
  /* VI có dấu vẫn OK */
  letter-spacing: 0.02em;
  /* tùy thích */
}