/* Mẫu Be Sữa — nền giấy, ảnh polaroid, form xác nhận ngay trong trang. Vị trí đo theo bản gốc (khung 420px). */

.t-be-sua {
  --f-cond: "UTM Cafeta", "Oswald", sans-serif;
  --f-upright: "Cormorant Upright", Georgia, serif;
  --f-pinyon: "Pinyon Script", cursive;
  --f-lux: "Luxurious Script", cursive;
  --f-sign: "NVN Motherland Signature", "Pinyon Script", cursive;
  --f-funky: "NVN Funky Signature", "Pinyon Script", cursive;
  --f-mighty: "SVN-Mightiest", Georgia, serif;
  --f-serif: "Noto Serif Display", Georgia, serif;
  --f-crimson: "Crimson Pro", Georgia, serif;
  --f-open: "Open Sans", Arial, sans-serif;
  --f-roboto: "Roboto", Arial, sans-serif;
  --f-summer: "Summerfun", "Pinyon Script", cursive;
  --red: rgb(140, 16, 7);
  --gate-bg: #f5f4f0;
  --accent-strong: #1a1a1a;
}
.t-be-sua .s { position: relative; width: 420px; }
.t-be-sua .s > * { position: absolute; }
.t-be-sua .card-shadow { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }

/* ---------- 1. bìa ---------- */
.t-be-sua .s-hero { height: 799px; overflow: hidden; }
.t-be-sua .hero-paper {
  left: 0; top: 0; width: 420px; height: 860px;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .025) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .02) 0 1px, transparent 1.5px) 0 0 / 11px 11px,
    linear-gradient(#f9f9f7, #f4f4f1);
}
.t-be-sua .hero-envelope { left: 250px; top: 380px; width: 200px; height: 440px; }
.t-be-sua .hero-save, .t-be-sua .hero-date-word {
  top: 20px; width: 280px;
  font-family: var(--f-upright); font-size: 25px; line-height: 37.5px; letter-spacing: 1px;
  text-align: center; text-transform: uppercase;
}
.t-be-sua .hero-save { left: 0; }
.t-be-sua .hero-date-word { left: 140px; }
.t-be-sua .hero-the { left: 147px; top: 29px; width: 127px; font-family: var(--f-sign); font-size: 15px; line-height: 22.5px; letter-spacing: 1px; text-align: center; }
.t-be-sua .hero-name {
  left: 0; width: 420px;
  font-family: var(--f-pinyon); font-size: 40px; line-height: 80px; letter-spacing: 1px;
  color: var(--red); text-align: center; white-space: nowrap;
}
.t-be-sua .hero-name--groom { top: 60px; }
.t-be-sua .hero-name--bride { top: 130px; }
.t-be-sua .hero-amp { left: 122px; top: 109px; width: 176px; font-family: var(--f-lux); font-size: 25px; line-height: 50px; text-align: center; }
.t-be-sua .hero-card { left: 62px; top: 223px; width: 295px; height: 412px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.t-be-sua .hero-card > * { position: absolute; }
.t-be-sua .hero-photo { left: 15px; top: 13px; width: 270px; height: 290px; }
.t-be-sua .hero-card__line { left: 102px; top: 324px; width: 92px; height: 1px; background: #111; }
.t-be-sua .hero-card__date {
  left: -11px; top: 343px; width: 319px;
  font-family: var(--f-mighty); font-size: 20px; line-height: 40px; letter-spacing: 5px; text-align: center;
}

/* ---------- 2. hai gia đình ---------- */
.t-be-sua .s-family { height: 447px; }
.t-be-sua .fam-hline { left: 68px; top: 31px; width: 196px; height: 1px; background: #111; }
.t-be-sua .fam-vline { left: 35px; top: 50px; width: 1px; height: 212px; background: #111; }
.t-be-sua .fam-date { left: 268px; top: 18px; width: 144px; font-family: var(--f-serif); font-weight: 600; font-size: 18px; line-height: 27px; letter-spacing: 2px; text-align: center; }
.t-be-sua .fam-side { left: 210px; width: 180px; font-family: var(--f-upright); font-size: 18px; line-height: 27px; text-align: right; }
.t-be-sua .fam-parents { left: 180px; width: 210px; font-family: var(--f-cond); font-size: 17px; line-height: 25.5px; text-align: right; text-transform: uppercase; }
.t-be-sua .fam-side--groom { top: 62px; }
.t-be-sua .fam-parents--groom { top: 88px; }
.t-be-sua .fam-side--bride { top: 156px; }
.t-be-sua .fam-parents--bride { top: 182px; }
.t-be-sua .fam-kicker { left: 35px; top: 270px; width: 392px; font-family: var(--f-crimson); font-size: 15px; line-height: 22.5px; letter-spacing: 1px; text-transform: uppercase; }
.t-be-sua .fam-full { left: 35px; width: 385px; font-family: var(--f-upright); font-size: 35px; line-height: 105px; white-space: nowrap; }
.t-be-sua .fam-full--groom { top: 267px; }
.t-be-sua .fam-full--bride { top: 356px; }
.t-be-sua .fam-and { left: 44px; top: 341px; font-family: var(--f-funky); font-size: 35px; line-height: 52.5px; }

/* ---------- 3. ảnh ngang ---------- */
.t-be-sua .s-wide { height: 293px; }
.t-be-sua .wide-card { left: 8px; top: 0; width: 405px; height: 273px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.t-be-sua .wide-card > * { position: absolute; }
.t-be-sua .wide-photo { left: 7px; top: 1px; width: 392px; height: 245px; }
.t-be-sua .wide-line { left: 141px; top: 262px; width: 125px; height: 1px; background: #111; }

/* ---------- 4. lễ thành hôn ---------- */
.t-be-sua .s-invite-title { height: 100px; }
.t-be-sua .inv-head { left: 0; top: 16px; width: 420px; font-family: var(--f-upright); font-size: 25px; line-height: 50px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-be-sua .inv-head-line { left: 102px; top: 75px; width: 216px; height: 1px; background: #111; }
.t-be-sua .s-ceremony { height: 248px; font-family: Arial, sans-serif; }
.t-be-sua .cer-card { left: 32px; top: 5px; width: 356px; height: 212px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.t-be-sua .s-ceremony p { left: 23px; width: 375px; font-size: 15px; line-height: 22.5px; letter-spacing: 1px; text-align: center; }
.t-be-sua .cer-title { top: 26px; font-family: var(--f-cond) !important; font-size: 25px !important; line-height: 37.5px !important; letter-spacing: 0 !important; text-transform: uppercase; }
.t-be-sua .cer-line { left: 169px; top: 69px; width: 83px; height: 1px; background: #111; }
.t-be-sua .cer-when { top: 81px; }
.t-be-sua .cer-date { top: 112px; }
.t-be-sua .cer-lunar { top: 145px; font-size: 13px !important; line-height: 19.5px !important; font-style: italic; color: rgba(0, 0, 0, .5); }
.t-be-sua .cer-place { top: 172px; }

/* ---------- 5. tiệc ---------- */
.t-be-sua .s-party { height: 268px; font-family: Arial, sans-serif; }
.t-be-sua .s-party p { left: 23px; width: 375px; letter-spacing: 1px; text-align: center; }
.t-be-sua .party-title { left: 0 !important; width: 420px !important; top: 17px; font-family: var(--f-cond); font-size: 25px; line-height: 37.5px; letter-spacing: 0 !important; text-transform: uppercase; }
.t-be-sua .party-line { left: 149px; top: 60px; width: 122px; height: 1px; background: #111; }
.t-be-sua .party-when { top: 76px; font-size: 15px; line-height: 22.5px; text-transform: uppercase; }
.t-be-sua .party-date { top: 104px; font-size: 20px; line-height: 30px; }
.t-be-sua .party-lunar { top: 143px; font-size: 13px; line-height: 19.5px; font-style: italic; color: rgba(0, 0, 0, .5); }
.t-be-sua .party-at { top: 169px; font-size: 14px; line-height: 21px; text-transform: uppercase; }
.t-be-sua .party-venue { left: 5px !important; width: 410px !important; top: 196px; font-size: 15px; line-height: 22.5px; font-weight: 700; text-transform: uppercase; }
.t-be-sua .party-addr { left: 5px !important; width: 410px !important; top: 221px; font-size: 14px; line-height: 21px; }

/* ---------- 6. bản đồ ---------- */
.t-be-sua .s-map { height: 352px; }
.t-be-sua .map-btn {
  left: 54px; top: 12px; width: 313px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid #111; border-radius: 100px; background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
  font-family: var(--f-crimson); font-size: 17px; letter-spacing: 1px; color: #111; text-decoration: none;
}
.t-be-sua .map-frame { left: 20px; top: 62px; width: 380px; height: 270px; border: 0; border-radius: 8px; }

/* ---------- 7. lịch ---------- */
.t-be-sua .s-calendar { height: 365px; }
.t-be-sua .cal-box { left: 59px; top: 10px; width: 305px; height: 305px; border: 1px solid #111; border-radius: 4px; background: rgba(255, 255, 255, .5); }
.t-be-sua .cal-box > * { position: absolute; }
.t-be-sua .cal-title { left: 0; top: 14px; width: 303px; font-family: var(--f-pinyon); font-size: 25px; line-height: 37.5px; text-align: center; }
.t-be-sua .cal-grid { left: 20px; top: 62px; width: 263px; border-top: 1px solid #555; border-bottom: 1px solid #555; font-family: var(--f-open); font-size: 13px; }
.t-be-sua .cal-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-be-sua .cal-row span { position: relative; display: grid; place-items: center; height: 36px; }
.t-be-sua .cal-row--head { border-bottom: 1px solid #555; margin-bottom: 6px; }
.t-be-sua .cal-row--head span { height: 36px; font-weight: 700; }
.t-be-sua .cal-row .is-sun { font-weight: 700; }
.t-be-sua .cal-heart { position: absolute; left: 50%; top: 50%; width: 40px; height: 38px; margin: -19px 0 0 -20px; animation: vela-heart 4s ease-in-out infinite; }

/* ---------- 8. xác nhận tham dự ---------- */
.t-be-sua .s-rsvp { height: 472px; }
.t-be-sua .rsvp-title { left: 22px; top: 28px; width: 375px; font-family: var(--f-pinyon); font-size: 33px; line-height: 49.5px; letter-spacing: 1px; text-align: center; }
.t-be-sua .rsvp-line { left: 168px; top: 93px; width: 83px; height: 1px; background: #111; }
.t-be-sua .rsvp-form { left: 21px; top: 134px; width: 378px; }
.t-be-sua .rsvp-field {
  display: block; width: 378px; height: 47px; margin-bottom: 16px; padding: 0 16px;
  border: 1px solid #111; border-radius: 56px; background: #fff;
  font-family: var(--f-roboto); font-size: 14px; color: #111;
  -webkit-appearance: none; appearance: none;
}
.t-be-sua .rsvp-field::placeholder { color: #8a8a8a; }
.t-be-sua .rsvp-select { position: relative; display: block; margin-top: -4px; }
.t-be-sua .rsvp-select select:invalid { color: #8a8a8a; }
.t-be-sua .rsvp-select::after {
  content: ""; position: absolute; right: 20px; top: 16px;
  width: 8px; height: 8px; border-right: 2px solid #777; border-bottom: 2px solid #777; transform: rotate(45deg);
  pointer-events: none;
}
.t-be-sua .rsvp-send {
  display: block; width: 378px; height: 47px; margin-top: 26px;
  border: 4px solid #111; border-radius: 30px; background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .35);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; text-transform: uppercase;
}
.t-be-sua .rsvp-send:disabled { opacity: .6; }
.t-be-sua .rsvp-msg { min-height: 22px; margin-top: 8px; font-family: var(--f-roboto); font-size: 14px; text-align: center; }

/* ---------- 9. mừng cưới ---------- */
.t-be-sua .s-gift { height: 179px; }
.t-be-sua .gift-card {
  left: 128px; top: 3px; width: 164px; height: 149px; padding: 0;
  border: 0; border-radius: 10px; background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.t-be-sua .gift-env { position: absolute; left: 19px; top: 12px; width: 126px; height: 100px; }
.t-be-sua .gift-card span {
  position: absolute; left: -7px; top: 106px; width: 179px;
  font-family: var(--f-upright); font-size: 19px; line-height: 28.5px; text-align: center; text-transform: uppercase;
}

/* ---------- 10. album ---------- */
.t-be-sua .s-album { padding: 0 12px 16px 13px; }
.t-be-sua .s-album > .album-grid { position: static; }
.t-be-sua .album-grid { display: grid; grid-template-columns: 194px 195px; grid-auto-rows: 141.5px; gap: 7px 7px; }
.t-be-sua .album-item { overflow: hidden; background: #eee; }
.t-be-sua .album-item img { width: 100%; height: 100%; object-fit: cover; }
.t-be-sua .album-item--tall { grid-row: span 2; }

/* ---------- 11. cảm ơn ---------- */
.t-be-sua .s-thanks { height: 282px; overflow: hidden; }
.t-be-sua .thanks-photo { left: 0; top: 0; width: 420px; height: 282px; }
.t-be-sua .thanks-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); }
.t-be-sua .thanks-big { left: 89px; top: 114px; width: 242px; font-family: var(--f-summer); font-size: 40px; line-height: 120px; color: #fff; text-align: center; white-space: nowrap; }
.t-be-sua .thanks-sub { left: 23px; top: 205px; width: 375px; font-family: var(--f-pinyon); font-size: 23px; line-height: 34.5px; letter-spacing: 1px; color: #fff; text-align: center; }

.t-be-sua .s-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px;
  font-family: var(--f-roboto); font-size: 14px; color: #444;
}
.t-be-sua .footer-heart { color: #e5484d; font-size: 18px; }