/* ======================================================================
   RED WEDDING DESIGN — visual override only
   Keeps the existing API renderer, modules, forms, modals and effects.
   ====================================================================== */

:root {
  /* Palette đỏ trầm – kem – vàng đồng cổ điển theo chuẩn */
  --red-dark: #4B0F09;
  --red-main: #53100A;
  --red-light: #60140D;
  --red-sub: #6B1D15;
  --red-primary: #53100A;
  --red-soft: #60140D;
  --red-card: #6B1D15;
  --red-card-inner: #4B0F09;

  --cream: #FFFFFF;
  --cream-text: #FFFFFF;
  --cream-button: #FBE6D0;
  --cream-sub: rgba(255, 255, 255, .92);

  --gold: #F3CA68;
  --gold-light: #FBE28E;
  --gold-dark: #DDB24A;
  --gold-bright: #FFF0B8;
  --text-red: #53100A;

  /* Nền 2 bên ngoài thiệp — đậm như cũ */
  --outer-dark: #2A0806;

  --paper-bg: #4B0F09;
  --paper-card: #53100A;
  --ink: #FFFFFF;
  --muted: rgba(255, 255, 255, .78);
  --border-red: rgba(243, 202, 104, .24);
  --border-gold: rgba(251, 226, 142, .5);
  --shadow-card: 0 12px 36px rgba(75, 15, 9, .3);
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-title: "Cormorant Garamond", Georgia, serif;
  --font-script: "Pinyon Script", "Alex Brush", cursive;
  --font-body: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Montserrat", "Segoe UI", Arial, sans-serif;
}

html {
  background: var(--outer-dark) !important;
  scrollbar-color: var(--red-light) var(--outer-dark);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

body {
  color: var(--cream-text) !important;
  background: var(--outer-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--outer-dark) !important;
}

/* ---------- Single continuous invitation column ---------- */
.app-container {
  display: flex !important;
  flex-direction: column;
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 0 30px 52px !important;
  overflow: hidden;
  border-inline: 0 !important;
  color: var(--cream-text);
  /* Gradient cố định theo viewport chuẩn đỏ trầm */
  background:
    radial-gradient(
      circle at 50% 35%,
      #6B1D15 0%,
      #53100A 48%,
      #4B0F09 100%
    ) !important;
  background-attachment: fixed !important;
  box-shadow: none !important;
}

.app-container::before { display: none !important; }

.ornate-border {
  position: absolute;
  inset: 22px;
  z-index: 100;
  pointer-events: none;
  border: 1px solid var(--gold-light);
}

.ornate-border::before {
  content: none;
}

.ornate-border::after {
  content: none;
}

.app-container > .reveal-section,
.app-container > footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 0 !important;
}

#hero { order: 1; }
#loi-chia-se { order: 2; }
#couple-portraits { order: 3; }
#love-journey { order: 4; }
#wedding-info { order: 5; }
#gallery { order: 6; }
#reception {
  order: 7;
  width: 100% !important;
  max-width: 560px !important;
  margin-inline: auto !important;
}
#reception.reveal-section {
  max-width: 560px !important;
  margin-inline: auto !important;
}
#venue { order: 8; }
#reception-bride { order: 9; }
#countdown { order: 10; }
#timeline { order: 11; }
#guestbook { order: 13; }
#gift { order: 14; }
.app-container > footer { order: 15; }

.app-container > .reveal-section:not(#hero)::before {
  content: "";
  display: block;
  width: 150px;
  height: 1px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, rgba(251, 226, 142, .65), transparent);
}

/* Khít gap gallery → tiệc → đếm ngược → lịch trình */
#gallery.reveal-section,
#reception.reveal-section,
#countdown.reveal-section,
#timeline.reveal-section {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
#gallery.reveal-section::before,
#reception.reveal-section::before,
#countdown.reveal-section::before,
#timeline.reveal-section::before {
  margin-bottom: 10px !important;
}

.xi-bg-watermark-layer { opacity: .8 !important; }
.xi-watermark { filter: sepia(1) saturate(.8) !important; opacity: .045 !important; }
.falling-xi-item span { color: var(--gold-light) !important; text-shadow: 0 0 7px rgba(251, 226, 142, .35) !important; }

/* ---------- Shared typography ---------- */
.section-header h2,
.card-heading,
.venue-heading,
.guestbook-heading,
.gift-heading,
.dresscode-heading,
.reception-header h3,
.gift-modal-title {
  color: var(--gold-light) !important;
  font-family: var(--font-title) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase;
  text-shadow: none !important;
}
/* Lịch trình ngày cưới — đồng bộ màu vàng sáng cho tiêu đề danh mục */
.timeline-heading,
#timeline .timeline-heading,
#timeline .card-heading.timeline-heading {
  color: var(--gold-light) !important;
}

.section-header p,
.reception-lead,
.countdown-subtitle,
.dresscode-subtitle,
.dresscode-note,
.announcement-text,
.gift-thankyou-text,
.footer-thankyou {
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: .98rem !important;
  font-style: italic;
  line-height: 1.3 !important;
}

.section-header { margin-bottom: 21px !important; text-align: center; }

/* ---------- Two-door opening cover (kéo 2 cánh như thiệp 9) ---------- */
:root {
  --cover-door-duration: 2.8s;
  --cover-fade-duration: 3.1s;
}

/* 2 bên ngoài = đỏ đậm như lề thiệp; cột bìa max 900px như app-container */
.envelope-screen {
  z-index: 9999 !important;
  display: block !important;
  overflow: hidden !important;
  perspective: none !important;
  background: var(--outer-dark) !important;
  transition: opacity .45s ease, visibility 0s linear .45s !important;
}

.envelope-screen::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: min(900px, 100vw) !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: translateX(-50%) !important;
  background:
    radial-gradient(
      circle at 50% 35%,
      #58130C 0%,
      #430A06 48%,
      #340604 100%
    ) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Tắt orb blur ::after của green-theme */
.envelope-screen::after {
  content: none !important;
  display: none !important;
  filter: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* 2 nền ngoài — z-index cao hơn cánh → cánh chạy bên dưới mép */
.envelope-side-mask {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 20 !important;
  width: max(0px, calc((100vw - min(900px, 100vw)) / 2)) !important;
  background: var(--outer-dark) !important;
  pointer-events: none !important;
}
.envelope-side-mask--left { left: 0 !important; }
.envelope-side-mask--right { right: 0 !important; }

/* Khung cánh: chỉ chạy trong cột 900px, cắt ở 2 mép ngoài */
.invite-doors-stage {
  position: absolute !important;
  z-index: 8 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: min(900px, 100vw) !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* 1 đường mảnh đều giữa 2 cánh - ngắt đoạn không cắt qua con dấu ở giữa */
.invite-door-seam {
  position: absolute !important;
  z-index: 6 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  background: rgba(210, 164, 119, .75) !important;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 80px, black 82px) !important;
  mask-image: radial-gradient(circle at 50% 50%, transparent 80px, black 82px) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.invite-door {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  padding: 0;
  overflow: visible !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  backface-visibility: hidden;
  transform: translateX(0);
  transform-style: flat;
  cursor: pointer;
  pointer-events: auto;
  background-color: #340604;
  background-image:
    radial-gradient(
      circle at 50% 35%,
      #58130C 0%,
      #430A06 48%,
      #340604 100%
    );
  background-size: min(900px, 100vw) 100%;
  background-repeat: no-repeat;
  transition: transform var(--cover-door-duration) cubic-bezier(.4, 0, .2, 1),
              box-shadow var(--cover-door-duration) ease;
  will-change: transform;
}

.invite-door::before,
.invite-door::after { display: none !important; content: none !important; }

.invite-door-left {
  z-index: 10 !important;
  right: 50%;
  margin-right: 0;
  transform-origin: center center;
  background-position: left center;
}
.invite-door-right {
  z-index: 2 !important;
  left: 50%;
  margin-left: 0;
  transform-origin: center center;
  background-position: right center;
}
/* Khung viền line vàng 4 góc hoa văn vuông trên 2 cánh thiệp */
:root {
  --door-frame-inset: 16px;
  --door-corner-size: 36px;
}
@media (min-width: 601px) {
  :root {
    --door-frame-inset: 22px;
    --door-corner-size: 36px;
  }
}

.door-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  color: rgba(210, 164, 119, 0.85);
}

.door-frame-line {
  position: absolute;
  background: rgba(210, 164, 119, 0.75);
  pointer-events: none;
}

/* Cánh trái */
.door-frame-left .door-frame-top {
  top: var(--door-frame-inset);
  left: calc(var(--door-frame-inset) + var(--door-corner-size));
  right: 0;
  height: 1px;
}
.door-frame-left .door-frame-side {
  left: var(--door-frame-inset);
  top: calc(var(--door-frame-inset) + var(--door-corner-size));
  bottom: calc(var(--door-frame-inset) + var(--door-corner-size));
  width: 1px;
}
.door-frame-left .door-frame-bottom {
  bottom: var(--door-frame-inset);
  left: calc(var(--door-frame-inset) + var(--door-corner-size));
  right: 0;
  height: 1px;
}
.door-frame-left .door-corner-tl {
  top: var(--door-frame-inset);
  left: var(--door-frame-inset);
}
.door-frame-left .door-corner-bl {
  bottom: var(--door-frame-inset);
  left: var(--door-frame-inset);
}

/* Cánh phải */
.door-frame-right .door-frame-top {
  top: var(--door-frame-inset);
  left: 0;
  right: calc(var(--door-frame-inset) + var(--door-corner-size));
  height: 1px;
}
.door-frame-right .door-frame-side {
  right: var(--door-frame-inset);
  top: calc(var(--door-frame-inset) + var(--door-corner-size));
  bottom: calc(var(--door-frame-inset) + var(--door-corner-size));
  width: 1px;
}
.door-frame-right .door-frame-bottom {
  bottom: var(--door-frame-inset);
  left: 0;
  right: calc(var(--door-frame-inset) + var(--door-corner-size));
  height: 1px;
}
.door-frame-right .door-corner-tr {
  top: var(--door-frame-inset);
  right: var(--door-frame-inset);
}
.door-frame-right .door-corner-br {
  bottom: var(--door-frame-inset);
  right: var(--door-frame-inset);
}

.door-corner {
  position: absolute;
  width: var(--door-corner-size);
  height: var(--door-corner-size);
  pointer-events: none;
}

/* Cành hoa góc trái dưới: mobile dịch ra ngoài góc, web/desktop lùi ra phải thanh thoát */
.invite-door-flower {
  position: absolute;
  z-index: 5;
  top: auto;
  right: auto;
  bottom: -7%;
  left: -11%;
  width: 148%;
  max-width: none;
  transform: rotate(-35deg);
  transform-origin: left bottom;
  opacity: .9;
  pointer-events: none;
}

/* Cành hoa góc phải trên: mobile dịch ra ngoài góc và desktop */
.invite-door-flower-top {
  position: absolute;
  z-index: 5;
  top: -3%;
  right: -22%;
  left: auto;
  bottom: auto;
  width: 118%;
  max-width: none;
  transform: rotate(6deg);
  transform-origin: right top;
  opacity: .92;
  pointer-events: none;
}

@media (min-width: 601px) {
  .invite-door-flower {
    bottom: -6%;
    left: 2%;
    width: 105%;
    transform: rotate(-32deg);
  }
  .invite-door-flower-top {
    top: -2.5%;
    right: -5%;
    width: 95%;
    transform: rotate(5deg);
  }
}

.invite-door-xi,
.invite-door-xi-left,
.invite-door-xi-right { display: none !important; }

.envelope-seal,
.invite-door-left .envelope-seal,
.envelope-screen .envelope-seal {
  position: absolute !important;
  z-index: 22 !important;
  right: 0 !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 210px !important;
  height: 210px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translate(50%, -50%) !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  outline: none !important;
  pointer-events: auto !important;
  transition: transform .25s ease !important;
  animation: none !important;
}
.envelope-seal:hover,
.invite-door-left .envelope-seal:hover,
.envelope-screen .envelope-seal:hover {
  transform: translate(50%, -50%) scale(1.04) !important;
}
.envelope-seal::before,
.envelope-seal::after,
.invite-door-left .envelope-seal::before,
.invite-door-left .envelope-seal::after,
.envelope-screen .envelope-seal::before,
.envelope-screen .envelope-seal::after {
  display: none !important;
  content: none !important;
}
.envelope-seal img,
.invite-door-left .envelope-seal img,
.envelope-screen .envelope-seal img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)) !important;
  pointer-events: none !important;
}

/* Ẩn card kem cũ — gây bóng trắng lúc 2 cánh kéo ra */
.envelope-box,
.envelope-card,
.envelope-cover-copy,
.envelope-emblem,
body.invite-opening .envelope-box,
body.invite-opening .envelope-card {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.envelope-card::after { display: none !important; }
.envelope-emblem { width: 92px !important; margin: 0 auto 30px !important; opacity: .86; }
.envelope-cover-copy { padding: 0 !important; text-align: center; }
.envelope-names { color: var(--text-red) !important; }
.envelope-name-line { font-family: var(--font-title) !important; font-size: 2.6rem !important; font-weight: 500 !important; line-height: .95 !important; }
.envelope-name-amp { color: var(--gold) !important; font-family: var(--font-serif) !important; }
.envelope-date { color: var(--text-red) !important; font-family: var(--font-serif) !important; font-size: 1.15rem !important; }
.envelope-invite-text { color: var(--text-red) !important; }
.envelope-divider .line { background: var(--gold) !important; }
.envelope-divider .ornament { color: var(--gold) !important; }
.btn-open { color: var(--text-red) !important; background: var(--cream-button) !important; border: 1px solid var(--gold) !important; border-radius: 999px !important; }
.envelope-corner-xi { display: none !important; }

/* Giữ màn bìa trong lúc 2 cánh kéo — không fade sớm như envelope.css */
body.invite-opening .envelope-screen {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  transition: none !important;
}
body.invite-opening .envelope-screen::before {
  opacity: 0 !important;
  transition: opacity .55s ease !important;
}
body.invite-opening .envelope-screen::after {
  opacity: 0 !important;
  transition: opacity .35s ease !important;
}
body.invite-opening .invite-door-seam {
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}
/* Giữ 2 nền ngoài phủ lên cánh khi đang mở — cùng đỏ sẫm như lúc đóng */
body.invite-opening .envelope-side-mask {
  z-index: 20 !important;
  background: var(--outer-dark) !important;
  opacity: 1 !important;
}

/* 2 cánh kéo sang 2 bên */
body.invite-opening .invite-door-left {
  transform: translateX(calc(-100% - 130px)) !important;
  box-shadow: 18px 0 42px rgba(25, 0, 0, .28) !important;
}
body.invite-opening .invite-door-right {
  transform: translateX(calc(100% + 130px)) !important;
  box-shadow: -18px 0 42px rgba(25, 0, 0, .28) !important;
}

/* Con dấu gắn liền trên cánh trái nên tự động trượt theo cánh trái êm ái */
body.invite-opening .envelope-seal,
body.invite-opening .invite-door-left .envelope-seal,
body.invite-opening .envelope-screen .envelope-seal {
  z-index: 22 !important;
  opacity: 1 !important;
  transform: translate(50%, -50%) !important;
  pointer-events: none !important;
  transition: none !important;
}
body.invite-opening .envelope-seal::before,
body.invite-opening .envelope-seal::after,
body.invite-opening .invite-door-left .envelope-seal::before,
body.invite-opening .invite-door-left .envelope-seal::after,
body.invite-opening .envelope-screen .envelope-seal::before,
body.invite-opening .envelope-screen .envelope-seal::after {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}
body.invite-opening .ambient-particles {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .25s ease !important;
}

/* Sau khi cánh mở xong mới ẩn hẳn lớp bìa */
body.invite-open .envelope-screen {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .5s ease, visibility 0s linear .5s !important;
}

/* Nội dung bên trong lộ dần khi 2 cánh kéo ra */
body:not(.invite-open):not(.invite-opening) .app-container {
  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}
body.invite-opening .app-container {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: opacity 1.6s ease .25s !important;
}
body.invite-open .app-container {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ---------- Hero cover ---------- */
.hero-section,
.hero-section.reveal-section,
#hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 980px !important;
  height: auto !important;
  padding: 0 0 40px !important;
  color: var(--cream-text) !important;
  background: url("../assets/chuHyHero.webp") center 34px / 190px auto no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.hero-corner-flower {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: -44px;
  width: 340px;
  max-width: none;
  height: auto;
  pointer-events: none;
  transform: rotate(8deg);
  transform-origin: 18% 18%;
}
#hero::before {
  content: "";
  position: absolute;
  right: -130px;
  top: 70px;
  width: 320px;
  height: 320px;
  opacity: .055;
  background: url("../assets/chyHyBack.webp") center / contain no-repeat;
}
#hero::after {
  display: none !important;
  content: none !important;
}
.envelope-stage { display: none !important; }
.hero-title-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  margin-top: 326px !important;
  padding: 0 8px !important;
  color: var(--cream-text) !important;
  text-align: center !important;
  background: transparent !important;
  transform: none !important;
}
/* SAVE THE DATE — neo riêng dưới chữ Hỷ, không đè tên */
#hero > .hero-kicker,
.hero-section > .hero-kicker {
  position: absolute !important;
  top: 242px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  color: var(--gold-light) !important;
  font-family: var(--font-serif) !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  text-align: center !important;
  transform: none !important;
  pointer-events: none;
}
#hero.visible > .hero-kicker,
.hero-section.visible > .hero-kicker,
.visible > .hero-kicker {
  opacity: 1 !important;
  transform: none !important;
}
.hero-kicker::before, .hero-kicker::after { display: none !important; }
.hero-names {
  order: 1 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 0;
  margin: 0 !important;
  color: var(--gold-light) !important;
  font-family: var(--font-script) !important;
  font-size: clamp(3.35rem, 15vw, 4.5rem) !important;
  font-weight: 400 !important;
  line-height: .84 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 3px 14px rgba(40,0,0,.25) !important;
}
.hero-names .hero-person-name {
  display: block;
  width: 100%;
  font: inherit !important;
  line-height: .9 !important;
  text-align: center;
}
.hero-names .amp {
  display: block !important;
  align-self: center !important;
  width: 100%;
  margin: 16px 0 18px !important;
  color: var(--gold-light) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  text-align: center !important;
}
.hero-date {
  order: 2 !important;
  display: inline-flex !important;
  position: relative !important;
  margin: 20px 0 10px !important;
  padding: 0 !important;
  border-top: 0 !important;
  color: var(--cream-text) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-indent: 0 !important;
}
.hero-date::before,
.hero-date::after {
  display: none !important;
  content: none !important;
}
.hero-invite-guest {
  order: 3 !important;
  margin: 0 auto 17px !important;
  color: var(--gold-light) !important;
  font-family: var(--font-script) !important;
  font-size: 1.8rem !important;
}
.hero-quote {
  display: none !important;
}
.hero-chibi-wrap {
  order: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 54px auto 22px !important;
  position: relative !important;
  z-index: 2 !important;
}
.hero-chibi-img {
  display: block !important;
  width: 220px !important;
  max-width: 62vw !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 24px rgba(40, 5, 5, 0.45)) !important;
  pointer-events: none !important;
}
.hero-bottom-slogan {
  order: 5 !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 21px auto 0 !important;
  padding: 0 8px !important;
  height: auto !important;
  background: none !important;
  color: var(--gold-light) !important;
  opacity: .88 !important;
  font-family: var(--font-serif) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .24em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: pre-line !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ---------- Story and couple ---------- */
.story-message-card,
.story-card-inner {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cream-sub) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.story-message-body { color: var(--cream-sub) !important; font-family: var(--font-serif) !important; font-size: 1.03rem !important; font-style: italic; text-align: center; }
.story-message-body::before { content: "❦"; display: block; margin-bottom: 12px; color: var(--gold); font-size: 1.2rem; }

.couple-portraits-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
.portrait-card { padding: 0 !important; border: 1px solid rgba(210, 164, 119,.72) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.portrait-frame, .portrait-frame-inner { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.portrait-frame img { width: 100% !important; aspect-ratio: .76 !important; object-fit: cover !important; }
.portrait-info { padding: 9px 5px 12px !important; }
.portrait-role { color: var(--cream-sub) !important; font-size: .7rem !important; letter-spacing: .12em; text-transform: uppercase; }
.portrait-name { color: var(--gold-light) !important; font-family: var(--font-script) !important; font-size: 1.65rem !important; font-weight: 400 !important; }

/* ---------- Love journey ---------- */
.love-journey-header h2 { color: var(--gold-light) !important; }
.love-journey-timeline { padding: 0 !important; }
.love-journey-spine { background: rgba(251, 226, 142, .42) !important; }
.love-journey-heart, .love-journey-dot { color: var(--gold) !important; background: var(--gold) !important; }
.love-journey-item { gap: 8px !important; }
.love-journey-media { overflow: hidden; border: 1px solid var(--border-gold) !important; border-radius: 8px !important; background: var(--red-dark) !important; }
.love-journey-date { color: var(--gold-light) !important; }
.love-journey-title { color: var(--cream-text) !important; font-family: var(--font-title) !important; font-size: 1.15rem !important; }
.love-journey-bubble { color: var(--cream-sub) !important; border: 1px solid rgba(251, 226, 142, .3) !important; background: rgba(75, 15, 9, .35) !important; box-shadow: none !important; }

/* ---------- Wedding information ---------- */
.red-card,
.reception-card,
.venue-card,
.dresscode-card,
.countdown-card,
.guestbook-card {
  width: 100% !important;
  max-width: none !important;
  padding: 25px 17px !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 11px !important;
  color: var(--cream-text) !important;
  background: rgba(107, 29, 21, .34) !important;
  box-shadow: none !important;
}
.red-card::before, .red-card::after { display: none !important; }
.red-card {
  border: 1px solid rgba(251, 226, 142, .76) !important;
  border-radius: 12px !important;
  background: transparent !important;
}
#wedding-info .card-heading,
#wedding-info .ceremony-time-badge .lunar { color: var(--gold-light) !important; }
.parents-grid { gap: 12px !important; margin: 24px 0 !important; }
.parents-grid::after { background: rgba(251, 226, 142, .3) !important; }
.family-side small { color: var(--cream-sub) !important; font-family: var(--font-title) !important; font-size: .72rem !important; letter-spacing: .1em; }
.family-side h4 { color: var(--cream-text) !important; font-family: var(--font-serif) !important; font-size: .9rem !important; font-weight: 500 !important; line-height: 1.3 !important; }
.family-side p { color: var(--cream-sub) !important; font-size: .78rem !important; }
.announcement-text { margin-top: 26px !important; color: var(--cream-text) !important; }
.couple-highlight-names { margin: 12px 0 20px !important; }
.couple-highlight-names .groom-name,
.couple-highlight-names .bride-name {
  color: var(--gold-light) !important;
  font-family: var(--font-script) !important;
  font-size: clamp(2.7rem, 13vw, 3.65rem) !important;
  font-weight: 400 !important;
  line-height: .84 !important;
}
.couple-highlight-names .amp { color: var(--gold-light) !important; font-family: var(--font-serif) !important; }
.role-badge, .ceremony-note, .ceremony-address { color: var(--cream-sub) !important; font-family: var(--font-serif) !important; }
.ceremony-time-badge { border-color: var(--border-gold) !important; color: var(--cream-text) !important; background: transparent !important; }
.ceremony-time-badge .time, .ceremony-time-badge .date-big { color: var(--cream-text) !important; }
.ceremony-direction-btn,
.venue-direction-btn,
#wedding-info .ceremony-direction-btn,
#wedding-info a.ceremony-direction-btn {
  color: var(--text-red) !important;
  border-color: var(--gold-light) !important;
  background: var(--cream-button) !important;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
#wedding-info .ceremony-direction-btn span,
#wedding-info a.ceremony-direction-btn span,
#wedding-info .ceremony-direction-btn svg,
#wedding-info a.ceremony-direction-btn svg {
  color: var(--text-red) !important;
  stroke: var(--text-red) !important;
  fill: none !important;
}

/* Hover nút chỉ đường trong wedding-info */
#wedding-info .ceremony-direction-btn:hover,
#wedding-info a.ceremony-direction-btn:hover {
  background: var(--cream) !important;
  background-color: var(--cream) !important;
  border-color: var(--gold-light) !important;
  color: var(--text-red) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important;
}
#wedding-info .ceremony-direction-btn:hover *,
#wedding-info a.ceremony-direction-btn:hover * {
  color: var(--text-red) !important;
  stroke: var(--text-red) !important;
  fill: none !important;
}

/* Hover nút Xác nhận tham dự (màu vàng ánh kim sáng) */
#reception #btn-trigger-rsvp:hover,
#reception .btn-cream-solid:hover {
  background: linear-gradient(135deg, #FFF0B8 0%, #FBE28E 50%, #F3CA68 100%) !important;
  background-color: var(--gold-light) !important;
  border-color: var(--gold-bright) !important;
  color: var(--text-red) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(221, 178, 74, .45) !important;
}
#reception #btn-trigger-rsvp:hover span,
#reception .btn-cream-solid:hover span {
  color: var(--text-red) !important;
  stroke: var(--text-red) !important;
  fill: none !important;
}

/* ---------- Wedding info card: invitation layout ---------- */
#wedding-info .red-card {
  position: relative !important;
  overflow: visible !important;
  border-radius: 3px !important;
  padding-top: 30px !important;
  padding-bottom: 34px !important;
  min-height: 0 !important;
}

/* Cành hoa góc trái dưới thiệp mời — mobile ẩn, web hiển thị */
#wedding-info .invite-card-flower-bl {
  display: none !important;
}
@media (min-width: 768px) {
  #wedding-info .invite-card-flower-bl {
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    left: -72px !important;
    bottom: 20px !important;
    width: 360px !important;
    height: auto !important;
    max-width: none !important;
    opacity: .95 !important;
    transform: rotate(-22deg) !important;
    transform-origin: left bottom !important;
    pointer-events: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3));
  }
}

#wedding-info .card-corner {
  position: absolute !important;
  z-index: 2 !important;
  width: 20px;
  height: 20px;
  pointer-events: none;
  border: 0 solid rgba(251, 226, 142, .85);
}
#wedding-info .card-corner-tl { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; }
#wedding-info .card-corner-tr { top: 7px; right: 7px; border-top-width: 1px; border-right-width: 1px; }
#wedding-info .card-corner-bl { bottom: 7px; left: 7px; border-bottom-width: 1px; border-left-width: 1px; }
#wedding-info .card-corner-br { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; }

#wedding-info .card-emblem,
#wedding-info .card-heading,
#wedding-info .parents-grid,
#wedding-info .announcement-text,
#wedding-info .couple-highlight-names,
#wedding-info .ceremony-time-badge,
#wedding-info .ceremony-note,
#wedding-info .ceremony-direction-btn,
#wedding-info .card-closing {
  position: relative !important;
  z-index: 2 !important;
}
#wedding-info .card-emblem { display: flex; justify-content: center; margin: 0 auto 14px; }
#wedding-info .card-emblem img {
  width: 64px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(30, 0, 0, .35));
}
#wedding-info .card-heading { margin-bottom: 4px !important; }
#wedding-info .card-heading::after { display: none !important; }

#wedding-info .announcement-text {
  font-family: var(--font-title) !important;
  font-style: normal;
  font-size: .8rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
#wedding-info .role-badge {
  font-family: var(--font-serif) !important;
  font-size: .95rem !important;
  font-style: italic;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

/* Time + date in two columns split by a thin vertical rule */
#wedding-info .ceremony-time-badge {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 340px;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  row-gap: 12px;
}
#wedding-info .ceremony-time-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
}
#wedding-info .ceremony-time-col:first-child { border-right: 1px solid var(--border-gold); }
#wedding-info .ceremony-time-col small {
  min-height: 1em;
  color: var(--cream-sub);
  font-family: var(--font-title);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#wedding-info .ceremony-time-badge .time,
#wedding-info .ceremony-time-badge .date-big {
  margin: 0 !important;
  color: var(--cream-text) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.55rem !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  line-height: 1.15;
  text-transform: none !important;
  white-space: nowrap;
}
#wedding-info .ceremony-time-badge .lunar {
  grid-column: 1 / -1;
  margin: 0 !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: .92rem !important;
  font-style: italic !important;
}

#wedding-info .card-closing { display: flex; flex-direction: column; align-items: center; margin-top: 22px; }
#wedding-info .ceremony-note { margin-top: 26px !important; }
#wedding-info .ceremony-direction-btn { margin-bottom: 4px; }
#wedding-info .card-closing-divider {
  display: block;
  width: 118px;
  height: 7px;
  background:
    linear-gradient(rgba(251, 226, 142,.72), rgba(251, 226, 142,.72)) left center / 42px 1px no-repeat,
    linear-gradient(rgba(251, 226, 142,.72), rgba(251, 226, 142,.72)) right center / 42px 1px no-repeat,
    radial-gradient(circle, var(--gold-light) 0 2px, transparent 2.5px) center / 7px 7px no-repeat;
}
#wedding-info .card-closing-text {
  margin: 16px 0 0;
  color: var(--cream-text) !important;
  text-align: center;
  font-family: var(--font-serif);
  font-size: .98rem;
  font-style: italic;
  line-height: 1.4;
  white-space: pre-line;
}

/* ---------- Gallery: 2-column photo grid ---------- */
#gallery { overflow: visible !important; min-height: 0 !important; }
#gallery .section-header p {
  display: block !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: 1rem !important;
  font-style: italic !important;
  letter-spacing: .02em !important;
}
.gallery-carousel {
  width: 100% !important;
  max-width: 560px !important;
  height: auto !important;
  margin: 0 auto !important;
  perspective: none !important;
}
.carousel-track {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  transform-style: flat !important;
}
.carousel-slide {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  overflow: hidden !important;
  border: 1px solid var(--gold-light) !important;
  border-radius: 2px !important;
  background: var(--red-dark) !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: auto !important;
  pointer-events: auto !important;
  cursor: zoom-in;
}
#gallery.visible .carousel-slide:hover,
.gallery-carousel.visible .carousel-slide:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .4) !important;
}
.carousel-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: filter .3s ease !important;
}
.carousel-slide.slide-has-more img {
  filter: brightness(0.76) blur(0.4px) !important;
}
.slide-more-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(25, 0, 0, 0.28) !important;
  color: var(--cream) !important;
  font-family: 'Montserrat', var(--font-title), sans-serif !important;
  font-size: clamp(2rem, 6.5vw, 2.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.carousel-btn,
.carousel-dots { display: none !important; }

.gallery-quote {
  max-width: 480px !important;
  margin: 16px auto 0 !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  line-height: 1.45 !important;
  text-align: center !important;
  white-space: pre-line !important;
  letter-spacing: .02em !important;
}

/* Lightbox controls & counter */
.lightbox-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: rgba(245, 232, 214, 0.22) !important;
  border: 1px solid rgba(210, 164, 119, 0.45) !important;
  color: var(--cream) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 1000000 !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  user-select: none !important;
}
.lightbox-nav:hover {
  background: rgba(245, 232, 214, 0.4) !important;
  transform: translateY(-50%) scale(1.08) !important;
}
.lightbox-prev { left: 18px !important; }
.lightbox-next { right: 18px !important; }
.lightbox-counter {
  position: absolute !important;
  bottom: 22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: var(--cream) !important;
  font-family: var(--font-serif, serif) !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  background: rgba(35, 0, 0, 0.65) !important;
  padding: 4px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(210, 164, 119, 0.35) !important;
  z-index: 1000000 !important;
}

/* ---------- Reception and venue (card layout như ảnh 2) ---------- */
#reception .reception-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 560px !important;
  margin-inline: auto !important;
  padding: 8px 0 10px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#reception .reception-card::after,
#reception .reception-card::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

#reception .reception-emblem {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 2px !important;
}
#reception .reception-emblem img {
  width: 52px !important;
  height: auto !important;
  opacity: .92 !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

#reception .reception-header {
  color: var(--cream-text) !important;
  margin-bottom: 4px !important;
}
#reception .reception-header h3 {
  margin: 0 0 10px !important;
  color: var(--gold-light) !important;
  font-family: var(--font-title) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
#reception .reception-lead {
  margin: 0 auto !important;
  max-width: 28ch !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: .98rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  white-space: pre-line !important;
}

#reception .reception-info-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 14px !important;
  text-align: left !important;
  border: 1px solid rgba(243, 202, 104, .45) !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14) !important;
}

#reception .reception-venue-box {
  flex-direction: column !important;
  gap: 14px !important;
  padding-bottom: 14px !important;
}

#reception .reception-venue-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
}

#reception .reception-box-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border: 1.5px solid #680D06 !important;
  border-radius: 50% !important;
  color: #680D06 !important;
  background: #FBECE8 !important;
}
#reception .reception-box-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: #680D06 !important;
  stroke: #680D06 !important;
  stroke-width: 2 !important;
}

#reception .reception-box-content {
  flex: 1 !important;
  min-width: 0 !important;
  padding-top: 1px !important;
}

#reception .reception-box-label {
  display: block !important;
  margin-bottom: 4px !important;
  color: #680D06 !important;
  font-family: var(--font-title) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

#reception .reception-box-time {
  margin-bottom: 2px !important;
  color: #580A04 !important;
  font-family: var(--font-serif) !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .02em !important;
}

#reception .reception-box-date {
  color: #580A04 !important;
  font-family: var(--font-serif) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#reception .reception-box-lunar {
  margin-top: 2px !important;
  color: #580A04 !important;
  font-family: var(--font-serif) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.35 !important;
}

#reception .reception-venue-title {
  margin-bottom: 3px !important;
  color: #580A04 !important;
  font-family: var(--font-title) !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

#reception .reception-venue-address {
  color: #580A04 !important;
  font-family: var(--font-serif) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

#reception .reception-map-card {
  position: relative !important;
  width: 100% !important;
}

#reception .reception-map-card .map-embed-wrapper {
  width: 100% !important;
  height: 220px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--cream) !important;
  box-shadow: none !important;
}

#reception .map-action-wrap {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 12px !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#reception .map-action-wrap .venue-direction-btn {
  pointer-events: auto !important;
  gap: 7px !important;
  padding: 9px 18px !important;
  color: var(--text-red) !important;
  font-family: var(--font-title) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  border: 1px solid var(--gold-light) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-button) 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28) !important;
}
#reception .map-action-wrap .venue-direction-btn .direction-icon {
  stroke: var(--text-red) !important;
  color: var(--text-red) !important;
}
#reception .map-action-wrap .venue-direction-btn:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-button) 100%) !important;
}

#reception .reception-legacy { display: none !important; }

#reception .reception-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 6px !important;
}
#reception .btn-gold-outline,
#reception .btn-cream-solid,
#reception #btn-add-calendar,
#reception #btn-trigger-rsvp {
  width: 100% !important;
  max-width: none !important;
  border-radius: 999px !important;
  font-family: var(--font-title) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
#reception .btn-gold-outline,
#reception #btn-add-calendar {
  color: var(--cream) !important;
  background: transparent !important;
  border: 1px solid var(--gold-light) !important;
  text-decoration: none !important;
}
#reception .btn-gold-outline span,
#reception #btn-add-calendar span {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
#reception .btn-gold-outline:hover,
#reception #btn-add-calendar:hover {
  color: var(--cream) !important;
  background: rgba(210, 164, 119, .14) !important;
  border-color: var(--cream) !important;
}
#reception .btn-cream-solid,
#reception #btn-trigger-rsvp {
  color: var(--text-red) !important;
  background: linear-gradient(135deg, #FBE28E 0%, #F3CA68 50%, #DDB24A 100%) !important;
  border: 1px solid var(--gold-light) !important;
  box-shadow: 0 4px 16px rgba(221, 178, 74, .32) !important;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
#reception .btn-cream-solid span,
#reception #btn-trigger-rsvp span {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.reception-day-time span,
.reception-date-num,
.reception-date-month-year,
.reception-date-month-year strong,
.reception-times strong { color: var(--cream-text) !important; }
.reception-date-num { font-family: var(--font-title) !important; }
.reception-date-divider { background: var(--border-gold) !important; }
.reception-lunar, .reception-times small { color: var(--cream-sub) !important; }
.reception-times { border-color: rgba(210, 164, 119, .36) !important; }
.calendar-paper { color: var(--text-red) !important; border: 0 !important; background: var(--cream) !important; box-shadow: 0 8px 23px rgba(27,0,0,.2) !important; }
.calendar-paper-title, .calendar-grid-header, .calendar-grid-days { color: var(--text-red) !important; }
.calendar-grid-days .wedding-day { color: var(--cream) !important; background: var(--text-red) !important; }
.btn-gold-outline { border-color: var(--gold-light) !important; border-radius: 999px !important; color: var(--cream) !important; background: transparent !important; }

.venue-name { color: var(--cream-text) !important; font-family: var(--font-title) !important; }
.venue-address { color: var(--cream-sub) !important; }
.venue-location-icon { color: var(--gold-light) !important; }
.map-embed-wrapper, #venue .map-embed-wrapper { overflow: hidden; border: 2px solid var(--gold-light) !important; border-radius: 10px !important; background: var(--cream) !important; }

/* ---------- Timeline + Dress code (ảnh nền full-bleed 900px sát mép thiệp) ---------- */
#timeline,
#timeline.reveal-section {
  width: calc(100% + 60px) !important;
  max-width: none !important;
  margin-inline: -30px !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

/* Khi không có timeline (chỉ hiện dresscode): xóa bỏ toàn bộ container nền, hiện thẳng trên nền trang */
#timeline.timeline-only-dresscode,
#timeline.timeline-only-dresscode.reveal-section,
#timeline:has(.timeline-body[hidden]),
#timeline:has(.timeline-body[hidden]).reveal-section {
  width: 100% !important;
  max-width: 560px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

#timeline .timeline-card,
#timeline .timeline-card.has-custom-bg {
  position: relative !important;
  width: 100% !important;
  max-width: 900px !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 28px 28px 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cream) !important;
  background-color: var(--red-main) !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#timeline.timeline-only-dresscode .timeline-card,
#timeline.timeline-only-dresscode .timeline-card.has-custom-bg,
#timeline:has(.timeline-body[hidden]) .timeline-card,
#timeline:has(.timeline-body[hidden]) .timeline-card.has-custom-bg {
  width: 100% !important;
  max-width: 560px !important;
  margin-inline: auto !important;
  padding: 0 0 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

#timeline.timeline-only-dresscode .timeline-inner,
#timeline:has(.timeline-body[hidden]) .timeline-inner {
  padding: 0 !important;
  background: transparent !important;
}

#timeline.timeline-only-dresscode .timeline-dresscode,
#timeline:has(.timeline-body[hidden]) .timeline-dresscode {
  margin: 0 !important;
  padding: 0 !important;
}

#timeline.timeline-only-dresscode .dresscode-heading,
#timeline:has(.timeline-body[hidden]) .dresscode-heading {
  color: var(--gold-light) !important;
}

#timeline .timeline-card.has-custom-bg {
  background-color: transparent !important;
  background-image:
    linear-gradient(180deg, rgba(75, 15, 9, .72) 0%, rgba(83, 16, 10, .58) 40%, rgba(75, 15, 9, .78) 100%),
    var(--timeline-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

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

#timeline .timeline-inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--cream) !important;
}

#timeline .timeline-header {
  text-align: center !important;
  margin-bottom: 28px !important;
}

#timeline .timeline-heading,
#timeline .card-heading.timeline-heading {
  margin: 0 0 10px !important;
  color: var(--gold-light) !important;
  font-family: var(--font-title) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35) !important;
}

#timeline .timeline-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 120px !important;
  margin: 0 auto 12px !important;
}
#timeline .timeline-divider .line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(251, 226, 142, .55) !important;
}
#timeline .timeline-divider .heart {
  color: var(--gold-light) !important;
  font-size: .75rem !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

#timeline .timeline-subtitle {
  margin: 0 auto !important;
  max-width: 34ch !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: .98rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .3) !important;
}

/* Timeline layout — override sections.css + theme-match (absolute/padding/center) */
#timeline .timeline-body,
#timeline .timeline-card .timeline-body,
#timeline .timeline-card.has-custom-bg .timeline-body {
  display: grid !important;
  grid-template-columns: 36px auto !important;
  column-gap: 6px !important;
  justify-content: center !important;
  align-items: start !important;
  margin: 0 auto 28px !important;
  max-width: 280px !important;
  width: 100% !important;
}

#timeline .timeline-flora,
#timeline .timeline-card.has-custom-bg .timeline-flora {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(245, 232, 214, .78) !important;
  opacity: .85 !important;
}
#timeline .timeline-flora svg {
  width: 100% !important;
  max-width: 34px !important;
  height: auto !important;
  min-height: 280px !important;
}

#timeline .timeline-list,
#timeline .timeline-card .timeline-list,
#timeline .timeline-card.has-custom-bg .timeline-list {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* gap có thể không ăn trên WebView → dùng margin-bottom ở item */
  gap: 0 !important;
  row-gap: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#timeline .timeline-list::before,
#timeline .timeline-card.has-custom-bg .timeline-list::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 4px !important;
  width: 1px !important;
  transform: none !important;
  background: rgba(245, 232, 214, .75) !important;
  z-index: 0 !important;
}

#timeline .timeline-item,
#timeline .timeline-card .timeline-item,
#timeline .timeline-card.has-custom-bg .timeline-item,
#timeline.reveal-section .timeline-card.has-custom-bg .timeline-list > .timeline-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 12px max-content !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  align-items: start !important;
  justify-content: start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 70px !important;
  height: auto !important;
  margin: 0 !important;
  /* Giãn dọc bằng padding (margin/gap hay bị WebView bỏ) */
  padding: 0 0 34px 0 !important;
  box-sizing: content-box !important;
}
#timeline .timeline-item:last-child,
#timeline .timeline-card.has-custom-bg .timeline-item:last-child,
#timeline.reveal-section .timeline-card.has-custom-bg .timeline-list > .timeline-item:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

#timeline .timeline-line-col,
#timeline .timeline-card.has-custom-bg .timeline-line-col {
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  padding: 6px 0 0 !important;
  margin: 0 !important;
}
#timeline .timeline-line-col::before { display: none !important; content: none !important; }

#timeline .timeline-dot,
#timeline .timeline-card.has-custom-bg .timeline-dot {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--cream) !important;
  box-shadow: 0 0 0 2px rgba(83, 16, 10, .25) !important;
}

#timeline .timeline-content,
#timeline .timeline-card.has-custom-bg .timeline-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 1px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  /* Giãn ngang line ↔ nội dung (padding chắc hơn gap trên WebView) */
  padding-left: 14px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
  flex: none !important;
}

#timeline .timeline-time {
  color: var(--cream) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45) !important;
}

#timeline .timeline-text {
  color: rgba(245, 232, 214, .92) !important;
  font-family: var(--font-serif) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important;
}

/* Dress code trong cùng khối ảnh */
#timeline .timeline-dresscode {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
}
#timeline .timeline-dresscode[hidden],
#dresscode[hidden],
.timeline-dresscode[hidden] {
  display: none !important;
}

#timeline .dresscode-heading {
  margin: 0 0 10px !important;
  color: var(--gold-light) !important;
  font-family: var(--font-title) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35) !important;
}

#timeline .dresscode-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 120px !important;
  margin: 0 auto 20px !important;
}
#timeline .dresscode-divider .line {
  flex: 1 !important;
  height: 1px !important;
  background: rgba(251, 226, 142, .55) !important;
}
#timeline .dresscode-divider .heart {
  color: var(--gold-light) !important;
  font-size: .75rem !important;
  line-height: 1 !important;
}

#timeline .dresscode-subtitle,
#timeline .dresscode-icon-wrap { display: none !important; }

#timeline .dresscode-palettes {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin: 0 0 16px !important;
}

#timeline .dresscode-item {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

#timeline .dresscode-swatch {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(245, 232, 214, .55) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28) !important;
}

#timeline .dresscode-name { display: none !important; }

#timeline .dresscode-note {
  margin: 0 auto !important;
  max-width: 34ch !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: .98rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important;
}

/* ---------- Countdown (layout ảnh 2, max 560px) ---------- */
#countdown {
  width: 100% !important;
  max-width: 560px !important;
  margin-inline: auto !important;
}
#countdown.reveal-section {
  max-width: 560px !important;
  margin-inline: auto !important;
}
#countdown .countdown-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 560px !important;
  margin-inline: auto !important;
  padding: 6px 0 8px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#countdown .countdown-card::before,
#countdown .countdown-card::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

#countdown .countdown-ornament {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 220px !important;
  margin: 0 auto 10px !important;
}
#countdown .countdown-ornament-line {
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent) !important;
}
#countdown .countdown-ornament-icon {
  width: 36px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  opacity: .95 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
#countdown .countdown-heart-icon { display: none !important; }

#countdown .card-heading {
  display: block !important;
  margin: 0 0 14px !important;
  color: var(--gold-light) !important;
  font-family: var(--font-title) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
#countdown .countdown-subtitle { display: none !important; }

#countdown .countdown-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}
#countdown .count-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 78px !important;
  padding: 14px 4px !important;
  border: 1px solid rgba(243, 202, 104, .45) !important;
  border-radius: 12px !important;
  color: #580A04 !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14) !important;
}
#countdown .count-box .num {
  color: #580A04 !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(1.55rem, 5vw, 1.9rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
}
#countdown .count-box .lbl {
  margin-top: 4px !important;
  color: #680D06 !important;
  font-family: var(--font-serif) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
#countdown .countdown-quote {
  margin: 0 !important;
  max-width: none !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}

/* ---------- Guestbook / Lời chúc (layout ảnh 2) ---------- */
#guestbook,
#guestbook.reveal-section {
  width: 100% !important;
  max-width: 560px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

#guestbook .guestbook-header {
  text-align: center !important;
  margin-bottom: 22px !important;
}

#guestbook .guestbook-heading {
  margin: 0 0 10px !important;
  color: var(--gold-light) !important;
  font-family: var(--font-title) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

#guestbook .guestbook-lead {
  margin: 0 auto !important;
  max-width: 34ch !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: .98rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

#guestbook .guestbook-card {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto 18px !important;
  padding: 16px !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 18px !important;
  background: rgba(75, 15, 9, .55) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
#guestbook .guestbook-card::before,
#guestbook .guestbook-card::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

#guestbook .guestbook-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#guestbook .form-input {
  width: 100% !important;
  padding: 12px 14px !important;
  color: var(--cream) !important;
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  border: 1px solid rgba(210, 164, 119, .35) !important;
  border-radius: 12px !important;
  background: rgba(75, 15, 9, .45) !important;
  box-shadow: none !important;
  outline: none !important;
}
#guestbook .form-input::placeholder {
  color: rgba(245, 232, 214, .55) !important;
  font-style: italic !important;
}
#guestbook .form-input:focus {
  border-color: var(--gold-light) !important;
  background: rgba(75, 15, 9, .6) !important;
  box-shadow: 0 0 0 2px rgba(210, 164, 119, .15) !important;
}

#guestbook .guestbook-compose {
  position: relative !important;
}

#guestbook .form-textarea {
  width: 100% !important;
  min-height: 110px !important;
  padding: 14px 14px 28px !important;
  color: var(--cream) !important;
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  border: 1px solid rgba(210, 164, 119, .35) !important;
  border-radius: 14px !important;
  background: rgba(75, 15, 9, .45) !important;
  box-shadow: none !important;
  outline: none !important;
  resize: vertical !important;
}
#guestbook .form-textarea::placeholder {
  color: rgba(245, 232, 214, .55) !important;
  font-style: italic !important;
}
#guestbook .form-textarea:focus {
  border-color: var(--gold-light) !important;
  background: rgba(75, 15, 9, .6) !important;
  box-shadow: 0 0 0 2px rgba(210, 164, 119, .15) !important;
}

#guestbook .guestbook-char-count {
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  color: rgba(245, 232, 214, .5) !important;
  font-family: var(--font-serif) !important;
  font-size: .78rem !important;
  pointer-events: none !important;
}

#guestbook .guestbook-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

#guestbook .btn-wish-icon {
  width: 40px !important;
  height: 40px !important;
  color: var(--cream) !important;
  border: 1px solid rgba(210, 164, 119, .4) !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#guestbook .btn-submit-wish {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  padding: 10px 18px !important;
  color: var(--text-red) !important;
  font-family: var(--font-title) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--cream-button) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2) !important;
}
#guestbook .btn-submit-wish span {
  color: inherit !important;
  border: 0 !important;
  background: transparent !important;
}
#guestbook .btn-submit-wish svg {
  stroke: var(--text-red) !important;
}

#guestbook .wishes-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 560px !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#guestbook .wish-item {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 14px 12px !important;
  color: var(--cream) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 16px !important;
  background: rgba(75, 15, 9, .55) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#guestbook .wish-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  color: var(--cream) !important;
  font-family: var(--font-title) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(145deg, var(--red-soft), var(--red-dark)) !important;
  border: 1px solid rgba(210, 164, 119, .35) !important;
}

#guestbook .wish-body {
  min-width: 0 !important;
}

#guestbook .wish-item-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

#guestbook .wish-author {
  color: var(--cream) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
}

#guestbook .wish-menu-btn {
  flex-shrink: 0 !important;
  padding: 0 4px !important;
  color: rgba(245, 232, 214, .65) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: default !important;
}

#guestbook .wish-message {
  margin: 0 0 8px !important;
  color: rgba(245, 232, 214, .92) !important;
  font-family: var(--font-serif) !important;
  font-size: .95rem !important;
  line-height: 1.45 !important;
}

#guestbook .wish-time {
  display: block !important;
  color: rgba(245, 232, 214, .55) !important;
  font-family: var(--font-serif) !important;
  font-size: .82rem !important;
  font-style: italic !important;
}

/* ---------- Gift and footer ---------- */
/* Hoa trang trí Hộp quà (phải) */
#gift {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 335px !important;
  overflow: visible !important;
  margin-top: 40px !important;
  margin-inline: auto !important;
  padding-top: 20px !important;
  padding-inline: 0 !important;
}
.gift-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.gift-heading {
  margin-bottom: 22px !important;
}
.gift-envelope-trigger {
  margin-top: 24px !important;
  margin-bottom: 20px !important;
}
#gift .gift-flower-right,
.gift-flower-right {
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: -10px !important;
  right: -48px !important;
  bottom: auto !important;
  left: auto !important;
  width: min(280px, 62vw) !important;
  height: auto !important;
  opacity: .98 !important;
  transform: rotate(10deg) !important;
  pointer-events: none !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28));
}
@media (min-width: 768px) {
  #gift {
    margin-top: 20px !important;
    padding-top: 10px !important;
  }
  .gift-heading {
    margin-bottom: 16px !important;
  }
  .gift-envelope-trigger {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }
  #gift .gift-flower-right,
  .gift-flower-right {
    top: -48px !important;
    right: -48px !important;
    width: 340px !important;
  }
}
.gift-envelope-box { width: 230px !important; max-width: 78vw !important; background: transparent !important; box-shadow: none !important; }
.gift-envelope-img { filter: drop-shadow(0 12px 18px rgba(25,0,0,.35)); }
.gift-hint-text { color: var(--gold-light) !important; font-family: var(--font-serif) !important; }
.gift-sparkle { color: var(--gold-light) !important; }

/* Footer chuẩn các thiệp: lời cảm ơn italic + brand nhỏ */
.app-container > footer {
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  min-height: 0 !important;
  margin: 8px auto 0 !important;
  padding: 10px 14px 28px !important;
  text-align: center !important;
  color: var(--cream-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gift-thankyou-text,
.app-container > footer .gift-thankyou-text {
  width: auto !important;
  max-width: 390px !important;
  margin: 0 auto 10px !important;
  color: var(--cream-sub) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.app-container > footer .footer-brand {
  margin: 0 !important;
  color: rgba(245, 232, 214, .55) !important;
  font-family: var(--font-title) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}

.app-container > footer .footer-monogram,
.app-container > footer .footer-date,
.app-container > footer .footer-thankyou {
  display: none !important;
}

/* ---------- Floating controls and modals ---------- */
.floating-music {
  color: var(--cream) !important;
  border: 1px solid rgba(210, 164, 119, .55) !important;
  background: radial-gradient(circle at 35% 30%, var(--red-sub) 0%, var(--red-main) 62%, var(--red-dark) 100%) !important;
  box-shadow: 0 5px 18px rgba(75, 15, 9, .48) !important;
}
.floating-music .music-icon,
.floating-music .music-icon svg {
  color: var(--cream) !important;
  fill: currentColor !important;
}
.floating-music .music-inner-ring,
.music-inner-ring {
  border-color: rgba(210, 164, 119, .5) !important;
}
.floating-music:hover {
  box-shadow: 0 7px 22px rgba(75, 15, 9, .55) !important;
}

.lang-trigger-btn,
.lang-trigger-btn:hover,
.floating-lang.is-open .lang-trigger-btn {
  color: var(--text-red) !important;
  border-color: var(--gold-light) !important;
  background: var(--cream-button) !important;
  box-shadow: 0 4px 16px rgba(75, 15, 9, .22) !important;
}
.lang-trigger-btn:hover,
.floating-lang.is-open .lang-trigger-btn {
  box-shadow: 0 6px 20px rgba(75, 15, 9, .3) !important;
}
.lang-trigger-chevron { color: var(--text-red) !important; stroke: var(--text-red) !important; }
.lang-dropdown {
  border-color: var(--gold) !important;
  background: var(--cream) !important;
  box-shadow: 0 10px 28px rgba(75, 15, 9, .28) !important;
}
.lang-btn { color: var(--text-red) !important; }
.lang-btn:hover {
  color: var(--text-red) !important;
  background: rgba(117, 29, 22, .1) !important;
}
.lang-btn.active {
  color: var(--cream) !important;
  background: var(--red-main) !important;
  box-shadow: 0 2px 8px rgba(75, 15, 9, .35) !important;
}

.modal-overlay, .wish-suggestions-modal { background: rgba(75, 15, 9, .8) !important; }
.gift-modal-box, .wish-suggestions-box, .rsvp-modal-box,
.modal-box.rsvp-modal-box {
  color: var(--text-red) !important;
  border-color: var(--gold) !important;
  background: var(--cream) !important;
}
.modal-title,
#rsvp-modal-title {
  color: var(--text-red) !important;
}
.modal-subtitle {
  color: var(--gold-dark) !important;
}
.modal-close,
#rsvp-modal-close {
  color: var(--text-red) !important;
  background: rgba(117, 29, 22, .08) !important;
}
.modal-close:hover,
#rsvp-modal-close:hover {
  color: var(--red-main) !important;
  background: rgba(117, 29, 22, .16) !important;
}
.rsvp-form-label {
  color: var(--text-red) !important;
}
.form-input.rsvp-input,
.rsvp-input,
#rsvp-modal-form select.form-input,
#rsvp-modal-form input.form-input,
.form-textarea.rsvp-textarea,
.rsvp-textarea,
#rsvp-modal-form textarea {
  color: var(--text-red) !important;
  border-color: rgba(117, 29, 22, .22) !important;
  background: var(--cream) !important;
}
#rsvp-modal-form select.form-input option {
  color: var(--text-red) !important;
  background: var(--cream) !important;
}
.rsvp-radio-label {
  color: var(--text-red) !important;
  border-color: rgba(117, 29, 22, .2) !important;
  background: var(--cream) !important;
}
.rsvp-radio-label:has(input:checked) {
  color: var(--text-red) !important;
  border-color: var(--red-main) !important;
  background: rgba(117, 29, 22, .1) !important;
}
.rsvp-radio-label input {
  accent-color: var(--red-main) !important;
}
.btn-cream-solid.rsvp-btn-submit,
.rsvp-btn-submit,
#rsvp-modal-form button[type="submit"] {
  color: var(--cream) !important;
  background: var(--red-main) !important;
  box-shadow: 0 4px 12px rgba(75, 15, 9, .28) !important;
}
.btn-cream-solid.rsvp-btn-submit:hover,
#rsvp-modal-form button[type="submit"]:hover {
  background: var(--red-dark) !important;
  box-shadow: 0 6px 16px rgba(75, 15, 9, .38) !important;
}
/* Gift modal — đỏ trầm / kem / vàng đồng */
.gift-modal-box {
  color: var(--text-red) !important;
  border: 1px solid var(--gold) !important;
  background: var(--cream) !important;
  box-shadow: 0 24px 60px rgba(75, 15, 9, .45) !important;
}
.gift-modal-header,
.wish-suggestions-header {
  color: var(--cream) !important;
  background: var(--red-main) !important;
  border-bottom: 1px solid rgba(210, 164, 119, .35) !important;
}
.gift-modal-title {
  color: var(--gold-light) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
.gift-modal-close {
  color: var(--cream) !important;
}
.gift-modal-close:hover {
  color: var(--gold-light) !important;
  background: rgba(245, 232, 214, .14) !important;
}
.gift-modal-body {
  background: var(--cream) !important;
}
.gift-person-card {
  border-color: transparent !important;
  background: transparent !important;
}
.gift-qr-card {
  border: 1px solid rgba(176, 112, 85, .35) !important;
  background: var(--cream) !important;
  box-shadow: 0 4px 14px rgba(75, 15, 9, .1) !important;
}
.gift-bank-name {
  color: var(--gold-dark) !important;
}
.gift-bank-number {
  color: var(--text-red) !important;
}
.gift-bank-owner {
  color: var(--red-main) !important;
}
.btn-copy-acc,
.btn-save-qr {
  color: var(--cream) !important;
  background: var(--red-main) !important;
  border: 1px solid var(--gold) !important;
  box-shadow: 0 2px 8px rgba(75, 15, 9, .22) !important;
}
.btn-copy-acc:hover,
.btn-save-qr:hover {
  color: var(--cream) !important;
  background: var(--red-dark) !important;
  border-color: var(--gold-light) !important;
  box-shadow: 0 4px 12px rgba(75, 15, 9, .35) !important;
}
.wish-suggestions-header { color: var(--cream) !important; background: var(--red-main) !important; }
.not-found-screen { background: var(--red-dark) !important; }
.not-found-card { color: var(--text-red) !important; border-color: var(--gold) !important; background: var(--cream) !important; }

/* ---------- Desktop: slightly larger overall ---------- */
@media (min-width: 768px) {
  html { font-size: 112.5%; }
  body { font-size: 1rem; }
  #wedding-info .family-side small { font-size: .8rem !important; }
  #wedding-info .family-side h4 { font-size: 1.05rem !important; }
  #wedding-info .family-side p { font-size: .9rem !important; }
  #wedding-info .card-emblem img { width: 72px; }
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 480px) {
  .app-container { padding-inline: 28px !important; }
  .ornate-border { inset: 14px; }

  /* Giảm gap dọc giữa các khối */
  .app-container > .reveal-section,
  .app-container > footer {
    padding: 14px 0 !important;
  }
  .app-container > .reveal-section:not(#hero)::before {
    margin: 0 auto 8px !important;
  }
  #gallery.reveal-section,
  #reception.reveal-section,
  #countdown.reveal-section,
  #timeline.reveal-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .section-header { margin-bottom: 14px !important; }

  .hero-section, .hero-section.reveal-section, #hero { min-height: 860px !important; padding-bottom: 24px !important; background-size: 158px auto !important; background-position: center 38px !important; }
  .hero-corner-flower { top: 50px; left: -50px; width: 200px; transform: rotate(10deg); transform-origin: left top; }
  #hero::before { right: -88px; top: 105px; width: 176px; height: 176px; }
  .hero-title-box { margin-top: 280px !important; top: auto !important; }
  #hero > .hero-kicker,
  .hero-section > .hero-kicker {
    top: 206px !important;
    font-size: .88rem !important;
  }
  .hero-chibi-wrap { margin: 46px auto 18px !important; }
  .hero-chibi-img { width: 195px !important; max-width: 58vw !important; }
  .hero-bottom-slogan { margin: 17px auto 0 !important; font-size: .8rem !important; }
  .hero-names { font-size: clamp(3.05rem, 15vw, 3.9rem) !important; }
  .couple-highlight-names .groom-name, .couple-highlight-names .bride-name { font-size: clamp(2.55rem, 13vw, 3.2rem) !important; }
  .gallery-carousel {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .gallery-quote {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

  #reception .reception-card {
    padding: 8px 0 8px !important;
    gap: 12px !important;
  }
  #reception .reception-emblem {
    margin-bottom: 0 !important;
  }
  #reception .reception-emblem img {
    width: 44px !important;
  }
  #reception .reception-actions {
    margin-top: 2px !important;
    gap: 10px !important;
  }

  #countdown .countdown-card {
    padding: 8px 0 6px !important;
  }
  #countdown .countdown-ornament {
    margin-bottom: 10px !important;
  }
  #countdown .countdown-quote {
    margin-top: 10px !important;
  }

  .red-card, .reception-card, .venue-card, .dresscode-card, .countdown-card, .guestbook-card { padding-inline: 0 !important; }
  #timeline,
  #timeline.reveal-section {
    width: calc(100% + 56px) !important;
    margin-inline: -28px !important;
  }
  #timeline .timeline-card,
  #timeline .timeline-card.has-custom-bg {
    padding: 28px 22px 32px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Giữ thời gian mở bìa theo thiết kế (như thiệp 9) */
  .invite-door {
    transition-duration: var(--cover-door-duration) !important;
  }
  .envelope-seal { transition-duration: .45s !important; }
}