/* Mẫu Hoa Sen — nền kem xanh, hoa sen màu nước, khung báo tin viền cắt góc, form xác nhận ngay trong thiệp. */

.t-hoa-sen {
  --hs-bg: #fbfff5;
  --hs-green: rgb(90, 105, 70);
  --hs-dark: #223800;
  --hs-map: rgb(57, 71, 58);
  --f-might: "SVN-Mightiest", "Cormorant Upright", serif;
  --f-amst: "SVN-Amstirdam", "Pinyon Script", cursive;
  --f-summer: "Summerfun", "Pinyon Script", cursive;
  --f-script: var(--f-summer);
  --gate-bg: #f3f8ec;
  --accent-strong: #3d5a2a;
}
.t-hoa-sen .vela-frame { background: var(--hs-bg); }

/* ---------- 1. bìa ---------- */
.t-hoa-sen .s-hero { height: 753px; overflow: hidden; background: var(--hs-bg); }
.t-hoa-sen .hs-deco--top { left: 0; top: 0; width: 420px; height: 200px; }
.t-hoa-sen .hs-deco--bottom { left: 0; top: 393px; width: 420px; height: 360px; }
.t-hoa-sen .hs-kicker { left: 23px; top: 210px; width: 374px; font-family: var(--f-might); font-size: 25px; line-height: 25px; letter-spacing: 3px; text-align: center; }
.t-hoa-sen .hs-names { left: 1px; top: 255px; width: 419px; font-family: var(--f-amst); font-size: 45px; line-height: 45px; letter-spacing: 4px; text-align: center; white-space: nowrap; }
.t-hoa-sen .hs-date { left: 125px; top: 316px; width: 171px; font-family: var(--f-might); font-size: 50px; line-height: 50px; text-align: center; }

/* ---------- 2. báo tin ---------- */
.t-hoa-sen .s-family { height: 459px; overflow: hidden; background: var(--hs-bg); }
.t-hoa-sen .hs-frame { border: 1px solid #000; border-radius: 30px; background: #fff; }
.t-hoa-sen .hs-frame--wide { left: 23px; top: 47px; width: 375px; height: 358px; }
.t-hoa-sen .hs-frame--tall { left: 62px; top: 23px; width: 296px; height: 406px; }
.t-hoa-sen .hs-frame-fill { left: 60px; top: 48px; width: 300px; height: 356px; background: #fff; }
.t-hoa-sen .hs-line-art { opacity: .75; }
.t-hoa-sen .hs-line-art--l { left: -21px; top: 28px; width: 136px; height: 136px; }
.t-hoa-sen .hs-line-art--r { left: 310px; top: 237px; width: 149px; height: 149px; }
.t-hoa-sen .hs-side { width: 210px; top: 86px; font-family: "Oswald", sans-serif; font-size: 13px; line-height: 19.5px; font-weight: 700; color: var(--hs-green); text-align: center; text-transform: uppercase; }
.t-hoa-sen .hs-parents { width: 210px; top: 116px; font-family: "Oswald", sans-serif; font-size: 14px; line-height: 21px; color: var(--hs-green); text-align: center; text-transform: uppercase; }
.t-hoa-sen .hs-side--groom, .t-hoa-sen .hs-parents--groom { left: -1px; }
.t-hoa-sen .hs-side--bride { left: 211px; }
.t-hoa-sen .hs-parents--bride { left: 209px; }
.t-hoa-sen .hs-announce { left: 29px; top: 167px; width: 362px; font-family: var(--f-might); font-size: 20px; line-height: 30px; text-align: center; }
.t-hoa-sen .hs-full { left: 0; width: 420px; font-family: var(--f-summer); font-size: 25px; line-height: 75px; text-align: center; white-space: nowrap; }
.t-hoa-sen .hs-full--groom { top: 219px; }
.t-hoa-sen .hs-full--bride { top: 301px; }
.t-hoa-sen .hs-amp { left: 34px; top: 272px; width: 357px; font-family: "EB Garamond", serif; font-style: italic; font-size: 23px; line-height: 34.5px; text-align: center; }

/* ---------- 3. dải ảnh ---------- */
.t-hoa-sen .s-band { height: 308px; overflow: hidden; background: var(--hs-bg); }
.t-hoa-sen .hs-band-photo { left: 0; top: 0; width: 420px; height: 270px; }
.t-hoa-sen .hs-band-fade { left: 0; top: 170px; width: 420px; height: 100px; background: linear-gradient(rgba(251, 255, 245, 0), var(--hs-bg)); }
.t-hoa-sen .hs-band-title { left: 26px; top: 250px; width: 368px; font-family: var(--f-might); font-size: 25px; line-height: 37.5px; color: var(--hs-green); text-align: center; text-transform: uppercase; }

/* ---------- 4. lễ, tiệc, bản đồ ---------- */
.t-hoa-sen .s-events { height: 797px; overflow: hidden; background: var(--hs-bg); }
.t-hoa-sen .hs-bud { left: 330px; top: 228px; width: 120px; height: 250px; }
.t-hoa-sen .hs-ev-title { left: 48px; width: 324px; font-family: var(--f-cond); font-size: 25px; line-height: 37.5px; text-align: center; text-transform: uppercase; }
.t-hoa-sen .hs-ev-time { left: 83px; width: 254px; font-family: var(--f-roboto); font-size: 16px; line-height: 24px; text-align: center; }
.t-hoa-sen .hs-ev-date { left: 83px; width: 254px; font-family: var(--f-roboto); font-size: 17px; line-height: 25.5px; font-weight: 700; letter-spacing: 7px; text-align: center; }
.t-hoa-sen .hs-ev-lunar { left: -1px; width: 422px; font-family: Arial, sans-serif; font-size: 14px; line-height: 21px; font-style: italic; letter-spacing: 1px; color: rgba(0, 0, 0, .57); text-align: center; }
.t-hoa-sen .hs-ev-place { left: 10px; width: 400px; font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; text-align: center; }
.t-hoa-sen .hs-ev-rule { left: 92px; top: 200px; width: 236px; height: 1px; background: #536077; }
.t-hoa-sen .hs-ev-venue { left: 7px; top: 370px; width: 404px; font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; letter-spacing: 1px; text-align: center; }
.t-hoa-sen .hs-ev-addr { left: 24px; top: 401px; width: 371px; font-family: Arial, sans-serif; font-size: 14px; line-height: 21px; letter-spacing: 1px; text-align: center; }
.t-hoa-sen .hs-map-btn {
  left: 141px; top: 451px; width: 140px; height: 32px;
  display: grid; place-items: center;
  border-radius: 42px; background: var(--hs-map);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  font-family: Arial, sans-serif; font-size: 15px; color: #fff; text-decoration: none;
}
.t-hoa-sen .hs-map { left: 33px; top: 498px; width: 355px; height: 279px; overflow: hidden; background: var(--hs-map); }
.t-hoa-sen .hs-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- 5. form xác nhận ---------- */
.t-hoa-sen .s-rsvp { height: 424px; overflow: hidden; background: var(--hs-bg); }
.t-hoa-sen .hs-rsvp-bg { left: 20px; top: 60px; width: 380px; height: 380px; opacity: .22; }
.t-hoa-sen .hs-rsvp-bar { left: 0; top: 0; width: 421px; height: 48px; background: var(--hs-dark); }
.t-hoa-sen .hs-rsvp-ico { position: absolute; left: 8px; top: 5px; width: 42px; height: 42px; }
.t-hoa-sen .hs-rsvp-title { position: absolute; left: 50px; top: 4px; width: 324px; font-family: var(--f-cond); font-size: 25px; line-height: 37.5px; color: #fff; text-align: center; text-transform: uppercase; }
.t-hoa-sen .hs-form { left: 50px; top: 74px; width: 321px; display: flex; flex-direction: column; gap: 13px; }
.t-hoa-sen .hs-form input:not([type="hidden"]):not(.vela-hp), .t-hoa-sen .hs-form select {
  width: 321px; height: 40px; 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;
}
.t-hoa-sen .hs-form select { margin-top: -3px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; color: #666; }
.t-hoa-sen .hs-form input::placeholder { color: #666; }
.t-hoa-sen .hs-send {
  align-self: center; width: 176px; height: 40px; margin: -3px 0 0 -2px;
  border: 1px solid rgb(0, 50, 99); background: #fff;
  font-family: var(--f-roboto); font-size: 14px; font-weight: 700; text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}
.t-hoa-sen .hs-form-msg { margin-top: -8px; min-height: 18px; font-size: 13px; text-align: center; }
.t-hoa-sen .hs-gift {
  left: 138px; top: 347px; width: 144px; height: 52px;
  border: 1px solid #000; border-radius: 9px; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: #000; text-transform: uppercase;
}

/* ---------- 6. album ---------- */
.t-hoa-sen .s-album { background: var(--hs-bg); }
.t-hoa-sen .album-title { color: rgba(90, 105, 70, .85); }

/* ---------- 7. cảm ơn ---------- */
.t-hoa-sen .s-thanks { height: 385px; overflow: hidden; background: var(--hs-bg); }
.t-hoa-sen .hs-thanks { left: -3px; top: 11px; width: 427px; font-family: var(--f-might); font-size: 25px; line-height: 25px; text-align: center; }
.t-hoa-sen .hs-sign { width: 225px; font-family: var(--f-summer); font-size: 30px; line-height: 60px; color: var(--hs-green); white-space: nowrap; }
.t-hoa-sen .hs-sign--groom { left: 0; top: 62px; text-align: right; }
.t-hoa-sen .hs-sign--bride { left: 195px; top: 120px; text-align: left; }
.t-hoa-sen .hs-pond { left: 0; top: 135px; width: 420px; height: 250px; }
.t-hoa-sen .s-footer { background: #fff; }