/* Mẫu Đỏ Trầu Cau — nền đỏ, thẻ giấy trắng, khung vòm chữ hỷ. Vị trí đo theo bản gốc (khung 420px). */

.t-do-trau-cau {
  --red: rgb(176, 10, 10);
  --gold: rgb(255, 236, 126);
  --f-amey: "SVN-Ameyallinda Signature", "Pinyon Script", cursive;
  --f-sri: "Sriracha", cursive;
  --f-uvn: "UVN Ke Chuyen 1", "Sriracha", cursive;
  --f-roboto: "Roboto", Arial, sans-serif;
  --gate-bg: #b00a0a;
  --gate-ink: #fff;
  --accent-strong: #b00a0a;
}
.t-do-trau-cau .vela-frame { background: var(--red); }
.t-do-trau-cau .s { position: relative; width: 420px; color: #fff; font-family: var(--f-sri); }
.t-do-trau-cau .s > * { position: absolute; }
.t-do-trau-cau .paper {
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 0, 0, .025) 0 1px, transparent 1.5px) 0 0 / 6px 6px,
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .02) 0 1px, transparent 1.5px) 0 0 / 9px 9px,
    #f6f4f1;
}

/* ---------- 1. bìa ---------- */
.t-do-trau-cau .s-hero { height: 799px; overflow: hidden; }
.t-do-trau-cau .hero-title { left: 83px; top: 20px; width: 254px; font-family: var(--f-amey); font-size: 40px; line-height: 60px; letter-spacing: 3px; text-align: center; }
.t-do-trau-cau .hero-arch {
  left: 43px; top: 145px; width: 334px; height: 372px;
  border-radius: 167px 167px 6px 6px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(#f9b93a, #f7a726) border-box;
  border: 8px solid transparent;
}
.t-do-trau-cau .hero-arch::before {
  content: "囍"; position: absolute; left: 0; right: 0; top: 30px;
  font-family: "Noto Serif", serif; font-size: 230px; line-height: 1; font-weight: 700;
  color: #e3282d; text-align: center;
}
.t-do-trau-cau .hero-photo { left: 2px; top: 18px; width: 314px; height: 334px; border-radius: 5px; background: transparent; }
.t-do-trau-cau .hero-photo img { opacity: 1; } /* ảnh tách nền (PNG trong suốt) sẽ để lộ chữ 囍 phía sau như bản gốc */
.t-do-trau-cau .hero-badge { left: 155px; top: 130px; width: 110px; height: 64px; }
.t-do-trau-cau .hero-names { left: 0; top: 547px; width: 420px; font-family: var(--f-amey); font-size: 29px; line-height: 87px; text-align: center; white-space: nowrap; }
.t-do-trau-cau .hero-betel { left: 169px; top: 630px; width: 83px; height: 67px; }
.t-do-trau-cau .hero-date { left: 20px; top: 713px; width: 380px; font-size: 32px; line-height: 48px; letter-spacing: 3px; text-align: center; }

/* ---------- 2. thẻ giấy ---------- */
.t-do-trau-cau .s-card { height: 788px; }
.t-do-trau-cau .card-paper { left: 16px; top: 26px; width: 388px; height: 760px; border-radius: 22px; }
.t-do-trau-cau .s-card p, .t-do-trau-cau .s-card h2 { color: #000; }
.t-do-trau-cau .fam-side, .t-do-trau-cau .fam-parents, .t-do-trau-cau .fam-addr { width: 194px; text-align: center; }
.t-do-trau-cau .fam-side { top: 53px; font-size: 16px; line-height: 24px; text-transform: uppercase; }
.t-do-trau-cau .fam-parents { top: 80px; font-size: 13px; line-height: 19.5px; color: var(--red) !important; text-transform: uppercase; }
.t-do-trau-cau .fam-addr { top: 121px; font-size: 12px; line-height: 18px; }
.t-do-trau-cau .fam-side--groom, .t-do-trau-cau .fam-parents--groom, .t-do-trau-cau .fam-addr--groom { left: 16px; }
.t-do-trau-cau .fam-side--bride, .t-do-trau-cau .fam-parents--bride, .t-do-trau-cau .fam-addr--bride { left: 210px; }
.t-do-trau-cau .card-tea { left: 185px; top: 150px; width: 50px; height: 38px; }
.t-do-trau-cau .card-kicker { left: 30px; top: 239px; width: 361px; font-size: 20px; line-height: 30px; text-align: center; }
.t-do-trau-cau .card-name { left: 16px; width: 388px; font-family: var(--f-amey); font-size: 32px; line-height: 96px; color: var(--red) !important; text-align: center; white-space: nowrap; }
.t-do-trau-cau .card-name--groom { top: 283px; }
.t-do-trau-cau .card-name--bride { top: 427px; }
.t-do-trau-cau .card-amp { left: 142px; top: 382px; width: 137px; font-family: var(--f-amey); font-size: 25px; line-height: 37.5px; color: var(--red) !important; text-align: center; }
.t-do-trau-cau .cer-head, .t-do-trau-cau .cer-when, .t-do-trau-cau .cer-place { left: 31px; width: 350px; font-size: 18px; line-height: 27px; letter-spacing: 1px; text-align: right; }
.t-do-trau-cau .cer-head { top: 561px; text-transform: uppercase; }
.t-do-trau-cau .cer-when { top: 596px; color: var(--red) !important; }
.t-do-trau-cau .cer-lunar { left: 24px; top: 634px; width: 360px; font-size: 14px; line-height: 21px; letter-spacing: 1px; color: rgba(0, 0, 0, .63) !important; text-align: right; }
.t-do-trau-cau .cer-place { top: 666px; }
.t-do-trau-cau .card-umbrella { left: 4px; top: 646px; width: 150px; height: 126px; }

/* ---------- 3. mời dự tiệc ---------- */
.t-do-trau-cau .s-party { height: 535px; }
.t-do-trau-cau .party-head { left: 10px; top: 38px; width: 400px; font-family: var(--f-amey); font-size: 40px; line-height: 60px; letter-spacing: 3px; text-align: center; }
.t-do-trau-cau .party-join { left: 6px; top: 118px; width: 408px; font-size: 18px; line-height: 27px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-do-trau-cau .party-venue { left: 5px; top: 186px; width: 411px; font-family: var(--f-amey); font-size: 25px; line-height: 75px; color: var(--gold); text-align: center; white-space: nowrap; }
.t-do-trau-cau .party-addr { left: 0; top: 291px; width: 420px; font-size: 16px; line-height: 24px; text-align: center; }
.t-do-trau-cau .party-map {
  left: 140px; top: 337px; width: 140px; height: 32px;
  display: grid; place-items: center;
  border-radius: 42px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-sri); font-size: 15px; color: var(--red); text-decoration: none;
}
.t-do-trau-cau .party-col { top: 413px; width: 224px; font-size: 16px; line-height: 24px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-do-trau-cau .party-col--time { left: 9px; }
.t-do-trau-cau .party-col--date { left: 187px; }
.t-do-trau-cau .party-bar { left: 208px; top: 413px; width: 4px; height: 51px; background: #f2f2f2; }
.t-do-trau-cau .party-lunar { left: 30px; top: 476px; width: 360px; font-size: 14px; line-height: 21px; letter-spacing: 1px; text-align: center; }

/* ---------- 4. lịch ---------- */
.t-do-trau-cau .s-calendar { height: 393px; }
.t-do-trau-cau .cal-paper { left: 0; top: 0; width: 420px; height: 393px; }
.t-do-trau-cau .cal-title { left: 120px; top: 25px; width: 181px; font-size: 26px; line-height: 39px; color: rgb(178, 34, 34); text-align: center; white-space: nowrap; }
.t-do-trau-cau .cal-crackers { left: 37px; top: 36px; width: 52px; height: 127px; transform-origin: 50% 0; animation: dtc-sway 3s ease-in-out infinite; }
@keyframes dtc-sway { 0%, 100% { transform: rotate(-4.5deg); } 50% { transform: rotate(4.5deg); } }
.t-do-trau-cau .cal-grid { left: 77px; top: 90px; width: 266px; font-size: 20px; color: #555; }
.t-do-trau-cau .cal-row { display: grid; grid-template-columns: repeat(7, 38px); }
.t-do-trau-cau .cal-row span { position: relative; display: grid; place-items: center; height: 44px; }
.t-do-trau-cau .cal-row b { position: relative; font-weight: 400; }
.t-do-trau-cau .cal-row--head span { height: 34px; font-size: 16px; }
.t-do-trau-cau .cal-row .is-sun { color: rgb(178, 34, 34); }
.t-do-trau-cau .cal-row .is-day { color: #fff; }
.t-do-trau-cau .cal-heart { position: absolute; left: 0; top: 3px; width: 38px; height: 38px; animation: vela-heart 3s ease-in-out infinite; }

/* ---------- 5. ảnh + lời cảm ơn ---------- */
.t-do-trau-cau .s-thanks-note { height: 561px; }
.t-do-trau-cau .note-photo { top: 41px; width: 172px; height: 249px; border: 3px solid var(--gold); }
.t-do-trau-cau .note-photo--groom { left: 35px; }
.t-do-trau-cau .note-photo--bride { left: 214px; }
.t-do-trau-cau .note-title { left: 22px; top: 334px; width: 200px; font-family: var(--f-amey); font-size: 30px; line-height: 45px; letter-spacing: 3px; }
.t-do-trau-cau .note-text { left: 21px; top: 397px; width: 378px; font-size: 16px; line-height: 24px; letter-spacing: 2px; text-align: justify; }

/* ---------- 6. xác nhận tham dự ---------- */
.t-do-trau-cau .s-rsvp { height: 447px; }
.t-do-trau-cau .rsvp-paper { left: 21px; top: 0; width: 378px; height: 418px; border-radius: 22px; }
.t-do-trau-cau .rsvp-title { left: -3px; top: 29px; width: 427px; font-size: 17px; line-height: 25.5px; letter-spacing: 1px; color: var(--red); text-align: center; text-transform: uppercase; }
.t-do-trau-cau .rsvp-form { left: 34px; top: 84px; width: 353px; }
.t-do-trau-cau .rsvp-field {
  display: block; width: 353px; height: 47px; margin-bottom: 14px; padding: 0 10px;
  border: 1px solid rgb(142, 1, 1); border-radius: 10px; background: #fff;
  font-family: var(--f-sri); font-size: 13px; color: #111;
  -webkit-appearance: none; appearance: none;
}
.t-do-trau-cau .rsvp-field::placeholder { color: #222; }
.t-do-trau-cau .rsvp-select { position: relative; display: block; margin-top: -4px; }
.t-do-trau-cau .rsvp-select::after {
  content: ""; position: absolute; right: 14px; top: 16px;
  width: 7px; height: 7px; border-right: 2px solid #8e0101; border-bottom: 2px solid #8e0101; transform: rotate(45deg);
  pointer-events: none;
}
.t-do-trau-cau .rsvp-send {
  display: block; width: 148px; height: 47px; margin: 10px 0 0 102px;
  border: 0; border-radius: 5px; background: var(--red); box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
  font-family: var(--f-sri); font-size: 17px; color: #fff; text-transform: uppercase;
}
.t-do-trau-cau .rsvp-send:disabled { opacity: .6; }
.t-do-trau-cau .rsvp-msg { position: absolute; left: 0; top: 302px; width: 353px; font-size: 13px; color: var(--red); text-align: center; }

/* ---------- 7. mừng cưới ---------- */
.t-do-trau-cau .s-gift { height: 148px; }
.t-do-trau-cau .gift-pill { left: 40px; top: 42px; width: 340px; height: 68px; padding: 0; border: 0; border-radius: 50px; background: #f6f4f1; }
.t-do-trau-cau .gift-env { position: absolute; left: 14px; top: -14px; width: 110px; height: 90px; }
.t-do-trau-cau .gift-pill span { position: absolute; left: 74px; top: 17px; width: 248px; font-family: var(--f-sri); font-size: 22px; line-height: 33px; font-weight: 700; letter-spacing: 1px; color: var(--red); text-align: center; text-transform: uppercase; }

/* ---------- 8. album ---------- */
.t-do-trau-cau .s-album { padding: 96px 5px 6px 6px; }
.t-do-trau-cau .album-title { left: 39px; top: 22px; width: 342px; font-family: var(--f-amey); font-size: 30px; line-height: 45px; letter-spacing: 3px; text-align: center; }
.t-do-trau-cau .s-album > .album-grid { position: static; }
.t-do-trau-cau .album-grid { display: grid; grid-template-columns: 202px 202px; grid-auto-rows: 147.5px; gap: 7px 5px; }
.t-do-trau-cau .album-item { overflow: hidden; border-radius: 5px; background: #eee; }
.t-do-trau-cau .album-item img { width: 100%; height: 100%; object-fit: cover; }
.t-do-trau-cau .album-item--tall { grid-row: span 2; }

/* ---------- 9. cảm ơn ---------- */
.t-do-trau-cau .s-closing { height: 630px; overflow: hidden; }
.t-do-trau-cau .closing-photo { left: -23px; top: 0; width: 466px; height: 630px; }
.t-do-trau-cau .closing-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(176, 10, 10, 0) 55%, rgba(96, 2, 2, .55)); }
.t-do-trau-cau .closing-big { left: 89px; top: 374px; width: 242px; font-family: var(--f-amey); font-size: 40px; line-height: 120px; text-align: center; white-space: nowrap; }
.t-do-trau-cau .closing-sub { left: 23px; top: 482px; width: 375px; font-size: 23px; line-height: 34.5px; letter-spacing: 1px; text-align: center; }

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