/* Homepage mobile navigation, CMS hero artwork, and tourism map — 2026-08-25. */
.nav-mobile-link { display: none; }

/* The artwork image remains in normal document flow so its full proportions are preserved. */
.release-hero.hero-artwork.hero-banner-managed { display: block; min-height: 0; background: #102a25; }
.release-hero.hero-artwork.hero-banner-managed .release-hero-backdrop { position: relative; inset: auto; background: #102a25 !important; }
.release-hero.hero-artwork.hero-banner-managed .hero-artwork-picture { position: relative; display: block; width: 100%; }
.release-hero.hero-artwork.hero-banner-managed .hero-artwork-picture::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: rgb(16 42 37 / var(--hero-overlay, 0)); }
.release-hero.hero-artwork.hero-banner-managed .hero-artwork-image { display: block; width: 100%; height: auto; }
.release-hero.hero-artwork.hero-banner-managed .release-hero-content { position: absolute; inset: 0; z-index: 1; width: min(1240px, calc(100% - 40px)); min-height: 0; margin: auto; padding-block: 24px; pointer-events: none; }
.release-hero.hero-artwork.hero-banner-managed .hero-actions { margin-top: auto; pointer-events: auto; }

.tourism-map-section { overflow: hidden; background: linear-gradient(135deg, #f4faf7 0%, #fff8ec 100%); border-block: 1px solid #deebe5; }
.tourism-map-layout { display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.tourism-map-copy h2 { margin: 0; color: #17342f; font-size: clamp(1.8rem, 3.4vw, 3.15rem); line-height: 1.05; letter-spacing: -.04em; }
.tourism-map-copy > p:not(.eyebrow) { max-width: 31rem; margin: 18px 0 0; color: #40504b; font-size: 1rem; line-height: 1.65; }
.tourism-map-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; padding: 0; list-style: none; }
.tourism-map-chips li { padding: 7px 11px; border: 1px solid #c9ded5; border-radius: 999px; color: #17342f; background: #fff; font-size: .78rem; font-weight: 800; }
.tourism-map-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tourism-map-actions .button { display: inline-flex; align-items: center; justify-content: center; }
.tourism-map-secondary { border: 1px solid #174b43; background: #fff; color: #17342f; }
.tourism-map-secondary:hover { border-color: #a84022; color: #8c341e; }
.tourism-map-figure { min-width: 0; margin: 0; }
.tourism-map-trigger { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #c7ddd4; border-radius: 22px; background: #fff; box-shadow: 0 18px 42px rgb(15 65 54 / .16); cursor: zoom-in; }
.tourism-map-trigger img { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .24s ease; }
.tourism-map-trigger:hover img, .tourism-map-trigger:focus-visible img { transform: scale(1.012); }
.tourism-map-trigger:focus-visible { outline: 3px solid #f4b63e; outline-offset: 4px; }
.tourism-map-figure figcaption { margin-top: 10px; color: #52635d; font-size: .84rem; text-align: center; }

.tourism-map-modal[hidden] { display: none; }
.tourism-map-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; }
.tourism-map-modal-backdrop { position: absolute; inset: 0; background: rgb(5 22 18 / .78); backdrop-filter: blur(4px); }
.tourism-map-modal-panel { position: relative; z-index: 1; width: min(1440px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 18px; border-radius: 20px; background: #fffdf8; box-shadow: 0 26px 70px rgb(0 0 0 / .35); }
.tourism-map-modal-panel h2 { margin: 0 54px 14px 0; color: #17342f; font-size: clamp(1.2rem, 2vw, 1.65rem); }
.tourism-map-modal-panel img { display: block; width: 100%; height: auto; border-radius: 12px; }
.tourism-map-original-link { margin: 12px 0 0; text-align: right; }
.tourism-map-original-link a { color: #8c341e; font-size: .86rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tourism-map-modal-close { position: absolute; top: 12px; right: 12px; display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #17342f; font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
body.tourism-map-open { overflow: hidden; }

/* The map is the first discovery section; the existing content is retained after it. */
#main-content > #ban-do-du-lich { order: 2; }
#main-content > .visitor-quick-section { order: 3; }
#main-content > .tet-program-section { order: 4; }
#main-content > .homepage-lodging { order: 5; }
#main-content > #video { order: 6; }
#main-content > #qua-tang { order: 7; }
#main-content > #cuoc-thi { order: 8; }

@media (max-width: 768px) {
  .header-inner { position: relative; }
  .menu-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 9px; border: 1px solid rgb(255 255 255 / .42); border-radius: 10px; background: #124a42; }
  .menu-toggle span { width: 22px; height: 2px; margin: 3px 0; background: #fff; }
  .menu-toggle:focus-visible { outline: 3px solid #f4b63e; outline-offset: 3px; }
  .main-navigation.primary-nav { top: 100%; right: 0; left: 0; max-height: calc(100vh - 70px); padding: 8px 20px 14px; background: #fffdf8; }
  .main-navigation.primary-nav a { min-height: 44px; padding: 11px 0; color: #17342f; }
  .main-navigation .nav-desktop-link { display: none; }
  .main-navigation .nav-mobile-link { display: block; }
  .hero-actions.hero-actions-compact { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-actions.hero-actions-compact .button-primary { grid-column: auto; }
  .hero-actions.hero-actions-compact .button { width: 100%; min-height: 46px; }
  .release-hero.hero-artwork.hero-banner-managed .release-hero-content { width: min(100% - 28px, 1240px); padding-block: 14px; }
  .release-hero.hero-artwork.hero-banner-managed .hero-actions { padding: 8px; border-radius: 14px; background: rgb(6 30 26 / .64); }
  .tourism-map-layout { grid-template-columns: 1fr; gap: 22px; }
  .tourism-map-copy { display: contents; }
  .tourism-map-figure { order: 2; }
  .tourism-map-actions { order: 3; }
  .tourism-map-copy > p:not(.eyebrow) { margin-top: 14px; }
  .tourism-map-actions { display: grid; grid-template-columns: 1fr; }
  .tourism-map-actions .button { width: 100%; }
  .tourism-map-trigger { border-radius: 18px; }
  .tourism-map-figure figcaption { margin-top: 8px; }
  .tourism-map-modal { padding: 8px; }
  .tourism-map-modal-panel { max-height: calc(100vh - 16px); padding: 12px; border-radius: 16px; }
}

@media (min-width: 769px) { .nav-mobile-link { display: none !important; } }
@media (max-width: 420px) { .tourism-map-chips li { font-size: .73rem; } }
@media (prefers-reduced-motion: reduce) { .tourism-map-trigger img { transition: none; } }