/* Header tối giản: chỉ logo + link neo nội dung landing.
   CSS tự chứa, không phụ thuộc common.css. Desktop: >= 1301px hiện link, 768-1300px chỉ logo, <= 767px ẩn hẳn. */
html {
  scroll-padding-top: 120px;
}

.hd-simple {
  background: #005bab;
  color: #fff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
}

.hd-simple a {
  color: inherit;
  text-decoration: none;
}

.hd-simple__inr {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1600px;
  min-height: 98px;
  padding: 0 40px;
}

.hd-simple__logo {
  flex-shrink: 0;
  margin: 0;
}

.hd-simple__logo img {
  display: block;
  height: auto;
  width: 186px;
}

.hd-simple__nav ul {
  align-items: center;
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-simple__nav a {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 14px;
  white-space: nowrap;
}

.hd-simple__nav a:focus-visible,
.hd-simple__nav a:hover {
  color: #9dc4ea;
}

@media (max-width: 1300px) {
  .hd-simple__nav {
    display: none;
  }
}

@media (max-width: 767px) {
  .hd-simple {
    display: none;
  }

  html {
    scroll-padding-top: 80px;
  }
}

/* ==========================================================================
   Header mobile (<= 767px): logo + nut hamburger + drawer menu.
   Dung lai .sp-menu / .header-nav-area / .dropdown-nav__* co san trong common.css
   nen chi can dinh vi thanh header va canh lai drawer cho khop chieu cao 66px.
   ========================================================================== */
.hd-sp {
  display: none;
}

@media (max-width: 767px) {
  .hd-sp {
    background: #005bab;
    color: #fff;
    display: block;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 120;
  }

  .hd-sp a {
    color: inherit;
    text-decoration: none;
  }

  .hd-sp__inr {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 66px;
    padding: 0 14px 0 16px;
  }

  .hd-sp__logo {
    margin: 0;
  }

  .hd-sp__logo img {
    display: block;
    height: 22px;
    width: auto;
  }

  /* nut hamburger: mau trang, kich thuoc cham vua phai */
  .hd-sp .sp-menu {
    color: #fff;
    display: inline-flex;
    height: 44px;
    margin-right: -6px;
    width: 44px;
  }

  /* drawer mo ra tu phai, nam duoi thanh header 66px */
  .hd-sp .header-nav-area {
    background: #055aaa;
    inset: 66px 0 0;
    z-index: 119;
  }

  .hd-sp .header-nav-area.is-active {
    box-shadow: 0 18px 40px #0003;
  }

  .hd-sp .dropdown-nav__list {
    padding: 8px 20px 0;
  }

  .hd-sp .dropdown-nav__item:first-child .dropdown-nav__link {
    border-top: 0;
  }

  .hd-sp .dropdown-nav__util-list {
    padding: 12px 20px 28px;
  }

  .hd-sp .dropdown-nav__util-link {
    align-items: center;
    display: flex;
    gap: 10px;
  }
}