/* Mẫu Đỏ Vàng — viền hoa văn vàng hai bên, chữ Hỷ, dây kết, đèn lồng, form xác nhận ngay trong trang. */

.t-do-vang {
  --f-sloop: "UTM Sloop", "Pinyon Script", cursive;
  --f-mango: "Black Mango", "Noto Serif Display", Georgia, serif;
  --red: #8e0101;
  --wine: #7d1f2a;
  --gate-bg: #fbf5e6;
  --accent-strong: #8e0101;
}
.t-do-vang .vela-frame {
  isolation: isolate;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2246%22%20viewBox%3D%220%200%2018%2046%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbe6a4%22%20stroke-width%3D%222.4%22%3E%3Cpath%20d%3D%22M1.5%200V46%22/%3E%3Cpath%20d%3D%22M1.5%203.5H16.5V42.5H5.5V9H12.5V36H9V15%22/%3E%3C/g%3E%3C/svg%3E") left top / 18px 46px repeat-y, #fff;
}
@supports (transform: scaleX(-1)) {
  .t-do-vang .vela-frame::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 18px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2246%22%20viewBox%3D%220%200%2018%2046%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbe6a4%22%20stroke-width%3D%222.4%22%3E%3Cpath%20d%3D%22M1.5%200V46%22/%3E%3Cpath%20d%3D%22M1.5%203.5H16.5V42.5H5.5V9H12.5V36H9V15%22/%3E%3C/g%3E%3C/svg%3E") left top / 18px 46px repeat-y; transform: scaleX(-1); pointer-events: none; z-index: -1;
  }
}

.t-do-vang .hy { display: grid; place-items: center; font-family: "Vela Hy", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; color: #c8101d; line-height: 1; }
.t-do-vang .knot { overflow: visible; }

/* ---------- 1. bìa ---------- */
.t-do-vang .s-hero { height: 799px; }
.t-do-vang .hero-kicker { left: 83px; top: 42px; width: 254px; font-family: var(--f-upright); font-size: 20px; line-height: 30px; letter-spacing: 3px; text-align: center; text-transform: uppercase; }
.t-do-vang .hero-names { left: 18px; top: 80px; width: 385px; font-family: var(--f-sloop); font-size: 40px; line-height: 60px; text-align: center; white-space: nowrap; }
.t-do-vang .hero-hy { left: 167px; top: 135px; width: 87px; height: 87px; font-size: 62px; font-weight: 900; }
.t-do-vang .hero-knot { top: 185px; width: 87px; height: 80px; }
.t-do-vang .hero-knot--l { left: 19px; }
.t-do-vang .hero-knot--r { left: 312px; }
.t-do-vang .hero-time { left: 83px; top: 222px; width: 254px; font-family: var(--f-roboto); font-size: 15px; line-height: 22.5px; text-align: center; }
.t-do-vang .hero-date { left: 83px; top: 245px; width: 254px; font-family: var(--f-roboto); font-size: 22px; line-height: 33px; font-weight: 700; letter-spacing: 7px; text-align: center; }
.t-do-vang .hero-frame { left: 58px; top: 301px; width: 304px; height: 456px; border: 7px solid var(--red); }
.t-do-vang .hero-frame .ph { inset: 0; }
.t-do-vang .hero-lanterns { left: 304px; top: 683px; width: 117px; height: 117px; }

/* ---------- 2. hai gia đình ---------- */
.t-do-vang .s-family { height: 713px; }
.t-do-vang .fam-hy { left: 179px; top: 13px; width: 62px; height: 62px; border: 1.5px solid #c8101d; border-radius: 50%; font-size: 38px; font-weight: 300; }
.t-do-vang .fam-knot { left: 190px; top: 70px; width: 40px; height: 56px; }
.t-do-vang .fam-side, .t-do-vang .fam-parents { width: 170px; font-family: var(--f-cond); font-size: 16px; line-height: 24px; text-align: center; text-transform: uppercase; }
.t-do-vang .fam-addr { width: 170px; font-family: var(--f-roboto); font-size: 14px; line-height: 20px; text-align: center; }
.t-do-vang .fam-side--groom, .t-do-vang .fam-parents--groom, .t-do-vang .fam-addr--groom { left: 20px; }
.t-do-vang .fam-side--bride, .t-do-vang .fam-parents--bride, .t-do-vang .fam-addr--bride { left: 230px; }
.t-do-vang .fam-side { top: 99px; }
.t-do-vang .fam-parents { top: 123px; }
.t-do-vang .fam-addr { top: 171px; }
.t-do-vang .fam-lead { left: 30px; top: 244px; width: 361px; font-family: "SVN-Mightiest", var(--f-upright); font-size: 17px; line-height: 25.5px; text-align: center; }
.t-do-vang .fam-full { width: 380px; font-family: var(--f-sloop); font-size: 40px; line-height: 60px; text-align: center; white-space: nowrap; }
.t-do-vang .fam-full--groom { left: 20px; top: 274px; }
.t-do-vang .fam-full--bride { left: 24px; top: 355px; }
.t-do-vang .fam-amp { left: 142px; top: 326px; width: 137px; font-family: "EB Garamond", Georgia, serif; font-size: 29px; line-height: 43.5px; text-align: center; }
.t-do-vang .fam-frame { left: 33px; top: 424px; width: 354px; height: 264px; border: 7px solid var(--red); }
.t-do-vang .fam-frame .ph { inset: 0; }

/* ---------- 3. thư mời ---------- */
.t-do-vang .s-invite { height: 297px; }
.t-do-vang .inv-gold { left: 128px; top: 0; width: 165px; height: 35px; }
.t-do-vang .inv-lead { left: 58px; top: 42px; width: 304px; font-family: var(--f-ephesis); font-size: 25px; line-height: 37.5px; text-align: center; }
.t-do-vang .inv-photo { width: 116px; height: 165px; }
.t-do-vang .inv-photo--0 { left: 25px; top: 118px; }
.t-do-vang .inv-photo--1 { left: 152px; top: 86px; }
.t-do-vang .inv-photo--2 { left: 279px; top: 118px; }

/* ---------- 4. lễ thành hôn (ghi đè phần chung) ---------- */
.t-do-vang .s-ceremony { height: 273px; }
.t-do-vang .s-ceremony p { font-size: 14px; line-height: 21px; }
.t-do-vang .cer-title { top: 26px; font-size: 16px !important; line-height: 24px !important; }
.t-do-vang .cer-at { top: 53px; }
.t-do-vang .cer-weekday { top: 88px; }
.t-do-vang .cer-day { top: 101px; font-size: 35px !important; line-height: 52.5px !important; }
.t-do-vang .cer-month { top: 153px; }
.t-do-vang .cer-time { left: -10px; top: 121px; }
.t-do-vang .cer-year { top: 121px; }
.t-do-vang .cer-bar { top: 97px; background: #536077; }
.t-do-vang .cer-bar--l { left: 127px; }
.t-do-vang .cer-lunar { top: 186px; font-size: 13px !important; line-height: 19.5px !important; }
.t-do-vang .cer-place { top: 221px; font-size: 16px !important; line-height: 24px !important; }

/* ---------- 5. tiệc mừng (ghi đè phần chung) ---------- */
.t-do-vang .s-party { height: 233px; }
.t-do-vang .s-party p { left: 38px; width: 345px; }
.t-do-vang .party-box { left: 32px; top: 17px; width: 357px; height: 198px; border-color: var(--wine); background: rgba(0, 0, 0, .04); }
.t-do-vang .party-title { top: 37px; font-size: 16px; line-height: 24px; }
.t-do-vang .party-time { top: 77px; font-size: 16px; line-height: 24px; }
.t-do-vang .party-date { top: 104px; font-size: 16px; line-height: 24px; }
.t-do-vang .party-lunar { top: 139px; font-size: 13px; line-height: 19.5px; }
.t-do-vang .party-venue { top: 170px; }

/* ---------- 6. địa điểm ---------- */
.t-do-vang .s-place { height: 300px; font-family: Arial, Helvetica, sans-serif; }
.t-do-vang .place-box { left: 53px; top: 40px; width: 309px; height: 232px; border: 2px solid var(--red); border-radius: 16px; }
.t-do-vang .place-kicker { left: 0; top: 55px; width: 420px; font-size: 15px; line-height: 22.5px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-do-vang .place-name { left: 62px; top: 102px; width: 297px; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-do-vang .place-addr { left: 88px; top: 150px; width: 244px; font-size: 14px; line-height: 21px; letter-spacing: 1px; text-align: center; }
.t-do-vang .place-btn {
  left: 130px; top: 215px; width: 154px; height: 35px;
  display: grid; place-items: center;
  border-radius: 42px; background: var(--wine);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-size: 15px; color: #fff; text-decoration: none;
}

/* ---------- 7. lịch ---------- */
.t-do-vang .s-cal { height: 384px; }
.t-do-vang .calb { left: 23px; top: 10px; width: 375px; height: 360px; }
.t-do-vang .calb > * { position: absolute; }
.t-do-vang .calb-title { left: 0; top: 4px; width: 375px; font-family: var(--f-mango); font-size: 24px; line-height: 32px; text-align: center; text-transform: uppercase; }
.t-do-vang .calb-grid { left: 17px; top: 47px; width: 341px; padding: 4px 0 8px; border: 1px solid #c8343d; font-family: var(--f-open); font-size: 14px; }
.t-do-vang .calb-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-do-vang .calb-row span { position: relative; display: grid; place-items: center; height: 45.5px; }
.t-do-vang .calb-row--head span { font-weight: 700; }
.t-do-vang .calb-row .is-sun { font-weight: 700; }
.t-do-vang .calb-heart { position: absolute; left: 50%; top: 50%; width: 38px; height: 36px; margin: -19px 0 0 -19px; animation: vela-heart 4s ease-in-out infinite; }

/* ---------- 8. xác nhận tham dự ---------- */
.t-do-vang .s-rsvp { height: 569px; }
.t-do-vang .rsvp-title { left: 58px; top: 14px; width: 304px; font-family: var(--f-ephesis); font-size: 30px; line-height: 30px; text-align: center; }
.t-do-vang .rsvp-card { left: 35px; top: 125px; width: 350px; height: 326px; margin: 0; border-radius: 16px; background: var(--wine); }
.t-do-vang .rsvp-card > * { position: absolute; }
.t-do-vang .rsvp-field {
  left: 22px; width: 307px; height: 43px; padding: 0 12px;
  border: 1px solid var(--red); border-radius: 10px; background: #fff;
  font-family: var(--f-roboto); font-size: 14px; color: var(--red);
  -webkit-appearance: none; appearance: none;
}
.t-do-vang .rsvp-field::placeholder { color: var(--red); opacity: 1; }
.t-do-vang .rsvp-field--1 { top: 19px; }
.t-do-vang .rsvp-field--2 { top: 76px; }
.t-do-vang .rsvp-field--3 { top: 134px; }
.t-do-vang .rsvp-field--4 {
  top: 187px;
  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='%238e0101' stroke-width='2'/%3E%3C/svg%3E") right 12px center no-repeat;
}
.t-do-vang .rsvp-send {
  left: 91px; top: 254px; width: 168px; height: 43px;
  border: 0; border-radius: 5px; background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-roboto); font-size: 14px; font-weight: 700; color: #000; text-transform: uppercase;
}
.t-do-vang .rsvp-msg { left: 10px; right: 10px; top: 302px; font-size: 13px; color: #fff; text-align: center; }
.t-do-vang .rsvp-gift {
  left: 113px; top: 489px; width: 194px; height: 40px;
  border: 0; border-radius: 9px; background: var(--wine);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-roboto); font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase;
}

/* ---------- 9. album (ghi đè phần chung) ---------- */
.t-do-vang .s-album { padding-top: 54px; }
.t-do-vang .album-title { left: 21px; top: 0; width: 185px; }
.t-do-vang .album-rule { left: 215px; top: 7px; width: 165px; height: 35px; }
.t-do-vang .album-rule path { display: none; }
.t-do-vang .s-album::before {
  content: ""; position: absolute; left: 215px; top: 7px; width: 165px; height: 35px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20165%2035%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ccb45e%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M8%2015%20q4%20-3%208%200%20t8%200%20t8%200%20t8%200%20t8%200%20t8%200%20M8%2020%20q4%20-3%208%200%20t8%200%20t8%200%20t8%200%20t8%200%20t8%200%22/%3E%3Cpath%20d%3D%22M109%2015%20q4%20-3%208%200%20t8%200%20t8%200%20t8%200%20t8%200%20t8%200%20M109%2020%20q4%20-3%208%200%20t8%200%20t8%200%20t8%200%20t8%200%20t8%200%22/%3E%3Cg%20transform%3D%22translate%2882.5%2017.5%29%22%3E%3Cpath%20d%3D%22M0%20-3%20C-4%20-8%20-3%20-14%200%20-16%20C3%20-14%204%20-8%200%20-3Z%22/%3E%3Cpath%20d%3D%22M0%203%20C-4%208%20-3%2014%200%2016%20C3%2014%204%208%200%203Z%22/%3E%3Cpath%20d%3D%22M-3%200%20C-8%20-4%20-14%20-3%20-16%200%20C-14%203%20-8%204%20-3%200Z%22/%3E%3Cpath%20d%3D%22M3%200%20C8%20-4%2014%20-3%2016%200%20C14%203%208%204%203%200Z%22/%3E%3Ccircle%20r%3D%222.2%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 10. kết ---------- */
.t-do-vang .s-closing { height: 629px; }
.t-do-vang .closing-photo { left: 0; top: 0; width: 420px; height: 631px; }
.t-do-vang .closing-band { left: -17px; top: 354px; width: 453px; height: 147px; background: rgba(0, 0, 0, .48); }
.t-do-vang .closing-thanks { left: 0; top: 340px; width: 420px; font-family: "Great Vibes", cursive; font-size: 62px; line-height: 100px; color: #fff; text-align: center; }
.t-do-vang .closing-thanks::before, .t-do-vang .closing-thanks::after { content: ""; position: absolute; top: 60px; width: 60px; height: 1.5px; background: #fff; }
.t-do-vang .closing-thanks::before { left: 40px; }
.t-do-vang .closing-thanks::after { right: 40px; }
.t-do-vang .closing-note { left: -30px; top: 448px; width: 480px; font-family: var(--f-pinyon); font-size: 25px; line-height: 37.5px; letter-spacing: 2px; color: #fff; text-align: center; }

.t-do-vang .s-footer { position: relative; background: #fff; }