/* Mẫu Trắng Voan — tông trắng tối giản, chữ Cormorant in hoa, nhãn bo tròn đổ bóng, form viền đen, thẻ mừng cưới phong bì kem. */

.t-trang-voan {
  --f-mother: "NVN Motherland Signature", "Pinyon Script", cursive;
  --f-funky: "NVN Funky Signature", "Pinyon Script", cursive;
  --f-crimson: "Crimson Pro", Georgia, serif;
  --gate-bg: #f6f4f1;
  --accent-strong: #111;
}

/* ---------- 1. bìa ---------- */
.t-trang-voan .s-hero { height: 799px; overflow: hidden; }
.t-trang-voan .hero-photo { left: -57px; top: 0; width: 535px; height: 800px; }
.t-trang-voan .hero-top { left: 0; top: 0; width: 420px; height: 46px; background: linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, 0)); }
.t-trang-voan .hero-fade { left: 0; top: 379px; width: 420px; height: 421px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.t-trang-voan .hero-save, .t-trang-voan .hero-date-word { top: 572px; width: 280px; font-family: var(--f-upright); font-size: 25px; line-height: 37.5px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-trang-voan .hero-save { left: 0; }
.t-trang-voan .hero-date-word { left: 140px; }
.t-trang-voan .hero-the { left: 147px; top: 581px; width: 127px; font-family: var(--f-mother); font-size: 15px; line-height: 22.5px; letter-spacing: 1px; text-align: center; }
.t-trang-voan .hero-swash { left: -8px; top: 613px; width: 280px; height: 151px; }
.t-trang-voan .hero-groom, .t-trang-voan .hero-bride { width: 318px; font-family: var(--f-upright); font-size: 30px; line-height: 45px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.t-trang-voan .hero-groom { left: 70px; top: 645px; }
.t-trang-voan .hero-bride { left: 172px; top: 686px; }
.t-trang-voan .hero-and { left: 116px; top: 686px; width: 60px; font-family: var(--f-mother); font-size: 22px; line-height: 45px; }

/* ---------- 2. hai gia đình ---------- */
.t-trang-voan .s-family { height: 683px; }
.t-trang-voan .fam-side { top: 58px; width: 180px; font-family: var(--f-upright); font-size: 18px; line-height: 27px; }
.t-trang-voan .fam-parents { top: 84px; width: 180px; font-family: var(--f-cond); font-size: 17px; line-height: 25.5px; text-transform: uppercase; }
.t-trang-voan .fam-side--groom, .t-trang-voan .fam-parents--groom { left: 31px; }
.t-trang-voan .fam-side--bride, .t-trang-voan .fam-parents--bride { left: 210px; text-align: right; }
.t-trang-voan .fam-lead { left: 31px; top: 185px; width: 392px; font-family: var(--f-crimson); font-size: 15px; line-height: 22.5px; letter-spacing: 1px; text-transform: uppercase; }
.t-trang-voan .fam-full { left: 31px; width: 389px; font-family: var(--f-upright); font-size: 35px; line-height: 105px; white-space: nowrap; }
.t-trang-voan .fam-full--groom { top: 182px; }
.t-trang-voan .fam-full--bride { top: 271px; }
.t-trang-voan .fam-and { left: 39px; top: 256px; width: 200px; font-family: var(--f-funky); font-size: 35px; line-height: 52.5px; }
.t-trang-voan .fam-frame { left: 8px; top: 384px; width: 405px; height: 273px; padding: 7px; background: #fff; box-shadow: 0 5px 8px rgba(0, 0, 0, .35); }
.t-trang-voan .fam-frame .ph { inset: 7px; }

.t-trang-voan .s-invite { height: 119px; }
.t-trang-voan .inv-lead { left: 0; top: 15px; width: 420px; font-family: var(--f-upright); font-size: 20px; line-height: 40px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-trang-voan .inv-rule { left: 141px; top: 78px; width: 138px; height: 1px; background: #333; }

/* ---------- nhãn bo tròn ---------- */
.t-trang-voan .pill { left: 0; top: 23px; width: 420px; height: 38px; display: flex; justify-content: center; }
.t-trang-voan .pill span {
  display: block; min-width: 229px; height: 38px; padding: 0 24px;
  border-radius: 50px; background: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
  font-family: var(--f-upright); font-size: 23px; line-height: 38px; text-align: center; text-transform: uppercase;
}
.t-trang-voan .pill--wide span { min-width: 340px; }

/* ---------- 3. lễ thành hôn ---------- */
.t-trang-voan .s-cer { height: 284px; font-family: Arial, Helvetica, sans-serif; }
.t-trang-voan .cer-at, .t-trang-voan .cer-weekday { top: 85px; width: 210px; font-size: 17px; line-height: 25.5px; letter-spacing: 1px; text-align: center; }
.t-trang-voan .cer-at { left: 0; }
.t-trang-voan .cer-weekday { left: 210px; }
.t-trang-voan .cer-bar { left: 210px; top: 90px; width: 1.5px; height: 63px; background: #111; }
.t-trang-voan .cer-time, .t-trang-voan .cer-date { top: 125px; width: 210px; font-size: 19px; line-height: 28.5px; font-weight: 700; letter-spacing: 1px; text-align: center; }
.t-trang-voan .cer-time { left: 0; text-transform: capitalize; }
.t-trang-voan .cer-date { left: 210px; }
.t-trang-voan .cer-lunar { left: 23px; top: 178px; width: 375px; font-size: 15px; line-height: 22.5px; font-style: italic; letter-spacing: 1px; color: rgba(0, 0, 0, .5); text-align: center; }
.t-trang-voan .cer-place { left: 7px; top: 216px; width: 406px; font-size: 17px; line-height: 25.5px; letter-spacing: 1px; text-align: center; }
.t-trang-voan .cer-dash { left: 33px; top: 276px; width: 354px; border-top: 1px dashed #999; }

/* ---------- 4. tiệc mừng ---------- */
.t-trang-voan .s-par { height: 308px; font-family: Arial, Helvetica, sans-serif; }
.t-trang-voan .s-par .pill { top: 25px; }
.t-trang-voan .s-par p:not(.pill) { left: 5px; width: 410px; text-align: center; letter-spacing: 1px; }
.t-trang-voan .par-at { top: 93px; font-size: 15px; line-height: 22.5px; text-transform: uppercase; }
.t-trang-voan .par-date { top: 132px; font-size: 22px; line-height: 33px; font-weight: 700; }
.t-trang-voan .par-lunar { top: 182px; font-size: 15px; line-height: 22.5px; font-style: italic; color: rgba(0, 0, 0, .5); }
.t-trang-voan .par-venue { top: 224px; font-size: 16px; line-height: 24px; font-weight: 700; text-transform: uppercase; }
.t-trang-voan .par-addr { top: 252px; font-size: 15px; line-height: 22.5px; }

/* ---------- 5. bản đồ ---------- */
.t-trang-voan .s-map { height: 374px; }
.t-trang-voan .map-btn {
  left: 53px; top: 13px; width: 313px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid #000; border-radius: 100px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
  font-family: Arial, Helvetica, sans-serif; font-size: 15px; letter-spacing: 1px; color: #000; text-decoration: none;
}
.t-trang-voan .map-frame { left: 33px; top: 72px; width: 354px; height: 280px; }
.t-trang-voan .map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- 6. lịch ---------- */
.t-trang-voan .s-cal { height: 345px; }
.t-trang-voan .calc { left: 59px; top: 0; width: 305px; height: 305px; border: 1px solid #000; border-radius: 4px; background: rgba(255, 255, 255, .5); }
.t-trang-voan .calc > * { position: absolute; }
.t-trang-voan .calc-title { left: 0; top: 14px; width: 305px; font-family: var(--f-pinyon); font-size: 25px; line-height: 37.5px; text-align: center; }
.t-trang-voan .calc-grid { left: 20px; top: 62px; width: 263px; font-family: var(--f-open); font-size: 13px; }
.t-trang-voan .calc-grid::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid #555; }
.t-trang-voan .calc-grid::after { content: ""; display: block; margin-top: 2px; border-top: 1.5px solid #333; }
.t-trang-voan .calc-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-trang-voan .calc-row span { position: relative; display: grid; place-items: center; height: 36px; }
.t-trang-voan .calc-row--head { border-bottom: 1px solid #555; }
.t-trang-voan .calc-row--head span { height: 38px; font-weight: 700; }
.t-trang-voan .calc-row .is-sun, .t-trang-voan .calc-row .is-day { font-weight: 700; }
.t-trang-voan .calc-heart { position: absolute; left: 50%; top: 50%; width: 40px; height: 37px; margin: -18.5px 0 0 -20px; animation: vela-heart 4s ease-in-out infinite; }

/* ---------- 7. xác nhận ---------- */
.t-trang-voan .s-rsvp { height: 459px; }
.t-trang-voan .rsvp-title { left: 21px; top: 17px; width: 375px; font-family: var(--f-pinyon); font-size: 33px; line-height: 49.5px; letter-spacing: 1px; text-align: center; }
.t-trang-voan .rsvp-rule { left: 167px; top: 82px; width: 83px; height: 1px; background: #8a94a3; }
.t-trang-voan .rsvp-card { left: 0; top: 0; width: 420px; height: 459px; margin: 0; pointer-events: none; }
.t-trang-voan .rsvp-card > * { position: absolute; pointer-events: auto; }
.t-trang-voan .rsvp-field {
  left: 22px; width: 378px; height: 47px; padding: 0 12px;
  border: 1px solid #000; border-radius: 56px; background: #fff;
  font-family: var(--f-roboto); font-size: 15px; color: #333;
  -webkit-appearance: none; appearance: none;
}
.t-trang-voan .rsvp-field::placeholder { color: #8d8d8d; opacity: 1; }
.t-trang-voan .rsvp-field--1 { top: 126px; }
.t-trang-voan .rsvp-field--2 { top: 186px; }
.t-trang-voan .rsvp-field--3 { top: 248px; }
.t-trang-voan .rsvp-field--4 {
  top: 307px; color: #8d8d8d;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23777' stroke-width='2'/%3E%3C/svg%3E") right 16px center no-repeat;
}
.t-trang-voan .rsvp-send {
  left: 22px; top: 369px; width: 378px; height: 47px;
  border: 4px solid #000; border-radius: 30px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: #000; text-transform: uppercase;
}
.t-trang-voan .rsvp-msg { left: 20px; right: 20px; top: 424px; font-size: 13px; text-align: center; }

/* ---------- 8. mừng cưới ---------- */
.t-trang-voan .s-gift { height: 215px; }
.t-trang-voan .gift-card {
  left: 128px; top: 13px; width: 164px; height: 149px; padding: 0;
  border: 0; border-radius: 10px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, .35);
}
.t-trang-voan .gift-card > * { position: absolute; }
.t-trang-voan .gift-card__env { left: 30px; top: 12px; width: 104px; height: 84px; }
.t-trang-voan .gift-card__title { left: -7px; top: 106px; width: 179px; font-family: var(--f-upright); font-size: 19px; line-height: 28.5px; text-align: center; text-transform: uppercase; }

/* ---------- 9. album (ghi đè phần chung) ---------- */
.t-trang-voan .s-album { padding: 0 12px 9px 13px; }
.t-trang-voan .album-title, .t-trang-voan .album-rule { display: none; }
.t-trang-voan .album-grid { grid-template-columns: 194px 194px; grid-auto-rows: 145px; gap: 9px 7px; }

.t-trang-voan .s-end { height: 120px; }
.t-trang-voan .end-note { left: 26px; top: 45px; width: 375px; font-family: var(--f-pinyon); font-size: 26px; line-height: 39px; letter-spacing: 1px; text-align: center; }