.vnat-app[data-page="region"] {
  --rg-bg: #faf7f2;
  --rg-ink: #1e1b18;
  --rg-muted: #625b53;
  --rg-line: #e4ddd3;
  --rg-cream: #f4ece7;
  --rg-track: #e7d3c5;
  --rg-maroon: #6a0109;
  --rg-red: #8b1d1d;
  --rg-serif: 'Noto Serif Display', Georgia, serif;
  --rg-serif-text: 'Noto Serif', Georgia, serif;
  --rg-sans: 'Noto Sans Display', Arial, sans-serif;
  background: var(--rg-bg);
  color: var(--rg-ink);
  font-family: var(--rg-sans);
  font-size: 14px;
  line-height: 20px;
  overflow: clip;
  --gutter: max(48px, calc((100% - 1280px) / 2 + 24px));
}
.vnat-app[data-page="region"] *,
.vnat-app[data-page="region"] *::before,
.vnat-app[data-page="region"] *::after { box-sizing: border-box; }
.vnat-app[data-page="region"] h1,
.vnat-app[data-page="region"] h2,
.vnat-app[data-page="region"] h3,
.vnat-app[data-page="region"] h4,
.vnat-app[data-page="region"] p,
.vnat-app[data-page="region"] ul { margin: 0; padding: 0; font-family: inherit; }
.vnat-app[data-page="region"] img { display: block; max-width: none; }

.vnat-app[data-page="region"] .rg-breadcrumb { display: flex; align-items: center; gap: 4px; height: 32px; padding: 8px var(--gutter); background: #faf2ed; font-family: 'Noto Sans', Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 16px; }
.vnat-app[data-page="region"] .rg-breadcrumb a { display: flex; align-items: center; gap: 4px; color: var(--rg-muted); text-decoration: none; }
.vnat-app[data-page="region"] .rg-breadcrumb a:hover { text-decoration: underline; }
.vnat-app[data-page="region"] .rg-breadcrumb__sep { color: #dfbfbc; }
.vnat-app[data-page="region"] .rg-breadcrumb__current { overflow: hidden; color: var(--rg-maroon); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.vnat-app[data-page="region"] .rg-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 40px var(--gutter); background: var(--rg-bg); }
.vnat-app[data-page="region"] .rg-head__copy { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; }
.vnat-app[data-page="region"] .rg-head h1 { color: var(--rg-maroon); font-family: var(--rg-serif); font-size: 64px; font-stretch: 75%; font-weight: 800; letter-spacing: -1.28px; line-height: 70px; }
.vnat-app[data-page="region"] .rg-head__copy p { max-width: 768px; color: var(--rg-muted); font-family: var(--rg-serif-text); font-size: 18px; font-weight: 400; line-height: 30px; }
.vnat-app[data-page="region"] .rg-head__actions { display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 8px; }
.vnat-app[data-page="region"] .rg-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 9999px; cursor: pointer; font-family: var(--rg-sans); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.vnat-app[data-page="region"] .rg-button--primary { z-index: 0; overflow: hidden; padding: 8px 14px; border: 0; background: linear-gradient(90deg, #8b1d1d, #b32b2b); box-shadow: 0 1px 1px rgba(0,0,0,.05); color: #fff; }
.vnat-app[data-page="region"] .rg-button--primary::before { position: absolute; inset: 0; z-index: -1; content: ''; background: url('../images/header-v2/btn-pattern.png') 0 0 / 77.25px 73.5px repeat; opacity: .25; }
.vnat-app[data-page="region"] .rg-button--outline { padding: 8px 16px; border: 1px solid var(--rg-red); background: #fff; color: var(--rg-red); }
.vnat-app[data-page="region"] .rg-button:focus-visible { outline: 2px solid var(--rg-maroon); outline-offset: 2px; }

.vnat-app[data-page="region"] .rg-story { display: grid; grid-template-columns: 2fr 1fr; height: 444px; margin-inline: var(--gutter); overflow: clip; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.vnat-app[data-page="region"] .rg-story__media { position: relative; overflow: clip; background: var(--rg-cream); }
.vnat-app[data-page="region"] .rg-story__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.vnat-app[data-page="region"] .rg-story__image.is-active { opacity: 1; }
.vnat-app[data-page="region"] .rg-story__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(45,45,45,.6) 0%, rgba(51,48,45,0) 77.365%); }
.vnat-app[data-page="region"] .rg-story__bars { position: absolute; right: 0; bottom: 0; left: 0; display: flex; gap: 12px; padding: 0 48px 12px; }
.vnat-app[data-page="region"] .rg-story__bar { position: relative; flex: 1 0 0; height: 8px; overflow: clip; padding: 0; border: 0; border-radius: 9999px; background: var(--rg-track); cursor: pointer; }
.vnat-app[data-page="region"] .rg-story__bar span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 9999px; background: #fff; }
.vnat-app[data-page="region"] .rg-story__bar.is-active span { width: 100%; animation: rg-story-progress var(--rg-story-ms, 3000ms) linear both; }
.vnat-app[data-page="region"] .rg-story[data-static] .rg-story__bar.is-active span { animation: none; }
.vnat-app[data-page="region"] .rg-story__bar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vnat-app[data-page="region"] .rg-story__panel { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px 48px 32px 32px; background: #fff; }
.vnat-app[data-page="region"] .rg-story__panel h2 { color: var(--rg-ink); font-family: var(--rg-serif); font-size: 48px; font-stretch: 75%; font-weight: 800; letter-spacing: -.48px; line-height: 56px; }
.vnat-app[data-page="region"] .rg-story__panel ul { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; list-style: none; }
.vnat-app[data-page="region"] .rg-story__panel li { display: flex; align-items: flex-start; gap: 8px; font-family: 'Noto Sans Display', Arial, sans-serif; font-size: 14px; font-stretch: 75%; font-weight: 500; line-height: 20px; }
.vnat-app[data-page="region"] .rg-story__panel li img { flex: none; width: 16.5px; height: 15.75px; margin-top: 2px; }
@keyframes rg-story-progress { from { width: 0; } to { width: 100%; } }

.vnat-app[data-page="region"] .rg-destinations { padding: 32px var(--gutter); }
.vnat-app[data-page="region"] .rg-destinations h2,
.vnat-app[data-page="region"] .rg-trips h2 { padding-top: 6.5px; color: var(--rg-ink); font-family: var(--rg-serif); font-size: 48px; font-stretch: 75%; font-weight: 800; letter-spacing: -.48px; line-height: 56px; white-space: nowrap; }
.vnat-app[data-page="region"] .rg-destinations h2 { margin-bottom: 24px; }
.vnat-app[data-page="region"] .rg-destinations__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vnat-app[data-page="region"] .rg-card { position: relative; display: block; height: 352px; overflow: clip; border-radius: 16px; background: #0b1326; color: #fff; }
.vnat-app[data-page="region"] .rg-card > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.vnat-app[data-page="region"] .rg-card:hover > img { transform: scale(1.035); }
.vnat-app[data-page="region"] .rg-card__shade { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.vnat-app[data-page="region"] .rg-card h3 { position: absolute; top: 144px; right: 0; left: 0; color: #fff; font-family: var(--rg-serif); font-size: 48px; font-stretch: 75%; font-weight: 800; letter-spacing: -.48px; line-height: 56px; text-align: center; }
.vnat-app[data-page="region"] .rg-card__bookmark { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; background: rgba(255,255,255,.9); }
.vnat-app[data-page="region"] .rg-card__bookmark img { width: 14px; height: 14px; }

.vnat-app[data-page="region"] .rg-pattern { height: 32px; padding: 1px 0; background: url('../images/places/region-pattern.png') 0 0 / 1248px 31.2px repeat-x; transform: scaleY(-1); }

.vnat-app[data-page="region"] .rg-trips { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px var(--gutter); background: #fff; }
.vnat-app[data-page="region"] .rg-trips__row { display: flex; gap: 24px; width: 100%; }
.vnat-app[data-page="region"] .rg-trip { position: relative; display: flex; flex: 1 0 0; align-items: flex-end; min-width: 0; height: 180px; overflow: clip; padding: 75px 25px 25px; border: 1px solid var(--rg-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); color: #fff; text-decoration: none; }
.vnat-app[data-page="region"] .rg-trip > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vnat-app[data-page="region"] .rg-trip__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(51,48,45,.9) 0%, rgba(51,48,45,.4) 50%, rgba(51,48,45,0) 100%); }
.vnat-app[data-page="region"] .rg-trip h4 { position: relative; padding-top: 2px; color: #fff; font-family: var(--rg-serif-text); font-size: 24px; font-stretch: 75%; font-weight: 600; line-height: 32px; }

@media (prefers-reduced-motion: reduce) {
  .vnat-app[data-page="region"] .rg-story__image { transition: none; }
  .vnat-app[data-page="region"] .rg-card > img { transition: none; }
}

@media (max-width: 991.98px) {
  .vnat-app[data-page="region"] .rg-breadcrumb { padding-inline: 24px; }
  .vnat-app[data-page="region"] .rg-head { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .vnat-app[data-page="region"] .rg-head h1 { font-size: 44px; line-height: 50px; }
  .vnat-app[data-page="region"] .rg-head__actions { align-items: flex-start; }
  .vnat-app[data-page="region"] .rg-story { grid-template-columns: 1fr; height: auto; margin-inline: 24px; }
  .vnat-app[data-page="region"] .rg-story__media { height: 320px; }
  .vnat-app[data-page="region"] .rg-story__bars { padding-inline: 24px; }
  .vnat-app[data-page="region"] .rg-story__panel { padding: 32px 24px; }
  .vnat-app[data-page="region"] .rg-story__panel h2 { font-size: 36px; line-height: 42px; }
  .vnat-app[data-page="region"] .rg-destinations { padding: 32px 24px; }
  .vnat-app[data-page="region"] .rg-destinations h2,
  .vnat-app[data-page="region"] .rg-trips h2 { font-size: 36px; line-height: 42px; white-space: normal; }
  .vnat-app[data-page="region"] .rg-destinations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .vnat-app[data-page="region"] .rg-card { height: 240px; }
  .vnat-app[data-page="region"] .rg-card h3 { top: 50%; font-size: 30px; line-height: 36px; transform: translateY(-50%); }
  .vnat-app[data-page="region"] .rg-trips { padding: 32px 24px; }
  .vnat-app[data-page="region"] .rg-trips__row { flex-direction: column; }
}
@media (max-width: 575.98px) {
  .vnat-app[data-page="region"] .rg-destinations__grid { grid-template-columns: minmax(0, 1fr); }
}