/**
 * @file
 * Trang /places-to-go/{region}/{place} (bundle destination_detail) theo Figma 432:12570.
 * So do lay tu docs/figma-place-detail-spec.md. Moi selector nam duoi
 * Khong dung root selector toan cuc.
 */

.vnat-app[data-page="place-detail"] {
  /* Token mau theo advise §2.1 & spec */
  --vn-main: #a5190e;
  --vn-primary: #951c1f;
  --vn-price-symbol: #0c2340;
  --vn-panel-bg: #faf2ea;
  --vn-page-bg: linear-gradient(0deg, #FFFFFF 59.72%, #F5EDE6 100%), #F8F9FA;
  --vn-card-bg: #f9f9f9;
  --vn-card-border: #edeeec;
  --vn-chip-bg: #f6f7fa;
  --vn-chip-text: #4f5563;
  --vn-title: #121826;
  --vn-body: #404040;
  --vn-heading: #191919;
  --vn-label: #545454;
  --vn-rule: #e5dfd9;
  --vn-dot: #033d4a;
  --vn-card-fallback: #a20f09;
  --vn-overlay-hero: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 14.217%, rgba(0, 0, 0, 0.12) 100%);
  --vn-overlay-card: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 76.645%);

  /* Font families */
  --vn-font: 'SVN-Gotham', sans-serif;
  --vn-font-handwriting: 'Northwell', cursive;
  --vn-font-calsans: 'Cal Sans', sans-serif;
  --vn-font-inter: 'Inter', sans-serif;
  --vn-font-jakarta: 'Plus Jakarta Sans', sans-serif;

  /* Bo goc */
  --vn-radius-card: 16px;
  --vn-radius-panel: 16px;
  --vn-radius-mosaic: 12px;
  --vn-radius-hotel-card: 8px;
  --vn-radius-hotel-img: 12px;
  --vn-radius-pill: 9999px;

  font-family: var(--vn-font);
  color: #000000;
  background: var(--vn-page-bg);
  width: 100%;
}

.vnat-app[data-page="place-detail"] *,
.vnat-app[data-page="place-detail"] *::before,
.vnat-app[data-page="place-detail"] *::after {
  box-sizing: border-box;
}


/* ==========================================================================
   Hero Section (Figma 432:12572)
   1920x316, padding: 60px, content width 1240px
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-hero {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  height: auto;
  padding: 60px 0;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #121212;
}

.vnat-app[data-page="place-detail"] .vnat-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.vnat-app[data-page="place-detail"] .vnat-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--vn-overlay-hero);
  z-index: 2;
}

.vnat-app[data-page="place-detail"] .vnat-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.vnat-app[data-page="place-detail"] .vnat-hero__left {
  width: 600px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vnat-app[data-page="place-detail"] .vnat-hero__headings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vnat-app[data-page="place-detail"] .vnat-hero__eyebrow {
  font-family: var(--vn-font-handwriting);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -1.12px;
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.vnat-app[data-page="place-detail"] .vnat-hero__title {
  font-family: var(--vn-font);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -1.80px;
  line-height: 1.05;
  color: #ffffff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.vnat-app[data-page="place-detail"] .vnat-hero__desc {
  font-family: var(--vn-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.55;
  color: #ffffff;
  max-width: 600px;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Overview Strip (Figma 432:12836)
   1920x132.99, padding: 40px 360px, border-bottom: 1px solid #ccc
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-overview {
  width: 100%;
  padding: 40px 20px;
  border-bottom: 1px solid var(--vn-rule);
  background-color: transparent;
  display: flex;
  justify-content: center;
}

.vnat-app[data-page="place-detail"] .vnat-overview__inner {
  max-width: 1200px;
  width: 100%;
  display: flex;
  gap: 56px;
  justify-content: center;
  align-items: center;
}

.vnat-app[data-page="place-detail"] .vnat-overview__item {
  width: 362.67px;
  display: flex;
  flex-direction: column;
  gap: 3.99px;
  text-align: center;
}

.vnat-app[data-page="place-detail"] .vnat-overview__label {
  font-family: var(--vn-font-inter);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 22.4px;
  color: var(--vn-label);
}

.vnat-app[data-page="place-detail"] .vnat-overview__value {
  font-family: var(--vn-font-calsans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: 25.2px;
  color: var(--vn-heading);
}

/* ==========================================================================
   Section Content (Figma 432:12903)
   Container 1240px, padding-top 36px
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-content {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 36px;
}

/* ==========================================================================
   Gallery Mosaic (Figma 437:13428)
   1240x334, grid 4x2, gap 12px, border-radius 12px
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-mosaic {
  position: relative;
  width: 1240px;
  height: 334px;
  border-radius: var(--vn-radius-mosaic);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

.vnat-app[data-page="place-detail"] .vnat-mosaic__item {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
  cursor: pointer;
}

.vnat-app[data-page="place-detail"] .vnat-mosaic__item:first-child {
  grid-area: 1 / 1 / 3 / 3;
}

.vnat-app[data-page="place-detail"] .vnat-mosaic__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.vnat-app[data-page="place-detail"] .vnat-mosaic__item:hover .vnat-mosaic__img {
  transform: scale(1.03);
}

.vnat-app[data-page="place-detail"] .vnat-mosaic__btn {
  position: absolute;
  right: 10px;
  bottom: 11.66px;
  z-index: 5;
  background: #ffffff;
  border: 1px solid rgba(27, 28, 31, 0.5);
  border-radius: var(--vn-radius-pill);
  min-height: 44px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
  cursor: pointer;
  text-decoration: none;
}

.vnat-app[data-page="place-detail"] .vnat-mosaic__btn:hover {
  background-color: #f6f7fa;
  text-decoration: none;
}

.vnat-app[data-page="place-detail"] .vnat-mosaic__btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

.vnat-app[data-page="place-detail"] .vnat-mosaic__btn-text {
  font-family: var(--vn-font-jakarta);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.42px;
  line-height: 1.5;
  color: #000000;
  white-space: nowrap;
}

/* ==========================================================================
   About & Why Visit Blocks (Figma 432:12904)
   Max-width 1200px, 2-column layout (320px sticky left / 832px right)
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-editorial {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.vnat-app[data-page="place-detail"] .vnat-block {
  display: flex;
  gap: 48px;
  width: 100%;
  position: relative;
}

.vnat-app[data-page="place-detail"] .vnat-block__left {
  width: 320px;
  max-width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}

.vnat-app[data-page="place-detail"] .vnat-block__dot {
  width: 20px;
  height: 20px;
  border-radius: 152px;
  background-color: var(--vn-dot);
  flex-shrink: 0;
}

.vnat-app[data-page="place-detail"] .vnat-block__heading {
  font-family: var(--vn-font-calsans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.20px;
  line-height: 26px;
  color: var(--vn-heading);
  margin: 0;
}

.vnat-app[data-page="place-detail"] .vnat-block__right {
  width: 832px;
  max-width: 832px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vnat-app[data-page="place-detail"] .vnat-about__headline {
  font-family: var(--vn-font-calsans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.20px;
  line-height: 26px;
  color: #000000;
  margin: 0;
}

.vnat-app[data-page="place-detail"] .vnat-about__body {
  font-family: var(--vn-font-inter);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 22.4px;
  color: var(--vn-body);
}

.vnat-app[data-page="place-detail"] .vnat-about__body p {
  margin-top: 0;
  margin-bottom: 0;
}

.vnat-app[data-page="place-detail"] .vnat-about__body p:first-child {
  padding-top: 20px;
}

.vnat-app[data-page="place-detail"] .vnat-about__body p:not(:first-child) {
  padding-top: 19.4px;
}

.vnat-app[data-page="place-detail"] .vnat-about__figure {
  width: 832px;
  height: 516.13px;
  border-radius: 24px;
  object-fit: cover;
  display: block;
}

.vnat-app[data-page="place-detail"] .vnat-why__headline {
  font-family: var(--vn-font-calsans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.20px;
  line-height: 26px;
  color: #000000;
  margin-top: 40px;
  padding-bottom: 26px;
  margin-bottom: 0;
}

.vnat-app[data-page="place-detail"] .vnat-why__list {
  padding-left: 20.19px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vnat-app[data-page="place-detail"] .vnat-why__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--vn-font-inter);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 22.4px;
  color: var(--vn-body);
}

.vnat-app[data-page="place-detail"] .vnat-why__bullet {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--vn-body);
}

/* ==========================================================================
   Nearby Places Section (Figma 432:12595)
   Full-bleed, padding: 36px 0 24px, inner 1240px
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-nearby {
  width: 100%;
  padding: 36px 0 24px;
}

.vnat-app[data-page="place-detail"] .vnat-nearby__inner {
  width: 1240px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vnat-app[data-page="place-detail"] .vnat-nearby__title {
  font-family: var(--vn-font);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1.28px;
  line-height: 1.5;
  color: var(--vn-primary);
  margin: 0;
}

.vnat-app[data-page="place-detail"] .vnat-nearby__row {
  display: flex;
  gap: 24px;
  width: 1240px;
  max-width: 100%;
  justify-content: flex-start;
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}

.vnat-app[data-page="place-detail"] .vnat-place {
  flex: 0 0 calc((100% - 72px) / 4);
  max-width: calc((100% - 72px) / 4);
  height: 133px;
  border-radius: var(--vn-radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  position: relative;
  overflow: hidden;
  background-color: var(--vn-card-fallback);
  text-decoration: none;
  box-sizing: border-box;
}

.vnat-app[data-page="place-detail"] .vnat-place:hover {
  text-decoration: none;
}

.vnat-app[data-page="place-detail"] .vnat-place__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.3s ease;
}

.vnat-app[data-page="place-detail"] .vnat-place:hover .vnat-place__img {
  transform: scale(1.05);
}

.vnat-app[data-page="place-detail"] .vnat-place__overlay {
  position: absolute;
  inset: 0;
  background: var(--vn-overlay-card);
  z-index: 2;
}

.vnat-app[data-page="place-detail"] .vnat-place__name {
  position: relative;
  z-index: 3;
  font-family: var(--vn-font-handwriting);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -1.92px;
  line-height: 1.35;
  color: #ffffff;
  text-transform: capitalize;
  margin: 0;
}

/* ==========================================================================
   Banner AI Section (Figma 437:13275)
   1240x97, padding 24px, border-radius 16px, background #faf2ea
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-ai-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 16px;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 1240px;
  max-width: 100%;
  min-height: 97px;
  padding: 24px;
  border-radius: var(--vn-radius-panel);
  background-color: var(--vn-panel-bg);
  border: 1px solid rgba(165, 25, 14, 0.1);
  overflow: visible;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--vn-radius-panel);
  background: url(../images/booking/esim-banner-texture.webp) top left / 1512px 400px;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__left {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 32px;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 333px;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__title {
  margin: 0;
  font-family: var(--vn-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.96px;
  color: var(--vn-primary);
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__sub {
  margin: 0;
  font-family: var(--vn-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.42px;
  color: #333333;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 10px;
  background-color: var(--vn-primary);
  font-family: var(--vn-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: -0.42px;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__btn:hover {
  opacity: 0.9;
  text-decoration: none;
  color: #ffffff;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__btn-icon {
  width: 16px;
  height: 16px;
  background: url(../images/booking/icon-arrow-up-right.svg) center / 9.6px 9.6px no-repeat;
  display: inline-block;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__deco {
  position: absolute;
  right: 0;
  top: -31px;
  width: 172px;
  height: 128px;
  pointer-events: none;
  z-index: 3;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__photo {
  position: absolute;
  border: 2.638px solid #ffffff;
  border-radius: 1.758px;
  box-shadow: 0 6.647px 7.913px 1.108px rgba(0, 0, 0, 0.15);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__photo--a {
  left: 5px;
  top: 26px;
  width: 81.444px;
  height: 81.444px;
  transform: rotate(-6deg);
  background-image: url(../images/booking/esim-banner-photo-1.webp);
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__photo--b {
  left: 55.925px;
  top: 17.855px;
  width: 88.941px;
  height: 88.941px;
  transform: rotate(6deg);
  background-image: url(../images/booking/esim-banner-photo-2.webp);
}

.vnat-app[data-page="place-detail"] .vnat-ai-banner__tape {
  position: absolute;
  left: 70.949px;
  top: 5.838px;
  width: 69.514px;
  height: 24.161px;
  transform: rotate(8.21deg);
  background: url(../images/booking/esim-banner-tape.webp) center / contain no-repeat;
}

/* ==========================================================================
   Local Highlights Section (Figma 432:12981)
   Wrap 1240px, padding: 24px 0, panel #faf2ea with pattern
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-hl-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.vnat-app[data-page="place-detail"] .vnat-hl-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(165, 25, 14, 0.1);
  background: #faf2ea;
  box-sizing: border-box;
  overflow: hidden;
}

.vnat-app[data-page="place-detail"] .vnat-hl-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: url(../images/booking/esim-banner-texture.webp) top left / 1512px 400px;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.vnat-app[data-page="place-detail"] .vnat-hl-panel__header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vnat-app[data-page="place-detail"] .vnat-hl-panel__title {
  margin: 0;
  font-family: var(--vn-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.54px;
  line-height: 1.5;
  color: #a5190e;
}

.vnat-app[data-page="place-detail"] .vnat-hl-panel__sub {
  margin: 0;
  font-family: var(--vn-font-book);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.42px;
  line-height: 1.5;
  color: #000000;
}

.vnat-app[data-page="place-detail"] .vnat-hl-panel__row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  width: 100%;
}

.vnat-app[data-page="place-detail"] .vnat-hl-card {
  flex: 0 0 calc((100% - 36px) / 4);
  max-width: calc((100% - 36px) / 4);
  min-width: 0;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vnat-app[data-page="place-detail"] a.vnat-hl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vnat-app[data-page="place-detail"] .vnat-hl-card__media {
  margin: 12px 12px 0;
  height: 135px;
  border-radius: 10px;
  overflow: hidden;
}

.vnat-app[data-page="place-detail"] .vnat-hl-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vnat-app[data-page="place-detail"] .vnat-hl-card__body {
  padding: 12px 12px 16px;
  display: flex;
  align-items: center;
}

.vnat-app[data-page="place-detail"] .vnat-hl-card__name {
  margin: 0;
  font-family: var(--vn-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.48px;
  line-height: 1.2;
  color: #121826;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Hotels nearby & Attractions nearby Section (Figma 437:13292, 437:13300)
   Card 177:3376 (291 × 292), min-height: 292px
   ========================================================================== */
.vnat-app[data-page="place-detail"] .vnat-cards-wrap {
  width: 1240px;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.vnat-app[data-page="place-detail"] .vnat-cards-wrap--hotels {
  padding-bottom: 16px;
  margin-bottom: 0;
}

.vnat-app[data-page="place-detail"] .vnat-cards-wrap--attractions {
  padding-top: 0;
  padding-bottom: 16px;
}
.vnat-app[data-page="place-detail"] .vnat-cards-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.vnat-app[data-page="place-detail"] .vnat-cards-heading {
  margin: 0;
  font-family: var(--vn-font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.72px;
  line-height: 1.2;
  color: #000000;
}

.vnat-app[data-page="place-detail"] .vnat-cards-row {
  display: flex;
  gap: 24px;
  width: 100%;
}

.vnat-app[data-page="place-detail"] .vnat-card {
  flex: 0 0 calc((100% - 72px) / 4);
  max-width: calc((100% - 72px) / 4);
  min-width: 0;
  min-height: 292px;
  background: #f9f9f9;
  border: 1px solid #edeeec;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vnat-app[data-page="place-detail"] a.vnat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vnat-app[data-page="place-detail"] .vnat-card__media {
  position: relative;
  height: 180px;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  background: #edeeec;
}

.vnat-app[data-page="place-detail"] .vnat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vnat-app[data-page="place-detail"] .vnat-card__heart {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.vnat-app[data-page="place-detail"] .vnat-card__heart img {
  width: 32px;
  height: 32px;
  display: block;
}

.vnat-app[data-page="place-detail"] .vnat-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  gap: 12px;
}

.vnat-app[data-page="place-detail"] .vnat-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vnat-app[data-page="place-detail"] .vnat-card__title {
  margin: 0;
  font-family: var(--vn-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.48px;
  line-height: 1.35;
  color: #121826;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vnat-app[data-page="place-detail"] .vnat-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vnat-app[data-page="place-detail"] .vnat-card__chip {
  background: #f6f7fa;
  border-radius: 4px;
  padding: 4px 6px;
  font-family: var(--vn-font-book);
  font-size: 11px;
  letter-spacing: -0.33px;
  line-height: 1.5;
  color: #4f5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.vnat-app[data-page="place-detail"] .vnat-card__price {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin-top: auto;
}

.vnat-app[data-page="place-detail"] .vnat-card__price-approx {
  font-family: var(--vn-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.54px;
  color: #0c2340;
  line-height: 1;
}

.vnat-app[data-page="place-detail"] .vnat-card__price-amount {
  font-family: var(--vn-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.48px;
  line-height: 26px;
  color: #121826;
}

/* ==========================================================================
   Responsive Breakpoints (Figma Place Detail)
   Layer 2: <= 1239px (Tablet / Laptop nho) & <= 767px (Mobile)
   ========================================================================== */
@media (max-width: 1239px) {
  /* Hero */
  .vnat-app[data-page="place-detail"] .vnat-hero {
    height: auto;
    min-height: 280px;
    padding: 40px 24px;
  }

  .vnat-app[data-page="place-detail"] .vnat-hero__inner {
    width: 100%;
    padding-inline: 0;
  }

  .vnat-app[data-page="place-detail"] .vnat-hero__left {
    width: 100%;
    max-width: 100%;
  }

  .vnat-app[data-page="place-detail"] .vnat-hero__title {
    font-size: 40px;
  }

  /* Overview strip */
  .vnat-app[data-page="place-detail"] .vnat-overview {
    padding: 32px 24px;
  }

  .vnat-app[data-page="place-detail"] .vnat-overview__inner {
    width: 100%;
    gap: 32px;
  }

  .vnat-app[data-page="place-detail"] .vnat-overview__item {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Content & Mosaic */
  .vnat-app[data-page="place-detail"] .vnat-content {
    width: 100%;
    padding: 24px 20px;
  }

  .vnat-app[data-page="place-detail"] .vnat-mosaic {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 150px 150px;
  }

  /* Editorial */
  .vnat-app[data-page="place-detail"] .vnat-editorial {
    width: 100%;
  }

  .vnat-app[data-page="place-detail"] .vnat-block {
    gap: 32px;
  }

  .vnat-app[data-page="place-detail"] .vnat-block__left {
    width: 320px;
    flex-shrink: 0;
  }

  .vnat-app[data-page="place-detail"] .vnat-block__right {
    flex: 1 1 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .vnat-app[data-page="place-detail"] .vnat-about__figure {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Nearby Places */
  .vnat-app[data-page="place-detail"] .vnat-nearby__inner {
    width: 100%;
    padding-inline: 20px;
  }

  .vnat-app[data-page="place-detail"] .vnat-nearby__row {
    flex-wrap: wrap;
    gap: 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-nearby__row .vnat-place {
    flex: 0 0 calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }

  /* Banner AI */
  .vnat-app[data-page="place-detail"] .vnat-ai-wrap {
    width: 100%;
    padding-inline: 20px;
  }

  .vnat-app[data-page="place-detail"] .vnat-ai-banner__deco {
    display: none;
  }

  .vnat-app[data-page="place-detail"] .vnat-ai-banner__left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Local Highlights */
  .vnat-app[data-page="place-detail"] .vnat-hl-wrap {
    width: 100%;
    padding: 24px 20px;
  }

  .vnat-app[data-page="place-detail"] .vnat-hl-panel__row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .vnat-app[data-page="place-detail"] .vnat-hl-card {
    flex: 0 0 calc((100% - 12px) / 2);
    min-width: calc((100% - 12px) / 2);
  }

  /* Hotels & Attractions nearby */
  .vnat-app[data-page="place-detail"] .vnat-cards-wrap {
    width: 100%;
    padding: 24px 20px;
  }

  .vnat-app[data-page="place-detail"] .vnat-cards-row {
    flex-wrap: wrap;
    gap: 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-card {
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: calc((100% - 16px) / 2);
  }
}

@media (max-width: 767px) {
  /* Hero */
  .vnat-app[data-page="place-detail"] .vnat-hero {
    padding: 30px 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-hero__eyebrow {
    font-size: 14px;
  }

  .vnat-app[data-page="place-detail"] .vnat-hero__title {
    font-size: 32px;
  }

  .vnat-app[data-page="place-detail"] .vnat-hero__desc {
    font-size: 16px;
  }

  /* Overview strip: xep doc */
  .vnat-app[data-page="place-detail"] .vnat-overview {
    padding: 24px 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-overview__inner {
    flex-direction: column;
    gap: 20px;
  }

  .vnat-app[data-page="place-detail"] .vnat-overview__item {
    width: 100%;
  }

  /* Content & Mosaic: 2 cot x 3 hang */
  .vnat-app[data-page="place-detail"] .vnat-content {
    padding: 20px 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 180px 120px 120px;
    gap: 8px;
    height: auto;
  }

  .vnat-app[data-page="place-detail"] .vnat-mosaic__item:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .vnat-app[data-page="place-detail"] .vnat-mosaic__item:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .vnat-app[data-page="place-detail"] .vnat-mosaic__item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .vnat-app[data-page="place-detail"] .vnat-mosaic__item:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .vnat-app[data-page="place-detail"] .vnat-mosaic__item:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .vnat-app[data-page="place-detail"] .vnat-mosaic__btn {
    bottom: 12px;
    right: 12px;
    padding: 6px 10px;
  }

  /* Editorial: xep doc, bo sticky */
  .vnat-app[data-page="place-detail"] .vnat-block {
    flex-direction: column;
    gap: 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-block__left {
    position: static;
    top: auto;
    width: 100%;
  }

  .vnat-app[data-page="place-detail"] .vnat-block__heading {
    font-size: 24px;
  }

  .vnat-app[data-page="place-detail"] .vnat-about__body {
    font-size: 15px;
    line-height: 1.6;
  }

  .vnat-app[data-page="place-detail"] .vnat-about__body img,
  .vnat-app[data-page="place-detail"] .vnat-about__body table {
    max-width: 100% !important;
    height: auto !important;
  }

  .vnat-app[data-page="place-detail"] .vnat-about__body table {
    display: block;
    overflow-x: auto;
  }

  /* Nearby Places */
  .vnat-app[data-page="place-detail"] .vnat-nearby__inner {
    padding-inline: 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-nearby__row .vnat-place {
    flex: 0 0 calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }

  .vnat-app[data-page="place-detail"] .vnat-nearby__row .vnat-place__name {
    font-size: 36px;
  }

  /* Banner AI: full width button */
  .vnat-app[data-page="place-detail"] .vnat-ai-wrap {
    padding-inline: 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-ai-banner__btn {
    width: 100%;
    justify-content: center;
  }

  /* Local Highlights: 1 cot */
  .vnat-app[data-page="place-detail"] .vnat-hl-wrap {
    padding: 20px 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-hl-panel__row {
    flex-direction: column;
  }

  .vnat-app[data-page="place-detail"] .vnat-hl-card {
    flex: 0 0 100%;
    min-width: 100%;
  }

  /* Hotels & Attractions nearby: 1 cot, bo min-height */
  .vnat-app[data-page="place-detail"] .vnat-cards-wrap {
    padding: 20px 16px;
  }

  .vnat-app[data-page="place-detail"] .vnat-cards-row {
    flex-direction: column;
  }

  .vnat-app[data-page="place-detail"] .vnat-card {
    flex: 0 0 100%;
    min-width: 100%;
    min-height: auto;
  }
}

.vnat-app[data-page="place-detail"] :where(h1, h2, h3, h4, h5, p, span, b, a, button, input, select, label, article, header, div) {
  font-family: inherit;
}

/* main.css khong scope nen [hidden] de bi ghi de; ngoai le !important duy nhat de dam bao an panel/card */
.vnat-app[data-page="place-detail"] [hidden] {
  display: none !important;
}