/* =============================================================
   Thiệp cưới — Korean minimal × Vietnamese tradition
   Cuộn theo trang: mỗi <section class="pg"> cao đúng 1 màn hình.
   Bố cục: phần chung (điện thoại) trước, khối DESKTOP (≥ 1024px) ở cuối file.
   ============================================================= */
:root {
  /* A · Espresso & Vàng champagne */
  --cream: #f6f2ee;
  --cream-2: #efe9e3;
  --linen: #d6ceca;
  --greige: #b09f8e;
  --gold: #b08d57;        /* cành lá, đường kẻ */
  --gold-ink: #86673b;    /* nhãn nhỏ trên nền kem (đủ tương phản) */
  --gold-light: #d9bf8c;  /* chữ/viền vàng trên nền tối */
  --ink: #3a2c25;         /* chữ chính — nâu espresso */
  --ink-soft: #6e5f55;    /* chữ phụ */
  --espresso: #352822;    /* nền phần lễ gia tiên */
  --accent: #c9a46a;      /* điểm nhấn vàng champagne */
  --accent-soft: #ead9b8;
  --wine: #7a3b2e;        /* tên khách, ngày tiệc */

  /* Chỉ 2 phông: chữ viết tay + Montserrat cho mọi chữ còn lại */
  --f-script: "Great Vibes", cursive;
  --f-sans: "Montserrat", system-ui, sans-serif;

  --col: 460px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Chiều cao 1 trang — JS ghi đè bằng chiều cao thật của khung cuộn */
  --ph: 100vh;
  --pad-y: clamp(28px, calc(var(--ph) * 0.07), 96px);
}
@supports (height: 100dvh) { :root { --ph: 100dvh; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--linen);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, p, figure, blockquote { margin: 0; }
p, blockquote, .title { text-wrap: balance; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--cream); }

/* ---------- Nền máy tính bảng: ảnh bìa nhoè ---------- */
.backdrop {
  position: fixed; inset: -40px; z-index: -1;
  background: url("../images/01-bia-tam-voan-sm.webp") center / cover;
  filter: blur(36px) saturate(0.8) brightness(1.05);
}
.backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(246, 242, 238, 0.55); }
@media (max-width: 460px) { .backdrop { display: none; } } /* điện thoại: thiệp phủ kín màn hình, khỏi tải ảnh nền */

/* ---------- Lớp nhiễu hạt kiểu phim (đứng yên trên điện thoại cho nhẹ máy; chỉ "rung" trên desktop) ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .15 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

#petals { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }

/* =============================================================
   KHUNG CUỘN THEO TRANG
   ============================================================= */
.page {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: 100%; max-width: var(--col);
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--cream); box-shadow: 0 0 80px rgba(58, 44, 37, 0.18);
  scrollbar-width: none; -ms-overflow-style: none;
}
.page::-webkit-scrollbar { display: none; width: 0; height: 0; }
.is-locked .page { overflow: hidden; }

.pg { position: relative; min-height: var(--ph); }
/* Trang có ảnh nền: cao đúng 1 màn hình */
.hero, .story, .thanks { height: var(--ph); overflow: hidden; }

.sec {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--pad-y) 24px; text-align: center; overflow: hidden;
}
/* Nội dung mỗi trang — JS tự thu nhỏ (zoom) nếu màn hình quá thấp */
.fit { width: 100%; }

/* ---------- Chấm điều hướng trang ---------- */
.dots {
  position: fixed; z-index: 95; top: 50%; transform: translateY(-50%);
  right: max(2px, calc(50vw - var(--col) / 2 + 2px));
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity 0.8s;
}
.is-open .dots { opacity: 1; pointer-events: auto; }
.dots button {
  width: 14px; height: 14px; padding: 0; border: 0; background: none; display: grid; place-items: center;
}
.dots button::before {
  content: ""; width: 4px; height: 4px; border-radius: 99px; background: rgba(58, 44, 37, 0.25);
  transition: all 0.5s var(--ease);
}
.dots button.is-active::before { height: 14px; background: var(--gold); }
.dots.is-dark button::before { background: rgba(246, 242, 238, 0.45); }
.dots.is-dark button.is-active::before { background: var(--gold-light); }

/* ---------- Chữ ---------- */
.lab {
  font-weight: 500; font-size: 12.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-ink);
}
.script { font-family: var(--f-script); font-weight: 400; line-height: 1.05; }
.title {
  font-weight: 500; font-size: 24px; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 4px 0 22px; color: var(--ink);
}
.sub { font-size: 15px; color: var(--ink-soft); margin: -8px auto 20px; max-width: 340px; }
.hint { font-size: 13px; color: var(--ink-soft); margin-top: 14px; letter-spacing: 0.04em; }

/* Cành ô liu vẽ dần */
.branch { width: 180px; height: 30px; margin: 0 auto 12px; display: block; overflow: visible; }
.branch path { fill: none; stroke: var(--gold); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.branch circle { fill: var(--accent); }
.branch--light path { stroke: var(--gold-light); }

/* =============================================================
   MÀN MỞ ĐẦU — PHONG BÌ & CON DẤU SÁP
   ============================================================= */
.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 52%, rgba(233, 207, 150, 0.28) 0%, transparent 70%),
    radial-gradient(120% 80% at 50% 30%, #fbf8f4 0%, var(--cream) 50%, #e8dfd5 100%);
}
/* khung viền vàng đôi */
.intro-frame { position: absolute; inset: 14px; border: 1px solid rgba(176, 141, 87, 0.45); pointer-events: none; }
.intro-frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(176, 141, 87, 0.22); }
.intro-frame::after {
  content: ""; position: absolute; inset: -5px;
  background:
    radial-gradient(circle, var(--gold) 2.5px, transparent 3px) 0 0 / 10px 10px no-repeat,
    radial-gradient(circle, var(--gold) 2.5px, transparent 3px) 100% 0 / 10px 10px no-repeat,
    radial-gradient(circle, var(--gold) 2.5px, transparent 3px) 0 100% / 10px 10px no-repeat,
    radial-gradient(circle, var(--gold) 2.5px, transparent 3px) 100% 100% / 10px 10px no-repeat;
}
/* bụi vàng lấp lánh */
.intro-dust { position: absolute; inset: 0; pointer-events: none; }
.intro-dust i {
  position: absolute; bottom: -10px; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0%, #e2c27f 45%, rgba(201, 164, 106, 0) 70%);
  animation: dust var(--d, 9s) linear var(--dl, 0s) infinite;
}
@keyframes dust {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate(var(--x, 20px), -50vh) scale(1); opacity: 0.9; }
  80% { opacity: 0.6; }
  100% { transform: translate(calc(var(--x, 20px) * -0.5), -105vh) scale(0.5); opacity: 0; }
}

.intro-inner { position: relative; text-align: center; padding: 24px; }
.intro-lab { margin-bottom: 4px; }
/* chữ ánh nhũ vàng */
.foil {
  display: inline-block; padding: 0.12em 0.3em; margin: -0.12em -0.3em;
  /* nhũ vàng dịu: vệt sáng nhẹ, chênh màu ít, chạy chậm */
  background: linear-gradient(105deg, #9a7746 0%, #ae8a55 30%, #c9ab76 45%, #ae8a55 60%, #9a7746 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 10s linear infinite;
}
@keyframes foil { to { background-position: -300% 0; } }
.intro-names { font-size: 54px; line-height: 1.15; margin-bottom: 26px; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)); }
.intro-to { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.intro-to .lab { font-size: 11px; }
.intro-to b { font-family: var(--f-script); font-weight: 400; font-size: 40px; line-height: 1.25; color: var(--wine); padding: 0 0.2em; }
.intro-hint { margin-top: 6px; font-size: 13px; color: var(--gold-ink); letter-spacing: 0.06em; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* Phong bì */
.envelope {
  position: relative; width: min(80vw, 330px); aspect-ratio: 3 / 2; margin: 0 auto; perspective: 1400px;
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-8px) rotate(0.6deg); } }
.env-glow {
  position: absolute; left: 50%; top: 30%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle, rgba(255, 238, 196, 0.95) 0%, rgba(233, 207, 150, 0.45) 30%, transparent 62%);
  opacity: 0; pointer-events: none; z-index: 0;
}
.env-back, .env-front, .env-flap { position: absolute; inset: 0; }
.env-back {
  z-index: 1; border-radius: 11px;
  background: linear-gradient(160deg, #e9ded3, #ddd0c3);
  box-shadow: 0 30px 60px -26px rgba(58, 44, 37, 0.4), 0 10px 22px -16px rgba(58, 44, 37, 0.25);
}
.env-card {
  position: absolute; left: 6%; right: 6%; top: 6%; bottom: 6%; z-index: 2;
  background: linear-gradient(180deg, #fffdf9, var(--cream)); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.env-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(176, 141, 87, 0.4); border-radius: 3px; pointer-events: none; }
.env-card::after { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(176, 141, 87, 0.16); border-radius: 2px; pointer-events: none; }
.env-names { font-size: 46px; color: var(--wine); padding: 0 0.2em; }
.env-date { font-size: 15px; letter-spacing: 0.25em; }
/* Túi & nắp vẽ bằng SVG (góc, mũi bo mềm — xem index.html) */
.env-front { z-index: 3; }
.env-front svg, .flap-face svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.env-flap { z-index: 4; height: 62%; transform-origin: 50% 0; transform-style: preserve-3d; }
.flap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* mặt trong nắp bị lật 2 lần (tự nó + cả nắp) → hình trong SVG đã vẽ ngược chiều sẵn */
.flap-in { transform: rotateX(180deg); }
/* viền ép kim vàng: mảnh, nhạt, nối bo tròn */
.env-gold { fill: none; stroke: #c4a061; stroke-width: 0.9; stroke-opacity: 0.55; stroke-linejoin: round; stroke-linecap: round; }

/* Con dấu sáp */
.seal {
  position: absolute; z-index: 5; left: 50%; top: 60%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  border: 0; padding: 0; background: none; border-radius: 50%;
  filter: drop-shadow(0 7px 9px rgba(74, 23, 18, 0.45));
  animation: sealBreath 3s var(--ease) infinite;
}
@keyframes sealBreath { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.05) rotate(-4deg); } }
.seal-half { position: absolute; inset: 0; }
.seal-half svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* 2 nửa ghép khít, đường nứt răng cưa */
.seal-l { clip-path: polygon(0 0, 53% 0, 47% 18%, 55% 36%, 45% 54%, 54% 72%, 47% 88%, 51% 100%, 0 100%); }
.seal-r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 51% 100%, 47% 88%, 54% 72%, 45% 54%, 55% 36%, 47% 18%); }
/* vòng sáng mời chạm */
.seal-ring { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(201, 164, 106, 0.85); animation: ring 2.4s var(--ease) infinite; }
.seal-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(201, 164, 106, 0.5); animation: ring 2.4s var(--ease) 0.5s infinite; }
@keyframes ring { 0% { transform: scale(0.95); opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; } }
/* tia vàng bắn ra khi vỡ dấu */
.spark {
  position: absolute; left: 50%; top: 60%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; z-index: 6; pointer-events: none;
  background: linear-gradient(135deg, #fff3d1, #d7b06a); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* =============================================================
   1. ẢNH BÌA
   ============================================================= */
.hero { color: var(--cream); }
.hero-media { position: absolute; inset: 0; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; transform: scale(1.14); }
.is-open .hero-media img { animation: kenburns 14s var(--ease) forwards; }
@keyframes kenburns { to { transform: scale(1.02); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 44, 37, 0.25) 0%, transparent 30%, transparent 48%, rgba(34, 25, 20, 0.72) 100%); }
.hero-text { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; padding: 0 20px; }
.hero-lab { color: rgba(246, 242, 238, 0.85); }
.hero-names { font-size: clamp(60px, min(19vw, calc(var(--ph) * 0.11)), 88px); margin: 10px 0 6px; display: flex; justify-content: center; align-items: baseline; gap: 0.12em; }
.hero-names .amp { font-family: var(--f-script); font-size: 0.6em; color: var(--accent-soft); opacity: 0; }
.hero-date { font-size: 16px; letter-spacing: 0.35em; padding-left: 0.35em; opacity: 0; }

/* hiệu ứng chữ viết tay: mặt nạ quét từ trái sang phải */
.write {
  display: inline-block; padding: 0.2em 0.28em; margin: -0.2em -0.28em; /* nới vùng mặt nạ để nét hoa không bị cắt */
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.is-open .write { animation: write 1.9s var(--ease) forwards; }
.is-open .write:last-child { animation-delay: 1.1s; }
@keyframes write { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.write.done { -webkit-mask: none; mask: none; }
.is-open .hero-names .amp { animation: fadeIn 1s ease 0.9s forwards; }
.is-open .hero-date { animation: fadeUp 1.2s var(--ease) 2.2s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.scroll-cue { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(246, 242, 238, 0.8); }
.scroll-cue i { width: 1px; height: 30px; background: linear-gradient(rgba(246, 242, 238, 0.9), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* =============================================================
   2. THIỆP BÁO HỶ — khung thiệp in
   ============================================================= */
.invite { padding-left: 14px; padding-right: 14px; } /* điện thoại: thẻ rộng hơn để tên không bị ngắt dòng */
.invite-card {
  position: relative; padding: 24px 14px 22px;
  background: linear-gradient(180deg, #fdfbf8, #f8f2ea);
  border: 1px solid rgba(176, 141, 87, 0.45);
  box-shadow: 0 30px 60px -36px rgba(58, 44, 37, 0.5);
}
.invite-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(176, 141, 87, 0.2); pointer-events: none; }
.medal {
  position: relative; width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%;
  border: 1px solid rgba(176, 141, 87, 0.65); display: grid; place-items: center;
  font-size: 23px; line-height: 1; color: var(--wine); background: #fffdf9;
}
.medal::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(176, 141, 87, 0.28); }

.families {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 10px; text-align: center; margin-bottom: 26px;
  padding: 14px 0; border-top: 1px solid rgba(176, 141, 87, 0.25); border-bottom: 1px solid rgba(176, 141, 87, 0.25);
}
.family-sep { background: linear-gradient(transparent, var(--linen), transparent); }
.family .lab { display: block; margin-bottom: 8px; color: var(--wine); }
/* tên bố mẹ & cô dâu chú rể: giữ trên 1 dòng, JS (fitLines) tự thu nhỏ chữ nếu tên dài */
.family p { font-size: 14.5px; line-height: 1.6; font-weight: 600; white-space: nowrap; }
.family small { text-wrap: balance; display: block; margin-top: 8px; padding: 0 2px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }

.invite-line { white-space: pre-line; font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
.couple { display: flex; flex-direction: column; align-items: center; gap: 0; }
.person { display: flex; flex-direction: column; align-items: center; }
.order { font-weight: 500; font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-ink); }
.person-name { font-size: 46px; color: var(--wine); margin-top: 2px; white-space: nowrap; padding: 0 0.12em; }
.couple-amp { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2px 0; }
.couple-amp b { font-family: var(--f-script); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--accent); }
.couple-amp i { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.couple-amp i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

/* Khung ảnh vòm — chiều cao theo màn hình */
/* --ah = chiều cao khung; chiều rộng ghi rõ (không dùng aspect-ratio) để Safari/iPhone không bị xẹp khung */
.arch { --ah: calc(var(--ph) * 0.5); position: relative; height: var(--ah); width: calc(var(--ah) * 0.7143); max-width: 100%; flex: none; margin: 0 auto; border-radius: 999px 999px 6px 6px; overflow: hidden; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch--frame { overflow: visible; }
.arch--frame img { border-radius: 999px 999px 6px 6px; }
.arch--frame::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(246, 242, 238, 0.45); border-radius: 999px 999px 10px 10px; pointer-events: none; }

/* Bố cục ảnh + chữ: dọc trên điện thoại, 2 cột trên desktop */
.split { display: flex; flex-direction: column; align-items: center; }
.split-copy { display: contents; }

/* Góc hoa văn của thẻ in (dùng chung cho thiệp báo hỷ & thẻ mời) */
.cn { position: absolute; width: 18px; height: 18px; border: 0 solid var(--gold); }
.cn::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
.cn-tl { top: -3px; left: -3px; border-width: 2px 0 0 2px; } .cn-tl::after { top: 5px; left: 5px; }
.cn-tr { top: -3px; right: -3px; border-width: 2px 2px 0 0; } .cn-tr::after { top: 5px; right: 5px; }
.cn-bl { bottom: -3px; left: -3px; border-width: 0 0 2px 2px; } .cn-bl::after { bottom: 5px; left: 5px; }
.cn-br { bottom: -3px; right: -3px; border-width: 0 2px 2px 0; } .cn-br::after { bottom: 5px; right: 5px; }

/* =============================================================
   3. LỜI MỜI KHÁCH
   ============================================================= */
/* chữ lồng H&G rất lớn, rất mờ làm nền */
.guest-mono {
  position: absolute; right: -6%; bottom: -4%; font-size: calc(var(--ph) * 0.4); line-height: 1;
  color: rgba(176, 141, 87, 0.07); pointer-events: none; white-space: nowrap;
}
/* cụm ảnh: khung vòm + viền vàng lệch phía sau + ảnh in nghiêng */
.guest-photos { position: relative; width: fit-content; margin: 0 auto; }
.guest .arch { --ah: calc(var(--ph) * 0.36); }
.arch-ghost {
  position: absolute; inset: 0; transform: translate(12px, -12px);
  border: 1px solid rgba(176, 141, 87, 0.55); border-radius: 999px 999px 8px 8px; pointer-events: none;
}
.guest-polaroid {
  position: absolute; right: -22%; bottom: -7%; width: 44%; margin: 0;
  padding: 5px 5px 16px; background: #fffdf9; transform: rotate(7deg);
  box-shadow: 0 16px 30px -14px rgba(58, 44, 37, 0.5);
}
.guest-polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* thẻ mời kiểu thiệp in: viền vàng đôi, góc hoa văn */
.guest-card {
  position: relative; width: 100%; margin-top: 26px; padding: 22px 18px 20px;
  background: linear-gradient(180deg, #fdfbf8, #f8f3ed);
  border: 1px solid rgba(176, 141, 87, 0.45);
  box-shadow: 0 26px 50px -34px rgba(58, 44, 37, 0.5);
}
.guest-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(176, 141, 87, 0.18); pointer-events: none; }

.guest-box .branch { margin-bottom: 6px; }
.guest-name { font-size: 44px; color: var(--wine); margin: 6px 0 2px; padding: 0 0.15em; }
.guest-sub { font-size: 15px; color: var(--ink-soft); }
/* ngày giờ tiệc */
.guest-when { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; }
.gw-side {
  font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 0; min-width: 72px; border-top: 1px solid var(--greige); border-bottom: 1px solid var(--greige); color: var(--ink);
}
.gw-date { font-size: 21px; font-weight: 300; color: var(--wine); letter-spacing: 0.04em; white-space: nowrap; }
.guest-lunar { font-size: 13px; color: var(--ink-soft); }
.guest-venue { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }

/* =============================================================
   4. CHUYỆN CỦA CHÚNG MÌNH — 2 dải ảnh chạy ngược chiều
   ============================================================= */
.story {
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--ph) * 0.04);
  padding: calc(var(--ph) * 0.04) 0;
  background: radial-gradient(120% 70% at 50% 50%, #faf4ec 0%, #efe3d3 70%, #e8d9c6 100%);
}
.strip { --sh: calc(var(--ph) * 0.23); flex: none; height: var(--sh); width: 140%; margin-left: -20%; transform: rotate(-5deg); overflow: hidden; }
.strip-track { display: flex; gap: 14px; padding-right: 14px; height: 100%; width: max-content; animation: marquee 48s linear infinite; }
.strip--b .strip-track { animation-direction: reverse; animation-duration: 56s; }
.strip img {
  flex: none; height: var(--sh); width: calc(var(--sh) * 0.75); object-fit: cover; object-position: 50% 30%;
  border: 5px solid #fffdf9; border-radius: 4px; box-shadow: 0 14px 26px -14px rgba(58, 44, 37, 0.55);
}
/* --shift = bề ngang 1 bộ ảnh, do JS đo (fillStrips trong main.js) */
@keyframes marquee { to { transform: translateX(calc(-1 * var(--shift, 50%))); } }
.story-text { position: relative; z-index: 1; text-align: center; padding: 0 28px; }
.story-title { font-size: clamp(52px, calc(var(--ph) * 0.085), 86px); color: var(--wine); margin: 4px 0 10px; }
.story-quote { font-size: 15px; line-height: 1.8; color: var(--ink); }

/* ảnh nền trang Lịch & Cảm ơn */
.cal-media, .thanks-media { position: absolute; inset: -12% 0; will-change: transform; }
.cal-media img, .thanks-media img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   5. LỄ GIA TIÊN
   ============================================================= */
.ceremony { background: var(--espresso); color: var(--cream); }
.ceremony .lab { color: var(--gold-light); }
.ceremony .title { color: var(--cream); margin-bottom: 18px; }
.ceremony .arch { --ah: calc(var(--ph) * 0.42); order: 1; }
.ceremony .events { order: 2; }
.songhy {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  font-family: "Noto Serif SC", "Songti SC", serif; font-size: 300px; line-height: 1; color: rgba(217, 191, 140, 0.07); pointer-events: none;
}
.events { margin-top: 22px; display: grid; gap: 16px; width: 100%; }
.event { position: relative; padding: 16px 16px; border: 1px solid rgba(217, 191, 140, 0.35); }
.event::before, .event::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; }
.event::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.event::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.event-title { font-weight: 600; font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; }
.event-time { font-size: 38px; font-weight: 300; line-height: 1.1; margin: 4px 0 2px; }
.event-date { font-size: 15px; }
.event-lunar { font-size: 13.5px; opacity: 0.8; }
.event-place { margin-top: 8px; font-weight: 500; }
.event-addr { font-size: 14px; opacity: 0.75; }
.event .actions { margin-top: 12px; }
.ceremony .btn--line { border-color: var(--gold-light); color: var(--cream); min-height: 40px; }
.ceremony .btn--line:hover { background: var(--gold-light); color: var(--espresso); }

/* =============================================================
   6. TIỆC CƯỚI
   ============================================================= */
.party { background: var(--cream-2); }
.venue { text-align: center; }
.venue + .venue { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--linen); }
.venue-tag { display: inline-block; padding: 5px 16px; border: 1px solid var(--accent); border-radius: 99px; font-weight: 500; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--wine); }
.venue-date { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0 2px; }
.venue-date .wd, .venue-date .mo { font-weight: 500; font-size: 11.5px; letter-spacing: 0.25em; text-transform: uppercase; padding: 8px 0; border-top: 1px solid var(--greige); border-bottom: 1px solid var(--greige); min-width: 84px; }
.venue-date .dd { font-size: 54px; font-weight: 300; line-height: 1; color: var(--wine); }
.venue-lunar { font-size: 13.5px; color: var(--ink-soft); }
.venue-times { display: flex; justify-content: center; gap: 34px; margin: 12px 0; }
.venue-times div { display: flex; flex-direction: column; }
.venue-times b { font-size: 26px; font-weight: 300; line-height: 1.1; }
.venue-times span { font-size: 13px; color: var(--ink-soft); }
.venue-name { font-size: 18px; font-weight: 600; line-height: 1.3; }
.venue-addr { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.map { position: relative; height: clamp(130px, calc(var(--ph) * 0.24), 320px); border-radius: 8px; overflow: hidden; background: var(--linen); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.55) sepia(0.18) contrast(0.95); }
/* Lớp che bản đồ: vuốt / lăn qua vẫn chuyển trang; bấm vào mới dùng được bản đồ */
.map-shield {
  position: absolute; inset: 0; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
}
.map-shield span {
  margin-bottom: 12px; padding: 6px 14px; border-radius: 99px; background: rgba(58, 44, 37, 0.78); color: var(--cream);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px); transition: all 0.4s var(--ease);
}
.map-shield:hover span, .map-shield:focus-visible span { opacity: 1; transform: none; }
@media (hover: none) { .map-shield span { opacity: 1; transform: none; } } /* máy cảm ứng: luôn hiện gợi ý */
.map.is-active .map-shield { display: none; }
.actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* Nút */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
  border-radius: 99px; font-weight: 500; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, box-shadow 0.3s;
}
.btn:active { transform: scale(0.96); }
.btn--line { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--cream); }
.btn--ghost { border: 1px solid rgba(246, 242, 238, 0.7); background: rgba(246, 242, 238, 0.1); color: var(--cream); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* =============================================================
   7. LỊCH & ĐẾM NGƯỢC
   ============================================================= */
/* Điện thoại: thẻ lịch gọn, nằm sát đáy để lộ mặt cô dâu chú rể ở nửa trên ảnh */
.calendar-sec { height: var(--ph); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: var(--pad-y) 16px calc(18px + env(safe-area-inset-bottom)); }
.cal-media img { object-position: 40% 50%; transform: scale(1.15); transform-origin: 50% 100%; } /* phóng nhẹ từ đáy → đẩy mặt cô dâu chú rể lên trên thẻ */
.cal-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 242, 238, 0.1), rgba(246, 242, 238, 0) 30%, rgba(58, 44, 37, 0.3)); }
.cal-card {
  position: relative; padding: 18px 16px 14px; text-align: center; border-radius: 14px;
  background: rgba(246, 242, 238, 0.84); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 30px 60px -30px rgba(58, 44, 37, 0.55);
}
.cal-month { font-size: 17px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; font-size: 15px; font-weight: 500; }
.cal-grid .wk { font-weight: 600; font-size: 10.5px; letter-spacing: 0.1em; color: var(--gold-ink); padding-bottom: 6px; border-bottom: 1px solid var(--linen); margin-bottom: 4px; }
.cal-grid .wk:last-child, .cal-grid .sun { color: var(--wine); }
.cal-grid .d { height: 29px; display: grid; place-items: center; position: relative; }
.cal-grid .d.is-day { color: var(--cream); font-weight: 500; isolation: isolate; }
.cal-grid .d.is-sub { isolation: isolate; }
.cal-grid .d.is-day::before, .cal-grid .d.is-sub::before, .cal-legend i {
  content: ""; position: absolute; width: 30px; height: 30px; z-index: -1; background: var(--wine);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.6 4.5c2.1 0 3.6 1.2 4.4 2.5.8-1.3 2.3-2.5 4.4-2.5 3.6 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.6 4.5c2.1 0 3.6 1.2 4.4 2.5.8-1.3 2.3-2.5 4.4-2.5 3.6 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z'/></svg>") center / contain no-repeat;
  animation: heartbeat 1.6s ease-in-out infinite;
}
/* Lễ khác trong cùng tháng (vd. Lễ Vu Quy): tim nhạt, không đập */
.cal-grid .d.is-sub::before { background: var(--accent-soft); animation: none; }
.cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { position: relative; z-index: 0; flex: none; width: 13px; height: 13px; animation: none; }
.cal-legend .lg-sub i { background: var(--accent-soft); }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.cd { --cd: 56px; position: relative; display: flex; flex-direction: column; align-items: center; }
.cd svg { width: var(--cd); height: var(--cd); transform: rotate(-90deg); overflow: visible; }
.cd .trk { fill: rgba(255, 253, 249, 0.55); stroke: rgba(176, 141, 87, 0.25); stroke-width: 1.2; }
.cd .bar {
  fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 182.2; stroke-dashoffset: 182.2; transition: stroke-dashoffset 0.9s var(--ease);
}
.cd b {
  position: absolute; top: calc(var(--cd) / 2); left: 50%; transform: translate(-50%, -52%);
  font-size: 21px; font-weight: 300; line-height: 1; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.cd b.tick { animation: tick 0.6s var(--ease); }
@keyframes tick { from { opacity: 0.2; transform: translate(-50%, -20%); } to { opacity: 1; transform: translate(-50%, -52%); } }
.cd span { margin-top: 8px; font-weight: 600; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.cd-note { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }

/* =============================================================
   8. ALBUM — lưới vừa khít 1 màn hình
   ============================================================= */
.gallery {
  display: grid; gap: 8px; width: 100%;
  height: calc(var(--ph) * 0.6);
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
}
.gallery a:first-child { grid-column: span 2; }
.gallery a { display: block; position: relative; overflow: hidden; border-radius: 6px; background: var(--linen); min-height: 0; }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s var(--ease); }
.gallery a:hover img { transform: scale(1.06); }

/* =============================================================
   9. MỪNG CƯỚI
   ============================================================= */
.gift-card { border: 1px solid var(--linen); border-radius: 12px; overflow: hidden; background: #fbf9f6; width: 100%; }
.gift-card + .gift-card { margin-top: 12px; }
.gift-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: none; border: 0; font-size: 20px; text-align: left; }
.gift-toggle svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; transition: transform 0.5s var(--ease); }
.gift-card.is-open .gift-toggle svg { transform: rotate(45deg); }
.gift-body { height: 0; overflow: hidden; transition: height 0.6s var(--ease); }
.gift-inner { padding: 4px 20px 22px; }
.gift-qr { width: 170px; margin: 0 auto 12px; padding: 10px; background: #fff; border-radius: 10px; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.3); }
.gift-qr img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.gift-line { font-size: 15px; color: var(--ink-soft); }
.gift-line b { color: var(--ink); font-weight: 500; }
.gift-no { font-size: 26px; font-weight: 300; letter-spacing: 0.08em; margin: 2px 0; }
.gift-inner .btn { margin-top: 10px; }

/* =============================================================
   10. CẢM ƠN
   ============================================================= */
.thanks { display: grid; place-items: end center; color: var(--cream); }
.thanks-media img { object-position: 50% 30%; }
.thanks-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(34, 25, 20, 0.78)); }
.thanks-text { position: relative; text-align: center; padding: 0 28px calc(var(--pad-y) + 24px); }
.thanks-title { font-size: clamp(56px, calc(var(--ph) * 0.1), 76px); color: var(--cream); }
.thanks-sub { margin: 8px 0 16px; font-size: 16px; line-height: 1.5; }
.thanks-sign { color: rgba(246, 242, 238, 0.8); margin-bottom: 22px; }

/* =============================================================
   NÚT NỔI & TOAST
   ============================================================= */
.floating { position: fixed; z-index: 96; right: max(16px, calc(50vw - var(--col) / 2 + 16px)); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 0.8s; }
.is-open .floating { opacity: 1; pointer-events: auto; }
.fab { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(246, 242, 238, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 20px -8px rgba(58, 44, 37, 0.45); }
.fab[hidden] { display: none; }
.fab svg { width: 20px; height: 20px; fill: var(--greige); transition: fill 0.3s; }
.fab--petal.is-on svg { fill: var(--accent); }
.vinyl { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle, #2e2620 0 1px, #1d1713 1px 3px); animation: spin 4s linear infinite; animation-play-state: paused; }
.vinyl i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--wine); }
.fab--music { position: relative; }
.fab--music.is-playing .vinyl { animation-play-state: running; }
.fab--music:not(.is-playing)::after { content: ""; position: absolute; width: 30px; height: 1.5px; background: var(--wine); transform: rotate(-45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

.toast { position: fixed; left: 50%; bottom: 90px; z-index: 99; transform: translate(-50%, 20px); padding: 10px 20px; border-radius: 99px; background: var(--ink); color: var(--cream); font-size: 13px; opacity: 0; pointer-events: none; transition: all 0.4s var(--ease); }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* PhotoSwipe theo tông */
.pswp { --pswp-bg: #1f1814; }

/* =============================================================
   HOẠ TIẾT NỀN: cành lá vẽ nét vàng ở 2 góc + lưới chấm rất nhạt
   ============================================================= */
:root {
  --orn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%23b08d57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='.55'><path d='M8 8C62 20 114 54 152 112'/><path d='M8 8C20 62 54 114 112 152'/><path d='M42 21c9-11 25-12 33-4-11 8-23 10-33 4z'/><path d='M80 39c12-8 27-5 32 5-13 4-25 3-32-5z'/><path d='M113 66c12-5 26 2 29 12-13 1-24-3-29-12z'/><path d='M21 42c-11 9-12 25-4 33 8-11 10-23 4-33z'/><path d='M39 80c-8 12-5 27 5 32 4-13 3-25-5-32z'/><path d='M66 113c-5 12 2 26 12 29 1-13-3-24-12-29z'/><path d='M26 26c18 8 34 22 44 40'/><circle cx='153' cy='114' r='2.4' fill='%23c9a46a' stroke='none'/><circle cx='114' cy='153' r='2.4' fill='%23c9a46a' stroke='none'/><circle cx='12' cy='12' r='3.2' fill='%23c9a46a' stroke='none'/></svg>");
  --orn-br: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%23b08d57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='.55'><g transform='rotate(180 110 110)'><path d='M8 8C62 20 114 54 152 112'/><path d='M8 8C20 62 54 114 112 152'/><path d='M42 21c9-11 25-12 33-4-11 8-23 10-33 4z'/><path d='M80 39c12-8 27-5 32 5-13 4-25 3-32-5z'/><path d='M113 66c12-5 26 2 29 12-13 1-24-3-29-12z'/><path d='M21 42c-11 9-12 25-4 33 8-11 10-23 4-33z'/><path d='M39 80c-8 12-5 27 5 32 4-13 3-25-5-32z'/><path d='M66 113c-5 12 2 26 12 29 1-13-3-24-12-29z'/><path d='M26 26c18 8 34 22 44 40'/><circle cx='153' cy='114' r='2.4' fill='%23c9a46a' stroke='none'/><circle cx='114' cy='153' r='2.4' fill='%23c9a46a' stroke='none'/><circle cx='12' cy='12' r='3.2' fill='%23c9a46a' stroke='none'/></g></svg>");
  --orn-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%23d9bf8c' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='.35'><path d='M8 8C62 20 114 54 152 112'/><path d='M8 8C20 62 54 114 112 152'/><path d='M42 21c9-11 25-12 33-4-11 8-23 10-33 4z'/><path d='M80 39c12-8 27-5 32 5-13 4-25 3-32-5z'/><path d='M113 66c12-5 26 2 29 12-13 1-24-3-29-12z'/><path d='M21 42c-11 9-12 25-4 33 8-11 10-23 4-33z'/><path d='M39 80c-8 12-5 27 5 32 4-13 3-25-5-32z'/><path d='M66 113c-5 12 2 26 12 29 1-13-3-24-12-29z'/><circle cx='12' cy='12' r='3.2' fill='%23d9bf8c' stroke='none'/></svg>");
  --orn-light-br: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%23d9bf8c' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='.35'><g transform='rotate(180 110 110)'><path d='M8 8C62 20 114 54 152 112'/><path d='M8 8C20 62 54 114 112 152'/><path d='M42 21c9-11 25-12 33-4-11 8-23 10-33 4z'/><path d='M80 39c12-8 27-5 32 5-13 4-25 3-32-5z'/><path d='M113 66c12-5 26 2 29 12-13 1-24-3-29-12z'/><path d='M21 42c-11 9-12 25-4 33 8-11 10-23 4-33z'/><path d='M39 80c-8 12-5 27 5 32 4-13 3-25-5-32z'/><path d='M66 113c-5 12 2 26 12 29 1-13-3-24-12-29z'/><circle cx='12' cy='12' r='3.2' fill='%23d9bf8c' stroke='none'/></g></svg>");
  --orn-size: min(44vw, 200px);
}
.invite, .guest, .party, .album {
  background-image: var(--orn), var(--orn-br), radial-gradient(rgba(176, 141, 87, 0.16) 1px, transparent 1.5px);
  background-position: left top, right bottom, 0 0;
  background-size: var(--orn-size) auto, var(--orn-size) auto, 22px 22px;
  background-repeat: no-repeat, no-repeat, repeat;
}
.ceremony {
  background-image: var(--orn-light), var(--orn-light-br);
  background-position: left top, right bottom;
  background-size: var(--orn-size) auto, var(--orn-size) auto;
  background-repeat: no-repeat;
}

/* Trạng thái chờ hiệu ứng (tránh nháy) */
.js [data-reveal], .js [data-reveal-group] > * { opacity: 0; }
.js [data-curtain] { clip-path: inset(100% 0 0 0); }

/* Màn hình thấp (điện thoại nhỏ, xoay ngang) — thu gọn khoảng cách */
@media (max-height: 700px) {
  .branch { width: 150px; height: 24px; margin-bottom: 8px; }
  .title { margin-bottom: 16px; }
}

/* Giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; }
  .js [data-curtain] { clip-path: none; }
  .write { -webkit-mask: none; mask: none; }
  .hero-names .amp, .hero-date { opacity: 1; }
}

/* =============================================================
   DESKTOP (≥ 1024px) — bố cục rộng, mỗi trang vẫn vừa 1 màn hình
   ============================================================= */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .grain { animation: grain 1.2s steps(6) infinite; }
}
@media (min-width: 1024px) {
  :root { --wrap: 1140px; --gutter: max(64px, calc((100vw - var(--wrap)) / 2)); --orn-size: min(22vw, 280px); }
  body { font-size: 17px; }
  .backdrop { display: none; }
  .page { max-width: none; box-shadow: none; }
  .sec { padding: var(--pad-y) var(--gutter); }
  .title { font-size: clamp(28px, calc(var(--ph) * 0.042), 40px); margin-bottom: clamp(18px, calc(var(--ph) * 0.035), 34px); }
  .lab { font-size: 13px; }
  .branch { width: 230px; height: 38px; margin-bottom: 14px; }
  .sub { max-width: 560px; font-size: 16px; }
  .dots { right: 26px; gap: 10px; }
  .dots button { width: 18px; height: 18px; }
  .dots button::before { width: 6px; height: 6px; }
  .dots button.is-active::before { height: 20px; }
  .floating { right: 28px; bottom: 28px; }
  .fab { width: 52px; height: 52px; }

  /* Phong bì */
  .intro-frame { inset: 26px; }
  .intro-names { font-size: 84px; margin-bottom: 34px; }
  .envelope { width: 480px; }
  .env-names { font-size: 66px; }
  .env-date { font-size: 20px; }
  .seal { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
  .spark { width: 9px; height: 9px; }
  .intro-to b { font-size: 50px; }
  .intro-hint { font-size: 14px; }

  /* Hai cột: ảnh trái — chữ phải */
  .split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    column-gap: clamp(48px, 6vw, 110px); max-width: var(--wrap); margin: 0 auto;
  }
  .split-copy { display: block; }
  .split .arch { --ah: calc(var(--ph) * 0.72); justify-self: center; }

  /* 1. Ảnh bìa */
  .hero-media img { width: 108%; max-width: none; margin-left: -8%; object-position: 50% 16%; } /* dịch ảnh sang trái */
  .hero-shade { background: linear-gradient(180deg, rgba(34, 25, 20, 0.3) 0%, transparent 25%, transparent 50%, rgba(34, 25, 20, 0.7) 100%); }
  .hero-text { bottom: 12%; }
  .hero-lab { font-size: 14px; }
  .hero-names { font-size: clamp(96px, min(10vw, calc(var(--ph) * 0.17)), 168px); margin: 14px 0 10px; }
  .hero-date { font-size: 20px; }

  /* 2. Thiệp báo hỷ */
  .invite .fit { max-width: 880px; padding: clamp(28px, calc(var(--ph) * 0.05), 56px) 72px; }
  .invite-card::before { inset: 9px; }
  .medal { width: 78px; height: 78px; font-size: 30px; }
  .families { gap: 40px; margin-bottom: 30px; }
  .family p { font-size: 18px; }
  .family small { font-size: 14px; }
  .invite-line { font-size: 18px; }
  .person-name { font-size: clamp(48px, calc(var(--ph) * 0.075), 66px); }
  .couple-amp b { font-size: 42px; }
  .couple-amp i { width: 90px; }

  /* 3. Lời mời khách */
  .guest-mono { right: 2%; bottom: -8%; font-size: calc(var(--ph) * 0.62); }
  .guest .arch { --ah: calc(var(--ph) * 0.66); }
  .arch-ghost { transform: translate(22px, -22px); }
  .guest-polaroid { width: 40%; right: -18%; bottom: -5%; padding: 8px 8px 26px; }
  .guest-card { margin-top: 0; max-width: 540px; justify-self: start; padding: clamp(30px, calc(var(--ph) * 0.05), 48px) 44px; }
  .guest-card::before { inset: 9px; }
  .cn { width: 26px; height: 26px; }
  .guest-name { font-size: clamp(54px, calc(var(--ph) * 0.085), 72px); }
  .guest-sub { font-size: 18px; }
  .guest-when { gap: 20px; margin-top: 22px; }
  .gw-side { font-size: 12px; min-width: 92px; padding: 8px 0; }
  .gw-date { font-size: 28px; }
  .guest-lunar { font-size: 15px; }
  .guest-venue { font-size: 18px; }

  /* 4. Chuyện của chúng mình */
  .story { gap: calc(var(--ph) * 0.05); }
  .strip { --sh: calc(var(--ph) * 0.25); height: var(--sh); width: 120%; margin-left: -10%; transform: rotate(-3deg); }
  .strip-track { gap: 22px; padding-right: 22px; }
  .strip img { width: calc(var(--sh) * 0.8); border-width: 7px; }
  .story-title { font-size: clamp(76px, calc(var(--ph) * 0.12), 120px); }
  .story-quote { font-size: clamp(17px, calc(var(--ph) * 0.026), 22px); line-height: 1.75; }

  /* 5. Lễ gia tiên */
  .ceremony .arch { --ah: calc(var(--ph) * 0.68); order: 0; }
  .ceremony .title { margin-bottom: 24px; }
  .songhy { top: 50%; left: 6%; transform: translateY(-50%); font-size: calc(var(--ph) * 0.6); color: rgba(217, 191, 140, 0.045); }
  .events { margin-top: 0; }
  .event { padding: clamp(24px, calc(var(--ph) * 0.045), 40px) 32px; }
  .event-title { font-size: 20px; }
  .event-time { font-size: clamp(44px, calc(var(--ph) * 0.068), 60px); }
  .event-date { font-size: 16px; }
  .event-lunar { font-size: 16px; }

  /* 6. Tiệc cưới: thông tin trái — bản đồ phải */
  .party .fit { max-width: var(--wrap); }
  .venue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 64px; align-items: center; text-align: center; }
  .venue > * { grid-column: 1; }
  .venue > .venue-tag { justify-self: center; }
  .venue > .map { grid-column: 2; grid-row: 1 / span 7; height: calc(var(--ph) * 0.5); border-radius: 12px; }
  .venue-date .dd { font-size: 68px; }
  .venue-lunar { font-size: 16px; }
  .venue-times b { font-size: 32px; }
  .venue-name { font-size: 22px; }
  .venue-addr { font-size: 15px; }

  /* 7. Lịch: thẻ lệch phải để lộ đôi uyên ương */
  .calendar-sec { justify-content: flex-end; align-items: center; padding: var(--pad-y) var(--gutter); }
  .cal-media img { object-position: 50% 40%; transform: none; }
  .cal-shade { background: linear-gradient(90deg, transparent 35%, rgba(246, 242, 238, 0.25) 70%), linear-gradient(180deg, rgba(246, 242, 238, 0.1), transparent 40%, rgba(58, 44, 37, 0.2)); }
  .cal-card { width: min(480px, 42vw); padding: 36px 34px 30px; }
  .cal-month { font-size: 22px; margin: 2px 0 12px; }
  .cal-grid { font-size: 16px; }
  .cal-grid .d { height: 40px; }
  .cal-grid .d.is-day::before, .cal-grid .d.is-sub::before { width: 38px; height: 38px; }
  .cal-legend { font-size: 13.5px; margin-top: 12px; }
  .countdown { gap: 14px; margin-top: 18px; }
  .cd { --cd: 84px; }
  .cd b { font-size: 27px; }
  .cd span { font-size: 11px; }
  .cd-note { font-size: 17px; }

  /* 8. Album: 4 cột × 2 hàng, ô ảnh dọc 3:4 */
  .gallery {
    height: calc(var(--ph) * 0.62); width: min(100%, calc(var(--ph) * 0.95));
    margin: 0 auto; gap: 14px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr);
  }
  .gallery a:first-child { grid-column: auto; }
  .gallery a:nth-child(even) { transform: translateY(18px); }

  /* 10. Cảm ơn */
  .thanks-media img { object-position: 50% 32%; }
  .thanks-title { font-size: clamp(90px, calc(var(--ph) * 0.14), 128px); }
  .thanks-sub { font-size: 20px; max-width: 560px; margin-left: auto; margin-right: auto; } /* 2 dòng cân đối */
}