/* ==========================================================
   ĐỔI MÀU / FONT: chỉ sửa trong :root bên dưới.
   Tông hồng sang: giấy hồng phấn, chữ hồng rượu vang, điểm nhũ vàng champagne.
   ========================================================== */
:root {
  --paper: #F7E4E8;          /* nền giấy hồng phấn */
  --card: #FDF5F6;           /* giấy thiệp, thẻ */
  --blush: #F0C9D4;          /* hồng nhạt: phong bì, nút */
  --rose: #E2A1B4;           /* hồng đậm hơn */
  --wine: #7A2943;           /* chữ chính hồng rượu vang (tương phản > 8:1 trên nền) */
  --wine-soft: #96475F;      /* chữ phụ */
  --text: #5E2D3B;           /* chữ thân bài */
  --gold: #A9844F;           /* nhũ vàng: chữ nhỏ, đường viền */
  --gold-light: #E3CB9C;
  --gold-line: rgba(169, 132, 79, 0.55);
  --shadow: 0 18px 36px -22px rgba(122, 41, 67, 0.5);

  --font-caps: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sign: "Allison", "Great Vibes", cursive;      /* tiêu đề chữ ký */
  --font-name: "Great Vibes", "Segoe Script", cursive; /* tên người */

  --page-w: 480px;
  --gutter: 22px;
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, #F7DCE3, transparent 42%),
    radial-gradient(circle at 88% 82%, #F4D4DD, transparent 46%),
    #E8C3CE;
  color: var(--text);
  font: 500 1.2rem/1.7 var(--font-body);
  font-variant-numeric: lining-nums;   /* số thẳng hàng 03, 2026 thay vì số kiểu cổ */
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  padding: 8px 14px; border-radius: 999px; background: var(--wine); color: var(--card);
}
.skip-link:focus { top: 12px; }

/* Tên khách và dữ liệu: luôn tự xuống dòng, không tràn ngang */
[data-guest-name], [data-field] { overflow-wrap: anywhere; text-wrap: balance; }

/* Trang thiệp: một cột như tấm thiệp in, trên máy tính đặt giữa nền hồng */
.page {
  position: relative;
  max-width: var(--page-w); min-height: 100vh; margin: 0 auto;
  overflow-x: clip;
  background:
    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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .48 0 0 0 0 .16 0 0 0 0 .26 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
  text-align: center;
}
.section { padding: 64px var(--gutter); overflow-x: clip; }

.script-title {
  color: var(--wine); font-family: var(--font-sign); font-weight: 400;
  font-size: clamp(3.4rem, 15vw, 4.4rem); line-height: 1;
}
.section-lead { max-width: 30ch; margin: 10px auto 0; color: var(--wine-soft); font-style: italic; }

/* Đường chỉ vàng có hạt kim cương ở giữa */
.ornament {
  display: flex; align-items: center; gap: 26px;
  width: 190px; height: 14px; margin: 26px auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l5 9-5 9-5-9z' fill='%23A9844F'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament::after { background: linear-gradient(90deg, var(--gold), transparent); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 30px;
  border: 1px solid var(--wine); border-radius: 999px;
  background: var(--wine); color: var(--card);
  font-family: var(--font-caps); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: 0.6; transform: none; }
.button-outline { background: transparent; color: var(--wine); }
.button-outline:hover { background: var(--wine); color: var(--card); }
.text-button {
  margin-top: 18px; padding: 8px 4px;
  border: 0; border-bottom: 1px solid currentColor; background: none;
  color: var(--wine); font-weight: 600; cursor: pointer;
}

/* Con dấu sáp hoa ly dùng chung */
.seal {
  position: absolute; display: grid; place-items: center; aspect-ratio: 1; padding: 0;
  border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 36% 30%, #EDB3C3 0%, #CF8099 38%, #AE5873 72%, #933F5A 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.14),
    inset 0 0 0 8px rgba(110, 30, 55, 0.2),
    inset 0 -3px 6px rgba(90, 25, 45, 0.35),
    0 6px 12px -4px rgba(122, 41, 67, 0.55);
  translate: -50% -50%;
}
.seal svg { display: block; width: 66%; height: auto; aspect-ratio: 1; overflow: visible; stroke: var(--gold-light); stroke-width: 3.2; filter: drop-shadow(1px 1.5px 0 rgba(90, 25, 45, 0.55)); }

/* ==========================================================
   MÀN MỞ THIỆP: phong bì niêm con dấu sáp
   Trình tự (body.is-opening): dấu vỡ → nắp lật → thiệp rút lên rồi ra trước → polaroid trượt vào
   ========================================================== */
.cover {
  --env-w: min(84vw, 380px, 46vh);
  --env-h: calc(var(--env-w) / 1.42);
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 3.2vh, 30px);
  padding: 24px var(--gutter) 40px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 247, 248, 0.75), transparent 60%),
    linear-gradient(180deg, #F9DEE6 0%, #F3C4D2 55%, #F8DCE4 100%);
  text-align: center;
}

/* Nền: hoa ly lớn nhòe, lấp lánh, giọt nước, sao (hạt lấp lánh do js/opening.js rải) */
.cover-scene { position: absolute; inset: 0; pointer-events: none; }
.scene-lily {
  position: absolute; width: min(78vw, 520px); opacity: 0.5;
  filter: blur(5px) saturate(1.1);
  animation: scene-sway 18s ease-in-out infinite alternate;
}
.scene-lily-1 { left: -22%; top: -8%; rotate: -18deg; }
.scene-lily-2 { right: -26%; top: 26%; width: min(70vw, 460px); rotate: 32deg; animation-duration: 22s; animation-delay: -6s; }
.scene-lily-3 { left: 4%; bottom: -16%; width: min(64vw, 420px); rotate: 160deg; opacity: 0.38; animation-duration: 20s; animation-delay: -11s; }
.scene-sparkles { position: absolute; inset: 0; }
.sparkle, .droplet, .star { position: absolute; display: block; }
.sparkle {
  width: var(--s, 14px); aspect-ratio: 1;
  background: #FFFFFF;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 6px #FFFFFF);
  animation: twinkle var(--d, 3s) ease-in-out var(--delay, 0s) infinite;
}
.droplet {
  width: var(--s, 10px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95) 0 16%, rgba(255, 255, 255, 0.28) 38%, rgba(255, 255, 255, 0.06) 70%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset -1px -2px 3px rgba(155, 63, 92, 0.18), 0 1px 2px rgba(155, 63, 92, 0.15);
}
.star {
  width: var(--s, 18px); aspect-ratio: 1;
  background: var(--c, #F5B6C6);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: star-drift var(--d, 9s) ease-in-out var(--delay, 0s) infinite alternate;
}

.cover-title { position: relative; z-index: 3; display: grid; line-height: 1; transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
.cover-title-script {
  color: var(--wine); font-family: var(--font-name); font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 5.6rem); line-height: 1.05;
  text-shadow: 0 2px 10px rgba(255, 247, 248, 0.8);
  rotate: -4deg;
}
.cover-title-caps {
  margin-top: -0.12em;
  color: var(--wine); font-family: var(--font-caps); font-weight: 500;
  font-size: clamp(1.9rem, 9.2vw, 3rem); letter-spacing: 0.1em; text-transform: uppercase;
}

/* Phong bì */
.envelope {
  position: relative; z-index: 3;
  width: var(--env-w); height: var(--env-h);
  perspective: 1400px;
  transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.env-back {
  position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(180deg, #D97391, #E68BA4);
  box-shadow: 0 26px 40px -22px rgba(116, 48, 74, 0.6);
}
.env-pocket {
  position: absolute; inset: 0; z-index: 3;
  border-radius: 10px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(155, 63, 92, 0.16) 50%, transparent calc(50% + 1px)) left bottom / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), rgba(155, 63, 92, 0.16) 50%, transparent calc(50% + 1px)) right bottom / 50% 100% no-repeat,
    linear-gradient(165deg, #F4B3C4, #EC98AE 60%, #E58AA2);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.env-address {
  position: absolute; left: 8%; right: 8%; bottom: 6%;
  display: flex; justify-content: center; align-items: baseline; gap: 6px;
  color: var(--wine); font-size: 0.85rem; font-style: italic; white-space: nowrap;
}
.env-address strong {
  overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-name); font-size: 1.55rem; font-style: normal; font-weight: 400;
}
.env-flap {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 100%; height: 58%;
  background: linear-gradient(180deg, #F7C2D0, #EDA0B5 70%, #E492A9);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform 0.75s cubic-bezier(0.5, 0, 0.3, 1) 0.35s, z-index 0s linear 0.72s;
}
/* Lá thư: ban đầu nằm trong phong bì; phần thò xuống dưới đáy phong bì được che bằng clip-path */
.env-letter {
  --hide: inset(0 0 calc(100% - var(--env-h) * 0.86) 0);
  position: absolute; left: 6%; top: 8%; z-index: 1;
  width: 88%;
  clip-path: var(--hide);
}
.letter-paper {
  position: relative;
  display: grid; justify-items: center; gap: 2px;
  padding: 26px 18px 24px;
  background: #FFFBF8;
  color: var(--wine);
  /* mép răng cưa như tem thư */
  -webkit-mask: radial-gradient(circle 5px, transparent 97%, #000) -7px -7px / 14px 14px, linear-gradient(#000, #000) center / calc(100% - 12px) calc(100% - 12px) no-repeat;
  mask: radial-gradient(circle 5px, transparent 97%, #000) -7px -7px / 14px 14px, linear-gradient(#000, #000) center / calc(100% - 12px) calc(100% - 12px) no-repeat;
}
.env-letter { filter: drop-shadow(0 10px 14px rgba(116, 48, 74, 0.25)); }
.letter-clip {
  position: absolute; z-index: 1; left: 14px; top: -14px; width: 20px;
  stroke: #C9748C; rotate: -12deg;
}
.letter-eyebrow { font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase; }
.letter-guest, .letter-grad {
  max-width: 100%;
  font-family: var(--font-name); font-weight: 400; line-height: 1.1;
  overflow-wrap: anywhere; text-wrap: balance;
}
.letter-guest { font-size: clamp(2.2rem, 10.5vw, 2.9rem); }
.letter-to { margin-top: 2px; font-size: 0.92rem; font-style: italic; }
.letter-grad { font-size: clamp(1.9rem, 9vw, 2.5rem); }
.letter-date { margin-top: 4px; font-size: 0.85rem; letter-spacing: 0.24em; }

/* Nút mở thiệp: trái tim nhỏ viền nhũ vàng gài ở mũi nắp phong bì (vùng chạm 56px, tim thấy ~46px) */
.wax-seal {
  position: absolute; left: 50%; top: 58%; z-index: 5;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  padding: 5px; border: 0; border-radius: 50%;
  background: none;
  cursor: pointer;
  animation: seal-breathe 1.6s ease-in-out infinite;
}
.wax-seal::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  animation: seal-ring 1.6s ease-out infinite;
  pointer-events: none;
}
.wax-seal svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgba(116, 48, 74, 0.4)); }
.wax-seal:focus-visible { outline: 2px dashed var(--wine); outline-offset: 4px; }
.cover-hint {
  position: relative; z-index: 3;
  color: var(--wine); font-size: 0.98rem; font-style: italic;
  animation: hint-glow 2.4s ease-in-out infinite;
}

/* Ảnh polaroid, bó hoa ly, chùm ngọc trai */
.cover-polaroid {
  position: absolute; z-index: 7;
  left: max(3vw, calc(50% - var(--env-w) / 2 - 24px)); bottom: clamp(56px, 10vh, 120px);
  width: clamp(108px, 29vw, 150px); margin: 0; padding: 8px 8px 30px;
  background: #FFFFFF; box-shadow: 0 16px 26px -12px rgba(116, 48, 74, 0.55);
  opacity: 0; transform: translate(-40vw, 30vh) rotate(-30deg);
  pointer-events: none;
}
.cover-polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.cover-polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 3px;
  padding-inline: 6px;
  color: var(--wine); font-family: var(--font-name); font-size: 1.2rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cover-bouquet {
  position: absolute; z-index: 2; left: -8%; bottom: -6%;
  width: clamp(120px, 34vw, 200px); rotate: 14deg; pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(116, 48, 74, 0.25));
}
.cover-pearls { position: absolute; z-index: 2; right: 4%; bottom: 6%; width: 110px; height: 110px; pointer-events: none; }
.cover-pearls span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, #FFFFFF 0 12%, #F6EEF0 34%, #E3D3D8 68%, #CDB7BE);
  box-shadow: 0 6px 10px -4px rgba(116, 48, 74, 0.35);
  animation: pearl-bob 5s ease-in-out infinite alternate;
}
.cover-pearls span:nth-child(1) { width: 56px; height: 56px; right: 18px; bottom: 6px; }
.cover-pearls span:nth-child(2) { width: 34px; height: 34px; right: 0; bottom: 54px; animation-delay: -1.5s; }
.cover-pearls span:nth-child(3) { width: 24px; height: 24px; right: 70px; bottom: 58px; animation-delay: -3s; }
.cover-pearls span:nth-child(4) { width: 15px; height: 15px; right: 44px; bottom: 82px; animation-delay: -2s; }
.cover-continue {
  position: absolute; z-index: 8; left: 0; right: 0; bottom: 16px;
  color: var(--wine); font-size: 0.95rem; font-style: italic;
  opacity: 0; pointer-events: none;
}

/* --- Mở phong bì --- */
body.is-opening .wax-seal { animation: seal-break 0.5s cubic-bezier(0.5, 0, 0.7, 0.4) forwards; pointer-events: none; }
body.is-opening .wax-seal::after { animation: none; opacity: 0; }
body.is-opening .cover-hint { opacity: 0; animation: none; transition: opacity 0.3s; }
body.is-opening .env-flap { transform: rotateX(180deg); z-index: 0; }
body.is-opening .env-letter { animation: letter-out 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.95s forwards; }
body.is-opening .envelope { transform: translateY(var(--env-drop, 9vh)); transition-delay: 1.75s; }
body.is-opening .cover-title { transform: translateY(-6vh) scale(0.8); transition-delay: 1.5s; }
body.is-opening .cover-polaroid { animation: polaroid-in 0.9s cubic-bezier(0.2, 1.2, 0.4, 1) 2.4s forwards; }
body.is-revealing .cover { cursor: pointer; }
body.is-revealing .cover-continue { opacity: 1; animation: hint-glow 2.4s ease-in-out 0.4s infinite both; }
body.is-leaving .cover { animation: cover-away 0.8s cubic-bezier(0.5, 0, 0.6, 1) forwards; }

@keyframes letter-out {
  0% { transform: translateY(0); z-index: 1; clip-path: var(--hide); }
  52% { transform: translateY(-80%); z-index: 1; clip-path: var(--hide); }
  53% { transform: translateY(-80%); z-index: 6; clip-path: inset(-30%); }
  100% { transform: translateY(-50%) scale(1.08); z-index: 6; clip-path: inset(-30%); }
}
@keyframes seal-break {
  30% { transform: scale(1.18); }
  100% { transform: scale(0.2) rotate(40deg); opacity: 0; }
}
@keyframes polaroid-in {
  from { opacity: 0; transform: translate(-40vw, 30vh) rotate(-30deg); }
  to { opacity: 1; transform: translate(0, 0) rotate(-8deg); }
}
@keyframes seal-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes seal-ring { from { transform: scale(0.85); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes hint-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes star-drift { from { transform: translateY(0) rotate(0deg); opacity: 0.5; } to { transform: translateY(-18px) rotate(40deg); opacity: 0.95; } }
@keyframes scene-sway { from { transform: translate(0, 0) scale(1); } to { transform: translate(14px, -18px) scale(1.06); } }
@keyframes pearl-bob { to { transform: translateY(-6px); } }

/* Ánh nhũ vàng bung từ con dấu (js/sparkles.js): nằm trên phong bì, dưới polaroid */
.burst-layer { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.cover .burst-layer { z-index: 5; }
.burst-item { position: absolute; display: block; will-change: transform, opacity; }
.burst-glint, .burst-spark, .glitter-bit.is-star {
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.burst-glint {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #FFF3D6, #D8B271 45%, #A9844F 70%, #F2DDB0);
  filter: drop-shadow(0 0 5px rgba(255, 230, 170, 0.95));
}
.burst-spark { width: 16px; height: 16px; background: #FFFFFF; filter: drop-shadow(0 0 6px #FFFFFF); }
.burst-petal {
  width: 13px; height: 19px;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, var(--card), var(--rose) 70%, #C9768F);
}
.burst-pearl {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF, var(--card) 40%, #E8D6DA);
  box-shadow: 0 1px 2px rgba(116, 48, 74, 0.25);
}

/* Kim tuyến vàng rơi một đợt khi vừa vào thiệp */
.glitter-rain { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; }
.glitter-bit {
  position: absolute; top: 0; display: block;
  width: var(--size, 6px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF6DC, #D9B574 55%, #A9844F);
  box-shadow: 0 0 6px rgba(255, 226, 160, 0.9);
}
.glitter-bit.is-star { border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 4px rgba(255, 230, 170, 0.95)); }

/* Rời phong bì: cả màn phóng nhẹ về phía người xem rồi nhòe tan; trang thiệp hiện dần từ mờ sang rõ */
@keyframes cover-away {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.18); filter: blur(10px); visibility: hidden; }
}
body.is-leaving .page, body.is-open .page { animation: page-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }  /* backwards: xong là bỏ hẳn filter/transform */
@keyframes page-in {
  from { opacity: 0; transform: scale(0.97); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================
   ĐẦU THIỆP: lời mời + bộ ảnh ghép
   Bộ ảnh ghép dùng đơn vị cqw (theo bề ngang khung) nên giữ nguyên tỉ lệ trên mọi màn hình.
   ========================================================== */
.hero { padding: 56px var(--gutter) 34px; }
.hero-title { display: grid; justify-items: center; gap: 4px; font-weight: 400; }
.hero-title:focus { outline: none; }
.hero-kicker, .hero-line {
  color: var(--wine); font-family: var(--font-caps); font-weight: 500;
  font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.5;
}
.hero-kicker { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.32em; }
.hero-guest {
  max-width: 100%;
  color: var(--wine); font-family: var(--font-name); font-weight: 400;
  font-size: clamp(2.8rem, 13vw, 3.7rem); line-height: 1.15;
}

.collage {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 0.8; margin-top: 26px;
}
.collage > * { position: absolute; }

/* Phong bì có ảnh rút lên */
.collage-envelope { left: 21%; top: 4%; width: 58%; aspect-ratio: 1.45; }
.ce-back, .ks-back {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(180deg, #E9AFC0, #F2C8D3);
  box-shadow: var(--shadow);
}
.ce-photo {
  position: absolute; left: 10%; bottom: 16%; width: 80%; height: 112%;
  padding: 2.2cqw; background: #FFFFFF; box-shadow: 0 6px 14px -8px rgba(122, 41, 67, 0.5);
  transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) 0.35s;
}
.ce-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.js-ready .collage-envelope:not(.is-in) .ce-photo { transform: translateY(34%); }
/* Mặt trước phong bì: lớp hình chữ V, bóng đổ đặt ở khối cha để không bị cắt */
.ce-pocket, .ks-pocket { position: absolute; inset: 0; filter: drop-shadow(0 -3px 4px rgba(122, 41, 67, 0.2)); }
.ce-pocket::before, .ks-pocket::before {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--gold-line) 50%, transparent calc(50% + 1px)) left bottom / 50% 74% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--gold-line) 50%, transparent calc(50% + 1px)) right bottom / 50% 74% no-repeat,
    linear-gradient(165deg, #F8DAE2, #EFBCCA);
  clip-path: polygon(0 26%, 50% 64%, 100% 26%, 100% 100%, 0 100%);
}
.ce-seal { left: 50%; top: 64%; width: 25%; }

/* Polaroid */
.collage-polaroid {
  left: 1%; top: 37%; width: 42%;
  padding: 2.4cqw 2.4cqw 8cqw; background: #FFFFFF;
  box-shadow: var(--shadow); rotate: -6deg;
}
.collage-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Khung tên viền ren, chỉ vàng */
.collage-name { left: 47%; top: 35%; width: 51%; filter: drop-shadow(0 12px 16px rgba(122, 41, 67, 0.22)); }
.name-frame, .stamp {
  position: relative; isolation: isolate;
  display: grid; place-content: center; justify-items: center;
}
.name-frame { aspect-ratio: 0.9; padding: 6cqw 4cqw; gap: 1cqw; }
.name-frame::before, .stamp::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--card);
  box-shadow: inset 0 0 0 2.2cqw var(--card), inset 0 0 0 calc(2.2cqw + 1px) var(--gold-line);
  /* mép ren: các nửa hình tròn đều nhau quanh viền */
  -webkit-mask: radial-gradient(circle 1.6cqw, transparent 96%, #000) -1.6cqw -1.6cqw / 4cqw 4cqw, linear-gradient(#000, #000) center / calc(100% - 3cqw) calc(100% - 3cqw) no-repeat;
  mask: radial-gradient(circle 1.6cqw, transparent 96%, #000) -1.6cqw -1.6cqw / 4cqw 4cqw, linear-gradient(#000, #000) center / calc(100% - 3cqw) calc(100% - 3cqw) no-repeat;
}
.nf-script {
  max-width: 100%;
  color: var(--wine); font-family: var(--font-name); font-size: 9cqw; line-height: 1.1;
}
.nf-caps { color: var(--gold); font-family: var(--font-caps); font-size: 2.3cqw; letter-spacing: 0.26em; text-transform: uppercase; }
.collage-lily { position: absolute; z-index: 2; right: -14%; top: -30%; width: 40%; rotate: 22deg; pointer-events: none; }
.collage-blossom { position: absolute; z-index: 2; right: -5%; bottom: -5%; width: 20%; pointer-events: none; }

/* Tem ngày */
.collage-date { left: 31%; top: 70%; width: 33%; aspect-ratio: 0.95; padding: 3cqw; filter: drop-shadow(0 12px 16px rgba(122, 41, 67, 0.22)); }
.cd-dm { color: var(--wine); font-family: var(--font-caps); font-size: 7.4cqw; line-height: 1.1; }
.cd-weekday { margin-top: 0.6cqw; color: var(--gold); font-family: var(--font-caps); font-size: 2.6cqw; letter-spacing: 0.24em; text-transform: uppercase; }
.cd-time { color: var(--wine); font-family: var(--font-caps); font-size: 4.4cqw; letter-spacing: 0.06em; }

.collage-save {
  left: 3%; top: 78%; width: 27%;
  color: var(--wine); font-family: var(--font-sign); font-size: 10cqw; line-height: 0.72; rotate: -8deg;
}
.collage-place { left: 67%; top: 79%; width: 32%; }
.cp-script { color: var(--wine); font-family: var(--font-sign); font-size: 9.5cqw; line-height: 0.9; }
.cp-venue { margin-top: 1cqw; color: var(--text); font-size: 3.6cqw; line-height: 1.35; }

.scroll-cue {
  display: inline-block; margin-top: 18px;
  color: var(--wine); font-family: var(--font-caps); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
}
.cue-arrow {
  width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  animation: cue-bob 1.8s ease-in-out infinite;
}
@keyframes cue-bob { 50% { transform: translateY(3px); } }

/* Hiện dần lời mời sau khi mở phong bì */
body.is-open .hero-title > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.is-open .hero-title > :nth-child(2) { animation-delay: 0.15s; }
body.is-open .hero-title > :nth-child(3) { animation-delay: 0.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ==========================================================
   THÔNG TIN LỄ
   ========================================================== */
.details { padding-top: 40px; }
.info-cols { display: flex; justify-content: center; gap: 18px; }
.info-col { flex: 1 1 0; max-width: 220px; }
.info-col:has(.info-value[hidden]) { display: none; }
.info-label { color: var(--gold); font-family: var(--font-caps); font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; }
.info-value { margin-top: 4px; color: var(--wine); font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.details-title {
  max-width: 24ch; margin: 0 auto;
  color: var(--wine); font-family: var(--font-caps); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.12em; line-height: 1.7; text-transform: uppercase;
}
.event-block { margin-top: 26px; }
.ev-weekday { color: var(--wine); font-family: var(--font-caps); font-size: 1rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }
.ev-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 8px; }
.ev-side { padding-block: 4px; border-block: 1px solid var(--gold-line); color: var(--wine); font-size: 1.45rem; font-style: italic; }
.ev-day { color: var(--wine); font-family: var(--font-caps); font-size: 5rem; line-height: 1; }
.ev-time { margin-top: 10px; color: var(--wine); font-family: var(--font-caps); font-size: 1.4rem; letter-spacing: 0.1em; }
.ev-place { margin-top: 32px; }
.ev-at { color: var(--wine-soft); font-size: 1.25rem; font-style: italic; }
.ev-venue { margin-top: 2px; color: var(--wine); font-family: var(--font-caps); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.45; text-transform: uppercase; }
.ev-address { max-width: 32ch; margin: 6px auto 0; }
.ev-place .button { margin-top: 20px; }

/* ==========================================================
   ĐÔI LỜI GỬI BẠN
   ========================================================== */
.letter-card {
  margin-top: 22px; padding: 38px 26px 34px;
  border-radius: 4px;
  background: var(--card);
  box-shadow: inset 0 0 0 7px var(--card), inset 0 0 0 8px var(--gold-line), var(--shadow);
  text-align: left;
}
.letter-greeting { color: var(--wine); font-family: var(--font-name); font-size: 2rem; line-height: 1.3; }
.letter-body { margin-top: 10px; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.8; }
.letter-sign { margin-top: 22px; text-align: right; font-style: italic; }
.letter-name { color: var(--wine); font-family: var(--font-name); font-size: 2.4rem; line-height: 1.2; text-align: right; }

/* ==========================================================
   ĐẾM NGƯỢC: ảnh trường tràn khung, trục dọc như dòng thời gian
   ========================================================== */
.moment { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 600px; padding: 72px var(--gutter); overflow: hidden; color: #FFFFFF; }
.moment-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: blur(1.5px) saturate(0.85); transform: scale(1.03); }
.moment::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(74, 20, 38, 0.72), rgba(74, 20, 38, 0.62) 45%, rgba(74, 20, 38, 0.8));
}
.moment-inner { width: 100%; }
.moment .script-title { color: #FFFFFF; }
.countdown { position: relative; display: grid; gap: 26px; width: min(100%, 300px); margin: 30px auto 0; }
.countdown::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, 0.7); }
.countdown p { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.countdown p::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22); translate: -50% -50%;
}
.countdown b, .countdown span { text-shadow: 0 2px 10px rgba(50, 10, 25, 0.6); }
.countdown b { padding-right: 26px; font-family: var(--font-caps); font-size: 2.5rem; font-weight: 500; line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums; }
.countdown span { padding-left: 26px; font-size: 1.35rem; font-style: italic; text-align: left; }
.countdown p:nth-child(even) b { order: 2; padding: 0 0 0 26px; text-align: left; }
.countdown p:nth-child(even) span { order: 1; padding: 0 26px 0 0; text-align: right; }
.countdown.is-days-only::before { display: none; }
.countdown-note { margin-top: 24px; font-style: italic; }
.moment-quote { margin-top: 34px; font-size: 1.25rem; font-style: italic; }
.moment-quote span { font-family: var(--font-caps); font-style: normal; letter-spacing: 0.12em; }

/* ==========================================================
   ALBUM
   ========================================================== */
.gallery-grid {
  --cols: 2; --gap: 8px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
  margin-top: 26px; perspective: 1400px;
}
.gallery-item {
  position: relative; display: block; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  aspect-ratio: 4 / 5; padding: 5px;
  border: 0; border-radius: 3px; background: #FFFFFF;
  box-shadow: 0 14px 26px -18px rgba(122, 41, 67, 0.65);
  cursor: zoom-in;
}
.gallery-item:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.gallery-flip { display: block; width: 100%; height: 100%; overflow: hidden; }
/* Ảnh ngang hay dọc đều được cắt vừa khung; lấy nét hơi lệch lên để giữ khuôn mặt */
.gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }

/* Ảnh tự zoom ra vào chậm (Ken Burns), mỗi ô một hướng và lệch nhịp; chỉ chạy khi album trên màn hình */
.gallery-item img { animation: kb-in 16s ease-in-out infinite alternate paused; }
.gallery-item:nth-child(3n + 2) img { animation-name: kb-out; animation-duration: 18s; animation-delay: -5s; }
.gallery-item:nth-child(3n) img { animation-name: kb-drift; animation-duration: 15s; animation-delay: -9s; }
.gallery-grid.is-live .gallery-item img { animation-play-state: running; }
@keyframes kb-in { from { transform: scale(1.02); } to { transform: scale(1.16) translate(-3%, -2%); } }
@keyframes kb-out { from { transform: scale(1.16) translate(2%, 2%); } to { transform: scale(1.03) translate(-1%, -1%); } }
@keyframes kb-drift { from { transform: scale(1.1) translate(-3%, 1%); } to { transform: scale(1.1) translate(3%, -1%); } }

/* Hai ảnh lật đổi chỗ: xoay quanh trục dọc tới 90°, đổi ảnh, rồi xoay về */
.js-ready .gallery-item[data-anim] {
  transition:
    opacity 0.9s ease var(--delay, 0s),
    transform 1s cubic-bezier(0.2, 0.75, 0.2, 1) var(--delay, 0s),
    filter 0.9s ease var(--delay, 0s),
    rotate 0.38s ease-in-out 0s;
}
.gallery-item.is-flipping { rotate: y 90deg; }

.lightbox {
  width: min(94vw, 900px); max-height: 92vh; padding: 0;
  border: 0; border-radius: 6px; background: var(--card); overflow: hidden;
}
.lightbox::backdrop { background: rgba(58, 18, 32, 0.82); }
.lightbox img { width: 100%; max-height: 92vh; object-fit: contain; }
.lightbox-close, .lightbox-nav {
  position: absolute; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(253, 245, 246, 0.92); color: var(--wine);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.lightbox-close { top: 10px; right: 10px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

/* ==========================================================
   SỔ LƯU BÚT: phong bì hai ảnh + form
   ========================================================== */
.keepsake { position: relative; width: 74%; aspect-ratio: 1.45; margin: 46px auto 22px; }
.ks-photo {
  position: absolute; bottom: 30%; width: 40%;
  padding: 5px 5px 18px; background: #FFFFFF; box-shadow: 0 8px 16px -8px rgba(122, 41, 67, 0.5);
  transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) 0.4s;
}
.ks-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.ks-photo-left { left: 11%; rotate: -10deg; }
.ks-photo-right { right: 11%; rotate: 9deg; bottom: 34%; }
.js-ready .keepsake:not(.is-in) .ks-photo { transform: translateY(45%); }
.ks-seal { left: 50%; top: 64%; width: 22%; }

.wish-form {
  display: grid; gap: 8px; margin-top: 26px; padding: 28px 22px 22px;
  border-radius: 4px; background: var(--card);
  box-shadow: inset 0 0 0 7px var(--card), inset 0 0 0 8px var(--gold-line), var(--shadow);
  text-align: left;
}
.wish-form label { margin-top: 6px; color: var(--wine); font-size: 1.2rem; font-weight: 600; font-style: italic; }
.wish-form input, .wish-form textarea, .wish-form button { width: 100%; }
.wish-form input, .wish-form textarea {
  padding: 11px 14px;
  border: 1px solid var(--blush); border-radius: 8px;
  background: #FFFFFF; color: var(--text); font-size: 1.1rem;
}
.wish-form textarea { resize: vertical; min-height: 120px; }
.wish-form input:focus, .wish-form textarea:focus { outline: 2px solid var(--blush); border-color: var(--wine); }
.wish-form .button { margin-top: 10px; border-color: var(--blush); background: var(--blush); color: var(--wine); letter-spacing: 0.08em; text-transform: none; font-size: 1rem; }
.wish-form .button:hover { background: var(--rose); border-color: var(--rose); }
.field-note { color: var(--wine-soft); font-size: 0.95rem; text-align: right; }
.form-status { min-height: 1.5em; font-size: 1.05rem; }
.form-status.is-error { color: #8A2A3A; }
.wish-board { margin-top: 30px; text-align: left; }
.wish-board-status { color: var(--wine-soft); font-style: italic; text-align: center; }
.wish-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wish-item { padding: 16px 18px; border: 1px solid var(--gold-line); border-radius: 4px; background: rgba(253, 245, 246, 0.8); }
.wish-item p { white-space: pre-line; overflow-wrap: anywhere; }
.wish-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: 0.95rem; }
.wish-meta strong { color: var(--wine); font-family: var(--font-name); font-size: 1.7rem; font-weight: 400; overflow-wrap: anywhere; }
.wish-meta time { color: var(--gold); font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.12em; }
.wish-board .text-button { display: block; margin-inline: auto; }

/* ==========================================================
   CẢM ƠN
   ========================================================== */
.closing { padding-bottom: 90px; }
.closing-thanks { color: var(--wine); font-family: var(--font-sign); font-size: clamp(4rem, 18vw, 5.2rem); line-height: 1; }
.closing-text { max-width: 30ch; margin: 12px auto 0; }
.guest-inline { color: var(--wine); font-weight: 700; }
.closing-cap { width: 96px; margin: 26px auto 0; fill: none; stroke: var(--wine); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.closing-cap circle { fill: var(--wine); }
.closing-name { margin-top: 10px; color: var(--wine); font-family: var(--font-name); font-size: 2.4rem; line-height: 1.2; }
.closing-mark { margin-top: 30px; color: var(--gold); font-family: var(--font-caps); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; }

/* ---------- Nút nhạc: tròn, nằm góc trên trong khung thiệp ---------- */
.music-toggle {
  position: fixed; top: 14px; right: max(14px, calc(50% - var(--page-w) / 2 + 14px)); z-index: 40;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--gold-line); border-radius: 50%;
  background: rgba(253, 245, 246, 0.92); color: var(--wine);
  cursor: pointer; box-shadow: var(--shadow);
}
.music-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle circle { fill: currentColor; }
.music-toggle[aria-pressed="true"] svg { animation: spin 5s linear infinite; }
.music-toggle[aria-pressed="false"]::after {
  content: ""; position: absolute; width: 24px; height: 1.5px; background: currentColor; rotate: -45deg;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================
   HIỆU ỨNG CUỘN (js/scroll-effects.js)
   Chỉ ẩn khi JS chạy (.js-ready). data-from = hướng khối đi vào:
   "below" khi đang cuộn xuống, "above" khi đang cuộn lên.
   ========================================================== */
.js-ready [data-anim] {
  transition:
    opacity 0.9s ease var(--delay, 0s),
    transform 1s cubic-bezier(0.2, 0.75, 0.2, 1) var(--delay, 0s),
    filter 0.9s ease var(--delay, 0s);
}
.js-ready [data-anim]:not(.is-in) { opacity: 0; }
.js-ready [data-anim="rise"]:not(.is-in) { transform: translateY(40px); }
.js-ready [data-anim="rise"][data-from="above"]:not(.is-in) { transform: translateY(-40px); }
.js-ready [data-anim="left"]:not(.is-in) { transform: translate(-50px, 20px); }
.js-ready [data-anim="right"]:not(.is-in) { transform: translate(50px, 20px); }
.js-ready [data-anim="left"][data-from="above"]:not(.is-in) { transform: translate(-50px, -20px); }
.js-ready [data-anim="right"][data-from="above"]:not(.is-in) { transform: translate(50px, -20px); }
.js-ready [data-anim="zoom"]:not(.is-in) { transform: scale(0.85); filter: blur(6px); }
.js-ready [data-anim="pop"]:not(.is-in) { transform: scale(0.6); }
/* Khối ngày lật như mở một tấm thiệp */
.js-ready [data-anim="flip"]:not(.is-in) { transform: perspective(1000px) rotateY(-75deg) scale(0.9); }
/* Lá thư mở ra như tờ giấy gấp */
.js-ready [data-anim="unfold"] { transform-origin: 50% 0; }
.js-ready [data-anim="unfold"][data-from="above"] { transform-origin: 50% 100%; }
.js-ready [data-anim="unfold"]:not(.is-in) { transform: perspective(1200px) rotateX(-70deg); }
.js-ready [data-anim="unfold"][data-from="above"]:not(.is-in) { transform: perspective(1200px) rotateX(70deg); }

/* Mốc đếm ngược hiện lần lượt dọc theo trục */
.js-ready .countdown p { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); }
.js-ready .countdown:not(.is-in) p { opacity: 0; transform: translateY(18px); }
.countdown p:nth-child(2) { transition-delay: 0.15s; }
.countdown p:nth-child(3) { transition-delay: 0.3s; }
.countdown p:nth-child(4) { transition-delay: 0.45s; }

/* Lời chúc trượt vào lần lượt */
.wish-item { animation: wish-in 0.7s cubic-bezier(0.2, 0.75, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes wish-in { from { opacity: 0; transform: translateY(16px); } }

/* Trang trí trôi theo cuộn: dùng thuộc tính translate để không đè transform xoay sẵn có */
[data-parallax] { translate: 0 var(--parallax, 0px); will-change: translate; }

/* ---------- Máy tính: tấm thiệp nổi trên nền hồng ---------- */
@media (min-width: 560px) {
  .page { margin-block: 0; box-shadow: 0 0 0 1px rgba(169, 132, 79, 0.25), 0 30px 80px -30px rgba(122, 41, 67, 0.55); }
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important;
  }
  .js-ready [data-anim] { opacity: 1; transform: none; filter: none; }
  .js-ready .countdown p, .ce-photo, .ks-photo { opacity: 1; transform: none !important; }
  .gallery-item img { animation: none; }
  [data-parallax] { translate: none; }
}