.hdr2,
.hdr2-modal {
  --hdr2-red: #8b1d1d;
  --hdr2-red-soft: #951c1f;
  --hdr2-ink: #1e1e20;
  --hdr2-muted: #6e6e72;
  --hdr2-nav: #404040;
  --hdr2-line: #d2d2d7;
  --hdr2-subtle: #f8f9fa;
  --hdr2-surface: #e5e7eb;
  --hdr2-black: #1e1b18;
  --hdr2-sans: "Noto Sans Display", "Noto Sans", Arial, sans-serif;
}

.hdr2 {
  position: relative;
  z-index: 110;
  color: var(--hdr2-ink);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 8px rgba(36, 33, 30, .06);
  font-family: var(--hdr2-sans);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-font-smoothing: antialiased;
}
.hdr2 *, .hdr2 *::before, .hdr2 *::after { box-sizing: border-box; }
.hdr2 a { color: inherit; text-decoration: none; }
.hdr2 a:hover, .hdr2 a:focus { text-decoration: none; }
.hdr2 :where(button, input) { font: inherit; }
.hdr2 img { max-width: none; }

.hdr2-topbar { position: relative; z-index: 2; background: var(--hdr2-surface); }
.hdr2-topbar__watermark { display: none; position: absolute; inset: 0; overflow: hidden; opacity: .25; pointer-events: none; }
.hdr2-topbar__watermark img { position: absolute; top: -83.15%; left: 80.33%; width: 18.95%; height: 410.6%; transform: scaleX(-1); }
.hdr2-topbar__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin-inline: auto; padding: 0 24px; }
.hdr2-attention { min-width: 0; display: flex; align-items: center; gap: 12px; color: #333; font-size: 12px; line-height: 16px; white-space: nowrap; }
.hdr2-attention__icon { flex: none; width: 16px; height: 16px; background: #fff; }
.hdr2-attention__msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hdr2-attention__cta { flex: none; padding: 6px 12px; border-radius: 8px; color: var(--hdr2-nav) !important; font-weight: 600; transition: background-color .2s ease; }
.hdr2-attention__cta:hover { background: rgba(0, 0, 0, .05); }
.hdr2-topbar__right { flex: none; display: flex; align-items: center; gap: 16px; padding: 4px 0; }
.hdr2-loc { display: flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; border-radius: 8px; color: var(--hdr2-black); background: none; text-align: left; cursor: pointer; }
.hdr2-loc__icon { flex: none; width: 24px; height: 24px; }
.hdr2-loc__text { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.hdr2-weather { position: relative; display: flex; align-items: center; }
.hdr2-weather__widget { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.hdr2-weather__toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 0; border-radius: 6px; color: #fff; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url("../images/header-v2/weather-sky.png") center / cover no-repeat; font-size: 12px; font-weight: 600; font-stretch: 75%; letter-spacing: 1.2px; line-height: 16px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.hdr2-weather__toggle[hidden] { display: none; }
.hdr2-weather__toggle img { flex: none; width: 14.667px; height: 13.333px; }
.hdr2-divider { display: block; flex: none; width: 1px; height: 24px; background: var(--hdr2-line); }
.hdr2-lang-cur { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-family: "SVN-Gotham", var(--hdr2-sans); font-size: 12px; letter-spacing: -.36px; line-height: 1.5; white-space: nowrap; }
.hdr2-lang { position: relative; }
.hdr2-lang__current { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; color: var(--hdr2-black); background: none; letter-spacing: inherit; cursor: pointer; }
.hdr2-lang__list { position: absolute; top: calc(100% + 10px); right: 0; z-index: 9; display: none; min-width: 160px; margin: 0; padding: 8px; list-style: none; color: var(--hdr2-ink); background: #fff; border: 1px solid #e9e3da; border-radius: 8px; box-shadow: 0 15px 40px rgba(0, 0, 0, .14); font-family: var(--hdr2-sans); letter-spacing: 0; }
.hdr2-lang.is-open .hdr2-lang__list { display: block; }
.hdr2-lang__list a { display: block; padding: 8px 10px; border-radius: 5px; font-size: 13px; }
.hdr2-lang__list a:hover { background: var(--hdr2-subtle); }

.hdr2-banner { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 1280px; margin-inline: auto; padding: 12px 24px; }
.hdr2-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr2-main__left { flex: 1 1 0; min-width: 0; max-width: 580px; display: flex; align-items: center; gap: 12px; }
.hdr2-logo { flex: none; display: block; width: 72.88px; height: 56px; overflow: hidden; border-radius: 6px; }
.hdr2-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hdr2-search { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px; border-radius: 8px; background: var(--hdr2-surface); }
.hdr2-scope { position: relative; flex: none; }
.hdr2-search__scope { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px; border: 0; color: var(--hdr2-ink); background: none; font: inherit; font-size: 12px; font-weight: 600; line-height: 16px; cursor: pointer; }
.hdr2-scope__list { position: absolute; top: calc(100% + 10px); left: 0; z-index: 9; display: none; min-width: 160px; margin: 0; padding: 8px; list-style: none; color: var(--hdr2-ink); background: #fff; border: 1px solid #e9e3da; border-radius: 8px; box-shadow: 0 15px 40px rgba(0, 0, 0, .14); }
.hdr2-scope.is-open .hdr2-scope__list { display: block; }
.hdr2-scope__list li { padding: 8px 10px; border-radius: 5px; font-size: 13px; line-height: 16px; cursor: pointer; outline: 0; }
.hdr2-scope__list li:hover,
.hdr2-scope__list li:focus { background: var(--hdr2-subtle); }
.hdr2-scope__list li[aria-selected="true"] { color: var(--hdr2-red-soft); font-weight: 600; }
.hdr2-scope.is-open .hdr2-search__scope img { transform: rotate(180deg); }
.hdr2-search__scope img { width: 20px; height: 24px; margin: -2px 0; }
.hdr2-search__field { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.hdr2-search__input { width: 100%; height: 40px; padding: 9px 42px 9px 16px; border: 0; border-radius: 0; outline: 0; color: var(--hdr2-ink); background: transparent; font-size: 14px; line-height: 24px; -webkit-appearance: none; appearance: none; }
.hdr2-search__input::placeholder { color: var(--hdr2-muted); opacity: 1; }
.hdr2-search__input::-webkit-search-decoration { -webkit-appearance: none; }
.hdr2-search__btn { position: absolute; top: 8px; right: 13.84px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.hdr2-search__btn img { width: 16px; height: 16px; }

.hdr2-actions { flex: none; display: flex; align-items: center; }
.hdr2-icon-group { display: flex; align-items: center; gap: 6px; }
.hdr2-icon-btn { display: grid; place-items: center; padding: 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; transition: background-color .2s ease; }
.hdr2-icon-btn img { display: block; width: 24px; height: 24px; }
.hdr2-icon-btn:hover { background: var(--hdr2-subtle); }
.hdr2-actions__divider { display: flex; padding: 0 16px; }
.hdr2-auth, .hdr2-user-profile { display: flex; align-items: center; gap: 12px; }
.hdr2-guest-wrap { display: flex; align-items: flex-start; gap: 12px; }
.hdr2-user-name { max-width: 160px; overflow: hidden; color: var(--hdr2-ink); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.hdr2-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid var(--hdr2-red); border-radius: 9999px; color: var(--hdr2-red) !important; background: #fff; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; cursor: pointer; }
.hdr2-btn--register { overflow: hidden; padding: 8px 16px; border: 0; color: #fff !important; background: var(--hdr2-red); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05)); }
.hdr2-btn--register::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25; background: url("../images/header-v2/btn-pattern.png") 0 0 / 77.25px 73.5px; }
.hdr2-burger { display: none; }

.hdr2-navbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hdr2 .hdr2-nav { position: static; display: block; float: none; width: auto; height: auto; margin: 0; padding: 0; background: none; }
.hdr2 .hdr2-nav__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; border: 0; box-shadow: none; }
.hdr2 .hdr2-nav__list > li { position: relative; float: none; display: flex; align-items: center; gap: 4px; height: auto; padding: 8px 16px 6px; border-radius: 8px; }
.hdr2 .hdr2-nav__list > li > a:not(.hdr2-badge) { display: block; height: auto; padding: 0; border: 0; color: var(--hdr2-nav); background: none; font-family: var(--hdr2-sans); font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 16px; text-transform: uppercase; white-space: nowrap; transition: color .2s ease; }
.hdr2 .hdr2-nav__list > li:hover > a:not(.hdr2-badge),
.hdr2 .hdr2-nav__list > li > a.is-active { color: var(--hdr2-red); background: none; }
.hdr2 .hdr2-nav__list > li > .hdr2-badge { display: inline-flex; align-items: center; gap: 6px; height: 16px; padding: 2px 8px; border: 1px solid #ffe088; border-radius: 9999px; color: #ffe088; background: #0f172a; font-family: var(--hdr2-sans); font-size: 11px; font-weight: 700; font-stretch: 75%; letter-spacing: .55px; line-height: 1; text-transform: uppercase; white-space: nowrap; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05)); }
.hdr2-badge img { flex: none; width: 14px; height: 10px; }
.hdr2 .hdr2-nav__list > li.hdr2-nav__item-priceless { padding: 6px 0 4px; }
.hdr2 .hdr2-nav__list > li > .hdr2-badge.hdr2-badge--priceless { display: inline-flex; align-items: center; justify-content: center; height: auto; padding: 5px 13px; border-color: #ffe088; }
.hdr2-badge--priceless img { width: 112.222px; height: 18px; }
.hdr2-nav__caret { flex: none; width: 12px; height: 12px; padding: 0; border: 0; background: url("../images/header-v2/nav-caret.svg") center / 12px 12px no-repeat; cursor: pointer; transition: transform .2s ease; }
.hdr2 .hdr2-nav__list > li:hover > .hdr2-nav__caret { transform: rotate(180deg); }
.hdr2 .hdr2-nav__list .flyout { position: absolute; top: 100%; left: 0; z-index: 12; display: none; width: auto; min-width: 470px; height: auto; padding: 18px; opacity: 1; visibility: visible; transform: none; background: #fff; border: 1px solid #e9e3da; border-radius: 0 0 12px 12px; box-shadow: 0 20px 45px rgba(40, 28, 20, .15); }
.hdr2 .hdr2-nav__list > li:hover > .flyout,
.hdr2 .hdr2-nav__list > li:focus-within > .flyout { display: block; }
.hdr2-flyout-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 4px 16px; }
.hdr2 .hdr2-nav__list .flyout a { display: block; width: auto; height: auto; padding: 11px 12px; border: 0; border-radius: 6px; color: var(--hdr2-ink); background: none; font-size: 13px; line-height: 1.3; text-transform: none; }
.hdr2 .hdr2-nav__list .flyout a:hover { color: var(--hdr2-red); background: #faf8f3; }
.hdr2 .hdr2-nav__list .flyout .hdr2-flyout__off { display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: #9a9a9a; font-size: 13px; line-height: 1.3; cursor: not-allowed; }
.hdr2-flyout__badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: #ececec; color: #8a8a8a; font-size: 12px; font-weight: 400; line-height: 1.2; }

.hdr2-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .45); }
.hdr2-modal[hidden] { display: none; }
.hdr2-modal__box { position: relative; width: 100%; max-width: 420px; padding: 28px 24px; border-radius: 12px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); text-align: center; font-family: var(--hdr2-sans); }
.hdr2-modal__close { position: absolute; top: 10px; right: 12px; border: 0; color: var(--hdr2-muted); background: none; font-size: 26px; line-height: 1; cursor: pointer; }
.hdr2-modal__title { margin: 4px 0 10px; color: var(--hdr2-ink); font-size: 20px; font-family: var(--hdr2-sans); font-weight: 700; }
.hdr2-modal__msg { margin: 0; color: var(--hdr2-muted); font-family: var(--hdr2-sans); }

@media (min-width: 992px) {
  .hdr2-menu-sheet-root { display: none; }
  .hdr2 .hdr2-nav__list > li:is(.hdr2-nav__item, .hdr2-nav__item-places, .hdr2-nav__item-things, .hdr2-nav__item-plan, .hdr2-nav__item-offers, .hdr2-nav__item-book, .hdr2-nav__item-events) { height: 32px; }
}

@media (max-width: 991.98px) {
  .hdr2 { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  .hdr2-topbar { background: var(--hdr2-subtle); }
  .hdr2-topbar__watermark { display: block; }
  .hdr2-topbar__inner { justify-content: flex-end; min-height: 36px; padding: 6px 16px; }
  .hdr2-topbar__watermark img { top: -25.24%; left: 60.38%; width: 39.57%; height: 252.5%; }
  .hdr2-attention { display: none; }
  .hdr2-topbar__right { gap: 12px; padding: 0; }
  .hdr2-loc { padding: 0; color: #000; }
  .hdr2-loc__label { color: rgba(0, 0, 0, .75); }
  .hdr2-loc__icon { width: 20px; height: 20px; }
  .hdr2-loc__text { line-height: 14px; }
  .hdr2-loc__name { font-weight: 500; }
  .hdr2-weather__widget,
  .hdr2-weather__toggle { display: none !important; }
  .hdr2-weather { position: static; }
    .hdr2-lang__list { max-width: calc(100vw - 32px); max-height: min(360px, calc(100vh - 120px)); overflow-y: auto; }

  .hdr2-banner { gap: 6px; padding: 12px 16px; }
  .hdr2-main__left { max-width: none; }
  .hdr2-logo { width: 67.68px; height: 52px; }
  .hdr2-search { gap: 8px; padding: 6px; background: var(--hdr2-subtle); }
  /* 16px để iOS không tự phóng to khi focus ô tìm kiếm */
  .hdr2-search__input { padding: 9px 36px 9px 12px; font-size: 16px; }
  .hdr2-search__btn { top: 50%; right: 8px; transform: translateY(-50%); }
  .hdr2-actions,
  .hdr2-burger,
  .hdr2 .hdr2-nav__list > li > .hdr2-badge { display: none !important; }

  .hdr2-navbar { display: block; height: 37px; }
  .hdr2 .hdr2-nav { width: 100%; }
  .hdr2 .hdr2-nav__list { flex-wrap: nowrap; height: 37px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hdr2 .hdr2-nav__list::-webkit-scrollbar { display: none; }
  .hdr2 .hdr2-nav__list > li { flex: 0 0 auto; align-items: stretch; gap: 0; height: 100%; padding: 0; border-radius: 6px; }
  .hdr2 .hdr2-nav__list > li > a:not(.hdr2-badge) { display: inline-flex; align-items: center; padding: 8px 0 8px 12px; color: #666; font-size: 14px; font-weight: 450; letter-spacing: -.42px; line-height: 1.5; text-transform: none; }
  .hdr2 .hdr2-nav__list > li:hover > a:not(.hdr2-badge) { color: #666; }
  .hdr2 .hdr2-nav__list > li:has(> a.is-active) { background: var(--hdr2-subtle); }
  .hdr2 .hdr2-nav__list > li > a.is-active { color: var(--hdr2-red-soft); }
  .hdr2 .hdr2-nav__list .flyout { display: none !important; }
  .hdr2-nav__caret { width: 28.61px; height: auto; background: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25928L5.5 5.75928L10 1.25928' stroke='%23666666' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 6px center / 10.61px 6.48px; }
  .hdr2 .hdr2-nav__list > li:hover > .hdr2-nav__caret { transform: none; }
  .hdr2 .hdr2-nav__list > li > .hdr2-nav__caret[aria-expanded="true"] { transform: scaleY(-1); }

  .hdr2-menu-sheet { font-family: "Noto Sans Display", "Noto Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  .hdr2-menu-sheet__title { margin: 0; color: #951c1f; font-family: inherit; font-size: 18px; font-weight: 700; letter-spacing: normal; line-height: 1.4; text-transform: none; }
  .hdr2-menu-sheet__all,
  .hdr2-menu-sheet__heading,
  .hdr2-menu-sheet__link { display: flex; align-items: center; min-height: 44px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); color: #333; font-size: 16px; font-weight: 450; line-height: 1.25; text-decoration: none; }
  .hdr2-menu-sheet__all { color: #951c1f; }
  .hdr2-menu-sheet__heading { color: #1e1e20; font-weight: 700; }
  .hdr2-menu-sheet__list { margin: 0; padding: 0 0 0 12px; list-style: none; }
  .hdr2-menu-sheet__all:hover,
  .hdr2-menu-sheet__heading:hover,
  .hdr2-menu-sheet__link:hover { color: #951c1f; text-decoration: none; }
  .hdr2-menu-sheet__link.is-disabled { gap: 10px; color: #9a9a9a; cursor: not-allowed; }
}
