/* ==========================================================================
   css/invitation.css — Thiệp 11 theme, 8 trang, không cuộn (đặc tả V3)

   3 TRẠNG THÁI (.inv[data-state]):
     UNOPENED : chỉ poster phong bì (không chữ) — mọi lớp nội dung ẩn
     PLAYING  : chỉ video mở thiệp — sạch 100%
     OPENED   : video đóng băng frame cuối làm nền + nội dung trang 1 hiện ra

   KHÔNG có thẻ nền tự chế cho khối chữ: chữ nằm trực tiếp trên vùng giấy
   trống của bg.webp hoặc trong ảnh khung trong suốt của theme.
   ========================================================================== */

/* ------------------------------ Keyframes -------------------------------- */

@keyframes v-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v-fly-in {
  from { opacity: 0; transform: translateY(30px) scale(0.94); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes v-unroll-x {
  from { clip-path: inset(0 50% 0 50%); opacity: 0; transform: scaleX(0.88); }
  to { clip-path: inset(0 0 0 0); opacity: 1; transform: scaleX(1); }
}

@keyframes v-unroll-y {
  from { clip-path: inset(50% 0 50% 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes v-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}

@keyframes v-candle-grow {
  from { transform: translateY(120px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes v-flame-light {
  0% { transform: scale(0) translateY(6px); opacity: 0; }
  65% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes v-flame-flicker {
  0%, 100% { transform: scale(1) rotate(-1deg); filter: drop-shadow(0 0 10px rgba(255, 178, 78, 0.8)); }
  30% { transform: scale(1.08, 0.95) rotate(2deg); filter: drop-shadow(0 0 16px rgba(255, 196, 96, 0.95)); }
  60% { transform: scale(0.95, 1.06) rotate(-2deg); filter: drop-shadow(0 0 9px rgba(255, 172, 70, 0.75)); }
}

@keyframes v-flower-in-left {
  from { transform: translateX(-60px) rotate(-15deg) scale(0.7); opacity: 0; }
  to { transform: translateX(0) rotate(0) scale(1); opacity: 1; }
}

@keyframes v-flower-in-right {
  from { transform: translateX(60px) rotate(15deg) scale(0.7); opacity: 0; }
  to { transform: translateX(0) rotate(0) scale(1); opacity: 1; }
}

@keyframes v-butterfly-fly {
  0% { transform: translate3d(0, 20vh, 0) rotate(-6deg) scale(var(--scale, 1)); opacity: 0; }
  12% { opacity: 0.85; }
  55% { transform: translate3d(7vw, -40vh, 0) rotate(7deg) scale(var(--scale, 1)); }
  90% { opacity: 0.75; }
  100% { transform: translate3d(-5vw, -95vh, 0) rotate(-5deg) scale(var(--scale, 1)); opacity: 0; }
}

@keyframes v-wing-flap {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.66); }
}

@keyframes v-ripple {
  0% { transform: scale(0.75); opacity: 0.85; }
  80% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes v-hint-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes v-shimmer {
  0% { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}

@keyframes v-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes v-eq {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

/* ------------------------------ Khung trang ------------------------------ */

html,
body {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100dvh; /* Dynamic viewport height: tự co giãn theo thanh URL của iOS */
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none; /* Chặn hoàn toàn gesture scroll / pinch của WebKit */
}

/* Đảm bảo root container bên trong không bị phình to hơn màn hình */
#root, #app, .main-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  height: 100dvh;
  min-height: 100dvh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

#wd-root {
  height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--t-paper, var(--paper));
  color: var(--t-ink, var(--ink));
  font-family: var(--t-font-body, var(--font-body));
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 760px) {
  body {
    padding: 0;
  }

  .inv {
    width: auto;
    max-width: min(468px, calc(100vw - 24px));
    height: min(100dvh - 24px, 832px);
    aspect-ratio: 9 / 16;
    border-radius: 34px;
    box-shadow: var(--shadow-card);
  }
}

/* ----------------------- Nền cố định (frame cuối video) ------------------- */

.stage-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--t-paper, var(--paper));
}

.stage-bg__image {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.stage-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Video chỉ hiện khi đang phát hoặc đã đóng băng frame cuối */
.inv[data-state='PLAYING'] .stage-bg__video,
.inv[data-state='OPENED'] .stage-bg__video {
  opacity: 1;
}

.stage-bg__video.is-failed {
  display: none;
}

/* ------------------------------ Lớp trang trí ---------------------------- */

.stage-decor {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.inv[data-state='OPENED'] .stage-decor {
  opacity: 1;
}

.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fx-butterflies {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.butterfly {
  position: absolute;
  left: var(--x, 50%);
  bottom: 0;
  width: 22px;
  color: hsl(var(--hue, 40) 55% 66%);
  opacity: 0;
  animation: v-butterfly-fly var(--dur, 16s) linear var(--delay, 0s) infinite;
}

.butterfly svg {
  width: 100%;
  height: auto;
  animation: v-wing-flap 1.1s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(63, 58, 51, 0.16));
}

.fx-divider {
  position: absolute;
  left: 50%;
  width: clamp(140px, 62%, 250px);
  transform: translateX(-50%);
  opacity: 0.9;
}

.fx-divider--top { top: 5%; }
.fx-divider--bottom { bottom: 12%; }

.fx-flower {
  position: absolute;
  width: clamp(66px, 22%, 108px);
  opacity: 0;
  transform-origin: bottom center;
}

.fx-flower--left {
    top: 6%;
    left: calc(50% - 50px);
}
.fx-flower--right {
    bottom: 10%;
    right: calc(50% - 50px);
}

.inv[data-state='OPENED'] .fx-flower--left {
  animation: v-flower-in-left 1.1s var(--ease-out) 0.3s forwards, v-sway 6.5s ease-in-out 1.6s infinite;
}

.inv[data-state='OPENED'] .fx-flower--right {
  animation: v-flower-in-right 1.1s var(--ease-out) 0.45s forwards, v-sway 7s ease-in-out 1.8s infinite;
}

.fx-branch,
.fx-sprig,
.fx-ribbon {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fx-branch {
  top: 40%;
  left: -12px;
  width: clamp(80px, 26%, 130px);
  transform: scaleX(-1);
}

.fx-sprig {
  top: 16%;
  right: -10px;
  width: clamp(64px, 20%, 104px);
}

.fx-ribbon {
  top: 3%;
  left: 50%;
  width: clamp(88px, 28%, 128px);
  transform: translateX(-50%);
}

.inv[data-state='OPENED'] .fx-branch {
  animation: v-flower-in-left 1.2s var(--ease-out) 0.4s forwards, v-sway 7.5s ease-in-out 1.8s infinite;
}

.inv[data-state='OPENED'] .fx-sprig {
  animation: v-flower-in-right 1.2s var(--ease-out) 0.55s forwards, v-sway 8s ease-in-out 2s infinite;
}

.inv[data-state='OPENED'] .fx-ribbon {
  animation: v-unroll-y 1s var(--ease-out) 0.3s forwards;
}

/* ------------------------------ Nến Candela ------------------------------ */

.candle-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.candle-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  flex: 0 0 auto;
}

.candle-art,
.candle-flowers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
}

.candle-art {
  transform: translateY(12%);
}

.candle-flame {
  position: absolute;
  width: 5.4%;
  height: auto;
  opacity: 0;
  transform: scale(0.35);
  transform-origin: bottom center;
  pointer-events: none;
}

.flame-left { left: 31.8%; top: 73.5%; }
.flame-center { left: 47.1%; top: 69.7%; }
.flame-right { left: 61.9%; top: 72.6%; }

.inv[data-state='OPENED'] .candle-art {
  animation: v-candle-grow 1.05s var(--ease-out) forwards;
}

.inv[data-state='OPENED'] .art-left { animation-delay: 0.1s; }
.inv[data-state='OPENED'] .art-center { animation-delay: 0.25s; }
.inv[data-state='OPENED'] .art-right { animation-delay: 0.4s; }

.inv[data-state='OPENED'] .candle-flame {
  animation: v-flame-light 0.7s var(--ease-out) 1.1s forwards, v-flame-flicker 2.8s ease-in-out 1.9s infinite;
}

.inv[data-state='OPENED'] .flame-center { animation-delay: 1.25s, 2.05s; }
.inv[data-state='OPENED'] .flame-right { animation-delay: 1.4s, 2.2s; }

.inv[data-state='OPENED'] .candle-flowers {
  animation: v-fade-in-soft 1.2s ease 0.6s forwards;
}

@keyframes v-fade-in-soft {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------- Stage --------------------------------- */

.stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.inv[data-state='OPENED'] .stage {
  opacity: 1;
}

.step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 56px) 16px
    calc(env(safe-area-inset-bottom, 0px) + 76px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.step.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* Ảnh khung của theme: phủ toàn màn làm trang trí, chữ nằm trên vùng giấy trống */
.step-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  opacity: 0.98;
  z-index: 0;
}

/* Ảnh lỗi hoặc khung quá ngang (không hợp làm nền trang) → ẩn */
.inv img.is-broken {
  display: none !important;
}

.step-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 82%;
  max-height: 100%;
  padding-bottom: 25px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  transform: translateY(var(--step-shift, 0%));
}

.step-inner::-webkit-scrollbar {
  display: none;
}

/* An toàn: nếu animation bị trình duyệt tạm dừng (tab ẩn…) hoặc bị chặn,
   nội dung vẫn hiện đầy đủ. */
.step.is-forced .reveal,
.step.is-forced .reveal-fly,
.step.is-forced .reveal-unroll,
.step.is-forced .reveal-unroll-gallery,
.step.is-forced .step-head > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ------------------------------ Hiệu ứng xuất hiện ----------------------- */

.reveal,
.reveal-fly,
.reveal-unroll,
.reveal-unroll-gallery {
  opacity: 0;
}

.inv[data-state='OPENED'] .step.is-active .reveal {
  animation: v-fade-up 0.85s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal-fly {
  animation: v-fly-in 0.95s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal-unroll {
  animation: v-unroll-x 0.9s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal-unroll-gallery {
  animation: v-unroll-y 0.9s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

/* ------------------------------- Khối chữ -------------------------------- */

.step-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 2px;
}

.step-head > * {
  opacity: 0;
}

.inv[data-state='OPENED'] .step.is-active .step-head > * {
  animation: v-fade-up 0.8s var(--ease-out) both;
}

.inv[data-state='OPENED'] .step.is-active .step-head > *:nth-child(2) { animation-delay: 0.08s; }
.inv[data-state='OPENED'] .step.is-active .step-head > *:nth-child(3) { animation-delay: 0.16s; }

.step-eyebrow {
  margin: 0;
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--t-gold, var(--gold-deep));
}

.step-title {
  margin: 0;
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(19px, 5.4vw, 25px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.25;
  color: var(--t-ink, var(--ink));
}

.step-rule {
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, var(--t-gold, var(--gold)), transparent);
}

.step-note {
  margin: 0;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--t-ink-soft, var(--ink-soft));
}

.step-note em {
  font-style: italic;
}

/* -------------------------------- Trang 1 -------------------------------- */

.step--cover .step-inner {
  gap: 4px;
}

.cover-eyebrow {
  margin: 0;
  font-size: 9.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--t-gold, var(--gold-deep));
}

.cover-ceremony {
  margin: 2px 0 0;
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(11px, 3.2vw, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--t-ink-soft, var(--ink-soft));
}

.cover-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 4px 0 2px;
}

.cover-name {
  font-family: var(--t-font-script, var(--font-script));
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  line-height: 1.28;
  padding: 0.06em 0.08em;
  color: var(--t-ink, var(--ink));
  white-space: nowrap;
  max-width: 100%;
  overflow: visible;
}

.cover-amp {
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(15px, 4.4vw, 20px);
  font-style: italic;
  color: var(--t-gold, var(--gold-deep));
}

.cover-date {
  margin: 4px 0 0;
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(11px, 3.4vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--t-ink-soft, var(--ink-soft));
}

.cover-guest {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 8px;
}

.cover-guest__label {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t-gold, var(--gold-deep));
}

.cover-guest__name {
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(15px, 4.4vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--t-ink, var(--ink));
}

/* -------------------------------- Trang 2 -------------------------------- */

.msg-lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

.msg-lead em {
  font-style: italic;
  font-weight: 600;
}

.msg-addr {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  font-style: italic;
  color: var(--t-ink-soft, var(--ink-soft));
}

.families {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.family__label {
  margin: 0 0 2px;
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t-gold, var(--gold-deep));
}

.family__names {
  margin: 0;
  font-family: var(--t-font-display, var(--font-display));
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.msg-foot {
  margin: 6px 0 0;
  font-family: var(--t-font-display, var(--font-display));
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-gold, var(--gold-deep));
}

/* -------------------------------- Trang 3 -------------------------------- */

.date-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 290px;
  margin: 2px auto 0;
}

.date-weekday,
.date-time {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-ink-soft, var(--ink-soft));
  line-height: 1.5;
}

.date-time {
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(14px, 4vw, 17px);
  letter-spacing: 0.06em;
  color: var(--t-gold, var(--gold-deep));
}

.date-main {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
}

.date-day {
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 600;
  line-height: 1;
}

.date-my {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--t-ink-soft, var(--ink-soft));
  white-space: nowrap;
}

.date-lunar {
  margin: 0;
  font-family: var(--t-font-display, var(--font-display));
  font-size: 11.5px;
  font-style: italic;
  color: var(--t-ink-soft, var(--ink-soft));
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  max-width: 300px;
  margin-top: 2px;
}

.countdown__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.countdown__box span {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(16px, 4.8vw, 21px);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.countdown__box small {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-ink-soft, var(--ink-soft));
  white-space: nowrap;
}

/* -------------------------------- Trang 4 -------------------------------- */

.venue-address {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  font-style: italic;
  color: var(--t-ink-soft, var(--ink-soft));
}

.map-plate {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 4px auto 0;
}

.map-plate--framed {
  aspect-ratio: 3 / 4;
}

.map-plate--plain {
  aspect-ratio: 4 / 3;
  max-width: 330px;
}

.map-plate__well {
  position: absolute;
  overflow: hidden;
}

/* bản đồ nằm khít trong lòng khung viền */
.map-plate--framed .map-plate__well {
  inset: 19% 13% 40%;
  border-radius: 10px;
}

.map-plate--plain .map-plate__well {
  inset: 0;
  border: 1px solid rgba(139, 109, 76, 0.4);
  border-radius: 14px;
}

.map-plate__well iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: sepia(12%) contrast(98%);
}

.map-plate__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 2;
}

.map-pin {
  position: absolute;
  top: 4%;
  left: 50%;
  z-index: 3;
  width: 30px;
  transform: translateX(-50%);
  animation: v-breathe 3s ease-in-out infinite;
}

/* -------------------------------- Trang 5 -------------------------------- */

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.gallery-stage {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(139, 109, 76, 0.42);
  border-radius: 12px;
}

.gallery-slides {
  position: absolute;
  inset: 0;
}

.gallery-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.85s var(--ease-out);
  cursor: zoom-in;
}

.gallery-slide.is-active { opacity: 1; }

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(20, 17, 13, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.gallery-nav.prev { left: 6px; }
.gallery-nav.next { right: 6px; }

.gallery-counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 2px 8px;
  font-size: 10px;
  color: #fff;
  background: rgba(20, 17, 13, 0.4);
  border-radius: 999px;
}

.gallery-thumbs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.gallery-thumb {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  opacity: 0.55;
  background: none;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--t-gold, var(--gold));
}

.gallery-hint {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--t-ink-soft, var(--ink-soft));
}

/* --------------------------- Trang 6/7 — Form ---------------------------- */

.form-transparent {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
  text-align: left;
}

.form-transparent .field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border: 0;
  padding: 0;
}

.form-transparent .field > label,
.form-transparent .field > legend {
  font-family: var(--t-font-display, var(--font-display));
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-gold, var(--gold-deep));
  padding: 0;
}

.form-transparent input,
.form-transparent select,
.form-transparent textarea {
  width: 100%;
  min-height: 38px;
  padding: 5px 2px;
  font-family: var(--t-font-display, var(--font-display));
  font-size: 16px;
  color: var(--t-ink, var(--ink));
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(139, 109, 76, 0.42);
  border-radius: 0;
  transition: border-color 0.25s ease;
}

.form-transparent textarea {
  min-height: 56px;
  resize: none;
  line-height: 1.5;
}

.form-transparent select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--t-gold, var(--gold)) 50%),
    linear-gradient(135deg, var(--t-gold, var(--gold)) 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-transparent input::placeholder,
.form-transparent textarea::placeholder {
  color: color-mix(in srgb, var(--t-ink-soft, #777) 62%, transparent);
  font-style: italic;
}

.form-transparent input:focus,
.form-transparent select:focus,
.form-transparent textarea:focus {
  outline: none;
  border-bottom-color: var(--t-gold, var(--gold));
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--t-gold, var(--gold)) 75%, transparent);
}

.form-transparent .field--choice {
  gap: 4px;
}

.choice--text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  font-family: var(--t-font-display, var(--font-display));
  font-size: 14px;
  cursor: pointer;
}

.choice--text input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--t-gold, var(--gold));
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
}

.form-transparent .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-action {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.form-status {
  min-height: 16px;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: var(--t-ink-soft, var(--ink-soft));
}

.form-status[data-type='error'] { color: #a32a20; }
.form-status[data-type='ok'] { color: #2f6b3f; }

/* ----------------------------- Trang 7 — Wishes (Sổ lưu bút) -------------- */

.wishes-scroll {
  width: 100%;
  max-width: 276px;
  max-height: 225px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  margin-top: 0;
  margin-right: auto;
  margin-left: 0;
  padding: 2px 2px 2px 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: grab;
}

.wishes-scroll::-webkit-scrollbar {
  display: none;
}

.wish {
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(255, 252, 246, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(178, 138, 93, 0.32);
  box-shadow: 0 2px 8px rgba(74, 50, 26, 0.04);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.wish:hover {
  background: rgba(255, 252, 246, 0.75);
  transform: translateY(-1px);
}

.wish__head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.wish__heart {
  color: #c95d53;
  font-size: 9px;
  line-height: 1;
}

.wish__name {
  margin: 0;
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: 11px;
  font-weight: 700;
  color: #3d2b1a;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wish__time {
  margin: 0;
  font-size: 9px;
  color: #9c7342;
  white-space: nowrap;
}

.wish__msg {
  margin: 0;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 11.5px;
  line-height: 1.35;
  color: #4a3826;
  word-break: break-word;
}

.wish--new {
  animation: v-fade-up 0.6s ease-out both;
  border-color: #b28a5d;
  background: rgba(255, 252, 246, 0.65);
}

.wishes-empty {
  padding: 10px 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--t-ink-soft, var(--ink-soft));
}

/* ------------------------------ Trang 8 — Gift --------------------------- */

.gift-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--t-ink-soft, var(--ink-soft));
}

.gift-qr {
  padding: 6px 6px 17px 6px;
  border: 1px solid rgba(139, 109, 76, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.gift-qr img {
  width: min(160px, 42vw);
  height: auto;
  border-radius: 6px;
}

.gift-bank {
  width: 100%;
  max-width: 290px;
  margin: 0;
  font-size: 12px;
}

.gift-bank > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(139, 109, 76, 0.32);
}

.gift-bank > div:last-child { border-bottom: 0; }

.gift-bank dt {
  flex: 0 0 auto;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-gold, var(--gold-deep));
}

.gift-bank dd {
  margin: 0;
  font-family: var(--t-font-display, var(--font-display));
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.gift-bank__acc {
  letter-spacing: 0.06em;
}

.gift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 2px;
}

.gift-empty {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--t-ink-soft, var(--ink-soft));
}

.gift-empty p { margin: 0; }
.gift-empty__sub { margin-top: 4px !important; font-size: 10.5px; }

/* --------------------------------- Nút bấm ------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--t-font-display, var(--font-display));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-ink, var(--ink));
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 10.5px;
}

/* Khung viền kép cổ điển + ánh kim chạy + nhịp thở */
.btn--ornate {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--t-gold, var(--gold)) 85%, transparent);
  outline: 1px solid color-mix(in srgb, var(--t-gold, var(--gold)) 45%, transparent);
  outline-offset: 3px;
  overflow: hidden;
  animation: v-breathe 4.5s ease-in-out infinite;
}

.btn--ornate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 240% 100%;
  animation: v-shimmer 4.2s linear infinite;
  pointer-events: none;
}

.btn--ornate:hover,
.btn--ornate:focus-visible {
  box-shadow: 0 6px 18px rgba(139, 109, 76, 0.22);
}

/* Nút dùng ảnh đế của theme (button-plate / step-plaque / plaque-plain) */
.btn--plate {
  min-height: 46px;
  padding: 0 26px;
  border-radius: 10px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--t-ink, var(--ink));
}

.btn--plate:hover,
.btn--plate:focus-visible {
  filter: brightness(1.03);
}

.btn--solid {
  background: #7a5c3e;
  color: #fffdf9;
  box-shadow: 0 8px 20px rgba(122, 92, 62, 0.28);
}

/* ------------------------------ Điều hướng ------------------------------- */

.stage-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 14px;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.inv[data-state='OPENED'] .stage-nav {
  opacity: 1;
}

.stage-nav[hidden] {
  display: none !important;
}

.nav-btn {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--t-gold, var(--gold)) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #fffdf8 38%, transparent);
  backdrop-filter: blur(3px);
  color: var(--t-gold, var(--gold-deep));
  box-shadow: 0 4px 12px rgba(60, 48, 34, 0.14);
  transition: transform 0.2s var(--ease-out), background 0.2s ease;
}

.nav-btn svg {
  width: 18px;
  height: 18px;
}

.nav-btn:active {
  transform: scale(0.94);
}

.nav-btn[hidden] {
  display: none !important;
}

.stage-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stage-dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-ink, #333) 28%, transparent);
  transition: width 0.25s ease, background 0.25s ease;
}

.stage-dot.is-active {
  width: 14px;
  background: var(--t-gold, var(--gold));
}

/* --------------------------------- Nhạc --------------------------------- */

.music-fab {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 60;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--t-gold, var(--gold)) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #fffdf8 34%, transparent);
  backdrop-filter: blur(3px);
  color: var(--t-gold, var(--gold-deep));
  box-shadow: 0 4px 12px rgba(60, 48, 34, 0.14);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.inv[data-state='OPENED'] .music-fab {
  opacity: 1;
}

.music-fab[hidden] {
  display: none !important;
}

.music-fab__icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.music-fab__bars {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: none;
  align-items: flex-end;
  gap: 1.5px;
  height: 12px;
}

.music-fab.is-playing .music-fab__bars {
  display: flex;
}

.music-fab__bars i {
  display: block;
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 1px;
  animation: v-eq 0.9s ease-in-out infinite;
}

.music-fab__bars i:nth-child(2) { animation-delay: 0.15s; }
.music-fab__bars i:nth-child(3) { animation-delay: 0.3s; }

.music-fab__slash {
  position: absolute;
  width: 21px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.music-fab.is-playing .music-fab__slash {
  opacity: 0;
}

/* --------------------------- Poster phong bì ----------------------------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  background: #17130e;
  cursor: pointer;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.intro.is-opening {
  background: transparent !important;
  pointer-events: none;
}

.intro.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 760px) {
  .intro {
    inset: 0;
    margin: auto;
    width: auto;
    max-width: min(468px, calc(100vw - 24px));
    height: min(100dvh - 24px, 832px);
    aspect-ratio: 9 / 16;
    border-radius: 34px;
    box-shadow: var(--shadow-card);
  }
}

.intro__poster {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease;
}

.intro.is-opening .intro__poster {
  opacity: 0;
}

.intro__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 248, 235, 0.7);
  box-shadow: 0 0 22px rgba(255, 240, 214, 0.35) inset;
  animation: v-ripple 2.8s ease-out infinite;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.intro__ripple--2 {
  animation-delay: 1.4s;
}

.intro.is-opening .intro__ripple {
  opacity: 0;
}

.intro__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  text-align: center;
  font-family: var(--t-font-display, var(--font-display));
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fffaf0;
  animation: v-hint-pulse 2.6s ease-in-out infinite;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.intro.is-opening .intro__hint {
  opacity: 0;
}

body.is-intro-open {
  overflow: hidden;
}

/* ------------------------ Tinh chỉnh riêng từng theme --------------------- */

[data-theme='A'] .step-title,
[data-theme='A'] .cover-name {
  color: #16241a;
}

[data-theme='A'] .step-eyebrow,
[data-theme='A'] .cover-eyebrow,
[data-theme='A'] .cover-guest__label,
[data-theme='A'] .family__label,
[data-theme='A'] .msg-foot {
  color: #5f4a1e;
  font-weight: 700;
}

[data-theme='A'] .cover-ceremony,
[data-theme='A'] .cover-date,
[data-theme='A'] .msg-addr,
[data-theme='A'] .date-lunar,
[data-theme='A'] .venue-address {
  color: #2b3f31;
}

[data-theme='A'] .msg-lead,
[data-theme='A'] .family__names,
[data-theme='A'] .cover-guest__name {
  color: #1c2b21;
  font-weight: 600;
}

[data-theme='F'] .step-title {
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(13px, 4vw, 16px);
}

[data-theme='H'] .cover-name {
  font-family: var(--t-font-display, var(--font-display));
  font-size: clamp(18px, 5.4vw, 25px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -------------------- Nút mở thiệp Luxury (Theme G / Butterfly) ----------- */

.intro__luxury-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: lacyTapFloat 3.4s ease-in-out infinite;
  pointer-events: auto;
  z-index: 25;
  transition: opacity 0.3s ease;
  margin-top: 370px;
}

.intro.is-opening .intro__luxury-btn {
  opacity: 0;
}

.intro__pearl-wings {
  display: flex;
  align-items: center;
  gap: 10px;
}

.intro__wing-line {
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(178, 138, 93));
}

.intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgb(178, 138, 93));
}

.intro__wing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgb(255, 253, 248), rgb(240, 227, 208) 56%, rgb(192, 166, 124));
  box-shadow: rgba(88, 62, 32, 0.34) 0px 1.5px 2px;
}

.intro__btn-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.intro__btn-ring {
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 1px solid rgb(178, 138, 93);
  animation: lacyTapRing 2.9s ease-out infinite;
  pointer-events: none;
}

.intro__btn-body {
  position: relative;
  min-width: 218px;
  overflow: hidden;
  padding: 14px 28px 13px;
  border-radius: 999px;
  border: 1px solid rgba(150, 113, 54, 0.65);
  background: linear-gradient(118deg, rgb(253, 247, 236) 0%, rgb(248, 239, 221) 46%, rgb(253, 248, 238) 100%);
  box-shadow: rgba(255, 255, 255, 0.95) 0px 1px 0px inset, rgba(74, 50, 26, 0.24) 0px 10px 24px, rgba(74, 50, 26, 0.14) 0px 2px 6px;
}

.intro__btn-sheen {
  position: absolute;
  inset: -2px auto -2px -45%;
  width: 36%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(206, 168, 106, 0.28), rgba(255, 247, 228, 0.55), transparent);
  animation: pearlGoldSheen 4.6s ease-in-out infinite;
  pointer-events: none;
}

.intro__btn-text {
  position: relative;
  z-index: 1;
  display: block;
  white-space: nowrap;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  text-transform: uppercase;
  color: rgb(78, 58, 37);
}

/* ------------------- Họa tiết ngôi sao & ngọc trai ------------------------ */

.star-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 24px;
  margin: 6px auto;
}

.star-divider__line {
  flex: 1;
  height: 1.2px;
}

.star-divider__line--left {
  background: linear-gradient(90deg, transparent, rgb(178, 138, 93) 12%, rgb(178, 138, 93));
}

.star-divider__line--right {
  background: linear-gradient(270deg, transparent, rgb(178, 138, 93) 12%, rgb(178, 138, 93));
}

.star-divider__star {
  display: block;
  flex-shrink: 0;
  margin: 0 4px;
}

.star-divider__pearl {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffff 0%, #fffaf2 20%, #f6e8d8 50%, #e4cfb6 80%, #c9ab8c 100%);
  box-shadow: rgba(120, 96, 70, 0.35) 0 1.5px 3px, rgba(160, 130, 100, 0.25) 0 -1.5px 2px inset;
}

/* --------------------------- Tinh chỉnh Theme G — Butterfly --------------- */

[data-theme='G'] .step {
  padding-left: clamp(24px, 9%, 40px);
  padding-right: clamp(24px, 9%, 40px);
}

[data-theme='G'] .step-inner {
  max-width: min(100%, 340px);
  gap: 10px;
}

/* --- Trang 1: Typography sắc nét, font chữ cưới lãng mạn & hiệu ứng trải tên --- */

.char-fly {
  display: inline-block !important;
  opacity: 0;
  will-change: transform, opacity;
}

.char-space {
  display: inline-block;
  width: 0.28em;
}

.inv.is-revealed .step.is-active .char-fly--left,
.inv[data-state='OPENED'].is-revealed .step.is-active .char-fly--left,
.inv[data-state='OPENED'] .step.is-active:not(.is-forced) .char-fly--left {
  animation: charFlyInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 180ms);
}

.inv.is-revealed .step.is-active .char-fly--right,
.inv[data-state='OPENED'].is-revealed .step.is-active .char-fly--right,
.inv[data-state='OPENED'] .step.is-active:not(.is-forced) .char-fly--right {
  animation: charFlyInRight 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 180ms);
}

.inv.is-revealed .step.is-active .cover-name--unroll-left,
.inv[data-state='OPENED'].is-revealed .step.is-active .cover-name--unroll-left,
.inv[data-state='OPENED'] .step.is-active:not(.is-forced) .cover-name--unroll-left {
  animation: groomUnrollLeft 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 160ms) + 180ms);
}

.inv.is-revealed .step.is-active .cover-name--unroll-right,
.inv[data-state='OPENED'].is-revealed .step.is-active .cover-name--unroll-right,
.inv[data-state='OPENED'] .step.is-active:not(.is-forced) .cover-name--unroll-right {
  animation: brideUnrollRight 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 260ms) + 180ms);
}

.step.is-forced .char-fly,
.step.is-forced .cover-name--unroll-left,
.step.is-forced .cover-name--unroll-right {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

[data-theme='G'] .cover-names {
  gap: 0;
  margin: 4px 0 2px;
}

[data-theme='G'] .cover-name {
  display: inline-block !important;
  vertical-align: middle;
  font-family: var(--t-font-script, 'Great Vibes', cursive);
  font-size: clamp(34px, 9.8vw, 52px);
  line-height: 1.25;
  color: #3d2b1a;
  padding: 0.05em 0.15em;
  white-space: nowrap;
}

[data-theme='G'] .cover-amp {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-style: italic;
  font-size: clamp(20px, 5.6vw, 27px);
  color: #b28a5d;
  margin: -6px 0;
  display: inline-block;
}

[data-theme='G'] .cover-eyebrow {
  letter-spacing: 0.28em;
  font-size: 11px;
  font-weight: 600;
  color: #7d654f;
  text-transform: uppercase;
}

[data-theme='G'] .cover-ceremony {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(14px, 4.2vw, 17px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a3826;
}

[data-theme='G'] .cover-date {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(13px, 3.8vw, 15.5px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3d2b1a;
}

/* Số chữ số chuẩn sang trọng lining-nums */
.lacy-num,
.cover-date-num,
.lacy-month-num,
.lacy-date-day-val,
.lacy-date-year-val,
.lacy-pill-text--time,
.countdown__val {
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: 'lnum' 1, 'tnum' 1 !important;
}

.cover-date-num {
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #3d2b1a;
}

/* --- Trang 2: "Trân trọng kính mời" phẳng đẹp, không lổm nhổm --- */

[data-theme='G'] .msg-title {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(19px, 5.4vw, 24px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3d2b1a;
  line-height: 1.35;
  margin: 0;
}

[data-theme='G'] .msg-lead {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(14px, 4vw, 16px);
  color: #4a3826;
  line-height: 1.6;
}

[data-theme='G'] .msg-lead strong {
  color: #3d2b1a;
  font-weight: 700;
}

[data-theme='G'] .msg-addr {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(12.5px, 3.6vw, 14px);
  font-style: italic;
  color: #68523c;
  line-height: 1.45;
}

[data-theme='G'] .family__label {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #9c7342;
  text-transform: uppercase;
  font-weight: 700;
}

[data-theme='G'] .family__names {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(13px, 3.6vw, 14.5px);
  font-weight: 600;
  color: #3d2b1a;
  line-height: 1.45;
}

[data-theme='G'] .family__child {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(12px, 3.4vw, 13px);
  color: #5d4733;
}

[data-theme='G'] .family__child strong {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  color: #3d2b1a;
  font-weight: 700;
}

/* --- Trang 3: Khung vòm thời gian vẽ viền SVG + 2 con nhộng --- */

.lacy-date-arch-wrap {
  position: relative;
  width: 100%;
  max-width: 215px;
  height: 175px;
  margin: 0 auto;
}

.date-arch-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.date-arch-svg path,
.date-pill-svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.step.is-active .date-arch-svg path,
.step.is-active .date-pill-svg path {
  animation: svgStrokeDraw 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.date-arch-svg circle,
.date-pill-svg circle {
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease 0.85s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s;
}

.step.is-active .date-arch-svg circle,
.step.is-active .date-pill-svg circle {
  opacity: 1;
  transform: scale(1);
}

.lacy-date-arch-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px 10px;
  text-align: center;
  z-index: 2;
}

.lacy-date-day-val {
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(48px, 14vw, 58px);
  line-height: 0.95;
  font-weight: 500;
  color: #3d2b1a;
}

.lacy-date-month-val {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5c4733;
  margin-top: 4px;
  margin-bottom: 10px;
}

.lacy-month-num {
  font-family: 'Playfair Display', serif;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.05em;
  color: #3d2b1a;
}

.lacy-date-year-val {
  font-family: 'Playfair Display', serif;
  font-variant-numeric: lining-nums;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #9c7342;
}

.lacy-date-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 275px;
  margin: 0 auto;
}

.lacy-date-pill-item {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lacy-date-pill-item--weekday {
  flex: 1.15;
}

.lacy-date-pill-item--time {
  flex: 0.85;
}

.date-pill-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lacy-pill-text {
  position: relative;
  z-index: 2;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3d2b1a;
  white-space: nowrap;
}

.lacy-pill-text--time {
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.lacy-cal-btn {
  padding: 7px 20px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[data-theme='G'] .date-lunar {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12.5px;
  color: #68523c;
  font-style: italic;
  margin: 2px 0 0;
}

[data-theme='G'] .countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
}

[data-theme='G'] .countdown__box {
  position: relative;
  min-width: 52px;
  padding: 7px 6px 6px;
  border-radius: 26px 26px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.96) 0%, rgba(246, 237, 223, 0.92) 100%);
  border: 1px solid rgba(178, 138, 93, 0.65);
  box-shadow: 0 4px 14px rgba(74, 50, 26, 0.1), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-theme='G'] .countdown__box::before {
  content: '';
  position: absolute;
  top: 3.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #b28a5d;
  box-shadow: 0 0.5px 1.5px rgba(74, 50, 26, 0.25);
}

[data-theme='G'] .countdown__box span {
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.1;
  color: #3d2b1a;
  margin-top: 2px;
}

[data-theme='G'] .countdown__box small {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9c7342;
  margin-top: 1px;
}

/* --- Trang 4: Bản đồ khung vòm Cathedral + Ghim nhảy nhún --- */

.lacy-map-card {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lacy-map-arch-window {
  position: relative;
  width: 200px;
  height: 180px;
  border-radius: 100px 100px 20px 20px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(74, 50, 26, 0.18), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  border: 1.5px solid rgba(178, 138, 93, 0.7);
  background: #f7eedf;
  margin-bottom: 8px;
}

.lacy-map-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lacy-map-pin-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 42px;
  height: auto;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.step.is-active .lacy-map-pin-img {
  animation: mapPinDropBounce 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
             mapPinHoverSway 2.6s ease-in-out 1.25s infinite;
}

.lacy-map-plaque {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 230px;
  padding: 5px 12px 4px;
  border-radius: 999px;
  border: 1px solid rgba(178, 138, 93, 0.65);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 4px 14px rgba(74, 50, 26, 0.08);
  margin-bottom: 5px;
}

.lacy-map-plaque-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b28a5d;
  box-shadow: 0 1px 2px rgba(74, 50, 26, 0.25);
}

.lacy-map-plaque-title {
  margin: 0;
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #3d2b1a;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lacy-map-addr {
  margin: 0 0 8px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12px;
  font-style: italic;
  color: #68523c;
  text-align: center;
  line-height: 1.4;
  max-width: 240px;
}

.lacy-directions-btn {
  padding: 7px 22px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Theme G Bottom Bar (Scroll Down & Music) --- */

.stage-nav--butterfly {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 60;
  padding: 0 18px;
}

.stage-scroll-down-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid rgba(178, 138, 93, 0.65);
  box-shadow: 0 6px 20px rgba(74, 50, 26, 0.16), 0 1px 0 #fff inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #43321f;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.stage-scroll-down-btn:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(74, 50, 26, 0.22);
}

.stage-scroll-down-btn:active {
  transform: translateY(1px);
}

.scroll-arrow-bounce {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  color: #b28a5d;
  animation: scrollDownBounce 1.8s ease-in-out infinite;
}

.stage-music-btn {
  position: absolute;
  right: 18px;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto 0 !important;
  pointer-events: auto;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid rgba(178, 138, 93, 0.65);
  box-shadow: 0 6px 20px rgba(74, 50, 26, 0.16), 0 1px 0 #fff inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #43321f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stage-music-btn:hover {
  transform: scale(1.06);
  background: #ffffff;
}

[data-theme='G'] .btn {
  border-radius: 999px;
  border: 1px solid rgba(178, 138, 93, 0.7);
  background: linear-gradient(118deg, #fdf8ee 0%, #f6ecdc 50%, #fdf9f0 100%);
  color: #5c4f40;
  box-shadow: 0 6px 18px rgba(74, 50, 26, 0.14), 0 1px 0 #fff inset;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[data-theme='D'] .cover-name { font-size: clamp(24px, 7.6vw, 34px); }

[data-theme='I'] .step-inner {
  border-radius: 80px 80px 0 0;
}

[data-theme='E'] .step--rsvp .step-inner,
[data-theme='C'] .step--rsvp .step-inner {
  gap: 7px;
}

/* ------------------------------ Responsive ------------------------------- */

@media (max-height: 720px) {
  .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 46px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  }

  .cover-name { font-size: clamp(24px, 7.6vw, 32px); }
  .gallery-stage { max-width: 190px; }
  .map-plate { max-width: 240px; }
  .wishes-scroll { max-height: 120px; }
  .step-inner { gap: 7px; }
}

@media (max-height: 600px) {
  .step-eyebrow { display: none; }
  .step-title { font-size: clamp(16px, 4.6vw, 20px); }
  .cover-guest__label { display: none; }
  .countdown__box small { font-size: 7px; }
  .gift-qr img { width: min(126px, 32vw); }
  .map-plate--framed { aspect-ratio: 4 / 3; }
  .map-plate--framed .map-plate__well { inset: 16% 12% 30%; }
  .gallery-stage { max-width: 150px; }
  .cover-name { font-size: clamp(21px, 6.8vw, 27px); }
  .form-transparent { gap: 6px; }
  .form-transparent input,
  .form-transparent select,
  .form-transparent textarea { min-height: 32px; font-size: 14px; }
  .wishes-scroll { max-height: 92px; }
}

/* Màn hình rất thấp (laptop nhỏ / điện thoại nằm ngang) */
@media (max-height: 560px) {
  .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 40px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  }

  .step-inner { max-width: 88%; gap: 5px; }
  .cover-name { font-size: clamp(17px, 5.4vw, 21px); }
  .cover-names { gap: 0; }
  .cover-ceremony { font-size: 10px; }
  .cover-date { font-size: 11px; }
  .cover-guest { font-size: 10px; }
  .step-lede { font-size: 12px; }
  .countdown__box span { font-size: 15px; }
  .gallery-stage { max-width: 120px; }
  .wishes-scroll { max-height: 76px; }
}

/* Khối rỗng (VD: chưa cấu hình QR) không chiếm chỗ */
.gift-actions:empty {
  display: none;
}

@media (max-width: 360px) {
  .step { padding-left: 12px; padding-right: 12px; }
  .step-inner { max-width: 88%; }
  .families { gap: 6px; }
  .family__names { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .inv *,
  .inv *::before,
  .inv *::after,
  .intro * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   BỔ SUNG 2026-11 — Hiệu ứng mượt, tương phản chữ và các khối Theme G
   ========================================================================== */

/* --------------------- 1. Chuyển cảnh giữa các trang thiệp ----------------- */

@keyframes stepInNext {
  from { opacity: 0; transform: translateY(30px) scale(0.972); filter: blur(7px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes stepInPrev {
  from { opacity: 0; transform: translateY(-30px) scale(0.972); filter: blur(7px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.step {
  transform: translateY(18px) scale(0.985);
  filter: blur(2px);
  transition:
    opacity 0.46s ease,
    transform 0.64s var(--ease-out),
    filter 0.5s ease,
    visibility 0s linear 0.46s;
}

.step.is-active {
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0s;
}

.step.is-past {
  transform: translateY(-16px) scale(0.992);
}

.inv[data-dir='next'] .step.is-active {
  animation: stepInNext 0.7s var(--ease-out) both;
}

.inv[data-dir='prev'] .step.is-active {
  animation: stepInPrev 0.7s var(--ease-out) both;
}

/* ------------------ 2. Bộ hiệu ứng xuất hiện đa dạng ---------------------- */

@keyframes revealFromLeft {
  from { opacity: 0; transform: translateX(-36px) translateY(8px); filter: blur(5px); }
  70% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: translate(0, 0); filter: blur(0); }
}

@keyframes revealFromRight {
  from { opacity: 0; transform: translateX(36px) translateY(8px); filter: blur(5px); }
  70% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: translate(0, 0); filter: blur(0); }
}

@keyframes revealMaskUp {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(12px); }
  to { opacity: 1; clip-path: inset(0 0 -12% 0); transform: translateY(0); }
}

@keyframes revealScaleSoft {
  from { opacity: 0; transform: scale(0.9) translateY(14px); filter: blur(6px); }
  70% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes revealBlurIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(11px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes revealFromBottom {
  from { opacity: 0; transform: translateY(42px) scale(0.98); }
  65% { transform: translateY(-4px) scale(1.005); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.inv[data-state='OPENED'] .step.is-active .reveal--left {
  animation: revealFromLeft 0.92s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--right {
  animation: revealFromRight 0.92s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--mask {
  animation: revealMaskUp 0.9s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--scale {
  animation: revealScaleSoft 0.95s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--blur {
  animation: revealBlurIn 1s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--bottom,
.inv[data-state='OPENED'] .step.is-active .reveal--up {
  animation: revealFromBottom 0.96s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

/* Header mỗi trang: 3 dòng xuất hiện theo 3 kiểu khác nhau. */
.inv[data-state='OPENED'] .step.is-active .step-head > :nth-child(1) {
  animation: revealMaskUp 0.85s var(--ease-out) both;
}

.inv[data-state='OPENED'] .step.is-active .step-head > :nth-child(2) {
  animation: revealScaleSoft 0.95s var(--ease-out) 0.08s both;
}

.inv[data-state='OPENED'] .step.is-active .step-head > :nth-child(3) {
  animation: revealFromLeft 0.9s var(--ease-out) 0.16s both;
  transform-origin: left center;
}

/* --------------------- 3. Tương phản chữ vàng trên nền kem --------------- */

[data-theme='G'] .step-eyebrow,
[data-theme='G'] .cover-eyebrow,
[data-theme='G'] .cover-guest__label,
[data-theme='G'] .family__label,
[data-theme='G'] .msg-foot,
[data-theme='G'] .gift-bank dt,
[data-theme='G'] .countdown__box small {
  color: #7d5426;
  font-weight: 700;
}

[data-theme='G'] .msg-addr,
[data-theme='G'] .gift-note,
[data-theme='G'] .lacy-map-note {
  color: #57422e;
}

[data-theme='G'] .lacy-map-addr {
  color: #55412d;
  font-weight: 500;
}

[data-theme='G'] .lacy-date-year-val,
[data-theme='G'] .date-lunar {
  color: #7c5a30;
}



/* ------------------------ 4. Countdown khung trang trí -------------------- */

[data-theme='G'] .countdown--arched {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 320px;
  margin: 8px auto 0;
  padding: 13px 10px 11px;
  border: 1.5px solid rgba(139, 100, 53, 0.58);
  border-radius: 20px 20px 16px 16px;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(255, 255, 255, 0.92), transparent 60%),
    linear-gradient(168deg, rgba(255, 253, 248, 0.94) 0%, rgba(246, 236, 220, 0.9) 100%);
  box-shadow:
    0 12px 30px rgba(74, 50, 26, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 4px rgba(255, 255, 255, 0.28);
}

[data-theme='G'] .countdown--arched::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(139, 100, 53, 0.28);
  border-radius: 15px 15px 12px 12px;
  pointer-events: none;
}

[data-theme='G'] .countdown--arched::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #fffdf8, #d9c39f);
  border: 1px solid rgba(139, 100, 53, 0.55);
  box-shadow: 0 2px 4px rgba(74, 50, 26, 0.18);
}

[data-theme='G'] .countdown__crown {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 62px;
  height: 12px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 50%, #b28a5d 0 2.2px, transparent 2.6px),
    linear-gradient(90deg, transparent, rgba(139, 100, 53, 0.55) 22%, transparent 48%, rgba(139, 100, 53, 0.55) 78%, transparent);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 100% 100%, 100% 1px;
  pointer-events: none;
}

[data-theme='G'] .countdown--arched .countdown__box {
  position: relative;
  min-width: 0;
  padding: 2px 2px 1px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

[data-theme='G'] .countdown--arched .countdown__box::before {
  display: none;
}

[data-theme='G'] .countdown--arched .countdown__box + .countdown__box::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(139, 100, 53, 0.34), transparent);
}

[data-theme='G'] .countdown__val {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.05;
  color: #3b2512;
  letter-spacing: 0.01em;
}

[data-theme='G'] .countdown__lbl {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #8b6435;
  text-transform: uppercase;
}

[data-theme='G'] .countdown__pearl {
  display: block;
  width: 4px;
  height: 4px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e7d6bb 60%, #c6a67d);
  box-shadow: 0 1px 2px rgba(74, 50, 26, 0.25);
}

/* ------------------------- 5. Trang bản đồ chi tiết ----------------------- */

[data-theme='G'] .step--map .step-inner {
  gap: 8px;
  max-width: min(100%, 330px);
}

.lacy-map-arch-window {
  width: min(232px, 66vw);
  height: min(236px, 29dvh);
  margin-bottom: 6px;
  border-width: 1.5px;
  box-shadow:
    0 14px 32px rgba(74, 50, 26, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.lacy-map-bg-img,
.lacy-map-iframe {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 0;
}

.lacy-map-iframe {
  filter: sepia(10%) saturate(0.92) contrast(1.02);
}

.lacy-map-arch-ring {
  position: absolute;
  inset: 6px 6px 5px;
  border: 1px solid rgba(255, 252, 246, 0.72);
  border-radius: 94px 94px 14px 14px;
  box-shadow: 0 0 0 1px rgba(139, 100, 53, 0.18) inset;
  pointer-events: none;
  z-index: 3;
}

.lacy-map-arch-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 35%, rgba(74, 50, 26, 0.12));
  pointer-events: none;
  z-index: 2;
}

.lacy-map-plaque {
  max-width: 252px;
  padding: 6px 14px 5px;
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.97), rgba(248, 239, 225, 0.94));
  box-shadow: 0 5px 16px rgba(74, 50, 26, 0.1), 0 1px 0 #fff inset;
}

.lacy-map-plaque-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #3a2815;
}

.lacy-map-addr {
  max-width: 270px;
  margin-bottom: 2px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #4a3826;
}

.lacy-map-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  width: 100%;
  max-width: 268px;
  margin-top: 2px;
}

.lacy-map-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 6px 5px;
  border: 1px solid rgba(139, 100, 53, 0.38);
  border-radius: 11px;
  background: rgba(255, 253, 248, 0.62);
  box-shadow: 0 3px 10px rgba(74, 50, 26, 0.06);
}

.lacy-map-fact span {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b6435;
}

.lacy-map-fact strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: #3b2512;
  line-height: 1.25;
}

.lacy-map-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
}

.lacy-map-actions .btn {
  min-height: 38px;
  padding: 0 16px;
  font-size: 11px;
}

.lacy-map-note {
  margin: 1px 0 0;
  max-width: 270px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  color: #4a3826;
}

/* ------------------------- 6. Album 2 hàng đều nhau ---------------------- */

.gallery--album {
  width: 100%;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.album-cell {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 100, 53, 0.5);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.6);
  box-shadow: 0 4px 12px rgba(74, 50, 26, 0.12);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.album-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out), filter 0.35s ease;
}

.album-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.5),
    inset 0 -26px 20px -22px rgba(58, 38, 18, 0.4);
  pointer-events: none;
}

.album-cell__shine {
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.6) 50%, transparent 68%);
  transition: transform 0.65s var(--ease-out);
  pointer-events: none;
}

.album-cell:hover img,
.album-cell:focus-visible img {
  transform: scale(1.07);
}

.album-cell:hover .album-cell__shine,
.album-cell:focus-visible .album-cell__shine {
  transform: translateX(130%);
}

@keyframes albumCellIn {
  from { opacity: 0; transform: translateY(22px) scale(0.9) rotate(-1.5deg); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
}

.inv[data-state='OPENED'] .step.is-active .album-cell {
  animation: albumCellIn 0.74s var(--ease-out) both;
  animation-delay: calc(140ms + var(--i, 0) * 62ms);
}

.gallery-hint {
  font-size: 10.5px;
  font-weight: 500;
  color: #57422e;
}

.gallery-quote {
  max-width: 30ch;
  margin: 0;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12.5px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: #4a3826;
  text-wrap: balance;
}

/* ------------------- 7. Xác nhận tham dự, Sổ lưu bút & Hộp mừng cưới ------
   Theme G: Unbox — không đóng khung, không tô nền cho khối form.
   Nền Frosted Glass chỉ đặt riêng cho từng field. ------------------------- */

[data-theme='G'] .step--rsvp .step-inner,
[data-theme='G'] .step--wishes .step-inner,
[data-theme='G'] .step--gift .step-inner {
  max-width: min(100%, 336px);
  gap: 7px;
  padding: 0 0 8px 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme='G'] .step--rsvp .step-head,
[data-theme='G'] .step--wishes .step-head,
[data-theme='G'] .step--gift .step-head {
  margin-bottom: 2px;
}

[data-theme='G'] .rsvp-note {
  max-width: 36ch;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12.5px;
  line-height: 1.45;
  color: #57422e;
  font-style: italic;
}

[data-theme='G'] .step--wishes .step-note {
  max-width: 34ch;
  margin: 0 auto;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
  color: #4a3624;
  font-style: italic;
}

.form-transparent--rsvp {
  gap: 7px;
}

.form-transparent--rsvp .field > label,
.form-transparent--rsvp .field > legend,
.form-transparent--wishes .field > label {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8b6435;
}

.form-transparent--rsvp input,
.form-transparent--rsvp select,
.form-transparent--rsvp textarea,
.form-transparent--wishes input,
.form-transparent--wishes textarea {
  min-height: 36px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  color: #3a2815;
  border-bottom-color: rgba(139, 100, 53, 0.45);
}

.form-transparent--rsvp textarea,
.form-transparent--wishes textarea {
  min-height: 54px;
}

.attend-options {
  display: grid;
  gap: 5px;
  width: 100%;
}

.attend-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(139, 100, 53, 0.4);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.55);
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #4a3826;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.attend-option input {
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
  accent-color: #a06f38;
  flex: 0 0 auto;
}

.attend-option:has(input:checked) {
  border-color: rgba(139, 100, 53, 0.8);
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.95), rgba(244, 230, 208, 0.82));
  box-shadow: 0 3px 10px rgba(139, 100, 53, 0.14);
}

.attend-option:hover {
  border-color: rgba(139, 100, 53, 0.68);
  background: rgba(255, 254, 250, 0.86);
}

.form-transparent .field-row {
  gap: 8px;
}

/* --- Theme G: nền Frosted Glass cho từng field (không đóng khung cả form) --- */

[data-theme='G'] .form-transparent--rsvp {
  gap: 7px;
  width: 100%;
}

[data-theme='G'] .form-transparent--rsvp .field > label,
[data-theme='G'] .form-transparent--rsvp .field > legend,
[data-theme='G'] .form-transparent--wishes .field > label {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #7c5528;
  margin-bottom: 1px;
}

[data-theme='G'] .form-transparent--rsvp input[type='text'],
[data-theme='G'] .form-transparent--rsvp input[type='tel'],
[data-theme='G'] .form-transparent--rsvp select,
[data-theme='G'] .form-transparent--rsvp textarea {
  width: 100%;
  min-height: 32px;
  padding: 4px 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: #3b2512;
  background: rgba(255, 253, 248, 0.85);
  border: 1px solid rgba(139, 100, 53, 0.4);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(74, 50, 26, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

[data-theme='G'] .form-transparent--rsvp input:focus,
[data-theme='G'] .form-transparent--rsvp select:focus,
[data-theme='G'] .form-transparent--rsvp textarea:focus {
  border-color: #8b6435;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(139, 100, 53, 0.18);
  outline: none;
}

[data-theme='G'] .form-transparent--rsvp input::placeholder,
[data-theme='G'] .form-transparent--rsvp textarea::placeholder {
  color: rgba(107, 85, 64, 0.6);
  font-style: italic;
}

/* Lựa chọn tham dự (Có / Không tham dự) — pill độc lập */
[data-theme='G'] .attend-options {
  display: grid;
  gap: 5px;
  width: 100%;
}

[data-theme='G'] .attend-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid rgba(139, 100, 53, 0.4);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.85);
  box-shadow: 0 1.5px 5px rgba(74, 50, 26, 0.05);
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13.5px;
  font-weight: 600;
  color: #4a3826;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme='G'] .attend-option:has(input:checked) {
  border-color: #8b6435;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(248, 238, 222, 0.9));
  box-shadow: 0 2px 8px rgba(139, 100, 53, 0.16);
}

[data-theme='G'] .attend-option:hover {
  border-color: rgba(139, 100, 53, 0.7);
  background: rgba(255, 255, 255, 0.95);
}

/* Nút CTA nổi bật cho form */
.btn.btn--cta,
[data-theme='G'] .btn.btn--cta {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid rgba(118, 72, 28, 0.6);
  background: linear-gradient(135deg, #c68a4e 0%, #a86f37 46%, #885223 100%);
  color: #fffaf0;
  box-shadow:
    0 12px 26px rgba(138, 85, 37, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.btn.btn--cta::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -55%;
  width: 38%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: left 0.55s var(--ease-out);
  pointer-events: none;
}

.btn.btn--cta:hover,
.btn.btn--cta:focus-visible {
  filter: brightness(1.06);
  box-shadow:
    0 16px 34px rgba(138, 85, 37, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  transform: translateY(-2px) scale(1.012);
}

.btn.btn--cta:hover::after,
.btn.btn--cta:focus-visible::after {
  left: 125%;
}

.btn.btn--cta:active {
  transform: translateY(0) scale(0.99);
}

[data-theme='G'] .btn--solid {
  border-color: rgba(118, 72, 28, 0.55);
  background: linear-gradient(135deg, #b97f43 0%, #98602c 55%, #7c4a1e 100%);
  color: #fffaf2;
  box-shadow: 0 10px 24px rgba(124, 74, 30, 0.3), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

[data-theme='G'] .btn--solid:hover,
[data-theme='G'] .btn--solid:focus-visible {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(124, 74, 30, 0.38);
}

/* ----------------- 8. Sổ lưu bút: tag lời chúc & ảnh cuối trang ---------- */

.wish-tags {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 10px;
  width: min(56%, 220px);
  z-index: 12;
  pointer-events: none;
}

.wish-tag {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px 6px;
  border: 1px solid rgba(139, 100, 53, 0.45);
  border-radius: 12px 12px 12px 4px;
  background: rgba(255, 253, 248, 0.88);
  box-shadow: 0 7px 20px rgba(74, 50, 26, 0.15), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
  transition: background 0.22s ease, box-shadow 0.22s ease, scale 0.22s var(--ease-out), opacity 0.45s ease;
  cursor: default;
}

.wish-tag.is-in {
  animation: wishTagIn 0.7s var(--ease-out) both, wishTagFloat 4.6s ease-in-out 0.7s infinite;
}

.wish-tag.is-out {
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.wish-tag:hover,
.wish-tag:focus-visible {
  background: #fffefa;
  box-shadow: 0 10px 26px rgba(74, 50, 26, 0.22);
  scale: 1.035;
  outline: none;
}

.wish-tag__name {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #6b4a22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wish-tag__msg {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 11px;
  line-height: 1.3;
  color: #4a3826;
  transition: -webkit-line-clamp 0.2s ease;
}

.wish-tag:hover .wish-tag__msg,
.wish-tag:focus-visible .wish-tag__msg {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

@keyframes wishTagIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.92); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes wishTagFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* --- Theme G: Sổ lưu bút — field độc lập & Marquee Ticker 1 dòng ---------- */

[data-theme='G'] .form-transparent--wishes {
  width: 100%;
  gap: 6px;
}

[data-theme='G'] .form-transparent--wishes input,
[data-theme='G'] .form-transparent--wishes textarea {
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #3b2512;
  background: rgba(255, 253, 248, 0.85);
  border: 1px solid rgba(139, 100, 53, 0.4);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(74, 50, 26, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

[data-theme='G'] .form-transparent--wishes textarea {
  min-height: 48px;
  resize: none;
}

[data-theme='G'] .form-transparent--wishes input:focus,
[data-theme='G'] .form-transparent--wishes textarea:focus {
  border-color: #8b6435;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(139, 100, 53, 0.18);
  outline: none;
}

[data-theme='G'] .form-transparent--wishes input::placeholder,
[data-theme='G'] .form-transparent--wishes textarea::placeholder {
  color: rgba(107, 85, 64, 0.6);
  font-style: italic;
}

/* Thanh lời chúc: marquee 1 dòng chạy ngang vô tận */
[data-theme='G'] .butterfly-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 326px;
  height: 32px;
  margin: 4px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(139, 100, 53, 0.4);
  box-shadow: 0 2px 8px rgba(74, 50, 26, 0.06);
  text-align: left;
}

[data-theme='G'] .butterfly-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='G'] .butterfly-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: butterflyTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='G'] .butterfly-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='G'] .butterfly-ticker:hover .butterfly-ticker__content,
[data-theme='G'] .butterfly-ticker:focus-within .butterfly-ticker__content {
  animation-play-state: paused;
}

[data-theme='G'] .butterfly-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  color: #4a3826;
}

[data-theme='G'] .butterfly-ticker__author {
  font-weight: 700;
  color: #7c5528;
}

[data-theme='G'] .butterfly-ticker__msg {
  font-style: italic;
  color: #3b2512;
}

[data-theme='G'] .butterfly-ticker__dot {
  margin-left: 6px;
  font-size: 12px;
  color: #b28a5d;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme='G'] .butterfly-ticker__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  [data-theme='G'] .butterfly-ticker__track::-webkit-scrollbar {
    display: none;
  }
  [data-theme='G'] .butterfly-ticker__content {
    animation: none;
  }
}

[data-theme='G'] .wish {
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.6);
  border-color: rgba(139, 100, 53, 0.3);
  box-shadow: 0 2px 8px rgba(74, 50, 26, 0.05);
}

[data-theme='G'] .wish__name {
  font-size: 11px;
  color: #3b2512;
}

[data-theme='G'] .wish__msg {
  font-size: 11.5px;
  color: #4a3826;
}

[data-theme='G'] .wish__time {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  color: #7c5a30;
}

.wishes-photo {
  position: relative;
  width: 100%;
  margin: 4px 0 0;
  overflow: hidden;
  border: 1px solid rgba(139, 100, 53, 0.42);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(74, 50, 26, 0.14);
  background: rgba(255, 253, 248, 0.55);
}

.wishes-photo img {
  width: 100%;
  height: clamp(82px, 15dvh, 128px);
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease-out);
}

.wishes-photo:hover img {
  transform: scale(1.04);
}

/* Theme G: ảnh kỷ niệm gọn trong 1 màn hình */
[data-theme='G'] .wishes-photo {
  position: relative;
  width: 100%;
  max-width: 326px;
  margin: 5px auto 0;
  overflow: hidden;
  border: 1px solid rgba(139, 100, 53, 0.42);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(74, 50, 26, 0.1);
  background: rgba(255, 253, 248, 0.6);
}

[data-theme='G'] .wishes-photo img {
  width: 100%;
  height: clamp(86px, 15dvh, 125px);
  object-fit: cover;
  object-position: center;
  display: block;
}

.wishes-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 8px 6px;
  background: linear-gradient(180deg, transparent, rgba(40, 26, 12, 0.78));
  color: #fffaf2;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ------------------------ 9. Hộp mừng cưới tinh tế ----------------------- */

[data-theme='G'] .step--gift .step-inner {
  min-height: auto;
  gap: 8px;
}

[data-theme='G'] .gift-bank {
  width: 100%;
  max-width: 326px;
  margin: 4px auto 0;
  padding: 4px 14px;
  border: 1px solid rgba(139, 100, 53, 0.38);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.88);
  box-shadow: 0 4px 14px rgba(74, 50, 26, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

[data-theme='G'] .gift-bank > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(139, 100, 53, 0.3);
}

[data-theme='G'] .gift-bank > div:last-child {
  border-bottom: none;
}

[data-theme='G'] .gift-bank dt {
  flex: 0 0 auto;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b6435;
}

[data-theme='G'] .gift-bank dd {
  margin: 0;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  color: #3b2512;
}

[data-theme='G'] .gift-bank__acc {
  font-family: 'Playfair Display', Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gift-qr {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffefa, #f8efe2);
  box-shadow: 0 10px 26px rgba(74, 50, 26, 0.16), 0 1px 0 #fff inset;
  cursor: zoom-in;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.gift-qr:active {
  transform: scale(0.985);
}

.gift-qr img {
  display: block;
  border-radius: 8px;
}

.gift-qr__hint {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(58, 40, 21, 0.66);
  color: #fffaf2;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
}

.gift-seal {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 4px auto 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 28%, #fffefb 0%, #fbf2e4 38%, #eeddc4 68%, #d7bb93 100%);
  border: 1px solid rgba(139, 100, 53, 0.55);
  box-shadow:
    0 10px 24px rgba(74, 50, 26, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  animation: giftSealPulse 4.2s ease-in-out infinite;
}

.gift-seal__ring {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(139, 100, 53, 0.4);
  border-radius: 50%;
}

.gift-seal__monogram {
  position: relative;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #4a3219;
}

.gift-seal__monogram span {
  font-family: var(--t-font-script, 'Pinyon Script', cursive);
  font-size: 16px;
  color: #a06f38;
  margin: 0 1px;
}

.gift-seal__heart {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: #b0684f;
}

.gift-quote {
  margin: 0;
  max-width: 28ch;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: #57422e;
}

@keyframes giftSealPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 24px rgba(74, 50, 26, 0.18), 0 1px 0 rgba(255, 255, 255, 0.9) inset; }
  50% { transform: scale(1.025); box-shadow: 0 14px 30px rgba(74, 50, 26, 0.22), 0 1px 0 rgba(255, 255, 255, 0.9) inset; }
}

/* ---------------------- 10. Scroll xuống: mờ + rung rinh ----------------- */

.stage-scroll-down-btn {
  background: rgba(255, 253, 249, 0.62);
  border-color: rgba(178, 138, 93, 0.42);
  box-shadow: 0 4px 16px rgba(74, 50, 26, 0.1), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  opacity: 0.82;
  animation: scrollBtnGlow 4.2s ease-in-out infinite;
}

.stage-scroll-down-btn:hover,
.stage-scroll-down-btn:focus-visible {
  opacity: 1;
  background: rgba(255, 254, 250, 0.92);
  box-shadow: 0 8px 24px rgba(74, 50, 26, 0.2), 0 1px 0 #fff inset;
}

.scroll-down-text {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a4632;
}

.scroll-arrow-bounce {
  color: #8b6435;
}

@keyframes scrollBtnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

/* Nhấp nháy nhẹ nhưng KHÔNG dịch chuyển nút → bấm rất ổn định trên mobile */
@keyframes scrollBtnGlow {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 0.97; }
}

.stage-music-btn {
  background: rgba(255, 253, 249, 0.66);
  opacity: 0.86;
}

.stage-music-btn:hover,
.stage-music-btn:focus-visible {
  opacity: 1;
}

/* ------------------------- 11. Bản đồ ảnh cho theme khác ----------------- */

.map-plate__img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.map-plate--photo .map-plate__well {
  border-radius: 12px;
  overflow: hidden;
}

.map-plate--photo .map-plate__well::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(60, 40, 20, 0.14));
  pointer-events: none;
}

/* ------------- 12. Laptop thấp / cửa sổ trình duyệt thấp ----------------- */

@media (max-height: 620px) {
  [data-theme='G'] .cover-name {
    font-size: clamp(22px, 4.4vw, 30px);
    line-height: 1.2;
  }

  [data-theme='G'] .cover-amp {
    font-size: 16px;
    margin: -3px 0;
  }

  [data-theme='G'] .cover-eyebrow {
    font-size: 8.5px;
  }

  [data-theme='G'] .cover-ceremony {
    font-size: 11px;
  }

  [data-theme='G'] .cover-date {
    font-size: 10.5px;
  }

  [data-theme='G'] .cover-guest {
    margin-top: 2px;
  }

  [data-theme='G'] .cover-guest__name {
    font-size: 14px;
  }

  [data-theme='G'] .star-divider {
    margin: 2px auto;
  }

  /* Không ép chiều cao tối thiểu ở màn hình thấp để tránh phải cuộn. */
  [data-theme='G'] .step--gift .step-inner {
    min-height: 0;
  }

  [data-theme='G'] .step--rsvp .step-inner,
  [data-theme='G'] .step--wishes .step-inner,
  [data-theme='G'] .step--gift .step-inner {
    overflow-y: auto;
  }

  [data-theme='G'] .countdown--arched {
    max-width: 300px;
    padding: 9px 8px 8px;
  }

  [data-theme='G'] .countdown__val {
    font-size: 16px;
  }

  [data-theme='G'] .countdown__lbl {
    font-size: 7px;
  }

  .lacy-map-arch-window {
    height: min(176px, 26dvh);
  }

  [data-theme='G'] .gift-seal {
    width: 68px;
    height: 68px;
  }

  [data-theme='G'] .gift-quote {
    font-size: 11px;
  }

  .wishes-photo img {
    height: 70px;
  }
}

@media (max-height: 460px) {
  [data-theme='G'] .cover-name {
    font-size: 21px;
  }

  [data-theme='G'] .cover-guest {
    margin-top: 0;
  }

  [data-theme='G'] .cover-date {
    margin-top: 1px;
  }

  [data-theme='G'] .gift-seal,
  [data-theme='G'] .gift-quote {
    display: none;
  }

  .wishes-photo,
  .gallery-quote,
  .step--gallery .star-divider {
    display: none;
  }

  /* Cửa sổ desktop rất thấp: thu gọn form để không phải cuộn. */
  [data-theme='G'] .step--rsvp .step-eyebrow,
  [data-theme='G'] .rsvp-note {
    display: none;
  }

  [data-theme='G'] .step--rsvp .step-title {
    font-size: 17px;
  }

  [data-theme='G'] .step--rsvp .step-rule {
    width: 44px;
    margin-top: 2px;
  }

  .form-transparent--rsvp {
    gap: 4px;
  }

  .form-transparent--rsvp input,
  .form-transparent--rsvp select {
    min-height: 30px;
  }

  .attend-option {
    min-height: 30px;
    font-size: 12px;
  }
}

@media (max-height: 460px) and (min-width: 768px) {
  .form-transparent--rsvp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 4px;
  }

  .form-transparent--rsvp > .field,
  .form-transparent--rsvp > .field--choice,
  .form-transparent--rsvp > .field-row,
  .form-transparent--rsvp > .form-action,
  .form-transparent--rsvp > .form-status {
    grid-column: 1 / -1;
  }

  .form-transparent--rsvp > .field:nth-of-type(1),
  .form-transparent--rsvp > .field:nth-of-type(2) {
    grid-column: span 1;
  }

  .form-transparent--rsvp .form-status {
    min-height: 10px;
    margin-top: 0;
  }

  .btn.btn--cta {
    min-height: 36px;
  }
}

/* -------------------------- 13. Tối ưu chuyển động ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .step,
  .inv[data-dir] .step.is-active {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   14. SMOOTH REVEAL, HÀNG ĐỢI LỜI CHÚC, BẢN ĐỒ & ALBUM (2026-11)
   ========================================================================== */

@keyframes smoothFadeInUp {
  from { opacity: 0; transform: translate3d(0, 42px, 0) scale(0.985); filter: blur(13px); }
  70% { opacity: 1; filter: blur(1.5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes smoothFadeInDown {
  from { opacity: 0; transform: translate3d(0, -30px, 0); filter: blur(13px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes smoothFadeInLeft {
  from { opacity: 0; transform: translate3d(-42px, 18px, 0); filter: blur(13px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes smoothFadeInRight {
  from { opacity: 0; transform: translate3d(42px, 18px, 0); filter: blur(13px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes smoothMaskUp {
  from { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 100% 0); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 -12% 0); filter: blur(0); }
}

@keyframes smoothFadeInScale {
  from { opacity: 0; transform: scale(0.9) translateY(26px); filter: blur(15px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes stepRuleGrow {
  from { opacity: 0; transform: scaleX(0.2); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes gentleDrift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* Tất cả phần tử mặc định: Smooth Fade In Up */
.inv[data-state='OPENED'] .step.is-active .reveal {
  animation: smoothFadeInUp 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 160ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--left {
  animation: smoothFadeInLeft 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 160ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--right {
  animation: smoothFadeInRight 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 160ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--mask {
  animation: smoothMaskUp 1.02s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 160ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--scale {
  animation: smoothFadeInScale 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 160ms);
}

.inv[data-state='OPENED'] .step.is-active .reveal--blur,
.inv[data-state='OPENED'] .step.is-active .reveal--bottom,
.inv[data-state='OPENED'] .step.is-active .reveal--up {
  animation: smoothFadeInUp 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 160ms);
}

/* Các lớp hiệu ứng cũ vẫn được dùng ở một số mẫu thiệp → đồng bộ về smooth */
.inv[data-state='OPENED'] .step.is-active .reveal-fly,
.inv[data-state='OPENED'] .step.is-active .reveal-unroll,
.inv[data-state='OPENED'] .step.is-active .reveal-unroll-gallery {
  animation: smoothFadeInScale 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d, 0ms) + 160ms);
}

/* Header: eyebrow từ trên xuống, tiêu đề từ dưới lên, đường kẻ mở từ giữa */
.inv[data-state='OPENED'] .step.is-active .step-head > :nth-child(1) {
  animation: smoothFadeInDown 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}

.inv[data-state='OPENED'] .step.is-active .step-head > :nth-child(2) {
  animation: smoothFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.inv[data-state='OPENED'] .step.is-active .step-head > :nth-child(3) {
  animation: stepRuleGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
  transform-origin: center;
}

/* Họa tiết ngôi sao trôi nhẹ sau khi xuất hiện */
.inv[data-state='OPENED'] .step.is-active .star-divider.reveal {
  animation:
    smoothFadeInUp 1.05s cubic-bezier(0.16, 1, 0.3, 1) both,
    gentleDrift 6.5s ease-in-out 1.3s infinite;
  animation-delay: calc(var(--d, 0ms) + 160ms), calc(var(--d, 0ms) + 1.3s);
}

/* ------------------------- Bản đồ: ghim chibi nhún nhảy ------------------ */

@keyframes chibiPinBounce {
  0%, 100% { transform: translate(-50%, 0) scale(1) rotate(0deg); }
  18% { transform: translate(-50%, -8px) scale(1.045) rotate(-2.5deg); }
  36% { transform: translate(-50%, -2px) scale(0.985) rotate(1.5deg); }
  54% { transform: translate(-50%, -6px) scale(1.035) rotate(-1.5deg); }
  72% { transform: translate(-50%, 0) scale(1) rotate(0.5deg); }
}

.step.is-active .lacy-map-pin-img {
  animation:
    mapPinDropBounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both,
    chibiPinBounce 2.4s ease-in-out 1.15s infinite;
}

[data-theme='G'] .step--map .step-inner {
  gap: 11px;
}

.lacy-map-card {
  gap: 2px;
}

.lacy-map-arch-window {
  margin-bottom: 10px;
}

.lacy-map-plaque {
  margin-bottom: 8px;
  padding: 7px 15px 6px;
}

.lacy-map-addr {
  margin-bottom: 8px;
}

.lacy-map-facts {
  gap: 10px;
  margin-top: 5px;
}

.lacy-map-actions {
  gap: 10px;
  margin-top: 8px;
}

.lacy-map-note {
  margin-top: 7px;
}

/* ------------------------------ Album ảnh ------------------------------- */

@keyframes albumSmoothIn {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.inv[data-state='OPENED'] .step.is-active .album-cell {
  animation: albumSmoothIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(120ms + var(--i, 0) * 62ms);
}

.album-cell {
  transition:
    border-color 0.3s ease,
    box-shadow 0.35s ease,
    transform 0.35s var(--ease-out);
}

.album-cell:hover,
.album-cell:focus-visible {
  border-color: rgba(178, 138, 93, 0.95);
  box-shadow:
    0 0 0 2px rgba(255, 250, 240, 0.95),
    0 0 24px rgba(178, 138, 93, 0.55),
    0 16px 34px rgba(74, 50, 26, 0.22);
  transform: translateY(-2px);
}

.album-cell:hover img,
.album-cell:focus-visible img {
  transform: scale(1.08);
}

/* ---------------------- Hàng đợi lời chúc (không tag) -------------------- */

.wishes-scroll {
  height: clamp(132px, 22dvh, 196px);
  max-height: none;
  flex: 0 0 auto;
  overflow: hidden;
  cursor: default;
  padding: 2px 4px;
  gap: 7px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.wishes-scroll.is-scrolling-up {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 82%, transparent 100%);
}

.wish__time {
  display: none;
}

.wish--queue {
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.42s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    box-shadow 0.25s ease;
}

.wish--queue.wish--pre-up {
  opacity: 0;
  transform: translateY(20px);
}

.wish--queue.wish--pre-down {
  opacity: 0;
  transform: translateY(-18px);
}

.wish--queue.is-leaving-down {
  opacity: 0;
  transform: translateY(18px);
}

@keyframes wishNewPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(74, 50, 26, 0.05);
    border-color: rgba(139, 100, 53, 0.3);
  }
  35%, 65% {
    box-shadow:
      0 0 0 2px rgba(255, 249, 236, 0.9),
      0 0 22px rgba(178, 138, 93, 0.52),
      0 6px 18px rgba(74, 50, 26, 0.14);
    border-color: rgba(178, 138, 93, 0.92);
  }
}

.wish--queue.is-new {
  animation: wishNewPulse 1.15s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .wish--queue,
  .wish--queue.wish--pre-up,
  .wish--queue.wish--pre-down,
  .wish--queue.is-leaving-down {
    opacity: 1 !important;
    transform: none !important;
  }

  .inv[data-state='OPENED'] .step.is-active .reveal,
  .inv[data-state='OPENED'] .step.is-active .reveal--left,
  .inv[data-state='OPENED'] .step.is-active .reveal--right,
  .inv[data-state='OPENED'] .step.is-active .reveal--mask,
  .inv[data-state='OPENED'] .step.is-active .reveal--scale,
  .inv[data-state='OPENED'] .step.is-active .reveal--blur,
  .inv[data-state='OPENED'] .step.is-active .reveal--bottom,
  .inv[data-state='OPENED'] .step.is-active .reveal--up,
  .inv[data-state='OPENED'] .step.is-active .album-cell {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* ==========================================================================
   15. ĐỒNG BỘ GIAO DIỆN CHO TẤT CẢ CÁC MẪU THIỆP A → K
   (Theme G đã có bản riêng ở trên; các rule dưới đây áp dụng cho phần còn lại)
   ========================================================================== */

/* ----------------------- Countdown khung trang trí ----------------------- */

.countdown.countdown--arched {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 318px;
  margin: 8px auto 0;
  padding: 13px 10px 11px;
  border: 1.5px solid color-mix(in srgb, var(--t-gold, var(--gold)) 58%, transparent);
  border-radius: 20px 20px 16px 16px;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(255, 255, 255, 0.92), transparent 60%),
    linear-gradient(
      168deg,
      color-mix(in srgb, var(--t-paper, #fdfbf6) 94%, #fff) 0%,
      color-mix(in srgb, var(--t-paper-deep, #f4efe4) 90%, #fff) 100%
    );
  box-shadow:
    0 12px 30px rgba(74, 50, 26, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 4px rgba(255, 255, 255, 0.24);
}

.countdown--arched::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--t-gold, var(--gold)) 28%, transparent);
  border-radius: 15px 15px 12px 12px;
  pointer-events: none;
}

.countdown--arched::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--t-paper, #fdfbf6) 90%, #fff),
    color-mix(in srgb, var(--t-gold-soft, #dfc8a5) 75%, #fff)
  );
  border: 1px solid color-mix(in srgb, var(--t-gold, var(--gold)) 55%, transparent);
  box-shadow: 0 2px 4px rgba(74, 50, 26, 0.18);
}

.countdown__crown {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 62px;
  height: 12px;
  transform: translateX(-50%);
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--t-gold, var(--gold)) 90%, #fff) 0 2.2px,
      transparent 2.6px
    ),
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--t-gold, var(--gold)) 55%, transparent) 22%,
      transparent 48%,
      color-mix(in srgb, var(--t-gold, var(--gold)) 55%, transparent) 78%,
      transparent
    );
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 100% 100%, 100% 1px;
  pointer-events: none;
}

.countdown--arched .countdown__box {
  position: relative;
  min-width: 0;
  padding: 2px 2px 1px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.countdown--arched .countdown__box::before {
  display: none;
}

.countdown--arched .countdown__box + .countdown__box::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--t-gold, var(--gold)) 34%, transparent),
    transparent
  );
}

.countdown--arched .countdown__val {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--t-ink, var(--ink));
  letter-spacing: 0.01em;
}

.countdown--arched .countdown__lbl {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--t-gold, var(--gold-deep));
  text-transform: uppercase;
}

.countdown--arched .countdown__pearl {
  display: block;
  width: 4px;
  height: 4px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #fff,
    color-mix(in srgb, var(--t-gold-soft, #dfc8a5) 80%, #fff) 60%,
    color-mix(in srgb, var(--t-gold, var(--gold)) 65%, #fff)
  );
  box-shadow: 0 1px 2px rgba(74, 50, 26, 0.25);
}

/* ---------------------- Bản đồ: bố cục thoáng, đủ chi tiết ---------------- */

.step--map .step-inner {
  gap: 9px;
}

.lacy-map-facts {
  margin-top: 6px;
  gap: 8px;
}

.lacy-map-actions {
  margin-top: 6px;
  gap: 8px;
}

.lacy-map-note {
  margin-top: 4px;
}

.lacy-map-actions .btn {
  min-height: 38px;
  padding: 0 16px;
  font-size: 10.5px;
}

/* ------------------------ Hộp mừng cưới đồng bộ ------------------------- */

.gift-bank {
  width: 100%;
  max-width: none;
  margin: 2px 0 0;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--t-gold, var(--gold)) 38%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--t-paper, #fdfbf6) 58%, transparent);
  box-shadow: 0 4px 14px rgba(74, 50, 26, 0.06);
}

.gift-bank > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--t-gold, var(--gold)) 28%, transparent);
}

.gift-bank > div:last-child {
  border-bottom: 0;
}

.gift-bank dt {
  flex: 0 0 auto;
  font-family: var(--t-font-body, var(--font-body));
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-gold, var(--gold-deep));
}

.gift-bank dd {
  margin: 0;
  font-family: var(--t-font-body, var(--font-body));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  color: var(--t-ink, var(--ink));
}

.gift-bank__acc {
  font-family: var(--t-font-display, var(--font-display));
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------------------- Album: hiệu ứng & viền sáng --------------------- */

.album-cell:hover,
.album-cell:focus-visible {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--t-paper, #fff) 92%, #fff),
    0 0 24px color-mix(in srgb, var(--t-gold, var(--gold)) 52%, transparent),
    0 16px 34px rgba(74, 50, 26, 0.22);
}

/* ---------------------------- QR dễ nhìn hơn ---------------------------- */

.gift-qr {
  cursor: zoom-in;
  touch-action: manipulation;
}

@media (max-width: 767px) {
  .map-plate--framed {
    max-width: 260px;
  }

  /* Các theme có khung bản đồ riêng đã có họa tiết hoa ở đáy → bỏ ghi chú
     để chữ không nằm đè lên họa tiết. */
  .map-plate--framed ~ .lacy-map-note {
    display: none;
  }

  .countdown.countdown--arched {
    max-width: 300px;
    padding: 11px 7px 9px;
  }

  .countdown--arched .countdown__val {
    font-size: 18px;
  }

  .countdown--arched .countdown__lbl {
    font-size: 7.5px;
    letter-spacing: 0.14em;
  }

  .lacy-map-actions .btn {
    min-height: 36px;
    font-size: 10px;
  }

  .lacy-map-facts {
    max-width: 250px;
  }
}

/* ==========================================================================
   16. THEME A — ÉLYSÉE SAGE: NÚT MỞ THIỆP, ĐIỀU HƯỚNG & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

/* Nút mở thiệp lơ lửng thay cho vòng tròn ripple + dòng chữ gợi ý */
.intro--theme-A .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

.intro--theme-A .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(250, 255, 247, 0.92));
}

.intro--theme-A .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(250, 255, 247, 0.92));
}

.intro--theme-A .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #e8f0e4 56%, #b9cbb8);
  box-shadow: rgba(38, 58, 42, 0.3) 0 1.5px 2px;
}

.intro--theme-A .intro__btn-ring {
  border-color: rgba(83, 113, 89, 0.9);
}

.intro--theme-A .intro__btn-body {
  border-color: rgba(74, 104, 80, 0.62);
  background: linear-gradient(118deg, #f7fbf4 0%, #e4eee1 46%, #f8fcf5 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(34, 56, 42, 0.24) 0 10px 24px,
    rgba(34, 56, 42, 0.13) 0 2px 6px;
}

.intro--theme-A .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(132, 164, 137, 0.28),
    rgba(252, 255, 248, 0.6),
    transparent
  );
}

.intro--theme-A .intro__btn-text {
  color: #243a2b;
}

/* Thanh cuộn xuống + nút nhạc kiểu G nhưng tông xanh sage */
[data-theme='A'] .stage-scroll-down-btn {
  background: rgba(244, 248, 242, 0.68);
  border-color: rgba(74, 104, 80, 0.48);
  color: #243a2b;
  box-shadow:
    0 5px 18px rgba(34, 56, 42, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  opacity: 0.88;
}

[data-theme='A'] .stage-scroll-down-btn:hover,
[data-theme='A'] .stage-scroll-down-btn:focus-visible {
  background: rgba(250, 253, 247, 0.96);
  box-shadow:
    0 9px 26px rgba(34, 56, 42, 0.24),
    0 1px 0 #fff inset;
}

[data-theme='A'] .scroll-down-text {
  color: #243a2b;
}

[data-theme='A'] .scroll-arrow-bounce {
  color: #557a5e;
}

[data-theme='A'] .stage-music-btn {
  background: rgba(244, 248, 242, 0.7);
  border-color: rgba(74, 104, 80, 0.48);
  color: #2d4936;
  box-shadow:
    0 5px 18px rgba(34, 56, 42, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  opacity: 0.9;
}

[data-theme='A'] .stage-music-btn:hover,
[data-theme='A'] .stage-music-btn:focus-visible {
  background: #fbfdf9;
  opacity: 1;
}

/* ==========================================================================
   17. ICON ĐỊNH VỊ CHIBI + THEME B — BLUSH GARDEN
   ========================================================================== */

/* Icon chibi cô dâu/chú rể cho bản đồ của mọi mẫu thiệp */
.map-pin--chibi {
  top: 50%;
  left: 50%;
  width: 44px;
  height: auto;
  z-index: 4;
  transform: translate(-50%, -50%);
  transform-origin: center bottom;
  pointer-events: none;
  filter:
    drop-shadow(0 0 5px rgba(255, 252, 245, 0.9))
    drop-shadow(0 5px 10px rgba(38, 24, 16, 0.42));
  animation: none;
}

.map-plate--framed .map-pin--chibi {
  /* Tâm của ô bản đồ nằm trong khung: inset 19% 13% 40% */
  top: 39.5%;
}

@keyframes chibiMapPinDrop {
  0% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.35);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.12);
  }
  75% {
    transform: translate(-50%, -46%) scale(0.94);
  }
  90% {
    transform: translate(-50%, -52%) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes chibiMapPinBounce {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  18% {
    transform: translate(-50%, -60%) scale(1.045) rotate(-2.5deg);
  }
  36% {
    transform: translate(-50%, -48%) scale(0.985) rotate(1.5deg);
  }
  54% {
    transform: translate(-50%, -57%) scale(1.035) rotate(-1.5deg);
  }
  72% {
    transform: translate(-50%, -50%) scale(1) rotate(0.5deg);
  }
}

.step.is-active .map-pin--chibi {
  animation:
    chibiMapPinDrop 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s both,
    chibiMapPinBounce 2.6s ease-in-out 1.25s infinite;
}

/* ------------------------- Theme B — Blush Garden ------------------------ */

/* Hạ thấp nút mở thiệp xuống sát mép đáy phong bì cho thoáng phần trên. */
.intro--theme-B .intro__luxury-btn {
  top: 83%;
  bottom: auto;
  margin-top: 0;
}

@media (max-height: 680px) {
  .intro--theme-B .intro__luxury-btn {
    top: 85%;
  }
}

.intro--theme-B .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(255, 250, 248, 0.95));
}

.intro--theme-B .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(255, 250, 248, 0.95));
}

.intro--theme-B .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #fdeeed 56%, #d9a9ab);
  box-shadow: rgba(74, 38, 42, 0.3) 0 1.5px 2px;
}

.intro--theme-B .intro__btn-ring {
  border-color: rgba(164, 101, 106, 0.9);
}

.intro--theme-B .intro__btn-body {
  border-color: rgba(154, 93, 98, 0.58);
  background: linear-gradient(118deg, #fff9f7 0%, #f7e6e3 46%, #fffaf8 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(58, 30, 33, 0.24) 0 10px 24px,
    rgba(58, 30, 33, 0.13) 0 2px 6px;
}

.intro--theme-B .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(213, 157, 161, 0.28),
    rgba(255, 250, 248, 0.62),
    transparent
  );
}

.intro--theme-B .intro__btn-text {
  color: #3a1e21;
}

[data-theme='B'] .stage-scroll-down-btn {
  background: rgba(255, 249, 247, 0.7);
  border-color: rgba(154, 93, 98, 0.45);
  color: #4a252a;
  box-shadow:
    0 5px 18px rgba(74, 38, 42, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

[data-theme='B'] .stage-scroll-down-btn:hover,
[data-theme='B'] .stage-scroll-down-btn:focus-visible {
  background: rgba(255, 252, 250, 0.97);
  box-shadow:
    0 9px 26px rgba(74, 38, 42, 0.24),
    0 1px 0 #fff inset;
}

[data-theme='B'] .scroll-down-text {
  color: #4a252a;
}

[data-theme='B'] .scroll-arrow-bounce {
  color: #a05f63;
}

[data-theme='B'] .stage-music-btn {
  background: rgba(255, 249, 247, 0.72);
  border-color: rgba(154, 93, 98, 0.45);
  color: #5a3035;
  box-shadow:
    0 5px 18px rgba(74, 38, 42, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

[data-theme='B'] .stage-music-btn:hover,
[data-theme='B'] .stage-music-btn:focus-visible {
  background: #fffdfb;
}

/* Độ tương phản chữ theme B */
[data-theme='B'] .step-title,
[data-theme='B'] .cover-name {
  color: #33191c;
}

[data-theme='B'] .step-eyebrow,
[data-theme='B'] .cover-eyebrow,
[data-theme='B'] .cover-guest__label,
[data-theme='B'] .family__label,
[data-theme='B'] .msg-foot {
  color: #8a4a45;
  font-weight: 700;
}

[data-theme='B'] .cover-ceremony,
[data-theme='B'] .cover-date,
[data-theme='B'] .msg-addr,
[data-theme='B'] .date-lunar,
[data-theme='B'] .venue-address {
  color: #56353a;
}

[data-theme='B'] .msg-lead,
[data-theme='B'] .family__names,
[data-theme='B'] .cover-guest__name {
  color: #3a1e21;
  font-weight: 600;
}

/* ==========================================================================
   18. THEME C — ORCHIDÉE: NÚT MỞ THIỆP, ĐIỀU HƯỚNG & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

.intro--theme-C .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

.intro--theme-C .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(255, 252, 244, 0.95));
}

.intro--theme-C .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(255, 252, 244, 0.95));
}

.intro--theme-C .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #fbf3e6 56%, #d8c09a);
  box-shadow: rgba(74, 52, 26, 0.3) 0 1.5px 2px;
}

.intro--theme-C .intro__btn-ring {
  border-color: rgba(158, 123, 73, 0.9);
}

.intro--theme-C .intro__btn-body {
  border-color: rgba(150, 116, 68, 0.6);
  background: linear-gradient(118deg, #fffdf8 0%, #f3ebdd 46%, #fffdf9 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(51, 36, 31, 0.24) 0 10px 24px,
    rgba(51, 36, 31, 0.13) 0 2px 6px;
}

.intro--theme-C .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 167, 184, 0.28),
    rgba(255, 253, 246, 0.62),
    transparent
  );
}

.intro--theme-C .intro__btn-text {
  color: #3a2b26;
}

[data-theme='C'] .stage-scroll-down-btn {
  background: rgba(255, 252, 246, 0.7);
  border-color: rgba(150, 116, 68, 0.45);
  color: #4a352d;
  box-shadow:
    0 5px 18px rgba(51, 36, 31, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

[data-theme='C'] .stage-scroll-down-btn:hover,
[data-theme='C'] .stage-scroll-down-btn:focus-visible {
  background: rgba(255, 254, 250, 0.97);
  box-shadow:
    0 9px 26px rgba(51, 36, 31, 0.24),
    0 1px 0 #fff inset;
}

[data-theme='C'] .scroll-down-text {
  color: #4a352d;
}

[data-theme='C'] .scroll-arrow-bounce {
  color: #8a6a32;
}

[data-theme='C'] .stage-music-btn {
  background: rgba(255, 252, 246, 0.72);
  border-color: rgba(150, 116, 68, 0.45);
  color: #5a4334;
  box-shadow:
    0 5px 18px rgba(51, 36, 31, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

[data-theme='C'] .stage-music-btn:hover,
[data-theme='C'] .stage-music-btn:focus-visible {
  background: #fffefb;
}

/* Độ tương phản chữ theme C */
[data-theme='C'] .step-title,
[data-theme='C'] .cover-name {
  color: #2f211c;
}

[data-theme='C'] .step-eyebrow,
[data-theme='C'] .cover-eyebrow,
[data-theme='C'] .cover-guest__label,
[data-theme='C'] .family__label,
[data-theme='C'] .msg-foot {
  color: #7a5a27;
  font-weight: 700;
}

[data-theme='C'] .cover-ceremony,
[data-theme='C'] .cover-date,
[data-theme='C'] .msg-addr,
[data-theme='C'] .date-lunar,
[data-theme='C'] .venue-address {
  color: #49342d;
}

[data-theme='C'] .msg-lead,
[data-theme='C'] .family__names,
[data-theme='C'] .cover-guest__name {
  color: #33241f;
  font-weight: 600;
}

/* ==========================================================================
   19. THEME D — CANDELA: NÚT MỞ THIỆP, ĐIỀU HƯỚNG & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

.intro--theme-D .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

.intro--theme-D .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(255, 251, 240, 0.95));
}

.intro--theme-D .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(255, 251, 240, 0.95));
}

.intro--theme-D .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #fdf5e6 56%, #dcc39c);
  box-shadow: rgba(74, 50, 26, 0.32) 0 1.5px 2px;
}

.intro--theme-D .intro__btn-ring {
  border-color: rgba(150, 110, 50, 0.92);
}

.intro--theme-D .intro__btn-body {
  border-color: rgba(146, 106, 46, 0.62);
  background: linear-gradient(118deg, #fffdf7 0%, #f7ecd9 46%, #fffdf8 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(58, 40, 18, 0.26) 0 10px 24px,
    rgba(58, 40, 18, 0.14) 0 2px 6px;
}

.intro--theme-D .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(217, 177, 113, 0.32),
    rgba(255, 250, 236, 0.65),
    transparent
  );
}

.intro--theme-D .intro__btn-text {
  color: #47301a;
}

[data-theme='D'] .stage-scroll-down-btn {
  background: rgba(255, 253, 247, 0.78);
  border-color: rgba(146, 106, 46, 0.5);
  color: #47301a;
  box-shadow:
    0 5px 18px rgba(58, 40, 18, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='D'] .stage-scroll-down-btn:hover,
[data-theme='D'] .stage-scroll-down-btn:focus-visible {
  background: rgba(255, 254, 250, 0.98);
  box-shadow:
    0 9px 26px rgba(58, 40, 18, 0.26),
    0 1px 0 #fff inset;
}

[data-theme='D'] .scroll-down-text {
  color: #47301a;
}

[data-theme='D'] .scroll-arrow-bounce {
  color: #8a5f22;
}

[data-theme='D'] .stage-music-btn {
  background: rgba(255, 253, 247, 0.8);
  border-color: rgba(146, 106, 46, 0.5);
  color: #553a20;
  box-shadow:
    0 5px 18px rgba(58, 40, 18, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='D'] .stage-music-btn:hover,
[data-theme='D'] .stage-music-btn:focus-visible {
  background: #fffefb;
}

/* Độ tương phản chữ theme D (nền tường kem + khung phù điêu sáng) */
[data-theme='D'] .step-title,
[data-theme='D'] .cover-name {
  color: #33220f;
  font-weight: 700;
}

[data-theme='D'] .step-eyebrow,
[data-theme='D'] .cover-eyebrow,
[data-theme='D'] .cover-guest__label,
[data-theme='D'] .family__label,
[data-theme='D'] .msg-foot,
[data-theme='D'] .gift-bank dt,
[data-theme='D'] .countdown__lbl {
  color: #6b4a1b;
  font-weight: 700;
}

[data-theme='D'] .cover-ceremony,
[data-theme='D'] .cover-date,
[data-theme='D'] .msg-addr,
[data-theme='D'] .date-lunar,
[data-theme='D'] .venue-address,
[data-theme='D'] .gallery-hint,
[data-theme='D'] .gallery-quote,
[data-theme='D'] .gift-note,
[data-theme='D'] .form-status,
[data-theme='D'] .wishes-empty {
  color: #4a3420;
  font-weight: 700;
}

[data-theme='D'] .cover-ceremony,
[data-theme='D'] .cover-date {
  font-size: 13.5px;
  letter-spacing: 0.14em;
}

/* Dải ngày cưới & tên khách đặt trên "thẻ giấy" mờ để không chìm vào phù điêu */
[data-theme='D'] .cover-date,
[data-theme='D'] .cover-guest {
  background: rgba(253, 249, 240, 0.86);
  border: 1px solid rgba(150, 110, 50, 0.28);
  border-radius: 12px;
  padding: 3px 13px;
  box-shadow: 0 3px 10px rgba(58, 40, 18, 0.08);
}

[data-theme='D'] .cover-guest {
  padding: 5px 15px 6px;
}

[data-theme='D'] .cover-eyebrow,
[data-theme='D'] .cover-guest__label {
  font-size: 10px;
  letter-spacing: 0.2em;
}

[data-theme='D'] .msg-lead,
[data-theme='D'] .family__names,
[data-theme='D'] .family__child,
[data-theme='D'] .cover-guest__name {
  color: #3a2812;
  font-weight: 600;
}

[data-theme='D'] .countdown--arched .countdown__val {
  color: #2f1e0b;
}

/* Trang thời gian: xếp dọc để nằm gọn trong lòng khung oval */
[data-theme='D'] .date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 240px;
}

[data-theme='D'] .date-weekday,
[data-theme='D'] .date-time {
  color: #5b3f1c;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme='D'] .date-weekday {
  font-size: 9px;
  letter-spacing: 0.16em;
}

[data-theme='D'] .date-main {
  padding: 0;
}

[data-theme='D'] .date-time {
  font-size: 13px;
  letter-spacing: 0.06em;
}

[data-theme='D'] .date-my {
  font-size: 8px;
}

[data-theme='D'] .date-day {
  font-size: clamp(24px, 7.4vw, 30px);
}

[data-theme='D'] .date-lunar {
  color: #44301a;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(253, 249, 240, 0.88);
  border: 1px solid rgba(150, 110, 50, 0.24);
  border-radius: 999px;
  padding: 2px 14px;
}

[data-theme='D'] .step--date .step-inner {
  gap: 6px;
  transform: translateY(calc(-10px + var(--step-shift, 0%)));
}

[data-theme='D'] .date-day,
[data-theme='D'] .date-my {
  color: #2f1e0b;
  font-weight: 700;
}

/* Trang bản đồ: chữ và ô thông tin rõ hơn trên nền phù điêu */
[data-theme='D'] .step--map .step-inner {
  padding-top: 14px;
  gap: 7px;
}

[data-theme='D'] .step--map .step-head {
  background: rgba(253, 249, 240, 0.88);
  border: 1px solid rgba(150, 110, 50, 0.22);
  border-radius: 14px;
  padding: 6px 18px 7px;
}

[data-theme='D'] .step--map .venue-address {
  background: rgba(253, 249, 240, 0.84);
  border-radius: 999px;
  padding: 2px 14px;
  max-width: 300px;
}

/* Khung bản đồ đã có phù điêu trang trí nên bỏ dòng ghi chú dài */
[data-theme='D'] .lacy-map-note {
  display: none;
}

[data-theme='D'] .lacy-map-fact {
  background: rgba(255, 253, 248, 0.9);
  border-color: rgba(122, 84, 32, 0.45);
}

[data-theme='D'] .lacy-map-fact span {
  color: #6b4a1b;
}

[data-theme='D'] .lacy-map-fact strong {
  color: #2f1e0b;
}

[data-theme='D'] .lacy-map-note {
  color: #4a3420;
  font-weight: 600;
}

[data-theme='D'] .lacy-map-actions .btn--ornate {
  background: rgba(255, 253, 247, 0.82);
}

/* Trang RSVP & sổ lưu bút: né họa tiết ở đầu tờ giấy */
[data-theme='D'] .step--rsvp .step-inner,
[data-theme='D'] .step--wishes .step-inner {
  padding-top: 16px;
}

[data-theme='D'] .step--rsvp .step-inner > .rsvp-note,
[data-theme='D'] .step--wishes .step-inner > .wishes-note {
  margin-top: 16px;
}

[data-theme='D'] .form-transparent--wishes {
  margin-top: 22px;
}

/* Tấm giấy mờ phía sau form để chữ không chồng lên họa tiết phù điêu */
[data-theme='D'] .form-transparent--rsvp,
[data-theme='D'] .form-transparent--wishes {
  background: rgba(253, 249, 241, 0.9);
  border: 1px solid rgba(150, 110, 50, 0.26);
  border-radius: 16px;
  padding: 12px 13px 14px;
  box-shadow: 0 6px 18px rgba(58, 40, 18, 0.07);
}

[data-theme='D'] .step--rsvp .rsvp-note,
[data-theme='D'] .step--wishes .wishes-note,
[data-theme='D'] .step--wishes .step-note {
  background: rgba(253, 249, 241, 0.86);
  border: 1px solid rgba(150, 110, 50, 0.22);
  border-radius: 12px;
  padding: 6px 12px;
  color: #3a2812;
  font-weight: 600;
}

@media (max-height: 680px) {
  [data-theme='D'] .step--rsvp .step-inner,
  [data-theme='D'] .step--wishes .step-inner {
    padding-top: 6px;
    gap: 6px;
  }

  [data-theme='D'] .step--rsvp .step-inner > .rsvp-note,
  [data-theme='D'] .step--wishes .step-inner > .wishes-note {
    margin-top: 6px;
  }

  [data-theme='D'] .form-transparent--wishes {
    margin-top: 10px;
  }

  [data-theme='D'] .step--rsvp .form-transparent {
    gap: 5px;
  }

  [data-theme='D'] .form-transparent--rsvp,
  [data-theme='D'] .form-transparent--wishes {
    padding: 8px 10px 10px;
  }
}

@media (max-height: 600px) {
  [data-theme='D'] .step--rsvp .step-inner {
    gap: 4px;
  }

  /* Màn hình thấp: ẩn dòng mô tả phụ để form vừa một màn */
  [data-theme='D'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='D'] .step--rsvp .step-title {
    font-size: 17px;
  }

  [data-theme='D'] .step--rsvp .step-title {
  font-size: 16px;
}

[data-theme='D'] .step--rsvp .step-eyebrow {
  font-size: 9px;
}

[data-theme='D'] .step--rsvp .step-rule {
  margin: 2px auto;
}

[data-theme='D'] .step--rsvp .form-status {
  min-height: 10px;
  margin: 2px 0 0;
}

[data-theme='D'] .step--rsvp .form-transparent .field > label,
  [data-theme='D'] .step--rsvp .form-transparent .field > legend {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  [data-theme='D'] .step--rsvp .form-transparent input,
  [data-theme='D'] .step--rsvp .form-transparent select,
  [data-theme='D'] .step--rsvp .form-transparent textarea {
    min-height: 28px;
    font-size: 14px;
    padding: 2px;
  }

  [data-theme='D'] .step--rsvp .form-transparent textarea {
    min-height: 34px;
  }

  [data-theme='D'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 13px;
  }

  [data-theme='D'] .step--rsvp .form-transparent .field-row {
    gap: 8px;
  }

  [data-theme='D'] .step--rsvp .form-transparent--rsvp {
    padding: 6px 9px 8px;
  }

  [data-theme='D'] .step--rsvp .form-action {
    margin-top: 0;
  }

  [data-theme='D'] .step--rsvp .form-action .btn {
    min-height: 38px;
  }
}

[data-theme='D'] .form-transparent .field > label,
[data-theme='D'] .form-transparent .field > legend {
  color: #6b4a1b;
  font-weight: 700;
}

[data-theme='D'] .form-transparent input,
[data-theme='D'] .form-transparent select,
[data-theme='D'] .form-transparent textarea {
  color: #2f1e0b;
  border-bottom-color: rgba(122, 84, 32, 0.5);
}

[data-theme='D'] .wish {
  background: rgba(255, 253, 248, 0.82);
  border-color: rgba(122, 84, 32, 0.4);
}

[data-theme='D'] .wish__name,
[data-theme='D'] .wish__msg {
  color: #33220f;
}

[data-theme='D'] .gift-qr {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(122, 84, 32, 0.45);
}

[data-theme='D'] .gift-bank dd {
  color: #2f1e0b;
}

/* ==========================================================================
   20. THEME E — ROSELIE: NÚT MỞ THIỆP, ĐIỀU HƯỚNG & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

.intro--theme-E .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

.intro--theme-E .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(255, 248, 244, 0.96));
}

.intro--theme-E .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(255, 248, 244, 0.96));
}

.intro--theme-E .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #fdf2ee 56%, #e2c3bb);
  box-shadow: rgba(90, 46, 48, 0.3) 0 1.5px 2px;
}

.intro--theme-E .intro__btn-ring {
  border-color: rgba(160, 104, 84, 0.92);
}

.intro--theme-E .intro__btn-body {
  border-color: rgba(158, 104, 84, 0.6);
  background: linear-gradient(118deg, #fffbf9 0%, #fbece6 46%, #fffaf8 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(63, 38, 42, 0.24) 0 10px 24px,
    rgba(63, 38, 42, 0.12) 0 2px 6px;
}

.intro--theme-E .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(215, 154, 155, 0.3),
    rgba(255, 248, 244, 0.66),
    transparent
  );
}

.intro--theme-E .intro__btn-text {
  color: #4a2b2f;
}

[data-theme='E'] .stage-scroll-down-btn {
  background: rgba(255, 250, 247, 0.8);
  border-color: rgba(158, 104, 84, 0.45);
  color: #4a2b2f;
  box-shadow:
    0 5px 18px rgba(63, 38, 42, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='E'] .stage-scroll-down-btn:hover,
[data-theme='E'] .stage-scroll-down-btn:focus-visible {
  background: rgba(255, 253, 251, 0.98);
  box-shadow:
    0 9px 26px rgba(63, 38, 42, 0.24),
    0 1px 0 #fff inset;
}

[data-theme='E'] .scroll-down-text {
  color: #4a2b2f;
}

[data-theme='E'] .scroll-arrow-bounce {
  color: #94543c;
}

[data-theme='E'] .stage-music-btn {
  background: rgba(255, 250, 247, 0.82);
  border-color: rgba(158, 104, 84, 0.45);
  color: #5a3438;
  box-shadow:
    0 5px 18px rgba(63, 38, 42, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='E'] .stage-music-btn:hover,
[data-theme='E'] .stage-music-btn:focus-visible {
  background: #fffdfb;
}

/* Độ tương phản chữ theme E trên nền hồng phấn */
[data-theme='E'] .step-title,
[data-theme='E'] .cover-name {
  color: #3a2226;
  font-weight: 700;
}

[data-theme='E'] .step-eyebrow,
[data-theme='E'] .cover-eyebrow,
[data-theme='E'] .cover-guest__label,
[data-theme='E'] .family__label,
[data-theme='E'] .msg-foot,
[data-theme='E'] .gift-bank dt,
[data-theme='E'] .countdown__lbl {
  color: #7d4326;
  font-weight: 700;
}

[data-theme='E'] .cover-ceremony,
[data-theme='E'] .cover-date,
[data-theme='E'] .msg-addr,
[data-theme='E'] .date-lunar,
[data-theme='E'] .venue-address,
[data-theme='E'] .gallery-hint,
[data-theme='E'] .gallery-quote,
[data-theme='E'] .gift-note,
[data-theme='E'] .form-status,
[data-theme='E'] .wishes-empty {
  color: #4f3035;
  font-weight: 700;
}

[data-theme='E'] .cover-ceremony,
[data-theme='E'] .cover-date {
  font-size: 13.5px;
  letter-spacing: 0.14em;
}

[data-theme='E'] .cover-eyebrow,
[data-theme='E'] .cover-guest__label {
  font-size: 10px;
  letter-spacing: 0.2em;
}

[data-theme='E'] .msg-lead,
[data-theme='E'] .family__names,
[data-theme='E'] .family__child,
[data-theme='E'] .cover-guest__name {
  color: #3a2226;
  font-weight: 700;
}

[data-theme='E'] .msg-lead {
  font-size: 14.5px;
  line-height: 1.55;
}

[data-theme='E'] .msg-addr {
  font-size: 12.5px;
  line-height: 1.45;
}

[data-theme='E'] .countdown--arched .countdown__val {
  color: #33191d;
}

[data-theme='E'] .date-weekday {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #4a2016;
}

[data-theme='E'] .date-time {
  font-size: 16px;
  color: #4a2016;
}

[data-theme='E'] .date-day,
[data-theme='E'] .date-my {
  color: #33191d;
  font-weight: 700;
}

[data-theme='E'] .date-lunar {
  font-style: normal;
  font-size: 12.5px;
  color: #3a2226;
}

[data-theme='E'] .step--map .venue-address {
  background: rgba(255, 251, 248, 0.8);
  border-radius: 999px;
  padding: 2px 14px;
  color: #432528;
  font-weight: 700;
}

/* Dòng mô tả & ghi chú: nền giấy mờ để không chìm vào họa tiết ruy-băng */
[data-theme='E'] .step--rsvp .rsvp-note,
[data-theme='E'] .step--wishes .step-note,
[data-theme='E'] .lacy-map-note {
  background: rgba(255, 251, 248, 0.82);
  border: 1px solid rgba(158, 104, 84, 0.2);
  border-radius: 12px;
  padding: 6px 12px;
  color: #432528;
  font-weight: 600;
}

[data-theme='E'] .lacy-map-fact {
  background: rgba(255, 252, 249, 0.9);
  border-color: rgba(138, 92, 55, 0.42);
}

[data-theme='E'] .lacy-map-fact span {
  color: #7d4326;
}

[data-theme='E'] .lacy-map-fact strong {
  color: #33191d;
}

[data-theme='E'] .lacy-map-actions .btn--ornate {
  background: rgba(255, 251, 248, 0.84);
}

[data-theme='E'] .form-transparent .field > label,
[data-theme='E'] .form-transparent .field > legend {
  color: #7d4326;
  font-weight: 700;
}

[data-theme='E'] .form-transparent input,
[data-theme='E'] .form-transparent select,
[data-theme='E'] .form-transparent textarea {
  color: #33191d;
  border-bottom-color: rgba(138, 92, 55, 0.5);
}

[data-theme='E'] .wish {
  background: rgba(255, 251, 249, 0.86);
  border-color: rgba(138, 92, 55, 0.36);
}

[data-theme='E'] .wish__name,
[data-theme='E'] .wish__msg {
  color: #3a2226;
}

[data-theme='E'] .gift-qr {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(138, 92, 55, 0.42);
}

[data-theme='E'] .gift-bank dd {
  color: #33191d;
}

/* Màn hình thấp: nén form RSVP & trang thời gian của theme E */
@media (max-height: 680px) {
  [data-theme='E'] .step--rsvp .step-inner {
    gap: 5px;
  }

  [data-theme='E'] .step--rsvp .rsvp-note {
    margin-top: 0;
    padding: 4px 10px;
  }

  [data-theme='E'] .step--rsvp .form-transparent {
    gap: 4px;
  }

  [data-theme='E'] .step--date .step-inner {
    gap: 5px;
  }

  [data-theme='E'] .countdown.countdown--arched {
    margin-top: 6px;
  }
}

@media (max-height: 600px) {
  [data-theme='E'] .step--rsvp .step-inner {
    gap: 4px;
  }

  [data-theme='E'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='E'] .step--rsvp .step-title {
    font-size: 17px;
    margin: 0;
  }

  [data-theme='E'] .step--rsvp .step-head {
    gap: 1px;
    margin-bottom: 0;
  }

  [data-theme='E'] .step--rsvp .form-transparent .field > label,
  [data-theme='E'] .step--rsvp .form-transparent .field > legend {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  [data-theme='E'] .step--rsvp .form-transparent input,
  [data-theme='E'] .step--rsvp .form-transparent select,
  [data-theme='E'] .step--rsvp .form-transparent textarea {
    min-height: 28px;
    font-size: 14px;
    padding: 2px;
  }

  [data-theme='E'] .step--rsvp .form-transparent textarea {
    min-height: 32px;
  }

  [data-theme='E'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 13px;
  }

  [data-theme='E'] .step--rsvp .form-action {
    margin-top: 0;
  }

  [data-theme='E'] .step--rsvp .form-action .btn {
    min-height: 38px;
  }

  /* Trang thời gian: bỏ dòng âm lịch để không bị khung đè */
  [data-theme='E'] .step--date .date-lunar {
    font-size: 11px;
  }

  [data-theme='E'] .countdown__crown {
    display: none;
  }

  [data-theme='E'] .countdown.countdown--arched {
    margin-top: 10px;
  }
}

/* --- 20.1 Sổ lưu bút: marquee 1 dòng (roselie-ticker) ------------------- */
[data-theme='E'] .roselie-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 32px;
  margin: 6px 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 251, 248, 0.86);
  border: 1px solid rgba(138, 92, 55, 0.34);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: left;
}

[data-theme='E'] .roselie-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='E'] .roselie-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: roselieTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='E'] .roselie-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='E'] .roselie-ticker:hover .roselie-ticker__content,
[data-theme='E'] .roselie-ticker:focus-within .roselie-ticker__content {
  animation-play-state: paused;
}

[data-theme='E'] .roselie-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12px;
  color: #3a2226;
}

[data-theme='E'] .roselie-ticker__author {
  font-weight: 700;
  color: #7d4326;
}

[data-theme='E'] .roselie-ticker__msg {
  color: #3f262a;
  font-style: italic;
}

[data-theme='E'] .roselie-ticker__dot {
  margin-left: 6px;
  color: #d79a9b;
}

/* Ảnh kỷ niệm: ticker chỉ chiếm 1 dòng nên trả lại chiều cao cho ảnh. */
[data-theme='E'] .wishes-photo,
[data-theme='E'] .wishes-footer-photo {
  width: 100%;
  max-width: 320px;
  margin: 4px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Ticker dừng chạy nhưng vẫn đọc được: cho phép vuốt ngang để xem hết. */
  [data-theme='E'] .roselie-ticker__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-theme='E'] .roselie-ticker__track::-webkit-scrollbar {
    display: none;
  }

  [data-theme='E'] .roselie-ticker__content {
    animation: none;
  }
}

@media (max-width: 767px) {
  /* --- 20.2 Trang 4: Địa điểm gọn lại trong vòm lá ------------------------ */
  [data-theme='E'] .step--map .step-inner {
    gap: 6px;
  }

  [data-theme='E'] .step--map .map-plate {
    max-width: 246px;
  }

  [data-theme='E'] .step--map .lacy-map-facts {
    margin-top: 0;
  }

  [data-theme='E'] .step--map .lacy-map-actions {
    margin-top: 2px;
  }

  /* --- 20.3 Trang 6: RSVP co lại theo cả hai chiều ------------------------ */
  [data-theme='E'] .step--rsvp .step-inner {
    gap: 5px;
  }

  [data-theme='E'] .step--rsvp .rsvp-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    padding: 5px 12px;
  }

  [data-theme='E'] .step--rsvp .form-transparent {
    gap: 6px;
  }

  [data-theme='E'] .step--rsvp .form-transparent input,
  [data-theme='E'] .step--rsvp .form-transparent select,
  [data-theme='E'] .step--rsvp .form-transparent textarea {
    min-height: 34px;
    font-size: 14px;
    padding: 3px 2px;
  }

  [data-theme='E'] .step--rsvp .attend-options {
    gap: 5px;
  }

  [data-theme='E'] .step--rsvp .choice--text {
    min-height: 30px;
    font-size: 13px;
  }

  [data-theme='E'] .step--rsvp .form-action {
    margin-top: 2px;
  }

  [data-theme='E'] .step--rsvp .form-action .btn {
    min-height: 40px;
  }

  [data-theme='E'] .step--rsvp .form-status {
    min-height: 10px;
    margin: 2px 0 0;
  }

  /* --- 20.4 Trang 7: Sổ lưu bút co lại, nhường chỗ cho ticker & ảnh ------- */
  [data-theme='E'] .step--wishes .step-inner {
    gap: 5px;
  }

  [data-theme='E'] .step--wishes .step-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    padding: 5px 12px;
  }

  [data-theme='E'] .step--wishes .form-transparent {
    gap: 6px;
  }

  [data-theme='E'] .step--wishes .form-transparent input,
  [data-theme='E'] .step--wishes .form-transparent textarea {
    min-height: 34px;
    font-size: 14px;
    padding: 3px 2px;
  }

  [data-theme='E'] .step--wishes .form-transparent textarea {
    min-height: 46px;
  }

  [data-theme='E'] .step--wishes .form-action {
    margin-top: 2px;
  }

  [data-theme='E'] .step--wishes .form-action .btn {
    min-height: 40px;
  }

  [data-theme='E'] .step--wishes .form-status {
    min-height: 10px;
    margin: 2px 0 0;
  }

    /* --- 20.5 Trang 5: Album ảnh hạ nhịp để không bị đẩy cao --------------- */
  [data-theme='E'] .step--gallery .step-inner {
    gap: 8px;
  }

  /* F */
  [data-theme='F'] .fx-flower--left {
      top: 6%;
      left: calc(50% - 50px);
  }
  [data-theme='F'] .fx-flower--right {
      bottom: 10%;
      right: calc(50% - 50px);
  }
}

/* ==========================================================================
   21. THEME F — SERENE: NÚT MỞ THIỆP, ĐIỀU HƯỚNG & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

.intro--theme-F .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

.intro--theme-F .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(255, 250, 238, 0.95));
}

.intro--theme-F .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(255, 250, 238, 0.95));
}

.intro--theme-F .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #fbf5e8 56%, #d8cbae);
  box-shadow: rgba(84, 70, 40, 0.3) 0 1.5px 2px;
}

.intro--theme-F .intro__btn-ring {
  border-color: rgba(138, 114, 68, 0.92);
}

.intro--theme-F .intro__btn-body {
  border-color: rgba(138, 114, 68, 0.58);
  background: linear-gradient(118deg, #fffdf8 0%, #f5efe1 46%, #fffdf9 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(60, 56, 48, 0.22) 0 10px 24px,
    rgba(60, 56, 48, 0.12) 0 2px 6px;
}

.intro--theme-F .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(199, 194, 174, 0.32),
    rgba(255, 252, 244, 0.66),
    transparent
  );
}

.intro--theme-F .intro__btn-text {
  color: #3f3a2c;
}

[data-theme='F'] .stage-scroll-down-btn {
  background: rgba(255, 253, 247, 0.8);
  border-color: rgba(138, 114, 68, 0.45);
  color: #3f3a2c;
  box-shadow:
    0 5px 18px rgba(60, 56, 48, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='F'] .stage-scroll-down-btn:hover,
[data-theme='F'] .stage-scroll-down-btn:focus-visible {
  background: rgba(255, 254, 250, 0.98);
  box-shadow:
    0 9px 26px rgba(60, 56, 48, 0.24),
    0 1px 0 #fff inset;
}

[data-theme='F'] .scroll-down-text {
  color: #3f3a2c;
}

[data-theme='F'] .scroll-arrow-bounce {
  color: #7d6636;
}

[data-theme='F'] .stage-music-btn {
  background: rgba(255, 253, 247, 0.82);
  border-color: rgba(138, 114, 68, 0.45);
  color: #4a4433;
  box-shadow:
    0 5px 18px rgba(60, 56, 48, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='F'] .stage-music-btn:hover,
[data-theme='F'] .stage-music-btn:focus-visible {
  background: #fffefb;
}

/* Độ tương phản chữ theme F trên nền kem + ren */
[data-theme='F'] .step-title,
[data-theme='F'] .cover-name {
  color: #332f26;
  font-weight: 700;
}

[data-theme='F'] .step-eyebrow,
[data-theme='F'] .cover-eyebrow,
[data-theme='F'] .cover-guest__label,
[data-theme='F'] .family__label,
[data-theme='F'] .msg-foot,
[data-theme='F'] .gift-bank dt,
[data-theme='F'] .countdown__lbl {
  color: #6b5533;
  font-weight: 700;
}

[data-theme='F'] .cover-ceremony,
[data-theme='F'] .cover-date,
[data-theme='F'] .msg-addr,
[data-theme='F'] .date-lunar,
[data-theme='F'] .venue-address,
[data-theme='F'] .gallery-hint,
[data-theme='F'] .gallery-quote,
[data-theme='F'] .gift-note,
[data-theme='F'] .form-status,
[data-theme='F'] .wishes-empty {
  color: #4e4636;
  font-weight: 700;
}

[data-theme='F'] .cover-ceremony,
[data-theme='F'] .cover-date {
  font-size: 13.5px;
  letter-spacing: 0.14em;
}

[data-theme='F'] .cover-eyebrow,
[data-theme='F'] .cover-guest__label {
  font-size: 10px;
  letter-spacing: 0.2em;
}

[data-theme='F'] .msg-lead,
[data-theme='F'] .family__names,
[data-theme='F'] .family__child,
[data-theme='F'] .cover-guest__name {
  color: #332f26;
  font-weight: 700;
}

[data-theme='F'] .msg-lead {
  font-size: 14.5px;
  line-height: 1.55;
}

[data-theme='F'] .msg-addr {
  font-size: 12.5px;
  line-height: 1.45;
}

[data-theme='F'] .countdown--arched .countdown__val {
  color: #2e2a21;
}

[data-theme='F'] .date-weekday {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #4a3a1c;
}

[data-theme='F'] .date-time {
  font-size: 16px;
  color: #4a3a1c;
}

[data-theme='F'] .date-day,
[data-theme='F'] .date-my {
  color: #2e2a21;
  font-weight: 700;
}

[data-theme='F'] .date-lunar {
  font-style: normal;
  font-size: 12.5px;
  color: #3a352b;
}

/* --- 21.1 Khung phù điêu rỗng (davet-mesaji / tarih-saat / konum) -------- */
[data-theme='F'] .serene-panel {
  position: relative;
  width: min(300px, 100%);
  margin: 0 auto;
  aspect-ratio: var(--serene-ratio, 871 / 1411);
}

[data-theme='F'] .serene-panel__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

[data-theme='F'] .serene-panel .step-head {
  gap: 1px;
  margin: 0;
}

[data-theme='F'] .serene-panel .step-title {
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-theme='F'] .serene-panel .step-eyebrow {
  font-size: 8px;
  letter-spacing: 0.2em;
}

[data-theme='F'] .serene-panel .step-rule {
  width: 44px;
  margin: 3px auto 0;
}

/* --- 21.2 Trang 2: nội dung lời mời lọt lòng khung ----------------------- */
[data-theme='F'] .serene-panel__body--message {
  position: absolute;
  inset: 16% 10% 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

[data-theme='F'] .serene-panel--message .msg-lead {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.42;
}

[data-theme='F'] .serene-panel--message .msg-addr {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

[data-theme='F'] .serene-panel--message .families {
  gap: 8px;
  margin: 2px 0 0;
}

[data-theme='F'] .serene-panel--message .family__label {
  margin-bottom: 1px;
  font-size: 7.5px;
  letter-spacing: 0.16em;
}

[data-theme='F'] .serene-panel--message .family__names {
  font-size: 11px;
  line-height: 1.35;
}

[data-theme='F'] .serene-panel--message .msg-foot {
  margin: 2px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

/* --- 21.3 Trang 3: ngày giờ + countdown trong 4 khung con ---------------- */
[data-theme='F'] .serene-panel--date {
  width: min(304px, 100%);
}

[data-theme='F'] .serene-panel__body--date {
  position: absolute;
  top: 23%;
  left: 14%;
  right: 14%;
  height: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

[data-theme='F'] .serene-date-weekday {
  margin: 2px 0 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b5533;
}

[data-theme='F'] .serene-date-day {
  margin: 1px 0 0;
  font-family: var(--t-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(30px, 8.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: #2e2a21;
}

[data-theme='F'] .serene-date-my {
  margin: 2px 0 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b5533;
}

[data-theme='F'] .serene-date-time {
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #4a3a1c;
}

[data-theme='F'] .serene-date-lunar {
  margin: 3px 0 0;
  font-size: 9.5px;
  line-height: 1.35;
  color: #4e4636;
}

/* 4 khung con của count_down_F.png: ảnh gốc 1680×1504, dải khung là
   x 81..1604 / y 478..1075 ⇒ cắt phần trong suốt bằng overflow + offset %. */
[data-theme='F'] .serene-date-count {
  width: 100%;
  display: flex;
  justify-content: center;
}

[data-theme='F'] .serene-count {
  position: relative;
  width: 84%;
  max-width: 262px;
  aspect-ratio: 1523 / 597;
  overflow: hidden;
  pointer-events: none;
}

[data-theme='F'] .serene-count__art {
  position: absolute;
  /* top % tính theo CHIỀU CAO khung (597px dải khung), left % theo chiều ngang. */
  top: -80.07%;
  left: -5.318%;
  width: 110.308%;
  max-width: none;
  height: auto;
}

[data-theme='F'] .serene-count__cell {
  position: absolute;
  top: 50%;
  width: 23.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transform: translate(-50%, -50%);
}

[data-theme='F'] .serene-count__cell--1 {
  left: 11.98%;
}

[data-theme='F'] .serene-count__cell--2 {
  left: 36.97%;
}

[data-theme='F'] .serene-count__cell--3 {
  left: 63.03%;
}

[data-theme='F'] .serene-count__cell--4 {
  left: 88.05%;
}

[data-theme='F'] .serene-count__val {
  font-family: var(--t-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(14px, 4.2vw, 18px);
  font-weight: 700;
  line-height: 1;
  color: #2e2a21;
}

[data-theme='F'] .serene-count__lbl {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b5533;
}

[data-theme='F'] .serene-date-actions {
  margin-top: 2px;
}

/* --- 21.4 Trang 4: bản đồ trong khung konum.webp ------------------------ */
[data-theme='F'] .serene-panel--map {
  width: min(296px, 100%);
}

[data-theme='F'] .serene-map-head {
  position: absolute;
  top: 16%;
  left: 10%;
  right: 10%;
  height: 17.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

[data-theme='F'] .serene-map-name {
  margin: 0;
  font-family: var(--t-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2e2a21;
}

[data-theme='F'] .serene-map-window {
  position: absolute;
  top: 35.5%;
  left: 8%;
  right: 9%;
  height: 34%;
  border-radius: 6.5%;
  overflow: hidden;
}

[data-theme='F'] .serene-map-well,
[data-theme='F'] .serene-map-iframe,
[data-theme='F'] .serene-map-img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

[data-theme='F'] .serene-map-window .map-pin--chibi {
  top: 50%;
  left: 50%;
  width: 40px;
  height: auto;
  margin: -20px 0 0 -20px;
  transform: none;
  filter: drop-shadow(0 3px 8px rgba(60, 56, 48, 0.35));
}

[data-theme='F'] .serene-map-addr {
  position: absolute;
  top: 70.5%;
  left: 11%;
  right: 11%;
  height: 9.5%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: #4e4636;
  overflow: hidden;
}

[data-theme='F'] .serene-map-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 4px;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  color: #6b5533;
}

[data-theme='F'] .serene-map-facts strong {
  color: #2e2a21;
  font-weight: 700;
}

[data-theme='F'] .serene-map-fact-dot {
  color: #b7a172;
}

[data-theme='F'] .serene-map-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  max-width: 300px;
  margin-top: 4px;
}

[data-theme='F'] .serene-map-actions .btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
  white-space: nowrap;
}

[data-theme='F'] .serene-directions-btn {
  background: #4a3a1c !important;
  color: #fdfaf2 !important;
  border: 1px solid #6f5c38 !important;
}

[data-theme='F'] .serene-map-open-btn {
  background: rgba(255, 253, 248, 0.92) !important;
  border: 1px solid rgba(138, 114, 68, 0.55) !important;
  color: #3a352b !important;
}

/* --- 21.5 Trang 6: RSVP bỏ nền thẻ, nội dung trên nền ren --------------- */
[data-theme='F'] .step--rsvp .step-inner {
  max-width: min(100%, 320px);
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

[data-theme='F'] .step--rsvp .rsvp-note {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #4e4636;
  font-weight: 600;
}

[data-theme='F'] .step--rsvp .form-transparent {
  gap: 6px;
}

[data-theme='F'] .step--rsvp .attend-options {
  gap: 5px;
}

[data-theme='F'] .step--rsvp .choice--text {
  min-height: 30px;
  font-size: 13px;
}

[data-theme='F'] .step--rsvp .form-action {
  margin-top: 2px;
}

[data-theme='F'] .step--rsvp .form-action .btn {
  min-height: 40px;
}

[data-theme='F'] .step--rsvp .form-status {
  min-height: 10px;
  margin: 2px 0 0;
}

[data-theme='F'] .form-transparent .field > label,
[data-theme='F'] .form-transparent .field > legend {
  color: #5c4526;
  font-weight: 700;
}

[data-theme='F'] .form-transparent input::placeholder,
[data-theme='F'] .form-transparent textarea::placeholder {
  color: #6f5e45;
  opacity: 1;
  font-style: italic;
}

[data-theme='F'] .form-transparent input,
[data-theme='F'] .form-transparent select,
[data-theme='F'] .form-transparent textarea {
  color: #2e2a21;
  border-bottom-color: rgba(138, 114, 68, 0.5);
}

/* --- 21.6 Trang 7: Sổ lưu bút — bỏ nền thẻ + marquee 1 dòng ------------- */
[data-theme='F'] .step--wishes .step-inner {
  max-width: min(100%, 320px);
  gap: 5px;
}

[data-theme='F'] .step--wishes .step-note {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #4e4636;
  font-weight: 600;
}

[data-theme='F'] .step--wishes .form-transparent {
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

[data-theme='F'] .step--wishes .form-transparent input,
[data-theme='F'] .step--wishes .form-transparent textarea {
  min-height: 34px;
  font-size: 14px;
}

[data-theme='F'] .step--wishes .form-transparent textarea {
  min-height: 46px;
}

[data-theme='F'] .step--wishes .form-action {
  margin-top: 2px;
}

[data-theme='F'] .step--wishes .form-action .btn {
  min-height: 40px;
}

[data-theme='F'] .step--wishes .form-status {
  min-height: 10px;
  margin: 2px 0 0;
}

[data-theme='F'] .serene-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 30px;
  margin: 4px 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(138, 114, 68, 0.34);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: left;
}

[data-theme='F'] .serene-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='F'] .serene-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: sereneTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='F'] .serene-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='F'] .serene-ticker:hover .serene-ticker__content,
[data-theme='F'] .serene-ticker:focus-within .serene-ticker__content {
  animation-play-state: paused;
}

[data-theme='F'] .serene-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12px;
  color: #3a352b;
}

[data-theme='F'] .serene-ticker__author {
  font-weight: 700;
  color: #6f5c38;
}

[data-theme='F'] .serene-ticker__msg {
  color: #3c3830;
  font-style: italic;
}

[data-theme='F'] .serene-ticker__dot {
  margin-left: 6px;
  color: #b7a172;
}

[data-theme='F'] .wishes-photo,
[data-theme='F'] .wishes-footer-photo {
  width: 100%;
  max-width: 320px;
  margin: 4px auto 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Ticker dừng chạy nhưng vẫn đọc được: cho phép vuốt ngang để xem hết. */
  [data-theme='F'] .serene-ticker__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-theme='F'] .serene-ticker__track::-webkit-scrollbar {
    display: none;
  }

  [data-theme='F'] .serene-ticker__content {
    animation: none;
  }
}

[data-theme='F'] .wish {
  background: rgba(255, 253, 248, 0.9);
  border-color: rgba(138, 114, 68, 0.34);
}

[data-theme='F'] .wish__name,
[data-theme='F'] .wish__msg {
  color: #332f26;
}

[data-theme='F'] .gift-qr {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(138, 114, 68, 0.42);
}

[data-theme='F'] .gift-bank dd {
  color: #2e2a21;
}

/* --- 21.7 Màn hình thấp: thu khung để vẫn lọt một màn ------------------- */
@media (max-height: 700px) {
  [data-theme='F'] .serene-panel--message {
    width: min(250px, 100%);
  }

  [data-theme='F'] .serene-panel--date {
    width: min(212px, 100%);
  }

  [data-theme='F'] .serene-panel--map {
    width: min(216px, 100%);
  }

  [data-theme='F'] .serene-count {
    width: 68%;
    max-width: 216px;
  }

  [data-theme='F'] .serene-date-actions .btn,
  [data-theme='F'] .serene-map-actions .btn {
    height: 34px;
    font-size: 11.5px;
    padding: 0 12px;
  }

  [data-theme='F'] .serene-panel--message .msg-lead {
    font-size: 11.5px;
  }

  [data-theme='F'] .serene-panel--message .family__names {
    font-size: 10px;
  }

  [data-theme='F'] .step--rsvp .step-note,
  [data-theme='F'] .step--wishes .step-note {
    display: none;
  }

  [data-theme='F'] .wishes-photo,
  [data-theme='F'] .wishes-footer-photo {
    height: 112px;
  }

  [data-theme='F'] .wishes-photo img,
  [data-theme='F'] .wishes-footer-photo img {
    height: 100%;
  }

  [data-theme='F'] .step--wishes .form-transparent textarea {
    min-height: 40px;
  }
}

@media (max-height: 620px) {
  [data-theme='F'] .serene-panel--message {
    width: min(214px, 100%);
  }

  [data-theme='F'] .serene-panel--date {
    width: min(180px, 100%);
  }

  [data-theme='F'] .serene-panel--map {
    width: min(190px, 100%);
  }

  [data-theme='F'] .serene-count {
    width: 58%;
    max-width: 176px;
  }

  [data-theme='F'] .serene-date-actions .btn,
  [data-theme='F'] .serene-map-actions .btn {
    height: 32px;
    font-size: 11px;
    padding: 0 10px;
  }

  [data-theme='F'] .serene-panel .step-title {
    font-size: 15px;
  }

  [data-theme='F'] .serene-panel .step-rule {
    display: none;
  }

  [data-theme='F'] .serene-panel--message .msg-foot {
    display: none;
  }

  [data-theme='F'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='F'] .wishes-photo,
  [data-theme='F'] .wishes-footer-photo {
    height: 96px;
  }

  [data-theme='F'] .step--rsvp .step-title,
  [data-theme='F'] .step--wishes .step-title {
    font-size: 17px;
  }
}

/* ==========================================================================
   22. THEME H — LORA: KHUNG PHÙ ĐIÊU, NÚT MỞ THIỆP & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

@media (min-width: 760px) {
  .inv[data-theme='H'],
  .intro--theme-H {
    width: auto;
    max-width: min(468px, calc(100vw - 24px));
    aspect-ratio: 9 / 16;
    height: min(100dvh - 24px, 832px);
    margin: auto;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(63, 53, 39, 0.28);
    overflow: hidden;
  }
}

.intro--theme-H .intro__monogram--lora {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(128px, 38%, 168px);
  height: auto;
  aspect-ratio: 1200 / 2000;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 12;
  filter: drop-shadow(0 3px 8px rgba(63, 48, 28, 0.22));
  transition: opacity 0.3s ease, transform 0.35s ease;
}

.intro--theme-H.is-opening .intro__monogram--lora {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
}

.intro--theme-H .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

.intro--theme-H .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(255, 251, 240, 0.95));
}

.intro--theme-H .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(255, 251, 240, 0.95));
}

.intro--theme-H .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #fbf3e3 56%, #d9c39c);
  box-shadow: rgba(74, 58, 30, 0.3) 0 1.5px 2px;
}

.intro--theme-H .intro__btn-ring {
  border-color: rgba(150, 112, 50, 0.92);
}

.intro--theme-H .intro__btn-body {
  border-color: rgba(146, 108, 48, 0.6);
  background: linear-gradient(118deg, #fffdf7 0%, #f6ecd8 46%, #fffdf8 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(63, 53, 39, 0.26) 0 10px 24px,
    rgba(63, 53, 39, 0.13) 0 2px 6px;
}

.intro--theme-H .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(205, 178, 138, 0.32),
    rgba(255, 249, 235, 0.65),
    transparent
  );
}

.intro--theme-H .intro__btn-text {
  color: #3f3020;
}

[data-theme='H'] .stage-scroll-down-btn {
  background: rgba(255, 252, 246, 0.8);
  border-color: rgba(146, 108, 48, 0.46);
  color: #3f3020;
  box-shadow:
    0 5px 18px rgba(63, 53, 39, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='H'] .stage-scroll-down-btn:hover,
[data-theme='H'] .stage-scroll-down-btn:focus-visible {
  background: rgba(255, 254, 250, 0.98);
  box-shadow:
    0 9px 26px rgba(63, 53, 39, 0.26),
    0 1px 0 #fff inset;
}

[data-theme='H'] .scroll-down-text {
  color: #3f3020;
}

[data-theme='H'] .scroll-arrow-bounce {
  color: #8a6c3a;
}

[data-theme='H'] .stage-music-btn {
  background: rgba(255, 252, 246, 0.82);
  border-color: rgba(146, 108, 48, 0.46);
  color: #4b3a22;
  box-shadow:
    0 5px 18px rgba(63, 53, 39, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='H'] .stage-music-btn:hover,
[data-theme='H'] .stage-music-btn:focus-visible {
  background: #fffefb;
}

/* Độ tương phản chữ theme H trên nền phù điêu kem */
[data-theme='H'] .step-title,
[data-theme='H'] .cover-name {
  color: #2f281d;
}

[data-theme='H'] .step-eyebrow,
[data-theme='H'] .cover-eyebrow,
[data-theme='H'] .cover-guest__label,
[data-theme='H'] .family__label,
[data-theme='H'] .msg-foot,
[data-theme='H'] .gift-bank dt,
[data-theme='H'] .countdown__lbl {
  color: #6b5227;
  font-weight: 700;
}

[data-theme='H'] .cover-ceremony,
[data-theme='H'] .cover-date,
[data-theme='H'] .msg-addr,
[data-theme='H'] .date-lunar,
[data-theme='H'] .venue-address,
[data-theme='H'] .gallery-hint,
[data-theme='H'] .gallery-quote,
[data-theme='H'] .gift-note,
[data-theme='H'] .form-status,
[data-theme='H'] .wishes-empty {
  color: #463c2c;
  font-weight: 700;
}

[data-theme='H'] .msg-lead,
[data-theme='H'] .family__names,
[data-theme='H'] .family__child,
[data-theme='H'] .cover-guest__name {
  color: #332c20;
  font-weight: 600;
}

[data-theme='H'] .cover-ceremony,
[data-theme='H'] .cover-date {
  font-size: 13px;
  letter-spacing: 0.16em;
}

[data-theme='H'] .cover-eyebrow,
[data-theme='H'] .cover-guest__label {
  font-size: 10px;
  letter-spacing: 0.22em;
}

[data-theme='H'] .msg-lead {
  font-size: 14px;
  line-height: 1.55;
}

[data-theme='H'] .msg-addr {
  font-size: 12.5px;
  line-height: 1.45;
}

[data-theme='H'] .countdown--arched .countdown__val {
  color: #2f281d;
}

[data-theme='H'] .date-weekday,
[data-theme='H'] .date-time {
  color: #5c4419;
  font-weight: 700;
}

[data-theme='H'] .date-day,
[data-theme='H'] .date-my {
  color: #2f281d;
  font-weight: 700;
}

[data-theme='H'] .lacy-map-fact {
  background: rgba(255, 253, 248, 0.92);
  border-color: rgba(138, 108, 58, 0.42);
}

[data-theme='H'] .lacy-map-fact span {
  color: #6b5227;
}

[data-theme='H'] .lacy-map-fact strong {
  color: #2f281d;
}

[data-theme='H'] .lacy-map-actions .btn--ornate {
  background: rgba(255, 253, 248, 0.9);
  color: #332c20;
}

[data-theme='H'] .lacy-map-actions .btn {
  font-weight: 700;
}

[data-theme='H'] .lacy-map-note {
  color: #463c2c;
  font-weight: 600;
}

[data-theme='H'] .form-transparent .field > label,
[data-theme='H'] .form-transparent .field > legend {
  color: #6b5227;
  font-weight: 700;
}

/* Trang lời chúc: bỏ dòng nhãn phụ để không chạm họa tiết đỉnh khung */
[data-theme='H'] .step--wishes .step-eyebrow {
  display: none;
}

[data-theme='H'] .form-transparent input,
[data-theme='H'] .form-transparent select,
[data-theme='H'] .form-transparent textarea {
  color: #2f281d;
  border-bottom-color: rgba(138, 108, 58, 0.5);
}

[data-theme='H'] .form-transparent input::placeholder,
[data-theme='H'] .form-transparent textarea::placeholder {
  color: #7a6748;
  opacity: 1;
}

[data-theme='H'] .wish {
  background: rgba(255, 252, 246, 0.88);
  border-color: rgba(138, 108, 58, 0.34);
}

[data-theme='H'] .wish__name,
[data-theme='H'] .wish__msg {
  color: #332c20;
}

[data-theme='H'] .gift-qr {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(138, 108, 58, 0.42);
}

[data-theme='H'] .gift-bank dd {
  color: #2f281d;
}

/* Nâng nội dung toàn bộ các trang Theme H lên cân đối, tránh chạm hoa văn đỉnh và nút đáy */
[data-theme='H'] .step {
  padding:
    calc(env(safe-area-inset-top, 0px) + 74px) 22px
    calc(env(safe-area-inset-bottom, 0px) + 76px);
}

[data-theme='H'] .step-inner {
  max-width: 86%;
  padding-bottom: 4px;
  gap: 7px;
  --step-shift: -2%;
}

[data-theme='H'] .step--cover .step-inner {
  gap: 6px;
  --step-shift: -3.5%;
}

[data-theme='H'] .step--message .step-inner {
  gap: 8px;
  --step-shift: -2.5%;
}

[data-theme='H'] .step--date .step-inner {
  gap: 5px;
  --step-shift: -1.5%;
}

[data-theme='H'] .step--map .step-inner {
  gap: 6px;
  --step-shift: -2%;
}

[data-theme='H'] .step--gallery .step-inner {
  gap: 7px;
  --step-shift: -2.5%;
}

[data-theme='H'] .step--rsvp .step-inner,
[data-theme='H'] .step--wishes .step-inner {
  gap: 6px;
  --step-shift: -2%;
}

/* Trang 3 (Theme H): Khung ngày tháng năm (cartouche) & thứ giờ (plaque) */
[data-theme='H'] .lora-date-frames {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 0 auto;
}

[data-theme='H'] .lora-date-cartouche {
  position: relative;
  width: clamp(100px, 28vw, 118px);
  aspect-ratio: 640 / 1208;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme='H'] .lora-date-cartouche__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

[data-theme='H'] .lora-date-cartouche__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 25% 19%;
  text-align: center;
}

[data-theme='H'] .lora-date-day {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(26px, 7.6vw, 33px);
  font-weight: 700;
  line-height: 1;
  color: #2f281d;
}

[data-theme='H'] .lora-date-month {
  margin-top: 2px;
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(9px, 2.5vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b5227;
}

[data-theme='H'] .lora-date-year {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #2f281d;
}

[data-theme='H'] .lora-date-plaque {
  position: relative;
  width: clamp(166px, 48vw, 196px);
  aspect-ratio: 900 / 542;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme='H'] .lora-date-plaque__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

[data-theme='H'] .lora-date-plaque__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  height: 100%;
  padding: 20% 16%;
  text-align: center;
}

[data-theme='H'] .lora-date-weekday {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(10px, 2.8vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #5c4419;
}

[data-theme='H'] .lora-date-time {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2f281d;
}

[data-theme='H'] .lora-date-lunar {
  margin: 2px 0 0;
  font-size: 12px;
}

[data-theme='H'] .lora-countdown {
  max-width: 296px;
  margin-top: 4px;
  padding: 10px 8px 8px;
}

[data-theme='H'] .lora-date-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* Nút "Thêm vào lịch" & nút hành động Theme H: viền vuông bo tròn hợp màu theme */
[data-theme='H'] .lora-cal-btn,
[data-theme='H'] .lora-map-btn {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 11px;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 12px rgba(63, 53, 39, 0.12);
}

[data-theme='H'] .lora-cal-btn,
[data-theme='H'] .lora-map-btn--outline {
  background: rgba(255, 252, 246, 0.94);
  border: 1.5px solid rgba(138, 108, 58, 0.72);
  color: #3f3020;
}

[data-theme='H'] .lora-cal-btn:hover,
[data-theme='H'] .lora-cal-btn:focus-visible,
[data-theme='H'] .lora-map-btn--outline:hover,
[data-theme='H'] .lora-map-btn--outline:focus-visible {
  background: #fffefb;
  border-color: #8a6c3a;
  box-shadow: 0 6px 16px rgba(138, 108, 58, 0.22);
  transform: translateY(-1px);
}

[data-theme='H'] .lora-map-btn--primary {
  background: linear-gradient(135deg, #7f6030 0%, #644920 100%);
  border: 1.5px solid #5a411b;
  color: #fffdf8;
}

[data-theme='H'] .lora-map-btn--primary:hover,
[data-theme='H'] .lora-map-btn--primary:focus-visible {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(90, 65, 27, 0.28);
  transform: translateY(-1px);
}

/* Trang 4 (Theme H): Bản đồ & khung tích hợp theo cô dâu / chú rể, ghim ở giữa */
[data-theme='H'] .lora-map-plate {
  position: relative;
  width: clamp(224px, 66vw, 272px);
  aspect-ratio: 1 / 1;
  margin: 2px auto 0;
}

[data-theme='H'] .lora-map-plate__combined,
[data-theme='H'] .lora-map-plate__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

[data-theme='H'] .lora-map-plate__well {
  position: absolute;
  inset: 15.5%;
  z-index: 2;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(138, 108, 58, 0.45);
  background: #f8f2e6;
  box-shadow: 0 3px 10px rgba(63, 53, 39, 0.14) inset;
}

[data-theme='H'] .lora-map-plate__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-theme='H'] .lora-map-plate .map-pin--chibi {
  top: 50%;
  left: 50%;
  width: 44px;
  height: auto;
  z-index: 3;
  filter:
    drop-shadow(0 0 5px rgba(255, 252, 245, 0.9))
    drop-shadow(0 5px 10px rgba(38, 24, 16, 0.42));
}

[data-theme='H'] .lora-map-facts {
  margin-top: 2px;
}

[data-theme='H'] .lora-map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

/* Trang 6 & 7 (Theme H): Form gọn, nền dễ đọc & Marquee Ticker 1 dòng */
[data-theme='H'] .step--rsvp .form-transparent,
[data-theme='H'] .step--wishes .form-transparent {
  gap: 7px;
}

[data-theme='H'] .step--rsvp .form-transparent input,
[data-theme='H'] .step--rsvp .form-transparent select,
[data-theme='H'] .step--rsvp .form-transparent textarea,
[data-theme='H'] .step--wishes .form-transparent input,
[data-theme='H'] .step--wishes .form-transparent textarea {
  background: rgba(255, 253, 248, 0.84);
  border: 1px solid rgba(138, 108, 58, 0.36);
  border-radius: 8px;
  padding: 5px 10px;
}

[data-theme='H'] .step--wishes .form-transparent textarea {
  min-height: 46px;
}

[data-theme='H'] .step--wishes .form-status {
  min-height: 10px;
  margin: 2px 0 0;
}

[data-theme='H'] .lora-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 32px;
  margin: 4px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(138, 108, 58, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 3px 12px rgba(63, 53, 39, 0.08);
  text-align: left;
}

[data-theme='H'] .lora-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='H'] .lora-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: loraTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='H'] .lora-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='H'] .lora-ticker:hover .lora-ticker__content,
[data-theme='H'] .lora-ticker:focus-within .lora-ticker__content {
  animation-play-state: paused;
}

[data-theme='H'] .lora-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  color: #2f281d;
}

[data-theme='H'] .lora-ticker__author {
  font-weight: 700;
  color: #6b5227;
}

[data-theme='H'] .lora-ticker__msg {
  color: #332c20;
  font-style: italic;
}

[data-theme='H'] .lora-ticker__dot {
  margin-left: 6px;
  font-size: 11px;
  color: #9e7c44;
}

[data-theme='H'] .wishes-photo,
[data-theme='H'] .wishes-footer-photo {
  width: 100%;
  max-width: 300px;
  height: clamp(92px, 15dvh, 132px);
  margin: 4px auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(138, 108, 58, 0.42);
  box-shadow: 0 6px 18px rgba(63, 53, 39, 0.14);
}

[data-theme='H'] .wishes-photo img,
[data-theme='H'] .wishes-footer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme='H'] .lora-ticker__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-theme='H'] .lora-ticker__track::-webkit-scrollbar {
    display: none;
  }

  [data-theme='H'] .lora-ticker__content {
    animation: none;
  }
}

/* Màn hình thấp: nén form RSVP, khung ngày & bản đồ Theme H */
@media (max-height: 760px) {
  [data-theme='H'] .lora-date-cartouche {
    width: clamp(114px, 32vw, 136px);
  }

  [data-theme='H'] .lora-date-day {
    font-size: clamp(28px, 7.5vw, 35px);
  }

  [data-theme='H'] .lora-date-plaque {
    width: clamp(174px, 50vw, 204px);
  }

  [data-theme='H'] .lora-map-plate {
    width: clamp(196px, 56vw, 234px);
  }
}

@media (max-height: 680px) {
  [data-theme='H'] .step--rsvp .step-inner {
    gap: 5px;
  }

  [data-theme='H'] .step--rsvp .rsvp-note {
    margin-top: 0;
  }

  [data-theme='H'] .step--date .step-inner {
    gap: 5px;
  }

  [data-theme='H'] .lora-date-cartouche {
    width: clamp(102px, 28vw, 120px);
  }

  [data-theme='H'] .lora-date-day {
    font-size: 26px;
  }

  [data-theme='H'] .lora-date-month {
    font-size: 9px;
  }

  [data-theme='H'] .lora-date-year {
    font-size: 11.5px;
  }

  [data-theme='H'] .lora-date-plaque {
    width: clamp(160px, 46vw, 186px);
  }

  [data-theme='H'] .lora-date-weekday {
    font-size: 9px;
  }

  [data-theme='H'] .lora-date-time {
    font-size: 14px;
  }

  [data-theme='H'] .countdown.countdown--arched {
    margin-top: 3px;
    padding: 8px 6px 6px;
  }

  [data-theme='H'] .lora-cal-btn {
    min-height: 36px;
  }

  [data-theme='H'] .lora-map-plate {
    width: clamp(176px, 48vw, 206px);
  }

  [data-theme='H'] .wishes-photo,
  [data-theme='H'] .wishes-footer-photo {
    height: 92px;
  }
}

@media (max-height: 600px) {
  [data-theme='H'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 34px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  }

  [data-theme='H'] .step--rsvp .step-inner {
    gap: 4px;
  }

  [data-theme='H'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='H'] .step--rsvp .step-title {
    font-size: 17px;
    margin: 0;
  }

  [data-theme='H'] .step--rsvp .step-head {
    gap: 1px;
    margin-bottom: 0;
  }

  [data-theme='H'] .step--rsvp .form-transparent {
    gap: 4px;
  }

  [data-theme='H'] .step--rsvp .form-transparent .field > label,
  [data-theme='H'] .step--rsvp .form-transparent .field > legend {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  [data-theme='H'] .step--rsvp .form-transparent input,
  [data-theme='H'] .step--rsvp .form-transparent select,
  [data-theme='H'] .step--rsvp .form-transparent textarea {
    min-height: 28px;
    font-size: 14px;
    padding: 2px 8px;
  }

  [data-theme='H'] .step--rsvp .form-transparent textarea {
    min-height: 32px;
  }

  [data-theme='H'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 13px;
  }

  [data-theme='H'] .step--rsvp .form-action {
    margin-top: 0;
  }

  [data-theme='H'] .step--rsvp .form-action .btn {
    min-height: 38px;
  }

  [data-theme='H'] .countdown__crown {
    display: none;
  }

  [data-theme='H'] .countdown.countdown--arched {
    margin-top: 4px;
  }

  [data-theme='H'] .lora-date-cartouche {
    width: 96px;
  }

  [data-theme='H'] .lora-date-plaque {
    width: 152px;
  }

  [data-theme='H'] .wishes-photo,
  [data-theme='H'] .wishes-footer-photo {
    display: none;
  }
}

/* ==========================================================================
   23. THEME I — BOHEM: NÚT MỞ THIỆP, ĐIỀU HƯỚNG & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

/* Khung cuộn dọc của .step-inner cắt mất ký tự đầu dòng của tiêu đề/nhãn
   (Chromium + letter-spacing) ⇒ cho theme I tràn tự nhiên, nội dung vẫn vừa màn */
[data-theme='I'] .step-inner {
  overflow: visible;
  max-height: none;
}

.intro--theme-I .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

.intro--theme-I .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(255, 250, 238, 0.95));
}

.intro--theme-I .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(255, 250, 238, 0.95));
}

.intro--theme-I .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #fbf3e4 56%, #ddc7a2);
  box-shadow: rgba(75, 58, 44, 0.32) 0 1.5px 2px;
}

.intro--theme-I .intro__btn-ring {
  border-color: rgba(150, 106, 58, 0.92);
}

.intro--theme-I .intro__btn-body {
  border-color: rgba(146, 102, 54, 0.6);
  background: linear-gradient(118deg, #fffdf7 0%, #f6ecda 46%, #fffdf8 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(58, 44, 32, 0.26) 0 10px 24px,
    rgba(58, 44, 32, 0.13) 0 2px 6px;
}

.intro--theme-I .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 162, 122, 0.32),
    rgba(255, 248, 236, 0.66),
    transparent
  );
}

.intro--theme-I .intro__btn-text {
  color: #3f2f20;
}

[data-theme='I'] .stage-scroll-down-btn {
  background: rgba(255, 252, 246, 0.8);
  border-color: rgba(146, 102, 54, 0.46);
  color: #3f2f20;
  box-shadow:
    0 5px 18px rgba(58, 44, 32, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='I'] .stage-scroll-down-btn:hover,
[data-theme='I'] .stage-scroll-down-btn:focus-visible {
  background: rgba(255, 254, 250, 0.98);
  box-shadow:
    0 9px 26px rgba(58, 44, 32, 0.26),
    0 1px 0 #fff inset;
}

[data-theme='I'] .scroll-down-text {
  color: #3f2f20;
}

[data-theme='I'] .scroll-arrow-bounce {
  color: #8a5f2c;
}

[data-theme='I'] .stage-music-btn {
  background: rgba(255, 252, 246, 0.82);
  border-color: rgba(146, 102, 54, 0.46);
  color: #4a3823;
  box-shadow:
    0 5px 18px rgba(58, 44, 32, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='I'] .stage-music-btn:hover,
[data-theme='I'] .stage-music-btn:focus-visible {
  background: #fffefb;
}

/* Độ tương phản chữ theme I trên nền giấy kem + hoa hồng nhạt */
[data-theme='I'] .step-title,
[data-theme='I'] .cover-name {
  color: #2f2418;
}

[data-theme='I'] .step-eyebrow,
[data-theme='I'] .cover-eyebrow,
[data-theme='I'] .cover-guest__label,
[data-theme='I'] .family__label,
[data-theme='I'] .msg-foot,
[data-theme='I'] .gift-bank dt,
[data-theme='I'] .countdown__lbl {
  color: #6b4a1d;
  font-weight: 700;
}

[data-theme='I'] .cover-ceremony,
[data-theme='I'] .cover-date,
[data-theme='I'] .msg-addr,
[data-theme='I'] .date-lunar,
[data-theme='I'] .venue-address,
[data-theme='I'] .gallery-hint,
[data-theme='I'] .gallery-quote,
[data-theme='I'] .gift-note,
[data-theme='I'] .form-status,
[data-theme='I'] .wishes-empty {
  color: #443528;
  font-weight: 700;
}

[data-theme='I'] .msg-lead,
[data-theme='I'] .family__names,
[data-theme='I'] .family__child,
[data-theme='I'] .cover-guest__name {
  color: #2f2418;
  font-weight: 600;
}

[data-theme='I'] .step-note {
  color: #44352a;
  font-weight: 600;
}

[data-theme='I'] .cover-ceremony,
[data-theme='I'] .cover-date {
  font-size: 13px;
  letter-spacing: 0.16em;
}

[data-theme='I'] .cover-eyebrow,
[data-theme='I'] .cover-guest__label {
  font-size: 10px;
  letter-spacing: 0.22em;
}

[data-theme='I'] .msg-lead {
  font-size: 14.5px;
  line-height: 1.55;
}

[data-theme='I'] .msg-addr {
  font-size: 12.5px;
  line-height: 1.45;
}

[data-theme='I'] .countdown--arched .countdown__val {
  color: #2f2418;
}

[data-theme='I'] .date-weekday,
[data-theme='I'] .date-time {
  color: #5a3c16;
  font-weight: 700;
}

[data-theme='I'] .date-day,
[data-theme='I'] .date-my {
  color: #2f2418;
  font-weight: 700;
}

[data-theme='I'] .date-lunar {
  font-style: normal;
  font-size: 12.5px;
}

[data-theme='I'] .lacy-map-fact {
  background: rgba(255, 253, 248, 0.92);
  border-color: rgba(125, 85, 40, 0.4);
}

[data-theme='I'] .lacy-map-fact span {
  color: #6b4a1d;
}

[data-theme='I'] .lacy-map-fact strong {
  color: #2f2418;
}

[data-theme='I'] .lacy-map-note {
  color: #443528;
  font-weight: 600;
}

[data-theme='I'] .lacy-map-actions .btn {
  font-weight: 700;
}

[data-theme='I'] .lacy-map-actions .btn--ornate {
  background: rgba(255, 253, 248, 0.9);
  color: #33281c;
}

[data-theme='I'] .form-transparent .field > label,
[data-theme='I'] .form-transparent .field > legend {
  color: #6b4a1d;
  font-weight: 700;
}

[data-theme='I'] .form-transparent input,
[data-theme='I'] .form-transparent select,
[data-theme='I'] .form-transparent textarea {
  color: #2f2418;
  border-bottom-color: rgba(125, 85, 40, 0.5);
}

[data-theme='I'] .form-transparent input::placeholder,
[data-theme='I'] .form-transparent textarea::placeholder {
  color: #77644c;
  opacity: 1;
}

[data-theme='I'] .wish {
  background: rgba(255, 252, 246, 0.9);
  border-color: rgba(125, 85, 40, 0.34);
}

[data-theme='I'] .wish__name,
[data-theme='I'] .wish__msg {
  color: #2f2418;
}

[data-theme='I'] .gift-qr {
  background: #fff;
  border-color: rgba(125, 85, 40, 0.42);
}

[data-theme='I'] .gift-qr img {
  background: #fff;
}

[data-theme='I'] .gift-bank dd {
  color: #2f2418;
}

/* Màn hình thấp: nén form RSVP của theme I */
@media (max-height: 680px) {
  [data-theme='I'] .step--rsvp .step-inner {
    gap: 6px;
  }

  [data-theme='I'] .step--rsvp .rsvp-note {
    margin-top: 0;
  }

  [data-theme='I'] .step--date .step-inner {
    gap: 6px;
  }

  [data-theme='I'] .countdown.countdown--arched {
    margin-top: 6px;
  }
}

@media (max-height: 600px) {
  [data-theme='I'] .step--rsvp .step-inner {
    gap: 4px;
  }

  [data-theme='I'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='I'] .step--rsvp .step-title {
    font-size: 17px;
    margin: 0;
  }

  [data-theme='I'] .step--rsvp .step-head {
    gap: 1px;
    margin-bottom: 0;
  }

  [data-theme='I'] .step--rsvp .form-transparent {
    gap: 4px;
  }

  [data-theme='I'] .step--rsvp .form-transparent .field > label,
  [data-theme='I'] .step--rsvp .form-transparent .field > legend {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  [data-theme='I'] .step--rsvp .form-transparent input,
  [data-theme='I'] .step--rsvp .form-transparent select,
  [data-theme='I'] .step--rsvp .form-transparent textarea {
    min-height: 28px;
    font-size: 14px;
    padding: 2px;
  }

  [data-theme='I'] .step--rsvp .form-transparent textarea {
    min-height: 32px;
  }

  [data-theme='I'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 13px;
  }

  [data-theme='I'] .step--rsvp .form-action {
    margin-top: 0;
  }

  [data-theme='I'] .step--rsvp .form-action .btn {
    min-height: 38px;
  }

  [data-theme='I'] .countdown__crown {
    display: none;
  }

  [data-theme='I'] .countdown.countdown--arched {
    margin-top: 10px;
  }
}

/* --- 23.1 Theme I (Bohem): Nâng nội dung, trường nhập trong mờ & marquee 1 dòng --- */
[data-theme='I'] .step {
  padding:
    calc(env(safe-area-inset-top, 0px) + 56px) 22px
    calc(env(safe-area-inset-bottom, 0px) + 74px);
}

[data-theme='I'] .step-inner {
  max-width: 84%;
  gap: 8px;
  padding-bottom: 6px;
  --step-shift: -3.5%;
}

[data-theme='I'] .step--cover .step-inner {
  gap: 6px;
  --step-shift: -4.5%;
}

[data-theme='I'] .step--message .step-inner,
[data-theme='I'] .step--gallery .step-inner {
  gap: 7px;
  --step-shift: -3.5%;
}

[data-theme='I'] .step--date .step-inner,
[data-theme='I'] .step--map .step-inner,
[data-theme='I'] .step--rsvp .step-inner,
[data-theme='I'] .step--wishes .step-inner,
[data-theme='I'] .step--gift .step-inner {
  gap: 6px;
  --step-shift: -3%;
}

[data-theme='I'] .step--rsvp .form-transparent--rsvp,
[data-theme='I'] .step--wishes .form-transparent--wishes {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 6px;
}

[data-theme='I'] .form-transparent input[type='text'],
[data-theme='I'] .form-transparent input[type='tel'],
[data-theme='I'] .form-transparent select,
[data-theme='I'] .form-transparent textarea {
  background-color: rgba(255, 252, 246, 0.56);
  border: 1px solid rgba(125, 85, 40, 0.34);
  border-radius: 8px;
  padding: 5px 10px;
  min-height: 34px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

[data-theme='I'] .form-transparent textarea {
  min-height: 46px;
}

[data-theme='I'] .step--rsvp .attend-option {
  background: rgba(255, 252, 246, 0.54);
  border-color: rgba(125, 85, 40, 0.34);
}

[data-theme='I'] .step--wishes .form-status {
  min-height: 10px;
  margin: 2px 0 0;
}

[data-theme='I'] .bohem-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 310px;
  height: 31px;
  margin: 3px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.72);
  border: 1px solid rgba(125, 85, 40, 0.36);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 3px 12px rgba(58, 44, 32, 0.08);
  text-align: left;
}

[data-theme='I'] .bohem-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='I'] .bohem-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: bohemTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='I'] .bohem-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='I'] .bohem-ticker:hover .bohem-ticker__content,
[data-theme='I'] .bohem-ticker:focus-within .bohem-ticker__content {
  animation-play-state: paused;
}

[data-theme='I'] .bohem-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  color: #2f2418;
}

[data-theme='I'] .bohem-ticker__author {
  font-weight: 700;
  color: #6b4a1d;
}

[data-theme='I'] .bohem-ticker__msg {
  color: #3a2c20;
  font-style: italic;
}

[data-theme='I'] .bohem-ticker__dot {
  margin-left: 6px;
  font-size: 11px;
  color: #9b6c39;
}

[data-theme='I'] .wishes-photo {
  width: 100%;
  max-width: 280px;
  height: clamp(86px, 14dvh, 122px);
  margin: 2px auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(125, 85, 40, 0.34);
  box-shadow: 0 6px 16px rgba(58, 44, 32, 0.12);
}

[data-theme='I'] .wishes-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   24. THEME J — SWAN LAKE: NÚT MỞ THIỆP, ĐIỀU HƯỚNG & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

.intro--theme-J .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

.intro--theme-J .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(252, 254, 255, 0.96));
}

.intro--theme-J .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(252, 254, 255, 0.96));
}

.intro--theme-J .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #f4f9fb 56%, #cfdde3);
  box-shadow: rgba(43, 56, 63, 0.28) 0 1.5px 2px;
}

.intro--theme-J .intro__btn-ring {
  border-color: rgba(95, 114, 123, 0.85);
}

.intro--theme-J .intro__btn-body {
  border-color: rgba(95, 114, 123, 0.55);
  background: linear-gradient(118deg, #ffffff 0%, #eef4f7 46%, #fdfeff 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(43, 56, 63, 0.22) 0 10px 24px,
    rgba(43, 56, 63, 0.12) 0 2px 6px;
}

.intro--theme-J .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(191, 208, 216, 0.4),
    rgba(250, 253, 255, 0.7),
    transparent
  );
}

.intro--theme-J .intro__btn-text {
  color: #2b383f;
}

[data-theme='J'] .stage-scroll-down-btn {
  background: rgba(252, 254, 255, 0.82);
  border-color: rgba(95, 114, 123, 0.45);
  color: #2b383f;
  box-shadow:
    0 5px 18px rgba(43, 56, 63, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

[data-theme='J'] .stage-scroll-down-btn:hover,
[data-theme='J'] .stage-scroll-down-btn:focus-visible {
  background: #ffffff;
  box-shadow:
    0 9px 26px rgba(43, 56, 63, 0.22),
    0 1px 0 #fff inset;
}

[data-theme='J'] .scroll-down-text {
  color: #2b383f;
}

[data-theme='J'] .scroll-arrow-bounce {
  color: #4f6570;
}

[data-theme='J'] .stage-music-btn {
  background: rgba(252, 254, 255, 0.84);
  border-color: rgba(95, 114, 123, 0.45);
  color: #33454e;
  box-shadow:
    0 5px 18px rgba(43, 56, 63, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

[data-theme='J'] .stage-music-btn:hover,
[data-theme='J'] .stage-music-btn:focus-visible {
  background: #ffffff;
}

/* Độ tương phản chữ theme J trên nền hồ sương xanh nhạt */
[data-theme='J'] .step-title,
[data-theme='J'] .cover-name {
  color: #24313a;
}

[data-theme='J'] .step-eyebrow,
[data-theme='J'] .cover-eyebrow,
[data-theme='J'] .cover-guest__label,
[data-theme='J'] .family__label,
[data-theme='J'] .msg-foot,
[data-theme='J'] .gift-bank dt,
[data-theme='J'] .countdown__lbl {
  color: #3b565f;
  font-weight: 700;
}

[data-theme='J'] .cover-ceremony,
[data-theme='J'] .cover-date,
[data-theme='J'] .msg-addr,
[data-theme='J'] .date-lunar,
[data-theme='J'] .venue-address,
[data-theme='J'] .gallery-hint,
[data-theme='J'] .gallery-quote,
[data-theme='J'] .gift-note,
[data-theme='J'] .form-status,
[data-theme='J'] .wishes-empty {
  color: #38474f;
  font-weight: 700;
}

[data-theme='J'] .msg-lead,
[data-theme='J'] .family__names,
[data-theme='J'] .family__child,
[data-theme='J'] .cover-guest__name {
  color: #24313a;
  font-weight: 600;
}

[data-theme='J'] .cover-ceremony,
[data-theme='J'] .cover-date {
  font-size: 13px;
  letter-spacing: 0.16em;
}

[data-theme='J'] .cover-eyebrow,
[data-theme='J'] .cover-guest__label {
  font-size: 10px;
  letter-spacing: 0.22em;
}

[data-theme='J'] .msg-lead {
  font-size: 14.5px;
  line-height: 1.55;
}

[data-theme='J'] .msg-addr {
  font-size: 12.5px;
  line-height: 1.45;
}

[data-theme='J'] .countdown--arched .countdown__val {
  color: #24313a;
}

[data-theme='J'] .date-weekday,
[data-theme='J'] .date-time {
  color: #3f5a66;
  font-weight: 700;
}

[data-theme='J'] .date-day,
[data-theme='J'] .date-my {
  color: #24313a;
  font-weight: 700;
}

[data-theme='J'] .date-lunar {
  font-style: normal;
  font-size: 12.5px;
}

[data-theme='J'] .lacy-map-fact {
  background: rgba(252, 254, 255, 0.92);
  border-color: rgba(95, 114, 123, 0.4);
}

[data-theme='J'] .lacy-map-fact span {
  color: #45606b;
}

[data-theme='J'] .lacy-map-fact strong {
  color: #24313a;
}

[data-theme='J'] .lacy-map-note {
  color: #38474f;
  font-weight: 600;
}

[data-theme='J'] .lacy-map-actions .btn {
  font-weight: 700;
}

[data-theme='J'] .lacy-map-actions .btn--ornate {
  background: rgba(252, 254, 255, 0.92);
  color: #24313a;
}

[data-theme='J'] .form-transparent .field > label,
[data-theme='J'] .form-transparent .field > legend {
  color: #3b565f;
  font-weight: 700;
}

/* Form xác nhận hoàn toàn trong suốt; chỉ ô nhập có nền kính mờ để dễ đọc trên nền hồ */
[data-theme='J'] .form-transparent--rsvp,
[data-theme='J'] .form-transparent--wishes {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  gap: 6px;
}

[data-theme='J'] .form-transparent input,
[data-theme='J'] .form-transparent select,
[data-theme='J'] .form-transparent textarea {
  color: #24313a;
  background-color: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(95, 114, 123, 0.36);
  border-radius: 8px;
  padding: 5px 10px;
  min-height: 34px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

[data-theme='J'] .form-transparent textarea {
  min-height: 46px;
}

[data-theme='J'] .step--rsvp .attend-option {
  background: rgba(255, 255, 255, 0.56);
  border-color: rgba(95, 114, 123, 0.36);
}

[data-theme='J'] .form-transparent input::placeholder,
[data-theme='J'] .form-transparent textarea::placeholder {
  color: #6b8089;
  opacity: 1;
}

[data-theme='J'] .wish {
  background: rgba(252, 254, 255, 0.94);
  border-color: rgba(95, 114, 123, 0.34);
}

[data-theme='J'] .wish__name,
[data-theme='J'] .wish__msg {
  color: #24313a;
  font-weight: 700;
}

[data-theme='J'] .gift-qr {
  background: #fff;
  border-color: rgba(95, 114, 123, 0.42);
}

[data-theme='J'] .gift-bank dd {
  color: #24313a;
}

/* Màn hình thấp: nén form RSVP của theme J */
@media (max-height: 680px) {
  [data-theme='J'] .step--rsvp .step-inner {
    gap: 6px;
  }

  [data-theme='J'] .step--rsvp .rsvp-note {
    margin-top: 0;
  }

  [data-theme='J'] .step--date .step-inner {
    gap: 6px;
  }

  [data-theme='J'] .countdown.countdown--arched {
    margin-top: 6px;
  }
}

@media (max-height: 600px) {
  [data-theme='J'] .step--rsvp .step-inner {
    gap: 4px;
  }

  [data-theme='J'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='J'] .step--rsvp .step-title {
    font-size: 17px;
    margin: 0;
  }

  [data-theme='J'] .step--rsvp .step-head {
    gap: 1px;
    margin-bottom: 0;
  }

  [data-theme='J'] .step--rsvp .form-transparent {
    gap: 4px;
  }

  [data-theme='J'] .step--rsvp .form-transparent .field > label,
  [data-theme='J'] .step--rsvp .form-transparent .field > legend {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  [data-theme='J'] .step--rsvp .form-transparent input,
  [data-theme='J'] .step--rsvp .form-transparent select,
  [data-theme='J'] .step--rsvp .form-transparent textarea {
    min-height: 28px;
    font-size: 14px;
    padding: 2px;
  }

  [data-theme='J'] .step--rsvp .form-transparent textarea {
    min-height: 32px;
  }

  [data-theme='J'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 13px;
  }

  [data-theme='J'] .step--rsvp .form-action {
    margin-top: 0;
  }

  [data-theme='J'] .step--rsvp .form-action .btn {
    min-height: 38px;
  }

  [data-theme='J'] .countdown__crown {
    display: none;
  }

  [data-theme='J'] .countdown.countdown--arched {
    margin-top: 10px;
  }
}

/* --- 24.1 Theme J (Swan Lake): Nâng nội dung lên vùng trời sương & marquee 1 dòng --- */
[data-theme='J'] .step {
  padding:
    calc(env(safe-area-inset-top, 0px) + 52px) 22px
    calc(env(safe-area-inset-bottom, 0px) + 74px);
}

[data-theme='J'] .step-inner {
  max-width: 84%;
  gap: 7px;
  padding-bottom: 4px;
  --step-shift: -5.5%;
}

[data-theme='J'] .step--cover .step-inner {
  gap: 6px;
  --step-shift: -6.5%;
}

[data-theme='J'] .step--message .step-inner,
[data-theme='J'] .step--gallery .step-inner {
  gap: 7px;
  --step-shift: -5%;
}

[data-theme='J'] .step--date .step-inner,
[data-theme='J'] .step--map .step-inner,
[data-theme='J'] .step--rsvp .step-inner,
[data-theme='J'] .step--wishes .step-inner,
[data-theme='J'] .step--gift .step-inner {
  gap: 6px;
  --step-shift: -4.5%;
}

[data-theme='J'] .step--wishes .form-status {
  min-height: 10px;
  margin: 2px 0 0;
}

[data-theme='J'] .swan-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 310px;
  height: 31px;
  margin: 3px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(95, 114, 123, 0.36);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 3px 12px rgba(43, 56, 63, 0.08);
  text-align: left;
}

[data-theme='J'] .swan-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='J'] .swan-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: swanTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='J'] .swan-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='J'] .swan-ticker:hover .swan-ticker__content,
[data-theme='J'] .swan-ticker:focus-within .swan-ticker__content {
  animation-play-state: paused;
}

[data-theme='J'] .swan-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  color: #24313a;
}

[data-theme='J'] .swan-ticker__author {
  font-weight: 700;
  color: #3f5763;
}

[data-theme='J'] .swan-ticker__msg {
  color: #2b383f;
  font-style: italic;
}

[data-theme='J'] .swan-ticker__dot {
  margin-left: 6px;
  font-size: 11px;
  color: #6f8994;
}

[data-theme='J'] .wishes-photo {
  width: 100%;
  max-width: 280px;
  height: clamp(84px, 13.5dvh, 118px);
  margin: 2px auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(95, 114, 123, 0.36);
  box-shadow: 0 6px 16px rgba(43, 56, 63, 0.12);
}

[data-theme='J'] .wishes-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   25. THEME K — LACY DELUXE: NÚT MỞ THIỆP, KHUNG REN & ĐỘ TƯƠNG PHẢN
   ========================================================================== */

.intro--theme-K .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

/* Khung cuộn dọc của .step-inner cắt mất ký tự đầu dòng ở màn hẹp
   (Chromium + letter-spacing) ⇒ cho theme K tràn tự nhiên */
[data-theme='K'] .step-inner {
  overflow: visible;
  max-height: none;
}

/* Nhãn phụ trang lời chúc nằm đúng đường ren của nền ⇒ ẩn cho gọn */
[data-theme='K'] .step--wishes .step-eyebrow {
  display: none;
}

.intro--theme-K .intro__wing-line {
  background: linear-gradient(90deg, transparent, rgba(255, 251, 242, 0.95));
}

.intro--theme-K .intro__wing-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(255, 251, 242, 0.95));
}

.intro--theme-K .intro__wing-dot {
  background: radial-gradient(circle at 34% 30%, #ffffff, #fdf7ec 56%, #ddc8a4);
  box-shadow: rgba(74, 65, 54, 0.3) 0 1.5px 2px;
}

.intro--theme-K .intro__btn-ring {
  border-color: rgba(141, 113, 65, 0.9);
}

.intro--theme-K .intro__btn-body {
  border-color: rgba(141, 113, 65, 0.6);
  background: linear-gradient(118deg, #fffdf8 0%, #f6eddd 46%, #fffdf9 100%);
  box-shadow:
    rgba(255, 255, 255, 0.95) 0 1px 0 inset,
    rgba(74, 65, 54, 0.24) 0 10px 24px,
    rgba(74, 65, 54, 0.12) 0 2px 6px;
}

.intro--theme-K .intro__btn-sheen {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 201, 174, 0.34),
    rgba(255, 250, 240, 0.66),
    transparent
  );
}

.intro--theme-K .intro__btn-text {
  color: #3a322a;
}

[data-theme='K'] .stage-scroll-down-btn {
  background: rgba(255, 253, 248, 0.84);
  border-color: rgba(141, 113, 65, 0.45);
  color: #3a322a;
  box-shadow:
    0 5px 18px rgba(74, 65, 54, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='K'] .stage-scroll-down-btn:hover,
[data-theme='K'] .stage-scroll-down-btn:focus-visible {
  background: rgba(255, 254, 251, 0.98);
  box-shadow:
    0 9px 26px rgba(74, 65, 54, 0.24),
    0 1px 0 #fff inset;
}

[data-theme='K'] .scroll-down-text {
  color: #3a322a;
}

[data-theme='K'] .scroll-arrow-bounce {
  color: #7a5f34;
}

[data-theme='K'] .stage-music-btn {
  background: rgba(255, 253, 248, 0.86);
  border-color: rgba(141, 113, 65, 0.45);
  color: #4a4136;
  box-shadow:
    0 5px 18px rgba(74, 65, 54, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

[data-theme='K'] .stage-music-btn:hover,
[data-theme='K'] .stage-music-btn:focus-visible {
  background: #fffefc;
}

/* Độ tương phản chữ theme K trên nền ren ngà */
[data-theme='K'] .step-title,
[data-theme='K'] .cover-name {
  color: #2f281f;
}

[data-theme='K'] .step-eyebrow,
[data-theme='K'] .cover-eyebrow,
[data-theme='K'] .cover-guest__label,
[data-theme='K'] .family__label,
[data-theme='K'] .msg-foot,
[data-theme='K'] .gift-bank dt,
[data-theme='K'] .countdown__lbl {
  color: #6b5228;
  font-weight: 700;
}

[data-theme='K'] .cover-ceremony,
[data-theme='K'] .cover-date,
[data-theme='K'] .msg-addr,
[data-theme='K'] .date-lunar,
[data-theme='K'] .venue-address,
[data-theme='K'] .gallery-hint,
[data-theme='K'] .gallery-quote,
[data-theme='K'] .gift-note,
[data-theme='K'] .form-status,
[data-theme='K'] .wishes-empty {
  color: #41382c;
  font-weight: 700;
}

[data-theme='K'] .msg-lead,
[data-theme='K'] .family__names,
[data-theme='K'] .family__child,
[data-theme='K'] .cover-guest__name {
  color: #2f281f;
  font-weight: 600;
}

[data-theme='K'] .cover-ceremony,
[data-theme='K'] .cover-date {
  font-size: 13px;
  letter-spacing: 0.16em;
}

[data-theme='K'] .cover-eyebrow,
[data-theme='K'] .cover-guest__label {
  font-size: 10px;
  letter-spacing: 0.22em;
}

[data-theme='K'] .msg-lead {
  font-size: 14.5px;
  line-height: 1.55;
}

[data-theme='K'] .msg-addr {
  font-size: 12.5px;
  line-height: 1.45;
}

[data-theme='K'] .countdown--arched .countdown__val {
  color: #2f281f;
}

/* Trang thời gian: giữ thứ/giờ trong lòng khung ren */
[data-theme='K'] .date-block {
  max-width: 232px;
  column-gap: 4px;
}

[data-theme='K'] .date-weekday,
[data-theme='K'] .date-time {
  color: #5a4118;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme='K'] .date-weekday {
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

[data-theme='K'] .date-time {
  font-size: 14px;
}

[data-theme='K'] .date-day,
[data-theme='K'] .date-my {
  color: #2f281f;
  font-weight: 700;
}

[data-theme='K'] .date-lunar {
  font-style: normal;
  font-size: 12.5px;
}

/* Trang bản đồ: dùng nền phẳng để khung ren không đè lên thẻ bản đồ */
[data-theme='K'] .step--map .step-art {
  display: none;
}

[data-theme='K'] .step--map .step-inner {
  gap: 8px;
}

[data-theme='K'] .map-plate--framed {
  aspect-ratio: 4 / 3;
  max-width: 286px;
}

[data-theme='K'] .map-plate--framed .map-plate__well {
  inset: 0;
  border: 1px solid rgba(141, 113, 65, 0.42);
  border-radius: 14px;
  background: #f4efe6;
}

[data-theme='K'] .map-plate__frame {
  display: none;
}

[data-theme='K'] .lacy-map-facts {
  margin-top: 4px;
}

[data-theme='K'] .lacy-map-fact {
  background: rgba(255, 253, 248, 0.94);
  border-color: rgba(141, 113, 65, 0.42);
}

[data-theme='K'] .lacy-map-fact span {
  color: #6b5228;
}

[data-theme='K'] .lacy-map-fact strong {
  color: #2f281f;
}

[data-theme='K'] .lacy-map-actions .btn {
  font-weight: 700;
}

[data-theme='K'] .lacy-map-actions .btn--ornate {
  background: rgba(255, 253, 248, 0.94);
  color: #2f281f;
  border-color: rgba(141, 113, 65, 0.6);
}

[data-theme='K'] .lacy-map-note {
  color: #41382c;
  font-weight: 600;
}

[data-theme='K'] .form-transparent .field > label,
[data-theme='K'] .form-transparent .field > legend {
  color: #6b5228;
  font-weight: 700;
}

[data-theme='K'] .form-transparent--rsvp,
[data-theme='K'] .form-transparent--wishes {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 6px;
}

[data-theme='K'] .form-transparent input,
[data-theme='K'] .form-transparent select,
[data-theme='K'] .form-transparent textarea {
  color: #2f281f;
  background-color: rgba(255, 253, 248, 0.58);
  border: 1px solid rgba(141, 113, 65, 0.36);
  border-radius: 8px;
  padding: 5px 10px;
  min-height: 34px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

[data-theme='K'] .form-transparent textarea {
  min-height: 46px;
}

[data-theme='K'] .step--rsvp .attend-option {
  background: rgba(255, 253, 248, 0.58);
  border-color: rgba(141, 113, 65, 0.36);
}

[data-theme='K'] .form-transparent input::placeholder,
[data-theme='K'] .form-transparent textarea::placeholder {
  color: #77684a;
  opacity: 1;
}

[data-theme='K'] .wish {
  background: rgba(255, 253, 248, 0.92);
  border-color: rgba(141, 113, 65, 0.34);
}

[data-theme='K'] .wish__name,
[data-theme='K'] .wish__msg {
  color: #2f281f;
}

[data-theme='K'] .gift-qr {
  background: #fff;
  border-color: rgba(141, 113, 65, 0.42);
}

[data-theme='K'] .gift-bank dd {
  color: #2f281f;
}

/* Màn hình thấp: nén form RSVP và bản đồ của theme K */
@media (max-height: 680px) {
  [data-theme='K'] .step--rsvp .step-inner {
    gap: 6px;
  }

  [data-theme='K'] .step--rsvp .rsvp-note {
    margin-top: 0;
  }

  [data-theme='K'] .step--date .step-inner {
    gap: 6px;
  }

  [data-theme='K'] .countdown.countdown--arched {
    margin-top: 6px;
  }

  [data-theme='K'] .lacy-map-facts {
    margin-top: 12px;
  }
}

@media (max-height: 600px) {
  [data-theme='K'] .step--rsvp .step-inner {
    gap: 4px;
  }

  [data-theme='K'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='K'] .step--rsvp .step-title {
    font-size: 17px;
    margin: 0;
  }

  [data-theme='K'] .step--rsvp .step-head {
    gap: 1px;
    margin-bottom: 0;
  }

  [data-theme='K'] .step--rsvp .form-transparent {
    gap: 4px;
  }

  [data-theme='K'] .step--rsvp .form-transparent .field > label,
  [data-theme='K'] .step--rsvp .form-transparent .field > legend {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  [data-theme='K'] .step--rsvp .form-transparent input,
  [data-theme='K'] .step--rsvp .form-transparent select,
  [data-theme='K'] .step--rsvp .form-transparent textarea {
    min-height: 28px;
    font-size: 14px;
    padding: 2px;
  }

  [data-theme='K'] .step--rsvp .form-transparent textarea {
    min-height: 32px;
  }

  [data-theme='K'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 13px;
  }

  [data-theme='K'] .step--rsvp .form-action {
    margin-top: 0;
  }

  [data-theme='K'] .step--rsvp .form-action .btn {
    min-height: 38px;
  }

  [data-theme='K'] .countdown__crown {
    display: none;
  }

  [data-theme='K'] .countdown.countdown--arched {
    margin-top: 10px;
  }

  [data-theme='K'] .lacy-map-facts {
    margin-top: 6px;
  }
}

/* --- 25.1 Theme K (Lacy Deluxe): Khung thời gian barok, nâng nội dung & marquee 1 dòng --- */
[data-theme='K'] .step {
  padding:
    calc(env(safe-area-inset-top, 0px) + 64px) 22px
    calc(env(safe-area-inset-bottom, 0px) + 74px);
}

[data-theme='K'] .step-inner {
  max-width: 86%;
  gap: 7px;
  padding-bottom: 6px;
  --step-shift: -2%;
}

[data-theme='K'] .step--date .step-inner {
  gap: 6px;
  --step-shift: -2.5%;
}

[data-theme='K'] .lacy-k-date-frames {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 2px auto 0;
}

[data-theme='K'] .lacy-k-main-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(108px, 31vw, 128px);
  aspect-ratio: 597 / 892;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme='K'] .lacy-k-main-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(74, 65, 54, 0.14));
}

[data-theme='K'] .lacy-k-main-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 16px 12px 20px;
  text-align: center;
}

[data-theme='K'] .lacy-k-day {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 700;
  line-height: 1;
  color: #2f281f;
}

[data-theme='K'] .lacy-k-month {
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b5228;
  margin-top: 2px;
}

[data-theme='K'] .lacy-k-year {
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #2f281f;
}

[data-theme='K'] .lacy-k-sub-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(82px, 24vw, 96px);
  aspect-ratio: 419 / 332;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme='K'] .lacy-k-sub-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(74, 65, 54, 0.12));
}

[data-theme='K'] .lacy-k-sub-card__text {
  position: relative;
  z-index: 2;
  padding: 4px 10px;
  text-align: center;
  line-height: 1.2;
}

[data-theme='K'] .lacy-k-sub-card__text.date-weekday {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #5a4118;
  font-weight: 700;
}

[data-theme='K'] .lacy-k-sub-card__text.date-time {
  font-size: 13.5px;
  color: #2f281f;
  font-weight: 700;
}

[data-theme='K'] .step--wishes .form-status {
  min-height: 10px;
  margin: 2px 0 0;
}

[data-theme='K'] .lacy-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 310px;
  height: 31px;
  margin: 3px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid rgba(141, 113, 65, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 3px 12px rgba(74, 65, 54, 0.08);
  text-align: left;
}

[data-theme='K'] .lacy-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='K'] .lacy-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: lacyTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='K'] .lacy-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='K'] .lacy-ticker:hover .lacy-ticker__content,
[data-theme='K'] .lacy-ticker:focus-within .lacy-ticker__content {
  animation-play-state: paused;
}

[data-theme='K'] .lacy-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  color: #2f281f;
}

[data-theme='K'] .lacy-ticker__author {
  font-weight: 700;
  color: #6b5228;
}

[data-theme='K'] .lacy-ticker__msg {
  color: #41382c;
  font-style: italic;
}

[data-theme='K'] .lacy-ticker__dot {
  margin-left: 6px;
  font-size: 11px;
  color: #8d7141;
}

[data-theme='K'] .wishes-photo {
  width: 100%;
  max-width: 280px;
  height: clamp(86px, 14dvh, 122px);
  margin: 2px auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(141, 113, 65, 0.4);
  box-shadow: 0 6px 16px rgba(74, 65, 54, 0.12);
}

[data-theme='K'] .wishes-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   26. MÀN HÌNH THẤP — NÉN FORM RSVP CHO A, B, C, D, G
   ========================================================================== */

/* Nút mở thiệp theme G: đặt theo % để không rơi khỏi màn hình 320×568 */
.intro--theme-G .intro__luxury-btn {
  top: 76%;
  margin-top: 0;
}

@media (max-height: 700px) {
  [data-theme='D'] .step--rsvp .form-transparent .field > label,
  [data-theme='D'] .step--rsvp .form-transparent .field > legend {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  [data-theme='D'] .step--rsvp .form-transparent input,
  [data-theme='D'] .step--rsvp .form-transparent select {
    min-height: 32px;
  }

  [data-theme='D'] .step--rsvp .form-transparent textarea {
    min-height: 44px;
  }

  [data-theme='D'] .step--rsvp .choice--text {
    min-height: 30px;
    font-size: 13.5px;
  }

  [data-theme='D'] .step--rsvp .form-action .btn {
    min-height: 40px;
  }

  /* D: dòng mô tả chiếm nhiều chỗ trên màn 667px ⇒ ẩn để form vừa một màn */
  [data-theme='D'] .step--rsvp .rsvp-note {
    display: none;
  }
}

@media (max-height: 600px) {
  /* A, B, C: ẩn dòng mô tả, nén nhãn/ô nhập để nút gửi không bị cắt */
  [data-theme='A'] .step--rsvp .step-inner,
  [data-theme='B'] .step--rsvp .step-inner,
  [data-theme='C'] .step--rsvp .step-inner {
    gap: 4px;
  }

  [data-theme='A'] .step--rsvp .rsvp-note,
  [data-theme='B'] .step--rsvp .rsvp-note,
  [data-theme='C'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='A'] .step--rsvp .step-head,
  [data-theme='B'] .step--rsvp .step-head,
  [data-theme='C'] .step--rsvp .step-head {
    gap: 1px;
    margin-bottom: 0;
  }

  [data-theme='A'] .step--rsvp .step-title,
  [data-theme='B'] .step--rsvp .step-title,
  [data-theme='C'] .step--rsvp .step-title {
    font-size: 17px;
    margin: 0;
  }

  [data-theme='A'] .step--rsvp .form-transparent,
  [data-theme='B'] .step--rsvp .form-transparent,
  [data-theme='C'] .step--rsvp .form-transparent {
    gap: 4px;
  }

  [data-theme='A'] .step--rsvp .form-transparent .field > label,
  [data-theme='A'] .step--rsvp .form-transparent .field > legend,
  [data-theme='B'] .step--rsvp .form-transparent .field > label,
  [data-theme='B'] .step--rsvp .form-transparent .field > legend,
  [data-theme='C'] .step--rsvp .form-transparent .field > label,
  [data-theme='C'] .step--rsvp .form-transparent .field > legend {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  [data-theme='A'] .step--rsvp .form-transparent input,
  [data-theme='A'] .step--rsvp .form-transparent select,
  [data-theme='A'] .step--rsvp .form-transparent textarea,
  [data-theme='B'] .step--rsvp .form-transparent input,
  [data-theme='B'] .step--rsvp .form-transparent select,
  [data-theme='B'] .step--rsvp .form-transparent textarea,
  [data-theme='C'] .step--rsvp .form-transparent input,
  [data-theme='C'] .step--rsvp .form-transparent select,
  [data-theme='C'] .step--rsvp .form-transparent textarea {
    min-height: 28px;
    font-size: 14px;
    padding: 2px;
  }

  [data-theme='A'] .step--rsvp .form-transparent textarea,
  [data-theme='B'] .step--rsvp .form-transparent textarea,
  [data-theme='C'] .step--rsvp .form-transparent textarea {
    min-height: 32px;
  }

  [data-theme='A'] .step--rsvp .choice--text,
  [data-theme='B'] .step--rsvp .choice--text,
  [data-theme='C'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 13px;
  }

  [data-theme='A'] .step--rsvp .form-action,
  [data-theme='B'] .step--rsvp .form-action,
  [data-theme='C'] .step--rsvp .form-action {
    margin-top: 0;
  }

  [data-theme='A'] .step--rsvp .form-action .btn,
  [data-theme='B'] .step--rsvp .form-action .btn,
  [data-theme='C'] .step--rsvp .form-action .btn {
    min-height: 38px;
  }

  /* G: nén form và thu gọn khung lời chúc */
  [data-theme='G'] .step--rsvp .step-inner {
    gap: 4px;
  }

  [data-theme='G'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='G'] .step--rsvp .step-head {
    gap: 1px;
    margin-bottom: 0;
  }

  [data-theme='G'] .step--rsvp .step-title {
    font-size: 17px;
    margin: 0;
  }

  [data-theme='G'] .step--rsvp .form-transparent {
    gap: 4px;
  }

  [data-theme='G'] .step--rsvp .form-transparent .field > label,
  [data-theme='G'] .step--rsvp .form-transparent .field > legend {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  [data-theme='G'] .step--rsvp .form-transparent input,
  [data-theme='G'] .step--rsvp .form-transparent select,
  [data-theme='G'] .step--rsvp .form-transparent textarea {
    min-height: 30px;
    font-size: 14px;
    padding: 3px 10px;
  }

  [data-theme='G'] .step--rsvp .form-transparent textarea {
    min-height: 32px;
  }

  [data-theme='G'] .step--rsvp .attend-option {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12.5px;
  }

  [data-theme='G'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 13px;
  }

  [data-theme='G'] .step--rsvp .form-action {
    margin-top: 0;
  }

  [data-theme='G'] .step--rsvp .form-action .btn {
    min-height: 38px;
  }
}

/* ==========================================================================
   27. THEME A — ÉLYSÉE SAGE: HOÀN THIỆN TRẢI NGHIỆM (2026-11)
   --------------------------------------------------------------------------
   • Giữ đúng tỷ lệ khung thiệp trên PC (không gọt mép poster/video).
   • Nút CHẠM ĐỂ MỞ tối giản (vòng tròn viền mảnh + mũi tên + chữ mảnh).
   • Chữ trang bìa bay vào chậm; tên chú rể trải trái→phải, cô dâu phải→trái.
   • trang 3: tarih-frame.png thành khung ngày tháng nhỏ nằm lọt lòng.
   • trang 5: 2 hàng album khép từ trên xuống / dưới lên.
   • trang 7: lời chúc 1 dòng marquee + ảnh kỷ niệm lớn.
   ========================================================================== */

/* --- 27.0 Chống giật (anti-jank) ---------------------------------------- */
/* Giữ các phần tử xuất hiện trên một lớp compositing ổn định để Chromium
   không giải phóng GPU layer ở frame cuối ⇒ chữ không bị "snap"/giật. */
.reveal,
.cover-eyebrow,
.cover-ceremony,
.cover-guest,
.cover-name,
.step-head > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* --- 27.1 Tỷ lệ PC: poster & video khớp 9:16 không bị xén hay thừa viền ----- */
@media (min-width: 760px) {
  .inv[data-theme='A'],
  .intro--theme-A {
    width: auto;
    max-width: min(468px, calc(100vw - 24px));
    aspect-ratio: 9 / 16;
    height: min(100dvh - 24px, 832px);
    margin: auto;
  }

  .inv[data-theme='A'] .stage-bg__video,
  .intro--theme-A .intro__poster {
    object-fit: fill;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eef0e8;
  }
}

/* --- 27.2 Nút "CHẠM ĐỂ MỞ" tối giản -------------------------------------- */
.intro__sage-btn {
  position: absolute;
  top: 76%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  pointer-events: none;
  animation: sageFloatPulse 2.6s ease-in-out infinite;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
}

.intro.is-opening .intro__sage-btn {
  opacity: 0;
}

.intro__sage-circle {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.intro__sage-arrow {
  display: block;
  color: rgba(255, 255, 255, 0.85);
}

.intro__sage-text {
  font-family: var(--t-font-body, 'Be Vietnam Pro', 'Montserrat', sans-serif);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

/* --- 27.3 Trang bìa: chữ dẫn dắt bay vào chậm + tên đối xứng ------------ */
.inv[data-theme='A'] .step--cover .cover-eyebrow.reveal,
.inv[data-theme='A'] .step--cover .cover-ceremony.reveal,
.inv[data-theme='A'] .step--cover .cover-guest.reveal {
  animation-name: fadeInSlow;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.inv[data-theme='A'] .step--cover .cover-eyebrow.reveal {
  animation-delay: 0ms;
}

.inv[data-theme='A'] .step--cover .cover-ceremony.reveal {
  animation-delay: 250ms;
}

.inv[data-theme='A'] .step--cover .cover-guest.reveal {
  animation-delay: 550ms;
}

/* Chữ trải chậm rãi hơn (1.25s) — keyframes blur-free riêng của Theme A. */
.inv[data-theme='A'] .step--cover .cover-name--sage-left .char-fly--left {
  animation-name: sageCharInLeft;
  animation-duration: 1.25s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.inv[data-theme='A'] .step--cover .cover-name--sage-right .char-fly--right {
  animation-name: sageCharInRight;
  animation-duration: 1.25s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* --- 27.3b Reveal blur-free: chỉ đổi tên keyframe, giữ nguyên delay/timing - */
.inv[data-theme='A'] .step.is-active .reveal {
  animation-name: sageFadeUp;
}

.inv[data-theme='A'] .step.is-active .reveal--left {
  animation-name: sageFadeLeft;
}

.inv[data-theme='A'] .step.is-active .reveal--right {
  animation-name: sageFadeRight;
}

.inv[data-theme='A'] .step.is-active .reveal--mask {
  animation-name: sageMaskUp;
}

.inv[data-theme='A'] .step.is-active .reveal--scale {
  animation-name: sageFadeScale;
}

.inv[data-theme='A'] .step.is-active .reveal--blur,
.inv[data-theme='A'] .step.is-active .reveal--bottom,
.inv[data-theme='A'] .step.is-active .reveal--up {
  animation-name: sageFadeUp;
}

.inv[data-theme='A'] .step.is-active .reveal-fly,
.inv[data-theme='A'] .step.is-active .reveal-unroll,
.inv[data-theme='A'] .step.is-active .reveal-unroll-gallery {
  animation-name: sageFadeScale;
}

.inv[data-theme='A'] .step.is-active .step-head > :nth-child(1) {
  animation-name: sageFadeDown;
}

.inv[data-theme='A'] .step.is-active .step-head > :nth-child(2) {
  animation-name: sageFadeUp;
}

[data-theme='A'] .cover-names--sage-symmetric {
  gap: 0;
  margin: 6px 0 4px;
}

/* Giới hạn cỡ chữ theo bề rộng khung (clamp tính theo vw nên trên PC sẽ
   phình quá khổ, tràn khỏi .step-inner và bị cắt mất ký tự đầu/cuối). */
[data-theme='A'] .cover-name--sage-left,
[data-theme='A'] .cover-name--sage-right {
  font-size: clamp(24px, 8.4vw, 36px);
  line-height: 1.24;
}

[data-theme='A'] .cover-names--sage-symmetric .cover-amp {
  margin: -4px 0;
  display: inline-block;
}

/* --- 27.4 Nút "Cuộn xuống": hover mượt, mũi tên nhún liên tục ------------ */
[data-theme='A'] .stage-scroll-down-btn {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease,
    background 0.35s ease,
    opacity 0.35s ease;
  will-change: transform;
}

[data-theme='A'] .stage-scroll-down-btn:hover,
[data-theme='A'] .stage-scroll-down-btn:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(28, 43, 33, 0.18);
}

[data-theme='A'] .stage-scroll-down-btn .scroll-arrow-bounce {
  animation-name: arrowBob;
  will-change: transform;
}

/* --- 27.5 Trang 2: lời mời gia đình xuất hiện so le ---------------------- */
.inv[data-theme='A'] .step--message .step-head > :nth-child(1) {
  animation-delay: 150ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--message .msg-lead.reveal,
.inv[data-theme='A'] .step--message .msg-addr.reveal {
  animation-delay: 300ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--message .families .family:nth-child(1) {
  animation-delay: 480ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--message .families .family:nth-child(2) {
  animation-delay: 620ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--message .msg-foot.reveal {
  animation-delay: 760ms;
  animation-duration: 1.2s;
}

/* --- 27.6 Trang 3: khung ngày tháng nhỏ nằm lọt lòng --------------------- */
[data-theme='A'] .sage-date-card {
  position: relative;
  width: min(190px, 58%);
  aspect-ratio: 712 / 1057;
  margin: 4px auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

[data-theme='A'] .sage-date-frame-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 1;
}

[data-theme='A'] .sage-date-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 10px;
  text-align: center;
  color: var(--t-ink, #1c2b21);
}

[data-theme='A'] .sage-date-weekday {
  margin: 0;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t-ink-soft, #33483a);
}

[data-theme='A'] .sage-date-day {
  margin: 2px 0;
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  color: var(--t-ink, #1c2b21);
}

[data-theme='A'] .sage-date-month-year {
  margin: 2px 0 0;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-ink-soft, #33483a);
}

[data-theme='A'] .sage-date-divider {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--t-line, rgba(28, 43, 33, 0.3));
  margin: 4px auto;
}

[data-theme='A'] .sage-date-time {
  margin: 0;
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--t-gold, #5f4a1e);
}

/* Countdown hạ tông + thu gọn, hoà vào giấy xô thơm */
[data-theme='A'] .countdown--arched {
  background: rgba(233, 236, 225, 0.65);
  border: 1px solid rgba(143, 169, 141, 0.3);
  box-shadow: 0 4px 16px rgba(28, 43, 33, 0.06);
  padding: 4px 6px;
  margin: 4px 0 6px;
}

[data-theme='A'] .countdown--arched .countdown__box--arch {
  min-width: 44px;
  padding: 3px 2px;
  background: rgba(244, 245, 239, 0.7);
  border: 1px solid rgba(143, 169, 141, 0.25);
}

[data-theme='A'] .countdown--arched .countdown__val {
  font-size: 18px;
  color: #1c2b21;
}

[data-theme='A'] .countdown--arched .countdown__lbl {
  font-size: 8.5px;
}

[data-theme='A'] .countdown__crown {
  display: none;
}

/* --- 27.7 Trang 4: ghim chibi nhún nhảy ---------------------------------- */
[data-theme='A'] .step.is-active .map-pin--chibi {
  animation:
    chibiMapPinDrop 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s both,
    sagePinBounce 2.2s ease-in-out 1.25s infinite;
}

.inv[data-theme='A'] .step--map .reveal {
  animation-duration: 1.2s;
}

/* --- 27.8 Trang 5: tiêu đề trồi lên + 2 hàng ảnh khép lại --------------- */
.inv[data-theme='A'] .step--gallery.is-active .step-head > :nth-child(2) {
  animation-name: fadeInSlow;
  animation-duration: 1.2s;
  animation-delay: 120ms;
}

.inv[data-theme='A'] .step--gallery.is-active .album-cell--row-1 {
  animation-name: sageAlbumFromTop;
}

.inv[data-theme='A'] .step--gallery.is-active .album-cell--row-2 {
  animation-name: sageAlbumFromBottom;
  animation-delay: calc(220ms + var(--i, 0) * 62ms);
}

.inv[data-theme='A'] .step--gallery .album-wrap.reveal {
  animation-duration: 1.2s;
}

/* --- 27.9 Trang 6: form RSVP trượt vào từng dòng, chậm rãi --------------- */
.inv[data-theme='A'] .step--rsvp .form-transparent--rsvp > :nth-child(1) {
  animation-delay: 120ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--rsvp .form-transparent--rsvp > :nth-child(2) {
  animation-delay: 220ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--rsvp .form-transparent--rsvp > :nth-child(3) {
  animation-delay: 320ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--rsvp .form-transparent--rsvp > :nth-child(4) {
  animation-delay: 420ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--rsvp .form-transparent--rsvp > :nth-child(5) {
  animation-delay: 480ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--rsvp .form-transparent--rsvp > :nth-child(6) {
  animation-delay: 540ms;
  animation-duration: 1.2s;
}

/* --- 27.9b Thu gọn form RSVP để không đè hoa văn đáy khung -------------- */
[data-theme='A'] .step--rsvp .step-inner {
  padding-bottom: 35px;
  gap: 6px;
}

[data-theme='A'] .step--rsvp .form-transparent--rsvp {
  gap: 4px;
  max-width: 310px;
  margin: 0 auto;
}

[data-theme='A'] .step--rsvp .field > label,
[data-theme='A'] .step--rsvp .field > legend {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

[data-theme='A'] .step--rsvp .form-transparent input,
[data-theme='A'] .step--rsvp .form-transparent select {
  min-height: 30px;
  font-size: 13px;
  padding: 3px 8px;
}

[data-theme='A'] .step--rsvp .attend-options {
  gap: 6px;
}

[data-theme='A'] .step--rsvp .attend-option span {
  font-size: 12px;
}

[data-theme='A'] .step--rsvp .btn--cta {
  min-height: 36px;
  font-size: 13px;
  padding: 6px 16px;
  margin-top: 4px;
}

/* --- 27.10 Trang 7: ảnh kỷ niệm vừa vặn + marquee lời chúc 1 dòng ------- */
[data-theme='A'] .step--wishes .step-inner {
  padding-bottom: 35px;
}

[data-theme='A'] .step--wishes .form-transparent--wishes {
  gap: 5px;
  max-width: 310px;
  margin: 0 auto;
}

[data-theme='A'] .step--wishes .form-transparent--wishes input {
  min-height: 30px;
  font-size: 13px;
  padding: 3px 8px;
}

[data-theme='A'] .step--wishes .form-transparent--wishes textarea {
  min-height: 48px;
  font-size: 12.5px;
  padding: 4px 8px;
}

[data-theme='A'] .step--wishes .form-transparent--wishes .btn {
  min-height: 32px;
  font-size: 12px;
  padding: 4px 12px;
}

[data-theme='A'] .wishes-photo,
[data-theme='A'] .wishes-footer-photo {
  width: 100%;
  max-width: 320px;
  height: 165px;
  margin: 6px auto 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(143, 169, 141, 0.4);
  box-shadow: 0 8px 24px rgba(28, 43, 33, 0.12);
}

[data-theme='A'] .wishes-photo img,
[data-theme='A'] .wishes-footer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-theme='A'] .sage-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 32px;
  margin: 6px 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(233, 236, 225, 0.75);
  border: 1px solid rgba(143, 169, 141, 0.35);
  text-align: left;
}

[data-theme='A'] .sage-ticker__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: #fff;
  background: #33483a;
}

[data-theme='A'] .sage-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='A'] .sage-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: sageTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='A'] .sage-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='A'] .sage-ticker:hover .sage-ticker__content,
[data-theme='A'] .sage-ticker:focus-within .sage-ticker__content {
  animation-play-state: paused;
}

[data-theme='A'] .sage-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 11.5px;
  color: #1c2b21;
}

[data-theme='A'] .sage-ticker__author {
  font-weight: 700;
  color: #1c2b21;
}

[data-theme='A'] .sage-ticker__msg {
  font-style: italic;
  color: #33483a;
}

[data-theme='A'] .sage-ticker__dot {
  margin-left: 6px;
  color: #8fa98d;
}

/* --- 27.11 Trang 8: QR / ngân hàng / nút sao chép hiện tuần tự ------------ */
.inv[data-theme='A'] .step--gift .gift-qr.reveal,
.inv[data-theme='A'] .step--gift .gift-seal.reveal {
  animation-delay: 120ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--gift .gift-bank.reveal {
  animation-delay: 280ms;
  animation-duration: 1.2s;
}

.inv[data-theme='A'] .step--gift .gift-actions.reveal {
  animation-delay: 440ms;
  animation-duration: 1.2s;
}

/* --- 27.12 Màn hình thấp: thu khung ngày & ảnh kỷ niệm ------------------- */
@media (max-height: 700px) {
  [data-theme='A'] .sage-date-card {
    width: min(168px, 54%);
  }

  [data-theme='A'] .sage-date-day {
    font-size: 32px;
  }

  [data-theme='A'] .wishes-photo,
  [data-theme='A'] .wishes-footer-photo {
    height: 140px;
  }
}

@media (max-height: 600px) {
  [data-theme='A'] .sage-date-card {
    width: min(152px, 50%);
    margin: 2px auto 4px;
  }

  [data-theme='A'] .sage-date-day {
    font-size: 28px;
  }

  [data-theme='A'] .wishes-photo,
  [data-theme='A'] .wishes-footer-photo {
    height: 118px;
    margin-top: 4px;
  }

  [data-theme='A'] .sage-ticker {
    height: 30px;
    margin: 4px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro__sage-btn {
    animation: none;
  }

  /* Ticker dừng chạy nhưng vẫn đọc được: cho phép vuốt ngang để xem hết. */
  [data-theme='A'] .sage-ticker__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-theme='A'] .sage-ticker__track::-webkit-scrollbar {
    display: none;
  }

  [data-theme='A'] .sage-ticker__content {
    animation: none;
  }
}

/* ==========================================================================
   28. THEME B — BLUSH GARDEN: HOÀN THIỆN TRẢI NGHIỆM (2026-11)
   --------------------------------------------------------------------------
   • Nút mở thiệp hạ xuống 83% (thoáng phần trên phong bì).
   • Form RSVP / Sổ lưu bút: nền đục mờ (frosted glass) + thu gọn như Theme A.
   • Sổ lưu bút: thanh marquee 1 dòng (.blush-ticker) + ảnh kỷ niệm vừa vặn.
   • Trang bìa: tên đối xứng (trái→phải / phải→trái), font Alex Brush.
   • Trang ngày: khung ngày thu gọn, countdown tông hồng phấn.
   • Album: hàng trên khép từ trên xuống, hàng dưới khép từ dưới lên.
   • Mọi reveal dùng keyframe blur-free, kèm hint compositing chống giật.
   ========================================================================== */

/* --- 28.1 Chống giật (anti-jank) cho chữ xuất hiện của Theme B ----------- */
[data-theme='B'] .reveal,
[data-theme='B'] .cover-eyebrow,
[data-theme='B'] .cover-ceremony,
[data-theme='B'] .cover-guest,
[data-theme='B'] .cover-name,
[data-theme='B'] .step-head > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* --- 28.2 Reveal blur-free (đổi tên keyframe, giữ delay/timing gốc) ---- */
.inv[data-theme='B'] .step.is-active .reveal {
  animation-name: sageFadeUp;
}

.inv[data-theme='B'] .step.is-active .reveal--left {
  animation-name: sageFadeLeft;
}

.inv[data-theme='B'] .step.is-active .reveal--right {
  animation-name: sageFadeRight;
}

.inv[data-theme='B'] .step.is-active .reveal--mask {
  animation-name: sageMaskUp;
}

.inv[data-theme='B'] .step.is-active .reveal--scale {
  animation-name: sageFadeScale;
}

.inv[data-theme='B'] .step.is-active .reveal--blur,
.inv[data-theme='B'] .step.is-active .reveal--bottom,
.inv[data-theme='B'] .step.is-active .reveal--up {
  animation-name: sageFadeUp;
}

.inv[data-theme='B'] .step.is-active .reveal-fly,
.inv[data-theme='B'] .step.is-active .reveal-unroll,
.inv[data-theme='B'] .step.is-active .reveal-unroll-gallery {
  animation-name: sageFadeScale;
}

.inv[data-theme='B'] .step.is-active .step-head > :nth-child(1) {
  animation-name: sageFadeDown;
}

.inv[data-theme='B'] .step.is-active .step-head > :nth-child(2) {
  animation-name: sageFadeUp;
}

/* --- 28.3 Trang bìa: tên đối xứng font Alex Brush ----------------------- */
[data-theme='B'] .cover-names--blush-symmetric {
  gap: 0;
  margin: 6px 0 4px;
}

[data-theme='B'] .cover-names--blush-symmetric .cover-amp {
  margin: -4px 0;
  display: inline-block;
}

[data-theme='B'] .cover-name--blush-left,
[data-theme='B'] .cover-name--blush-right {
  font-family: 'Alex Brush', var(--t-font-script, cursive);
  font-size: clamp(28px, 9.6vw, 42px);
  line-height: 1.2;
  color: #3a1e21;
}

.inv[data-theme='B'] .step--cover .cover-name--blush-left .char-fly--left {
  animation-name: sageCharInLeft;
  animation-duration: 1.25s;
  backface-visibility: hidden;
}

.inv[data-theme='B'] .step--cover .cover-name--blush-right .char-fly--right {
  animation-name: sageCharInRight;
  animation-duration: 1.25s;
  backface-visibility: hidden;
}

/* Chữ dẫn dắt bay vào chậm, blur-free */
.inv[data-theme='B'] .step--cover .cover-eyebrow.reveal,
.inv[data-theme='B'] .step--cover .cover-ceremony.reveal,
.inv[data-theme='B'] .step--cover .cover-guest.reveal {
  animation-name: fadeInSlow;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.inv[data-theme='B'] .step--cover .cover-eyebrow.reveal {
  animation-delay: 0ms;
}

.inv[data-theme='B'] .step--cover .cover-ceremony.reveal {
  animation-delay: 250ms;
}

.inv[data-theme='B'] .step--cover .cover-guest.reveal {
  animation-delay: 550ms;
}

/* --- 28.4 Nút "Cuộn xuống": mũi tên nhún liên tục ------------------------ */
[data-theme='B'] .stage-scroll-down-btn {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease,
    background 0.35s ease,
    opacity 0.35s ease;
  will-change: transform;
}

[data-theme='B'] .stage-scroll-down-btn:hover,
[data-theme='B'] .stage-scroll-down-btn:focus-visible {
  transform: scale(1.06);
}

[data-theme='B'] .stage-scroll-down-btn .scroll-arrow-bounce {
  animation-name: arrowBob;
  will-change: transform;
}

/* --- 28.5 Trang 3: khung ngày thu gọn + countdown hồng phấn ------------- */
[data-theme='B'] .date-block--blush {
  max-width: 262px;
  gap: 6px;
  margin: 2px auto 0;
  padding: 2px 6px;
}

[data-theme='B'] .date-block--blush .date-weekday {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

[data-theme='B'] .date-block--blush .date-day {
  font-size: 38px;
}

[data-theme='B'] .date-block--blush .date-my {
  font-size: 9.5px;
}

[data-theme='B'] .date-block--blush .date-time {
  font-size: 13px;
}

[data-theme='B'] .countdown--arched {
  background: rgba(247, 230, 227, 0.65);
  border: 1px solid rgba(232, 180, 184, 0.45);
  box-shadow: 0 4px 16px rgba(74, 38, 42, 0.06);
  padding: 5px 6px;
  margin: 4px 0 6px;
}

[data-theme='B'] .countdown--arched .countdown__box--arch {
  background: rgba(255, 250, 249, 0.72);
  border: 1px solid rgba(232, 180, 184, 0.35);
  min-width: 44px;
  padding: 3px 2px;
}

[data-theme='B'] .countdown--arched .countdown__val {
  font-size: 18px;
  color: #3a1e21;
}

[data-theme='B'] .countdown--arched .countdown__lbl {
  font-size: 8.5px;
}

/* --- 28.6 Trang 5: tiêu đề trồi lên + 2 hàng ảnh khép lại --------------- */
.inv[data-theme='B'] .step--gallery.is-active .step-head > :nth-child(2) {
  animation-name: fadeInSlow;
  animation-duration: 1.2s;
  animation-delay: 120ms;
}

.inv[data-theme='B'] .step--gallery.is-active .album-cell--row-1 {
  animation-name: sageAlbumFromTop;
}

.inv[data-theme='B'] .step--gallery.is-active .album-cell--row-2 {
  animation-name: sageAlbumFromBottom;
  animation-delay: calc(220ms + var(--i, 0) * 62ms);
}

/* --- 28.7 Trang 6: RSVP thu gọn + nền đục mờ chống chìm chữ ------------- */
[data-theme='B'] .step--rsvp .step-inner {
  padding-bottom: 35px;
  gap: 5px;
}

[data-theme='B'] .step--rsvp .form-transparent--rsvp {
  gap: 5px;
  max-width: 310px;
  margin: 0 auto;
}

[data-theme='B'] .step--rsvp .field > label,
[data-theme='B'] .step--rsvp .field > legend {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  color: #5a383c;
  font-weight: 600;
}

[data-theme='B'] .step--rsvp .form-transparent input,
[data-theme='B'] .step--rsvp .form-transparent select,
[data-theme='B'] .step--rsvp .form-transparent textarea {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(164, 101, 106, 0.42);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(74, 38, 42, 0.05);
  color: #3a1e21;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 13px;
  min-height: 30px;
  padding: 4px 10px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-theme='B'] .step--rsvp .form-transparent input:focus,
[data-theme='B'] .step--rsvp .form-transparent select:focus,
[data-theme='B'] .step--rsvp .form-transparent textarea:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: #8a4a45;
  box-shadow: 0 0 0 2px rgba(232, 180, 184, 0.4), 0 3px 10px rgba(74, 38, 42, 0.08);
  outline: none;
}

[data-theme='B'] .step--rsvp .form-transparent input::placeholder,
[data-theme='B'] .step--rsvp .form-transparent textarea::placeholder {
  color: rgba(90, 56, 60, 0.55);
  font-style: italic;
}

[data-theme='B'] .step--rsvp .attend-options {
  gap: 6px;
}

[data-theme='B'] .step--rsvp .attend-option {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(164, 101, 106, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
}

[data-theme='B'] .step--rsvp .attend-option span {
  font-size: 12px;
  color: #3a1e21;
}

[data-theme='B'] .step--rsvp .btn--cta {
  min-height: 36px;
  font-size: 13px;
  padding: 6px 18px;
  margin-top: 4px;
  background: #3a1e21;
  border-color: #3a1e21;
  color: #fff;
}

[data-theme='B'] .step--rsvp .btn--cta:hover,
[data-theme='B'] .step--rsvp .btn--cta:focus-visible {
  background: #4c2a2e;
  border-color: #4c2a2e;
  color: #fff;
}

/* --- 28.8 Trang 7: Sổ lưu bút thu gọn + ticker 1 dòng ------------------- */
[data-theme='B'] .step--wishes .step-inner {
  padding-bottom: 35px;
  gap: 5px;
}

[data-theme='B'] .step--wishes .form-transparent--wishes {
  gap: 5px;
  max-width: 310px;
  margin: 0 auto;
}

/* Nhãn tách khỏi ô nhập một nhịp để không dính vào viền trắng của input */
[data-theme='B'] .step--wishes .form-transparent--wishes .field {
  gap: 4px;
}

[data-theme='B'] .step--wishes .field > label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #5a383c;
  font-weight: 600;
}

[data-theme='B'] .step--wishes .form-transparent--wishes input,
[data-theme='B'] .step--wishes .form-transparent--wishes textarea {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(164, 101, 106, 0.42);
  border-radius: 8px;
  color: #3a1e21;
  padding: 4px 10px;
  font-size: 12.5px;
  min-height: 30px;
}

[data-theme='B'] .step--wishes .form-transparent--wishes textarea {
  min-height: 48px;
}

[data-theme='B'] .step--wishes .form-transparent--wishes .btn {
  min-height: 32px;
  font-size: 12px;
  padding: 4px 14px;
  background: #3a1e21;
  border-color: #3a1e21;
  color: #fff;
}

[data-theme='B'] .blush-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 32px;
  margin: 6px 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(232, 180, 184, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: left;
}

[data-theme='B'] .blush-ticker__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: #fff;
  background: #5a383c;
}

[data-theme='B'] .blush-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='B'] .blush-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: blushTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='B'] .blush-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='B'] .blush-ticker:hover .blush-ticker__content,
[data-theme='B'] .blush-ticker:focus-within .blush-ticker__content {
  animation-play-state: paused;
}

[data-theme='B'] .blush-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 11.5px;
  color: #3a1e21;
}

[data-theme='B'] .blush-ticker__author {
  font-weight: 600;
  color: #3a1e21;
}

[data-theme='B'] .blush-ticker__msg {
  color: #5a383c;
  font-style: italic;
}

[data-theme='B'] .blush-ticker__dot {
  margin-left: 6px;
}

[data-theme='B'] .wishes-photo,
[data-theme='B'] .wishes-footer-photo {
  width: 100%;
  max-width: 320px;
  height: 165px;
  margin: 6px auto 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(232, 180, 184, 0.45);
  box-shadow: 0 8px 24px rgba(74, 38, 42, 0.12);
}

[data-theme='B'] .wishes-photo img,
[data-theme='B'] .wishes-footer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 28.9 Màn hình thấp: thu thêm khung ngày & ảnh kỷ niệm -------------- */
@media (max-height: 700px) {
  [data-theme='B'] .date-block--blush .date-day {
    font-size: 32px;
  }

  [data-theme='B'] .wishes-photo,
  [data-theme='B'] .wishes-footer-photo {
    height: 140px;
  }
}

@media (max-height: 600px) {
  [data-theme='B'] .date-block--blush .date-day {
    font-size: 28px;
  }

  [data-theme='B'] .wishes-photo,
  [data-theme='B'] .wishes-footer-photo {
    height: 118px;
    margin-top: 4px;
  }

  [data-theme='B'] .blush-ticker {
    height: 30px;
    margin: 4px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Ticker dừng chạy nhưng vẫn đọc được: cho phép vuốt ngang để xem hết. */
  [data-theme='B'] .blush-ticker__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-theme='B'] .blush-ticker__track::-webkit-scrollbar {
    display: none;
  }

  [data-theme='B'] .blush-ticker__content {
    animation: none;
  }
}

/* ==========================================================================
   29. THEME C — ORCHIDÉE: HOÀN THIỆN TRẢI NGHIỆM (2026-11)
   --------------------------------------------------------------------------
   • Nút mở thiệp hạ xuống 83% (85% ở màn thấp).
   • Trang 3: khung vỏ hàu date-plaque.webp ôm ngày giờ ở giữa trang.
   • Trang 4: nút "Chỉ đường" dựng lại sạch (không còn xung đột đế nút).
   • Trang 5: bỏ khung memory-frame, 2 hàng ảnh khép từ trên/dưới.
   • Trang 6/7: form thu gọn + nền đục mờ, sổ lưu bút dùng ticker 1 dòng.
   • Trang 1: tên cô dâu chú rể đối xứng (Pinyon Script).
   ========================================================================== */

/* --- 29.0 Chống giật cho chữ xuất hiện của Theme C ---------------------- */
[data-theme='C'] .reveal,
[data-theme='C'] .cover-eyebrow,
[data-theme='C'] .cover-ceremony,
[data-theme='C'] .cover-guest,
[data-theme='C'] .cover-name,
[data-theme='C'] .step-head > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* --- 29.1 Nút mở thiệp hạ thấp ------------------------------------------ */
.intro--theme-C .intro__luxury-btn {
  top: 83%;
  bottom: auto;
  margin-top: 0;
}

@media (max-height: 680px) {
  .intro--theme-C .intro__luxury-btn {
    top: 85%;
  }
}

/* --- 29.2 Trang 1: tên đối xứng (Pinyon Script) ------------------------- */
[data-theme='C'] .cover-names--orchid-symmetric {
  gap: 0;
  margin: 6px 0 4px;
}

[data-theme='C'] .cover-names--orchid-symmetric .cover-amp {
  margin: -4px 0;
  display: inline-block;
}

[data-theme='C'] .cover-name--orchid-left,
[data-theme='C'] .cover-name--orchid-right {
  font-family: 'Pinyon Script', var(--t-font-script, cursive);
  font-size: clamp(26px, 9vw, 40px);
  line-height: 1.2;
  color: #33241f;
}

.inv[data-theme='C'] .step--cover .cover-name--orchid-left .char-fly--left {
  animation-name: sageCharInLeft;
  animation-duration: 1.25s;
  backface-visibility: hidden;
}

.inv[data-theme='C'] .step--cover .cover-name--orchid-right .char-fly--right {
  animation-name: sageCharInRight;
  animation-duration: 1.25s;
  backface-visibility: hidden;
}

/* --- 29.3 Trang 3: khung vỏ hàu (date-plaque.webp) ---------------------- */
[data-theme='C'] .orchid-date-shell {
  position: relative;
  width: min(230px, 64%);
  aspect-ratio: 827 / 1122;
  margin: 4px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme='C'] .orchid-date-shell-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 1;
}

[data-theme='C'] .orchid-date-shell-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 20px;
  box-sizing: border-box;
  transform: translateY(-4%);
  text-align: center;
}

[data-theme='C'] .orchid-date-main {
  margin-top: 6px;
}

[data-theme='C'] .orchid-date-day {
  display: block;
  font-family: var(--t-font-display, 'Playfair Display', Georgia, serif);
  font-size: 38px;
  line-height: 1;
  font-weight: 700;
  color: var(--t-ink, #33241f);
}

[data-theme='C'] .orchid-date-my {
  display: block;
  margin-top: 3px;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-ink-soft, #574139);
}

[data-theme='C'] .orchid-date-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 14px;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-gold, #7a5a27);
  white-space: nowrap;
}

[data-theme='C'] .orchid-date-dot {
  opacity: 0.7;
}

/* Countdown tông kem – nâu */
[data-theme='C'] .countdown--arched {
  background: rgba(241, 233, 223, 0.65);
  border: 1px solid rgba(158, 123, 73, 0.35);
  padding: 4px 6px;
  margin: 4px 0 6px;
}

[data-theme='C'] .countdown--arched .countdown__box--arch {
  background: rgba(255, 252, 247, 0.7);
  border: 1px solid rgba(158, 123, 73, 0.25);
  min-width: 44px;
  padding: 3px 2px;
}

[data-theme='C'] .countdown--arched .countdown__val {
  font-size: 18px;
  color: #33241f;
}

[data-theme='C'] .countdown--arched .countdown__lbl {
  font-size: 8.5px;
}

[data-theme='C'] .countdown__crown {
  display: none;
}

/* --- 29.4 Trang 4: nút "Chỉ đường" --------------------------------------- */
[data-theme='C'] .lacy-map-actions .orchid-directions-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  background: #33241f;
  color: #fffdf9;
  border: 1px solid #7a5a27;
  box-shadow: 0 6px 18px rgba(51, 36, 31, 0.25);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

[data-theme='C'] .lacy-map-actions .orchid-directions-btn:hover,
[data-theme='C'] .lacy-map-actions .orchid-directions-btn:focus-visible {
  background: #4a352d;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(51, 36, 31, 0.35);
}

[data-theme='C'] .lacy-map-actions .orchid-directions-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: #e2c488;
}

[data-theme='C'] .lacy-map-actions .orchid-directions-btn span {
  white-space: nowrap;
}

/* --- 29.5 Trang 5: album 2 hàng tự nhiên -------------------------------- */
.inv[data-theme='C'] .step--gallery.is-active .step-head > :nth-child(2) {
  animation-name: fadeInSlow;
  animation-duration: 1.2s;
  animation-delay: 120ms;
}

.inv[data-theme='C'] .step--gallery.is-active .album-cell--row-1 {
  animation-name: sageAlbumFromTop;
}

.inv[data-theme='C'] .step--gallery.is-active .album-cell--row-2 {
  animation-name: sageAlbumFromBottom;
  animation-delay: calc(220ms + var(--i, 0) * 62ms);
}

/* --- 29.6 Trang 6: RSVP thu gọn + nền đục mờ ---------------------------- */
[data-theme='C'] .step--rsvp .step-inner {
  padding-bottom: 35px;
  gap: 5px;
}

[data-theme='C'] .step--rsvp .form-transparent--rsvp {
  gap: 5px;
  max-width: 310px;
  margin: 0 auto;
}

[data-theme='C'] .step--rsvp .field > label,
[data-theme='C'] .step--rsvp .field > legend {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  color: #574139;
  font-weight: 600;
}

[data-theme='C'] .step--rsvp .form-transparent input,
[data-theme='C'] .step--rsvp .form-transparent select,
[data-theme='C'] .step--rsvp .form-transparent textarea {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(158, 123, 73, 0.42);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(51, 36, 31, 0.05);
  color: #33241f;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 13px;
  min-height: 30px;
  padding: 4px 10px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-theme='C'] .step--rsvp .form-transparent input:focus,
[data-theme='C'] .step--rsvp .form-transparent select:focus,
[data-theme='C'] .step--rsvp .form-transparent textarea:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: #7a5a27;
  box-shadow: 0 0 0 2px rgba(201, 167, 184, 0.4), 0 3px 10px rgba(51, 36, 31, 0.08);
  outline: none;
}

[data-theme='C'] .step--rsvp .form-transparent input::placeholder,
[data-theme='C'] .step--rsvp .form-transparent textarea::placeholder {
  color: rgba(87, 65, 57, 0.55);
  font-style: italic;
}

[data-theme='C'] .step--rsvp .attend-options {
  gap: 6px;
}

[data-theme='C'] .step--rsvp .attend-option {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(158, 123, 73, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
}

[data-theme='C'] .step--rsvp .attend-option span {
  font-size: 12px;
  color: #33241f;
}

[data-theme='C'] .step--rsvp .btn--cta {
  min-height: 36px;
  font-size: 13px;
  padding: 6px 18px;
  margin-top: 4px;
  background: #33241f;
  border-color: #7a5a27;
  color: #fff;
}

[data-theme='C'] .step--rsvp .btn--cta:hover,
[data-theme='C'] .step--rsvp .btn--cta:focus-visible {
  background: #4a352d;
  border-color: #8a6a32;
  color: #fff;
}

/* --- 29.7 Trang 7: Sổ lưu bút + ticker 1 dòng --------------------------- */
[data-theme='C'] .step--wishes .step-inner {
  padding-bottom: 35px;
  gap: 5px;
}

[data-theme='C'] .step--wishes .form-transparent--wishes {
  gap: 5px;
  max-width: 310px;
  margin: 0 auto;
}

[data-theme='C'] .step--wishes .form-transparent--wishes .field {
  gap: 4px;
}

[data-theme='C'] .step--wishes .field > label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #574139;
  font-weight: 600;
}

[data-theme='C'] .step--wishes .form-transparent--wishes input,
[data-theme='C'] .step--wishes .form-transparent--wishes textarea {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(158, 123, 73, 0.42);
  border-radius: 8px;
  color: #33241f;
  padding: 4px 10px;
  font-size: 12.5px;
  min-height: 30px;
}

[data-theme='C'] .step--wishes .form-transparent--wishes textarea {
  min-height: 48px;
}

[data-theme='C'] .step--wishes .form-transparent--wishes .btn {
  min-height: 32px;
  font-size: 12px;
  padding: 4px 14px;
  background: #33241f;
  border-color: #7a5a27;
  color: #fff;
}

[data-theme='C'] .orchid-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 32px;
  margin: 6px 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(158, 123, 73, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: left;
}

[data-theme='C'] .orchid-ticker__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: #fff;
  background: #574139;
}

[data-theme='C'] .orchid-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='C'] .orchid-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: orchidTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='C'] .orchid-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='C'] .orchid-ticker:hover .orchid-ticker__content,
[data-theme='C'] .orchid-ticker:focus-within .orchid-ticker__content {
  animation-play-state: paused;
}

[data-theme='C'] .orchid-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-family: var(--t-font-body, 'Be Vietnam Pro', sans-serif);
  font-size: 11.5px;
  color: #33241f;
}

[data-theme='C'] .orchid-ticker__author {
  font-weight: 600;
  color: #33241f;
}

[data-theme='C'] .orchid-ticker__msg {
  color: #574139;
  font-style: italic;
}

[data-theme='C'] .orchid-ticker__dot {
  margin-left: 6px;
}

[data-theme='C'] .wishes-photo,
[data-theme='C'] .wishes-footer-photo {
  width: 100%;
  max-width: 320px;
  height: 165px;
  margin: 6px auto 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(158, 123, 73, 0.45);
  box-shadow: 0 8px 24px rgba(51, 36, 31, 0.12);
}

[data-theme='C'] .wishes-photo img,
[data-theme='C'] .wishes-footer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 29.8 Màn hình thấp -------------------------------------------------- */
@media (max-height: 700px) {
  [data-theme='C'] .orchid-date-shell {
    width: min(196px, 56%);
  }

  [data-theme='C'] .orchid-date-day {
    font-size: 32px;
  }

  [data-theme='C'] .wishes-photo,
  [data-theme='C'] .wishes-footer-photo {
    height: 140px;
  }
}

@media (max-height: 600px) {
  [data-theme='C'] .orchid-date-shell {
    width: min(170px, 50%);
    margin: 2px auto 4px;
  }

  [data-theme='C'] .orchid-date-day {
    font-size: 28px;
  }

  [data-theme='C'] .orchid-date-sub {
    margin-top: 8px;
    font-size: 9.5px;
  }

  [data-theme='C'] .wishes-photo,
  [data-theme='C'] .wishes-footer-photo {
    height: 118px;
    margin-top: 4px;
  }

  [data-theme='C'] .orchid-ticker {
    height: 30px;
    margin: 4px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Ticker dừng chạy nhưng vẫn đọc được: cho phép vuốt ngang để xem hết. */
  [data-theme='C'] .orchid-ticker__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-theme='C'] .orchid-ticker__track::-webkit-scrollbar {
    display: none;
  }

  [data-theme='C'] .orchid-ticker__content {
    animation: none;
  }
}

/* ==========================================================================
   30. THEME D — CANDELA: DẠ TIỆC ÁNH NẾN LUNG LINH (2026-11)
   --------------------------------------------------------------------------
   • Tỷ lệ PC 9 : 19.5, nút mở thiệp hạ xuống 81% nhún nhảy.
   • Step-shift -33%, text nằm lọt lòng trong frame-names.webp.
   • Nến & Lửa nằm ở z-index: 15 đè lên trên khung tranh.
   • 3 ngọn lửa nghiêng ngả mạnh mẽ, bập bùng sống động theo gió dạ tiệc.
   • Step 2: Co gọn văn bản lời mời, tránh tràn ngang.
   • Step 3: Khung ngày tháng lọt lòng, ẩn countdown, số ngày to, có ngày âm.
   • Step 4: Sửa lỗi double khung map, bố cục 2 phần sạch đẹp không nền hộp.
   • Step 6 & 7: Form không có nền bao, từng ô input đục mờ frosted glass.
   • Step 7: Lời chúc Marquee Ticker 1 dòng (.candela-ticker) + ảnh 165px.
   ========================================================================== */

/* --- 30.0 Chống giật (anti-jank) và GPU Compositing ---------------------- */
[data-theme='D'] .reveal,
[data-theme='D'] .cover-eyebrow,
[data-theme='D'] .cover-ceremony,
[data-theme='D'] .cover-guest,
[data-theme='D'] .cover-name,
[data-theme='D'] .step-head > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* Nến/lửa giữ nguyên transform gốc (grow/lắc) — chỉ tách lớp compositing. */
[data-theme='D'] .candle-art,
[data-theme='D'] .candle-flame,
[data-theme='D'] .candle-flowers {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Keyframes blur-free: filter blur() bị Chromium xả bộ đệm ở frame cuối → giật. */
.inv[data-theme='D'] .step.is-active .reveal--blur,
.inv[data-theme='D'] .step.is-active .reveal--bottom,
.inv[data-theme='D'] .step.is-active .reveal--up {
  animation-name: sageFadeUp;
}

.inv[data-theme='D'] .step.is-active .reveal--mask {
  animation-name: sageMaskUp;
}

.inv[data-theme='D'] .step.is-active .reveal--scale {
  animation-name: sageFadeScale;
}

.inv[data-theme='D'] .step.is-active .reveal--left {
  animation-name: sageFadeLeft;
}

.inv[data-theme='D'] .step.is-active .reveal--right {
  animation-name: sageFadeRight;
}

/* --- 30.1 Tỷ lệ PC 9 : 16 & Nút mở thiệp ------------------------------ */
@media (min-width: 768px) {
  .inv[data-theme='D'],
  .intro--theme-D {
    width: min(468px, calc((100dvh - 24px) * 9 / 16));
    max-width: 468px;
    height: min(832px, 100dvh - 24px);
    aspect-ratio: 9 / 16;
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 25px 65px rgba(58, 40, 18, 0.45);
    overflow: hidden;
  }
}

.intro--theme-D .intro__luxury-btn {
  top: 81%;
  bottom: auto;
  margin-top: 0;
  gap: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

.intro--theme-D .intro__candela-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  animation: openInviteBounce 2.2s ease-in-out infinite;
  will-change: transform;
}

.intro--theme-D .intro__candela-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid rgba(217, 177, 113, 0.9);
  background: rgba(58, 40, 18, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 4px 16px rgba(58, 40, 18, 0.35);
  color: #fbf5ea;
}

.intro--theme-D .intro__candela-arrow {
  display: block;
  color: #fbf5ea;
}

.intro--theme-D .intro__candela-text {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.2;
  color: rgba(251, 245, 234, 0.92);
  text-transform: uppercase;
  text-shadow: 0 1.5px 4px rgba(58, 40, 18, 0.6);
}

/* --- 30.2 Đẩy Nến & Lửa lên trên Khung Tranh (z-index: 15) --------------- */
[data-theme='D'] .stage-decor {
  z-index: 15 !important;
  pointer-events: none !important;
}

/* --- 30.3 Ngọn lửa nghiêng ngả mạnh mẽ, cháy rực rỡ --------------------- */
[data-theme='D'] .inv[data-state='OPENED'] .flame-left {
  animation:
    v-flame-light 0.8s var(--ease-out) 1.2s forwards,
    candelaFlameLeft 2.6s ease-in-out 2s infinite !important;
}

[data-theme='D'] .inv[data-state='OPENED'] .flame-center {
  animation:
    v-flame-light 0.8s var(--ease-out) 1.35s forwards,
    candelaFlameCenter 2.9s ease-in-out 2.15s infinite !important;
}

[data-theme='D'] .inv[data-state='OPENED'] .flame-right {
  animation:
    v-flame-light 0.8s var(--ease-out) 1.5s forwards,
    candelaFlameRight 2.4s ease-in-out 2.3s infinite !important;
}

/* --- 30.4 Trang 1: Bìa — Chữ Lọt Khung, Kính Mời Ngoài Khung ------------- */
/* frame-names.webp: vùng giấy ≈ x 30–70%, y 22–51% (ảnh cover theo chiều cao). */
[data-theme='D'] .step--cover .step-inner {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  transform: none !important;
}

[data-theme='D'] .candela-cover-slot {
  position: absolute;
  top: 21.8%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(196px, 52%);
  height: 29.3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

[data-theme='D'] .cover-eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.32em;
}

[data-theme='D'] .cover-ceremony {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.1em;
}

[data-theme='D'] .cover-names--candela-symmetric {
  gap: 0;
  margin: 4px 0 2px;
}

[data-theme='D'] .cover-names--candela-symmetric .cover-amp {
  margin: -2px 0;
  display: inline-block;
  color: #d9b171;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(18px, 5.6vw, 24px);
}

[data-theme='D'] .cover-name--candela-left,
[data-theme='D'] .cover-name--candela-right {
  font-family: 'Great Vibes', 'Pinyon Script', cursive;
  font-size: clamp(21px, 6.8vw, 28px);
  line-height: 1.18;
  color: #3a2812;
}

/* Tên trải đối xứng, keyframes không dùng blur (chống snap chữ). */
.inv[data-theme='D'] .step--cover .cover-name--candela-left .char-fly--left {
  animation-name: fadeSpreadLeft;
  animation-duration: 1.1s;
  filter: none;
  backface-visibility: hidden;
}

.inv[data-theme='D'] .step--cover .cover-name--candela-right .char-fly--right {
  animation-name: fadeSpreadRight;
  animation-duration: 1.1s;
  filter: none;
  backface-visibility: hidden;
}

/* Cụm "Trân trọng kính mời" đặt NGOÀI khung, ngay dưới họa tiết. */
[data-theme='D'] .cover-guest {
  position: absolute;
  top: 62%;
  left: 6%;
  right: 6%;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme='D'] .cover-guest__label {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #5b432a;
}

[data-theme='D'] .cover-guest__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: #3a2812;
}

/* --- 30.5 Trang 2: Lời Mời Co Gọn Lọt Khung ----------------------------- */
/* frame-message.webp: vùng giấy ≈ x 22–83%, y 14–69%. */
[data-theme='D'] .step--message .step-inner {
  position: absolute;
  top: 14.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(262px, 70%);
  height: 54.3%;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  transform: none !important;
  justify-content: center;
  gap: 6px;
}

/* Áp dụng cho màn hình điện thoại (thường là dưới 767px hoặc 480px) blackphone */
@media (max-width: 767px) {
  [data-theme='D'] .step--message .step-inner {
    width: min(210px, 70%);
  }
  [data-theme='D'] .candela-venue-info {
    width: min(160px, 74%) !important;
  }
  [data-theme='D'] .candela-map-window {
        position: absolute;
        top: 17.4% !important;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: min(190px, 66%) !important;
        height: 18.2% !important;
        aspect-ratio: auto;
        max-height: none;
        border-radius: 22px !important;
        overflow: hidden;
        border: 1px solid rgba(122, 84, 32, 0.35);
        box-shadow: 0 6px 20px rgba(58, 40, 18, 0.18);
  }
  .form-transparent {
    width: 85% !important;
  }
}

[data-theme='D'] .step--message .step-title {
  font-size: 16px;
}

[data-theme='D'] .step--message .msg-lead {
  font-size: 13.5px;
  line-height: 1.42;
  margin-bottom: 4px;
  word-break: break-word;
}

[data-theme='D'] .step--message .msg-addr {
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

[data-theme='D'] .step--message .families {
  margin: 6px 0;
  gap: 10px;
}

[data-theme='D'] .step--message .family__label {
  font-size: 9px;
  letter-spacing: 0.14em;
}

[data-theme='D'] .step--message .family__names {
  font-size: 12px;
  line-height: 1.3;
}

/* --- 30.6 Trang 3: Khung Ngày Tháng Lọt Lòng & Không Countdown ---------- */
/* frame-date.webp: ô giấy ≈ x 33–67%, y 18–49%. */
[data-theme='D'] .step--date .step-inner {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  transform: none !important;
}

[data-theme='D'] .candela-date-wrap {
  position: absolute;
  top: 17.9%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(162px, 42%);
  height: 31.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

[data-theme='D'] .candela-date-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #5b432a;
}

[data-theme='D'] .candela-date-dot {
  margin: 0 4px;
  color: #d9b171;
}

[data-theme='D'] .candela-date-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2px 0 4px;
}

[data-theme='D'] .candela-date-day {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(42px, 11.5vw, 50px);
  font-weight: 700;
  line-height: 1;
  color: #3a2812;
  letter-spacing: -1px;
}

[data-theme='D'] .candela-date-my {
  margin-top: 2px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #7a5420;
  white-space: nowrap;
}

[data-theme='D'] .candela-date-lunar {
  margin: 2px 0 0;
  padding: 0;
  font-size: 11.5px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0;
  color: #5b432a;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-theme='D'] .candela-date-lunar em {
  display: block;
}

/* Nút "Thêm vào lịch" nằm NGOÀI khung, ngay dưới họa tiết. */
[data-theme='D'] .candela-date-actions {
  position: absolute;
  top: 62.5%;
  left: 0;
  right: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

[data-theme='D'] .candela-date-actions .btn {
  height: 38px;
  padding: 0 16px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* --- 30.7 Trang 4: Bản Đồ 2 Phần, Không Double Khung -------------------- */
/* frame-map.webp: cửa sổ map ≈ x 24–77%, y 11.5–36.7%; biển địa chỉ y 36–55%. */
[data-theme='D'] .step--map .step-inner {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  transform: none !important;
}

[data-theme='D'] .candela-map-container {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
}

[data-theme='D'] .candela-map-window {
  position: absolute;
  top: 11.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(252px, 66%);
  height: 25.2%;
  aspect-ratio: auto;
  max-height: none;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(122, 84, 32, 0.35);
  box-shadow: 0 6px 20px rgba(58, 40, 18, 0.18);
}

[data-theme='D'] .candela-map-well,
[data-theme='D'] .candela-map-iframe,
[data-theme='D'] .candela-map-img {
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

/* Ghim chibi đặt đúng TÂM cửa sổ map (dùng margin để không phá animation). */
[data-theme='D'] .candela-map-window .map-pin--chibi {
  top: 50%;
  left: 50%;
  right: auto;
  width: 44px;
  height: auto;
  margin: -22px 0 0 -22px;
  z-index: 3;
  transform: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  animation: pinBounce 2.4s ease-in-out infinite !important;
}

[data-theme='D'] .candela-venue-info {
  position: absolute;
  top: 36.2%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(280px, 74%);
  height: 19.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

[data-theme='D'] .candela-venue-name {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #3a2812;
}

[data-theme='D'] .candela-venue-addr {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: #5b432a;
}

[data-theme='D'] .candela-venue-facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #7a5420;
}

[data-theme='D'] .candela-venue-dot {
  display: none;
}

/* Hai nút nằm NGOÀI khung, ngay dưới họa tiết. */
[data-theme='D'] .candela-map-actions {
  position: absolute;
  top: 63%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(300px, 84%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

[data-theme='D'] .candela-map-actions .btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  white-space: nowrap;
}

[data-theme='D'] .candela-directions-btn {
  background: #3a2812 !important;
  color: #fbf5ea !important;
  border: 1px solid #7a5420 !important;
}

[data-theme='D'] .candela-map-open-btn {
  background: rgba(255, 253, 247, 0.8) !important;
  border: 1px solid rgba(122, 84, 32, 0.4) !important;
  color: #3a2812 !important;
}

/* --- 30.7b Trang 5: Album ảnh hạ thấp lại giữa trang -------------------- */
[data-theme='D'] .step--gallery .step-inner {
  transform: translateY(-6%) !important;
}

/* --- 30.8 Trang 6: Form RSVP Frosted Glass Không Nền Bao ---------------- */
[data-theme='D'] .form-transparent--rsvp {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 5px;
}

/* Giấy frame-menu.webp (x 16–84%) canh giữa ⇒ bỏ step-shift, co bề ngang lại. */
[data-theme='D'] .step--rsvp .step-inner {
  max-width: min(290px, 74%);
  padding-bottom: 34px !important;
  transform: none !important;
  gap: 5px;
}

[data-theme='D'] .step--wishes .step-inner {
  max-width: min(290px, 74%);
  transform: translateY(0.8%) !important;
  gap: 4px;
}

/* Thu gọn chiều dọc để cả đầu trang, form, ticker và ảnh nằm trong tờ giấy. */
[data-theme='D'] .step--wishes .step-title {
  font-size: 16px;
}

[data-theme='D'] .step--wishes .step-eyebrow {
  font-size: 9px;
}

[data-theme='D'] .step--wishes .step-rule {
  margin: 2px auto;
}

[data-theme='D'] .step--wishes .step-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

[data-theme='D'] .step--wishes .form-status {
  min-height: 10px;
  margin: 2px 0 0;
}

[data-theme='D'] .step--rsvp .form-transparent .field > label,
[data-theme='D'] .step--rsvp .form-transparent .field > legend,
[data-theme='D'] .step--wishes .form-transparent .field > label {
  font-size: 9px;
  letter-spacing: 0.12em;
}

[data-theme='D'] .step--rsvp .attend-option {
  min-height: 34px;
  padding: 0 8px;
  font-size: 12.5px;
}

[data-theme='D'] .form-transparent .field input[type='text'],
[data-theme='D'] .form-transparent .field input[type='tel'],
[data-theme='D'] .form-transparent .field select,
[data-theme='D'] .form-transparent .field textarea {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(122, 84, 32, 0.35) !important;
  background: rgba(255, 253, 247, 0.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #3a2812 !important;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px !important;
}

[data-theme='D'] .form-transparent .field textarea {
  height: auto !important;
  padding: 6px 8px !important;
}

[data-theme='D'] .form-transparent .field input::placeholder,
[data-theme='D'] .form-transparent .field textarea::placeholder {
  color: rgba(91, 67, 42, 0.65) !important;
}

[data-theme='D'] .form-transparent .field--choice {
  background: transparent !important;
  border: none !important;
}

[data-theme='D'] .attend-option {
  background: rgba(255, 253, 247, 0.75) !important;
  border: 1px solid rgba(122, 84, 32, 0.3) !important;
  border-radius: 6px;
  color: #3a2812;
}

/* --- 30.9 Trang 7: Sổ Lưu Bút Frosted Glass & Marquee Ticker 1 Dòng ----- */
[data-theme='D'] .form-transparent--wishes {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 5px;
}

/* Dòng dẫn nhập cũng bỏ nền hộp để đồng bộ tinh thần "unboxed" của Candela. */
[data-theme='D'] .step--wishes .step-note {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

[data-theme='D'] .form-transparent--wishes textarea {
  height: 44px !important;
  min-height: 44px !important;
}

[data-theme='D'] .candela-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 30px;
  margin: 4px auto;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.85);
  border: 1px solid rgba(122, 84, 32, 0.38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: left;
}

[data-theme='D'] .candela-ticker__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: #fbf5ea;
  background: #5b432a;
}

[data-theme='D'] .candela-ticker__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-theme='D'] .candela-ticker__content {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: candelaTickerLoop 25s linear infinite;
  will-change: transform;
}

[data-theme='D'] .candela-ticker__group {
  display: inline-flex;
  align-items: center;
}

[data-theme='D'] .candela-ticker:hover .candela-ticker__content,
[data-theme='D'] .candela-ticker:focus-within .candela-ticker__content {
  animation-play-state: paused;
}

[data-theme='D'] .candela-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  color: #3a2812;
}

[data-theme='D'] .candela-ticker__author {
  font-weight: 700;
  color: #7a5420;
}

[data-theme='D'] .candela-ticker__msg {
  color: #3a2812;
  font-style: italic;
}

[data-theme='D'] .candela-ticker__dot {
  margin-left: 6px;
  color: #d9b171;
}

[data-theme='D'] .wishes-photo,
[data-theme='D'] .wishes-footer-photo {
  width: 100%;
  max-width: 100%;
  height: 160px;
  margin: 4px auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(217, 177, 113, 0.5);
  box-shadow: 0 6px 20px rgba(58, 40, 18, 0.16);
}

[data-theme='D'] .wishes-photo img,
[data-theme='D'] .wishes-footer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 30.9b Điện thoại thấp (≤800px): thu gọn để vẫn lọt tờ giấy --------- */
@media (max-height: 800px) {
  [data-theme='D'] .step--wishes .step-note {
    display: none;
  }

  [data-theme='D'] .wishes-photo,
  [data-theme='D'] .wishes-footer-photo {
    height: 128px;
  }

  [data-theme='D'] .form-transparent--wishes textarea {
    height: 40px !important;
    min-height: 40px !important;
  }

  [data-theme='D'] .step--rsvp .step-inner {
    padding-bottom: 24px !important;
  }
}

/* --- 30.10 Màn hình thấp: thu gọn để nội dung vẫn lọt lòng khung -------- */
@media (max-height: 720px) {
  [data-theme='D'] .candela-date-day {
    font-size: 44px;
  }

  [data-theme='D'] .candela-map-window {
    max-height: 150px;
  }

  [data-theme='D'] .wishes-photo,
  [data-theme='D'] .wishes-footer-photo {
    height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Ticker dừng chạy nhưng vẫn đọc được: cho phép vuốt ngang để xem hết. */
  [data-theme='D'] .candela-ticker__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-theme='D'] .candela-ticker__track::-webkit-scrollbar {
    display: none;
  }

  [data-theme='D'] .candela-ticker__content,
  .intro--theme-D .intro__candela-body,
  [data-theme='D'] .candela-map-window .map-pin--chibi {
    animation: none !important;
  }
}