/* Font tự lưu trên Cloudflare cùng thiệp (trước đây gọi Google Fonts).
   Lấy đúng file Google phục vụ; chỉ giữ bộ tiếng Việt, Latin mở rộng, Latin.
   unicode-range giữ nguyên: trình duyệt chỉ tải bộ nào trang thực sự dùng. */
@font-face { font-family: 'Bona Nova'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bona-nova-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: 'Bona Nova'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bona-nova-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: 'Bona Nova'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bona-nova-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: 'Bona Nova SC'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bona-nova-sc-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: 'Bona Nova SC'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bona-nova-sc-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: 'Bona Nova SC'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bona-nova-sc-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: 'Gotu'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/gotu-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: 'Gotu'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/gotu-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: 'Gotu'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/gotu-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/pinyon-script-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/pinyon-script-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/pinyon-script-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; }

:root {
  --cream: #f4f4e7;
  --olive: #808c61;
  --olive-dark: #535e38;
  --olive-deep: #303f0b;
  --wine: #8e3a3a;
  --pink: #f3b7c3;
  --pink-light: #f4d0ce;
  --z: 1; /* hệ số phóng của trang, tính trong <head> */
}

* { box-sizing: border-box; }
/* Thuộc tính hidden luôn thắng (các nút có display: flex sẽ đè lên nếu không có dòng này) */
[hidden] { display: none !important; }

html, body { margin: 0; }
html {
  /* Không cho trình duyệt (iOS, Samsung Internet…) tự phóng chữ — chữ phải co cùng tỉ lệ với trang */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
body {
  background: #e7e8d3;
  text-rendering: optimizeLegibility;
}

/* Khung thiết kế 804px của Figma, co bằng transform: scale.
   .stage giữ đúng kích thước sau khi co để trang cuộn đúng chiều dài. */
.stage {
  width: calc(804px * var(--z));
  height: calc(13599px * var(--z));
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 0 40px rgba(83, 94, 56, .18);
}
.page {
  position: relative;
  width: 804px;
  height: 13599px;
  overflow: hidden;
  background: var(--cream);
  transform: scale(var(--z));
  transform-origin: 0 0;
}

/* ---------- Tiện ích định vị ---------- */
.a { position: absolute; display: block; max-width: none; }
.c { object-fit: cover; }
.blend { mix-blend-mode: multiply; }
.leaf { opacity: .7; transform: rotate(-1.01deg); }

.crop { position: absolute; overflow: hidden; }
.crop-r { position: relative; overflow: hidden; }
.crop > img, .crop-r > img { position: absolute; display: block; max-width: none; }

.rot { position: absolute; display: flex; align-items: center; justify-content: center; }
.rot > * { flex: none; display: block; max-width: none; }

.t { position: absolute; margin: 0; white-space: nowrap; line-height: normal; font-weight: 400; }
.cx { transform: translateX(-50%); text-align: center; }
.rx { transform: translateX(-100%); text-align: right; }
.up { text-transform: uppercase; }

.script { font-family: 'Pinyon Script', cursive; font-weight: 400; }
.sc { font-family: 'Bona Nova SC', 'Bona Nova', serif; }
.serif { font-family: 'Bona Nova', serif; }
.gotu { font-family: 'Gotu', serif; }

/* ---------- Lời mời + đếm ngược ---------- */
.countdown .num { top: 1974px; font-size: 64px; color: var(--wine); font-variant-numeric: tabular-nums; }
/* Mỗi chữ số một ô rộng cố định (vừa chữ số rộng nhất của Gotu, số 0 = .664em): số đổi thì cả cụm không xê dịch ngang.
   Ô cao đúng một dòng Gotu (107px ở cỡ 64px = 1.672em) nên số thẳng hàng với dấu hai chấm như thiết kế. */
.countdown .num[data-cd] { display: flex; }
.countdown .slot { position: relative; width: .67em; height: 1.672em; overflow: hidden; }
.countdown .slot > span { position: absolute; inset: 0; text-align: center; }
.countdown .lbl { top: 2072px; font-size: 20px; color: var(--olive); }

.letter {
  white-space: normal;
  font-size: 27.6px; /* Figma 24px, người dùng muốn to hơn 15% cho dễ đọc trên điện thoại (khung rộng 636 → 700px) */
  letter-spacing: 1.2px;
  color: var(--olive-dark);
}

/* ---------- Save the date ---------- */
.std-title, .std-date {
  margin: 0;
  width: 200.18px;
  height: 96.338px;
  line-height: .88;
  text-align: center;
  transform: rotate(-11.01deg);
}
.std-title { font-size: 48px; color: var(--olive); box-sizing: content-box; padding: .25em; }   /* chừa nét bay (xem .nb); khung nằm giữa .rot nên chữ không xê dịch */
.std-date { font-size: 32px; color: var(--wine); }

/* ---------- Thiệp mời ---------- */
/* Vùng bấm trong suốt đặt trên phần nhà gái / nhà trai của thiệp: mở Google Maps */
.venue-hit { -webkit-tap-highlight-color: rgba(142, 58, 58, .08); border-radius: 12px; }

.pill {
  height: 104px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 24px;
  letter-spacing: 1.2px;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(118, 18, 18, .75);
  background: var(--pink);
  -webkit-tap-highlight-color: transparent;
}
.pill img { flex: none; display: block; width: 28px; height: 37px; }
.pill:active { transform: scale(.985); }

/* ---------- Album ---------- */
.ph {
  border-radius: 25px;
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.ph img { display: block; width: 100%; height: 100%; transition: transform .6s ease; }
@media (hover: hover) { .ph:hover img { transform: scale(1.03); } }

/* ---------- Timeline ---------- */
.timeline { margin: 0; padding: 0; list-style: none; }
.tl-time { font-size: 40px; letter-spacing: 2px; color: var(--olive-dark); }
.tl-text { font-size: 24px; letter-spacing: 1.2px; color: var(--olive-dark); }

/* ---------- RSVP ---------- */
.rsvp-intro { white-space: normal; font-size: 20px; letter-spacing: 1px; color: var(--olive-deep); }
.rsvp-intro p { margin: 0 0 15px; }
.rsvp-intro p:last-child { margin: 0; }

.rsvp { display: flex; flex-direction: column; gap: 24px; }

.field {
  display: block;
  width: 100%;
  height: 78px;
  padding: 0 43px;
  border: 0;
  border-radius: 50px;
  background: rgba(244, 244, 231, .5);
  font: 24px/normal 'Bona Nova SC', 'Bona Nova', serif;
  letter-spacing: 1.2px;
  color: var(--olive-dark);
  outline: none;
  -webkit-appearance: none;
          appearance: none;
  transition: background-color .2s, box-shadow .2s;
}
.field::placeholder { color: var(--olive-dark); opacity: .75; }
.field:focus { background: rgba(244, 244, 231, .78); box-shadow: 0 0 0 3px rgba(244, 244, 231, .6); }
.field.invalid { box-shadow: 0 0 0 3px rgba(142, 58, 58, .55); }
.area { height: 228px; padding-top: 23px; padding-bottom: 23px; resize: none; }

.select-wrap { position: relative; }
.select-wrap select { padding-right: 90px; cursor: pointer; }
.select-wrap select:invalid,
.select-wrap select.empty { color: rgba(83, 94, 56, .75); }
.select-wrap option { color: var(--olive-dark); }
.caret {
  position: absolute;
  right: 28px;
  top: 50%;
  width: 26px;
  height: 12px;
  transform: translateY(-50%) rotate(180deg);
  pointer-events: none;
}

/* Ô chọn tự vẽ (js/main.js → enhanceSelect) */
.select-wrap.enhanced select {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.select-trigger { text-align: left; cursor: pointer; padding-right: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select-trigger.empty { color: rgba(83, 94, 56, .75); }
.select-wrap .caret { transition: transform .2s; }
.select-wrap.open { z-index: 30; }
.select-wrap.open .caret { transform: translateY(-50%) rotate(0deg); }
.select-wrap.open .select-trigger { background: rgba(244, 244, 231, .78); }
.select-list {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 10px);
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: 39px;
  background: rgba(244, 244, 231, .97);
  box-shadow: 0 12px 32px rgba(48, 63, 11, .28);
  animation: list-in .15s ease-out;
}
@keyframes list-in { from { opacity: 0; transform: translateY(-8px); } }
/* Ô "đi cùng ai" hiện ra khi khách chọn sẽ tham dự */
.rsvp [name=companions]:not([hidden]) { animation: list-in .25s ease; }
.select-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 33px;
  border-radius: 30px;
  font: 24px/1.2 'Bona Nova SC', 'Bona Nova', serif;
  letter-spacing: 1.2px;
  color: var(--olive-dark);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.select-list li + li { margin-top: 4px; }
.select-list li:focus, .select-list li:hover { background: rgba(243, 183, 195, .35); }
.select-list li[aria-selected="true"] { background: rgba(160, 169, 109, .28); color: var(--olive-deep); }
.select-list li[aria-selected="true"]::after { content: '✓'; font-size: 26px; color: var(--wine); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.btn {
  height: 78px;
  border: 0;
  border-radius: 50px;
  font: 32px/normal 'Bona Nova SC', 'Bona Nova', serif;
  letter-spacing: 1.6px;
  color: rgba(118, 18, 18, .75);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .2s, transform .1s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { cursor: progress; filter: saturate(.6); }
.btn-submit { background: #f39eaf; }
.btn-gift { background: #ffc3bf; }
@media (hover: hover) { .btn:hover { filter: brightness(1.03) saturate(1.1); } }

/* ---------- Thank you ---------- */
.thanks-sub { white-space: normal; font-size: 20px; letter-spacing: 1px; color: var(--cream); }
.thanks-sub p { margin: 0 0 7px; line-height: .999; }
.thanks-sub p:last-child { margin: 0; }

/* =================== POPUP =================== */
dialog { border: 0; padding: 0; }
dialog:not([open]) { display: none; }
/* Trình duyệt chưa hỗ trợ <dialog> (iOS < 15.4, app cũ): tự đặt giữa màn hình */
dialog.dialog-fallback { position: fixed; inset: 0; margin: auto; z-index: 1000; height: fit-content; }
dialog.dialog-fallback.modal { box-shadow: 0 0 0 100vmax rgba(48, 63, 11, .55), 0 20px 60px rgba(48, 63, 11, .3); }
dialog.dialog-fallback.lightbox { height: 100vh; }
dialog:focus { outline: none; }
body.modal-open { overflow: hidden; }

.modal {
  width: min(92vw, 400px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px 24px 24px;
  border-radius: 24px;
  background: var(--cream);
  color: var(--olive-dark);
  text-align: center;
  font-family: 'Bona Nova', serif;
  box-shadow: 0 20px 60px rgba(48, 63, 11, .3);
}
.modal::backdrop { background: rgba(48, 63, 11, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal[open] { animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.modal-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 30px; line-height: 1;
  color: var(--olive);
  cursor: pointer;
}
.modal-script { margin: 0; padding: 0 30px; font: clamp(28px, 9vw, 40px)/1.2 'Pinyon Script', cursive; color: var(--wine); white-space: nowrap; }
.modal-title {
  margin: 2px 0 16px;
  font: 400 16px/1.3 'Bona Nova SC', serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--olive);
}
.modal-text { margin: 0 0 20px; font-size: 16px; line-height: 1.55; }

.gift-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.gift-tabs:empty { display: none; }
.gift-tab {
  flex: 1;
  max-width: 160px;
  height: 40px;
  border: 1px solid rgba(128, 140, 97, .4);
  border-radius: 40px;
  background: transparent;
  font: 15px 'Bona Nova SC', serif;
  letter-spacing: .8px;
  color: var(--olive-dark);
  cursor: pointer;
}
.gift-tab[aria-selected="true"] { background: var(--olive); border-color: var(--olive); color: var(--cream); }

.gift-qr {
  margin: 0 auto 16px;
  width: min(100%, 260px, 32vh); /* màn hình thấp: QR nhỏ lại để thấy được số tài khoản mà không cần cuộn */
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(83, 94, 56, .15);
}
.gift-qr img { display: block; width: 100%; height: 100%; object-fit: contain; }

.gift-info { margin: 0 0 18px; display: grid; gap: 8px; text-align: left; }
.gift-info > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(160, 169, 109, .14);
}
.gift-info dt { font-size: 14px; color: var(--olive); white-space: nowrap; }
.gift-info dd { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; text-align: right; }
/* Số tài khoản không bao giờ bị bẻ dòng (dễ chép sai) */
.gift-info [data-f="number"] { white-space: nowrap; letter-spacing: .5px; }
.copy-btn {
  flex: none;
  min-height: 34px;
  padding: 6px 14px;
  border: 0; border-radius: 20px;
  background: var(--pink-light);
  font: 13px 'Bona Nova', serif;
  color: var(--wine);
  cursor: pointer;
}

.modal-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px;
  border: 0; border-radius: 50px;
  background: var(--pink);
  font: 18px 'Bona Nova SC', serif;
  letter-spacing: 1px;
  color: var(--wine);
  text-decoration: none;
  cursor: pointer;
}
.modal-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--olive); }

/* ---------- Popup thông báo form (cảm ơn / thiếu thông tin / lỗi) ----------
   Phần đầu lặp lại bố cục "Kindly Respond" của Figma: chữ Pinyon Script màu đỏ rượu nằm trên cánh sen. */
.notice-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  margin: 4px 0 6px;
}
.notice-petal {
  position: absolute;
  left: 50%; top: 50%;
  width: 154px; height: auto;
  opacity: .65;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.notice[open] .notice-petal { animation: petal-in .7s ease-out both; }
@keyframes petal-in {
  from { opacity: 0; transform: translate(-50%, -40%) rotate(-8deg) scale(.9); }
}
.notice-script {
  position: relative;
  margin: 0;
  padding: 0 30px;
  font: clamp(38px, 12vw, 48px)/1.1 'Pinyon Script', cursive;
  color: var(--wine);
  white-space: nowrap;
}
.notice.is-error .modal-title,
.notice.is-warning .modal-title { color: var(--wine); }
.notice .modal-text { margin-bottom: 16px; text-wrap: balance; }  /* chia đều độ dài các dòng, tránh dòng cuối còn một chữ */
.modal-text b { font-weight: 600; }  /* tên khách, địa điểm, giờ: đậm như giá trị trong bảng tóm tắt */

.notice-summary { margin: 0 0 12px; display: grid; gap: 6px; text-align: left; }
.notice-summary > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 14px;
  border-radius: 12px;
  background: rgba(160, 169, 109, .14);
}
.notice-summary dt { font-size: 14px; color: var(--olive); white-space: nowrap; }
.notice-summary dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; }

.notice-quote {
  position: relative;
  margin: 0 0 18px;
  padding: 12px 16px 12px 34px;
  max-height: 132px;
  overflow: auto;
  border-left: 4px solid var(--pink);
  border-radius: 10px;
  background: #fff;
  font: italic 15px/1.6 'Bona Nova', serif;
  color: var(--olive-dark);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
.notice-quote::before {
  content: '\201C';
  position: absolute;
  left: 10px; top: 2px;
  font: 34px/1 'Pinyon Script', cursive;
  color: var(--pink);
}

.notice-actions { display: grid; gap: 10px; }
.modal-btn-alt { background: var(--pink-light); }

@media (max-height: 700px) {
  .notice-head { height: 88px; }
  .notice-petal { width: 120px; }
}

/* =================== XEM ẢNH =================== */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0;
  background: rgba(20, 24, 12, .94);
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .2s;
}
.lightbox img.loading { opacity: .3; }
.lb-btn {
  position: absolute;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(244, 244, 231, .14);
  color: var(--cream);
  font-size: 34px; line-height: 1;
  cursor: pointer;
}
.lb-close { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  font: 15px 'Bona Nova SC', serif;
  letter-spacing: 2px;
  color: rgba(244, 244, 231, .8);
}

/* Màn hình thấp (iPhone SE…): thu gọn khoảng cách trong popup */
@media (max-height: 700px) {
  .modal { padding: 20px 18px 18px; }
  .modal-title { margin-bottom: 10px; }
  .gift-tabs { margin-bottom: 10px; }
  .gift-qr { margin-bottom: 10px; padding: 8px; }
  .gift-info { gap: 6px; margin-bottom: 12px; }
  .gift-info > div { padding: 6px 12px; }
  .modal-btn { height: 44px; }
}

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

/* =================== MÀN HÌNH CHỜ (phong bì đóng kín, chạm để vào thiệp) =================== */
/* Chỉ hiện khi có JavaScript (để chạm mở được) và không ở chế độ tĩnh ?tinh của bộ test */
.intro { display: none; }
.js .intro { display: block; }
.js.tinh .intro { display: none; }
html.intro-open, html.intro-open body { overflow: hidden; }

.intro {
  --paper: #7f9758;        /* thân phong bì: xanh ô liu như phong bì Save the Date */
  --paper-flap: #89a161;   /* nắp sáng hơn thân để thấy rõ mép */
  --side-n: 38;            /* nắp chạm hai mép màn hình ở độ cao này (% chiều cao) */
  --tip-n: 58;             /* mũi nắp, chỗ đặt con dấu (% chiều cao) */
  --tip: calc(var(--tip-n) * 1%);
  --side-in-flap: calc(var(--side-n) / var(--tip-n) * 100%);
  position: fixed; inset: 0; z-index: 50;
  height: 100vh; height: 100dvh;
  overflow: hidden; cursor: pointer;
  transition: opacity .45s ease, visibility 0s linear .45s;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.intro { touch-action: none; }   /* vuốt trên màn hình chờ không cuộn trang phía sau (iPhone cũ bỏ qua overflow: hidden) */
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-hint:focus-visible { outline: 1px solid rgba(244, 244, 231, .8); outline-offset: 2px; }
.intro > * { position: absolute; }

/* Giấy mỹ thuật: vân giấy liền mạch (sần + sợi) hoà với màu nền bằng soft-light, thêm loang sáng tối nhẹ */
.intro-paper {
  background-color: var(--paper);
  background-image:
    url(../images/intro/paper-texture.webp),
    radial-gradient(120% 70% at 20% 10%, rgba(255, 255, 240, .10), transparent 60%),
    radial-gradient(100% 60% at 85% 95%, rgba(30, 49, 35, .18), transparent 60%);
  background-size: 300px 300px, 100% 100%, 100% 100%;
  background-blend-mode: soft-light, normal, normal;
}
.intro-flap.intro-paper { background-color: var(--paper-flap); }
.intro-body { inset: 0; }
.intro-hint {
  left: 50%; bottom: calc(env(safe-area-inset-bottom) + 9%); transform: translateX(-50%);
  margin: 0; padding: 10px 18px; border: 0; border-radius: 30px; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; white-space: nowrap; text-align: center; color: var(--cream);
  font: 400 clamp(15px, 4.6vw, 22px)/1.3 'Bona Nova SC', serif; letter-spacing: .16em; text-transform: uppercase;
  animation: intro-fade 2.6s ease-in-out infinite;
}
@keyframes intro-fade { 50% { opacity: .5; } }

/* Nắp: phủ từ mép trên xuống, mũi ở giữa */
.intro-flap, .intro-flap-shadow { left: 0; right: 0; top: 0; height: var(--tip); }
.intro-flap { clip-path: polygon(0 0, 100% 0, 100% var(--side-in-flap), 50% 100%, 0 var(--side-in-flap)); }
.intro-flap-shadow { filter: drop-shadow(0 6px 10px rgba(30, 49, 35, .35)); }   /* clip-path cắt mất bóng nên vẽ riêng */
.intro-flap-shadow::before {
  content: ''; position: absolute; inset: 0; background: var(--paper-flap);
  clip-path: polygon(0 0, 100% 0, 100% var(--side-in-flap), 50% 100%, 0 var(--side-in-flap));
}
.intro-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-lines polyline { fill: none; stroke: var(--cream); vector-effect: non-scaling-stroke; }
.intro-head { position: absolute; left: 0; right: 0; top: calc(var(--side-in-flap) - 30%); text-align: center; color: var(--cream); }
.intro-small { margin: 0; font: 400 clamp(14px, 4.4vw, 22px)/1.3 'Bona Nova SC', serif; letter-spacing: .14em; text-transform: uppercase; }
.intro-names { padding: 0 .3em; margin: .05em 0 0; font: 400 clamp(46px, 15vw, 92px)/1.15 'Pinyon Script', cursive; white-space: nowrap; }

/* Con dấu ngà ở mũi nắp */
.intro-seal { left: 50%; top: var(--tip); width: min(40vw, 26vh, 220px); aspect-ratio: 260 / 251; transform: translate(-50%, -50%); }
.intro-seal img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(30, 49, 35, .4)); animation: intro-breathe 2.6s ease-in-out infinite; }
@keyframes intro-breathe { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .intro-hint, .intro-seal img { animation: none; } }

/* =================== NÚT TẮT/BẬT NHẠC =================== */
.music-btn {
  position: fixed; z-index: 45;
  right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(128, 140, 97, .55);
  background: rgba(244, 244, 231, .88);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(30, 49, 35, .22);
  color: var(--wine); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.music-btn svg { width: 24px; height: 24px; overflow: visible; }
.music-btn .note { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.music-btn .note-dot { fill: currentColor; }
.music-btn .slash { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.music-btn.is-on .slash { display: none; }
/* Đang phát: nốt nhạc nhún nhẹ, vòng sóng lan ra */
.music-btn.is-on svg { animation: music-bob 1.6s ease-in-out infinite; }
.music-btn.is-on::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(142, 58, 58, .45);
  animation: music-wave 2.4s ease-out infinite;
}
@keyframes music-bob { 50% { translate: 0 -2px; } }
@keyframes music-wave { from { scale: 1; opacity: .9; } to { scale: 1.6; opacity: 0; } }
.music-btn:active { scale: .94; }
@media (prefers-reduced-motion: reduce) { .music-btn.is-on svg, .music-btn.is-on::after { animation: none; } }

/* =================== CHỮ VIẾT TAY CÓ NÉT BAY DÀI =================== */
/* Pinyon Script có nét bay vượt xa khung chữ (nét lên chữ "d" trong Respond tràn phải 32px, "Thank You!" 35px).
   Safari/iPhone cắt mất phần vượt khung (máy tính vẫn đủ), nên nới khung bằng padding cho chứa hết nét,
   rồi bù vị trí bằng margin-top âm; chiều ngang tự cân vì các chữ này căn giữa (.cx). Chữ không xê dịch. */
.nb { padding: .9em .45em .6em; margin-top: -.9em; }