/* Bổ sung của site cho trang Data Hub: menu chính trong thanh đầu trang (kiểu chữ/màu theo gói: biến --navy, --pink... của style.css gói).
   Desktop ≥1200px: menu ngang giữa logo và nút VI/EN, mục con mở khi rê chuột/focus.
   Dưới 1200px: nút ☰ mở bảng menu thả xuống dưới thanh đầu trang. */

.mast.has-giv-sm { position: relative; z-index: 60; }
.has-giv-sm .mast-in { gap: 12px; }

.giv-sm-list, .giv-sm-sub { list-style: none; margin: 0; padding: 0; }
.giv-sm a { text-decoration: none; color: var(--ink-2); font-weight: 600; }
.giv-sm a:hover, .giv-sm a:focus-visible { color: var(--navy); }
.giv-sm .is-current > a { color: var(--navy); }

/* Nút ☰ */
.giv-sm-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 1.5px solid var(--navy); border-radius: 999px; background: var(--white); color: var(--navy); cursor: pointer; }
.giv-sm-bars, .giv-sm-bars::before, .giv-sm-bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .15s, background .15s; }
.giv-sm-bars { position: relative; }
.giv-sm-bars::before, .giv-sm-bars::after { content: ""; position: absolute; left: 0; }
.giv-sm-bars::before { top: -6px; }
.giv-sm-bars::after { top: 6px; }
.giv-sm-open .giv-sm-bars { background: transparent; }
.giv-sm-open .giv-sm-bars::before { transform: translateY(6px) rotate(45deg); }
.giv-sm-open .giv-sm-bars::after { transform: translateY(-6px) rotate(-45deg); }
.giv-sm-toggle:focus-visible { outline: 3px solid var(--pink-l); outline-offset: 2px; }

/* ===== Dưới 1200px: bảng menu thả xuống ===== */
@media (max-width: 1199px) {
  .giv-sm { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 70px); overflow-y: auto; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px -12px rgba(16, 24, 40, .28); }
  .giv-sm-open .giv-sm { display: block; }
  .giv-sm-list { max-width: var(--wrap); margin: 0 auto; padding: 6px 20px 14px; }
  .giv-sm-list > li + li { border-top: 1px solid var(--line); }
  .giv-sm-list a { display: block; padding: 13px 4px; font-size: 16px; }
  .giv-sm .is-current > a { color: var(--pink-d); }
  .giv-sm-sub { margin: -4px 0 8px; padding-left: 16px; border-left: 2px solid var(--line); }
  .giv-sm-sub a { padding: 9px 4px; font-size: 15px; font-weight: 500; color: var(--ink-3); }
}
@media (min-width: 760px) and (max-width: 1199px) {
  .giv-sm-list { padding-inline: 32px; }
}

/* ===== Từ 1200px: menu ngang ===== */
@media (min-width: 1200px) {
  .giv-sm-toggle { display: none; }
  .has-giv-sm .brand .tag { display: none; }
  .has-giv-sm .mast-in > .sp { display: none; }
  .giv-sm { flex: 1; align-self: stretch; display: flex; justify-content: center; min-width: 0; }
  .giv-sm-list { display: flex; align-items: stretch; }
  .giv-sm-list > li { position: relative; display: flex; }
  .giv-sm-list > li > a { display: flex; align-items: center; padding: 3px 11px 0; font-size: 14.5px; white-space: nowrap; border-bottom: 3px solid transparent; }
  .giv-sm-list > li.is-current > a { border-bottom-color: var(--pink); }
  .giv-sm-list > li.has-sub > a::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
  .giv-sm-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 70; }
  .giv-sm-list > li:hover > .giv-sm-sub, .giv-sm-list > li:focus-within > .giv-sm-sub { display: block; }
  .giv-sm-sub a { display: block; padding: 10px 12px; border-radius: 6px; font-size: 14.5px; }
  .giv-sm-sub a:hover { background: var(--tint); }
}

@media print {
  .giv-sm, .giv-sm-toggle { display: none !important; }
}