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

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

.vnat-app[data-page="places-interest"] .pi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 40px var(--gutter); background: var(--pi-bg); }
.vnat-app[data-page="places-interest"] .pi-head__copy { display: flex; flex: none; flex-direction: column; gap: 8px; width: 768px; max-width: 100%; min-width: 0; }
.vnat-app[data-page="places-interest"] .pi-head h1 { color: var(--pi-maroon); font-family: var(--pi-serif); font-size: 64px; font-stretch: 75%; font-weight: 800; letter-spacing: -1.28px; line-height: 70px; }
.vnat-app[data-page="places-interest"] .pi-head__copy p { color: var(--pi-muted); font-family: var(--pi-serif-text); font-size: 18px; font-weight: 400; line-height: 30px; }
.vnat-app[data-page="places-interest"] .pi-head__actions { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; max-width: 416px; }
.vnat-app[data-page="places-interest"] .pi-head__row { display: flex; align-items: center; gap: 7.99px; }
.vnat-app[data-page="places-interest"] .pi-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9999px; cursor: pointer; font-family: var(--pi-sans); white-space: nowrap; }
.vnat-app[data-page="places-interest"] .pi-button--primary { align-self: flex-start; max-width: 100%; padding: 12px 82.64px; background: linear-gradient(90deg, #8b1d1d, #6a0009); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .014px; line-height: 20px; }
.vnat-app[data-page="places-interest"] .pi-button--save { flex: 1 0 0; gap: 4px; min-width: 0; padding: 10px 16px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); color: var(--pi-maroon); font-size: 12px; font-weight: 500; letter-spacing: .024px; line-height: 16px; }
.vnat-app[data-page="places-interest"] .pi-button--share { flex: none; width: 40px; height: 40px; padding: 0; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.vnat-app[data-page="places-interest"] .pi-button:focus-visible { outline: 2px solid var(--pi-maroon); outline-offset: 2px; }

.vnat-app[data-page="places-interest"] .pi-grid { padding: 32px var(--gutter); background: var(--pi-bg); }
.vnat-app[data-page="places-interest"] .pi-grid__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 468px; gap: 24px; }
.vnat-app[data-page="places-interest"] .pi-card { position: relative; isolation: isolate; overflow: clip; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.vnat-app[data-page="places-interest"] .pi-card__image { position: relative; z-index: 2; display: block; height: 240px; background: var(--pi-cream); }
.vnat-app[data-page="places-interest"] .pi-card__image img { width: 100%; height: 100%; object-fit: cover; }
.vnat-app[data-page="places-interest"] .pi-card__save { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9999px; background: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(0,0,0,.05); backdrop-filter: blur(2px); cursor: pointer; }
.vnat-app[data-page="places-interest"] .pi-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 228px; padding: 24px; }
.vnat-app[data-page="places-interest"] .pi-card h3 { display: -webkit-box; height: 55px; margin-bottom: 9px; overflow: hidden; color: var(--pi-ink); font-family: var(--pi-serif-text); font-size: 20px; font-weight: 600; line-height: 27.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vnat-app[data-page="places-interest"] .pi-card h3 a { color: inherit; text-decoration: none; }
.vnat-app[data-page="places-interest"] .pi-card__body p { display: -webkit-box; height: 60px; margin-top: 8px; overflow: hidden; color: var(--pi-muted); font-size: 14px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.vnat-app[data-page="places-interest"] .pi-card__link { display: flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: auto; color: var(--pi-maroon); font-family: 'Noto Sans Display', Arial, sans-serif; font-size: 12px; font-stretch: 75%; font-weight: 600; letter-spacing: 1.2px; line-height: 16px; text-decoration: none; text-transform: uppercase; }
.vnat-app[data-page="places-interest"] .pi-card__link:hover span { text-decoration: underline; }

.vnat-app[data-page="places-interest"] .pi-pager { display: flex; align-items: center; justify-content: center; gap: 8px; height: 32px; margin-bottom: 32px; }
.vnat-app[data-page="places-interest"] .pi-pager__item { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--pi-red); border-radius: 9999px; background: #fff; color: var(--pi-red); font-family: 'Noto Sans Display', Arial, sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; text-decoration: none; }
.vnat-app[data-page="places-interest"] span.pi-pager__item { cursor: default; }
.vnat-app[data-page="places-interest"] .pi-pager__item.is-active { position: relative; z-index: 0; overflow: hidden; border-color: transparent; background: var(--pi-red); box-shadow: 0 1px 1px rgba(0,0,0,.05); color: #fff; }
.vnat-app[data-page="places-interest"] .pi-pager__item.is-active::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="places-interest"] a.pi-pager__item:focus-visible { outline: 2px solid var(--pi-maroon); outline-offset: 2px; }

@media (max-width: 991.98px) {
  .vnat-app[data-page="places-interest"] .pi-breadcrumb { padding-inline: 24px; }
  .vnat-app[data-page="places-interest"] .pi-head { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .vnat-app[data-page="places-interest"] .pi-head h1 { font-size: 44px; line-height: 50px; }
  .vnat-app[data-page="places-interest"] .pi-head__actions { width: 100%; max-width: none; }
  .vnat-app[data-page="places-interest"] .pi-button--primary { padding-inline: 24px; }
  .vnat-app[data-page="places-interest"] .pi-grid { padding: 24px; }
  .vnat-app[data-page="places-interest"] .pi-grid__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .vnat-app[data-page="places-interest"] .pi-grid__inner { grid-template-columns: minmax(0, 1fr); }
  .vnat-app[data-page="places-interest"] .pi-button--primary { white-space: normal; }
}
.vnat-app[data-page="places-interest"] .pi-button--share { position: relative; }
.vnat-app[data-page="places-interest"] .pi-button--share::after { position: absolute; inset: -2px; content: ''; }
.vnat-app[data-page="places-interest"] .pi-card__save::after,
.vnat-app[data-page="places-interest"] .pi-pager__item::after { position: absolute; inset: -6px; content: ''; }
.vnat-app[data-page="places-interest"] .pi-pager__item { position: relative; }
.vnat-app[data-page="places-interest"] .pi-pager__item.is-active { position: relative; }