/* ===== Header (Figma: trang chủ / top bar 48px + nav row) ===== */
/* style.css pins the header itself (position:fixed, z-index 999) but sizes it
   for the old 180px layout, and #wrapper is padded to match. Both are restated
   here for the Figma header: 48px top bar + 102px nav row. */
.header {
  background: var(--header-main-bg);
  height: var(--header-height); }

#wrapper {
  padding-top: var(--header-height); }

/* --- Top Bar --- */
.header__top {
  height: var(--header-top-height);
  box-sizing: border-box;
  background: var(--header-top-bg);
  padding: var(--header-top-padding);
  border-bottom: 1px solid var(--header-top-border); }

.header__top-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.header__top-left {
  display: flex;
  align-items: center;
  gap: 32px; }

.header__top-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--header-top-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-body);
  line-height: 20px;
  white-space: nowrap; }

.header__top-item a {
  color: var(--header-top-text);
  text-decoration: none;
  transition: color 0.3s ease; }

.header__top-item a:hover {
  color: var(--color-primary-blue); }

.header__top-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--header-top-icon); }

.header__top-icon svg {
  width: 20px;
  height: 20px; }

.header__top-right {
  display: flex;
  align-items: center;
  gap: 32px; }

.header__social {
  display: flex;
  align-items: center;
  gap: 16px; }

.header__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-primary-blue);
  text-decoration: none;
  transition: opacity 0.3s ease; }

.header__social-icon:hover {
  opacity: 0.7; }

.header__social-icon svg {
  width: 24px;
  height: 24px; }

/* --- Main Header --- */
/* The nav row owns the rest of the header's height and its children stretch
   into it. With align-items:center the menu was only as tall as its own
   padding, leaving ~1.5px of header background above and below — visible as a
   gap over the active item's tint. */
.header__main {
  height: calc(var(--header-height) - var(--header-top-height));
  background: var(--header-main-bg);
  padding: var(--header-main-padding); }

.header__main-wrap {
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px; }

.header_sticky .header__main {
  height: auto; }

.header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center; }

.header__logo a {
  display: block; }

.header__logo img {
  height: 84px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  transition: height 0.3s ease; }

/* --- Navigation --- */
.header__nav {
  flex: 1;
  display: flex;
  justify-content: flex-end; }

.header__nav .main-menu {
  display: flex;
  align-items: stretch;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none; }

.header__nav .main-menu > .menu-item {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative; }

.header__nav .main-menu > .menu-item > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: var(--header-nav-padding);
  background: var(--header-menu-bg);
  color: var(--header-menu-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  line-height: 19px;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
  border: none; }

/* 4px blue marker on top of the active item (Figma rect 3:284) */
.header__nav .main-menu > .menu-item > a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary-blue);
  opacity: 0;
  transition: opacity 0.3s ease; }

.header__nav .main-menu > .menu-item > a:hover,
.header__nav .main-menu > .menu-item.current-menu-item > a,
.header__nav .main-menu > .menu-item.current_page_item > a,
.header__nav .main-menu > .menu-item.current-menu-ancestor > a {
  background: var(--header-menu-active-bg);
  color: var(--header-menu-active-text); }

.header__nav .main-menu > .menu-item.current-menu-item > a::before,
.header__nav .main-menu > .menu-item.current_page_item > a::before,
.header__nav .main-menu > .menu-item.current-menu-ancestor > a::before {
  opacity: 1; }

/* Sub menu
   style.css styles .main-menu .sub-menu as a full-width megamenu (min-width
   915px, display:flex/table, height:0, li at calc(100%/3), uppercase Oswald
   links). Those declarations leak through anything this file does not restate,
   so every one of them is reset here. */
.header .header__nav .main-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  display: block;
  width: auto;
  min-width: 260px;
  max-width: 360px;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--color-white);
  border-top: 3px solid var(--color-primary-blue);
  box-shadow: 0 8px 24px rgba(1, 32, 96, 0.12);
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  z-index: 20; }

.header .header__nav .main-menu > .menu-item:hover > .sub-menu,
.header .header__nav .main-menu > .menu-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); }

/* the last items would otherwise run off the right edge of the viewport */
.header .header__nav .main-menu > .menu-item:nth-last-child(-n+2) > .sub-menu {
  left: auto;
  right: 0; }

.header .header__nav .main-menu .sub-menu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: normal;
  border: 0; }

.header .header__nav .main-menu .sub-menu li > a,
.header .header__nav .main-menu .sub-menu li > span {
  display: block;
  width: auto;
  padding: 10px 20px;
  background: none;
  color: var(--header-menu-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease; }

.header .header__nav .main-menu .sub-menu li > a:hover,
.header .header__nav .main-menu .sub-menu li.current-menu-item > a {
  background: var(--header-menu-active-bg);
  color: var(--header-menu-active-text); }

/* caret on the items that have a dropdown */
.header__nav .main-menu > .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 8px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: currentColor transparent transparent transparent;
  transition: transform 0.25s ease; }

.header__nav .main-menu > .menu-item-has-children:hover > a::after {
  transform: rotate(180deg); }

.header .menu-toggle {
  display: none; }

/* --- Mobile --- */
@media screen and (max-width: 1199px) {
  .header__nav .main-menu {
    gap: 0; }

  .header__nav .main-menu > .menu-item > a {
    padding: 32px 12px;
    font-size: 15px; }
}

@media screen and (max-width: 991px) {
  .header__top {
    display: none; }

  .header__nav {
    display: none; }

  .header .menu-toggle {
    display: block;
    color: var(--header-menu-text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer; }

  .header__main-wrap {
    padding: 12px 0; }

  .header__logo img {
    height: 56px; }

  /* no top bar below 991px: 12px + 56px logo + 12px */
  :root {
    --header-height: 80px; }
}

/* --- Sticky --- */
/* The sticky header already collapses (top bar hidden, smaller logo and nav),
   so it belongs at the top of the viewport. style.css instead slides it to
   top:-123px, tuned for its 180px header — with this one that pushed the whole
   thing off-screen, which is why scrolling back up showed nothing. */
.header.header_sticky {
  top: 0;
  height: auto !important; }

body.admin-bar .header.header_sticky {
  top: 32px; }

.header_sticky .header__top {
  display: none; }

.header_sticky .header__main {
  padding: 0; }

.header_sticky .header__logo img {
  height: 56px;
  padding: 5px; }

.header_sticky .header__nav .main-menu > .menu-item > a {
  padding: 20px; }

/* --- Mobile push menu ---
   style.css paints this panel #999 with white links and a #28377a hover, which
   is the inherited theme's palette. */
.header__push-menu {
  background: var(--color-white);
  border-top: 1px solid var(--header-top-border);
  box-shadow: 0 12px 24px rgba(1, 32, 96, 0.12); }

.header__push-menu .mobile-menu {
  padding: 12px 20px 20px; }

.header__push-menu .mobile-menu ul li {
  border-bottom: 1px solid rgba(1, 32, 96, 0.08); }

.header__push-menu .mobile-menu ul li:last-child {
  border-bottom: 0; }

.header__push-menu .mobile-menu ul li > a,
.header__push-menu .mobile-menu ul li > span {
  padding: 12px 34px 12px 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark); }

.header__push-menu .mobile-menu ul li > a:hover,
.header__push-menu .mobile-menu ul li.current-menu-item > a {
  color: var(--color-primary-blue); }

.header__push-menu .mobile-menu ul li > .toggle-menu {
  height: 48px; }

.header__push-menu .mobile-menu ul li > .toggle-menu:before,
.header__push-menu .mobile-menu ul li > .toggle-menu:after {
  top: 23px;
  background: var(--color-primary-dark); }

/* nested level: indented on the light band, lighter weight */
.header__push-menu .mobile-menu ul li > ul {
  margin: 0 0 8px;
  padding-left: 16px;
  border-left: 2px solid var(--color-primary-blue);
  background: var(--color-bg-light); }

.header__push-menu .mobile-menu ul li > ul li {
  border-bottom: 0; }

.header__push-menu .mobile-menu ul li > ul li > a {
  padding: 9px 0;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark); }