/* ==========================================================================
   THIỆP CƯỚI 13 | LUXURY BLUE WATERCOLOR & CANSON PAPER THEME
   Bố cục & Màu sắc khớp 100% Design
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RESET & GLOBAL THEMING
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-serif);
  background-color: #edf2f7;
  background-image: 
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.75) 0%, rgba(195, 215, 238, 0.5) 100%),
    url('../assets/19297e3c-5878-4682-a4b2-2a0b6ac07a7e.png');
  background-size: cover, cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #2c4663;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tắt toàn bộ hoa lá cành trang trí */
.decor-flower,
.ambient-petals-bg,
.petal-particle,
.click-flower-particle,
.watermark-c1-parents-right,
.watermark-c1-groom-left,
.watermark-c1-ceremony-right,
.decor-c1-top-right,
.decor-c1-bottom-leaves,
.decor-c2-top-petal,
.decor-c2-tall-stem,
.watermark-c3-timeline-left,
.watermark-c3-gift-left,
.watermark-c3-gift-right,
.cover-lotus-left,
.cover-lotus-right {
  display: none !important;
}

/* --------------------------------------------------------------------------
   1. COVER SCREEN (MÀN HÌNH BÌA)
   -------------------------------------------------------------------------- */
.cover-screen-wrapper {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #edf2f7;
  background-image: 
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.85) 0%, rgba(195, 215, 238, 0.6) 100%),
    url('../assets/19297e3c-5878-4682-a4b2-2a0b6ac07a7e.png');
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 0;
  visibility: visible;
  opacity: 1;
  overflow: hidden;
  cursor: default;
}

/* Chỉ ẩn hẳn sau khi animation trượt xong (JS gắn .opened) */
.cover-screen-wrapper.opened:not(.opening) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cover-screen-wrapper.opening {
  animation: coverBgSlideUp 2.2s cubic-bezier(0.33, 0.05, 0.2, 1) forwards !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Toàn màn bìa trượt lên quãng dài */
@keyframes coverBgSlideUp {
  0% {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  70% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    transform: translateY(-160vh);
    opacity: 0;
    visibility: hidden;
  }
}

.cover-card-container {
  width: 94vw;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: floatCoverCard 4s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.cover-screen-wrapper.opening .cover-card-container {
  animation: coverCardFlyUp 2.2s cubic-bezier(0.28, 0.02, 0.18, 1) forwards !important;
  pointer-events: none !important;
}

/* Thẻ bìa trượt lên đường dài (nhanh hơn nền một chút để cảm giác “bay”) */
@keyframes coverCardFlyUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  18% {
    transform: translateY(-12vh) scale(0.99);
    opacity: 1;
  }
  100% {
    transform: translateY(-180vh) scale(0.94);
    opacity: 0.35;
  }
}

.cover-card-box {
  position: relative;
  width: 100%;
  min-height: 540px;
  padding: 56px 24px 48px 24px;
  background: #ffffff url('../assets/c4873a25-f8cd-4f99-a184-c818f12a84cf.png') center / cover no-repeat;
  border-radius: 28px;
  border: 1px solid rgba(129, 156, 190, 0.45);
  box-shadow: 
    0 20px 60px rgba(21, 51, 83, 0.16),
    0 4px 18px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.cover-card-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cover-sub-title {
  font-family: var(--font-title);
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  color: #153353;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

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

.cover-names .c-name {
  font-family: var(--font-script);
  font-size: 3.5rem;
  color: #153353;
  line-height: 1.1;
  font-weight: 500;
  white-space: nowrap;
}

.cover-heart-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(129, 156, 190, 0.5);
  background: #f0f5fa;
  color: #6887ad;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
  box-shadow: 0 2px 8px rgba(21, 51, 83, 0.08);
}

.cover-date {
  font-family: var(--font-title);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: #33506d;
  font-weight: 600;
  margin: 10px 0;
}

.cover-invite-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #4a6888;
  margin: 14px 0 6px 0;
}

.cover-guest-prefix {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: #5c7c9e;
  margin-right: 6px;
}

.cover-guest-name {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 600;
  font-style: italic;
  color: #153353;
}

.btn-cover-open {
  background: #6887ad;
  background-image: linear-gradient(135deg, #7495bc 0%, #5a7a9f 100%);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 12px 38px;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  box-shadow: 0 6px 20px rgba(104, 135, 173, 0.4);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: pulseOpenBtn 2.2s infinite;
}

.btn-cover-open:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(104, 135, 173, 0.55);
}

@keyframes pulseOpenBtn {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(104, 135, 173, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 24px rgba(104, 135, 173, 0.6);
    transform: scale(1.025);
  }
}

/* --------------------------------------------------------------------------
   2. FLOATING CONTROLS (LANGUAGE & MUSIC)
   -------------------------------------------------------------------------- */
.floating-lang-c3 {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10001;
}

.lang-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(129, 156, 190, 0.5);
  border-radius: 18px;
  padding: 7px 12px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #153353;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(21, 51, 83, 0.1);
  transition: all 0.2s ease;
}

.lang-trigger-btn:hover {
  background: #ffffff;
  color: #6887ad;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(129, 156, 190, 0.5);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(21, 51, 83, 0.12);
}

.lang-dropdown[hidden] {
  display: none !important;
}

.lang-btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: #153353;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  transition: all 0.2s ease;
  text-align: center;
}

.lang-btn.active {
  background-color: #6887ad;
  color: #ffffff;
}

.floating-music-c3 {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #6887ad;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(104, 135, 173, 0.35);
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.floating-music-c3:hover {
  transform: scale(1.08);
  background-color: #506e92;
}

.floating-music-c3.playing svg {
  animation: spinMusic 4s linear infinite;
}

@keyframes spinMusic {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   3. SINGLE CONTINUOUS CARD CONTAINER
   -------------------------------------------------------------------------- */
.main-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

body:not(.invite-opened) .main-wrapper {
  transform: translateY(12px) scale(0.985);
  opacity: 0.92;
}

body.invite-opened .main-wrapper {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.wedding-single-card {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background-color: #f7fafc;
  border-left: 1px solid rgba(129, 156, 190, 0.35);
  border-right: 1px solid rgba(129, 156, 190, 0.35);
  box-shadow: 0 16px 50px rgba(21, 51, 83, 0.1);
  overflow: hidden;
}

/* ==========================================================================
   SEAMLESS TILE BACKGROUND (THUẬT TOÁN ĐẢO NGƯỢC ẢNH ĐỂ PIXEL TRÙNG NHAU)
   Ghép các tile nền theo kiểu xuôi/ngược để cạnh dưới của tile trước trùng
   tuyệt đối với cạnh trên của tile sau.
   ========================================================================== */
.app-background-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #f7fafc;
}

.app-background-tile {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1086 / 1448;
  background-image: url('../assets/19297e3c-5878-4682-a4b2-2a0b6ac07a7e.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.app-background-tile + .app-background-tile {
  margin-top: -1px;
}

.app-background-tile:nth-child(even) {
  transform: scaleY(-1);
}

.card-section {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 36px 20px 24px 20px;
}

/* --------------------------------------------------------------------------
   4. SECTION 1: HERO & TOP ARCH INTRO (VÙNG VÒM BÊN TRÊN NỀN GIẤY LOANG)
   Design 5 (818122502_1404363201826458_2152846803127991915_n.png)
   -------------------------------------------------------------------------- */
.section-ceremony {
  padding: 0 0 32px 0;
}

.c1-top-intro-block {
  position: relative;
  width: 100%;
  /* Design 5: phần trên rộng hơn, đẩy hero xuống */
  padding: 40px 16px 16px 16px;
  background: transparent;
  text-align: center;
  overflow: visible;
}

/* Vòm loang tròn — design: xanh rõ ở 1/3 trên, halo quanh đỉnh ảnh */
.hero-watercolor-dome {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 128%;
  max-width: none;
  height: 56%;
  min-height: 300px;
  aspect-ratio: auto;
  background-color: #c8dced;
  background-image:
    radial-gradient(ellipse 48% 40% at 8% 6%, rgba(255, 255, 255, 0.35) 0%, transparent 68%),
    radial-gradient(ellipse 48% 40% at 92% 8%, rgba(255, 255, 255, 0.3) 0%, transparent 68%),
    radial-gradient(circle at 50% 28%, rgba(245, 248, 252, 0.28) 0%, rgba(165, 195, 226, 0.55) 55%, rgba(165, 195, 226, 0.15) 100%),
    url('../assets/c4873a25-f8cd-4f99-a184-c818f12a84cf.png');
  background-size: cover, cover, cover, cover;
  background-position: top center;
  background-repeat: no-repeat;
  clip-path: url(#hero-dome-clip);
  -webkit-clip-path: url(#hero-dome-clip);
  border-radius: 0 0 50% 50% / 0 0 50% 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.hero-header-badge {
  position: relative;
  z-index: 2;
  margin-bottom: 28px;
}

.hero-top-title,
.card-heading-title.card-intro-heading.hero-top-title {
  margin: 0 0 4px !important;
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: clamp(0.82rem, 2.6vw, 1rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: #153353 !important;
  line-height: 1.5 !important;
}

/* Đồng bộ title các khối — cùng chuẩn thiệp khác */
.card-heading-title:not(.card-intro-heading),
.reception-lead-c2.card-heading-title {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #153353 !important;
  text-align: center !important;
  margin: 0 0 18px !important;
  line-height: 1.35 !important;
  position: relative;
  z-index: 2;
}

/* 3-Column Names & Double Happiness — 囍 giữa; JS fitHeroNames chỉnh --hero-name-fs */
.card1-script-names,
.hero-names-row {
  --hero-name-fs: clamp(1.35rem, 11vw, 4.25rem);
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  margin: 18px auto 22px auto !important;
  padding: 6px 4px 14px 4px !important;
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.hero-name-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Cột trái → đẩy tên sát 囍 (phải); cột phải → sát 囍 (trái) — kể cả khi swap side */
.hero-names-row > .hero-name-col:first-of-type,
.card1-script-names.hero-names-row > .hero-name-col:first-of-type {
  justify-self: end !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.hero-names-row > .hero-name-col:last-of-type,
.card1-script-names.hero-names-row > .hero-name-col:last-of-type {
  justify-self: start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.hero-center-symbol {
  justify-self: center !important;
  grid-column: 2 !important;
}

.hero-role-lbl,
#hero-groom-role,
#hero-bride-role {
  display: none !important;
}

/* Tên cô dâu/chú rể hero — font script; size từ --hero-name-fs (JS tự thu) */
.hero-party-name,
.hero-names-row .groom-short-name,
.hero-names-row .bride-short-name,
.card1-script-names .groom-short-name,
.card1-script-names .bride-short-name {
  font-family: var(--font-script) !important;
  font-size: var(--hero-name-fs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.05 !important;
  color: #153353 !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: none !important;
}

.hero-center-symbol {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  color: #6a8fb5 !important;
  margin: 0 !important;
  padding: 0 6px !important;
  flex-shrink: 0 !important;
}

.hero-symbol-star {
  display: none !important;
}

.hero-xi {
  font-family: "Noto Serif SC", serif !important;
  font-size: clamp(4.9rem, 15vw, 6.2rem) !important;
  line-height: 1 !important;
  color: #6a8fb5 !important;
  font-weight: 400 !important;
}

#intro-couple-message,
.intro-couple-message {
  display: none !important;
}

/* Guest invite — dưới ảnh vòm, không nền pill, không truncate */
.intro-guest-invite {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 14px auto 2px auto;
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.intro-guest-invite[hidden] {
  display: none !important;
}

.intro-guest-prefix {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-style: italic;
  color: #5c7c9e;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.intro-guest-name {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 600;
  font-style: italic;
  color: #153353;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Arch Photo Frame & Curved SVG Banner */
.hero-arch-container {
  position: relative;
  z-index: 2;
  width: 86%;
  max-width: 460px;
  /* Chừa chỗ cho chữ cong + khoảng thở dưới tên */
  margin: 72px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-arch-outer-ring {
  position: relative;
  width: 100%;
  /* Bỏ viền ngoài thứ 2 — chỉ giữ 1 viền trên .hero-arch-frame */
  border: 0 none;
  outline: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.hero-curved-banner {
  /* Absolute trên đỉnh vòm — không chiếm flow, hết khoảng trống */
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -70%);
  width: 128%;
  height: 72px;
  margin: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.hero-curved-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.hero-curved-text {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.22em;
  fill: #153353;
  text-anchor: middle;
}

.hero-arch-frame {
  position: relative;
  width: 100%;
  /* Design: vòm cao hẹp */
  aspect-ratio: 3 / 5.15;
  border-radius: 999px 999px 2px 2px;
  overflow: hidden;
  /* Nền fallback khớp ảnh — tránh hở trắng khi img chưa fill */
  background: #d8e4f0;
  /* Viền vẽ bằng ::after để ảnh fill sát mép clip, không bị border “ăn” content */
  border: none;
  outline: none;
  box-shadow: none;
  isolation: isolate;
}

/* Viền trắng phủ trên ảnh — ảnh vẫn dính sát đỉnh vòm */
.hero-arch-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, 0.98);
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}

.hero-arch-img {
  /* Absolute fill — height:100% trong khung aspect-ratio thường fail → hở đỉnh */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* Scale nhẹ + origin đỉnh: triệt khe subpixel quanh clip radius */
  transform: scale(1.04);
  transform-origin: center top;
}

/* --------------------------------------------------------------------------
   5. COUPLE SIDES BLOCK (NHÀ TRAI / NHÀ GÁI)
   Design 3 (817117376_28342458798695999_104042133880359264_n.png)
   -------------------------------------------------------------------------- */
.couple-sides-block {
  width: calc(100% - 24px);
  max-width: 600px;
  margin: 44px auto 36px auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
  z-index: 2;
}

.couple-side-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}

.couple-side-row--bride {
  grid-template-columns: 1fr 1fr;
}

.couple-side-photo {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 9 / 15;
  background: #f0f5fa;
  box-shadow: 0 8px 20px rgba(21, 51, 83, 0.08);
  border: 1px solid rgba(129, 156, 190, 0.35);
}

.couple-side-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.couple-side-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px;
}

/* Delicate Heart Line Divider */
.heart-divider-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0;
}

.heart-divider-line .h-line {
  flex: 1;
  max-width: 50px;
  height: 1px;
  background: #819cbe;
  opacity: 0.6;
}

.heart-divider-line .h-icon {
  font-size: 0.85rem;
  color: #6887ad;
}

.couple-side-family {
  font-family: var(--font-title);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #153353;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.groom-parents-name,
.bride-parents-name {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #153353;
  text-transform: uppercase;
  margin: 4px 0 6px 0;
  /* Luôn chỗ 2 dòng — thiếu bố/mẹ vẫn căn địa chỉ cùng hàng tương đối */
  min-height: calc(1.45em * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.couple-side-info:not(.has-parent-names) .groom-parents-name,
.couple-side-info:not(.has-parent-names) .bride-parents-name {
  opacity: 0;
  pointer-events: none;
}

.groom-parents-addr,
.bride-parents-addr {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: #33506d;
  line-height: 1.4;
  margin-bottom: 8px;
  min-height: calc(1.4em * 2);
}

.couple-side-sub-divider {
  width: 40px;
  height: 1px;
  background: #819cbe;
  opacity: 0.5;
  margin: 8px 0;
}

.couple-side-role {
  font-family: var(--font-title);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #153353;
  margin-bottom: 4px;
}

.couple-side-name {
  font-family: var(--font-script);
  font-size: 3.25rem;
  font-weight: 500;
  line-height: 1.05;
  color: #153353;
  display: block;
}

/* --------------------------------------------------------------------------
   6. CEREMONY INFO & WEDDING RINGS (CHIẾC NHẪN ĐÚNG VỊ TRÍ)
   Design 6 (818491065_1077357788337485_7386087007281867353_n.png)
   -------------------------------------------------------------------------- */
.info-white-panel {
  position: relative;
  z-index: 2;
  width: calc(100% - 24px);
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 20px 28px 20px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  border: 1px solid rgba(129, 156, 190, 0.35);
  box-shadow: 0 10px 30px rgba(21, 51, 83, 0.06);
  text-align: center;
  box-sizing: border-box;
}

/* Ceremony & Reception cards float directly on the watercolor texture as in designs */
.info-white-panel--ceremony,
.info-white-panel--reception {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 20px 14px 28px 14px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 10px auto 0 auto !important;
}

.ceremony-time-lead {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.22rem !important;
  letter-spacing: 0.06em !important;
  color: #153353 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
}

.ceremony-time-c1 {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  text-transform: uppercase !important;
}

.ceremony-sparkle-center {
  font-size: 1.15rem !important;
  color: #2b4f7c !important;
  margin: 8px 0 12px 0 !important;
  line-height: 1 !important;
}

.ceremony-dow-text,
.reception-dow-text {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.48rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #153353 !important;
  text-transform: uppercase !important;
  margin: 6px 0 14px 0 !important;
}

/* Date bar with flanking lines matching Design 6 & Design 4 */
.ceremony-date-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 12px auto 14px auto !important;
  max-width: 420px !important;
}

.date-flank-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  /* Chiều cao cố định → line trái/phải cùng tọa độ Y, tránh antialias đậm/nhạt lệch */
  width: 110px !important;
  height: 52px !important;
  flex: 0 0 110px !important;
}

.flank-line {
  width: 88px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  border: 0 !important;
  background-color: #153353 !important;
  background-image: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  flex: 0 0 1px !important;
  box-sizing: border-box !important;
  opacity: 0.85 !important;
}

.flank-text {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #153353 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.28em !important;
  flex: 1 1 auto !important;
}

/* NĂM / THÁNG và số cùng cỡ chữ — cả nhà trai & nhà gái */
.flank-text .month-val,
.flank-text .ceremony-year-lbl,
.flank-text .rb-month,
.flank-text .rb-year,
.flank-text .rb-month-prefix,
.flank-text .rb-year-prefix,
.ceremony-date-bar .month-val,
.ceremony-date-bar .ceremony-year-lbl,
.ceremony-date-bar .rb-month,
.ceremony-date-bar .rb-year,
.info-white-panel--reception .ceremony-year-lbl,
#reception-bride .flank-text .rb-month,
#reception-bride .flank-text .rb-year,
#reception-bride .flank-text .rb-month-prefix,
#reception-bride .flank-text .rb-year-prefix {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ceremony-date-bar .big-day {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 3.6rem !important;
  font-weight: 700 !important;
  line-height: 0.88 !important;
  color: #153353 !important;
  margin: 0 !important;
  padding: 0 4px !important;
  flex-shrink: 0 !important;
}

/* Lịch âm — đồng nhất mọi khối với lễ thành hôn */
.ceremony-lunar-c1,
.reception-lunar-c2,
.lunar-date-text,
#reception-bride .rb-lunar,
#reception-bride .rb-lunar.lunar-date-text {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #25456f !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-align: center !important;
  margin: 12px 0 18px 0 !important;
}

/* VỊ TRÍ CHIẾC NHẪN CƯỚI ĐÚNG NHƯ DESIGN 6 */
.ceremony-rings-wrap {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 16px 0 20px 0 !important;
}

.ceremony-rings-img {
  width: 145px !important;
  max-width: 45vw !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 6px 16px rgba(21, 51, 83, 0.12)) !important;
}

.ceremony-venue-box {
  margin: 12px 0 20px 0 !important;
}

/* Đồng bộ với .rec-at-name / .rec-at-addr (tiệc cưới) */
.ceremony-loc-lbl {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #153353 !important;
  text-transform: none !important;
  margin-bottom: 4px !important;
}

.ceremony-loc-addr {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #25456f !important;
  line-height: 1.5 !important;
  max-width: 340px !important;
  margin: 0 auto !important;
}

/* Pill direction — nền xanh như cũ, chữ thường đồng bộ với nút CTA */
.btn-pill-direction,
.map-direction-btn-c2,
.venue-direction-btn,
#reception-bride .rb-direction.btn-pill-direction {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 10px 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #4d739e 0%, #3b608c 100%) !important;
  color: #ffffff !important;
  font-family: 'Montserrat', var(--font-sans), sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(43, 75, 114, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  filter: none !important;
}

.btn-pill-direction:hover,
.map-direction-btn-c2:hover,
.venue-direction-btn:hover,
#reception-bride .rb-direction.btn-pill-direction:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #5b83b0 0%, #446d9c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(43, 75, 114, 0.34) !important;
  filter: none !important;
}

.btn-pill-direction[hidden],
#reception-bride .rb-direction.btn-pill-direction[hidden] {
  display: none !important;
}

/* Hide compatibility bindings permanently */
.info-white-panel--ceremony .parents-grid-c1,
.info-white-panel--ceremony .announcement-c1,
.info-white-panel--ceremony .couple-names-c1,
.info-white-panel--ceremony .ceremony-details-c1,
#hidden-compat-bindings,
#hidden-compat-bindings * {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7. SECTION 2: RECEPTION, COUNTDOWN & VENUE MAP
   Design 4 (817341446_1574412430380295_2757161300277973176_n.png)
   -------------------------------------------------------------------------- */
.section-reception {
  padding-top: 10px;
  padding-bottom: 24px;
}

.info-white-panel--reception {
  margin-top: 10px;
  padding: 26px 16px 34px 16px !important;
}

.info-white-panel--reception .reception-lead-c2.card-heading-title,
.reception-header-c2 .reception-lead-c2,
.reception-lead-c2.card-heading-title {
  margin: 0 0 18px 0 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.reception-time-lead {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.15rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #25456f !important;
  margin-bottom: 16px !important;
}

.reception-big-time-c2 {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

.info-white-panel--reception .reception-dow-text {
  margin: 16px 0 14px 0 !important;
}

.info-white-panel--reception .ceremony-date-bar {
  margin: 14px auto 18px auto !important;
}

.info-white-panel--reception .reception-lunar-c2,
.info-white-panel--reception .lunar-date-text {
  margin: 16px 0 22px 0 !important;
}

.reception-times-row--visible {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 8px 0 20px 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.reception-times-row--visible .time-col-c2 small {
  display: block;
  font-family: 'Playfair Display', var(--font-title), Georgia, serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #5c7c9e;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.reception-times-row--visible .time-col-c2 strong {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #153353;
}

.calendar-card-c2 {
  background: #ffffff;
  border: 1px solid rgba(129, 156, 190, 0.45);
  border-radius: 18px;
  padding: 16px 20px;
  margin: 0 auto 18px auto;
  max-width: 360px;
  width: 100%;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(21, 51, 83, 0.06);
}

.cal-header-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.cal-title {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #153353;
  letter-spacing: 0.05em;
}

.cal-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: #5c7c9e;
  margin-bottom: 8px;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: #25456f;
}

.cal-days-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
  color: #25456f;
}

.cal-days-grid .empty {
  visibility: hidden;
}

.cal-days-grid .wedding-day {
  background: linear-gradient(135deg, #7495bc 0%, #3b608c 100%);
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(43, 75, 114, 0.35);
}

.reception-venue-summary {
  margin: 22px 0 18px 0 !important;
}

.rec-at-name {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #153353 !important;
  margin-bottom: 10px !important;
}

.rec-at-addr {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #25456f !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.c2-pill-actions,
#reception-cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: calc(100% - 24px) !important;
  max-width: 560px !important;
  margin: 22px auto 28px auto !important;
  box-sizing: border-box !important;
}

#reception-cta-actions[hidden] {
  display: none !important;
}

.btn-outline-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 36px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #3b608c !important;
  background: transparent !important;
  color: #2b4d75 !important;
  font-family: 'Montserrat', var(--font-sans), sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-outline-pill:hover {
  background: rgba(59, 96, 140, 0.08) !important;
  border-color: #23456e !important;
  color: #153353 !important;
}

.btn-pill-calendar,
.btn-pill-rsvp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-family: 'Montserrat', var(--font-sans), sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.btn-pill-calendar[hidden],
.btn-pill-rsvp[hidden] {
  display: none !important;
}

.btn-pill-calendar,
.btn-pill-rsvp {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(129, 156, 190, 0.65) !important;
  color: #3b608c !important;
  box-shadow: 0 4px 12px rgba(21, 51, 83, 0.06) !important;
}

.btn-pill-calendar:hover,
.btn-pill-rsvp:hover {
  background: #f0f5fa !important;
  border-color: #3b608c !important;
  color: #2b4d75 !important;
}

.btn-pill-calendar span,
.btn-pill-rsvp span {
  color: #3b608c !important;
}

/* COUNTDOWN CARD DESIGN 4 */
.countdown-card-design4 {
  width: calc(100% - 24px);
  max-width: 600px;
  margin: 28px auto 24px auto;
  padding: 24px 16px;
  background: rgba(246, 250, 253, 0.55);
  border: 1px solid rgba(185, 204, 222, 0.4);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(21, 51, 83, 0.04);
  text-align: center;
  box-sizing: border-box;
}

.countdown-star {
  font-size: 0.85rem;
  color: #6887ad;
  margin-bottom: 12px;
}

.countdown-grid-design4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5px minmax(0, 1fr) 1.5px minmax(0, 1fr) 1.5px minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  column-gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.cd-box-design4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  /* Không trượt ngang — tránh bị overflow-x cắt mất Ngày/Giây trên mobile */
  transform: none;
}

.countdown-grid-design4 .cd-box-design4.reveal-item:not(.visible) {
  transform: translateY(28px) !important;
}

.countdown-grid-design4 .cd-box-design4.reveal-item.visible {
  opacity: 1 !important;
  transform: none !important;
}

.cd-box-design4 .cd-num {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: clamp(1.55rem, 6.5vw, 2.35rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #153353 !important;
  white-space: nowrap !important;
}

.cd-box-design4 .cd-lbl {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: clamp(0.78rem, 3.2vw, 0.95rem) !important;
  font-weight: 500 !important;
  color: #25456f !important;
  margin-top: 5px !important;
  white-space: nowrap !important;
}

.cd-box-sep {
  width: 1.5px !important;
  min-width: 1.5px !important;
  height: 36px !important;
  background: rgba(129, 156, 190, 0.65) !important;
  opacity: 1 !important;
  visibility: visible !important;
  justify-self: center;
}

@media (max-width: 480px) {
  .countdown-grid-design4 {
    column-gap: 4px;
  }

  .cd-box-sep {
    height: 30px !important;
  }
}

/* VENUE CARD (INFO + MAP - tiệc nhà trai) */
.venue-bottom-c2 {
  width: calc(100% - 24px) !important;
  max-width: 600px !important;
  margin: 20px auto 0 auto !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(165, 186, 209, 0.5) !important;
  box-shadow: 0 10px 30px rgba(21, 51, 83, 0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

.venue-info-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 18px 20px 12px 20px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 19px 19px 0 0 !important;
}

.venue-pin-icon {
  margin-top: 3px !important;
  flex-shrink: 0 !important;
  color: #234975 !important;
}

.venue-text-group {
  text-align: left !important;
  flex: 1 !important;
}

.venue-bottom-name {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #153353 !important;
  margin-bottom: 3px !important;
}

.venue-bottom-addr {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 0.98rem !important;
  color: #33506d !important;
  line-height: 1.45 !important;
}

.venue-map-wrap {
  width: 100% !important;
  padding: 0 16px 18px 16px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 0 0 19px 19px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.map-embed-card2 {
  width: 100%;
  height: 260px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(165, 186, 209, 0.45);
  background: #eef3f8;
  box-shadow: 0 4px 14px rgba(21, 51, 83, 0.06);
}

.map-embed-card2 iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.venue-bottom-c2 .venue-action-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 0 2px 0 !important;
}

.venue-bottom-c2 .venue-direction-btn {
  margin-bottom: 0 !important;
}

/* .venue-direction-btn — style chung đã khai ở .btn-pill-direction */

/* --------------------------------------------------------------------------
   8. SECTION 3: TIMELINE & DRESS CODE
   Design 2 (814574580_1366562012129099_3195993850072010628_n.png)
   -------------------------------------------------------------------------- */
.section-timeline-dresscode {
  padding-top: 20px;
  padding-bottom: 30px;
}

.timeline-block-design2 .card-heading-title,
.dresscode-block-c2 .card-heading-title {
  margin-bottom: 24px;
}

/* Winding Timeline Container (Thiệp 11 & Design 2 Match) */
.timeline-wavy-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 36px auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  isolation: isolate;
}

.timeline-wavy-container .tl-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

.timeline-wavy-container .tl-route path {
  fill: none;
  stroke: #728fa8;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.timeline-wavy-container .timeline-row-c3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 72px;
  padding: 8px 0;
  gap: 0;
  width: 100%;
  z-index: 2;
}

/* Even rows (0, 2, 4) have .tl-row-right: Content on the LEFT, Dot on the RIGHT */
.timeline-wavy-container .timeline-row-c3.tl-row-right {
  justify-content: flex-start !important;
}

.timeline-wavy-container .timeline-row-c3.tl-row-right .tl-copy {
  margin-left: 7%;
  margin-right: 0;
  text-align: center;
}

/* Odd rows (1, 3, 5): Content on the RIGHT, Dot on the LEFT */
.timeline-wavy-container .timeline-row-c3:not(.tl-row-right) {
  justify-content: flex-end !important;
}

.timeline-wavy-container .timeline-row-c3:not(.tl-row-right) .tl-copy {
  margin-right: 7%;
  margin-left: 0;
  text-align: center;
}

.timeline-wavy-container .tl-copy {
  width: 44%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  position: relative;
  z-index: 3;
}

.timeline-wavy-container .tl-time {
  font-family: var(--font-title);
  font-size: 1.28rem;
  font-weight: 700;
  color: #153353;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
}

.timeline-wavy-container .tl-text {
  font-family: var(--font-title);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #153353;
  text-transform: uppercase;
  text-align: center;
}

.timeline-wavy-container .tl-dot {
  position: absolute;
  top: var(--tl-point-y, 50%);
  left: var(--tl-point-x, 76%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #3c5e82;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
  z-index: 2;
}

.timeline-wavy-container .tl-row-right .tl-dot {
  left: var(--tl-point-x, 24%);
}

/* DRESS CODE PALETTE */
.dresscode-block-c2 {
  text-align: center;
  margin-top: 36px;
}

.dresscode-note {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 0.98rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #25456f !important;
  line-height: 1.55 !important;
  max-width: 420px !important;
  margin: 0 auto 18px auto !important;
  padding: 0 12px !important;
}

.dresscode-palette {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}

.dresscode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.color-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 4px 10px rgba(21, 51, 83, 0.08);
}

.color-name,
.dresscode-item .color-name {
  font-family: var(--font-title);
  font-size: 0.95rem !important;
  color: #33506d;
  font-weight: 600;
  white-space: nowrap !important;
  text-align: center;
  line-height: 1.2;
  max-width: none;
}

/* --------------------------------------------------------------------------
   9. SECTION 4: ALBUM ẢNH CƯỚI (GALLERY)
   Design 7 (822380226_1400863618245199_7796525191465792204_n.png)
   -------------------------------------------------------------------------- */
.section-gallery {
  padding-top: 20px;
  padding-bottom: 28px;
}

.gallery-header-block {
  text-align: center;
  margin-bottom: 20px;
}

.gallery-names-lead,
.gallery-heart-ico {
  display: none !important;
}

.gallery-quote-top {
  display: none !important;
}

/* Carousel 3D coverflow */
.gallery-block-c2 {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.gallery-carousel {
  position: relative;
  width: 100%;
  height: 440px;
  perspective: 1000px;
  overflow: hidden;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.carousel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 390px;
  margin-top: -195px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(21, 51, 83, 0.15);
  border: 4px solid #ffffff;
  transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
  cursor: pointer;
  background: #ffffff;
}

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

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(104, 135, 173, 0.85);
  color: #ffffff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.2s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(21, 51, 83, 0.15);
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-btn:hover {
  background: #153353;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a5bad1;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.carousel-dot.active {
  background: #153353;
  transform: scale(1.3);
}

/* Thumbnail row — cố định size, 1 hàng, căn giữa */
.gallery-thumbs-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  height: 56px;
  margin: 22px auto 14px auto;
  padding: 0 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.gallery-thumbs-row:not(:has(.gallery-thumb-item)) {
  display: none;
}

.gallery-thumb-item {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(21, 51, 83, 0.08);
  border: 1.5px solid rgba(129, 156, 190, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.gallery-thumb-item:hover {
  transform: translateY(-2px);
  border-color: #153353;
}

.gallery-thumb-item.active {
  border-color: #153353;
  box-shadow: 0 4px 10px rgba(21, 51, 83, 0.12);
  outline: 2px solid rgba(59, 96, 140, 0.45);
  outline-offset: 1px;
  transform: translateY(-2px);
}

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

@media (min-width: 768px) {
  .gallery-thumbs-row {
    height: 64px;
  }

  .gallery-thumb-item {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
}

.gallery-bottom-quote {
  text-align: center;
  margin-top: 24px;
}

.gallery-quote-bottom {
  font-family: var(--font-script);
  font-size: 1.65rem;
  line-height: 1.25;
  color: #153353;
  margin-top: 8px;
}

html[lang="zh"] .gallery-quote-bottom,
body.lang-zh .gallery-quote-bottom {
  font-family: "Noto Serif SC", var(--font-title), Georgia, serif;
  font-size: 1.05rem;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   10. SECTION 5: LỜI CHÚC (GUESTBOOK) & HỘP QUÀ MỪNG
   Design 1 (813832023_987800434345090_2474887829932389261_n.png)
   -------------------------------------------------------------------------- */
.section-activities {
  padding-top: 20px;
  padding-bottom: 36px;
}

.guestbook-block-c3 {
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}

.guestbook-sub-desc {
  font-family: var(--font-title);
  font-size: 1rem;
  color: #33506d;
  line-height: 1.45;
  margin-bottom: 22px;
}

.guestbook-box-c3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guestbook-input-c3,
.guestbook-textarea-c3 {
  width: 100%;
  background: #f8fafc;
  border: 1.5px solid #819cbe;
  border-radius: 12px;
  padding: 13px 18px;
  font-family: var(--font-title);
  font-size: 1.05rem !important;
  color: #153353;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.guestbook-input-c3:focus,
.guestbook-textarea-c3:focus {
  border-color: #153353;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(21, 51, 83, 0.08);
}

.guestbook-textarea-c3 {
  min-height: 110px;
  resize: vertical;
}

.guestbook-actions-c3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.btn-suggest-c3 {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #819cbe;
  background: #ffffff;
  color: #153353;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-suggest-c3:hover {
  background: #f0f5fa;
  border-color: #153353;
}

.btn-submit-wish-c3 {
  flex: 1;
  padding: 12px 24px;
  border-radius: 999px;
  background: #6887ad;
  background-image: linear-gradient(135deg, #7495bc 0%, #5a7a9f 100%);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  border: none;
  box-shadow: 0 4px 16px rgba(104, 135, 173, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-submit-wish-c3:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(104, 135, 173, 0.45);
}

.wishes-list-heading {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #153353;
  text-transform: uppercase;
  margin: 24px 0 16px 0;
}

.wishes-stream-c3,
#wishes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  max-height: min(420px, 55vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.wishes-stream-c3::-webkit-scrollbar,
#wishes-list::-webkit-scrollbar {
  width: 5px;
}

.wishes-stream-c3::-webkit-scrollbar-thumb,
#wishes-list::-webkit-scrollbar-thumb {
  background: rgba(59, 96, 140, 0.35);
  border-radius: 10px;
}

.wishes-stream-c3::-webkit-scrollbar-track,
#wishes-list::-webkit-scrollbar-track {
  background: transparent;
}

.wish-item-c3 {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #a5bad1;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 12px rgba(21, 51, 83, 0.05);
  position: relative;
}

.wish-header-c3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.wish-name-c3 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: #153353;
}

.wish-heart-c3 {
  font-size: 0.9rem;
  color: #6887ad;
}

.wish-message-c3 {
  font-family: var(--font-title);
  font-size: 1rem;
  color: #33506d;
  line-height: 1.45;
}

/* HỘP QUÀ MỪNG (GIFT BOX TRIGGER) */
.gift-block-c3 {
  text-align: center;
  margin-top: 36px;
}

.gift-box-custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 34px;
  border-radius: 999px;
  background: #6887ad;
  background-image: linear-gradient(135deg, #7495bc 0%, #5a7a9f 100%);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 20px rgba(104, 135, 173, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 14px;
}

.gift-box-custom-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(104, 135, 173, 0.45);
}

/* FOOTER — chuẩn chung các thiệp: không line, chữ nhỏ, không uppercase */
footer.brand-footer-block,
.brand-footer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 18px 20px 28px 20px;
  margin-top: 14px;
  border-top: none !important;
  position: relative;
  z-index: 2;
}

.gift-thankyou-note {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  color: #25456f;
  text-align: center;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  line-height: 1.55;
  padding: 0 8px;
  box-sizing: border-box;
}

.brand-footer-block span,
.brand-footer-text {
  font-family: 'Montserrat', var(--font-sans), sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: #6887ad;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   11. MODALS & OVERLAYS (GIFT, RSVP, LIGHTBOX)
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(18, 38, 62, 0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-sizing: border-box;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* LIGHTBOX — nền trắng, ảnh fit viewport */
#gallery-modal.modal-overlay {
  background: #ffffff;
  padding: 20px;
  overflow: hidden;
}

#gallery-modal .lightbox-modal-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(920px, 94vw);
  max-height: min(88vh, 900px);
  margin: auto;
  box-sizing: border-box;
}

#gallery-modal .lightbox-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: min(88vh, 900px);
  overflow: hidden;
}

#gallery-modal #lightbox-active-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(86vh, 880px);
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(21, 51, 83, 0.12);
}

#gallery-modal .lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(129, 156, 190, 0.55);
  background: #ffffff;
  color: #153353;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(21, 51, 83, 0.12);
}

#gallery-modal .lightbox-prev { left: 8px; }
#gallery-modal .lightbox-next { right: 8px; }

#gallery-modal .lightbox-nav-btn:hover {
  background: #f0f5fa;
  border-color: #3b608c;
}

/* Nút X — góc phải trên viewport, rõ trên nền trắng */
#gallery-modal .modal-close-btn,
#gallery-modal #gallery-modal-close {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(129, 156, 190, 0.55) !important;
  background: #ffffff !important;
  color: #153353 !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10003 !important;
  box-shadow: 0 4px 16px rgba(21, 51, 83, 0.14) !important;
  padding: 0 !important;
  transform: none !important;
}

#gallery-modal .modal-close-btn:hover,
#gallery-modal #gallery-modal-close:hover {
  background: #f0f5fa !important;
  border-color: #3b608c !important;
  color: #153353 !important;
}

@media (max-width: 600px) {
  #gallery-modal .lightbox-modal-box {
    width: 96vw;
    max-height: 82vh;
  }

  #gallery-modal #lightbox-active-img {
    max-height: 78vh;
  }

  #gallery-modal .lightbox-nav-btn {
    width: 38px;
    height: 38px;
    font-size: 1.35rem;
  }

  #gallery-modal .modal-close-btn,
  #gallery-modal #gallery-modal-close {
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

/* GIFT MODAL (EXACT MATCH TO REFERENCE SCREENSHOT) */
.gift-modal-box {
  width: 100%;
  max-width: 388px;
  background-color: #f7fafc;
  background-image:
    linear-gradient(180deg, rgba(232, 240, 248, 0.72) 0%, rgba(247, 250, 252, 0.55) 40%, rgba(247, 250, 252, 0.45) 100%),
    url('../assets/19297e3c-5878-4682-a4b2-2a0b6ac07a7e.png');
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  border-radius: 26px;
  border: 1px solid rgba(165, 186, 209, 0.45);
  box-shadow: 0 16px 48px rgba(15, 33, 56, 0.22);
  padding: 18px 16px 22px;
  position: relative;
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: auto;
  box-sizing: border-box;
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gift-qr-card {
  width: 160px !important;
  height: 160px !important;
  border: 1px solid #d4e2ee !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 8px !important;
  margin: 0 auto 12px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(21, 51, 83, 0.03) !important;
  box-sizing: border-box !important;
}

.gift-modal-header {
  background: #eef3f8;
  border-radius: 6px;
  padding: 10px 14px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  margin-bottom: 18px;
}

.gift-modal-title {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #274363;
  margin: 0;
  text-transform: uppercase;
}

.gift-modal-close {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  border: 1.2px solid #7c9ebd;
  background: transparent;
  color: #3b5f85;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.2s ease;
}

.gift-modal-close:hover {
  background: #3b5f85;
  color: #ffffff;
  border-color: #3b5f85;
}

.gift-modal-body {
  padding: 0;
  background: transparent;
  overflow: visible;
}

.gift-cols-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.gift-person-card {
  background: #ffffff !important;
  border: 1px solid #c7d8e6 !important;
  border-radius: 18px !important;
  padding: 20px 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: 0 4px 16px rgba(21, 51, 83, 0.04) !important;
  box-sizing: border-box !important;
}

.gift-person-title {
  display: none !important;
}

.gift-qr-card {
  width: 175px !important;
  height: 175px !important;
  border: 1px solid #d4e2ee !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 8px !important;
  margin: 0 auto 12px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(21, 51, 83, 0.03) !important;
  box-sizing: border-box !important;
}

.gift-qr-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 8px !important;
}

.gift-bank-info {
  margin-bottom: 14px !important;
  text-align: center !important;
}

.gift-bank-name {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: #557799 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.gift-bank-number {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.32rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #1a385a !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

.gift-bank-owner {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  color: #3b5d80 !important;
  text-transform: uppercase !important;
}

.gift-actions-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

.btn-copy-acc {
  background: #5b7f9f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 7px 18px !important;
  font-family: 'Montserrat', var(--font-sans), sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(91, 127, 159, 0.25) !important;
}

.btn-copy-acc svg {
  stroke: #ffffff !important;
}

.btn-copy-acc:hover {
  background: #476a89 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(91, 127, 159, 0.35) !important;
}

.btn-save-qr {
  background: #ffffff !important;
  color: #33506d !important;
  border: 1px solid #7c9ebd !important;
  border-radius: 9999px !important;
  padding: 6px 18px !important;
  font-family: 'Montserrat', var(--font-sans), sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.btn-save-qr svg {
  stroke: #33506d !important;
}

.btn-save-qr:hover {
  background: #f0f5fa !important;
  transform: translateY(-1px) !important;
}

/* RSVP MODAL — tông xanh (không texture be / không rose) */
#rsvp-modal .rsvp-modal-box,
#rsvp-modal .modal-box-styled {
  width: 100%;
  max-width: 450px;
  background: #ffffff !important;
  background-image:
    linear-gradient(180deg, #f5f9fc 0%, #ffffff 48%) !important;
  border-radius: 20px;
  border: 1px solid rgba(129, 156, 190, 0.5) !important;
  box-shadow: 0 20px 50px rgba(21, 51, 83, 0.22) !important;
  padding: 28px 24px 24px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

#rsvp-modal .rsvp-modal-title,
#rsvp-modal .gift-modal-title {
  font-family: var(--font-title);
  font-size: 1.42rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #153353 !important;
  text-align: center;
  text-transform: uppercase;
}

#rsvp-modal .rsvp-modal-subtitle {
  font-family: var(--font-title);
  font-size: 0.90rem !important;
  color: #5c7c9e !important;
  text-align: center;
  margin-bottom: 20px !important;
}

#rsvp-modal .modal-close-btn {
  background: rgba(129, 156, 190, 0.18) !important;
  color: #153353 !important;
  border: none !important;
}

#rsvp-modal .modal-close-btn:hover {
  background: rgba(129, 156, 190, 0.32) !important;
  color: #153353 !important;
}

#rsvp-modal .rsvp-form-group {
  margin-bottom: 18px !important;
}

#rsvp-modal .rsvp-form-label {
  display: block;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  color: #153353 !important;
  margin-bottom: 7px;
}

#rsvp-modal .rsvp-input,
#rsvp-modal .rsvp-textarea,
#rsvp-modal .form-input,
#rsvp-modal .form-textarea,
#rsvp-modal select {
  width: 100%;
  background: #ffffff !important;
  border: 1.2px solid rgba(129, 156, 190, 0.5) !important;
  border-radius: 10px;
  color: #153353 !important;
  outline: none;
  box-sizing: border-box;
}

#rsvp-modal .rsvp-input:focus,
#rsvp-modal .rsvp-textarea:focus,
#rsvp-modal .form-input:focus,
#rsvp-modal select:focus {
  border-color: #3b608c !important;
  background: #f8fafc !important;
  box-shadow: 0 0 0 3px rgba(59, 96, 140, 0.12);
}

#rsvp-modal .rsvp-input::placeholder,
#rsvp-modal .rsvp-textarea::placeholder,
#rsvp-modal textarea::placeholder {
  color: #8aa0b8 !important;
}

#rsvp-modal .rsvp-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#rsvp-modal .rsvp-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: #153353 !important;
  background: #ffffff !important;
  border: 1.2px solid rgba(129, 156, 190, 0.45) !important;
  border-radius: 10px;
  cursor: pointer;
}

#rsvp-modal .rsvp-radio-label:has(input:checked) {
  border-color: #3b608c !important;
  background: #eef4fa !important;
  color: #153353 !important;
  font-weight: 600;
}

#rsvp-modal .rsvp-radio-label input {
  accent-color: #3b608c !important;
}

#rsvp-modal .btn-rsvp-submit {
  width: 100%;
  padding: 13px;
  border-radius: 999px !important;
  background: #3b608c !important;
  background-image: linear-gradient(180deg, #4d739e 0%, #3b608c 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  margin-top: 12px;
  box-shadow: 0 4px 14px rgba(43, 75, 114, 0.28);
}

#rsvp-modal .btn-rsvp-submit:hover {
  filter: brightness(0.94);
}

/* WISH SUGGESTIONS MODAL */
.wish-suggestions-card {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(21, 51, 83, 0.2);
}

.wish-suggestion-item {
  padding: 12px 16px;
  border-radius: 12px;
  background: #f0f5fa;
  border: 1px solid rgba(129, 156, 190, 0.35);
  font-family: var(--font-title);
  font-size: 1.02rem;
  color: #153353;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.wish-suggestion-item:hover {
  background: #e6f0f8;
  border-color: #6887ad;
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #153353;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100000;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .c1-top-intro-block {
    padding: 32px 12px 12px 12px;
  }

  .hero-watercolor-dome {
    height: 52%;
    min-height: 260px;
    width: 145%;
  }

  .hero-header-badge {
    margin-bottom: 24px;
  }

  .hero-names-row,
  .card1-script-names.hero-names-row {
    --hero-name-fs: clamp(1.35rem, 12vw, 3.1rem);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    column-gap: 8px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 14px auto 18px auto !important;
    padding: 4px 4px 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .hero-name-col {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero-center-symbol {
    margin: 0 !important;
  }

  .hero-xi {
    font-size: clamp(2.4rem, 11vw, 3.2rem) !important;
  }

  .hero-arch-container {
    width: 88%;
    max-width: 440px;
    margin-top: 68px;
  }

  .hero-curved-banner {
    height: 64px;
    margin: 0;
    transform: translate(-50%, -68%);
  }

  .hero-curved-text {
    font-size: 20px;
    letter-spacing: 0.18em;
  }

  .couple-side-row {
    grid-template-columns: 46% 54% !important;
    gap: 10px !important;
    align-items: center;
  }

  .couple-side-row--bride {
    grid-template-columns: 54% 46% !important;
  }

  .couple-side-photo {
    max-width: 100% !important;
    border-radius: 8px !important;
    aspect-ratio: 9 / 15 !important;
  }

  .couple-side-family {
    font-size: 0.95rem !important;
  }

  .groom-parents-name,
  .bride-parents-name {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .groom-parents-addr,
  .bride-parents-addr {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }

  .couple-side-role {
    font-size: 0.82rem !important;
  }

  .couple-side-name {
    font-size: 2.3rem !important;
  }

  .ceremony-date-bar {
    gap: 12px !important;
    max-width: 360px !important;
  }

  .date-flank-col {
    min-width: 90px !important;
    gap: 5px !important;
  }

  .flank-text {
    font-size: 0.95rem !important;
  }

  .ceremony-date-bar .big-day {
    font-size: 3.2rem !important;
  }

  .dresscode-palette {
    gap: 10px;
  }

  .color-circle {
    width: 38px;
    height: 38px;
  }

  .color-name,
  .dresscode-item .color-name {
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }
}

/* GIFT BOX WATERCOLOR CARD (Matching user upload) */
.gift-illustration-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  margin: 16px auto 0 auto;
  padding: 8px;
  max-width: 260px;
  position: relative;
  user-select: none;
}

.gift-box-watercolor-img {
  width: 168px;
  max-width: 58%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(21, 51, 83, 0.14));
  animation: giftBoxFloatAnim 4.2s ease-in-out infinite alternate;
  transform-origin: center bottom;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
  -webkit-user-drag: none;
}

.gift-illustration-card:hover .gift-box-watercolor-img {
  transform: translateY(-10px) scale(1.06) rotate(1.2deg);
  filter: drop-shadow(0 20px 36px rgba(21, 51, 83, 0.25));
}

@keyframes giftBoxFloatAnim {
  0% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-9px) rotate(1.2deg);
  }
  100% {
    transform: translateY(-4px) rotate(-0.5deg);
  }
}

.gift-box-custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 34px;
  margin-top: 10px;
  border-radius: 9999px;
  background: linear-gradient(180deg, #4d739e 0%, #3b608c 100%);
  color: #ffffff;
  font-family: 'Montserrat', var(--font-sans), sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  box-shadow: 0 4px 14px rgba(43, 75, 114, 0.28);
  cursor: pointer;
  transition: all 0.25s ease;
}

.gift-illustration-card:hover .gift-box-custom-btn,
.gift-box-custom-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(43, 75, 114, 0.38);
  background: linear-gradient(180deg, #5b83b0 0%, #446d9c 100%);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Bride reception — container chứa thông tin (đồng bộ palette thiệp)
   -------------------------------------------------------------------------- */
#reception-bride {
  --rb-ink: #153353;
  --rb-muted: #5c7c9e;
  --rb-paper: rgba(255, 255, 255, 0.92);
  --rb-border: rgba(165, 186, 209, 0.55);
  width: calc(100% - 24px);
  max-width: 560px;
  margin: 28px auto 24px auto;
  padding: 0;
  color: #153353;
  font-family: 'Playfair Display', var(--font-title), Georgia, serif;
  box-sizing: border-box;
}

#reception-bride {
  width: calc(100% - 12px) !important;
  max-width: 560px !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#reception-bride .bride-reception-card {
  box-sizing: border-box;
  width: 100%;
  padding: 34px 10px 32px 10px !important;
  border: 1px solid var(--rb-border);
  border-radius: 20px;
  background: var(--rb-paper);
  background-image:
    linear-gradient(180deg, rgba(246, 250, 253, 0.65) 0%, rgba(255, 255, 255, 0.92) 48%);
  box-shadow: 0 10px 28px rgba(21, 51, 83, 0.08);
  text-align: center;
  overflow: visible !important;
}

#reception-bride .rb-heading,
#reception-bride .rb-heading.card-heading-title,
#reception-bride h3.rb-heading {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  color: #153353 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  max-width: none !important;
  width: 100% !important;
  text-align: center !important;
}

/* Lead giờ — cùng class/style .reception-time-lead nhà trai */
#reception-bride .rb-lead.reception-time-lead {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.15rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #25456f !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#reception-bride .rb-venue.reception-venue-summary {
  margin: 26px 0 10px 0 !important;
}

#reception-bride .rb-venue-name-row.rec-at-name {
  display: block !important;
  margin-bottom: 10px !important;
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #153353 !important;
}

#reception-bride .rb-venue-name-row .rb-at-prefix {
  margin-right: 0.25em;
}

#reception-bride .rb-venue-name {
  font: inherit !important;
  color: inherit !important;
}

#reception-bride .rb-venue-address.rec-at-addr {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #25456f !important;
  line-height: 1.55 !important;
  margin: 0 0 4px 0 !important;
}

#reception-bride .rb-weekday.reception-dow-text {
  margin: 16px 0 12px !important;
}

#reception-bride .rb-date.ceremony-date-bar {
  margin: 14px auto 18px auto !important;
  max-width: 420px !important;
}

#reception-bride .rb-date .big-day.rb-day,
#reception-bride .ceremony-date-bar .rb-day {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 3.6rem !important;
  font-weight: 700 !important;
  line-height: 0.88 !important;
  color: #153353 !important;
  margin: 0 !important;
  padding: 0 4px !important;
}

#reception-bride .rb-lunar {
  margin: 16px 0 22px 0 !important;
}

/* Đồng bộ hàng giờ với reception nhà trai */
#reception-bride .rb-times.reception-times-row--visible {
  display: flex !important;
  justify-content: center !important;
  gap: 40px !important;
  margin: 8px 0 20px 0 !important;
  text-align: center !important;
}

#reception-bride .rb-times .time-col-c2 small,
#reception-bride .rb-time-col small {
  display: block !important;
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: #5c7c9e !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}

#reception-bride .rb-times .time-col-c2 strong,
#reception-bride .rb-time-col strong {
  font-family: 'Playfair Display', var(--font-title), Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #153353 !important;
  line-height: 1.2 !important;
}

#reception-bride .rb-direction.btn-pill-direction {
  margin-top: 26px;
}