/* index.html — editorial wedding site: cream paper, plum #572932 (primary) + olive #666B54 (secondary) */
:root {
  --cream: #EDE6DB;
  --paper: #EFEBE5;
  --plum: #572932;
  --plum-deep: #47212A;
  --espresso: var(--plum);
  --espresso-2: var(--plum-deep);
  --olive: #666B54;
  --sage: #BFC2A0;
  --sage-2: #A9AD86;
  --ink: #3A2327;
  --muted: #666B54;
  --plum-rgb: 87, 41, 50;
  --olive-rgb: 102, 107, 84;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Cormorant Garamond', Georgia, serif; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, ol { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.script { font-family: 'Pinyon Script', cursive; font-weight: 400; line-height: 1.15; text-align: center; }
.script--light { color: var(--cream); }
.script--xl { font-size: clamp(3rem, 9vw, 6rem); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 216px;
  min-height: 60px;
  padding: 0 24px;
  border: 1px solid currentColor;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-outline--light { color: var(--cream); border-color: rgba(237, 230, 219, 0.7); }
.btn-outline--light:hover { background: var(--cream); color: var(--espresso-2); }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 900px;
  color: #fff;
  background:
    linear-gradient(rgba(40, 36, 20, 0.35), rgba(40, 36, 20, 0.45)),
    url("../preWedding/hero-bg.jpg") center 35% / cover no-repeat;
  overflow: hidden;
}
.nav {
  position: absolute;
  inset: 0 36px auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 4.5vw, 64px);
  padding: 30px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
}
.nav a { text-decoration: none; opacity: 0.92; transition: opacity 0.2s; white-space: nowrap; }
.nav a:hover, .nav a.is-active { opacity: 1; font-weight: 600; }
.nav-gap { flex: 1; }
.hero-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 16px; }
.hero-kicker { font-family: 'Bodoni Moda', serif; font-size: clamp(1.1rem, 2.4vw, 1.9rem); letter-spacing: 0.08em; text-transform: uppercase; }
.hero-names { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: clamp(3.6rem, 11vw, 9.5rem); line-height: 1.05; }
.hero-names .hn-name { font-size: 1em; }
.hero-date, .hero-place { position: absolute; bottom: 44px; font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(1rem, 2vw, 1.5rem); text-transform: uppercase; }
.hero-date { left: 78px; }
.hero-place { right: 66px; }

/* ── Invitation letter ── */
.invite { position: relative; padding: 70px 24px 80px; overflow: hidden; }
.invite > .script:first-child { font-size: clamp(2.6rem, 6vw, 4rem); color: var(--ink); }
.invite-text { max-width: 720px; margin: 16px auto 0; text-align: center; font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; }
.invite-text p + p { margin-top: 1.1em; }
.invite-sign { margin-top: 18px; font-size: clamp(2rem, 4.5vw, 2.8rem); }
.deco-poppies { position: absolute; right: 10px; bottom: 0; width: clamp(140px, 23vw, 300px); height: clamp(140px, 23vw, 300px); color: var(--olive); }

/* ── Countdown ── */
.countdown-band { background: var(--espresso); color: var(--cream); padding: 64px 16px 92px; }
.countdown-band .script { font-size: clamp(2.8rem, 7vw, 5rem); }
.countdown { display: flex; justify-content: center; align-items: flex-start; gap: 18px; margin-top: 28px; }
.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 72px; }
.countdown b { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.countdown i { font-style: normal; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; }
.countdown span { margin-top: 10px; font-size: 1.15rem; font-weight: 500; text-transform: uppercase; }

/* ── Hanging vines ── */
.vines { position: absolute; top: 0; display: flex; gap: 6px; color: var(--olive); pointer-events: none; }
.vines svg { width: 34px; transform-origin: top center; animation: sway 6s ease-in-out infinite; }
.vines--left { left: 16px; }
.vines--right { right: 24px; }
.vines--light { color: #D9CFA9; }
@keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* ── RSVP envelope ── */
.rsvp { position: relative; padding: 50px 16px 70px; overflow: hidden; background: var(--paper); }
.envelope { position: relative; width: min(424px, 86vw); aspect-ratio: 424 / 560; margin: 0 auto; }
.env-back { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sage-2), var(--sage)); clip-path: polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%); border-radius: 6px; }
.env-heart { position: absolute; left: 50%; top: 9%; width: 98%; transform: translateX(-50%); color: #F4F2EA; animation: peek 5s ease-in-out infinite; }
.lace-heart { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 6px rgba(60, 60, 30, 0.25)); }
.lace-heart use { fill: #F7F6F0; }
.env-heart::before {
  content: "";
  position: absolute;
  inset: 8% 10% 12%;
  z-index: -1;
  background: #F7F6F0;
  clip-path: path("M170 300 C100 240 20 180 20 100 C20 50 60 20 105 20 C135 20 158 38 170 60 C182 38 205 20 235 20 C280 20 320 50 320 100 C320 180 240 240 170 300 Z");
}
.env-heart-text { position: absolute; inset: 22% 0 auto; text-align: center; color: var(--ink); }
.env-heart-text .script { font-size: clamp(1.7rem, 5vw, 2.5rem); }
.env-by { margin-top: 6px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.env-front { position: absolute; inset: 40% 0 0; background: linear-gradient(170deg, #C7CAA8, var(--sage)); clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 40px rgba(80, 80, 40, 0.15); border-radius: 0 0 6px 6px; }
.env-front::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 49.6%, rgba(90, 90, 50, 0.18) 50%, transparent 50.6%), linear-gradient(225deg, transparent 49.6%, rgba(90, 90, 50, 0.18) 50%, transparent 50.6%); }
.env-seal { position: absolute; left: 50%; top: 59%; width: 27%; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 8px rgba(40, 40, 10, 0.4)); }
.env-btn { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); min-width: 122px; min-height: 34px; padding: 0 16px; color: var(--ink); background: transparent; font-size: 1rem; text-transform: none; letter-spacing: 0; }
.rsvp-links { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.95rem; }
.rsvp-links a { text-underline-offset: 4px; }
@keyframes peek { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } }

/* ── Paper sections ── */
.paper { position: relative; background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .37 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); overflow: hidden; }
.paper--warm { background-color: #ECE8D9; }
.story { padding: 80px 24px 110px; box-shadow: inset 0 18px 22px -18px rgba(60, 50, 30, 0.25); }
.story-text { max-width: 680px; margin: 30px auto 0; text-align: center; font-style: italic; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.2; }
.story-text p + p { margin-top: 1.2em; }

/* ── Memory lane ── */
.memory { padding: 60px 16px 120px; }
.timeline { position: relative; list-style: none; padding: 0; max-width: 700px; margin: 40px auto 0; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed rgba(44, 36, 28, 0.45); }
.timeline li { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 76px; margin-bottom: 4px; }
.timeline li::before { content: ""; position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ink); }
.tl-text { text-align: center; font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(1rem, 1.9vw, 1.4rem); line-height: 1.15; }
.timeline li:nth-child(even) .tl-text { order: 2; }
.timeline li:nth-child(even) .polaroid { justify-self: end; }
.polaroid { width: min(222px, 100%); margin: 0; padding: 10px 10px 4px; background: #F3F1EC; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 2px 6px rgba(40, 30, 20, 0.12); transition: transform 0.5s var(--ease); }
.timeline li:nth-child(odd) .polaroid { transform: rotate(1.2deg); }
.timeline li:nth-child(even) .polaroid { transform: rotate(-1.2deg); }
.polaroid:hover { transform: rotate(0) scale(1.04); }
.polaroid img { width: 100%; aspect-ratio: 1 / 0.96; object-fit: cover; }
.polaroid figcaption { padding: 8px 0 6px; text-align: center; font-family: 'Pinyon Script', cursive; font-size: 1.9rem; line-height: 1.1; }

/* ── Dark band: venue ── */
.dark-band { position: relative; background: var(--espresso-2); color: var(--cream); padding: 96px 24px 110px; text-align: center; overflow: hidden; }
.mixed { display: flex; flex-direction: column; align-items: center; }
.mixed .script { font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; }
.caps { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; margin-top: -4px; }
.dark-text { max-width: 680px; margin: 44px auto 0; font-style: italic; font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.2; }
.btn-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 48px; margin-top: 46px; }
.map { max-width: 680px; margin: 52px auto 0; border: 1px solid rgba(237, 230, 219, 0.4); padding: 8px; }
.map iframe { display: block; width: 100%; height: 320px; border: 0; filter: sepia(0.25) saturate(0.85); }

/* ── FAQ ── */
.faq-wrap { padding: 26px 20px; background: var(--cream); }
.faq { display: grid; grid-template-columns: minmax(120px, 0.6fr) 2fr; border: 21px solid var(--olive); padding: 70px 40px 34px; }
.faq-title { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; align-self: center; font-family: 'Bodoni Moda', serif; font-size: clamp(5rem, 13vw, 10rem); line-height: 1; color: #3A3220; letter-spacing: 0.02em; }
.faq-list { max-width: 612px; }
.faq-item { padding: 0 12px 28px; border-bottom: 1px solid rgba(44, 36, 28, 0.6); }
.faq-item + .faq-item { padding-top: 32px; }
.faq-item:last-of-type { border-bottom: 0; }
.faq-item h3 { display: flex; align-items: baseline; gap: 18px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 400; font-size: 1.4rem; }
.faq-item h3 span { font-size: 1.3rem; }
.faq-item p { margin-top: 18px; font-style: italic; font-size: 1.35rem; line-height: 1.2; }
.faq-more { display: inline-flex; gap: 10px; margin: 18px 0 0 170px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 1.1rem; text-transform: uppercase; text-decoration: none; }
.faq-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Footer ── */
.footer {
  position: relative;
  padding: 74px 20px 70px;
  color: #F1ECE2;
  text-align: center;
  background:
    linear-gradient(rgba(60, 50, 30, 0.45), rgba(60, 50, 30, 0.55)),
    url("../image/web/garden.jpg") center / cover no-repeat;
}
.footer::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.footer > * { position: relative; }
.footer-heart { width: 286px; height: 264px; color: var(--cream); }
.footer-text { max-width: 500px; margin: 44px auto 0; font-size: 1.6rem; line-height: 1.15; }
.footer-links { margin-top: 30px; font-size: 1.6rem; display: flex; justify-content: center; gap: 14px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.to-top { position: fixed; right: 26px; bottom: 26px; z-index: 30; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.to-top.is-shown { opacity: 1; pointer-events: auto; }
.to-top svg { width: 24px; height: 24px; }

/* ── Mobile ── */
@media (max-width: 760px) {
  .nav { inset: 0 12px auto; padding: 18px 6px 12px; gap: 14px; overflow-x: auto; font-size: 0.8rem; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-gap { display: none; }
  .hero-date, .hero-place { bottom: 30px; font-size: 0.9rem; }
  .hero-date { left: 20px; }
  .hero-place { right: 20px; }
  .deco-poppies { opacity: 0.35; }
  .countdown { gap: 6px; }
  .countdown div { min-width: 56px; }
  .countdown span { font-size: 0.85rem; }
  .vines { opacity: 0.45; }
  .vines svg { width: 24px; }
  .timeline li { column-gap: 28px; }
  .faq { grid-template-columns: 1fr; border-width: 12px; padding: 34px 18px 26px; }
  .faq-title { writing-mode: horizontal-tb; transform: none; font-size: 3.4rem; margin-bottom: 24px; }
  .faq-more { margin-left: 12px; }
  .footer-heart { width: 210px; height: 194px; }
  .footer-text, .footer-links { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ── RSVP envelope built from the two supplied images ──
   back flap (CSS, same sage) → lace heart (tim-ren.png) → envelope front (phong-bi-xanh.png) */
.envelope { aspect-ratio: 534 / 560; }
.env-back {
  inset: auto 0 0 0;
  height: 100%;
  clip-path: polygon(0 29.3%, 50% 0, 100% 29.3%, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #B6B992 0%, #C3C6A3 60%);
  border-radius: 6px;
}
.env-back::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 50px rgba(70, 70, 30, 0.25); }
.env-heart { top: 6%; width: 82%; color: inherit; }
.env-heart img { width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgba(60, 60, 30, 0.3)); }
.env-heart::before { display: none; }
.env-heart-text { inset: 26% 18% auto; }
.env-front { position: absolute; inset: auto 0 0 0; width: 100%; height: auto; clip-path: none; background: none; box-shadow: none; border-radius: 0; filter: drop-shadow(0 10px 14px rgba(60, 60, 30, 0.22)); }
.env-front::before { display: none; }
.env-seal { top: 62%; width: 24%; z-index: 3; }
.env-btn { z-index: 3; bottom: 5%; }
.env-heart-text { inset: 24% 24% auto; }
.env-heart-text .script { font-size: clamp(1.5rem, 4.4vw, 2.2rem); line-height: 1.05; }
.deco-poppies { height: auto; object-fit: contain; }
.deco-poppies { bottom: -2px; display: block; }
/* push the bouquet below the edge so every stem looks rooted in the band below */
.deco-poppies { bottom: 0; transform: translateY(9%); }

/* Invitation paragraph — same type as the source: Cormorant Garamond italic 400,
   28px / 32px at desktop, colour rgb(54, 42, 28), one empty line between paragraphs */
.invite-text {
  max-width: 740px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 1.95vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.143;
  color: var(--ink);
  font-kerning: normal;
}
.invite-text p + p { margin-top: 1.143em; }
.invite-sign { color: var(--plum); }
.hero-kicker { letter-spacing: 0.126em; }

/* supplied vine artwork (RSVP only): static curtain of strands hanging from the top edge */
.vines--art { top: 0; left: 0; }
.vines .vines-art { display: block; width: clamp(254px, 34vw, 445px); height: auto; animation: none; transform: none; }
@media (max-width: 760px) { .vines .vines-art { width: 180px; } }


/* Memory + venue sections: smaller, sparser copy of the same vine artwork (static) */
.vines svg.vines-few { display: block; width: clamp(130px, 15vw, 200px); height: auto; fill: rgb(101, 95, 50); animation: none; }
.vines--light svg.vines-few { fill: #D9CFA9; }
.vines--right svg.vines-few { transform: scaleX(-1); }
@media (max-width: 760px) { .vines svg.vines-few { width: 100px; } }

/* Memory lane: misty forest photo background, mist on top fading into forest below */
.memory {
  background-color: #E9E5D8;
  background-image:
    linear-gradient(180deg, rgba(236, 232, 217, 0.55) 0%, rgba(236, 232, 217, 0.15) 55%, rgba(30, 40, 20, 0.15) 100%),
    url("../image/thiep/nen-ky-niem.jpg");
  background-size: cover;
  background-position: center bottom;
}
/* keep the timeline captions readable over the darker forest */
.memory .tl-text { justify-self: center; padding: 8px 14px; border-radius: 6px; background: rgba(239, 235, 226, 0.82); }
.memory .timeline::before { border-left-color: rgba(239, 235, 226, 0.7); }
.memory .timeline li::before { background: #EFEBE2; box-shadow: 0 0 0 2px rgba(44, 36, 28, 0.6); }

/* Hero: looping background video (photo stays as poster / fallback) */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(40, 36, 20, 0.32), rgba(40, 36, 20, 0.42)); }
.hero > .nav, .hero > .hero-center, .hero > .hero-date, .hero > .hero-place { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* ── Memory album: 3D coverflow ring (same geometry/timing as the reference) ── */
.coverflow { position: relative; z-index: 1; max-width: 600px; margin: 34px auto 0; }
.coverflow-stage { position: relative; height: 520px; touch-action: pan-y; }
.coverflow-ring { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
.coverflow-slide {
  position: absolute;
  height: 92%;
  aspect-ratio: 2 / 3;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 25px -5px rgba(20, 20, 10, 0.25), 0 8px 10px -6px rgba(20, 20, 10, 0.2);
  transition: transform 1100ms ease-in-out, opacity 1100ms ease-in-out;
  will-change: transform, opacity;
}
.coverflow-slide.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 20px 25px -5px rgba(20, 20, 10, 0.3); }
.coverflow-slide img { width: 100%; height: 100%; object-fit: cover; }
.coverflow-nav {
  position: absolute;
  top: 50%;
  z-index: 200;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(239, 235, 226, 0.6);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.2s;
}
.coverflow-nav:hover { background: rgba(239, 235, 226, 1); }
.coverflow-nav svg { width: 16px; height: 16px; }
.coverflow-nav--prev { left: 0; }
.coverflow-nav--next { right: 0; }
.coverflow-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; color: var(--ink); }
.coverflow-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: currentColor; opacity: 0.25; cursor: pointer; transition: width 0.3s, opacity 0.3s; }
.coverflow-dots button:hover { opacity: 0.4; }
.coverflow-dots button.is-active { width: 24px; opacity: 0.7; }
.coverflow-caption { width: fit-content; max-width: 90%; margin: 18px auto 0; padding: 10px 20px 12px; border-radius: 8px; background: rgba(239, 235, 226, 0.82); text-align: center; }
.coverflow-title { font-family: 'Pinyon Script', cursive; font-size: 1.9rem; line-height: 1.1; }
.coverflow-text { margin-top: 2px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 1rem; }
@media (max-width: 760px) {
  .coverflow { max-width: 380px; }
  .coverflow-stage { height: 340px; }
  .coverflow-nav { display: none; }
}
.memory .coverflow-dots { color: #EFEBE2; }
.memory .coverflow-dots button { opacity: 0.45; }
.memory .coverflow-dots button.is-active { opacity: 0.95; }

/* auto-rotate on/off */
.coverflow-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  padding: 6px 14px;
  border: 1px solid rgba(239, 235, 226, 0.7);
  border-radius: 999px;
  background: rgba(239, 235, 226, 0.18);
  color: #EFEBE2;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.2s;
}
.coverflow-toggle:hover { background: rgba(239, 235, 226, 0.32); }
.coverflow-toggle svg { width: 14px; height: 14px; }
.coverflow-toggle .i-play { display: none; }
.coverflow-toggle:not(.is-playing) .i-play { display: block; }
.coverflow-toggle:not(.is-playing) .i-pause { display: none; }

/* Memory album: paper texture instead of the forest photo (tinted cream via multiply) */
.memory {
  background-color: #ECE8D9;
  background-image: url("../image/thiep/giay-album.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: multiply;
}
/* back to dark controls on the light paper */
.memory .coverflow-dots { color: var(--ink); }
.memory .coverflow-dots button { opacity: 0.25; }
.memory .coverflow-dots button.is-active { opacity: 0.7; }
.memory .coverflow-toggle { color: var(--ink); border-color: rgba(44, 36, 28, 0.45); background: rgba(44, 36, 28, 0.04); }
.memory .coverflow-toggle:hover { background: rgba(44, 36, 28, 0.1); }
.memory .coverflow-caption { background: transparent; }

/* faded castle sketch printed into the paper, behind the album */
.memory { isolation: isolate; }
.memory::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../image/thiep/lau-dai.webp") center 62% / min(1100px, 120%) auto no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}
.memory > h2 { position: relative; }
@media (max-width: 760px) { .memory::before { background-size: 170% auto; background-position: center 55%; } }


/* ══ Palette pass: two tones — plum #572932 + olive #666B54 ══════════════ */
/* headings & script lines carry the plum */
.script, .invite > .script:first-child, .invite-sign, .coverflow-title, .env-heart-text .script,
.faq-title { color: var(--plum); }
.countdown-band .script, .dark-band .script { color: var(--cream); }
/* body copy: plum-tinted ink; secondary copy: olive */
.invite-text, .story-text { color: var(--ink); }
.coverflow-text, .env-by, .rsvp-links, .faq-item p { color: var(--ink); }
.faq-item h3 span, .tl-text { color: var(--muted); }
.faq-title { color: var(--olive); }
/* rules, borders, dots */
.faq { border-color: var(--olive); }
.faq-item { border-bottom-color: rgba(var(--olive-rgb), 0.55); }
.coverflow-dots, .memory .coverflow-dots { color: var(--plum); }
.memory .coverflow-toggle { color: var(--plum); border-color: rgba(var(--plum-rgb), 0.45); background: rgba(var(--plum-rgb), 0.04); }
.memory .coverflow-toggle:hover { background: rgba(var(--plum-rgb), 0.1); }
.coverflow-nav { color: var(--plum); }
/* buttons */
.btn-outline { color: var(--plum); }
.btn-outline:hover { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.btn-outline--light { color: var(--cream); }
.btn-outline--light:hover { background: var(--cream); color: var(--plum); }
.btn-outline:active { transform: translateY(1px); }
.env-btn { color: var(--plum); border-color: rgba(var(--plum-rgb), 0.7); }
.faq-more, .rsvp-links a { color: var(--plum); }
/* vines in the secondary olive; on plum bands a warm cream */
.vines { color: var(--olive); }
.vines--art svg { fill: var(--olive) !important; }
.vines svg.vines-few { fill: var(--olive); }
.vines--light, .vines--light svg.vines-few { color: #E8D8CF; fill: #E8D8CF; }
/* plum-tinted overlays & shadows (one light source, from above) */
.hero-shade { background: linear-gradient(rgba(var(--plum-rgb), 0.28), rgba(40, 18, 24, 0.45)); }
.footer { background: linear-gradient(rgba(40, 36, 28, 0.45), rgba(40, 36, 28, 0.58)), url("../image/web/garden.jpg") center / cover no-repeat; }
.coverflow-slide { box-shadow: 0 20px 25px -5px rgba(var(--plum-rgb), 0.22), 0 8px 10px -6px rgba(var(--plum-rgb), 0.18); }
.coverflow-slide.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 22px 28px -6px rgba(var(--plum-rgb), 0.3); }
.story { box-shadow: inset 0 18px 22px -18px rgba(var(--plum-rgb), 0.2); }
.map { border-color: rgba(232, 216, 207, 0.4); }
:focus-visible { outline-color: var(--plum); }
.nav a.is-active { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }





/* ══ Fixes batch (Oct 2026) ════════════════════════════════════════════ */
/* hero: SAVE THE DATE, larger type, names stack on mobile */
.hero-save { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(0.85rem, 1.3vw, 1.05rem); font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; margin-bottom: 14px; }
.hero-kicker { font-size: clamp(1.25rem, 2.8vw, 2.2rem); }
.hero-names { font-size: clamp(4.2rem, 12.5vw, 10.5rem); }
.hero-names .hn-amp { font-size: 0.5em; vertical-align: middle; }
.hero-date, .hero-place { font-size: clamp(1.1rem, 2.2vw, 1.7rem); }
@media (max-width: 760px) {
  .hero-names { display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: clamp(3.8rem, 18vw, 5.6rem); }
  .hero-names .hn-name { display: block; white-space: nowrap; }
  .hero-names .hn-amp { display: block; font-size: 0.55em; line-height: 1.1; margin: 4px 0; }
  .hero-save { font-size: 0.85rem; letter-spacing: 0.32em; }
  .hero-kicker { font-size: 1.3rem; }
  .hero-date, .hero-place { font-size: 1rem; }
}

/* envelope: heading centred inside the heart, no RSVP button */
.env-heart-text { inset: 0 18% auto; top: 0; bottom: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.env-heart-text .script { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.05; }

/* album progress dots in plum red */
.coverflow-dots button, .memory .coverflow-dots button { background: var(--plum); opacity: 1; }
.coverflow-dots button:not(.is-active), .memory .coverflow-dots button:not(.is-active) { background: rgba(var(--plum-rgb), 0.28); }
.coverflow-dots button:hover:not(.is-active) { background: rgba(var(--plum-rgb), 0.5); }

/* two parties side by side */
.dark-band .mixed .caps { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: 0.08em; margin-top: 6px; }
.parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 980px; margin: 52px auto 0; text-align: center; }
.party { display: flex; flex-direction: column; align-items: center; padding: 34px 26px 26px; border: 1px solid rgba(232, 216, 207, 0.35); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.party-time { font-family: 'Bodoni Moda', serif; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; }
.party-name { margin-top: 10px; font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.1; }
.party-addr { margin-top: 10px; font-style: italic; font-size: 1.25rem; line-height: 1.3; opacity: 0.92; }
.party-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.party-actions .btn-outline { min-width: 150px; min-height: 48px; font-size: 0.82rem; }
.party .map { width: 100%; margin-top: 24px; }
.party .map iframe { height: 240px; }
@media (max-width: 760px) { .parties { grid-template-columns: 1fr; } }

/* ── Guestbook (Sổ lưu bút) — paper note card ── */
.guestbook { position: relative; padding: 90px 20px 120px; background: var(--cream); overflow-x: clip; }

.gb {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 54px clamp(22px, 6vw, 56px) 46px;
  border-radius: 6px;
  text-align: center;
  color: var(--plum);
  background: #FBF8F2 url("../image/thiep/giay-album.webp") center / cover;
  background-blend-mode: multiply;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 30px 50px -28px rgba(var(--plum-rgb), 0.45), 0 2px 6px rgba(var(--plum-rgb), 0.08);
}
.gb::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(var(--plum-rgb), 0.22); border-radius: 3px; pointer-events: none; }
.gb::after {
  content: "";
  position: absolute;
  left: -58px;
  bottom: -46px;
  width: 150px;
  aspect-ratio: 1;
  background: url("../image/thiep/hoa.webp") center / contain no-repeat;
  transform: rotate(-18deg);
  filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}
.gb-eyebrow { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive); }
.gb-heading { margin-top: 6px; font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: clamp(2.8rem, 7vw, 3.6rem); line-height: 1.05; color: var(--plum); }
.gb-sub { margin-top: 6px; font-style: italic; font-size: 1.15rem; color: var(--ink); }
.gb-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 6px; color: var(--plum); font-size: 0.9rem; }
.gb-divider i { width: 56px; height: 1px; background: rgba(var(--plum-rgb), 0.35); }
.gb-form { display: grid; gap: 18px; margin-top: 18px; text-align: left; }
.gb-field { display: grid; gap: 6px; }
.gb-label { display: flex; justify-content: space-between; font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); }
.gb-count { font-style: normal; letter-spacing: 0.04em; opacity: 0.8; }
.gb-form input, .gb-form textarea {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(var(--plum-rgb), 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.gb-form textarea { height: 130px; line-height: 1.35; }
.gb-form ::placeholder { color: rgba(var(--ink-rgb, 58, 35, 39), 0.38); font-style: italic; }
.gb-form input:focus, .gb-form textarea:focus { outline: none; border-color: var(--plum); background: #fff; box-shadow: 0 0 0 4px rgba(var(--plum-rgb), 0.1); }
.gb-form [aria-invalid] { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(var(--plum-rgb), 0.14); }
.gb-submit {
  justify-self: center;
  margin-top: 6px;
  padding: 14px 38px;
  border: 0;
  border-radius: 999px;
  background: var(--plum);
  color: #F4ECE6;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 20px -10px rgba(var(--plum-rgb), 0.7);
  transition: transform 0.2s var(--ease), box-shadow 0.2s, background-color 0.2s;
}
.gb-submit:hover { background: var(--plum-deep); transform: translateY(-2px); box-shadow: 0 14px 24px -12px rgba(var(--plum-rgb), 0.8); }
.gb-submit:active { transform: translateY(0) scale(0.98); }
.gb-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.gb-status { min-height: 1.4em; text-align: center; font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.85rem; color: var(--olive); }
.gb-status[data-kind="error"] { color: var(--plum); }
.gb-status[data-kind="ok"] { color: var(--plum); font-weight: 500; }
@media (max-width: 760px) { .gb::after { width: 100px; left: -30px; bottom: -34px; } }
.party-name { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: 0.14em; text-transform: uppercase; }
.gb::after { width: 120px; aspect-ratio: auto; height: 230px; left: -46px; bottom: -40px; }
@media (max-width: 760px) { .gb::after { width: 80px; height: 160px; left: -22px; bottom: -30px; } }
@media (min-width: 761px) { .hero-names { font-size: clamp(4rem, 7.6vw, 8.4rem); white-space: nowrap; } }

/* SAVE THE DATE: larger, with more room above the names */
.hero-save { font-size: clamp(1.15rem, 2vw, 1.6rem); letter-spacing: 0.4em; margin-bottom: 28px; }
@media (max-width: 760px) { .hero-save { font-size: 1.05rem; letter-spacing: 0.3em; margin-bottom: 22px; } }
.rsvp { padding-bottom: 60px; }

/* ── Countdown as a clock: each unit is a framed flip-clock tile ── */
.countdown-band { padding: 72px 16px 80px; }
.countdown { gap: clamp(8px, 2vw, 18px); margin-top: 0; align-items: center; }
.countdown div {
  position: relative;
  min-width: clamp(70px, 14vw, 120px);
  padding: 18px 10px 14px;
  border: 1px solid rgba(237, 230, 219, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 50%, rgba(0, 0, 0, 0.1) 50% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 26px -16px rgba(0, 0, 0, 0.6);
}
/* the fold line across the middle of each tile */
.countdown div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(18px + 0.5 * clamp(2.6rem, 6vw, 4rem));
  height: 1px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* hinge pins on both sides */
.countdown div::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: calc(18px + 0.5 * clamp(2.6rem, 6vw, 4rem) - 3px);
  height: 7px;
  background:
    radial-gradient(circle at 3px 50%, rgba(237, 230, 219, 0.75) 2.5px, transparent 3px) left / 7px 7px no-repeat,
    radial-gradient(circle at 4px 50%, rgba(237, 230, 219, 0.75) 2.5px, transparent 3px) right / 7px 7px no-repeat;
}
.countdown b { position: relative; z-index: 1; }
.countdown span { margin-top: 12px; font-size: clamp(0.72rem, 1.6vw, 0.95rem); letter-spacing: 0.18em; opacity: 0.85; }
.countdown i { opacity: 0.7; align-self: center; margin-bottom: 22px; }
@media (max-width: 760px) { .countdown i { display: none; } .countdown div { min-width: 0; flex: 1; max-width: 86px; padding: 14px 6px 10px; } }

/* ── Party info cards, styled like the reference ── */
.venue-heading { font-size: clamp(2.6rem, 6vw, 4rem); }
.parties { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin-top: 44px; }
.party {
  padding: clamp(28px, 4vw, 40px) clamp(18px, 3vw, 30px) 34px;
  border: 0;
  border-radius: 20px;
  background: #F1E8E6;
  color: var(--plum);
  box-shadow: 0 24px 40px -26px rgba(0, 0, 0, 0.6);
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
}
.party-title { font-family: inherit; font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 1.9rem); letter-spacing: 0.02em; text-transform: uppercase; }
.party-when { margin-top: 6px; font-size: clamp(1.05rem, 1.9vw, 1.4rem); text-transform: uppercase; }
.party-date { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 2.4vw, 22px); width: 100%; margin-top: 14px; }
.party-side { padding: 10px 0; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; font-size: clamp(1.1rem, 2.1vw, 1.55rem); text-transform: uppercase; white-space: nowrap; }
.party-day { font-family: inherit; font-size: clamp(4.4rem, 8vw, 6.4rem); line-height: 1; }
.party-lunar { margin-top: 12px; font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.party-place { margin-top: 22px; font-weight: 700; font-size: clamp(1.2rem, 2.1vw, 1.55rem); text-transform: uppercase; }
.party-addr { margin-top: 10px; font-style: normal; font-size: clamp(1.05rem, 1.8vw, 1.35rem); opacity: 1; }
.party-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 54px;
  border-radius: 999px;
  background: var(--plum);
  color: #F4ECE6;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}
.party-btn:hover { background: var(--plum-deep); transform: translateY(-1px); }
.party-btn:active { transform: translateY(0) scale(0.98); }
@media (max-width: 860px) { .parties { grid-template-columns: 1fr; max-width: 520px; } }

/* ── Consistency pass ── */
/* party cards: shared elements line up, button pinned to the bottom */
.parties { align-items: stretch; }
.party { height: 100%; }
.party-btn { margin-top: auto; }
.party-addr { margin-bottom: 22px; }
.party-when, .party-addr, .party-lunar { text-wrap: balance; }
.party-day, .countdown b { font-variant-numeric: lining-nums tabular-nums; }
/* keyboard: skip link + visible focus on new controls */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 8px; background: var(--plum); color: #F4ECE6; font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.9rem; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 12px; }
.party-btn:focus-visible, .gb-submit:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.dark-band .party-btn:focus-visible { outline-color: #F4ECE6; }

/* small fixed line under "Những khoảnh khắc" */
.memory-sub { position: relative; max-width: 48em; text-wrap: balance; margin: 4px auto 0; text-align: center; font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(0.78rem, 1.3vw, 0.92rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); }

/* ── Nav: filled pill instead of underline, sliding between links ── */
.nav { isolation: isolate; }
.nav a { position: relative; z-index: 1; padding: 8px 16px; border-radius: 999px; color: #fff; transition: color 0.35s var(--ease), opacity 0.2s; }
.nav a.is-active { text-decoration: none; font-weight: 600; }
.nav a.is-hot { color: var(--plum); opacity: 1; }
.nav-pill {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 999px;
  background: #F4ECE6;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0.96;
}
.nav-pill.is-ready { transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1), width 0.45s cubic-bezier(0.34, 1.4, 0.5, 1); }
.nav { gap: clamp(4px, 2.6vw, 40px); }
@media (max-width: 760px) { .nav a { padding: 6px 10px; } .nav { gap: 2px; } }

/* ── Text lines fade up from below as they scroll into view ── */
.reveal-text { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-text.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-text { opacity: 1; transform: none; } .nav-pill.is-ready { transition: none; } }

/* "Những khoảnh khắc" subtitle: sentence case, same size/colour as the former album captions */
.memory-sub { font-family: 'Be Vietnam Pro', sans-serif; font-size: 1rem; letter-spacing: normal; text-transform: none; color: var(--ink); margin-top: 8px; }
/* per-photo line under the album: same style as the fixed subtitle */
.memory .coverflow-text, .memory-sub { font-family: 'Be Vietnam Pro', sans-serif; font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); }
.memory .coverflow-text { min-height: 1.5em; margin-top: 16px; text-align: center; }

/* album lines use the same type as the story paragraphs: Cormorant Garamond italic */
.memory .coverflow-text, .memory-sub { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.2; color: var(--ink); }

/* ── Story: editorial layout — big italic heading right, stamp-framed photo left, text beside it ── */
.story { padding: 96px 24px 120px; }
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas: ". heading" "stamp text";
  column-gap: clamp(28px, 5vw, 64px);
  row-gap: 32px;
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}
.story-heading {
  grid-area: heading;
  justify-self: end;
  text-align: right;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--plum);
}
.story-stamp {
  grid-area: stamp;
  position: relative;
  justify-self: end;
  width: min(320px, 100%);
  aspect-ratio: 856 / 1152;
  margin: 0;
  transform: rotate(-2.5deg);
  filter: drop-shadow(0 14px 18px rgba(var(--plum-rgb), 0.22));
}
/* photo sits in the stamp's window (50px inset on an 856×1152 frame) */
.story-photo { position: absolute; inset: 4.34% 5.84%; width: 88.32%; height: 91.32%; object-fit: cover; object-position: center 35%; }
.story-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.story .story-text { grid-area: text; align-self: center; max-width: 34em; margin: 0; text-align: left; }
@media (max-width: 760px) {
  .story-grid { grid-template-columns: 1fr; grid-template-areas: "heading" "stamp" "text"; }
  .story-heading { justify-self: center; text-align: center; }
  .story-stamp { justify-self: center; width: min(250px, 72vw); }
  .story .story-text { text-align: center; justify-self: center; }
}

/* envelope links down to the guestbook */
a.envelope { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform 0.4s var(--ease); }
a.envelope:hover { transform: translateY(-4px); }
/* attendance choice pills (inside the guestbook form) */
.rsvp-choice { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.rsvp-choice legend { margin-bottom: 8px; padding: 0; }
.rsvp-pill { position: relative; cursor: pointer; }
.rsvp-pill input { position: absolute; opacity: 0; pointer-events: none; }
.rsvp-pill span {
  display: inline-block; padding: 10px 18px; border: 1px solid rgba(var(--plum-rgb), 0.35); border-radius: 999px;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.88rem; color: var(--plum);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s;
}
.rsvp-pill:hover span { border-color: var(--plum); }
.rsvp-pill input:checked + span { background: var(--plum); border-color: var(--plum); color: #F4ECE6; }
.rsvp-pill input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 3px; }


/* ── Floating music button (bottom-left; back-to-top sits bottom-right) ── */
.music-btn {
  position: fixed;
  left: 22px;
  bottom: 24px;
  z-index: 30;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--plum-rgb), 0.25);
  border-radius: 50%;
  background: rgba(251, 248, 242, 0.92);
  color: var(--plum);
  cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(var(--plum-rgb), 0.55);
  backdrop-filter: blur(6px);
  transition: transform 0.25s var(--ease), background-color 0.25s;
}
.music-btn:hover { transform: scale(1.06); }
.music-btn:active { transform: scale(0.96); }
.music-btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.music-btn .i-note { width: 22px; height: 22px; }
.music-bars { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.music-bars i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: bar 0.9s ease-in-out infinite; }
.music-bars i:nth-child(2) { animation-delay: -0.3s; }
.music-bars i:nth-child(3) { animation-delay: -0.6s; }
.music-btn.is-playing { background: var(--plum); color: #F4ECE6; }
.music-btn.is-playing .i-note { display: none; }
.music-btn.is-playing .music-bars { display: flex; }
@keyframes bar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .music-bars i { animation: none; transform: scaleY(0.7); } }
.hero-place { text-transform: none; }
/* no still photo behind the hero: plain dark tone until the video's first frame appears */
.hero { background: #2B2219; }
/* hero: first frame of the video while it loads */
.hero { background: #2B2219 url("../image/thiep/hero-poster.jpg") center / cover no-repeat; }



/* the centred hero text block covers the whole hero; let clicks pass through it
   and keep the nav on top so its links are clickable */
.hero > .hero-center { pointer-events: none; }
.hero > .nav { z-index: 5; }
.gb::after { display: none; }
.gb-form textarea[name="note"] { height: 76px; }