/**
 * VanPhuc Heritage Luxury — Master UI Components Stylesheet (components.css)
 * Covers: Homepage 8 Sections, Ritual & Post Cards, Accessible Tabs, Container-Query Tables,
 * FAQ Accordions, Service Hero, UX Shortcode Compiler Grid/Tabs/Galleries/Collapse,
 * Lunar Calendar App, Single Post 2-Col Magazine, Archive Filter Bar, Search & 404 States.
 *
 * Strict Guardrails:
 * - Zero !important declarations
 * - Card / container border-radius <= 16px everywhere
 * - Equal-height grid cards (align-items: stretch + height: 100% flex column)
 * - WCAG 2.5.8 >= 44px interactive touch targets
 * - Zero horizontal overflow from 390px Mobile to 1440px+ Desktop
 */

@property --fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* ==========================================================================
   1. SHARED SECTION PRIMITIVES, EYEBROWS & ROYAL CORNER ACCENTS
   ========================================================================== */

.vp-home {
  inline-size: 100%;
}

.vp-anchor-alias {
  display: block;
  block-size: 0;
  visibility: hidden;
  scroll-margin-top: 5.5rem;
}

.vp-section {
  position: relative;
  padding-block: clamp(44px, 6dvw, 80px);
}

.vp-section--alt {
  background: var(--vp-surface-alt);
  border-block: 1px solid var(--vp-border);
}

.vp-section--concierge {
  padding-block: clamp(32px, 4.5dvw, 56px);
}

.vp-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-end: clamp(24px, 3.5dvw, 38px);
  max-inline-size: 780px;
}

.vp-section-head--split {
  max-inline-size: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 960px) {
  .vp-section-head--split {
    flex-direction: row;
    align-items: flex-end;
    gap: 32px;
  }

  .vp-section-head--split .vp-section-head__main {
    max-inline-size: 680px;
  }

  .vp-section-head--split .vp-section-head__aside {
    max-inline-size: 440px;
    margin-block: 0;
  }
}

.vp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vp-crimson);
  margin-block-end: 6px;
}

.vp-eyebrow-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--vp-radius-sm);
  background: var(--vp-crimson-soft);
  border: 1px solid rgba(153, 27, 27, 0.18);
  color: var(--vp-crimson);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.vp-eyebrow-seal svg {
  flex-shrink: 0;
}

.vp-section-title {
  font-size: clamp(1.5rem, 2.7dvw, 2.15rem);
  line-height: 1.24;
  font-weight: 800;
  color: var(--vp-ink);
  margin-block: 0;
}

.vp-section-desc,
.vp-section-head__aside {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--vp-body);
  margin-block: 8px 0;
}

/* Subtle 40x40 Vietnamese Royal Corner Line Accent (Dominant Cards Only) */
.vp-corner-accent {
  position: absolute;
  inline-size: 36px;
  block-size: 36px;
  color: rgba(180, 83, 9, 0.42);
  pointer-events: none;
  z-index: 2;
}

.vp-corner-accent--tl {
  inset-block-start: 10px;
  inset-inline-start: 10px;
}

.vp-corner-accent--tr {
  inset-block-start: 10px;
  inset-inline-end: 10px;
  transform: rotate(90deg);
}

.vp-corner-accent--br {
  inset-block-end: 10px;
  inset-inline-end: 10px;
  transform: rotate(180deg);
}

.vp-corner-accent--bl {
  inset-block-end: 10px;
  inset-inline-start: 10px;
  transform: rotate(270deg);
}

/* Calm Jade Outline Button for Secondary Zalo Action (Preserves Single Primary CTA) */
.vp-btn--zalo-outline {
  background: var(--vp-surface);
  color: var(--vp-jade);
  border-color: rgba(6, 95, 70, 0.28);
}

.vp-btn--zalo-outline:hover {
  background: var(--vp-jade-soft);
  color: var(--vp-jade-hover);
  border-color: rgba(6, 95, 70, 0.45);
}

/* ==========================================================================
   2. HOMEPAGE SECTION 1 — HERO BENTO 12-COL & LIVE LUNAR ALMANAC STRIP
   ========================================================================== */

.vp-hero {
  padding-block: clamp(28px, 4.5dvw, 56px);
  background: linear-gradient(155deg, var(--vp-bg) 0%, var(--vp-surface-alt) 100%);
  border-block-end: 1px solid var(--vp-border);
}

.vp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3dvw, 36px);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .vp-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .vp-hero__content {
    grid-column: span 7;
  }

  .vp-hero__showcase {
    grid-column: span 5;
  }
}

.vp-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-inline-size: 0;
}

.vp-hero__title {
  font-size: clamp(1.75rem, 3.25dvw, 2.75rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vp-ink);
  margin-block: 0;
}

.vp-hero__lead {
  font-size: clamp(0.96875rem, 1.15dvw, 1.0625rem);
  line-height: 1.72;
  color: var(--vp-body);
  margin-block: 0;
  max-inline-size: 64ch;
}

.vp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (max-width: 560px) {
  .vp-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vp-hero__actions .vp-btn {
    inline-size: 100%;
    white-space: normal;
    text-align: center;
  }
}

.vp-hero__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-block-start: 4px;
}

@media (max-width: 374px) {
  .vp-hero__metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vp-metric-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  block-size: 100%;
  min-inline-size: 0;
  padding: 14px 16px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  box-shadow: var(--vp-shadow-sm);
}

.vp-metric-tile__icon {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--vp-radius-sm);
  background: var(--vp-crimson-soft);
  color: var(--vp-crimson);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vp-metric-tile__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.vp-metric-tile__value {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vp-ink);
}

.vp-metric-tile__label {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--vp-muted);
}

/* Right Showcase Card */
.vp-hero__showcase {
  display: flex;
  min-inline-size: 0;
}

.vp-showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  inline-size: 100%;
  block-size: 100%;
  padding: 18px;
  background: var(--vp-surface);
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: var(--vp-radius-lg);
  box-shadow: var(--vp-shadow-md);
}

.vp-showcase-card__media {
  margin: 0;
  border-radius: var(--vp-radius-md);
  overflow: hidden;
  background: var(--vp-surface-alt);
  border: 1px solid var(--vp-border);
}

.vp-showcase-card__media img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.vp-showcase-card__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--vp-surface);
  border-block-start: 1px solid var(--vp-border);
}

.vp-showcase-card__caption-note {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vp-muted);
}

/* Live Lunar Almanac Strip */
.vp-almanac-strip {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vp-almanac-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--vp-border);
}

.vp-almanac-strip__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--vp-ink);
}

.vp-almanac-strip__title svg {
  color: var(--vp-crimson);
}

.vp-almanac-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 36px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--vp-crimson);
  text-decoration: none;
}

.vp-almanac-strip__link:hover {
  text-decoration: underline;
}

.vp-almanac-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

@media (max-width: 420px) {
  .vp-almanac-strip__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vp-almanac-strip__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.vp-almanac-strip__cell--wide {
  grid-column: 1 / -1;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--vp-border);
  gap: 4px;
}

.vp-almanac-strip__k {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--vp-muted);
}

.vp-almanac-strip__v {
  font-size: 0.90625rem;
  font-weight: 700;
  color: var(--vp-ink);
  line-height: 1.35;
}

.vp-almanac-strip__v--crimson {
  color: var(--vp-crimson);
}

.vp-almanac-strip__hours {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vp-jade);
  line-height: 1.45;
}

.vp-almanac-strip__hours svg {
  flex-shrink: 0;
  margin-block-start: 2px;
}

/* ==========================================================================
   3. ACCESSIBLE TABS ([focusgroup~="tablist"], .vp-tablist, .vp-ux-tabs)
   ========================================================================== */

.vp-tabs,
.vp-ux-tabs {
  inline-size: 100%;
}

.vp-tablist,
[focusgroup~="tablist"],
.vp-ux-tabs [role="tablist"],
.vp-ux-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: inline proximity;
  scroll-padding-inline: 2.5rem;
  scrollbar-width: none;
  border-block-end: 1px solid var(--vp-border-strong);
  margin-block: 0;
  padding-block: 0;
  padding-inline: 0;
  list-style: none;
  --fade-size: 2.5rem;
  --fade-dir: right;
  --fade-start-pos: 0;
  --fade-end-pos: 100%;
  mask:
    linear-gradient(#000, #000) no-clip subtract,
    linear-gradient(to var(--fade-dir), #000, transparent) var(--fade-start-pos) 0 / var(--fade-start) 100% no-repeat no-clip,
    linear-gradient(to var(--fade-dir), transparent, #000) var(--fade-end-pos) 0 / var(--fade-end) 100% no-repeat no-clip;
  animation: vp-reveal-fade-start linear both, vp-hide-fade-end linear both;
  animation-timeline: scroll(self inline);
  animation-range: 0 var(--fade-size), calc(100% - var(--fade-size)) 100%;
}

.vp-tablist::-webkit-scrollbar,
[focusgroup~="tablist"]::-webkit-scrollbar,
.vp-ux-tabs__list::-webkit-scrollbar {
  display: none;
}

@keyframes vp-reveal-fade-start {
  to {
    --fade-start: var(--fade-size);
  }
}

@keyframes vp-hide-fade-end {
  from {
    --fade-end: var(--fade-size);
  }
}

@supports not (animation-timeline: scroll()) {
  .vp-tablist,
  [focusgroup~="tablist"],
  .vp-ux-tabs__list {
    mask: none;
  }
}

.vp-tab,
[focusgroup~="tablist"] > button,
.vp-ux-tabs [role="tab"],
.vp-ux-tabs__tab {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 48px;
  padding-inline: 16px;
  padding-block: 10px;
  background: transparent;
  border: 0;
  border-radius: var(--vp-radius-sm) var(--vp-radius-sm) 0 0;
  color: var(--vp-muted);
  font-family: var(--vp-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.vp-tab:hover,
[focusgroup~="tablist"] > button:hover,
.vp-ux-tabs [role="tab"]:hover,
.vp-ux-tabs__tab:hover {
  color: var(--vp-ink);
  background: rgba(28, 25, 23, 0.035);
}

/* Selected Tab: WCAG 1.4.1 non-color 3px border underline without shifting layout box */
.vp-tab[aria-selected="true"],
[focusgroup~="tablist"] > button[aria-selected="true"],
.vp-ux-tabs [role="tab"][aria-selected="true"],
.vp-ux-tabs__tab[aria-selected="true"] {
  color: var(--vp-crimson);
}

.vp-tab[aria-selected="true"]::after,
[focusgroup~="tablist"] > button[aria-selected="true"]::after,
.vp-ux-tabs [role="tab"][aria-selected="true"]::after,
.vp-ux-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  border-block-end: 3px solid var(--vp-crimson);
}

.vp-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 24px;
  block-size: 22px;
  padding-inline: 7px;
  border-radius: var(--vp-radius-pill);
  background: var(--vp-surface-alt);
  color: var(--vp-muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vp-tab[aria-selected="true"] .vp-tab__count {
  background: var(--vp-crimson-soft);
  color: var(--vp-crimson);
}

/* Tab Panels: ZERO padding/border/margin on [role="tabpanel"] so hidden="until-found" collapses to 0px */
.vp-tabpanels,
.vp-ux-tabs__panels {
  display: block;
  margin: 0;
  padding: 0;
}

.vp-tabpanel,
[role="tabpanel"],
.vp-ux-tabs__panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.vp-tabpanel-inner,
.vp-ux-tabs__panel-inner {
  padding-block-start: clamp(20px, 2.8dvw, 28px);
}

/* ==========================================================================
   4. EQUAL-HEIGHT BENTO CARDS (.vp-ritual-card & .vp-post-card)
   ========================================================================== */

.vp-ritual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2dvw, 24px);
  align-items: stretch;
}

@media (min-width: 640px) {
  .vp-ritual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .vp-ritual-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1240px) {
  .vp-ritual-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vp-ritual-card,
.vp-post-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  block-size: 100%;
  min-inline-size: 0;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  overflow: hidden;
  box-shadow: var(--vp-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.vp-ritual-card:hover,
.vp-post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vp-shadow-md);
  border-color: rgba(153, 27, 27, 0.22);
}

.vp-ritual-card__top,
.vp-post-card__top {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.vp-card__media,
.vp-ritual-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--vp-surface-alt);
}

.vp-card__media img,
.vp-ritual-card__media img,
.vp-ritual-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.vp-ritual-card:hover .vp-card__media img,
.vp-ritual-card:hover .vp-ritual-card__img,
.vp-post-card:hover .vp-card__media img {
  transform: scale(1.03);
}

.vp-card__badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 5px 11px;
  border-radius: var(--vp-radius-pill);
  background: rgba(28, 25, 23, 0.84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
}

.vp-ritual-card__body,
.vp-post-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 14px;
  flex: 1 1 auto;
}

.vp-ritual-card__title,
.vp-post-card__title {
  font-size: 1.0625rem;
  line-height: 1.38;
  font-weight: 700;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-ritual-card__title a,
.vp-post-card__title a {
  color: var(--vp-ink);
  text-decoration: none;
}

.vp-ritual-card__title a:hover,
.vp-post-card__title a:hover {
  color: var(--vp-crimson);
}

.vp-ritual-card__desc,
.vp-post-card__excerpt {
  font-size: 0.895rem;
  line-height: 1.6;
  color: var(--vp-body);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-ritual-card > .vp-ritual-card__footer,
.vp-post-card > .vp-post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px 16px;
  border-block-start: 1px solid var(--vp-border);
  background: var(--vp-surface);
}

.vp-price-pill {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
}

.vp-price-pill__label {
  font-size: 0.71875rem;
  font-weight: 600;
  color: var(--vp-muted);
}

.vp-price-pill__value,
.vp-ritual-card__price {
  font-size: 0.96875rem;
  font-weight: 800;
  color: var(--vp-crimson);
  font-variant-numeric: tabular-nums;
}

.vp-ritual-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.vp-ritual-card__link,
.vp-ritual-card__more,
.vp-post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 44px;
  padding-inline: 6px;
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--vp-ink);
  text-decoration: none;
  white-space: nowrap;
}

.vp-ritual-card__link:hover,
.vp-ritual-card__more:hover,
.vp-post-card__more:hover {
  color: var(--vp-crimson);
}

.vp-ritual-card .vp-icon-btn {
  border-radius: var(--vp-radius-md);
  background: var(--vp-jade-soft);
  border-color: rgba(6, 95, 70, 0.22);
  color: var(--vp-jade);
}

.vp-ritual-card .vp-icon-btn:hover {
  background: var(--vp-jade);
  border-color: var(--vp-jade);
  color: #FFFFFF;
}

/* Editorial Journal Cards (Section 7 & Archives) */
.vp-category-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vp-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding: 8px 16px;
  border-radius: var(--vp-radius-pill);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border-strong);
  color: var(--vp-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.vp-cat-pill:hover,
.vp-cat-pill[aria-current="page"] {
  background: var(--vp-crimson);
  border-color: var(--vp-crimson);
  color: #FFFFFF;
}

.vp-post-grid,
.vp-archive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.2dvw, 24px);
  align-items: stretch;
}

@media (min-width: 640px) {
  .vp-post-grid,
  .vp-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .vp-post-grid,
  .vp-archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.vp-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vp-post-card__cat {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--vp-radius-pill);
  background: var(--vp-crimson-soft);
  color: var(--vp-crimson);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.vp-post-card__read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--vp-muted);
}

.vp-post-card__date {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--vp-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. RESPONSIVE 3-TIER PRICING COMPARISON TABLE (@container < 640px)
   ========================================================================== */

.vp-table-region {
  overflow: auto;
  max-inline-size: 100%;
  container-type: inline-size;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border-strong);
  border-radius: var(--vp-radius-lg);
  box-shadow: var(--vp-shadow-sm);
}

.vp-tier-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  --label-2: "Gói Tiết Kiệm (1,19tr – 1,69tr)";
  --label-3: "Gói Tiêu Chuẩn (1,96tr – 3,21tr)";
  --label-4: "Gói VIP Hoàng Gia (3,89tr – 5,89tr)";
}

.vp-tier-caption {
  padding: 14px 20px;
  text-align: left;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--vp-muted);
  background: var(--vp-bg);
  border-block-end: 1px solid var(--vp-border);
}

.vp-tier-table thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}

.vp-tier-table thead th {
  padding: 18px 20px;
  text-align: left;
  vertical-align: bottom;
  background: var(--vp-ink);
  color: #FFFFFF;
  font-weight: 700;
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}

.vp-tier-table thead th.is-featured {
  background: var(--vp-crimson);
}

.vp-tier-head__badge {
  display: inline-block;
  margin-block-end: 6px;
  padding: 2px 9px;
  border-radius: var(--vp-radius-pill);
  background: var(--vp-gold-soft);
  color: var(--vp-gold-ink);
  font-size: 0.71875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vp-tier-head__name {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.vp-tier-head__price {
  display: block;
  margin-block-start: 4px;
  font-size: 0.84375rem;
  font-weight: 600;
  opacity: 0.92;
  font-variant-numeric: tabular-nums;
}

.vp-tier-table tbody th,
.vp-tier-table tbody td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-block-end: 1px solid var(--vp-border);
  line-height: 1.55;
}

.vp-tier-table tbody tr:last-child th,
.vp-tier-table tbody tr:last-child td {
  border-block-end: 0;
}

.vp-tier-table tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--vp-surface);
  color: var(--vp-ink);
  font-weight: 700;
  inline-size: 24%;
}

.vp-tier-table tbody tr:nth-child(even) th {
  background: var(--vp-bg);
}

.vp-tier-table tbody tr:nth-child(even) td {
  background: rgba(250, 247, 242, 0.65);
}

.vp-tier-table tbody td.is-featured {
  background: rgba(153, 27, 27, 0.045);
  color: var(--vp-ink);
  font-weight: 500;
}

/* Container Query Stacked Layout (< 640px) — Zero Horizontal Overflow on Mobile */
@container (width < 640px) {
  .vp-tier-table,
  .vp-tier-table thead,
  .vp-tier-table tbody,
  .vp-tier-table tr,
  .vp-tier-table th,
  .vp-tier-table td {
    display: block;
    inline-size: 100%;
  }

  .vp-tier-table thead {
    display: none;
  }

  .vp-tier-caption {
    display: block;
    padding: 14px 16px;
  }

  .vp-tier-table tbody {
    padding: 12px;
  }

  .vp-tier-table tbody tr {
    margin-block-end: 14px;
    border: 1px solid var(--vp-border-strong);
    border-radius: var(--vp-radius-md);
    overflow: hidden;
    background: var(--vp-surface);
  }

  .vp-tier-table tbody tr:last-child {
    margin-block-end: 0;
  }

  .vp-tier-table tbody th {
    position: sticky;
    inset-block-start: 0;
    inset-inline-start: auto;
    z-index: 2;
    padding: 12px 16px;
    background: var(--vp-surface-alt);
    border-block-end: 1px solid var(--vp-border);
    font-size: 0.9375rem;
  }

  .vp-tier-table tbody tr:nth-child(even) th {
    background: var(--vp-surface-alt);
  }

  .vp-tier-table tbody td {
    padding: 12px 16px;
    border-block-end: 1px solid var(--vp-border);
  }

  .vp-tier-table tbody td:last-child {
    border-block-end: 0;
  }

  .vp-tier-table tbody td:nth-child(2)::before {
    content: var(--label-2) ": ";
    display: block;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--vp-muted);
    margin-block-end: 3px;
  }

  .vp-tier-table tbody td:nth-child(3)::before {
    content: var(--label-3) " ★: ";
    display: block;
    font-size: 0.78125rem;
    font-weight: 800;
    color: var(--vp-crimson);
    margin-block-end: 3px;
  }

  .vp-tier-table tbody td:nth-child(4)::before {
    content: var(--label-4) ": ";
    display: block;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--vp-gold-ink);
    margin-block-end: 3px;
  }
}

.vp-tier-cta-bar {
  margin-block-start: 22px;
  padding: 18px 24px;
  border-radius: var(--vp-radius-lg);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.vp-tier-cta-bar__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--vp-ink);
}

.vp-tier-cta-bar__note svg {
  color: var(--vp-jade);
  flex-shrink: 0;
}

.vp-tier-cta-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 560px) {
  .vp-tier-cta-bar__actions {
    inline-size: 100%;
  }

  .vp-tier-cta-bar__actions .vp-btn {
    inline-size: 100%;
    white-space: normal;
  }
}

/* ==========================================================================
   6. 5-STEP HERITAGE PROCESS, CONCIERGE BANNER & CORPORATE B2B PARTNERS
   ========================================================================== */

.vp-steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .vp-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1120px) {
  .vp-steps-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.vp-step-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  block-size: 100%;
  min-inline-size: 0;
  padding: 20px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  box-shadow: var(--vp-shadow-sm);
}

.vp-step-card__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vp-step-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vp-step-card__icon {
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--vp-radius-md);
  background: var(--vp-crimson-soft);
  color: var(--vp-crimson);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vp-step-card__num {
  padding: 4px 10px;
  border-radius: var(--vp-radius-pill);
  background: var(--vp-surface-alt);
  color: var(--vp-gold-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.vp-step-card__title {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 4px 0 0;
  color: var(--vp-ink);
}

.vp-step-card__desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--vp-body);
  margin: 0;
}

.vp-step-card__meta {
  padding-block-start: 10px;
  border-block-start: 1px solid var(--vp-border);
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--vp-jade);
}

/* Section 5 — Baby Full-Month / First-Year Calculator Concierge Banner */
.vp-concierge-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3dvw, 36px);
  align-items: center;
  padding: clamp(22px, 3.5dvw, 38px);
  background: linear-gradient(135deg, var(--vp-surface-alt) 0%, var(--vp-surface-warm) 100%);
  border: 1px solid rgba(180, 83, 9, 0.24);
  border-radius: var(--vp-radius-lg);
}

@media (min-width: 980px) {
  .vp-concierge-banner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.vp-concierge-banner__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-inline-size: 0;
}

.vp-concierge-banner__title {
  font-size: clamp(1.375rem, 2.4dvw, 1.9rem);
  line-height: 1.26;
  font-weight: 800;
  margin: 0;
  color: var(--vp-ink);
}

.vp-concierge-banner__desc {
  font-size: 0.96875rem;
  line-height: 1.7;
  color: var(--vp-body);
  margin: 0;
}

.vp-concierge-banner__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 4px;
}

.vp-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 44px;
  padding: 8px 15px;
  border-radius: var(--vp-radius-md);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border-strong);
  color: var(--vp-ink);
  font-size: 0.84375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.vp-quick-pill:hover {
  border-color: var(--vp-crimson);
  color: var(--vp-crimson);
}

.vp-quick-pill svg {
  color: var(--vp-crimson);
  flex-shrink: 0;
}

.vp-concierge-form {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  padding: clamp(20px, 2.5dvw, 26px);
  box-shadow: var(--vp-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vp-concierge-form__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vp-concierge-form__title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--vp-ink);
}

.vp-concierge-form__sub {
  font-size: 0.8125rem;
  color: var(--vp-muted);
}

.vp-concierge-form__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.vp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vp-field__label {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--vp-ink);
}

.vp-field__input,
.vp-field__select {
  inline-size: 100%;
  min-block-size: 46px;
  padding: 10px 14px;
  border-radius: var(--vp-radius-md);
  border: 1px solid var(--vp-border-strong);
  background: var(--vp-bg);
  color: var(--vp-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.vp-field__input:focus,
.vp-field__select:focus {
  background: var(--vp-surface);
  border-color: var(--vp-crimson);
  outline: 2px solid rgba(153, 27, 27, 0.18);
  outline-offset: 0;
}

/* Section 6 — Corporate B2B Partners Grid (12 Verified SVG Logos) */
.vp-partners-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .vp-partners-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .vp-partners-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.vp-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  block-size: 100%;
  min-block-size: 98px;
  padding: 18px 14px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  text-align: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.vp-partner-card:hover {
  border-color: var(--vp-border-strong);
  box-shadow: var(--vp-shadow-sm);
}

.vp-partner-card__logo {
  block-size: 34px;
  inline-size: auto;
  max-inline-size: 144px;
  object-fit: contain;
}

.vp-partner-card__sector {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--vp-muted);
  line-height: 1.3;
}

/* ==========================================================================
   7. FAQ ACCORDIONS (<details class="vp-faq-item">) & PRESTIGE CTA CARD
   ========================================================================== */

.vp-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.5dvw, 40px);
  align-items: start;
}

@media (min-width: 1024px) {
  .vp-faq-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.vp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: 22px;
}

.vp-faq-item {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.vp-faq-item[open] {
  border-color: rgba(153, 27, 27, 0.25);
  box-shadow: var(--vp-shadow-sm);
}

.vp-faq-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 52px;
  padding: 15px 18px;
  cursor: pointer;
  font-size: 0.96875rem;
  font-weight: 700;
  line-height: 1.42;
  color: var(--vp-ink);
  user-select: none;
}

.vp-faq-summary::-webkit-details-marker {
  display: none;
}

/* Marker right before label text per Modern Web Guidance accordion ergonomics */
.vp-faq-summary::before {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  background-color: var(--vp-crimson);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6L8 10.5L12.5 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6L8 10.5L12.5 6'/%3E%3C/svg%3E") no-repeat center / contain;
  rotate: -90deg;
}

.vp-faq-item[open] > .vp-faq-summary::before {
  rotate: 0deg;
}

.vp-faq-item::details-content {
  interpolate-size: allow-keywords;
  overflow: clip;
  contain: layout;
}

.vp-faq-item:not([open])::details-content {
  block-size: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .vp-faq-summary::before {
    transition: rotate 0.2s ease;
  }

  .vp-faq-item::details-content {
    transition: block-size 0.26s ease-in-out, content-visibility 0.26s ease-in-out, display 0.26s ease-in-out;
    transition-behavior: allow-discrete;
  }
}

.vp-faq-answer {
  padding: 0 18px 18px 48px;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--vp-body);
}

@media (max-width: 540px) {
  .vp-faq-answer {
    padding-inline: 18px;
  }
}

.vp-faq-answer p:last-child {
  margin-block-end: 0;
}

/* Prestige Consultation CTA Card */
.vp-prestige-cta {
  position: relative;
  padding: clamp(24px, 3dvw, 32px);
  background: var(--vp-surface-alt);
  border: 1px solid rgba(153, 27, 27, 0.2);
  border-radius: var(--vp-radius-lg);
  box-shadow: var(--vp-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .vp-prestige-cta {
    position: sticky;
    inset-block-start: calc(var(--vp-header-h, 72px) + 20px);
  }
}

.vp-prestige-cta__title {
  font-size: clamp(1.25rem, 2dvw, 1.5rem);
  line-height: 1.3;
  font-weight: 800;
  color: var(--vp-ink);
  margin: 0;
}

.vp-prestige-cta__desc {
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--vp-body);
  margin: 0;
}

.vp-prestige-cta__points {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vp-prestige-cta__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--vp-ink);
  font-weight: 500;
}

.vp-prestige-cta__points svg {
  color: var(--vp-crimson);
  flex-shrink: 0;
  margin-block-start: 2px;
}

.vp-prestige-cta__points a {
  font-weight: 700;
  text-decoration: none;
}

.vp-prestige-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   8. SERVICE LANDING PAGE HERO & CROSS-SELL (.vp-service-hero, .vp-cross-sell)
   ========================================================================== */

.vp-breadcrumb {
  margin-block: 0 18px;
  font-size: 0.84375rem;
  color: var(--vp-muted);
}

.vp-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.vp-breadcrumb__list a {
  color: var(--vp-muted);
  text-decoration: none;
  font-weight: 500;
}

.vp-breadcrumb__list a:hover {
  color: var(--vp-crimson);
}

.vp-breadcrumb__current {
  color: var(--vp-ink);
  font-weight: 600;
}

.vp-service-hero,
.vp-page-hero,
.vp-archive-hero,
.vp-single-hero {
  padding-block: clamp(28px, 4.2dvw, 52px);
  background: var(--vp-surface-alt);
  border-block-end: 1px solid var(--vp-border);
}

.vp-service-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3dvw, 36px);
  align-items: center;
}

@media (min-width: 1024px) {
  .vp-service-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.vp-service-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-inline-size: 0;
}

.vp-service-hero__title,
.vp-page-hero__title {
  font-size: clamp(1.75rem, 3.3dvw, 2.6rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--vp-ink);
  margin: 0;
}

.vp-service-hero__summary {
  font-size: 1.03125rem;
  line-height: 1.7;
  color: var(--vp-body);
  margin: 0;
  max-inline-size: 64ch;
}

.vp-service-hero__price-box {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border-strong);
  border-radius: var(--vp-radius-md);
  padding: 12px 18px;
  inline-size: 100%;
  max-inline-size: 560px;
}

.vp-service-hero__price-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vp-muted);
}

.vp-service-hero__price-value {
  font-size: clamp(1.15rem, 2.2dvw, 1.4rem);
  font-weight: 800;
  color: var(--vp-crimson);
  font-variant-numeric: tabular-nums;
}

.vp-service-hero__guarantees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  inline-size: 100%;
  align-items: stretch;
}

@media (max-width: 540px) {
  .vp-service-hero__guarantees {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vp-service-hero__guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 46px;
  block-size: 100%;
  padding: 10px 14px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  font-size: 0.90625rem;
  font-weight: 600;
  color: var(--vp-ink);
}

.vp-service-hero__guarantee svg {
  color: var(--vp-jade);
  flex-shrink: 0;
}

.vp-service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
}

@media (max-width: 540px) {
  .vp-service-hero__actions .vp-btn {
    inline-size: 100%;
    white-space: normal;
    text-align: center;
  }
}

.vp-service-hero__media {
  position: relative;
  border-radius: var(--vp-radius-lg);
  overflow: hidden;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  box-shadow: var(--vp-shadow-md);
}

.vp-service-hero__img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.vp-service-hero__gold-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--vp-gold-soft);
  color: var(--vp-gold-ink);
  font-size: 0.84375rem;
  font-weight: 700;
  border-block-start: 1px solid rgba(180, 83, 9, 0.18);
}

.vp-service-body {
  padding-block: clamp(32px, 5dvw, 60px);
}

.vp-cross-sell {
  padding-block: clamp(36px, 5dvw, 64px);
  background: var(--vp-surface-alt);
  border-block-start: 1px solid var(--vp-border);
}

.vp-cross-sell__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-block-end: 24px;
}

.vp-cross-sell__title {
  font-size: clamp(1.375rem, 2.5dvw, 1.85rem);
  margin: 6px 0 0;
}

.vp-cross-sell__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .vp-cross-sell__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .vp-cross-sell__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   9. UX SHORTCODE COMPILER (.vp-ux-section, .vp-ux-row, .vp-ux-col, .vp-ux-gallery, .thugon-wrapper)
   ========================================================================== */

.vp-ux-section {
  position: relative;
  margin-block: clamp(20px, 3dvw, 36px);
  padding-block: var(--vp-ux-pad, 0px);
}

.vp-ux-section--bg {
  padding: clamp(20px, 3dvw, 32px);
  background: var(--vp-surface-alt);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
}

.vp-ux-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2.2dvw, 24px);
  align-items: stretch;
  margin-block: 18px;
}

.vp-ux-row--middle {
  align-items: center;
}

.vp-ux-col {
  grid-column: span var(--vp-span-sm, 12);
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
}

.vp-ux-col--1  { --vp-span: 1; }
.vp-ux-col--2  { --vp-span: 2; }
.vp-ux-col--3  { --vp-span: 3; --vp-span-md: 6; }
.vp-ux-col--4  { --vp-span: 4; --vp-span-md: 6; }
.vp-ux-col--5  { --vp-span: 5; --vp-span-md: 6; }
.vp-ux-col--6  { --vp-span: 6; --vp-span-md: 6; }
.vp-ux-col--7  { --vp-span: 7; --vp-span-md: 6; }
.vp-ux-col--8  { --vp-span: 8; --vp-span-md: 12; }
.vp-ux-col--9  { --vp-span: 9; --vp-span-md: 12; }
.vp-ux-col--10 { --vp-span: 10; --vp-span-md: 12; }
.vp-ux-col--11 { --vp-span: 11; --vp-span-md: 12; }
.vp-ux-col--12 { --vp-span: 12; --vp-span-md: 12; }

.vp-ux-col--sm-6 { --vp-span-sm: 6; }

@media (min-width: 768px) {
  .vp-ux-col {
    grid-column: span var(--vp-span-md, var(--vp-span, 12));
  }
}

@media (min-width: 1024px) {
  .vp-ux-col {
    grid-column: span var(--vp-span, 12);
  }
}

.vp-ux-col__inner {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-inline-size: 0;
}

.vp-ux-box,
.vp-ux-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  block-size: 100%;
  padding: 20px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  box-shadow: var(--vp-shadow-sm);
}

.vp-ux-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 16px;
  margin-block: 24px;
  align-items: stretch;
}

.vp-ux-gallery__item,
.vp-ux-image {
  margin: 0;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

.vp-ux-gallery__item img,
.vp-ux-image img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vp-ux-gallery__caption,
.vp-ux-image figcaption {
  padding: 10px 14px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--vp-muted);
  text-align: center;
  margin-block-start: auto;
}

.vp-ux-banner {
  position: relative;
  margin-block: 24px;
  padding: clamp(24px, 3.5dvw, 38px);
  border-radius: var(--vp-radius-lg);
  background: var(--vp-surface-alt);
  border: 1px solid var(--vp-border);
  overflow: hidden;
}

/* [thugon] Progressive Disclosure Wrapper */
.thugon-wrapper,
.vp-ux-collapse {
  position: relative;
  margin-block: 20px;
}

.thugon-wrapper.is-collapsed .thugon-content,
.vp-ux-collapse:not(.is-expanded) .vp-ux-collapse__body {
  max-block-size: 300px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.thugon-actions,
.vp-ux-collapse__actions {
  display: flex;
  justify-content: center;
  margin-block-start: 14px;
}

.thugon-btn-more,
.thugon-btn-less,
.vp-ux-collapse__toggle {
  min-block-size: 44px;
  padding: 9px 20px;
  border-radius: var(--vp-radius-pill);
  border: 1px solid var(--vp-border-strong);
  background: var(--vp-surface);
  color: var(--vp-crimson);
  font-family: var(--vp-font);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.thugon-btn-more:hover,
.thugon-btn-less:hover,
.vp-ux-collapse__toggle:hover {
  background: var(--vp-surface-alt);
  border-color: var(--vp-crimson);
}

.thugon-wrapper.is-collapsed .thugon-btn-less {
  display: none;
}

.thugon-wrapper:not(.is-collapsed) .thugon-btn-more {
  display: none;
}

/* ==========================================================================
   10. LUNAR CALENDAR & BABY MILESTONE PAGE UI (.vp-lunar-app, .vp-lunar-grid, .vp-calc-card)
   ========================================================================== */

.vp-lunar-app {
  padding-block: clamp(28px, 4dvw, 52px);
}

.vp-lunar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3dvw, 32px);
  align-items: start;
}

@media (min-width: 1080px) {
  .vp-lunar-layout {
    grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr);
  }
}

.vp-lunar-panel,
.vp-calc-card,
.vp-lunar-detail {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  padding: clamp(18px, 2.5dvw, 26px);
  box-shadow: var(--vp-shadow-sm);
}

.vp-lunar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 18px;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--vp-border);
}

.vp-lunar-toolbar__title {
  font-size: clamp(1.125rem, 2dvw, 1.375rem);
  font-weight: 800;
  color: var(--vp-ink);
  margin: 0;
}

.vp-lunar-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vp-lunar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-block-end: 8px;
  text-align: center;
}

.vp-lunar-weekdays span {
  padding-block: 8px;
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--vp-muted);
  text-transform: uppercase;
}

.vp-lunar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

@media (max-width: 520px) {
  .vp-lunar-weekdays,
  .vp-lunar-grid {
    gap: 4px;
  }
}

.vp-lunar-day-card {
  position: relative;
  min-block-size: 64px;
  block-size: 100%;
  padding: 8px 6px;
  border-radius: var(--vp-radius-sm);
  border: 1px solid var(--vp-border);
  background: var(--vp-surface);
  color: var(--vp-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--vp-font);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

@media (min-width: 768px) {
  .vp-lunar-day-card {
    min-block-size: 78px;
    padding: 10px 8px;
    align-items: flex-start;
  }
}

.vp-lunar-day-card:hover {
  background: var(--vp-surface-alt);
  border-color: rgba(153, 27, 27, 0.35);
}

.vp-lunar-day-card.is-muted,
.vp-lunar-day-card[aria-disabled="true"] {
  opacity: 0.42;
  background: var(--vp-bg);
}

.vp-lunar-day-card.is-today {
  border-color: var(--vp-gold);
  background: rgba(254, 243, 199, 0.38);
}

.vp-lunar-day-card.is-selected,
.vp-lunar-day-card[aria-pressed="true"],
.vp-lunar-day-card[aria-current="date"] {
  border-color: var(--vp-crimson);
  background: var(--vp-crimson-soft);
  box-shadow: inset 0 0 0 1px var(--vp-crimson);
}

.vp-lunar-day-card__solar {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.vp-lunar-day-card__lunar {
  font-size: 0.71875rem;
  font-weight: 600;
  color: var(--vp-muted);
  font-variant-numeric: tabular-nums;
}

.vp-lunar-day-card.is-selected .vp-lunar-day-card__lunar,
.vp-lunar-day-card.is-lunar-first .vp-lunar-day-card__lunar {
  color: var(--vp-crimson);
  font-weight: 700;
}

.vp-lunar-day-card__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--vp-radius-pill);
  background: var(--vp-jade);
}

.vp-lunar-day-card.is-hac-dao .vp-lunar-day-card__dot {
  background: var(--vp-muted);
}

.vp-calc-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vp-calc-result {
  padding: 16px 18px;
  border-radius: var(--vp-radius-md);
  background: var(--vp-surface-alt);
  border: 1px solid rgba(180, 83, 9, 0.24);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vp-hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  align-items: stretch;
}

.vp-hour-pill {
  padding: 8px 12px;
  border-radius: var(--vp-radius-sm);
  background: var(--vp-jade-soft);
  border: 1px solid rgba(6, 95, 70, 0.18);
  color: var(--vp-jade);
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ==========================================================================
   11. SINGLE POST 2-COL MAGAZINE LAYOUT (.vp-single-layout, .vp-single-sidebar)
   ========================================================================== */

.vp-single-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-block-top: 14px;
  font-size: 0.875rem;
  color: var(--vp-muted);
}

.vp-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.5dvw, 44px);
  padding-block: clamp(32px, 5dvw, 60px);
  align-items: start;
}

@media (min-width: 1080px) {
  .vp-single-layout {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
}

.vp-single-main,
.vp-single-article {
  min-inline-size: 0;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  padding: clamp(20px, 3.2dvw, 40px);
  box-shadow: var(--vp-shadow-sm);
}

.vp-single-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-inline-size: 0;
}

@media (min-width: 1080px) {
  .vp-single-sidebar--sticky,
  .vp-single-sidebar {
    position: sticky;
    inset-block-start: calc(var(--vp-header-h, 72px) + 20px);
  }
}

.vp-sidebar-card {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  padding: 22px;
  box-shadow: var(--vp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vp-sidebar-card--accent {
  background: var(--vp-surface-alt);
  border-color: rgba(153, 27, 27, 0.2);
}

.vp-sidebar-card__title {
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--vp-ink);
  margin: 0;
}

.vp-sidebar-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vp-sidebar-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-block-size: 44px;
  padding: 8px 12px;
  border-radius: var(--vp-radius-sm);
  background: var(--vp-bg);
  color: var(--vp-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.vp-sidebar-links a:hover {
  background: var(--vp-crimson-soft);
  color: var(--vp-crimson);
}

.vp-author-box {
  margin-block-start: 36px;
  padding: 22px 24px;
  border-radius: var(--vp-radius-lg);
  background: var(--vp-surface-alt);
  border: 1px solid var(--vp-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* ==========================================================================
   12. ARCHIVE FILTER BAR, PAGINATION & SEARCH / 404 EMPTY STATES
   ========================================================================== */

.vp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-block-end: 28px;
  padding: 14px 18px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
}

.vp-filter-bar__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vp-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding: 8px 16px;
  border-radius: var(--vp-radius-pill);
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  color: var(--vp-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.vp-filter-pill:hover,
.vp-filter-pill.is-active,
.vp-filter-pill[aria-current="page"] {
  background: var(--vp-crimson);
  border-color: var(--vp-crimson);
  color: #FFFFFF;
}

/* WordPress Pagination */
.vp-pagination,
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: 36px;
  list-style: none;
  padding: 0;
}

.vp-pagination a,
.vp-pagination span,
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 14px;
  border-radius: var(--vp-radius-md);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border-strong);
  color: var(--vp-ink);
  font-size: 0.90625rem;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.vp-pagination a:hover,
.navigation.pagination a.page-numbers:hover {
  border-color: var(--vp-crimson);
  color: var(--vp-crimson);
}

.vp-pagination .current,
.navigation.pagination .page-numbers.current {
  background: var(--vp-crimson);
  border-color: var(--vp-crimson);
  color: #FFFFFF;
}

/* Empty, Search & 404 States */
.vp-empty-state,
.vp-404-card {
  max-inline-size: 720px;
  margin-inline: auto;
  padding: clamp(28px, 4.5dvw, 48px);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  box-shadow: var(--vp-shadow-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.vp-empty-state__icon,
.vp-404-card__icon {
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--vp-radius-lg);
  background: var(--vp-crimson-soft);
  color: var(--vp-crimson);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vp-empty-state__title,
.vp-404-card__title {
  font-size: clamp(1.35rem, 2.4dvw, 1.85rem);
  font-weight: 800;
  color: var(--vp-ink);
  margin: 0;
}

.vp-empty-state__desc,
.vp-404-card__desc {
  font-size: 0.96875rem;
  line-height: 1.7;
  color: var(--vp-body);
  margin: 0;
  max-inline-size: 54ch;
}

.vp-empty-state__actions,
.vp-404-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 6px;
}

/* Reduced Motion & Forced Colors Accessibility Safeguards */
@media (prefers-reduced-motion: reduce) {
  .vp-ritual-card,
  .vp-post-card,
  .vp-card__media img,
  .vp-ritual-card__img,
  .vp-tab,
  .vp-faq-item {
    transition: none;
  }
}

@media (forced-colors: active) {
  .vp-ritual-card,
  .vp-post-card,
  .vp-step-card,
  .vp-showcase-card,
  .vp-prestige-cta,
  .vp-concierge-form,
  .vp-faq-item,
  .vp-sidebar-card,
  .vp-lunar-panel,
  .vp-calc-card {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   13. PRESTIGE ABOUT PAGE (.vp-about-hero, .vp-legal-bento, .vp-values-grid)
   ========================================================================== */

.vp-about-hero {
  padding-block: clamp(28px, 4.5dvw, 56px);
  background: var(--vp-surface-alt);
  border-block-end: 1px solid var(--vp-border);
}

.vp-about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.2dvw, 40px);
  align-items: center;
}

@media (min-width: 1024px) {
  .vp-about-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.vp-about-hero__title {
  font-size: clamp(1.75rem, 3.2dvw, 2.5rem);
  line-height: 1.22;
  font-weight: 800;
  margin: 14px 0 16px;
  color: var(--vp-ink);
}

.vp-about-hero__lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--vp-body);
  margin: 0 0 22px;
}

.vp-about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-block-end: 22px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .vp-about-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vp-about-stat {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  block-size: 100%;
}

.vp-about-stat__num {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--vp-crimson);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.vp-about-stat__lbl {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vp-muted);
}

.vp-about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 540px) {
  .vp-about-hero__actions .vp-btn {
    inline-size: 100%;
    white-space: normal;
    text-align: center;
  }
}

.vp-about-hero__media {
  border-radius: var(--vp-radius-lg);
  overflow: hidden;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  box-shadow: var(--vp-shadow-md);
}

.vp-about-hero__media img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.vp-about-hero__caption {
  padding: 12px 18px;
  background: var(--vp-gold-soft);
  color: var(--vp-gold-ink);
  font-size: 0.84375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vp-about-section {
  padding-block: clamp(36px, 5dvw, 68px);
}

.vp-about-section--alt {
  background: var(--vp-surface-alt);
  border-block: 1px solid var(--vp-border);
}

.vp-about-head {
  max-inline-size: 760px;
  margin-block-end: clamp(22px, 3dvw, 34px);
}

.vp-legal-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

@media (min-width: 960px) {
  .vp-legal-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vp-about-card {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  padding: clamp(20px, 2.6dvw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  block-size: 100%;
  box-shadow: var(--vp-shadow-sm);
}

.vp-legal-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vp-legal-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--vp-border);
  font-size: 0.95rem;
  line-height: 1.55;
}

.vp-legal-list li:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.vp-values-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .vp-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .vp-values-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vp-b2b-highlights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-block-end: 26px;
  align-items: stretch;
}

@media (min-width: 860px) {
  .vp-b2b-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.vp-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .vp-partner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .vp-partner-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.vp-ritual-pills {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-block-end: 28px;
  align-items: stretch;
}

@media (min-width: 600px) {
  .vp-ritual-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .vp-ritual-pills {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vp-ritual-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-block-size: 48px;
  block-size: 100%;
  padding: 12px 16px;
  border-radius: var(--vp-radius-md);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  color: var(--vp-ink);
  font-size: 0.90625rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.vp-ritual-pill:hover {
  border-color: var(--vp-crimson);
  color: var(--vp-crimson);
  background: var(--vp-surface-alt);
}

.vp-about-cta-banner {
  background: var(--vp-surface-alt);
  border: 1px solid rgba(180, 83, 9, 0.24);
  border-radius: var(--vp-radius-lg);
  padding: clamp(24px, 3.5dvw, 38px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}