/* ========================================================
   SAGE & IVORY THEME
   Keeps the existing inner-section geometry and typography.
   ======================================================== */
:root {
  --red-primary: #3B4C31;
  --red-dark: #233827;
  --red-light: #526746;
  --red-card: #3B4C31;
  --red-card-inner: #2b3824;
  --gold: #b99b55;
  --gold-light: #e4d8b8;
  --gold-dark: #8f7339;
  --paper-bg: #f7f7f1;
  --paper-card: #f8f5ea;
  --cream-text: #fffdf5;
  --cream-sub: rgba(255, 253, 245, .82);
  --ink: #2d4030;
  --muted: #6d796c;
  --border-red: rgba(59, 76, 49, .18);
  --border-gold: rgba(185, 155, 85, .42);
  --shadow-card: 0 18px 42px rgba(40, 62, 43, .18), 0 4px 12px rgba(24, 40, 27, .08);
}

html,
body {
  background-color: #edf1e8;
}

body {
  color: var(--ink);
  background-color: #edf1e8;
  background-image: none;
}

.app-container {
  width: min(100%, 900px);
  max-width: 900px;
  background-color: #f4f0e6;
  background-image: url("../assets/ec8ba2ab-2bfe-4dcc-98c5-f3e7c59a6496.webp");
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  box-shadow: 0 0 34px rgba(35, 56, 38, .14);
}

.lotus-bg-layers,
.ambient-particles,
.gift-flower-right,
#reception::before,
#countdown::before,
#gallery::before {
  display: none !important;
}

.falling-lotus-container {
  display: block !important;
}

/* ========================================================
   BACKGROUND WATERMARK: Faded 3D Green & Gold 囍 (Chữ Hỷ)
   ======================================================== */
.xi-bg-watermark-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: block !important;
}

.xi-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
  opacity: 0.12;
  filter: blur(0.8px);
  mix-blend-mode: multiply;
}

/* 1. Giữa Thông tin Lễ Cưới & Album Ảnh (Góc phải) */
.xi-wm-1 {
  top: 980px;
  right: -30px;
  width: clamp(140px, 28vw, 210px);
  transform: rotate(10deg);
}

/* 2. Bên cạnh Khối Tiệc Cưới / Lịch (Góc trái) */
.xi-wm-2 {
  top: 2780px;
  left: -35px;
  width: clamp(240px, 58vw, 340px);
  transform: rotate(-10deg);
}

/* 3. Phía sau Lịch trình / Đếm ngược (Góc phải) */
.xi-wm-3 {
  top: 3150px;
  right: -28px;
  width: clamp(145px, 29vw, 215px);
  transform: rotate(8deg);
}

/* 4. Khu vực Sổ lưu bút & Hộp mừng (Góc trái) */
.xi-wm-4 {
  top: 4280px;
  left: -30px;
  width: clamp(150px, 30vw, 225px);
  transform: rotate(-8deg);
}

/* Chữ Hỷ nền cạnh Sổ lưu bút (góc trái) */
#guestbook {
  position: relative;
  overflow: visible;
}

#guestbook::after {
  content: "";
  position: absolute;
  top: -32%;
  left: -150px;
  width: clamp(155px, 40vw, 220px);
  aspect-ratio: 1;
  background: url("../assets/931eac8d-2941-4c71-8047-a46eb63a032a.webp") center / contain no-repeat;
  opacity: 0.14;
  filter: blur(0.8px);
  mix-blend-mode: multiply;
  transform: rotate(-10deg);
  pointer-events: none;
  z-index: 0;
}

#countdown::after,
#dresscode::after {
  content: none !important;
  display: none !important;
}

.envelope-bg-xi { display: none !important; }

/* Opening cover --------------------------------------------------------- */
.envelope-screen {
  padding: clamp(14px, 4vw, 38px);
  background-color: #edf1e8;
  background-image: url("../assets/7594360f-ce99-43ee-88bd-295e89fd0004.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.envelope-screen::before,
.envelope-screen::after {
  content: "";
  position: absolute;
  width: min(48vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(31, 55, 34, .2);
  filter: blur(90px);
  pointer-events: none;
}

.envelope-screen::before { top: -20%; left: -14%; }
.envelope-screen::after { right: -18%; bottom: -28%; }

/* Corner Watermarks 囍 on Envelope Screen */
.envelope-corner-xi {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}

.envelope-corner-xi img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.16;
  filter: blur(0.6px);
  mix-blend-mode: multiply;
}

.envelope-corner-xi-tl {
  top: clamp(10px, 3vw, 36px);
  left: clamp(10px, 3vw, 36px);
  width: clamp(110px, 20vw, 190px);
  transform: rotate(-10deg);
}

.envelope-corner-xi-br {
  bottom: clamp(15px, 3.5vw, 42px);
  right: clamp(15px, 3.5vw, 42px);
  width: clamp(110px, 20vw, 190px);
  transform: rotate(8deg);
}

.envelope-box {
  width: min(780px, 92vw);
}

.envelope-card {
  min-height: 430px;
  padding: 38px 48px;
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .72);
  background-color: #faf8f2;
  background-image: none;
  box-shadow: 0 30px 70px rgba(30, 53, 33, .34), 0 8px 22px rgba(30, 48, 32, .2);
}

.envelope-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(185, 155, 85, .25);
  border-radius: 14px;
  pointer-events: none;
}

.envelope-emblem {
  position: relative;
  z-index: 4;
  width: min(100%, 310px);
  justify-self: center;
  filter: drop-shadow(0 8px 12px rgba(44, 69, 46, .18));
}

.envelope-emblem img { width: 100%; }

.invite-opening .envelope-emblem {
  animation: emblem-burst-pop 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes emblem-burst-pop {
  0% { transform: scale(1); filter: drop-shadow(0 8px 12px rgba(44, 69, 46, .18)); }
  25% { transform: scale(1.09); filter: drop-shadow(0 0 24px rgba(109, 137, 101, 0.8)); }
  100% { transform: scale(0.96) translateY(-40px); opacity: 0; filter: blur(6px); }
}

.envelope-cover-copy {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 4px 4px;
}

.envelope-flower-left {
  display: none !important;
}

.envelope-seal {
  position: relative;
  margin: 0 auto 16px;
  width: 62px;
  height: 62px;
  z-index: 20;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #6d8965 0%, #3c593d 45%, #263c29 100%);
  border: 3px double rgba(231, 219, 181, .36);
  box-shadow: 0 7px 17px rgba(36, 58, 39, .35), inset 0 1px 2px rgba(255, 255, 255, .32);
}

.envelope-seal svg { width: 25px; height: 25px; fill: #fffdf3; }
.invite-opening .envelope-seal {
  transform: scale(1.22);
  box-shadow: 0 0 45px rgba(212, 175, 55, 0.75) !important;
}
.invite-opening .envelope-seal::before {
  border: 3px solid rgba(82, 103, 70, 0.85) !important;
  animation: seal-shockwave-1 2.4s cubic-bezier(0.15, 0.85, 0.35, 1) forwards !important;
}
.invite-opening .envelope-seal::after {
  border: 2px solid rgba(185, 155, 85, 0.8) !important;
  animation: seal-shockwave-2 2.4s cubic-bezier(0.15, 0.85, 0.35, 1) 0.25s forwards !important;
}

.envelope-names { margin: 0 auto 5px; }

.envelope-name-line {
  color: #314b35;
  font-size: clamp(2rem, 5.1vw, 3rem);
  line-height: 1.02;
}

.envelope-name-amp {
  color: #937a42;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1;
}

.envelope-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 12px;
  width: min(100%, 140px);
  max-width: 140px;
}
.envelope-divider .line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(to right, transparent 0%, #c8ab66 12%, #8f7233 100%) !important;
  opacity: 0.85 !important;
  border-radius: 1px;
}
.envelope-divider .line:last-child {
  background: linear-gradient(to left, transparent 0%, #c8ab66 12%, #8f7233 100%) !important;
}
.envelope-divider .ornament {
  color: #927536 !important;
  font-size: 1.05rem !important;
  line-height: 1;
  opacity: 1 !important;
  padding: 0 3px;
}

.envelope-date {
  color: #3d543f;
  margin: 0 0 13px;
  font-size: clamp(1rem, 2.1vw, 1.28rem);
  font-weight: 600;
}

.envelope-invite-text { color: #5f715f; margin-bottom: 14px; }

.btn-open {
  min-width: 180px;
  padding: 10px 32px;
  color: #fffdf4;
  background: linear-gradient(180deg, #496849 0%, #2e4a32 100%);
  border: 1px solid rgba(195, 166, 91, .55);
  box-shadow: 0 8px 18px rgba(41, 67, 44, .3);
}

.btn-open:hover { background: #263f2a; }

/* Full-photo hero ------------------------------------------------------- */
.hero-section,
.hero-section.reveal-section,
#hero {
  width: 100% !important;
  max-width: 900px !important;
  height: clamp(760px, 100svh, 900px);
  min-height: 760px;
  margin: 0 auto 24px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, 0.99) 56%,
    rgba(0, 0, 0, 0.96) 62%,
    rgba(0, 0, 0, 0.90) 68%,
    rgba(0, 0, 0, 0.81) 74%,
    rgba(0, 0, 0, 0.69) 80%,
    rgba(0, 0, 0, 0.54) 86%,
    rgba(0, 0, 0, 0.38) 91%,
    rgba(0, 0, 0, 0.22) 95%,
    rgba(0, 0, 0, 0.09) 98%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, 0.99) 56%,
    rgba(0, 0, 0, 0.96) 62%,
    rgba(0, 0, 0, 0.90) 68%,
    rgba(0, 0, 0, 0.81) 74%,
    rgba(0, 0, 0, 0.69) 80%,
    rgba(0, 0, 0, 0.54) 86%,
    rgba(0, 0, 0, 0.38) 91%,
    rgba(0, 0, 0, 0.22) 95%,
    rgba(0, 0, 0, 0.09) 98%,
    transparent 100%);
}

.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(105, 136, 95, 0) 0%,
    rgba(105, 136, 95, 0) 36%,
    rgba(105, 136, 95, 0.03) 44%,
    rgba(105, 136, 95, 0.08) 52%,
    rgba(105, 136, 95, 0.16) 60%,
    rgba(105, 136, 95, 0.26) 68%,
    rgba(105, 136, 95, 0.38) 76%,
    rgba(105, 136, 95, 0.48) 83%,
    rgba(105, 136, 95, 0.54) 89%,
    rgba(105, 136, 95, 0.52) 94%,
    rgba(105, 136, 95, 0.40) 98%,
    rgba(105, 136, 95, 0.25) 100%);
}

.hero-section .envelope-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0;
}

.hero-section .envelope-back,
.hero-section .envelope-photo-wrap,
.hero-section .photo-frame {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #69885f;
  box-shadow: none;
  transform: none;
  animation: none;
  overflow: hidden;
}

.hero-section .photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border: 0;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 40%,
    rgba(0, 0, 0, 0.99) 46%,
    rgba(0, 0, 0, 0.95) 53%,
    rgba(0, 0, 0, 0.88) 60%,
    rgba(0, 0, 0, 0.77) 67%,
    rgba(0, 0, 0, 0.63) 74%,
    rgba(0, 0, 0, 0.47) 81%,
    rgba(0, 0, 0, 0.30) 88%,
    rgba(0, 0, 0, 0.15) 94%,
    rgba(0, 0, 0, 0.04) 98%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 40%,
    rgba(0, 0, 0, 0.99) 46%,
    rgba(0, 0, 0, 0.95) 53%,
    rgba(0, 0, 0, 0.88) 60%,
    rgba(0, 0, 0, 0.77) 67%,
    rgba(0, 0, 0, 0.63) 74%,
    rgba(0, 0, 0, 0.47) 81%,
    rgba(0, 0, 0, 0.30) 88%,
    rgba(0, 0, 0, 0.15) 94%,
    rgba(0, 0, 0, 0.04) 98%,
    transparent 100%);
}

.hero-section .envelope-front-flaps,
.hero-section .hero-peony-deco { display: none !important; }

.hero-title-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 7;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0 16px clamp(48px, 8.5vh, 85px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  pointer-events: none;
}

.hero-kicker {
  position: static !important;
  order: 1;
  margin: 0 0 clamp(10px, 1.6vh, 16px) !important;
  color: #fffef8;
  text-transform: uppercase;
  text-align: center;
  font-family: var(--font-title);
  font-size: 0;
  font-weight: 600;
  letter-spacing: .24em;
  text-shadow: 0 2px 10px rgba(25, 45, 26, 0.7), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hero-kicker::before {
  content: "SAVE THE DATE";
  font-size: clamp(.92rem, 3.8vw, 1.25rem);
}

.hero-names {
  position: static !important;
  order: 2;
  margin: 0 0 clamp(12px, 2vh, 20px) !important;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: .18em;
  color: #fff;
  font-family: "Alex Brush", "Pattaya", cursive;
  font-size: clamp(2.35rem, 9.5vw, 4.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(25, 45, 26, 0.75), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-names .amp {
  display: inline;
  margin: 0;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: .62em;
  font-weight: 400;
  line-height: 1;
}

.hero-date {
  position: static !important;
  order: 3;
  margin: 0 0 clamp(12px, 2vh, 20px) !important;
  color: #fffef8;
  font-family: 'Montserrat', 'Lora', system-ui, sans-serif;
  font-size: clamp(.76rem, 3vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-align: center;
  text-indent: .22em;
  text-shadow: 0 2px 10px rgba(25, 45, 26, 0.7), 0 1px 3px rgba(0, 0, 0, 0.45);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.hero-invite-guest {
  position: static !important;
  order: 4;
  display: block;
  width: min(92%, 520px);
  margin: 0 auto !important;
  padding: 0 12px;
  box-sizing: border-box;
  color: #ffffff !important;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: calc(clamp(1.18rem, 4.2vw, 1.65rem) - 2px);
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(25, 45, 26, 0.65), 0 1px 3px rgba(0, 0, 0, 0.4);
  opacity: 1 !important;
  z-index: 8;
}

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

.hero-quote { display: none !important; }

.red-card,
.timeline-card:not(.has-custom-bg) {
  color: #fffdf5;
  background-color: #3B4C31 !important;
  background: #3B4C31 !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  opacity: 1 !important;
  border: 1px solid rgba(212, 197, 151, .35) !important;
  box-shadow: var(--shadow-card);
  position: relative !important;
}

/* All text on Dark Green Cards is Crisp White (#ffffff) */
.red-card,
.red-card * {
  color: #ffffff !important;
}

.red-card .card-heading,
.timeline-card:not(.has-custom-bg) .card-heading { color: #ffffff !important; }

.family-side small,
.family-side h4,
.family-side p,
.announcement-text,
.couple-highlight-names,
.groom-name,
.bride-name,
.couple-highlight-names .amp,
.role-badge,
.ceremony-note,
.ceremony-time-badge,
.ceremony-time-badge .time,
.ceremony-time-badge .date-big,
.ceremony-time-badge .lunar,
.timeline-card:not(.has-custom-bg) .timeline-time,
.timeline-card:not(.has-custom-bg) .timeline-text { color: #ffffff !important; }

.timeline-card .timeline-divider {
  display: none;
}

/* ========================================================
   LỊCH TRÌNH CÓ ẢNH NỀN TÙY BIẾN (THIỆP 6 STYLE - FROSTED GLASS)
   ======================================================== */
/* Tràn ngang hết thiệp trên mọi breakpoint (override theme-match 88%/420px) */
#timeline,
#timeline.reveal-section {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(28px, 5vw, 42px) !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

.timeline-card.has-custom-bg {
  background-color: transparent !important;
  background-image: var(--timeline-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(24px, 5.5vw, 36px) clamp(12px, 3.5vw, 20px) !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.timeline-card.has-custom-bg::after {
  display: none !important;
}

/* Khung kính mờ (Frosted Glass) chứa nội dung lịch trình ở giữa */
.timeline-card.has-custom-bg .timeline-inner {
  background: #6060606b !important;
  background-color: #6060606b !important;
  backdrop-filter: blur(2px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(150%) !important;
  border-radius: clamp(16px, 3.2vw, 22px) !important;
  padding: clamp(22px, 5vw, 32px) clamp(14px, 4vw, 24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  margin: 0 auto;
  max-width: 620px;
  width: 100%;
  box-sizing: border-box;
}

.timeline-card.has-custom-bg .card-heading {
  color: #ffffff !important;
  font-family: var(--font-title), 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 6px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Đường gạch ngang trang trí hình trái tim ở giữa — ♥ — */
.timeline-card.has-custom-bg .timeline-divider {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px auto 20px;
  max-width: 160px;
}

.timeline-card.has-custom-bg .timeline-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent) !important;
}

.timeline-card.has-custom-bg .timeline-divider .heart {
  color: #ffffff !important;
  font-size: 0.75rem;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* Màu chữ thời gian và sự kiện trên nền kính mờ: ĐỔI HẾT SANG MÀU TRẮNG */
.timeline-card.has-custom-bg .timeline-time {
  color: #ffffff !important;
  font-family: 'Playfair Display', 'Lora', Georgia, serif !important;
  font-size: clamp(0.96rem, 2.4vw, 1.06rem) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}

.timeline-card.has-custom-bg .timeline-text {
  color: #ffffff !important;
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(0.98rem, 2.5vw, 1.08rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

.timeline-card.has-custom-bg .timeline-list::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.85) 20%,
    rgba(255, 255, 255, 0.85) 80%,
    rgba(255, 255, 255, 0.25)
  ) !important;
}

.timeline-card.has-custom-bg .timeline-dot {
  background: #ffffff !important;
  border: 2px solid rgba(184, 152, 85, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}

.family-side small,
.family-side h4 {
  white-space: nowrap !important;
}

/* Địa chỉ dài: cho xuống dòng, không tràn khỏi cột */
.family-side { min-width: 0; }
.family-side p {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}

.parents-grid::after { background: rgba(255, 255, 255, .28) !important; }
.card-flower-lotus-wrap { display: none !important; }

/* Unified Block / Section Titles (18px) */
.card-heading,
.reception-header h3,
.venue-heading,
.guestbook-heading,
.gift-heading,
.section-header h2,
#wedding-info .card-heading,
#gallery .section-header h2,
#reception .reception-header h3,
#venue .venue-heading,
#timeline .card-heading,
#countdown .card-heading,
#dresscode .card-heading,
#dresscode .section-header h2,
#love-story .envelope-subtitle,
.story-banner .envelope-subtitle,
#guestbook .guestbook-heading,
#gift .gift-heading {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

.section-header h2,
.reception-header h3,
.venue-heading,
.venue-name,
.countdown-card .card-heading,
.dresscode-card .card-heading,
.guestbook-heading,
.gift-heading,
.gift-hint-text,
.gift-thankyou-text,
.wish-author,
.footer-monogram { color: #304b35; }

#gallery .section-header {
  text-align: center;
  margin-bottom: 24px;
}

#gallery .section-header h2 {
  margin: 0;
  color: #304b35;
  font-family: var(--font-title), 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#gallery .section-header p {
  display: block !important;
  margin: 6px auto 0;
  color: #63775f;
  font-family: 'Lora', Georgia, serif !important;
  font-style: normal !important;
  font-size: clamp(0.92rem, 2.1vw, 1.05rem);
  line-height: 1.5;
  max-width: 480px;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}

html[lang="zh"] #gallery .section-header p,
body.lang-zh #gallery .section-header p {
  font-style: normal !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
}

.carousel-btn {
  color: #ffffff !important;
  background: rgba(45, 73, 49, .78) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.carousel-btn:hover {
  background: #3B4C31 !important;
  transform: translateY(-50%) scale(1.12) !important;
  box-shadow: 0 6px 20px rgba(35, 55, 30, 0.45) !important;
}

.carousel-dot { background: rgba(48, 75, 52, .24) !important; }
.carousel-dot.active { background: #38583c !important; }

.reception-card,
.dresscode-card,
.guestbook-card,
.wish-item,
.story-banner {
  background-color: #faf8f2 !important;
  background: #faf8f2 !important;
  background-image: none !important;
  opacity: 1 !important;
  border: 1px solid rgba(76, 103, 75, .2) !important;
  box-shadow: 0 10px 30px rgba(40, 60, 40, 0.07), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
}

/* Đường chỉ vàng viền quanh rìa các card */
.red-card::after,
#wedding-info .red-card::after,
.reception-card::after,
.dresscode-card::after,
.timeline-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border: 1px solid rgba(193, 160, 92, 0.45) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.guestbook-card::after,
.guestbook-card::before {
  content: none !important;
  display: none !important;
}

@media (min-width: 768px) {
  .red-card::after,
  #wedding-info .red-card::after,
  .reception-card::after,
  .dresscode-card::after,
  .timeline-card::after {
    inset: 10px !important;
    border-radius: 16px !important;
  }
}

/* ========================================================
   RECEPTION CARD & CALENDAR - LIGHT PAPER THEME WITH DARK GREEN TEXT
   (Matching Dress Code Style: #faf8f2 paper, #304b35 text)
   ======================================================== */
.reception-card {
  color: #304b35 !important;
}

.reception-header h3,
#reception .reception-header h3 {
  color: #304b35 !important;
  font-family: var(--font-title), 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.reception-lead {
  color: #5c7358 !important;
  font-family: var(--font-body), 'Montserrat', sans-serif !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.reception-day-time,
.reception-day-time span {
  color: #304b35 !important;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

.reception-date-block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 0 auto 8px !important;
}

.reception-date-num {
  color: #304b35 !important;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 2.9rem !important;
  line-height: 1 !important;
}

.reception-date-divider {
  background: rgba(48, 75, 53, 0.22) !important;
  width: 1px !important;
  height: 38px !important;
}

.reception-date-month-year {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  line-height: 1.15 !important;
}

.reception-date-month-year span {
  color: #5c7358 !important;
  font-family: var(--font-title), 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.reception-date-month-year strong {
  color: #304b35 !important;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}

.reception-lunar {
  color: #5c7358 !important;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 10px auto 22px !important;
}

.reception-times {
  display: flex !important;
  justify-content: center !important;
  gap: 40px !important;
  margin-bottom: 24px !important;
}

.reception-time-col small {
  color: #5c7358 !important;
  font-family: var(--font-title), 'Montserrat', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.reception-time-col strong {
  color: #304b35 !important;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
}

/* Inner Calendar Box inside Reception Card (Crisp contrasting card) */
.reception-card .calendar-paper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(59, 76, 49, 0.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(40, 60, 40, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  margin: 0 auto 22px !important;
  padding: 18px 18px 16px !important;
  max-width: 300px !important;
  opacity: 1 !important;
}

.reception-card .calendar-paper-title,
.calendar-paper-title {
  color: #304b35 !important;
  font-family: "Playfair Display", "Cormorant Garamond", cursive, Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.35rem !important;
  border-bottom: 1px solid rgba(59, 76, 49, 0.14) !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

.reception-card .calendar-grid-header,
.calendar-grid-header {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  color: #5c7358 !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
  border: none !important;
  text-align: center !important;
}

.reception-card .calendar-grid-header span,
.calendar-grid-header span {
  color: #5c7358 !important;
}

.reception-card .calendar-grid-days,
.calendar-grid-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  row-gap: 4px !important;
}

.reception-card .calendar-grid-days span,
.calendar-grid-days span {
  color: #304b35 !important;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  padding: 4px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.reception-card .calendar-grid-days .wedding-day,
.calendar-grid-days .wedding-day {
  background: #3B4C31 !important;
  background-color: #3B4C31 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto !important;
  box-shadow: 0 2px 8px rgba(48, 75, 53, 0.35) !important;
  position: relative !important;
}

.reception-card .calendar-grid-days .wedding-day::after,
.calendar-grid-days .wedding-day::after {
  content: "♥" !important;
  color: #c9a24a !important;
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  font-size: 8px !important;
}

/* Action Buttons inside Reception Card */
.reception-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 320px !important;
}

.reception-card .btn-gold-outline,
.reception-card #btn-add-calendar {
  width: 100% !important;
  max-width: 280px !important;
  color: #304b35 !important;
  border: 1px solid rgba(48, 75, 53, 0.35) !important;
  background: transparent !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.reception-card .btn-gold-outline span,
.reception-card #btn-add-calendar span {
  color: #304b35 !important;
  text-decoration: none !important;
}

.reception-card .btn-gold-outline:hover,
.reception-card #btn-add-calendar:hover {
  background: rgba(48, 75, 53, 0.08) !important;
  border-color: #304b35 !important;
  color: #1e3322 !important;
  text-decoration: none !important;
}

.reception-card .btn-gold-outline:hover span,
.reception-card #btn-add-calendar:hover span {
  color: #1e3322 !important;
  text-decoration: none !important;
}

.reception-card .btn-cream-solid,
.reception-card #btn-trigger-rsvp {
  width: 100% !important;
  max-width: 280px !important;
  background-color: #3B4C31 !important;
  background: #3B4C31 !important;
  color: #ffffff !important;
  border: 1px solid #3B4C31 !important;
  box-shadow: 0 6px 18px rgba(48, 75, 53, 0.22) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.reception-card .btn-cream-solid span,
.reception-card #btn-trigger-rsvp span {
  color: #ffffff !important;
}

.reception-card .btn-cream-solid:hover,
.reception-card #btn-trigger-rsvp:hover {
  background-color: #2b3924 !important;
  background: #2b3924 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(48, 75, 53, 0.32) !important;
}

/* Guestbook Form (400px) & Wishes Area (560px) */
#guestbook,
#guestbook.reveal-section {
  width: 100% !important;
  max-width: 560px !important;
  padding: 10px clamp(14px, 4vw, 20px) 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.guestbook-card {
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto 24px !important;
  box-sizing: border-box !important;
}

.wishes-list {
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.wish-item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.venue-card { background: transparent; }

.venue-address,
.venue-address .venue-address-text,
.venue-address-text,
p.venue-address,
.ceremony-address,
#venue .venue-address,
#venue .venue-address-text,
#reception-bride .venue-address,
#reception-bride .venue-address-text,
.reception-card .venue-address,
.reception-card .venue-address-text {
  font-family: "Playfair Display", "Cormorant Garamond", "Lora", Georgia, "Times New Roman", serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

#reception-bride .venue-heading,
.reception-card .venue-heading {
  font-family: var(--font-title), 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #5c7358 !important;
  margin: 0 auto 6px !important;
  line-height: 1.4 !important;
}

.calendar-paper-title,
.calendar-grid-header,
.calendar-grid-days,
.venue-address,
.dresscode-subtitle,
.dresscode-note,
.wish-message { color: #405443; }

/* ========================================================
   COUNTDOWN - TEXT ONLY (no card / no boxes)
   ======================================================== */
.countdown-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #304b35 !important;
  padding: 18px 8px !important;
}

.countdown-card::before,
.countdown-card::after {
  content: none !important;
  display: none !important;
}

.countdown-heart-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #38563c !important;
}

.countdown-card .card-heading,
#countdown .card-heading {
  color: #304b35 !important;
  font-family: var(--font-title), 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.countdown-subtitle {
  color: #5c7358 !important;
  font-family: var(--font-body), 'Montserrat', sans-serif !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
  opacity: 1 !important;
}

.countdown-card .countdown-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  max-width: 420px !important;
  margin: 0 auto 20px !important;
}

.countdown-card .count-box {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(59, 76, 49, 0.16) !important;
  border-radius: 14px !important;
  padding: 16px 4px 12px !important;
  box-shadow: 0 4px 14px rgba(40, 60, 40, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.countdown-card .count-box:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(59, 76, 49, 0.35) !important;
  box-shadow: 0 6px 18px rgba(40, 60, 40, 0.1) !important;
}

.countdown-card .count-box .num {
  color: #304b35 !important;
  font-family: var(--font-serif), "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.countdown-card .count-box .lbl {
  color: #5c7358 !important;
  font-family: var(--font-body), 'Montserrat', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
  display: block !important;
}

.countdown-quote {
  color: #405443 !important;
  font-family: 'EB Garamond', 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  opacity: 1 !important;
}

.calendar-grid-days .wedding-day,
.btn-submit-wish,
.btn-cream-solid,
.btn-gold-outline,
.story-banner .btn-cream-solid {
  background-color: #3B4C31 !important;
  color: #fffdf6 !important;
  border-color: #3B4C31 !important;
}

.btn-gold-outline { background: transparent !important; border-color: #d5c79e !important; text-decoration: none !important; }

.venue-direction-btn,
.venue-direction-btn:hover {
  color: #ffffff !important;
  background: #3B4C31 !important;
  border: 1px solid #3B4C31 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

.venue-direction-btn:hover {
  background: #2b3924 !important;
  border-color: #2b3924 !important;
}

.venue-direction-btn .direction-icon,
.venue-direction-btn:hover .direction-icon {
  stroke: #ffffff !important;
}

.venue-name {
  display: block !important;
  text-align: center !important;
}

.venue-name .venue-name-text {
  display: inline !important;
}

.venue-location-icon {
  display: inline-block !important;
  vertical-align: -2.5px !important;
  margin-right: 5px !important;
  stroke: #345239 !important;
}

.map-embed-wrapper,
#venue .map-embed-wrapper {
  background: #e6ebdf;
  border-color: rgba(52, 79, 56, .16);
  box-shadow: 0 12px 30px rgba(35, 61, 39, .15);
  max-width: 620px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.venue-location-icon,
.direction-icon,
.dresscode-icon,
.btn-wish-icon { color: #38563c; }

.dresscode-icon-wrap,
.btn-wish-icon { background: #edf1e7; border-color: #bdc9b8; }

.guestbook-form .form-input,
.guestbook-form .form-textarea {
  color: #304533;
  background: rgba(251, 250, 245, .95);
  border-color: #456248;
}

.guestbook-form .form-input::placeholder,
.guestbook-form .form-textarea::placeholder { color: rgba(48, 69, 51, .5); }

.guestbook-form .form-input:focus,
.guestbook-form .form-textarea:focus {
  border-color: #314d35;
  box-shadow: 0 0 0 3px rgba(52, 79, 56, .12);
}

.wishes-list::-webkit-scrollbar-track { background: rgba(52, 79, 56, .08); }
.wishes-list::-webkit-scrollbar-thumb { background: rgba(69, 98, 72, .5); }

.floating-music {
  background: radial-gradient(circle at 35% 30%, #668064 0%, #304d35 68%, #233927 100%);
  box-shadow: 0 5px 17px rgba(34, 58, 37, .35);
}

.lang-trigger-btn {
  background: rgba(255, 252, 247, 0.94) !important;
  border: 1px solid rgba(185, 155, 85, 0.65) !important;
  color: #3B4C31 !important;
  box-shadow: 0 4px 16px rgba(35, 47, 28, 0.16) !important;
}

.lang-trigger-btn:hover {
  background: rgba(255, 252, 247, 0.98) !important;
  border-color: rgba(185, 155, 85, 0.9) !important;
  color: #3B4C31 !important;
  box-shadow: 0 6px 20px rgba(35, 47, 28, 0.22) !important;
}

.floating-lang.is-open .lang-trigger-btn {
  color: #3B4C31 !important;
}

.lang-dropdown {
  background: rgba(255, 252, 247, 0.97) !important;
  border: 1px solid rgba(185, 155, 85, 0.65) !important;
  box-shadow: 0 10px 28px rgba(35, 47, 28, 0.2) !important;
}

.lang-btn {
  color: #3B4C31 !important;
}

.lang-btn:hover {
  color: #3B4C31 !important;
  background: rgba(59, 76, 49, 0.09) !important;
}

.lang-btn.active {
  background: #3B4C31 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(35, 47, 28, 0.35) !important;
}

#gift .gift-flower-right {
  top: 20px;
  right: -90px;
  width: 230px;
  opacity: .18;
}

/* Compact Gift Section & Spacing */
#gift.gift-section,
.gift-section {
  padding-top: 14px !important;
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
}

#gift .gift-heading {
  margin: 0 0 6px !important;
}

.gift-envelope-box {
  width: clamp(170px, 48vw, 215px) !important;
  max-width: 215px !important;
  height: auto;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  position: relative;
  overflow: visible;
}

.gift-hint-text {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

.gift-envelope-box::before,
.gift-envelope-box::after {
  display: none !important;
}

.gift-envelope-img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  filter: drop-shadow(0 14px 28px rgba(35, 56, 38, 0.28)) !important;
  animation: luxuryEnvelopeFloat 5.2s ease-in-out infinite alternate !important;
  transform-origin: center bottom;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  will-change: transform;
}

.gift-envelope-trigger:hover .gift-envelope-img {
  transform: scale(1.04) translateY(-4px) !important;
  filter: drop-shadow(0 18px 36px rgba(35, 56, 38, 0.38)) brightness(1.02) !important;
}

@keyframes luxuryEnvelopeFloat {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  30% {
    transform: translateY(-6px) rotate(1.2deg) scale(1.015);
  }
  65% {
    transform: translateY(-2px) rotate(-1deg) scale(1.008);
  }
  100% {
    transform: translateY(-8px) rotate(1.5deg) scale(1.02);
  }
}

.gift-sparkle {
  position: absolute;
  pointer-events: none;
  color: #dfbe68;
  z-index: 10;
}

.gift-sparkle-1 {
  top: -8px;
  right: -6px;
  font-size: 1.4rem;
  animation: giftSparkleTwinkle 2.4s ease-in-out infinite alternate;
}

.gift-sparkle-2 {
  bottom: 8px;
  left: -8px;
  font-size: 1.2rem;
  animation: giftSparkleTwinkle 2.8s 1.2s ease-in-out infinite alternate;
}

@keyframes giftSparkleTwinkle {
  0% {
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(45deg);
    filter: drop-shadow(0 0 6px rgba(223, 190, 104, 0.8));
  }
  100% {
    opacity: 0.4;
    transform: scale(0.85) rotate(90deg);
  }
}
/* Gift Modal & Popups */
.gift-modal-box {
  background: #fbf8f2 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(59, 76, 49, .2) !important;
  box-shadow: 0 24px 60px rgba(24, 38, 22, .38) !important;
  overflow: hidden !important;
}

.gift-modal-header {
  background: #3B4C31 !important;
  color: #fffdf6 !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(212, 184, 130, .35) !important;
}

.gift-modal-title {
  font-family: var(--font-title) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  color: #fffdf6 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2) !important;
}

.gift-modal-close {
  color: rgba(255, 255, 255, 0.85) !important;
}

.gift-modal-close:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.gift-modal-body {
  background: #fbf8f2 !important;
}

.gift-person-card {
  border-color: rgba(59, 76, 49, .18) !important;
}

.gift-qr-card {
  background: #ffffff !important;
  border: 1px solid rgba(59, 76, 49, .12) !important;
  box-shadow: 0 4px 14px rgba(59, 76, 49, .08) !important;
}

.gift-bank-name {
  color: #3B4C31 !important;
  font-weight: 600 !important;
}

.gift-bank-number {
  color: #3B4C31 !important;
  font-weight: 700 !important;
  font-family: "Lora", monospace !important;
}

.gift-bank-owner {
  color: #3B4C31 !important;
  font-weight: 700 !important;
  font-family: var(--font-title) !important;
}

.btn-copy-acc,
.btn-save-qr {
  color: #3B4C31 !important;
  background: #edf2eb !important;
  border: 1px solid #cdd8c8 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 5px rgba(59, 76, 49, .06) !important;
}

.btn-copy-acc:hover,
.btn-save-qr:hover {
  background: #3B4C31 !important;
  color: #ffffff !important;
  border-color: #3B4C31 !important;
  box-shadow: 0 4px 12px rgba(59, 76, 49, .3) !important;
}

/* RSVP Modal */
.modal-box,
.rsvp-modal-box {
  background: #fbf8f2 !important;
  border: 1px solid rgba(185, 155, 85, .42) !important;
  width: min(450px, 92vw) !important;
  max-width: 450px !important;
  padding: 28px 24px 24px !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

.modal-title,
#rsvp-modal-title {
  color: #3B4C31 !important;
  font-size: 1.42rem !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.modal-subtitle {
  color: #5d6d5a !important;
  font-size: 0.90rem !important;
  line-height: 1.45 !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

.modal-close,
#rsvp-modal-close {
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 1.05rem !important;
  background: rgba(59, 76, 49, .08) !important;
  color: #3B4C31 !important;
}

.modal-close:hover,
#rsvp-modal-close:hover {
  background: rgba(59, 76, 49, .16) !important;
  color: #1e2819 !important;
}

.rsvp-form-group {
  margin-bottom: 15px !important;
}

.rsvp-form-label {
  display: block !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #3B4C31 !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

.form-input.rsvp-input,
.rsvp-input,
#rsvp-modal-form select.form-input,
#rsvp-modal-form input.form-input {
  height: 44px !important;
  min-height: 44px !important;
  padding: 9px 14px !important;
  font-size: 0.95rem !important;
  border-radius: 10px !important;
  border: 1.2px solid rgba(59, 76, 49, .22) !important;
  background: #ffffff !important;
  color: #2d4030 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.rsvp-choices {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.rsvp-radio-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  min-height: 42px !important;
  font-size: 0.92rem !important;
  border-radius: 10px !important;
  border: 1.2px solid rgba(59, 76, 49, .2) !important;
  background: #ffffff !important;
  color: #3B4C31 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.rsvp-radio-label:has(input:checked) {
  border-color: #3B4C31 !important;
  background: rgba(59, 76, 49, .08) !important;
  color: #3B4C31 !important;
  font-weight: 600 !important;
}

.rsvp-radio-label input {
  accent-color: #3B4C31 !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.form-textarea.rsvp-textarea,
.rsvp-textarea,
#rsvp-modal-form textarea {
  min-height: 72px !important;
  height: 72px !important;
  max-height: 110px !important;
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
  border-radius: 10px !important;
  border: 1.2px solid rgba(59, 76, 49, .22) !important;
  background: #ffffff !important;
  color: #2d4030 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}

.btn-cream-solid.rsvp-btn-submit,
.rsvp-btn-submit,
#rsvp-modal-form button[type="submit"] {
  background: #3B4C31 !important;
  color: #ffffff !important;
  width: 100% !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  font-family: var(--font-body), var(--font-sans), sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 12px 20px !important;
  height: 46px !important;
  border-radius: 10px !important;
  border: none !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 12px rgba(59, 76, 49, .25) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-cream-solid.rsvp-btn-submit:hover,
#rsvp-modal-form button[type="submit"]:hover {
  background: #2b3924 !important;
  box-shadow: 0 6px 16px rgba(59, 76, 49, .35) !important;
}

#rsvp-modal-form button[type="submit"].is-submitting,
.rsvp-btn-submit.is-submitting {
  opacity: 0.85 !important;
  cursor: wait !important;
  pointer-events: none !important;
  gap: 10px !important;
}

#rsvp-modal-form button[type="submit"].is-submitting::before,
.rsvp-btn-submit.is-submitting::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: rsvp-spin 0.7s linear infinite;
  flex-shrink: 0;
}

#rsvp-modal.is-submitting {
  cursor: wait;
}

#rsvp-modal.is-submitting #rsvp-modal-close {
  opacity: 0.45;
  pointer-events: none;
}

@keyframes rsvp-spin {
  to { transform: rotate(360deg); }
}

/* Wish Suggestions Modal */
.wish-modal-card {
  border-color: rgba(59, 76, 49, .18) !important;
}

.wish-modal-title h3 {
  color: #3B4C31 !important;
}

.wish-suggestion-item:hover {
  border-color: #3B4C31 !important;
  background: #f4f7f2 !important;
  color: #3B4C31 !important;
}

.btn-modal-refresh:hover {
  border-color: #3B4C31 !important;
  color: #3B4C31 !important;
  background: #f4f7f2 !important;
}

/* Footer is a separate block, never part of the gift section. */
footer {
  display: block;
  width: 88%;
  max-width: 420px;
  margin: 0 auto 0 !important;
  padding: 8px 14px 22px !important;
  text-align: center;
  border: 0;
}

.footer-brand {
  color: #637364;
  font-family: var(--font-sans), "Montserrat", sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
}

footer .gift-thankyou-text {
  width: auto;
  max-width: 390px;
  margin: 0 auto 8px !important;
  color: #344d37;
  font-size: 1rem;
  line-height: 1.45;
  white-space: normal;
}

.footer-monogram,
.footer-date,
.footer-thankyou { display: none; }

@media (max-width: 600px) {
  .envelope-box { width: min(430px, 94vw); }

  .envelope-card {
    min-height: 400px;
    padding: 34px 18px 24px;
    grid-template-columns: 42% 58%;
    border-radius: 16px;
  }

  .envelope-emblem { width: 150px; transform: translateX(-3px); }
  .envelope-cover-copy { padding: 6px 0; }
  .envelope-seal { width: 54px; height: 54px; margin: 0 auto 10px; }
  .envelope-name-line { font-size: clamp(1.75rem, 8.3vw, 2.35rem); }
  .envelope-name-amp { font-size: 1.35rem; }
  .envelope-date { font-size: .96rem; }
  .btn-open { min-width: 142px; padding: 9px 23px; }
  .envelope-flower-left { width: 180px; left: -80px; bottom: -80px; }

  .hero-section { height: max(760px, 100svh); }
  .hero-names { font-size: clamp(2.25rem, 8.6vw, 3rem); }
  .hero-date {
    font-size: clamp(.80rem, 3.2vw, 0.98rem);
    letter-spacing: .24em;
    text-indent: .24em;
  }
  .hero-invite-guest {
    font-size: calc(clamp(1.25rem, 4.8vw, 1.65rem) - 2px);
  }
.card-flower-lotus-wrap { display: none !important; }
  .gift-envelope-box { width: clamp(160px, 46vw, 195px) !important; max-width: 195px !important; }

  /* Parents Grid & Family Side Mobile Optimization */
  .red-card {
    padding: 32px 14px 28px !important;
  }
  .parents-grid {
    gap: 8px !important;
    padding: 0 0 16px !important;
    min-height: auto !important;
  }
  .family-side small {
    font-size: clamp(0.66rem, 2.4vw, 0.74rem) !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 5px !important;
    white-space: nowrap !important;
  }
  .family-side h4 {
    font-size: clamp(0.70rem, 2.95vw, 0.82rem) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 600 !important;
  }
  .family-side p {
    font-size: clamp(0.64rem, 2.3vw, 0.72rem) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  /* RSVP Modal on Mobile - Spacious & well-proportioned */
  .modal-box,
  .rsvp-modal-box {
    padding: 24px 18px 20px !important;
    border-radius: 16px !important;
    width: min(420px, 92vw) !important;
  }
  .modal-title,
  #rsvp-modal-title {
    font-size: 1.30rem !important;
    margin-bottom: 5px !important;
  }
  .modal-subtitle {
    font-size: 0.86rem !important;
    margin-bottom: 16px !important;
  }
  .rsvp-form-group {
    margin-bottom: 13px !important;
  }
  .rsvp-form-label {
    font-size: 0.88rem !important;
    margin-bottom: 5px !important;
  }
  .form-input.rsvp-input,
  .rsvp-input,
  #rsvp-modal-form select.form-input,
  #rsvp-modal-form input.form-input {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    font-size: 0.92rem !important;
  }
  .rsvp-choices {
    gap: 7px !important;
  }
  .rsvp-radio-label {
    padding: 9px 12px !important;
    min-height: 40px !important;
    font-size: 0.88rem !important;
  }
  .form-textarea.rsvp-textarea,
  .rsvp-textarea,
  #rsvp-modal-form textarea {
    height: 66px !important;
    min-height: 66px !important;
    padding: 8px 12px !important;
    font-size: 0.92rem !important;
  }
  .btn-cream-solid.rsvp-btn-submit,
  .rsvp-btn-submit,
  #rsvp-modal-form button[type="submit"] {
    height: 44px !important;
    font-size: 0.98rem !important;
    padding: 10px 18px !important;
    margin-top: 12px !important;
  }
}

@media (max-width: 380px) {
  .envelope-card {
    min-height: 385px;
    grid-template-columns: 39% 61%;
    padding-inline: 12px;
  }

  .envelope-emblem { width: 132px; }
  .envelope-seal { width: 48px; height: 48px; margin: 0 auto 8px; }
  .envelope-name-line { font-size: 1.72rem; }
  .btn-open { min-width: 128px; padding-inline: 18px; }
  .hero-names { font-size: 2.08rem; }
  .hero-date { font-size: 0.72rem; letter-spacing: .18em; text-indent: .18em; }
  .hero-invite-guest { font-size: 1.05rem; }

  .red-card {
    padding-inline: 10px !important;
  }
  .parents-grid {
    gap: 6px !important;
  }
  .family-side h4 {
    font-size: clamp(0.64rem, 2.75vw, 0.72rem) !important;
  }
  .family-side p {
    font-size: 0.62rem !important;
  }
}

@media (min-width: 768px) {
  body { background-color: #e8eee3; }

  .app-container {
    width: min(100%, 900px);
    max-width: 900px;
    border-inline: 1px solid rgba(52, 79, 56, .13);
  }

  .reveal-section:not(.hero-section):not(#hero):not(#timeline) {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .red-card,
  .reception-card,
  .countdown-card,
  .dresscode-card,
  .story-banner,
  .venue-card,
  .map-embed-wrapper,
  #venue .map-embed-wrapper {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Timeline ảnh nền: ngang hết thiệp (900px) */
  #timeline,
  #timeline.reveal-section {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto;
    margin-right: auto;
  }

  .timeline-card,
  .timeline-card.has-custom-bg {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto;
    margin-right: auto;
  }

  .guestbook-card {
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .wishes-list {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #venue,
  #venue.reveal-section,
  #gift,
  footer {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #gift .gift-envelope-box {
    width: 215px !important;
    max-width: 215px !important;
  }

  .hero-section,
  .hero-section.reveal-section,
  #hero {
    width: 100% !important;
    max-width: 900px !important;
    height: clamp(900px, 100svh, 1200px);
    min-height: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-title-box {
    padding: 0 24px clamp(54px, 8.5vh, 96px);
  }
  .hero-kicker { margin-bottom: clamp(12px, 1.8vh, 18px) !important; }
  .hero-kicker::before { font-size: clamp(.95rem, 1.5vw, 1.25rem); }
  .hero-names { font-size: clamp(3.5rem, 5.5vw, 4.8rem); margin-bottom: clamp(14px, 2vh, 22px) !important; }
  .hero-date { font-size: clamp(1rem, 1.5vw, 1.28rem); margin-bottom: clamp(14px, 2vh, 22px) !important; letter-spacing: .3em; text-indent: .3em; }
  .hero-invite-guest { font-size: calc(clamp(1.35rem, 2vw, 1.8rem) - 2px); }
.card-flower-lotus-wrap { display: none !important; }
}



/* ========================================================
   BURST EFFECT: Mini Green 囍 (Double Happiness) Particles
   ======================================================== */
.xi-burst-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}

.xi-burst-aura {
  position: absolute;
  width: 160px;
  height: 160px;
  margin-left: -80px;
  margin-top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 137, 101, 0.55) 0%, rgba(60, 89, 61, 0.28) 45%, rgba(203, 178, 106, 0) 70%);
  animation: xi-aura-expand 1.3s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
  pointer-events: none;
}

@keyframes xi-aura-expand {
  0% {
    transform: scale(0.2);
    opacity: 0.95;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

.xi-mini-particle {
  position: absolute;
  left: var(--xi-start-x);
  top: var(--xi-start-y);
  color: var(--xi-color, #3c593d);
  font-family: "Cinzel", "Playfair Display", "Times New Roman", "Microsoft YaHei", "PingFang SC", serif;
  font-weight: 700;
  font-size: var(--xi-font-size, 20px);
  line-height: 1;
  text-shadow: 0 2px 6px rgba(30, 50, 32, 0.35), 0 0 10px rgba(109, 137, 101, 0.45);
  transform: translate(-50%, -50%) scale(0.1) rotate(var(--xi-rot-start, 0deg));
  opacity: 0;
  animation: xi-particle-burst var(--xi-duration, 1.8s) cubic-bezier(0.16, 1, 0.3, 1) var(--xi-delay, 0s) forwards;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes xi-particle-burst {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.2) rotate(var(--xi-rot-start, 0deg));
    opacity: 0;
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--xi-end-x) * 0.28), calc(var(--xi-end-y) * 0.28)) scale(1.28) rotate(calc(var(--xi-rot-start) + 25deg));
  }
  35% {
    opacity: 0.95;
    transform: translate(-50%, -50%) translate(calc(var(--xi-end-x) * 0.65), calc(var(--xi-end-y) * 0.65)) scale(1.08) rotate(calc(var(--xi-rot-start) + 60deg));
  }
  75% {
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--xi-end-x), var(--xi-end-y)) scale(0.85) rotate(var(--xi-rot-end, 180deg));
    opacity: 0;
  }
}

.xi-sparkle-particle {
  position: absolute;
  left: var(--sp-start-x);
  top: var(--sp-start-y);
  width: var(--sp-size, 4px);
  height: var(--sp-size, 4px);
  border-radius: 50%;
  background-color: var(--sp-color, #dcc47a);
  box-shadow: 0 0 8px var(--sp-color, #dcc47a);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: xi-sparkle-burst var(--sp-duration, 1.4s) cubic-bezier(0.16, 1, 0.3, 1) var(--sp-delay, 0s) forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes xi-sparkle-burst {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.2);
    opacity: 0;
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--sp-end-x) * 0.35), calc(var(--sp-end-y) * 0.35)) scale(1.35);
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--sp-end-x), var(--sp-end-y)) scale(0);
    opacity: 0;
  }
}

/* ========================================================
   SECTION: LỜI TỰ BẠCH (LỜI CHIA SẺ) & CHÂN DUNG CÔ DÂU CHÚ RỂ
   ======================================================== */
#loi-chia-se {
  padding: 28px 20px 16px;
  margin-top: 12px;
  position: relative;
  z-index: 10;
}

.story-message-card {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 8px 16px 4px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  text-align: center;
}

.story-card-inner {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
}

.story-badge-wrap,
.story-deco-divider {
  display: none !important;
}

.story-message-body {
  font-family: 'EB Garamond', 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic !important;
  font-weight: 400;
  font-size: clamp(0.98rem, 2.4vw, 1.08rem);
  line-height: 1.88;
  color: #32442e;
  letter-spacing: 0.15px;
  margin: 0 auto;
  max-width: 580px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.story-message-body .story-paragraph {
  font-family: inherit;
  font-style: italic !important;
  font-weight: 400;
  margin: 0 0 10px 0;
}

.story-message-body .story-paragraph:last-child {
  margin-bottom: 0;
}

html[lang="zh"] .story-message-body,
body.lang-zh .story-message-body,
html[lang="zh"] .story-message-body .story-paragraph,
body.lang-zh .story-message-body .story-paragraph {
  font-style: normal !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
}

/* Couple Portraits ------------------------------------------------ */
#couple-portraits {
  padding: 6px 20px 34px;
  position: relative;
  z-index: 10;
}

.couple-portraits-wrapper {
  width: min(100%, 780px);
  margin: 0 auto;
}

.couple-portraits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 3.2vw, 24px);
  align-items: start;
}

.portrait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.portrait-frame {
  width: 100%;
  box-sizing: border-box;
  background: #fffdf8;
  padding: clamp(3px, 0.8vw, 5px);
  padding-bottom: clamp(5px, 1.2vw, 7px);
  border-radius: clamp(10px, 1.8vw, 15px);
  border: 1px solid rgba(159, 130, 64, 0.25);
  box-shadow: 0 14px 32px rgba(40, 62, 43, 0.09);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  flex: 0 0 auto;
}

.portrait-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(40, 62, 43, 0.14);
}

.portrait-frame-inner {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: clamp(7px, 1.4vw, 11px);
  overflow: hidden;
  background-color: #e5ede0;
  display: block;
  position: relative;
}

.portrait-frame-inner img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portrait-frame:hover .portrait-frame-inner img {
  transform: scale(1.04);
}

.portrait-info {
  margin-top: clamp(22px, 4.5vw, 32px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.portrait-role {
  font-family: var(--font-title), 'Montserrat', sans-serif;
  font-size: clamp(0.72rem, 1.6vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5c7358;
  line-height: 1.2;
  margin: 0 0 clamp(6px, 1.4vw, 10px) 0;
}

.portrait-name {
  font-family: "Alex Brush", "Pattaya", cursive;
  font-size: clamp(1.95rem, 6.2vw, 2.65rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: #243822;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #loi-chia-se {
    padding: 24px 14px 12px;
    margin-top: 10px;
  }
  .story-message-card {
    padding: 6px 12px 2px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  #couple-portraits {
    padding: 4px 14px 26px;
  }
  .couple-portraits-grid {
    gap: 12px;
  }
  .portrait-info {
    margin-top: 22px;
  }
  .portrait-role {
    margin-bottom: 6px;
  }
  .portrait-name {
    font-size: clamp(1.85rem, 7.5vw, 2.35rem);
  }
}

/* ========================================================
   SECTION: HÀNH TRÌNH YÊU THƯƠNG (LOVE JOURNEY)
   Desktop: sole / alternating | Mobile: ảnh → title → nội dung → ngày
   ======================================================== */
#love-journey {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 28px;
  padding: 18px 18px 36px;
}

#love-journey[hidden] {
  display: none !important;
}

.love-journey-header {
  text-align: center;
  margin: 0 0 28px;
}

.love-journey-header h2 {
  margin: 0;
  color: #304b35;
  font-family: 'Playfair Display', 'Lora', Georgia, serif;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}

.love-journey-header p {
  display: block !important;
  margin: 6px auto 0;
  color: #63775f;
  font-family: 'Lora', Georgia, serif !important;
  font-style: normal !important;
  font-size: clamp(0.92rem, 2.1vw, 1.05rem);
  line-height: 1.5;
  max-width: 480px;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}

html[lang="zh"] .love-journey-header p,
body.lang-zh .love-journey-header p {
  font-style: normal !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
}

/* ========================================================
   HÀNH TRÌNH YÊU THƯƠNG (LOVE JOURNEY TIMELINE)
   Mobile: Bố cục 2 cột gọn gàng, đường chỉ vàng sang trọng, mở rộng width
   Desktop (>=768px): Bố cục so le xen kẽ (zic-zac) với đường chỉ vàng & auto ảnh dọc/ngang
   ======================================================== */
.love-journey-timeline {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 8px 4px 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.love-journey-spine {
  display: none;
}

/* Mobile Item: Bố cục 2 cột gọn gàng, tận dụng tối đa không gian ngang */
.love-journey-item {
  display: grid;
  grid-template-columns: clamp(100px, 31vw, 140px) 22px minmax(0, 1fr);
  align-items: flex-start;
  gap: 0;
  position: relative;
  width: 100%;
}

/* Ảnh thumbnail kỷ niệm: tự động chuyển dọc hoặc ngang theo tỷ lệ ảnh gốc không cắt */
.love-journey-media {
  position: relative;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f4ee;
  border: 1.5px solid rgba(193, 160, 92, 0.45);
  box-shadow: 0 4px 14px rgba(40, 62, 43, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: opacity 5s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 5s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.35s ease, border-color 0.35s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.love-journey-media:hover,
.love-journey-media:focus-visible {
  transform: translateY(-2px) scale(1.02);
  border-color: #b89855;
  box-shadow: 0 8px 22px rgba(40, 62, 43, 0.16), 0 0 12px rgba(184, 152, 85, 0.35);
  outline: none;
}

.love-journey-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.love-journey-media:hover img {
  transform: scale(1.04);
}

.love-journey-media--empty {
  display: none;
}

.love-journey-zoom-hint {
  display: none !important;
}

/* Đường chỉ vàng kim sang trọng thay cho nét đen/xám thẳng */
.love-journey-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding-top: 6px;
}

.love-journey-axis::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -34px;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(193, 160, 92, 0.3) 0%,
    rgba(193, 160, 92, 0.85) 15%,
    rgba(193, 160, 92, 0.85) 85%,
    rgba(193, 160, 92, 0.3) 100%
  );
  z-index: 1;
}

.love-journey-item:last-child .love-journey-axis::before {
  bottom: 8px;
  background: linear-gradient(
    to bottom,
    rgba(193, 160, 92, 0.85) 0%,
    rgba(193, 160, 92, 0.3) 60%,
    transparent 100%
  );
}

/* Điểm ngọc viền vàng sang trọng */
.love-journey-dot {
  position: relative;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #b89855;
  box-shadow: 0 0 0 3px rgba(184, 152, 85, 0.2), 0 2px 5px rgba(40, 62, 43, 0.12);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.love-journey-item:hover .love-journey-dot {
  transform: scale(1.25);
  background: #b89855;
  box-shadow: 0 0 0 4px rgba(184, 152, 85, 0.3), 0 0 10px rgba(184, 152, 85, 0.6);
}

/* Cột nội dung trên mobile: Ngày -> Tiêu đề -> Lời dẫn */
.love-journey-copy {
  display: flex;
  flex-direction: column;
  padding: 0 0 4px 14px;
  text-align: left;
}

.love-journey-date {
  order: 1;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.65rem, 1.8vw, 0.72rem);
  font-weight: 700;
  color: #856420;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
  line-height: 1.3;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}

.love-journey-title {
  order: 2;
  margin: 0 0 8px;
  color: #304b35;
  font-family: 'Playfair Display', 'Lora', Georgia, serif !important;
  font-size: clamp(0.85rem, 2.4vw, 0.96rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

.love-journey-bubble,
.love-journey-content {
  order: 3;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.love-journey-bubble p,
.love-journey-content p {
  margin: 0;
  color: #63775f;
  font-family: 'Lora', 'EB Garamond', Georgia, serif;
  font-size: clamp(0.78rem, 2.1vw, 0.85rem);
  font-weight: 500;
  line-height: 1.58;
  word-break: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}

/* ========================================================
   Desktop / Web: Bố cục zic-zac đối xứng xen kẽ với đường chỉ vàng, auto ảnh dọc/ngang & text như mobile
   ======================================================== */
@media (min-width: 768px) {
  #love-journey {
    padding: 28px 28px 56px;
    max-width: 920px;
  }

  .love-journey-header {
    margin-bottom: 40px;
    padding: 0;
  }

  .love-journey-timeline {
    max-width: 860px;
    padding: 28px 0 24px;
    gap: 0;
  }

  /* Đường chỉ vàng kim sang trọng dọc trục giữa thay cho nét gạch đứt xám */
  .love-journey-spine {
    display: block;
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 50%;
    width: 2px;
    border: none !important;
    background: linear-gradient(
      to bottom,
      rgba(193, 160, 92, 0.25) 0%,
      rgba(193, 160, 92, 0.9) 15%,
      rgba(193, 160, 92, 0.9) 85%,
      rgba(193, 160, 92, 0.25) 100%
    );
    transform: translateX(-50%);
    z-index: 0;
  }

  .love-journey-heart {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    color: #b89855;
    font-size: 1.1rem;
    line-height: 1;
    background: transparent;
    padding: 0 4px;
  }

  .love-journey-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: flex-start;
    gap: 0;
    margin: 0 0 60px;
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
  }

  .love-journey-item:last-child {
    margin-bottom: 0;
  }

  .love-journey-axis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    padding-top: 2px;
    width: 100%;
    align-self: flex-start;
    position: relative;
    z-index: 2;
  }

  .love-journey-axis::before {
    display: none;
  }

  /* Điểm ngọc viền vàng sang trọng dóng thẳng hàng với dòng Ngày tháng */
  .love-journey-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #b89855;
    box-shadow: 0 0 0 3px rgba(184, 152, 85, 0.25), 0 2px 6px rgba(40, 62, 43, 0.12);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
  }

  .love-journey-item:hover .love-journey-dot {
    transform: scale(1.3);
    background: #b89855;
    box-shadow: 0 0 0 4px rgba(184, 152, 85, 0.35), 0 0 12px rgba(184, 152, 85, 0.6);
  }

  /* Ảnh thumbnail trên web: Giữ 100% tỉ lệ ảnh gốc (dọc/ngang), nằm gọn trong cột không bao giờ tràn qua trục giữa */
  .love-journey-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: min(100%, 340px);
    box-sizing: border-box;
    margin: 0;
    align-self: flex-start;
    border-radius: 12px;
    overflow: hidden;
    background: #f7f4ee;
    border: 1.5px solid rgba(193, 160, 92, 0.45);
    box-shadow: 0 6px 20px rgba(40, 62, 43, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: opacity 5s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 5s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)),
                box-shadow 0.35s ease, border-color 0.35s ease;
    padding: 0;
  }

  .love-journey-media:hover,
  .love-journey-media:focus-visible {
    transform: translateY(-3px) scale(1.02);
    border-color: #b89855;
    box-shadow: 0 12px 28px rgba(40, 62, 43, 0.18), 0 0 14px rgba(184, 152, 85, 0.4);
    outline: none;
  }

  .love-journey-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    border-radius: 10px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .love-journey-media:hover img {
    transform: scale(1.04);
  }

  .love-journey-media--empty {
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Cột nội dung text trên web: Ngày -> Tiêu đề -> Lời dẫn (không bubble chat) */
  .love-journey-copy {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    align-self: flex-start;
  }

  .love-journey-date {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.68rem, 0.85vw, 0.76rem);
    font-weight: 700;
    color: #856420;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 7px;
    line-height: 1.3;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1;
  }

  .love-journey-title {
    margin: 0 0 10px;
    color: #304b35;
    font-family: 'Playfair Display', 'Lora', Georgia, serif !important;
    font-size: clamp(0.92rem, 1.1vw, 1.02rem);
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1, "pnum" 1;
  }

  .love-journey-bubble,
  .love-journey-content {
    display: block;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .love-journey-bubble::before,
  .love-journey-bubble::after {
    display: none !important;
    content: none !important;
  }

  .love-journey-bubble p,
  .love-journey-content p {
    margin: 0;
    color: #63775f;
    font-family: 'Lora', 'EB Garamond', Georgia, serif;
    font-size: clamp(0.82rem, 0.95vw, 0.89rem);
    font-weight: 500;
    line-height: 1.62;
    word-break: break-word;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: "lnum" 1;
  }

  /* Thứ tự hiển thị: Ngày (1) -> Tiêu đề (2) -> Lời dẫn (3) */
  .love-journey-copy .love-journey-date { order: 1; }
  .love-journey-copy .love-journey-title { order: 2; }
  .love-journey-copy .love-journey-bubble { order: 3; }

  /* Cột mốc lẻ (Odd): Ảnh bên trái (căn phải sát trục) — Trục giữa — Chữ bên phải (căn trái) */
  .love-journey-item--left .love-journey-media {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    margin-left: auto;
    margin-right: 18px;
    max-width: min(100%, 340px);
  }

  .love-journey-item--left .love-journey-copy {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    width: 100%;
    text-align: left;
    align-items: flex-start;
    padding-left: 18px;
    padding-right: 0;
  }

  .love-journey-item--left .love-journey-date {
    align-self: flex-start;
    text-align: left;
  }

  .love-journey-item--left .love-journey-title,
  .love-journey-item--left .love-journey-bubble,
  .love-journey-item--left .love-journey-bubble p {
    text-align: left;
  }

  /* Cột mốc chẵn (Even): Chữ bên trái (căn phải sát trục) — Trục giữa — Ảnh bên phải (căn trái sát trục) */
  .love-journey-item--right .love-journey-copy {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    text-align: right;
    align-items: flex-end;
    padding-right: 18px;
    padding-left: 0;
  }

  .love-journey-item--right .love-journey-media {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    margin-left: 18px;
    margin-right: auto;
    max-width: min(100%, 340px);
  }

  .love-journey-item--right .love-journey-date {
    align-self: flex-end;
    text-align: right;
  }

  .love-journey-item--right .love-journey-title,
  .love-journey-item--right .love-journey-bubble,
  .love-journey-item--right .love-journey-bubble p {
    text-align: right;
  }
}



/* Ceremony address + direction button: nằm riêng dòng, căn giữa */
.ceremony-address {
  display: block;
  font-size: .9rem !important;
  margin: 4px auto 12px !important;
  font-family: "Playfair Display", "Cormorant Garamond", "Lora", Georgia, "Times New Roman", serif !important;
  font-style: normal !important;
}
.ceremony-direction-btn { display: flex !important; width: fit-content; margin: 0 auto 20px !important; }
.ceremony-address[hidden],
.ceremony-direction-btn[hidden] { display: none !important; }

/* Hover giống nút Xác nhận: nền xanh đậm hơn, chữ trắng */
.red-card .ceremony-direction-btn:hover,
.red-card a.ceremony-direction-btn:hover {
  background: #2b3924 !important;
  background-color: #2b3924 !important;
  border-color: rgba(212, 197, 151, 0.55) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

.red-card .ceremony-direction-btn:hover *,
.red-card a.ceremony-direction-btn:hover * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}