/* Mẫu Hoa Rum — nền trắng/kem, hoa rum vẽ SVG, hai khung sự kiện nối bằng đường cong. Vị trí đo theo bản gốc (khung 420px). */

.t-hoa-rum {
  --green: rgb(90, 105, 70);
  --olive: rgb(89, 102, 22);
  --cream: #fdfef7;
  --f-sloop: "UTM Sloop", "Pinyon Script", cursive;
  --f-mighty: "SVN-Mightiest", Georgia, serif;
  --f-cond: "UTM Cafeta", "Oswald", sans-serif;
  --f-osw: "Oswald", "Arial Narrow", sans-serif;
  --f-gara: "EB Garamond", Georgia, serif;
  --f-crimson: "Crimson Pro", Georgia, serif;
  --f-pinyon: "Pinyon Script", cursive;
  --f-roboto: "Roboto", Arial, sans-serif;
  --gate-bg: #f8faf3;
  --gate-ink: #3c4a22;
  --accent-strong: #5a6946;
}
.t-hoa-rum .s { position: relative; width: 420px; }
.t-hoa-rum .s > * { position: absolute; }

/* ---------- 1. bìa ---------- */
.t-hoa-rum .s-hero { height: 753px; overflow: hidden; }
.t-hoa-rum .hr-lily--top { left: 200px; top: 10px; width: 230px; height: 368px; }
.t-hoa-rum .hr-lily--low { left: -4px; top: 578px; width: 125px; height: 200px; }
.t-hoa-rum .hr-wash { left: -30px; top: 600px; width: 170px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(186, 214, 170, .5), rgba(186, 214, 170, 0)); }
.t-hoa-rum .hero-kicker { left: 31px; top: 144px; width: 374px; font-family: var(--f-mighty); font-size: 35px; line-height: 35px; letter-spacing: 3px; }
.t-hoa-rum .hero-name { left: 32px; width: 402px; font-family: var(--f-sloop); font-size: 55px; line-height: 55px; letter-spacing: 4px; white-space: nowrap; }
.t-hoa-rum .hero-name--groom { top: 212px; }
.t-hoa-rum .hero-name--bride { top: 322px; }
.t-hoa-rum .hero-amp { left: 32px; top: 282px; font-family: var(--f-gara); font-style: italic; font-size: 26px; line-height: 26px; letter-spacing: 3px; }
.t-hoa-rum .hero-date { left: 31px; top: 410px; width: 171px; font-family: var(--f-mighty); font-size: 50px; line-height: 50px; }

/* ---------- 2. hai gia đình ---------- */
.t-hoa-rum .s-family { height: 817px; }
.t-hoa-rum .fam-side, .t-hoa-rum .fam-parents { width: 210px; font-family: var(--f-osw); color: var(--green); text-align: center; text-transform: uppercase; }
.t-hoa-rum .fam-side { top: 26px; font-size: 13px; line-height: 19.5px; font-weight: 700; }
.t-hoa-rum .fam-parents { top: 56px; font-size: 14px; line-height: 21px; }
.t-hoa-rum .fam-side--groom, .t-hoa-rum .fam-parents--groom { left: 0; }
.t-hoa-rum .fam-side--bride { left: 213px; }
.t-hoa-rum .fam-parents--bride { left: 210px; }
.t-hoa-rum .fam-kicker { left: 29px; top: 114px; width: 362px; font-family: var(--f-mighty); font-size: 20px; line-height: 30px; text-align: center; }
.t-hoa-rum .fam-name { left: 0; width: 420px; font-family: var(--f-sloop); font-size: 40px; line-height: 60px; text-align: center; white-space: nowrap; }
.t-hoa-rum .fam-name--groom { top: 163px; }
.t-hoa-rum .fam-name--bride { top: 246px; }
.t-hoa-rum .fam-amp { left: 34px; top: 219px; width: 357px; font-family: var(--f-gara); font-style: italic; font-size: 23px; line-height: 34.5px; text-align: center; }
.t-hoa-rum .fam-photo { left: 26px; top: 318px; width: 368px; height: 442px; border-radius: 50px; }
.t-hoa-rum .hr-bouquet { left: 300px; top: 732px; width: 150px; height: 170px; z-index: 1; }

/* ---------- 3. thiệp mời ---------- */
.t-hoa-rum .s-title { height: 157px; }
.t-hoa-rum .hr-badge { left: 26px; top: 25px; width: 51px; height: 51px; overflow: hidden; border: 1px solid var(--olive); border-radius: 50%; }
.t-hoa-rum .hr-badge svg { position: absolute; left: 4px; top: -2px; width: 40px; height: 64px; transform: rotate(20deg); }
.t-hoa-rum .title-main { left: 26px; top: 83px; width: 368px; font-family: var(--f-sloop); font-size: 50px; line-height: 75px; color: var(--green); text-align: center; }

/* ---------- 4. lễ + tiệc ---------- */
.t-hoa-rum .s-events { height: 395px; }
.t-hoa-rum .ev-box { width: 325px; height: 157px; border-radius: 30px; background: rgba(219, 228, 201, .3); }
.t-hoa-rum .ev-frame { width: 325px; height: 153px; border: 1px solid var(--olive); border-radius: 30px; }
.t-hoa-rum .ev-box--cer { left: 19px; top: 31px; }
.t-hoa-rum .ev-frame--cer { left: 16px; top: 27px; }
.t-hoa-rum .ev-box--party { left: 88px; top: 234px; }
.t-hoa-rum .ev-frame--party { left: 85px; top: 230px; }
.t-hoa-rum .ev-link { left: 170px; top: 132px; width: 145px; height: 145px; }
.t-hoa-rum .ev-title { width: 255px; font-family: var(--f-cond); font-size: 21px; line-height: 31.5px; text-align: center; text-transform: uppercase; }
.t-hoa-rum .ev-time { width: 297px; font-family: var(--f-crimson); font-size: 16px; line-height: 24px; text-align: center; }
.t-hoa-rum .ev-date { width: 184px; font-family: var(--f-crimson); font-size: 18px; line-height: 27px; font-weight: 700; letter-spacing: 7px; text-align: center; }
.t-hoa-rum .ev-lunar { width: 309px; font-family: var(--f-crimson); font-size: 13px; line-height: 19.5px; font-style: italic; letter-spacing: 1px; color: rgba(0, 0, 0, .75); text-align: center; }
.t-hoa-rum .ev-place { width: 294px; font-family: var(--f-crimson); font-size: 15px; line-height: 22.5px; text-align: center; }
.t-hoa-rum .ev-title--cer { left: 54px; top: 33px; }
.t-hoa-rum .ev-time--cer { left: 33px; top: 69px; }
.t-hoa-rum .ev-date--cer { left: 91px; top: 93px; }
.t-hoa-rum .ev-lunar--cer { left: 27px; top: 122px; }
.t-hoa-rum .ev-place--cer { left: 34px; top: 144px; }
.t-hoa-rum .ev-title--party { left: 123px; top: 236px; }
.t-hoa-rum .ev-time--party { left: 102px; top: 272px; }
.t-hoa-rum .ev-date--party { left: 160px; top: 296px; }
.t-hoa-rum .ev-lunar--party { left: 96px; top: 325px; }
.t-hoa-rum .ev-place--party { left: 103px; top: 347px; }

/* ---------- 5. địa điểm ---------- */
.t-hoa-rum .s-venue { height: 562px; }
.t-hoa-rum .hr-branch { left: -22px; top: -37px; width: 187px; height: 187px; }
.t-hoa-rum .venue-title { left: 52px; top: 8px; width: 368px; font-family: var(--f-sloop); font-size: 45px; line-height: 67.5px; color: var(--green); text-align: right; white-space: nowrap; }
.t-hoa-rum .venue-name { left: 0; top: 101px; width: 421px; font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 25.5px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-hoa-rum .venue-addr { left: 20px; top: 146px; width: 380px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22.5px; letter-spacing: 1px; text-align: center; }
.t-hoa-rum .venue-map { left: 20px; top: 205px; width: 380px; height: 285px; border: 0; }
.t-hoa-rum .venue-btn {
  left: 99px; top: 506px; width: 222px; height: 29px;
  display: grid; place-items: center;
  border-radius: 6px; background: rgb(57, 71, 58); 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; text-decoration: none;
}

/* ---------- 6. xác nhận tham dự ---------- */
.t-hoa-rum .s-rsvp { height: 477px; }
.t-hoa-rum .hr-ghost { left: 60px; top: 150px; width: 300px; height: 480px; opacity: .14; transform: rotate(-35deg); }
.t-hoa-rum .hr-swirl { width: 150px; height: 150px; }
.t-hoa-rum .hr-swirl--left { left: -60px; top: -40px; transform: rotate(-30deg); }
.t-hoa-rum .hr-swirl--right { left: 330px; top: 300px; transform: rotate(150deg); }
.t-hoa-rum .rsvp-title { left: 26px; top: 6px; width: 368px; font-family: var(--f-sloop); font-size: 45px; line-height: 67.5px; color: var(--green); text-align: center; white-space: nowrap; }
.t-hoa-rum .rsvp-form { left: 50px; top: 97px; width: 321px; }
.t-hoa-rum .rsvp-field {
  display: block; width: 321px; height: 40px; margin-bottom: 13px; padding: 0 10px;
  border: 1px solid rgb(52, 73, 94); border-radius: 0; background: #fff;
  font-family: var(--f-roboto); font-size: 14px; color: #111;
  -webkit-appearance: none; appearance: none;
}
.t-hoa-rum .rsvp-field::placeholder { color: #8a8a8a; }
.t-hoa-rum .rsvp-select { position: relative; display: block; margin-top: -3px; }
.t-hoa-rum .rsvp-select select:invalid { color: #8a8a8a; }
.t-hoa-rum .rsvp-select::after {
  content: ""; position: absolute; right: 14px; top: 13px;
  width: 7px; height: 7px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(45deg);
  pointer-events: none;
}
.t-hoa-rum .rsvp-send {
  display: block; width: 176px; height: 40px; margin: 22px 0 0 72px;
  border: 1px solid rgb(0, 50, 99); border-radius: 10px; background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
  font-family: var(--f-roboto); font-size: 14px; font-weight: 700; text-transform: uppercase;
}
.t-hoa-rum .rsvp-send:disabled { opacity: .6; }
.t-hoa-rum .rsvp-msg { position: absolute; left: 0; top: 262px; width: 321px; font-family: var(--f-roboto); font-size: 13px; text-align: center; }
.t-hoa-rum .rsvp-gift {
  left: 130px; top: 393px; width: 160px; height: 40px;
  border: 1px solid #000; border-radius: 10px; background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; text-transform: uppercase;
}

/* ---------- 7. album ---------- */
.t-hoa-rum .s-album { height: 1509px; background: var(--cream); }
.t-hoa-rum .album-rule { top: 42px; width: 74px; height: 1px; background: var(--green); }
.t-hoa-rum .album-rule--l { left: 0; }
.t-hoa-rum .album-rule--r { left: 346px; }
.t-hoa-rum .album-title { left: 66px; top: 0; width: 288px; font-family: var(--f-sloop); font-size: 45px; line-height: 67.5px; color: var(--green); text-align: center; white-space: nowrap; }
.t-hoa-rum .album-item { overflow: hidden; background: #eee; }
.t-hoa-rum .album-item img { width: 100%; height: 100%; object-fit: cover; }
.t-hoa-rum .album-item--0 { left: 0; top: 87px; width: 225px; height: 337px; }
.t-hoa-rum .album-item--1 { left: 195px; top: 321px; width: 225px; height: 337px; border: 4px solid #fff; }
.t-hoa-rum .album-item--2 { left: 6px; top: 756px; width: 202px; height: 303px; }
.t-hoa-rum .album-item--3 { left: 214px; top: 828px; width: 202px; height: 130px; }
.t-hoa-rum .album-item--4 { left: 214px; top: 963px; width: 202px; height: 130px; }
.t-hoa-rum .album-item--5 { left: 163px; top: 1193px; width: 248px; height: 302px; }
.t-hoa-rum .album-item--6 { left: 12px; top: 1284px; width: 140px; height: 211px; }
.t-hoa-rum .album-quote { left: -3px; width: 427px; font-family: var(--f-pinyon); font-size: 20px; line-height: 20px; text-align: center; }
.t-hoa-rum .album-quote--1 { top: 690px; }
.t-hoa-rum .album-quote--2 { top: 1126px; }

/* ---------- 8. cảm ơn ---------- */
.t-hoa-rum .s-thanks { height: 324px; background: var(--cream); }
.t-hoa-rum .thanks-frame { left: 43px; top: 0; width: 333px; height: 333px; }
.t-hoa-rum .thanks-big { left: -4px; top: 89px; width: 427px; font-family: var(--f-mighty); font-size: 35px; line-height: 35px; text-align: center; text-transform: uppercase; }
.t-hoa-rum .thanks-sub { left: 144px; top: 147px; width: 233px; font-family: var(--f-pinyon); font-size: 25px; line-height: 27.5px; letter-spacing: 1px; text-align: center; }

.t-hoa-rum .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-hoa-rum .footer-heart { color: #e5484d; font-size: 18px; }
.t-hoa-rum .hr-top {
  position: fixed; z-index: 40;
  right: max(20px, calc(50% - 190px)); bottom: 20px;
  width: 47px; height: 47px; display: grid; place-items: center;
  border: 2px solid #111; border-radius: 50%; background: rgba(255, 255, 255, .7);
}
.t-hoa-rum .hr-top svg { width: 26px; height: 26px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }