:root {
  --maroon: #511419;
  --maroon-2: #5c171d;
  --paper: #f5efe6;
  --card: #f9f4ed;
  --cream: #f4e9dd;
  --line: #e6dccd;
  --ink: #4a1217;
  --muted: #8a7068;
  --soft: #cdb8ab;
  --champ: #b99a63;
  --champ-line: rgba(185, 154, 99, .55);
  --serif: "EB Garamond", Baskerville, "Times New Roman", serif;
  --display: "Noto Serif Display", "EB Garamond", Georgia, serif;
  --script: "Allura", cursive;
  --names: "Great Vibes", "Allura", cursive;
  --hide: inset(-40% 100% -40% -12%);
  --show: inset(-40% -12% -40% -12%);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 18px/1.6 var(--serif);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--champ); outline-offset: 3px; }

.names-script { font-family: var(--names); font-weight: 400; }
.display { font-family: var(--display); font-stretch: 75%; font-weight: 400; line-height: 1.15; }
.eyebrow { font-size: 14px; letter-spacing: .42em; text-transform: uppercase; padding-left: .42em; }
.caps { text-transform: uppercase; font-size: clamp(13.5px, 3.6vw, 15.5px); letter-spacing: .06em; line-height: 1.7; }
.caps--lg { font-size: clamp(17px, 4.8vw, 24px); letter-spacing: .03em; }

.btn {
  position: relative; overflow: hidden;
  display: inline-block;
  padding: 13px 32px;
  border: 0; border-radius: 999px;
  background: var(--maroon-2); color: var(--cream);
  font: 600 16.5px/1 var(--serif);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 18px rgba(81, 20, 25, .28);
  transition: transform .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn--light {
  background: var(--cream); color: var(--maroon);
  font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 16px 36px;
  box-shadow: none;
}
.btn--sm { padding: 14px 28px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  animation: shine 4s ease-in-out infinite;
}
.btn--light::after, .btn--sm::after { display: none; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

.floral { position: absolute; pointer-events: none; }
.floral img {
  display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(30, 8, 10, .28));
  transform-origin: 50% 96%; animation: sway 6.5s ease-in-out infinite;
}
@keyframes sway { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
.reveal .floral img { scale: .5; rotate: -16deg; transition: scale 1.4s cubic-bezier(.2, 1.35, .4, 1) .45s, rotate 1.4s cubic-bezier(.2, 1.35, .4, 1) .45s; }
.reveal.in .floral img { scale: 1; rotate: 0deg; }
.cover .floral img { animation: bloom 1.6s cubic-bezier(.2, 1.35, .4, 1) .2s both, sway 6.5s ease-in-out 1.8s infinite; }
@keyframes bloom { from { opacity: 0; scale: .5; rotate: -16deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

.petals { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.petals span {
  position: absolute; top: -26px; width: 12px; height: 15px; border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #cf9aa2, #7d2230); opacity: .6;
  animation: fall linear infinite;
}
.petals span:nth-child(3n) { background: linear-gradient(135deg, #f3e9dd, #d9c2b0); opacity: .75; }
@keyframes fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(calc(var(--dx) * -.4), 54vh, 0) rotate(240deg); }
  100% { transform: translate3d(var(--dx), 108vh, 0) rotate(520deg); }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s ease; }
.reveal[data-anim="zoom"] { transform: scale(.94); }
.reveal.in { opacity: 1; transform: none; }
.stagger > :not(.floral) { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.stagger.in > :not(.floral) { opacity: 1; transform: none; }
.reveal .floral { opacity: 0; transition: opacity 1.4s ease .5s; }
.reveal.in .floral { opacity: 1; }

/* ---------- Bìa thư ---------- */
.cover {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(130% 90% at 30% 10%, rgba(122, 46, 54, .45) 0%, rgba(81, 20, 25, 0) 50%, rgba(28, 6, 9, .55) 100%),
    url("../images/web/marble-wine.webp") center / 900px;
  transition: opacity .9s ease, visibility .9s;
}
.cover.opened { opacity: 0; visibility: hidden; pointer-events: none; }
.cover.opened .cover__card { transform: scale(1.05); }
.cover__card {
  position: relative; overflow: hidden;
  width: min(600px, 100%);
  padding: 40px 24px 44px;
  background: url("../images/web/marble-ivory.webp") center / 620px;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  text-align: center;
  transition: transform .9s ease;
}
.cover__card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--champ-line); border-radius: 2px; pointer-events: none; z-index: 1; }
.cover__card > :not(.floral) { position: relative; z-index: 2; }
.floral--cl { left: -18px; top: 50%; margin-top: -31%; width: clamp(78px, 21%, 128px); transform: rotate(-8deg); }
.floral--cr { right: -18px; top: 50%; margin-top: -31%; width: clamp(78px, 21%, 128px); transform: scaleX(-1) rotate(-8deg); }
.cover__mono {
  width: 66px; height: 66px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--maroon); color: #dcc391;
  font-size: 19px; line-height: 1; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--champ), 0 10px 18px rgba(81, 20, 25, .3);
}
.cover__names { font-size: clamp(46px, 12.5vw, 68px); line-height: 1.15; margin: 0; }
@keyframes write { from { clip-path: var(--hide); } to { clip-path: var(--show); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.cover__names span { display: block; white-space: nowrap; }
.cover__names i { display: block; font-style: normal; font-size: .55em; line-height: 1; color: var(--champ); }
.rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 12px; font-size: 12px; color: var(--champ); }
.rule::before, .rule::after { content: ""; width: 44px; height: 1px; background: currentColor; }
.cover__date { color: var(--muted); font-size: 17px; letter-spacing: .04em; }
.cover__to { margin-top: 22px; color: var(--muted); font-size: 17px; }
/* Allura: cùng tông chữ viết tay với tên cô dâu chú rể nhưng chữ A hoa có đỉnh nhọn rõ ràng (A hoa của Great Vibes trông như chữ a thường) */
.cover__guest { font: 400 clamp(38px, 10vw, 50px)/1.2 var(--script); margin-top: 2px; overflow-wrap: anywhere; }
.cover .btn {
  margin-top: 22px; padding: 14px 44px 15px;
  font: 600 clamp(24px, 6.4vw, 30px)/1.2 var(--serif); letter-spacing: .02em;
  box-shadow: 0 0 0 1px var(--champ), 0 0 0 5px var(--card), 0 0 0 6px var(--champ-line), 0 12px 24px rgba(81, 20, 25, .3);
  animation: invite 2.4s ease-in-out infinite;
}
@keyframes invite { 50% { transform: translateY(-3px) scale(1.03); } }

.hearts { position: absolute; inset: 0; overflow: hidden; }
.hearts span { position: absolute; bottom: -30px; opacity: 0; animation: floatUp linear infinite; }
@keyframes floatUp {
  10% { opacity: .5; }
  90% { opacity: .5; }
  100% { transform: translate3d(var(--dx), -110vh, 0) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Khung trang ---------- */
.page {
  max-width: 980px; margin: 0 auto;
  background: var(--paper) url("../images/web/marble-ivory.webp") center top / 980px auto;
  border-inline: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.sec__title { font: 700 clamp(18px, 4.8vw, 21px)/1.4 var(--serif); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Hero: phong bì ---------- */
.hero { padding: 58px 20px 54px; }
.hero .eyebrow { color: var(--muted); }
.env { position: relative; width: min(78vw, 360px); aspect-ratio: 36 / 44; margin: 46px auto 0; }
.env > * { position: absolute; }
.env__flap { left: 0; right: 0; top: 30%; height: 25%; background: #3a0d11; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.env__body { left: 0; right: 0; bottom: 0; height: 46%; background: #420f14; }
.env__photo {
  right: 1%; top: 0; width: 60%; aspect-ratio: 2 / 3;
  padding: 7px; background: #fff;
  transform: rotate(9deg); transform-origin: 50% 80%;
  box-shadow: 0 10px 26px rgba(40, 10, 12, .35);
}
.env.reveal .env__photo { transform: translateY(34%) rotate(0deg); transition: transform 1.6s cubic-bezier(.2, .9, .3, 1) .5s; }
.env.reveal.in .env__photo { transform: rotate(9deg); animation: photoFloat 5.5s ease-in-out 2.4s infinite; }
@keyframes photoFloat { 50% { translate: 0 -7px; } }
.env__photo { overflow: hidden; }
.env__photo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
}
.env.reveal.in .env__photo::after { animation: sweep 1.3s ease 2.2s 1 both; }
@keyframes sweep { to { left: 140%; } }
.env__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.env__front { left: 0; right: 0; bottom: 0; height: 46%; filter: drop-shadow(0 14px 18px rgba(40, 10, 12, .32)); }
.env__front i { position: absolute; inset: 0; }
.env__front i:nth-child(1) { background: #5b181e; clip-path: polygon(0 0, 52% 52%, 0 100%); }
.env__front i:nth-child(2) { background: #53151a; clip-path: polygon(100% 0, 48% 52%, 100% 100%); }
.env__front i:nth-child(3) { background: linear-gradient(#651c23, #56161c); clip-path: polygon(0 100%, 50% 40%, 100% 100%); }
.env__seal {
  left: 50%; top: 73%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #dcc391, #b99a63 55%, #8a6c38);
  color: #8a6c38; font-size: clamp(16px, 4.6vw, 22px); line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 240, 205, .6), 0 -1px 0 rgba(80, 55, 15, .45);
  box-shadow: 0 3px 8px rgba(30, 8, 8, .5), inset 0 0 0 3px rgba(255, 240, 205, .22);
}
.env.reveal .env__seal { scale: 0; transition: scale .6s cubic-bezier(.2, 1.5, .4, 1) 1.6s; }
.env.reveal.in .env__seal { scale: 1; }
.env__floral { left: -13%; top: -8%; width: 36%; transform: rotate(-12deg); }
.hero__names { position: relative; margin-top: 52px; font-size: clamp(46px, 13vw, 96px); line-height: 1.12; color: var(--maroon-2);
  display: grid; width: max-content; max-width: 100%; margin-inline: auto; }
.hero__names span { display: block; position: relative; }
.hero__names.reveal span { clip-path: var(--hide); transition: clip-path 1.8s ease .3s; }
.hero__names.reveal.in span { clip-path: var(--show); }
.hero__names.reveal.in span:last-child { transition-delay: 2.1s; }
.hero__names.reveal i { opacity: 0; transition: opacity 1.2s ease 1.6s; }
.hero__names.reveal.in i { opacity: 1; }
.hero__names i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-style: normal; font-size: 1.25em; line-height: 1; opacity: .1;
}

/* ---------- Thẻ ---------- */
.card {
  position: relative;
  width: min(740px, calc(100% - 24px));
  margin: 0 auto;
  padding: 52px clamp(18px, 6vw, 48px) 56px;
  border-radius: 8px;
}
.card--dark {
  background: linear-gradient(170deg, #5f1a20 0%, #511419 48%, #430f14 100%);
  color: var(--cream); box-shadow: 0 20px 44px rgba(40, 10, 12, .34);
}
.card--dark::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--champ-line); border-radius: 4px; pointer-events: none; }
.card--paper { background: var(--card); box-shadow: 0 0 0 1px rgba(185, 154, 99, .35), 0 16px 36px rgba(90, 60, 40, .16); }
.card + .card, .card + section, section + .card { margin-top: 60px; }
.card__title { font: 700 clamp(18px, 4.8vw, 21px)/1.4 var(--serif); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px; }
.card--dark .card__title::after { content: ""; display: block; width: 40px; height: 1px; margin: 14px auto 0; background: var(--champ); }
.card__floral { width: 190px; }
.card__floral--r { right: -112px; top: auto; bottom: 26px; transform: rotate(8deg); }
.card__floral--l { left: -104px; top: 90px; transform: scaleX(-1) rotate(8deg); }

.parents { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 30px; }
.parents > div { padding: 0 10px; display: flex; flex-direction: column; align-items: center; }
.parents > div + div { border-left: 1px solid rgba(185, 154, 99, .4); }
.parents small { display: block; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: 4px; }
.parents b { display: block; font-size: clamp(15.5px, 4.1vw, 18.5px); font-weight: 600; line-height: 1.6; white-space: nowrap; }
.parents span { display: block; font-size: clamp(13px, 3.3vw, 14.5px); color: var(--soft); line-height: 1.5; margin-top: 4px; }
.parents a { display: inline-block; margin-top: auto; padding-top: 8px; font-size: clamp(12.5px, 3.2vw, 14px); color: var(--cream); text-underline-offset: 3px; }
.fullname { font-family: var(--names); font-stretch: normal; line-height: 1.3; white-space: nowrap; font-size: clamp(30px, 8.7vw, 62px); margin-top: 26px; color: #f6e8dc; }
.role { font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--soft); margin-top: 12px; }
.amp { font: 400 40px/1 var(--names); margin-top: 6px; color: var(--champ); }
.amp + .fullname { margin-top: 4px; }

.cer { margin-top: 38px; padding-top: 34px; position: relative; }
.cer::before { content: ""; position: absolute; top: 0; left: 50%; width: 40px; height: 1px; margin-left: -20px; background: var(--champ); }
.cer .caps--lg { color: var(--soft); max-width: 16em; margin: 0 auto; line-height: 1.5; }
.cer__addr { margin-top: 12px; font-size: clamp(14.5px, 3.8vw, 17px); color: var(--cream); }
.when { display: flex; justify-content: center; gap: 30px; margin-top: 24px; font-size: clamp(15px, 4vw, 18px); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.dateblock { display: inline-flex; align-items: center; gap: 18px; margin-top: 16px; }
.dateblock b { font: 400 clamp(52px, 14vw, 68px)/1 var(--display); padding-right: 18px; border-right: 1px solid var(--champ-line); }
.dateblock span { text-align: left; }
.dateblock i { display: block; font-style: normal; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.75; letter-spacing: .04em; text-transform: uppercase; }
.lunar { margin-top: 16px; font-size: clamp(12.5px, 3.3vw, 15px); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.note { margin-top: 12px; font-style: italic; font-size: clamp(15px, 4vw, 18px); color: var(--cream); }

.cd { display: flex; justify-content: center; gap: clamp(22px, 7vw, 40px); margin: 32px 0 6px; }
.cd b { display: block; font: 400 clamp(30px, 8vw, 38px)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cd span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.cd p { font: 400 30px/1.2 var(--script); }

.cal { width: min(400px, 100%); margin: 28px auto 0; padding: 20px 16px 22px; background: #ece2d6; color: var(--ink); border-radius: 6px; }
.cal__title { font: 400 36px/1.2 var(--script); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; font-size: 17px; margin-top: 8px; }
.cal__grid span { height: 38px; display: grid; place-items: center; position: relative; }
.cal__grid .h { font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--maroon); height: 32px; margin-bottom: 6px; }
.cal__grid .on { color: #fff; font-weight: 700; z-index: 0; }
.cal__grid .on::before {
  content: "♥"; position: absolute; z-index: -1; left: 50%; top: 50%;
  transform: translate(-50%, -52%); font-size: 42px; line-height: 1; color: var(--maroon);
  animation: beat 1.8s ease-in-out infinite;
}
@keyframes beat { 50% { transform: translate(-50%, -52%) scale(1.12); } }
.link { display: block; width: max-content; margin: 28px auto 24px; color: var(--cream); font-size: 15.5px; text-underline-offset: 4px; }

/* ---------- Album ---------- */
.album { padding: 50px 0 0; margin-bottom: 60px; }
.cf { --w: min(56vw, 300px); position: relative; height: calc(var(--w) * 1.5); margin-top: 30px; }
.cf__stage { position: absolute; inset: 0; perspective: 1200px; }
.cf__item {
  all: unset; box-sizing: border-box; position: absolute; left: 50%; top: 0;
  width: var(--w); height: 100%; margin-left: calc(var(--w) / -2);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  box-shadow: 0 14px 30px rgba(40, 10, 12, .26);
  transition: transform .7s cubic-bezier(.3, .8, .3, 1), opacity .7s ease;
}
.cf__item img { width: 100%; height: 100%; object-fit: cover; }
.cf__item.cur { box-shadow: 0 22px 44px rgba(40, 10, 12, .36); }
.cf__item.cur img { animation: kenburns 4.2s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.cf__item::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
}
.cf__item.cur::after { animation: sweep 1.1s ease .25s 1 both; }
.cf__item:focus-visible { outline: 1px solid var(--champ); outline-offset: 3px; }
.cf__nav {
  position: absolute; top: 50%; z-index: 20; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(40, 30, 30, .55); color: #fff; font: 400 20px/1 var(--serif); cursor: pointer;
  display: grid; place-items: center; padding: 0 0 3px;
}
.cf__prev { left: calc(50% - var(--w) / 2 - 46px); }
.cf__next { right: calc(50% - var(--w) / 2 - 46px); }
.cf__dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; padding: 0 20px; }
.cf__dots i { width: 6px; height: 6px; border-radius: 99px; background: #d9cbbf; transition: width .3s, background .3s; }
.cf__dots i.on { width: 20px; background: var(--maroon-2); }

.lb { position: fixed; inset: 0; z-index: 200; background: rgba(20, 6, 8, .95); display: grid; place-items: center; }
.lb img { max-width: 94vw; max-height: 84vh; object-fit: contain; animation: lbIn .45s cubic-bezier(.2, .9, .3, 1); }
@keyframes lbIn { from { opacity: 0; transform: scale(.9); } }
.lb button { position: absolute; background: none; border: 0; color: var(--cream); cursor: pointer; font: 400 44px/1 var(--serif); padding: 12px 18px; }
.lb__close { top: max(6px, env(safe-area-inset-top)); right: 6px; }
.lb__prev { left: 0; top: 50%; transform: translateY(-50%); }
.lb__next { right: 0; top: 50%; transform: translateY(-50%); }
.lb__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--cream); font-size: 13px; letter-spacing: .2em; }

/* ---------- Địa điểm ---------- */
.place { width: min(740px, calc(100% - 24px)); margin: 50px auto 0; }
.place__name { margin-top: 12px; font-weight: 600; font-size: 19px; }
.place__addr { font-size: 16px; color: var(--muted); }
.place__map { margin-top: 18px; padding: 6px; background: var(--card); box-shadow: 0 0 0 1px rgba(185, 154, 99, .4); }
.place__map:empty { display: none; }
.place__map iframe { display: block; width: 100%; height: 340px; border: 0; filter: saturate(.55) sepia(.12); }
.place__link { display: inline-block; margin-top: 20px; font-weight: 700; font-size: 17px; color: var(--maroon-2); text-decoration: none; }
.place__link:hover { text-decoration: underline; }

/* ---------- Lịch trình ---------- */
.tl { list-style: none; margin: 0 auto; padding: 0; width: max-content; max-width: 100%; text-align: left; position: relative; }
.tl::before { content: ""; position: absolute; left: 86px; top: 12px; bottom: 12px; width: 1px; background: var(--champ-line); }
.tl li { display: grid; grid-template-columns: 62px 49px 1fr; align-items: center; padding: 14px 0; }
.tl time { grid-column: 1; grid-row: 1; text-align: right; font-size: 18px; }
.tl li::before { content: ""; grid-column: 2; grid-row: 1; justify-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--cream); position: relative; }
.tl span { grid-column: 3; grid-row: 1; font-size: 16.5px; color: var(--cream); }

/* ---------- Form ---------- */
.form { display: grid; gap: 14px; text-align: left; }
.form label { font-size: 14px; color: var(--muted); }
.form input:not([type="radio"]), .form select, .form textarea {
  display: block; width: 100%; padding: 11px 14px;
  border: 1px solid var(--maroon); border-radius: 5px; background: rgba(255, 255, 255, .5);
  font: 400 16px/1.4 var(--serif); color: var(--ink);
}
.form select { margin-top: 4px; }
.form ::placeholder { color: #a39088; font-size: 15px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(92, 23, 29, .14); }
.form textarea { resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.form .radio { font-size: 16.5px; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.form .radio input { accent-color: var(--maroon); width: 17px; height: 17px; margin: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.form__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.form__actions--end { justify-content: flex-end; }
.suggest {
  width: 34px; height: 32px; border: 0; border-radius: 5px; cursor: pointer;
  background: #e8ddd1; color: var(--maroon-2); font-size: 14px;
  transition: background .2s;
}
.suggest:hover { background: #dccdbe; }

/* ---------- Sổ lưu bút ---------- */
.wishes { margin-top: 68px; }
.card--form { width: min(580px, calc(100% - 40px)); padding: 46px 44px 56px; border-radius: 10px; }
.wish__floral { left: -150px; bottom: -84px; width: 220px; transform: rotate(-8deg); z-index: 2; }
.wishlist {
  list-style: none; width: min(740px, calc(100% - 24px)); margin: 84px auto 0; padding: 0 12px 0 0;
  text-align: left; max-height: 470px; overflow-y: auto; display: grid; gap: 12px;
  scrollbar-width: thin; scrollbar-color: #b9a59a transparent;
}
.wishlist li { background: rgba(255, 255, 255, .5); border: 1px solid #d3c3b4; border-radius: 5px; padding: 14px 16px 16px; }
.wishlist li > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wishlist b { font-size: 16px; }
.wishlist small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.wishlist p { font-size: 15.5px; margin-top: 6px; overflow-wrap: anywhere; white-space: pre-line; }
.wishlist .empty { border: 0; background: none; text-align: center; color: var(--muted); font-style: italic; }

/* ---------- Quà mừng ---------- */
.gift { margin-top: 74px; }
.lixi {
  all: unset; display: block; position: relative; cursor: pointer;
  width: min(300px, 74vw); margin: 26px auto 0;
  animation: float 4.5s ease-in-out infinite;
  transition: scale .3s;
}
.lixi:hover { scale: 1.04; }
.lixi:focus-visible { outline: 1px solid var(--champ); outline-offset: 6px; }
.lixi svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 20px rgba(40, 10, 12, .3)); }
.lixi i { position: absolute; font-style: normal; color: var(--champ); animation: twinkle 2.4s ease-in-out infinite; }
.lixi i:nth-of-type(1) { left: 20%; top: 2%; font-size: 12px; }
.lixi i:nth-of-type(2) { right: 12%; top: 10%; font-size: 15px; animation-delay: 1.1s; }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.1); } }
.gift__hint { margin-top: 8px; font-size: 15px; font-style: italic; color: var(--muted); }

.modal {
  position: fixed; inset: 0; z-index: 150; padding: 16px;
  display: grid; place-items: center; overflow-y: auto;
  background: rgba(30, 18, 18, .5); animation: fadeIn .3s ease;
}
.modal__box { position: relative; width: min(640px, 100%); border-radius: 12px; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); animation: rise .45s cubic-bezier(.2, .9, .3, 1); }
.modal__box--sm { width: min(420px, 100%); }
.modal__floral { left: -26px; top: -46px; width: 118px; transform: rotate(-14deg); z-index: 3; }
.modal__head { border-radius: 12px 12px 0 0; position: relative; background: linear-gradient(170deg, #5f1a20, #511419); color: var(--cream); padding: 24px 60px; border-bottom: 1px solid var(--champ); }
.modal__head h2 { font: 700 17px/1.3 var(--serif); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.modal__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--champ);
  background: none; color: var(--cream); font: 400 22px/1 var(--serif); cursor: pointer; padding: 0 0 3px;
}
.modal__body { border-radius: 0 0 12px 12px; background: var(--card); padding: 30px 24px 28px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px 16px; text-align: center; }
.giftcard h3 { font: 700 19px/1.4 var(--serif); letter-spacing: .06em; }
.giftcard__qr { width: 178px; margin: 16px auto 12px; padding: 8px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(185, 154, 99, .5), 0 8px 18px rgba(60, 30, 20, .14); }
.giftcard__qr img { width: 100%; height: auto; }
.giftcard .bank { font-size: 17px; font-weight: 600; color: var(--ink); }
.giftcard .acc { font: 500 24px/1.3 var(--display); letter-spacing: .05em; }
.giftcard .holder { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.giftcard .todo { color: var(--muted); font-style: italic; font-size: 13px; margin-top: 10px; }
.giftcard__actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.chip { border: 0; border-radius: 999px; padding: 7px 14px; background: #ece2d6; color: var(--ink); font: 400 14px/1.3 var(--serif); text-decoration: none; cursor: pointer; transition: background .2s; }
.chip:hover { background: #e0d2c3; }

/* ---------- Chân trang ---------- */
.footer { padding: 50px 10px 30px; }
.footer__thanks { font: 400 clamp(15px, 4.2vw, 32px)/1.4 var(--names); color: var(--maroon); white-space: nowrap; }
.footer__credit { margin-top: 26px; font-size: 10px; color: var(--muted); opacity: .75; }

/* ---------- Nhạc, toast ---------- */
.music {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--champ);
  background: var(--maroon); color: #dcc391; font-size: 17px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(40, 10, 12, .35);
}
.music span { display: block; }
.auto {
  position: fixed; right: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 54px); z-index: 50;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--champ);
  background: var(--card); color: var(--maroon); cursor: pointer; padding: 0;
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(40, 10, 12, .25);
}
.auto span { width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
.auto.on span { width: 10px; height: 12px; border-width: 0 3px; transform: none; animation: none; }
.auto:not(.on) span { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(1px) rotate(45deg); } }
.music.playing span { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: 76px; z-index: 300;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--maroon); color: var(--cream);
  padding: 11px 22px; border-radius: 999px; font-size: 13.5px;
  max-width: calc(100vw - 32px); text-align: center;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Tên chú rể lệch trái phía trên, tên cô dâu lệch phải phía dưới, trái tim ở giữa */
.hero__names span:first-child { justify-self: start; margin-right: 1.15em; }
.hero__names span:last-child { justify-self: end; margin-left: 1.15em; }
.hero__names i {
  position: static; transform: none; justify-self: center;
  font: 400 .36em/1 var(--serif); color: var(--maroon-2); margin: -.1em 0 -.05em;
  animation: heartbeat 1.8s ease-in-out infinite;
}
@keyframes heartbeat { 0%, 100% { scale: 1; } 12% { scale: 1.22; } 24% { scale: 1; } 36% { scale: 1.16; } 48% { scale: 1; } }

.stagger > .fullname { opacity: 1; transform: none; clip-path: var(--hide); transition: clip-path 1.8s ease; }
.stagger.in > .fullname { clip-path: var(--show); }

/* Màn hình cỡ vừa: kéo bó hoa vào trong để không bị cắt ở mép trang */
@media (min-width: 601px) and (max-width: 1000px) {
  .card__floral { width: 150px; }
  .card__floral--r { right: -44px; }
  .card__floral--l { left: -44px; }
}

@media (max-width: 600px) {
  .card__floral { width: 92px; }
  .card__floral { width: 84px; }
  .card__floral--r { right: -34px; top: -158px; bottom: auto; transform: rotate(52deg); }
  .card__floral--l { left: -34px; top: -158px; transform: scaleX(-1) rotate(52deg); }
  .cf__prev { left: 8px; }
  .cf__next { right: 8px; }
  .page { border-inline: 0; }
  .card--form { padding: 38px 24px 52px; }
  .wish__floral { left: -34px; bottom: -104px; width: 150px; }
  .modal__head { padding: 20px 56px; }
  .footer { padding-bottom: 132px; }   /* chừa chỗ cho hai nút nổi ở góc phải */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger > :not(.floral), .reveal .floral, .hero__names.reveal span { opacity: 1; transform: none; transition: none; }
  .env.reveal .env__photo { transform: rotate(9deg); transition: none; }
  .env.reveal .env__seal { scale: 1; transition: none; }
  .btn::after, .cal__grid .on::before, .music.playing span, .lixi, .lixi i, .modal, .modal__box,
  .auto span, .floral img, .cover .floral img, .env.reveal.in .env__photo, .env__photo::after, .cf__item.cur img, .cf__item::after, .lb img { animation: none; }
  .reveal .floral img { scale: 1; rotate: 0deg; transition: none; }
  .petals { display: none; }
  .cover .btn { animation: none; }
  .hero__names.reveal span, .stagger > .fullname { clip-path: none; }
  .hero__names.reveal i { opacity: 1; transition: none; }
  .hero__names i { animation: none; }
  .hearts { display: none; }
  .cf__item { transition: none; }
}