/* VSW-KHUNG-01 · Header */
.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vs-trang);
  box-shadow: var(--vs-bong-nhe);
}

.hd::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  border-bottom: 1px solid var(--vs-line);
  pointer-events: none;
}

.hd-khung {
  display: flex;
  align-items: center;
  height: var(--vs-cao-header);
  gap: var(--vs-k5);
}

.hd-logo, .hd-ngon-ngu, .hd-nut { flex-shrink: 0; }
.hd-logo { display: inline-flex; }
.hd-logo-anh {
  height: calc(var(--vs-k7) + var(--vs-k1));
  width: auto;
  aspect-ratio: 1200 / 465;
}

.hd-menu, .hd-ds {
  display: flex;
  align-items: center;
  gap: var(--vs-k5);
}
.hd-menu { margin-left: auto; }
.hd-lien-ket {
  display: flex;
  align-items: center;
  min-height: var(--vs-cham-toi-thieu);
  min-width: var(--vs-cham-toi-thieu);
  border-bottom: 2px solid transparent;
  color: var(--vs-ink);
  font-family: var(--vs-font-noi-dung);
  font-size: var(--vs-co-nho);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.hd-lien-ket:hover, .hd-lien-ket[aria-current] { color: var(--vs-blue); }
.hd-lien-ket[aria-current] { border-bottom-color: var(--vs-teal); }
.hd-nut { white-space: nowrap; }
.hd-ngon-ngu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vs-cham-toi-thieu);
  min-height: var(--vs-cham-toi-thieu);
  color: var(--vs-blue);
  font-family: var(--vs-font-nhan);
  font-size: var(--vs-co-nho);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hd-ngon-ngu:hover { text-decoration: underline; }
.hd-ngon-ngu-ngan, .hd-menu-nut { display: none; }

@media (max-width: 1023px) {
  .hd-khung { gap: var(--vs-k3); }
  .hd-logo-anh { height: var(--vs-cham-toi-thieu); }
  .hd-ngon-ngu { margin-left: auto; }
  .hd-ngon-ngu-ngan { display: inline; }
  .hd-ngon-ngu-dai {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .hd-menu {
    display: block;
    width: 100%;
    margin-left: 0;
  }
  .hd-ds { align-items: stretch; flex-direction: column; gap: 0; }
  .hd-lien-ket {
    min-height: var(--vs-k7);
    border-bottom: 1px solid var(--vs-line);
    font-size: var(--vs-co-noi-dung);
    white-space: normal;
  }
  .hd-nut { width: 100%; margin-top: var(--vs-k4); }
  .hd--js .hd-menu { display: none; }
  .hd--js.hd--mo .hd-menu {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--vs-trang);
    border-top: 1px solid var(--vs-line);
    box-shadow: var(--vs-bong-nhe);
    padding: var(--vs-k3) var(--vs-le-khung) var(--vs-k5);
    max-height: calc(100dvh - var(--vs-cao-header));
    overflow-y: auto;
  }
  .hd--js .hd-menu-nut {
    display: flex;
    position: relative;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--vs-cham-toi-thieu);
    height: var(--vs-cham-toi-thieu);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .hd-menu-vach {
    position: absolute;
    width: var(--vs-le-khung);
    height: 2px;
    background: var(--vs-blue);
  }
  .hd-menu-vach:nth-of-type(2) { transform: translateY(calc(-1 * var(--vs-k2))); }
  .hd-menu-vach:nth-of-type(4) { transform: translateY(var(--vs-k2)); }
  .hd-menu-nut[aria-expanded="true"] .hd-menu-vach:nth-of-type(2) { transform: rotate(45deg); }
  .hd-menu-nut[aria-expanded="true"] .hd-menu-vach:nth-of-type(3) { opacity: 0; }
  .hd-menu-nut[aria-expanded="true"] .hd-menu-vach:nth-of-type(4) { transform: rotate(-45deg); }
  .hd:not(.hd--js) .hd-khung {
    height: auto;
    min-height: var(--vs-cao-header);
    flex-wrap: wrap;
    padding-block: calc((var(--vs-cao-header) - var(--vs-cham-toi-thieu)) / 2);
  }
  .hd:not(.hd--js) .hd-menu { order: 1; }
}