/* ============ Fonts (self-host, OFL — tải từ Google Fonts) ============ */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ms Madi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/msmadi-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Ms Madi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/msmadi-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ms Madi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/msmadi-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pinyonscript-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pinyonscript-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pinyonscript-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   THIỆP CƯỚI — Long Phụng (đỏ #680E0E + vàng #E9CE9E)
   Cấu trúc & tỉ lệ dựng theo thiệp cưới cổ điển trang trọng.
   Tokens trước, component chỉ tiêu token.
   ============================================================ */

:root {
  /* ---- Màu ---- */
  --bg:        #680E0E;   /* đỏ thân thiệp */
  --bg-deep:   #100101;   /* đáy gradient cover */
  --cover-grad: linear-gradient(to bottom right, #2A0404, #1A0202, #100101);
  --brown:     #553F18;
  --seal-text: #360202;
  --gold-a80:  rgba(233, 206, 158, .8);
  --guest-box: rgba(233, 206, 158, .15);
  --bronze:    #D9BC86;   /* vàng dịu cho hoạ tiết nhỏ (nốt kim cương timeline…) */
  --surface:   #7A1B1B;   /* panel sáng hơn */
  --ink:       #E9CE9E;   /* chữ vàng chính — 8.3:1 trên bg */
  --ink-soft:  #D9BC86;   /* chữ vàng phụ   — 6.8:1 */
  --gold:      #E9CE9E;
  --on-gold:   #553F18;   /* chữ trên nút vàng */
  --line:      color-mix(in srgb, #E9CE9E 30%, transparent);
  --line-soft: color-mix(in srgb, #E9CE9E 16%, transparent);
  --shadow:    0 14px 36px -14px rgba(0, 0, 0, .6);

  /* ---- Chữ (stack đúng reference) ---- */
  --f-script:  "Pinyon Script", "Great Vibes", cursive;
  --f-amp:     "Ms Madi", cursive;
  --f-serif:   Baskerville, "Times New Roman", serif;
  --f-lora:    "Lora", "Times New Roman", serif;
  --f-sans:    -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:     .75rem;    /* 12px — ghi chú, thứ bậc, giờ lưu bút */
  --fs-sm:     .8125rem;  /* 13px — địa chỉ, body phụ (đo từ mẫu) */
  --fs-base:   .875rem;   /* 14px — body (đo từ mẫu: 14px/1.625) */
  --fs-md:     1.25rem;   /* 20px — tiêu đề section, giờ */
  --fs-lg:     1.875rem;  /* 30px — số ngày cỡ lớn */
  --fs-script: clamp(2.5rem, 11vw, 4rem);     /* tên cô dâu chú rể: 40px mobile → 64px desktop */

  /* ---- Layout Contract (đo từ mẫu tham chiếu) ---- */
  --container:      480px;                  /* mobile: w-full, trần 480 */
  --container-md:   900px;                  /* ≥768px: 900 canh giữa, có viền mảnh */
  --content:        600px;                  /* bề rộng ruột nội dung bên trong panel */
  --gutter:         24px;
  --space-within:   12px;                   /* trong một nhóm */
  --space-between:  28px;                   /* giữa các nhóm  */
  --space-section:  64px;                   /* giữa các section */

  --r-card: 10px;
  --r-pill: 999px;
  --ease:   cubic-bezier(.22, .8, .3, 1);
}

/* ============ Nền tảng ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html.gate-locked, html.gate-locked body {
  overflow: hidden; overscroll-behavior: none;
  position: fixed; inset: 0; width: 100%; height: 100%;   /* iOS Safari: chỉ overflow:hidden là nền vẫn cuộn, lòi ảnh dưới đáy */
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: var(--space-within); top: var(--space-within); z-index: 100;
  padding: var(--space-within) var(--space-between);
  background: var(--gold); color: var(--on-gold);
  border-radius: var(--r-pill); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ============ Thân thiệp: một dải đỏ có watermark chìm ============ */
main {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  main {
    max-width: var(--container-md);
    border: 1px solid #E9CE9E22;
    border-radius: var(--r-card);
  }
}
/* 3 lớp texture parallax — transform set bằng JS theo scrollY */
.plx {
  position: absolute; z-index: 0;
  width: clamp(800px, 150vw, 1600px);
  height: clamp(1200px, 300vw, 2400px);
  background: url(../img/bg-main.webp) center / contain no-repeat;
  opacity: .4;
  will-change: transform;
  pointer-events: none;
}
.plx1 { left: 50%; top: 500px; background-position: center top; }
.plx2 { left: 65%; bottom: 1500px; background-position: center bottom; }
.plx3 { left: 35%; bottom: -450px; background-position: center bottom; }
@media (min-width: 768px) { /* PHẢI đứng sau base rule để không bị ghi đè */
  .plx1 { top: 700px; }
  .plx2 { bottom: -200px; }
  .plx3 { display: none; }
}

.sec {
  position: relative; z-index: 1;
  padding: var(--space-section) var(--gutter);
  text-align: center;
}
.sec > *, .footer > * { max-width: var(--content); margin-inline: auto; }
.sec-panel { background: color-mix(in srgb, #000 12%, var(--bg)); }

/* tiêu đề section: serif caps giãn chữ + gạch nhũ */
/* mẫu có 2 bậc tiêu đề: thường 16→20px, hai mục điểm nhấn 20→26px */
.sec-h {
  font-family: var(--f-serif);
  font-size: 20px; font-weight: 400; line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block-end: 16px;
}
@media (min-width: 768px) { #wishes .sec-h, #gift .sec-h { font-size: 26px; } }
.note, .center { text-align: center; }
/* trạng thái rỗng của sổ lưu bút: đóng khung nhẹ cho đỡ trống trải */
#wishes-empty, #wishes-note {
  max-width: 440px;
  margin: var(--space-between) auto 0;
  padding: 18px var(--gutter);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
}
.note { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* chữ script vàng: tên cô dâu chú rể */
.script {
  font-family: var(--f-script);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.25;
}
.script .amp { font-family: var(--f-serif); font-size: .38em; display: block; line-height: 1.5; margin-block: -.1em; } /* optical: & sát hai tên */

/* ============ Nút ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: var(--space-within) var(--space-between);
  border: 1px solid var(--gold); border-radius: var(--r-pill);
  background: var(--gold); color: var(--on-gold);
  font-family: var(--f-serif); font-size: 14px; font-weight: 600; line-height: 20px;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--gold), #fff 14%); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-block { width: 100%; }
.party-rsvp, #rsvp-submit { font-size: 16px; line-height: 24px; }   /* mẫu: nút xác nhận 16px/600 */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.cta-row { display: grid; justify-content: center; margin-block-start: var(--space-between); }
.link-line {
  display: inline-block;
  font-size: 14px; font-weight: 300; line-height: 20px;
  color: var(--ink-soft);
  border-block-end: 1px solid var(--line);
  padding-block-end: 4px;  /* mẫu: underline-offset-4 */
  text-decoration: none;
  margin-block-start: var(--space-between);
}
.link-line:hover { color: var(--ink); border-color: var(--gold); }

/* ============ Phong bì ============ */
.gate {
  position: fixed; inset: 0; z-index: 60;
  height: 100vh; height: 100dvh;          /* dvh: co giãn theo thanh công cụ Safari, không hụt đáy */
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; overscroll-behavior: none;   /* màn thấp thì cuộn cả lớp phủ, không lan ra nền */
  -webkit-overflow-scrolling: touch;
  padding: var(--gutter);
  background: var(--cover-grad);
  transition: opacity .5s var(--ease), visibility .5s;
}
html.no-js .gate { display: none; }
.gate.open { opacity: 0; visibility: hidden; }
.gate.flying .gate-card { animation: envelope-away .8s ease-in forwards; }
@keyframes envelope-away {
  0%   { transform: translateY(0) rotate(0deg);        opacity: 1; }
  15%  { transform: translateY(10px) rotate(.5deg);    opacity: 1; }
  100% { transform: translateY(-120vh) rotate(-2deg);  opacity: 0; }
}
.gate-card {
  position: relative;
  width: 310px; max-width: 100%;
  padding: 112px 24px 56px;
  text-align: center;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  margin: auto;
  overflow: hidden;        /* hoạ tiết rồng phượng phải nằm gọn trong thiệp — Safari iOS từng lòi ảnh dưới đáy */
}
@media (min-width: 640px)  { .gate-card { width: 340px; } }
@media (min-width: 768px)  { .gate-card { width: 520px; padding: 96px 24px 32px; } }
@media (min-width: 1024px) { .gate-card { width: 600px; } }
/* hoạ tiết bg-main trang trí giữa cover */
.gate-decor {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  translate: -50% -50%;
  width: 250px; aspect-ratio: 1171 / 1444;
  background: url(/assets/img/bg-main.webp) center / contain no-repeat;
  opacity: .2;
  pointer-events: none;
}
@media (min-width: 768px) { .gate-decor { width: 350px; } }
.gate-seal {
  position: absolute; left: 50%; top: 50px;
  width: 72px; height: 72px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  line-height: 1;
  --seal-shadow: rgba(233, 206, 158, .28);   /* quầng sáng nhẹ sau hoạ tiết */
  animation: seal-pulse 2s ease-in-out infinite;
  z-index: 2;
}
.gate-seal img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes seal-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 4px 20px var(--seal-shadow); }
  50%      { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 6px 35px var(--seal-shadow); }
}
/* triện vỡ khi bấm mở thiệp (keyframe theo reference) */
.gate.opening .gate-seal { animation: seal-break .5s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes seal-break {
  0%   { transform: translate(-50%, -50%) scale(1)    rotate(0deg);  opacity: 1;  filter: brightness(1); }
  30%  { transform: translate(-50%, -50%) scale(1.15) rotate(5deg);  opacity: .9; filter: brightness(1.3); }
  60%  { transform: translate(-50%, -50%) scale(1.05) rotate(-3deg); opacity: .5; filter: brightness(1.5); }
  100% { transform: translate(-50%, -50%) scale(0)    rotate(15deg); opacity: 0;  filter: brightness(2); }
}
/* vòng sáng lan từ triện */
.seal-ring {
  position: absolute; left: 50%; top: 0; z-index: 2;
  width: 56px; height: 56px;
  border: 2px solid var(--gold); border-radius: var(--r-pill);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.8);
}
.gate.opening .seal-ring { animation: seal-ring .6s ease-out forwards; }
@keyframes seal-ring {
  0%   { opacity: .8; transform: translate(-50%, -50%) scale(.8); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(2.5); }
}
/* rồng phượng lao về phía người xem */
.fly-art {
  position: fixed; z-index: 70;
  pointer-events: none;
  animation: dragon-fly-forward 1.2s ease-in forwards;
}
@keyframes dragon-fly-forward {
  0%   { transform: scale(1);   filter: blur(0);    opacity: .7; }
  40%  { transform: scale(1.6); filter: blur(2px);  opacity: .5; }
  100% { transform: scale(3);   filter: blur(10px); opacity: 0; }
}
/* 32 hạt trái tim bắn toả tròn */
.burst svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.burst {
  position: fixed; z-index: 70;
  color: var(--gold); line-height: 1;
  pointer-events: none;
  animation: particle-burst 1.4s cubic-bezier(.25, .46, .45, .94) forwards;
}
@keyframes particle-burst {
  0%   { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }
  15%  { transform: translate(calc(var(--tx) * .15), calc(var(--ty) * .15)) scale(1.3) rotate(var(--rot, 25deg)); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(.6) rotate(var(--rot2, 60deg)); opacity: 0; }
}
.gate-seal.small { position: static; transform: none; width: 56px; height: 56px; margin: 0 auto var(--space-within); animation: none; }
.gate-names { font-size: 30px; line-height: 1.25; position: relative; z-index: 1; }
@media (min-width: 640px) { .gate-names { font-size: 36px; } }
.gate-names .amp { font-family: var(--f-serif); font-size: 18px; font-weight: 400; line-height: 18px; }   /* mẫu: & trên cover là serif 18px */
/* rồng phượng vắt hai góc cover (một phần tràn ra ngoài card như mẫu) */
.gate-art {
  position: absolute; z-index: 0;
  height: auto;
  opacity: .16;
  pointer-events: none;
}
.gate-art.l { width: 200px; left: -70px; top: -10px; }
.gate-art.r { width: 200px; right: -70px; top: auto; bottom: -40px; }
@media (min-width: 768px) {
  .gate-art.l { width: 280px; left: -90px; top: -20px; }
  .gate-art.r { width: 280px; right: -90px; bottom: -140px; }
}
.rule {
  width: 96px; height: 1px; border: 0;
  margin: 28px auto; /* optical: gạch nhũ trong thiệp cần sát hơn nhịp chung */
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative; overflow: visible;
}
.rule::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; translate: -50% -50%; rotate: 45deg;
  background: var(--gold);
}
.gate-date { font-family: var(--f-lora); font-size: 18px; line-height: 1.5; font-weight: 300; position: relative; z-index: 1; }
.gate-to {
  margin-block-start: 30px;
  font-family: var(--f-lora);
  font-size: 18px; line-height: 1.5; letter-spacing: .02em;
  color: var(--gold-a80);
  position: relative; z-index: 1;
}
.gate-guest {
  display: inline-block;
  font-family: var(--f-lora); font-size: 1.0625rem; line-height: 1.4;
  color: var(--gold);
  background: var(--guest-box);
  border-radius: var(--r-card);
  padding: 8px 16px; /* optical: hộp tên khách */
  margin-block-start: 8px;
  position: relative; z-index: 1;
}
.gate-card .btn {
  margin-block-start: 34px;
  position: relative; z-index: 1; overflow: hidden;
  min-width: 235px; min-height: 48px;
  border: 0;
  font-family: var(--f-lora); font-size: 18px; line-height: 1.2; text-transform: none; letter-spacing: .02em;
  padding: 10px 32px;
  color: var(--seal-text);
  box-shadow: rgba(233, 206, 158, .35) 0 4px 14px;
}
.gate-card .btn::after { /* dải sáng hẹp quét qua nút */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 32px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-48px) skewX(-16deg);
  animation: btn-shine 3s ease-in-out infinite;
}
@media (min-width: 768px) { .gate-card .btn { font-weight: 500; } }
@keyframes btn-shine { 0% { transform: translateX(-48px) skewX(-16deg); } 60%, 100% { transform: translateX(300px) skewX(-16deg); } }

/* lớp trái tim bay lên nền phong bì */
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ambient span svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.ambient span {
  position: absolute; bottom: -30px;
  color: #CD853F; line-height: 1;
  animation: ambient-rise var(--dur, 20s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes ambient-rise {
  0%   { transform: translateY(6vh)  translateX(0)             rotate(0deg); opacity: 0; }
  12%  { opacity: .45; }
  55%  { transform: translateY(-42vh) translateX(var(--sway, 20px)) rotate(8deg); opacity: .55; }
  92%  { opacity: .35; }
  100% { transform: translateY(-92vh) translateX(0)            rotate(0deg); opacity: 0; }
}

/* tia sáng nhấp nháy quanh thiệp / hộp quà */
.spark {
  position: absolute; color: var(--gold); font-size: var(--fs-base);
  animation: twinkle 2s ease-in-out infinite; pointer-events: none;
}
.spark.s1 { top: -10px; left: 8%; }
.spark.s2 { top: 16%; right: -12px; animation-delay: .6s; }
.spark.s3 { bottom: -10px; left: 18%; animation-delay: 1.2s; }
.spark.s4 { bottom: 22%; left: -12px; animation-delay: 1.7s; }
@keyframes float3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* ============ Hero ============ */
/* hoạ tiết long phụng chìm sau tên (tự vẽ — tools/make_longphung.py) */
.longphung {
  position: absolute; top: 48px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 32px;
  opacity: .15;
  pointer-events: none;
  z-index: 0;
}
.longphung img { height: 354px; width: auto; }
@media (min-width: 768px) {
  .longphung { top: 64px; }
  .longphung img { height: 572px; }
}
.hero-names { position: relative; z-index: 1; }

.hero {
  position: relative; z-index: 1;
  min-height: 472px;
  display: grid; place-items: center;
  padding: var(--space-section) var(--gutter);
  text-align: center;
}
.hero-names { font-size: 50px; font-weight: 300; line-height: 1.5; }
.hero-names .amp { font-family: var(--f-amp); font-size: 37px; font-weight: 300; }
@media (min-width: 768px) {
  .hero-names { font-size: 70px; }
  .hero-names .amp { font-size: 50px; }
}
@media (min-width: 768px) { .hero { min-height: 650px; } }

/* ============ Album: lưới 2 cột ô vuông ============ */
/* chips chọn danh mục ảnh */
.cate-tabs {                      /* T2 · Ngoặc nhũ: tab đang chọn được hai dấu ⟨ ⟩ ôm lấy */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2px;
  margin-block-end: var(--space-between);
}
.cate-tab {
  position: relative;
  border: 0; background: transparent;
  font-family: var(--f-serif);
  font-size: 14px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  padding: 12px 18px;
  min-height: 48px;
  transition: color .3s var(--ease);
}
.cate-tab:hover { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.cate-tab[aria-selected="true"] { color: var(--gold); }
.cate-tab[aria-selected="true"]::before,
.cate-tab[aria-selected="true"]::after {
  position: absolute; top: 50%; translate: 0 -52%;
  font-size: 16px; line-height: 1; color: var(--gold);
}
.cate-tab[aria-selected="true"]::before { content: "\27E8"; left: 2px; }
.cate-tab[aria-selected="true"]::after  { content: "\27E9"; right: 2px; }
.cate-tab + .cate-tab { margin-inline-start: 14px; }
.cate-tab + .cate-tab::marker { content: none; }
.cate-tabs .cate-sep {            /* viên kim cương ngăn giữa hai tab */
  width: 4px; height: 4px; rotate: 45deg; background: var(--line);
  flex: none;
}
@media (min-width: 768px) { .cate-tab { font-size: 15px; padding-inline: 22px; } }
@media (max-width: 430px) {       /* hẹp thì thu nhỏ cho vừa 3 tab, không phải cuộn */
  .cate-tab { font-size: 12px; letter-spacing: .08em; padding-inline: 13px; }
  .cate-tab + .cate-tab { margin-inline-start: 9px; }
}

.album { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-within); }
.ph {
  position: relative; display: block; width: 100%; padding: 0; text-decoration: none;
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  background: color-mix(in srgb, #000 10%, var(--bg));
  overflow: hidden;
}
.ph img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s var(--ease); }
.ph:hover img { transform: scale(1.04); }
.ph .more { /* ô cuối: +N ảnh nữa */
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, #000 55%, transparent);
  color: var(--gold); font-size: var(--fs-md);
}

/* ============ Thông tin lễ cưới ============ */
/* hai nhà đứng cạnh nhau như mẫu: trai trái · gái phải */
.fams {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-between) var(--gutter);
  margin-block-start: var(--space-between);
  align-items: start;
}
.fam-label {
  font-size: 14px; line-height: 1.5; font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  margin-block-end: var(--space-within);
}
.fam-names { font-size: 13px; font-weight: 300; line-height: 1.5; letter-spacing: .05em; }
.fam-addr { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); margin-block-start: var(--space-within); }
@media (min-width: 768px) {   /* số đo lấy từ mẫu */
  .fam-label { font-size: 20px; }
  .fam-names { font-size: 23px; line-height: 1.5; }
  .fam-addr { font-size: 18px; line-height: 1.5; }
}

.announce {
  margin-block-start: var(--space-section);
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 2;
}
.couple { margin-block-start: var(--space-between); }
.couple-name { font-size: 40px; font-weight: 400; line-height: 1.25; }
@media (min-width: 768px) { .couple-name { font-size: 64px; line-height: 1.5625; } }
.couple-rank {
  font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.amp-line {
  font-family: var(--f-amp);
  font-size: 35px; font-weight: 300;     /* & Ms Madi như mẫu: 35 → 48px */
  line-height: 1.5;
  color: var(--gold);
  margin-block: var(--space-within);
}
@media (min-width: 768px) { .amp-line { font-size: 48px; } }   /* phải đứng sau khai báo gốc */

.ceremony { margin-block-start: var(--space-section); }
.cer-label { font-size: 16px; font-weight: 300; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.cer-label.vao-luc { font-weight: 400; letter-spacing: normal; margin-block-start: var(--space-between); }
@media (min-width: 768px) { .cer-label.vao-luc { font-size: 18px; } }
.cer-venue { font-size: 17px; font-weight: 400; letter-spacing: .05em; margin-block-start: var(--space-within); }
.cer-addr { font-size: 14px; font-weight: 300; letter-spacing: .025em; line-height: 1.43; color: var(--ink-soft); margin-block-start: 4px; } /* optical: địa chỉ dính tên nơi */
@media (min-width: 768px) { .cer-venue { font-size: 19px; } .cer-addr { font-size: 16px; letter-spacing: .025em; } }
.cer-time { font-size: 20px; font-weight: 300; margin-block-start: var(--space-within); font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 768px) { .cer-time { font-size: 30px; } }

/* khối ngày: thứ | ngày | tháng — vạch là phần tử riêng 2px nên luôn đối xứng (đo từ mẫu) */
.date-row {
  display: flex; justify-content: center; align-items: center;
  gap: 24px;
  margin-block-start: var(--space-within);
}
.date-sep { width: 2px; height: 24px; background: var(--gold); flex: none; }
.dc-sm  { font-size: 12px; font-weight: 300; text-transform: uppercase; }
.dc-big { font-size: 30px; font-weight: 300; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.date-year {
  font-size: 18px; font-weight: 300;      /* năm đứng riêng dưới hàng ngày, như mẫu */
  font-variant-numeric: lining-nums tabular-nums;
  margin-block-start: var(--space-within);
}
@media (min-width: 768px) {
  .date-sep { height: 32px; }
  .dc-sm { font-size: 16px; }
  .dc-big { font-size: 40px; }
  .date-year { font-size: 24px; }
}
.cer-lunar { font-size: 12px; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: var(--ink-soft); margin-block-start: var(--space-within); }
@media (min-width: 768px) { .cer-lunar { font-size: 14px; letter-spacing: .12em; } }

/* ============ Thông tin tiệc cưới ============ */
.party-item {
  margin-block-start: var(--space-between);   /* không dính tiêu đề mục */
  margin-block-end: var(--space-between);
  padding: var(--space-between) var(--gutter);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
}
.party-item:last-child { margin-block-end: 0; }
.party-side {
  position: relative;
  font-size: 20px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
  padding-block-end: 18px;
  margin-block-end: var(--space-between);
}
.party-side::after {          /* vạch nhũ ngắn ở giữa thay cho đường kẻ chạy hết bề ngang */
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 56px; height: 1px; background: var(--gold);
  translate: -50% 0;
}
@media (min-width: 768px) { .party-side { font-size: 22px; } }
.party-links { margin-block-start: var(--space-within); }
.link-dot { color: var(--ink-soft); margin-inline: 8px; }
.party-lead { font-size: 16px; font-weight: 300; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.party-host { font-size: 17px; font-weight: 400; letter-spacing: .05em; margin-block-start: var(--space-within); }
@media (min-width: 768px) { .party-host { font-size: 19px; } }

/* đếm ngược: dùng lại ngôn ngữ ô ngày — số lớn, vạch nhũ ngăn giữa */
.cd-row {
  display: flex; justify-content: center; align-items: center;
  gap: 18px;
  margin-block-end: var(--space-between);
}
.cd-cell { display: grid; justify-items: center; gap: 4px; min-width: 52px; }
.cd-num {
  font-size: 30px; font-weight: 300; line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
/* cửa sổ trượt: hai số chồng lên nhau, cắt gọn phần tràn ra ngoài */
.cd-num { display: inline-grid; overflow: hidden; }
.cd-num > .cd-digit { grid-area: 1 / 1; }
/* mềm: đi quãng ngắn (58%), ease-out cubic, mờ dần sớm nên không thấy hai số cùng lúc */
.cd-digit.out { animation: cdSlideOut .58s cubic-bezier(.33, 1, .68, 1) forwards; }
.cd-digit.in { animation: cdSlideIn .58s cubic-bezier(.33, 1, .68, 1); }
@keyframes cdSlideOut {
  0%   { translate: 0 0;     opacity: 1; }
  100% { translate: 0 -58%;  opacity: 0; }
}
@keyframes cdSlideIn {
  0%   { translate: 0 58%;   opacity: 0; }
  55%  { opacity: 1; }
  100% { translate: 0 0;     opacity: 1; }
}
/* bốn ô hiện dần so le khi cuộn tới */
.cd-cell, .cd-row .date-sep {
  opacity: 0; translate: 0 10px;
  transition: opacity .45s var(--ease), translate .45s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.cd-row.in .cd-cell, .cd-row.in .date-sep { opacity: 1; translate: 0; }
@media (prefers-reduced-motion: reduce) {
  .cd-cell, .cd-row .date-sep { opacity: 1; translate: 0; transition: none; }
  .cd-digit.out, .cd-digit.in { animation: none; }
}
.cd-lb {
  font-size: 11px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.cd-row .date-sep { height: 30px; }
@media (min-width: 768px) {
  .cd-row { gap: 26px; }
  .cd-cell { min-width: 68px; }
  .cd-num { font-size: 40px; }
  .cd-lb { font-size: 12px; }
  .cd-row .date-sep { height: 40px; }
}
@media (max-width: 360px) { .cd-row { gap: 12px; } .cd-num { font-size: 26px; } }

/* lịch tháng — card viền vàng, hàng thứ gạch đậm, ngày cưới có tim (như mẫu) */
.cal {
  max-width: 560px; margin: var(--space-between) auto 0;
  padding: 20px 16px 24px;
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
}
.cal-title {
  font-size: 13px; font-weight: 600; letter-spacing: .025em; text-align: center;
  padding-block-end: 14px; margin-block-end: 4px;
  border-block-end: 1px solid var(--line-soft);
}
.cal-head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-block-end: 2px solid var(--gold);
}
.cal-wd { padding: 12px 0 10px; font-size: 10px; font-weight: 500; color: var(--ink-soft); text-align: center; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 6px;
  padding-block-start: 12px;
  font-size: 12px; font-weight: 300; font-variant-numeric: lining-nums tabular-nums;
}
.cal-d { position: relative; display: grid; place-items: center; min-height: 44px; }
.cal-d.mark svg { position: absolute; width: 34px; height: 34px; fill: var(--gold); }
.cal-d.mark b { position: relative; font-weight: 700; font-size: 11px; color: var(--on-gold); translate: 0 2px; }
@media (min-width: 768px) {
  .cal { padding: 24px 24px 28px; }
  .cal-title { font-size: 14px; }
  .cal-wd { font-size: 11px; }
  .cal-grid { font-size: 13px; }
}


/* nút xác nhận riêng của từng tiệc */
.party-rsvp { margin-block-start: var(--space-between); }

/* ============ Album dạng popup ============ */
.album-modal .album-sheet {
  width: min(960px, 100vw); max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; border-radius: 0;
  display: flex; flex-direction: column;
  overflow: hidden;                 /* lưới cuộn bên trong, đầu trang đứng yên */
  animation: albumSheetIn .4s var(--ease) both;
}
.album-modal::backdrop { animation: albumFade .3s var(--ease) both; }
@keyframes albumSheetIn { from { opacity: 0; transform: translateY(26px) scale(.99); } }
@keyframes albumFade { from { opacity: 0; } }
@media (min-width: 768px) {
  .album-modal .album-sheet {
    height: 92dvh; border: 1px solid var(--line); border-radius: var(--r-card);
  }
}
.album-sheet-head {
  flex: none; position: relative; z-index: 2;
  padding: 26px var(--gutter) 14px;
  border-block-end: 1px solid var(--line-soft);
  background: var(--bg);
}
.album-sheet-head .sec-h { margin-block-end: 6px; }
.album-sheet-head .cate-tabs { margin-block-end: 0; margin-block-start: 10px; }
.album-count { margin-block-start: 0; }
.album-modal .album-full {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  align-content: start;
  padding: var(--space-between) var(--gutter) var(--space-section);
}
@media (min-width: 768px) { .album-modal .album-full { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .album-modal .album-full { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Lưới album trong popup: ô đều nhau, khung mảnh, ảnh hiện dần ---- */
.album-full {
  gap: 12px;
  align-content: start;
  grid-auto-rows: max-content;   /* bắt buộc: thiếu dòng này hàng bị kéo giãn đều và ảnh đè lên nhau */
}
.album-full .ph {
  /* <button> không truyền chiều cao của ảnh ra ngoài → hàng lưới bị co rồi kéo giãn đều,
     ảnh tràn đè lên hàng dưới. Cố định tỉ lệ ngay trên ô và cho ảnh phủ tuyệt đối. */
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 0;
}
.album-full .ph img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;   /* giữa khung — không cắt mất mặt */
  border-radius: inherit;
  opacity: 0; transition: opacity .45s var(--ease);
}
.album-full .ph img.loaded { opacity: 1; }
.album-full .ph:hover img, .album-full .ph:focus-visible img { opacity: .88; }
/* hiện dần: mờ + nhích lên, so le theo --i */
.album-full .ph {
  opacity: 0; translate: 0 14px;
  transition: opacity .42s var(--ease), translate .42s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.album-full .ph.in { opacity: 1; translate: 0; }
@media (prefers-reduced-motion: reduce) {
  .album-full .ph { opacity: 1; translate: 0; transition: none; }
  .album-full .ph img { opacity: 1; transition: none; }
}

/* ============ Chuyện tình yêu — S2 · Nguyệt môn ============
   Ảnh cắt tròn viền chỉ nhũ đôi, so le hai bên,
   phía sau là số thứ tự viết bằng chữ thư pháp cỡ lớn mờ. */
.story { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.story-item {
  position: relative;
  display: grid; grid-template-columns: 124px 1fr;
  align-items: center; gap: 18px;
  padding-block: var(--space-between);
}
.story-item:nth-child(even) { grid-template-columns: 1fr 124px; }
.story-num {                      /* số thứ tự thư pháp chìm sau ảnh */
  position: absolute; z-index: 0; top: 6px; left: 50%; translate: -50% 0;
  font-family: var(--f-script); font-size: 84px; line-height: 1;
  color: color-mix(in srgb, var(--gold) 14%, transparent);
  pointer-events: none; user-select: none;
}
.story-fig {
  position: relative; z-index: 1; grid-column: 1; grid-row: 1;
  margin: 0; justify-self: start;
}
.story-item:nth-child(even) .story-fig { grid-column: 2; justify-self: end; }
.story-fig img {
  display: block; width: 124px; aspect-ratio: 1;
  object-fit: cover; object-position: center 22%;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 6px transparent, 0 0 0 7px var(--line-soft);
}
.story-body {
  position: relative; z-index: 1; grid-column: 2; grid-row: 1;
  text-align: left;
}
.story-item:nth-child(even) .story-body { grid-column: 1; text-align: right; }
.story-item.no-photo .story-body { grid-column: 1 / -1; text-align: center; }
.story-date {
  font-size: 11px; font-weight: 300; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
}
.story-title { font-size: 18px; font-weight: 500; line-height: 1.35; margin-block: 5px 0; }
.story-text { font-size: 14px; font-weight: 300; line-height: 1.625; color: var(--ink-soft); margin-block-start: 8px; }

@media (min-width: 768px) {
  .story-item { grid-template-columns: 168px 1fr; gap: 28px; }
  .story-item:nth-child(even) { grid-template-columns: 1fr 168px; }
  .story-fig img { width: 168px; }
  .story-num { font-size: 120px; top: -6px; }
  .story-title { font-size: 20px; }
}

/* ============ Hộp quà ============ */
.gift-reveal { display: grid; justify-content: center; }
/* hai phong bao lì xì vàng tựa vào nhau (tự dựng CSS, hoạ tiết rồng/phượng chìm) */
/* hộp quà: hai phong bao — hình học & animation đo từ mẫu (ienv*) */
.ienv {
  position: relative;
  width: 250px; height: 357px;
  padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.ienv-stage {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-block-end: 48px;
}
.ienv-pair { position: relative; width: 190px; height: 275px; }
.ienv-shadow {
  position: absolute; left: 50%; bottom: -6px;
  width: 125.4px; height: 11px; margin-inline-start: -62.7px;
  border-radius: 50%; background: rgba(0, 0, 0, .45);
  filter: blur(4px); pointer-events: none;
  animation: ienvShadowPulse 3s ease-in-out infinite;
}
.ienv-back, .ienv-card {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  pointer-events: none;
}
.ienv-back {
  transform-origin: 50% 100%;
  transform: translateX(20%) translateY(-10%) scale(-.8, .8) rotate(-15deg);  /* lật gương, lùi ra sau */
  z-index: 1;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
  animation: ienvFloat 5.2s ease-in-out .5s infinite;
}
.ienv-card {
  transform-origin: 50% 92%;
  rotate: -10deg; z-index: 2;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22));
  transition: transform .35s;
  animation: ienvFloatMain 3s ease-in-out infinite;
}
@keyframes ienvFloat { 0%, 100% { translate: 0; } 50% { translate: 0 -7px; } }
@keyframes ienvFloatMain { 0%, 100% { translate: -15%; } 50% { translate: -15% -7px; } }
@keyframes ienvShadowPulse { 0%, 100% { transform: scaleX(1); opacity: .28; } 50% { transform: scaleX(.9); opacity: .16; } }
@keyframes ienvSparkleAnim { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ienvHintPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes ienvGrow { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes ienvWave {
  0% { transform: scale(1.12) rotate(0deg); }
  20% { transform: scale(1.12) rotate(-6deg); }
  40% { transform: scale(1.12) rotate(4.5deg); }
  60% { transform: scale(1.12) rotate(-3deg); }
  80% { transform: scale(1.12) rotate(1.5deg); }
  100% { transform: scale(1.12) rotate(0deg); }
}
@keyframes ienvBackWave { 0%, 100% { rotate: 0deg; } 20% { rotate: -1deg; } 40% { rotate: 2deg; } 60% { rotate: -2.5deg; } 80% { rotate: 1.5deg; } }
.ienv:hover .ienv-card, .ienv:focus-visible .ienv-card {
  animation: ienvFloatMain 3s ease-in-out infinite, ienvGrow .35s ease forwards, ienvWave 1.1s ease-in-out .35s infinite;
}
.ienv:hover .ienv-back, .ienv:focus-visible .ienv-back {
  animation: ienvFloat 5.2s ease-in-out .5s infinite, ienvBackWave 2.2s ease-in-out infinite;
}
.ienv-sparkle {
  position: absolute; z-index: 3; pointer-events: none;
  color: var(--bronze);
  animation: ienvSparkleAnim 2s ease-in-out infinite;
}
.ienv-sparkle.s1 { top: 6%;  left: 12%;  font-size: 20.9px; }
.ienv-sparkle.s2 { top: 14%; right: 8%;  font-size: 15.2px; animation-delay: .6s; }
.ienv-sparkle.s3 { top: 34%; left: 3%;   font-size: 13.3px; animation-delay: 1.2s; }
.ienv-sparkle.s4 { top: 24%; right: 3%;  font-size: 13.3px; animation-delay: 1.7s; }
.ienv-hint {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0;
  margin: 0; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--ink);
  animation: ienvHintPulse 2s ease-in-out infinite;
}
.gift-grid { display: grid; gap: var(--space-between); }
.gift-card { display: grid; justify-items: center; gap: var(--space-within); }
.gift-card h3 { font-size: var(--fs-base); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gift-card img {
  width: min(220px, 62vw); aspect-ratio: 1; object-fit: contain;
  background: #fff; /* QR phải nền trắng để quét được */
  border-radius: var(--r-card); padding: var(--space-within);
}
.gift-acc { font-size: var(--fs-base); letter-spacing: .06em; font-variant-numeric: lining-nums tabular-nums; }

/* ============ Footer ============ */
.footer {
  position: relative; z-index: 1;
  padding: var(--space-section) var(--gutter);
  text-align: center;
  border-block-start: 1px solid var(--line-soft);
}
.footer p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.footer .footer-names {      /* trước bị .footer p đè xuống 13px */
  font-size: clamp(26px, 8vw, 34px); line-height: 1.4; color: var(--gold);
  margin-block-start: var(--space-between);
}
@media (min-width: 768px) { .footer .footer-names { font-size: 46px; } }

/* ============ Nút nhạc nổi ============ */
.disc {
  position: fixed; z-index: 50;
  right: var(--gutter); bottom: max(var(--gutter), env(safe-area-inset-bottom));
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: var(--gold);
  box-shadow: var(--shadow);
  opacity: 0; translate: 0 12px;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
html.gate-opened .disc { opacity: 1; translate: 0 0; }
.disc .eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.disc .eq i { width: 3px; height: 5px; background: var(--on-gold); border-radius: 1px; }
.disc .eq i:nth-child(2) { height: 12px; animation-delay: .12s; }
.disc .eq i:nth-child(3) { height: 8px; animation-delay: .22s; }
.disc[aria-pressed="true"] .eq i { animation: dance .4s ease-in-out infinite alternate; }
@keyframes dance { to { height: 18px; } }

/* ============ Modal ============ */
.modal { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; }
.modal::backdrop { background: rgba(0, 0, 0, .85); }
.modal-box {
  position: relative;
  width: min(430px, 92vw);
  max-height: 88dvh; overflow-y: auto;
  padding: var(--space-section) var(--gutter) var(--space-between);
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-align: center;
  animation: modalUp .35s var(--ease);
}
@keyframes modalUp { from { opacity: 0; transform: translateY(16px); } }
/* hộp quà: dải tiêu đề nền nhũ như mẫu */
.modal-box.modal-gold { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal-gold .modal-head {
  position: relative;
  padding: 22px var(--gutter) 18px;
  background: var(--gold); color: var(--on-gold);
}
.modal-gold .modal-head .sec-h { margin: 0; color: var(--on-gold); }
.modal-gold .modal-x { color: var(--on-gold); border-color: transparent; }
.modal-gold .modal-head { flex: 0 0 auto; }
/* thân hộp quà cuộn riêng — dải tiêu đề nhũ đứng yên */
.modal-gold .gift-grid {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: var(--space-between) var(--gutter) var(--space-section);
}
.modal-x {
  position: absolute; top: var(--space-within); right: var(--space-within);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
}

/* ============ Form ============ */
.rsvp-greeting { font-size: var(--fs-sm); color: var(--ink-soft); margin-block-end: var(--space-between); }
.rsvp-greeting strong { color: var(--ink); font-weight: 600; }
.field { display: grid; gap: var(--space-within); margin-block-end: var(--space-between); text-align: left; border: 0; padding: 0; margin-inline: 0; }
.field > label, .field legend { font-size: var(--fs-sm); letter-spacing: .04em; color: var(--ink); padding: 0; }
.field .hint { color: var(--ink-soft); }
input[type="text"], textarea, select {
  font-family: var(--f-sans); font-size: var(--fs-base); color: var(--ink);
  background: color-mix(in srgb, #000 18%, var(--bg));
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: var(--space-within); min-height: 48px; width: 100%;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 65%, transparent); }
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.choice-row { display: grid; gap: var(--space-within); }
.choice {                       /* hàng viên thuốc, dấu tick tròn bên trái */
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 12px 18px;
  font-size: 15px; cursor: pointer;
  background: color-mix(in srgb, #000 14%, var(--bg));
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-tick {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.choice-tick::before {
  content: ""; width: 11px; height: 6px;
  border-left: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  rotate: -45deg; translate: 0 -1px;
}
.choice.no .choice-tick::before {   /* dấu × cho lựa chọn không đến */
  width: 10px; height: 10px; rotate: 0deg; translate: 0;
  border: 0;
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) center / 1.5px 100% no-repeat;
  transform: rotate(45deg);
}
.choice:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--bg)); }
.choice:has(input:checked) .choice-tick { background: var(--gold); border-color: var(--gold); }
.choice:has(input:checked) .choice-tick::before { border-color: var(--on-gold); }
.choice.no:has(input:checked) .choice-tick::before {
  background:
    linear-gradient(var(--on-gold), var(--on-gold)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--on-gold), var(--on-gold)) center / 1.5px 100% no-repeat;
}
.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- khung viết lời chúc ngay trong mục Sổ lưu bút ---- */
.wish-form {
  display: grid; gap: var(--space-within);
  max-width: 560px; margin: 0 auto var(--space-between);
  padding: var(--space-between) var(--gutter);
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  text-align: left;
}
.wish-form input, .wish-form textarea {
  border-radius: var(--r-card);
  background: color-mix(in srgb, #000 12%, var(--bg));
}
.wish-form textarea { min-height: 116px; }
.wish-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-within); }
.wish-magic {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 16px; color: var(--bronze);
  background: color-mix(in srgb, #000 12%, var(--bg));
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.wish-magic:hover { color: var(--gold); border-color: var(--line); }
.wish-actions .btn { flex: 1; max-width: 260px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.form-status.ok { color: var(--ink); }
.field-error { font-size: var(--fs-sm); color: #FFD9C0; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid input, .field.invalid textarea { border-color: #FFD9C0; }
.form-status { display: none; font-size: var(--fs-sm); border-radius: var(--r-card); padding: var(--space-within); }
.form-status.error { display: block; background: color-mix(in srgb, #000 25%, var(--bg)); color: #FFD9C0; }
.rsvp-success { display: grid; justify-items: center; gap: var(--space-within); }
/* ---- Tung hoa khi xác nhận xong ---- */
.rsvp-success { position: relative; }
.rsvp-success > h3, .rsvp-success > p { position: relative; z-index: 1; }
.rsvp-confetti {
  position: absolute; inset: -28px -24px -24px;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.petal {
  position: absolute; top: -26px;
  width: 10px; height: 14px;
  border-radius: 60% 0 60% 0;          /* cánh hoa */
  opacity: 0;
  animation-name: petalFall;
  animation-timing-function: cubic-bezier(.36, .1, .55, 1);
  animation-fill-mode: forwards;
}
.petal.round { width: 8px; height: 8px; border-radius: 50%; }
.petal.strip { width: 4px; height: 13px; border-radius: 1px; }
@keyframes petalFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), var(--fall, 420px), 0) rotate(var(--spin, 540deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .petal { display: none; } }

.rsvp-success h3 { font-size: var(--fs-md); letter-spacing: .06em; }
.rsvp-success p { font-size: var(--fs-sm); color: var(--ink-soft); }
.rsvp-success .btn { margin-block-start: var(--space-within); }

/* honeypot — ẩn với người thật, bot vẫn thấy trong DOM */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ Lightbox ============ */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; }
.lightbox::backdrop { background: rgba(10, 6, 6, .92); }
.lb-frame { display: grid; place-items: center; }
.lb-frame img { max-width: 92vw; max-height: 82dvh; object-fit: contain; border-radius: var(--r-card); }
.lb-bar {
  position: fixed; inset-inline: 0; bottom: max(var(--gutter), env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: center; gap: var(--space-within);
}
.lb-btn {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: rgba(29, 20, 20, .8); color: var(--gold);
  font-size: var(--fs-md); line-height: 1;
}
.lb-close { position: fixed; top: var(--space-within); right: var(--space-within); }
.lb-count { font-size: var(--fs-sm); color: var(--ink); min-width: 64px; text-align: center; font-variant-numeric: lining-nums tabular-nums; }

[hidden] { display: none !important; }

/* ============ Giảm chuyển động ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gate-card, .ienv-back, .ienv-card, .ienv-shadow, .ienv-sparkle, .ienv-hint, .spark, .disc .eq i, .wish.skeleton::after, .modal-box,
  .gate-seal, .seal-ring, .ambient span, .fly-art, .burst, .gate-card .btn::after { animation: none !important; }
  .gate.opening .gate-card { animation: none !important; opacity: 0; transition: opacity .2s; }
  .ph img, .btn { transition: none; }
}

/* ============ Nới cỡ chữ trên điện thoại ============
   Bản gốc đo từ mẫu ở 13/14px — trên máy thật hơi nhỏ, nên nhích lên ~1-2px
   cho phần chữ đọc (không đụng tới tên script, số đếm ngược và bản desktop). */
@media (max-width: 767px) {
  :root {
    --fs-xs:   .8125rem;   /* 12 → 13 */
    --fs-sm:   .875rem;    /* 13 → 14 */
    --fs-base: .9375rem;   /* 14 → 15 */
  }
  body { font-size: var(--fs-base); }
  .note { font-size: 15px; }
  .fam-names { font-size: 15px; }
  .fam-addr { font-size: 13px; }
  .cer-label { font-size: 17px; }
  .cer-venue { font-size: 18px; }
  .cer-addr { font-size: 15px; line-height: 1.5; }
  .cer-lunar { font-size: 13px; }
  .dc-sm { font-size: 13px; }
  .date-year { font-size: 19px; }
  .party-lead { font-size: 17px; }
  .party-host { font-size: 18px; }
  .cd-lb { font-size: 12px; }
  .cal-title { font-size: 14px; }
  .cal-wd { font-size: 11px; }
  .cal-d { font-size: 13px; }
  .cal-d.mark b { font-size: 12px; }
  .story-eyebrow { font-size: 12px; }
  .story-title { font-size: 19px; }
  .story-text { font-size: 15px; }
  .ienv-hint { font-size: 13px; }
  .footer p { font-size: 15px; }
  .cate-tab { font-size: 15px; }
}
@media (max-width: 400px) {
  .cate-tab { font-size: 13px; letter-spacing: .08em; padding-inline: 13px; }
}