/* Mẫu Đỏ Trắng — cùng khung mẫu Xanh Lá, tông đỏ đô, hoa văn vàng góc, lịch khung viền đỏ. Phần chung ở templates/_ewed/ewed.css. */

.t-do-trang {
  --moss: rgb(125, 31, 42);
  --sage: rgb(125, 31, 42);
  --f-shelia: "VNF Shelia", "Great Vibes", cursive;
  --f-mango: "Black Mango", var(--f-serif);
  --f-mightiest: "SVN-Mightiest", "Cormorant Garamond", serif;
  --f-amstirdam: "SVN-Amstirdam", "Great Vibes", cursive;
  --f-azkia: "UTM Azkia", "Great Vibes", cursive;
  --gate-bg: #fbf1f1;
  --accent-strong: #7d1f2a;
}

/* ---------- 1. bìa ---------- */
.t-do-trang .deco-corner { width: 81px; height: 81px; }
.t-do-trang .deco-corner--tl { left: 0; top: 0; }
.t-do-trang .deco-corner--tr { left: 339px; top: 0; transform: scaleX(-1); }
.t-do-trang .s-hero { height: 799px; overflow: hidden; }
.t-do-trang .hero-kicker {
  left: 105px; top: 11px; width: 210px;
  font-family: var(--f-mightiest); font-size: 26px; line-height: 39px; letter-spacing: 3px;
  text-align: center; text-transform: uppercase;
}
.t-do-trang .hero-title {
  left: 92px; top: 12px; width: 238px;
  font-family: var(--f-amstirdam); font-size: 90px; line-height: 135px; text-align: center; white-space: nowrap;
}
.t-do-trang .env-back, .t-do-trang .env-front { left: 35px; top: 155px; width: 350px; height: 490px; }
.t-do-trang .env-photo { left: 85px; top: 126px; width: 251px; height: 335px; border: 3px solid var(--moss); border-radius: 10px; overflow: hidden; }
.t-do-trang .env-photo .ph { inset: 0; }
.t-do-trang .hero-line { left: 22px; width: 376px; height: 1px; background: #111; }
.t-do-trang .hero-line--top { top: 540px; }
.t-do-trang .hero-line--bottom { top: 605px; }
.t-do-trang .hero-name { top: 546px; font-family: var(--f-shelia); font-size: 35px; line-height: 52.5px; text-align: center; white-space: nowrap; }
.t-do-trang .hero-name--groom { left: 0; width: 184px; }
.t-do-trang .hero-name--bride { left: 236px; width: 186px; }
.t-do-trang .hero-heart { left: 185px; top: 555px; width: 51px; height: 47px; }
.t-do-trang .hero-date { left: 122px; top: 624px; width: 176px; font-family: var(--f-mango); font-size: 32px; line-height: 48px; text-align: center; }

/* ---------- 2. thư mời + hai gia đình ---------- */
.t-do-trang .s-family { height: 839px; }
.t-do-trang .fam-tag { left: 306px; top: 0; width: 72px; height: 225px; background: var(--sage); }
.t-do-trang .fam-tag > * { position: absolute; }
.t-do-trang .fam-tag__hole { left: 27px; top: 8px; width: 18px; height: 18px; border: 3px solid #d2ae5c; border-radius: 50%; background: #fff; }
.t-do-trang .fam-tag__hy { left: 10px; top: 158px; width: 52px; font-family: "Vela Hy", "Noto Serif SC", "Noto Serif", serif; font-size: 48px; line-height: 56px; font-weight: 700; color: #fff; text-align: center; }
.t-do-trang .fam-title { left: 39px; top: 46px; width: 210px; font-family: var(--f-mightiest); font-size: 26px; line-height: 26px; letter-spacing: 2px; }
.t-do-trang .fam-rule { left: 38px; top: 136px; width: 1.5px; height: 237px; background: #6b7c93; }
.t-do-trang .fam-side { left: 44px; width: 200px; font-family: var(--f-cond); font-size: 16px; line-height: 24px; font-style: italic; }
.t-do-trang .fam-parents { left: 44px; width: 250px; font-family: var(--f-cond); font-size: 16px; line-height: 24px; text-transform: uppercase; }
.t-do-trang .fam-addr { left: 44px; width: 250px; font-family: var(--f-roboto); font-size: 14px; line-height: 20px; }
.t-do-trang .fam-side--groom { top: 142px; }
.t-do-trang .fam-parents--groom { top: 166px; }
.t-do-trang .fam-addr--groom { top: 214px; }
.t-do-trang .fam-side--bride { top: 262px; }
.t-do-trang .fam-parents--bride { top: 286px; }
.t-do-trang .fam-addr--bride { top: 334px; }
.t-do-trang .fam-news { left: 40px; top: 381px; width: 340px; font-family: var(--f-mightiest); font-size: 20px; line-height: 30px; text-align: center; }
.t-do-trang .fam-full { left: 12px; width: 397px; font-family: var(--f-ephesis); font-size: 40px; line-height: 60px; text-align: center; white-space: nowrap; }
.t-do-trang .fam-full--groom { top: 416px; }
.t-do-trang .fam-full--bride { top: 495px; }
.t-do-trang .fam-amp { left: 151px; top: 464px; width: 118px; font-family: "EB Garamond", Georgia, serif; font-size: 26px; line-height: 39px; text-align: center; }
.t-do-trang .fam-photo { left: 35px; top: 565px; width: 351px; height: 270px; border: 7px solid var(--moss); overflow: hidden; }
.t-do-trang .fam-photo .ph { inset: 0; }

/* ---------- 3. trân trọng kính mời ---------- */
.t-do-trang .s-invite-xl { height: 261px; }
.t-do-trang .ixl-title { left: 58px; top: 11px; width: 304px; font-family: var(--f-mightiest); font-size: 25px; line-height: 37.5px; font-style: italic; text-align: center; }
.t-do-trang .ixl-photo { width: 116px; height: 165px; border: 3px solid var(--moss); overflow: hidden; }
.t-do-trang .ixl-photo .ph { inset: 0; }
.t-do-trang .ixl-photo--0 { left: 25px; top: 85px; }
.t-do-trang .ixl-photo--1 { left: 153px; top: 60px; }
.t-do-trang .ixl-photo--2 { left: 280px; top: 85px; }

/* ---------- 4. lễ thành hôn ---------- */
.t-do-trang .s-ceremony-xl { height: 234px; font-family: Arial, var(--f-roboto); }
.t-do-trang .s-ceremony-xl p { text-align: center; letter-spacing: 1px; }
.t-do-trang .cxl-title { left: 0; top: 26px; width: 420px; font-size: 19px; line-height: 28.5px; font-weight: 700; text-transform: uppercase; }
.t-do-trang .cxl-at { left: 0; top: 69px; width: 420px; font-size: 14px; line-height: 21px; }
.t-do-trang .cxl-month { left: -13px; top: 110px; width: 185px; font-size: 14px; line-height: 21px; font-weight: 700; }
.t-do-trang .cxl-year { left: 249px; top: 110px; width: 185px; font-size: 14px; line-height: 21px; font-weight: 700; }
.t-do-trang .cxl-bar { top: 102px; width: 2px; height: 34px; background: rgb(83, 96, 119); }
.t-do-trang .cxl-bar--l { left: 142px; }
.t-do-trang .cxl-bar--r { left: 276px; }
.t-do-trang .cxl-day { left: 117px; top: 90px; width: 185px; font-family: var(--f-ephesis); font-size: 42px; line-height: 63px; font-weight: 700; }
.t-do-trang .cxl-lunar { left: 0; top: 153px; width: 420px; font-size: 14px; line-height: 21px; font-style: italic; }
.t-do-trang .cxl-place { left: 0; top: 182px; width: 420px; font-size: 17px; line-height: 25.5px; letter-spacing: 0 !important; }

/* ---------- 5. tiệc (ghi đè phần chung) ---------- */
.t-do-trang .s-party { height: 270px; }
.t-do-trang .party-box { left: 26px; top: 26px; width: 368px; height: 210px; border-color: var(--moss); background: rgba(255, 249, 236, .3); }
.t-do-trang .party-title { top: 50px; font-size: 20px; line-height: 30px; }
.t-do-trang .party-time { top: 82px; font-size: 18px; line-height: 27px; }
.t-do-trang .party-date { top: 111px; font-size: 21px; line-height: 31.5px; }
.t-do-trang .party-lunar { top: 153px; font-size: 14px; line-height: 21px; }
.t-do-trang .party-venue { top: 186px; font-size: 17px; line-height: 25.5px; }

/* ---------- 6. lịch khung viền đỏ ---------- */
.t-do-trang .s-calendar-dt { height: 354px; }
.t-do-trang .cdt-title { left: 0; top: 0; width: 420px; font-family: "Playfair Display", Georgia, serif; font-size: 25px; line-height: 37.5px; font-weight: 500; text-align: center; text-transform: uppercase; }
.t-do-trang .cdt-box { left: 40px; top: 47px; width: 340px; height: 273px; padding: 6px 4px 0; border: 1px solid rgb(192, 0, 0); font-family: var(--f-open); font-size: 15px; }
.t-do-trang .cdt-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-do-trang .cdt-row span { position: relative; display: grid; place-items: center; height: 45px; line-height: 22.5px; }
.t-do-trang .cdt-row--head span { font-weight: 700; }
.t-do-trang .cdt-row .is-sun { font-weight: 700; }
.t-do-trang .cdt-heart { position: absolute; left: 50%; top: 50%; width: 42px; height: 40px; margin: -20px 0 0 -21px; }

/* ---------- 7. địa điểm ---------- */
.t-do-trang .s-venue-xl { height: 437px; }
.t-do-trang .vxl-bar { left: 0; top: 0; width: 420px; height: 48px; background: var(--moss); }
.t-do-trang .vxl-bar > * { position: absolute; }
.t-do-trang .vxl-pin { display: none; }
.t-do-trang .vxl-title { left: 12px; top: 3px; width: 395px; font-family: var(--f-mightiest); font-size: 26px; line-height: 39px; color: #fff; text-align: center; }
.t-do-trang .vxl-name { left: 0; top: 60px; width: 420px; font-family: var(--f-barlow); font-size: 17px; line-height: 25.5px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-do-trang .vxl-addr { left: 30px; top: 90px; width: 360px; font-family: var(--f-barlow); font-size: 14px; line-height: 21px; letter-spacing: 1px; text-align: center; }
.t-do-trang .vxl-btn {
  left: 140px; top: 145px; width: 140px; height: 32px;
  display: grid; place-items: center;
  border-radius: 42px; background: var(--moss); box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: Arial, sans-serif; font-size: 15px; color: #fff; text-decoration: none;
}
.t-do-trang .vxl-map { left: 33px; top: 192px; width: 355px; height: 235px; background: var(--moss); overflow: hidden; }
.t-do-trang .vxl-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- 8. xác nhận tham dự ---------- */
.t-do-trang .s-rsvp-xl { height: 441px; background: var(--sage); }
.t-do-trang .rxl-title { color: #fff; left: 54px; top: 10px; width: 304px; font-family: var(--f-mightiest); font-size: 25px; line-height: 25px; text-align: center; }
.t-do-trang .rxl-form { left: 38px; top: 101px; width: 336px; display: grid; gap: 12px; }
.t-do-trang .rxl-form input:not(.vela-hp), .t-do-trang .rxl-form select {
  width: 100%; height: 40px; padding: 0 12px;
  border: 2px solid #39473a; border-radius: 0;
  background: #fff;
  font-family: var(--f-roboto); font-size: 14px; color: #111;
}
.t-do-trang .rxl-form select:invalid { color: #757575; }
.t-do-trang .rxl-form button {
  height: 40px; border: 0; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: #111; text-transform: uppercase;
}
.t-do-trang .rxl-msg { min-height: 0; font-family: var(--f-roboto); font-size: 14px; text-align: center; }
.t-do-trang .rxl-msg:empty { display: none; }
.t-do-trang .rxl-gift {
  left: 99px; top: 380px; width: 214px; height: 40px;
  border: 0; border-radius: 9px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: #111; text-transform: uppercase;
}
.t-do-trang .rxl-msg { color: #fff; }

/* ---------- 9. album ---------- */
.t-do-trang .s-album-xl { padding: 54px 18px 3px; }
.t-do-trang .s-album-xl > .axl-grid { position: static; }
.t-do-trang .axl-title { left: 0; top: 2px; width: 193px; font-family: var(--f-ephesis); font-size: 32px; line-height: 48px; text-align: center; }
.t-do-trang .axl-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1px; column-gap: 3px; }
.t-do-trang .axl-item { overflow: hidden; background: #eee; }
.t-do-trang .axl-item img { width: 100%; height: 100%; object-fit: cover; }
.t-do-trang .axl-item--tall { grid-column: span 3; grid-row: span 286; width: 187px; height: 280px; }
.t-do-trang .axl-item--tall[data-anim="fade-in-right"] { justify-self: end; }
.t-do-trang .axl-item--third { grid-column: span 2; grid-row: span 199; height: 189px; }
.t-do-trang .axl-item--half { grid-column: span 3; grid-row: span 143; width: 187px; height: 121px; justify-self: end; align-self: center; }

/* ---------- 10. cảm ơn ---------- */
.t-do-trang .s-closing-xl { height: 631px; overflow: hidden; }
.t-do-trang .s-closing-xl .closing-photo { left: 0; top: 0; width: 420px; height: 631px; }
.t-do-trang .kxl-band { left: -17px; top: 365px; width: 453px; height: 147px; background: rgba(125, 31, 42, .3); }
.t-do-trang .kxl-thanks { left: -8px; top: 318px; width: 435px; font-family: var(--f-amstirdam); font-size: 128px; line-height: 150px; letter-spacing: -2px; color: #fff; text-align: center; }
.t-do-trang .kxl-swash { left: 0; top: 380px; width: 420px; height: 40px; }
.t-do-trang .kxl-sub { left: -30px; top: 439px; width: 480px; font-family: var(--f-azkia); font-size: 38px; line-height: 57px; color: #fff; text-align: center; }