/* Mẫu Hoa Đỏ Be — nền giấy hoa nổi, phong bì đỏ dấu sáp (ảnh trượt lên), polaroid, thẻ sự kiện đổ bóng, dải ảnh trượt ngang. */

.t-hoa-do-be {
  --f-mother: "NVN Motherland Signature", "Pinyon Script", cursive;
  --f-funky: "NVN Funky Signature", "Pinyon Script", cursive;
  --f-might: "SVN-Mightiest", "Cormorant Upright", serif;
  --red: #8c1007;
  --maroon: #700000;
  --gate-bg: #f1eeea;
  --accent-strong: #8c1007;
}

@keyframes hd-env-up { from { opacity: 1; transform: translate3d(0, 190px, 0); } to { opacity: 1; transform: none; } }
@keyframes hd-rot-up-left { from { opacity: 0; transform-origin: left bottom; transform: rotate(45deg); } to { opacity: 1; transform-origin: left bottom; transform: rotate(-4deg); } }
@keyframes hd-rot-down-left { from { opacity: 0; transform-origin: left bottom; transform: rotate(-45deg); } to { opacity: 1; transform-origin: left bottom; transform: rotate(8deg); } }
.t-hoa-do-be [data-anim="env-up"] { opacity: 1 !important; transform: translate3d(0, 190px, 0); }
.t-hoa-do-be [data-anim="env-up"].is-in { animation-name: hd-env-up; transform: none; }
.t-hoa-do-be [data-anim="rotate-up-left"].is-in { animation-name: hd-rot-up-left; }
.t-hoa-do-be [data-anim="rotate-down-left"].is-in { animation-name: hd-rot-down-left; }
@media (prefers-reduced-motion: reduce) { .t-hoa-do-be [data-anim="env-up"] { transform: none; } }

/* ---------- 1. bìa ---------- */
.t-hoa-do-be .s-hero { height: 799px; overflow: hidden; background: #efece9; }
.t-hoa-do-be .hero-paper { left: 0; top: 0; width: 420px; height: 860px; }
.t-hoa-do-be .hero-kicker { left: 0; top: 32px; width: 421px; font-family: var(--f-mother); font-size: 20px; line-height: 40px; text-align: center; }
.t-hoa-do-be .hero-rule { left: 152px; top: 92px; width: 116px; height: 1px; background: #536077; }
.t-hoa-do-be .hero-groom, .t-hoa-do-be .hero-bride { width: 180px; font-family: var(--f-upright); font-size: 30px; line-height: 60px; color: var(--red); white-space: nowrap; }
.t-hoa-do-be .hero-groom { left: 0; top: 111px; text-align: right; }
.t-hoa-do-be .hero-bride { left: 240px; top: 111px; }
.t-hoa-do-be .hero-amp { left: 122px; top: 109px; width: 176px; font-family: var(--f-upright); font-size: 32px; line-height: 64px; text-align: center; }
.t-hoa-do-be .hero-date { left: -22px; top: 179px; width: 465px; font-family: var(--f-might); font-size: 20px; line-height: 40px; letter-spacing: 5px; text-align: center; }
.t-hoa-do-be .env { left: 54px; top: 500px; width: 312px; height: 231px; }
.t-hoa-do-be .env--front { filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .25)); }
.t-hoa-do-be .hero-photo { left: 78px; top: 269px; width: 265px; height: 400px; overflow: hidden; border: 3px solid #fff; border-radius: 10px; }
.t-hoa-do-be .hero-photo .ph { inset: 0; }

/* ---------- 2. hai gia đình ---------- */
.t-hoa-do-be .s-family { height: 389px; }
.t-hoa-do-be .fam-lead { left: 14px; top: 44px; width: 392px; font-family: "Lato", Arial, sans-serif; font-size: 15px; line-height: 22.5px; text-align: center; text-transform: uppercase; }
.t-hoa-do-be .fam-full { left: 0; width: 420px; font-family: var(--f-mother); font-size: 30px; line-height: 90px; color: var(--red); text-align: center; white-space: nowrap; }
.t-hoa-do-be .fam-full--groom { top: 82px; }
.t-hoa-do-be .fam-full--bride { top: 188px; }
.t-hoa-do-be .fam-and { left: 151px; top: 148px; width: 118px; font-family: var(--f-funky); font-size: 35px; line-height: 52.5px; text-align: center; }
.t-hoa-do-be .fam-side { top: 292px; width: 180px; font-family: var(--f-upright); font-size: 18px; line-height: 27px; }
.t-hoa-do-be .fam-parents { top: 318px; width: 180px; font-family: var(--f-cond); font-size: 17px; line-height: 25.5px; text-transform: uppercase; }
.t-hoa-do-be .fam-side--groom, .t-hoa-do-be .fam-parents--groom { left: 30px; }
.t-hoa-do-be .fam-side--bride, .t-hoa-do-be .fam-parents--bride { left: 209px; text-align: right; }

/* ---------- 3. save the date ---------- */
.t-hoa-do-be .s-std { height: 557px; }
.t-hoa-do-be .std-title { left: 19px; top: 30px; width: 400px; font-family: var(--f-funky); font-size: 33px; line-height: 66px; letter-spacing: 5px; }
.t-hoa-do-be .std-num { left: 265px; top: 26px; width: 150px; height: 160px; font-family: var(--f-might); font-weight: 700; color: var(--red); }
.t-hoa-do-be .std-num > span { position: absolute; width: 85px; text-align: center; letter-spacing: 5px; }
.t-hoa-do-be .std-day { left: 0; top: 0; font-size: 54px; line-height: 108px; }
.t-hoa-do-be .std-slash { left: 24px; top: 18px; font-family: var(--f-funky); font-size: 70px; line-height: 140px; font-weight: 400; color: #000; }
.t-hoa-do-be .std-month { left: 60px; top: 45px; font-size: 54px; line-height: 108px; }
.t-hoa-do-be .std-env { left: -34px; top: 222px; width: 400px; height: 316px; }
.t-hoa-do-be .std-env--front { filter: drop-shadow(0 -3px 4px rgba(0, 0, 0, .25)); }
.t-hoa-do-be .std-pola { padding: 8px 8px 24px; background: #fdfdfb; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.t-hoa-do-be .std-pola .ph { position: relative; width: 100%; height: 100%; }
.t-hoa-do-be .std-pola--1 { left: 58px; top: 112px; width: 148px; height: 206px; transform: rotate(-4deg); }
.t-hoa-do-be .std-pola--2 { left: 178px; top: 186px; width: 146px; height: 200px; transform: rotate(8deg); }

/* ---------- 4, 5. thẻ lễ / tiệc ---------- */
.t-hoa-do-be .s-card { height: 249px; }
.t-hoa-do-be .card-box { left: 32px; top: 10px; width: 356px; height: 212px; background: #fff; box-shadow: 0 5px 8px rgba(0, 0, 0, .28); }
.t-hoa-do-be .card-title { left: 0; top: 32px; width: 420px; font-family: var(--f-cond); font-size: 23px; line-height: 34.5px; color: var(--maroon); text-align: center; text-transform: uppercase; }
.t-hoa-do-be .card-rule { left: 169px; top: 75px; width: 83px; height: 1px; background: #8a94a3; }
.t-hoa-do-be .card-line { left: 23px; width: 375px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22.5px; letter-spacing: 1px; text-align: center; }
.t-hoa-do-be .card-line--1 { top: 87px; }
.t-hoa-do-be .card-line--2 { top: 118px; }
.t-hoa-do-be .card-line--3 { top: 150px; font-size: 13px; line-height: 19.5px; font-style: italic; color: rgba(0, 0, 0, .5); }
.t-hoa-do-be .card-line--4 { top: 177px; }
.t-hoa-do-be .card-sep { left: 105px; top: 240px; width: 211px; height: 3px; background: #a3a3a3; }

/* ---------- 6. lịch ---------- */
.t-hoa-do-be .s-cal { height: 294px; }
.t-hoa-do-be .calc { left: 58px; top: 0; width: 305px; height: 293px; border: 1px solid #000; border-radius: 4px; background: rgba(255, 255, 255, .5); }
.t-hoa-do-be .calc-title { left: 23px; top: 14px; width: 375px; font-family: var(--f-pinyon); font-size: 25px; line-height: 37.5px; letter-spacing: 1px; text-align: center; }
.t-hoa-do-be .calc-grid { left: 73px; top: 60px; width: 274px; font-family: var(--f-open); font-size: 12px; }
.t-hoa-do-be .calc-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-hoa-do-be .calc-row span { position: relative; display: grid; place-items: center; height: 39px; }
.t-hoa-do-be .calc-row--head { border-top: 1.5px solid #333; border-bottom: 1.5px solid #333; }
.t-hoa-do-be .calc-row--head span { height: 25px; font-size: 12.5px; font-weight: 700; }
.t-hoa-do-be .calc-row .is-sun { font-weight: 700; }
.t-hoa-do-be .calc-grid:has(.calc-row:nth-child(7)) .calc-row:not(.calc-row--head) span { height: 33px; }
.t-hoa-do-be .calc-grid::after { content: ""; display: block; border-top: 1.5px solid #333; margin-top: 2px; }
.t-hoa-do-be .calc-heart { position: absolute; left: 50%; top: 50%; width: 39px; height: 36px; margin: -18px 0 0 -19.5px; animation: vela-heart 3s ease-in-out infinite; }

/* ---------- 7. địa điểm ---------- */
.t-hoa-do-be .s-place { height: 544px; }
.t-hoa-do-be .place-title { left: 23px; top: 34px; width: 375px; font-family: var(--f-pinyon); font-size: 33px; line-height: 49.5px; letter-spacing: 1px; text-align: center; }
.t-hoa-do-be .place-bar { left: 17px; top: 108px; width: 1.5px; height: 58px; background: #222; }
.t-hoa-do-be .place-name { left: 32px; top: 106px; width: 375px; font-family: var(--f-cond); font-size: 21px; line-height: 31.5px; text-transform: uppercase; }
.t-hoa-do-be .place-addr { left: 32px; top: 141px; width: 376px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22.5px; letter-spacing: 1px; }
.t-hoa-do-be .place-map { left: 32px; top: 190px; width: 356px; height: 240px; }
.t-hoa-do-be .place-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.t-hoa-do-be .place-btn {
  left: 53px; top: 451px; width: 315px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid #000; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
  font-family: var(--f-might); font-size: 17px; letter-spacing: 1px; color: #000; text-decoration: none;
}

/* ---------- 8. xác nhận ---------- */
.t-hoa-do-be .s-rsvp { height: 674px; }
.t-hoa-do-be .rsvp-title { left: 23px; top: 53px; width: 375px; font-family: var(--f-pinyon); font-size: 33px; line-height: 49.5px; letter-spacing: 1px; text-align: center; }
.t-hoa-do-be .rsvp-rule { left: 169px; top: 118px; width: 83px; height: 1px; background: #8a94a3; }
.t-hoa-do-be .rsvp-card { left: 0; top: 0; width: 420px; height: 500px; margin: 0; pointer-events: none; }
.t-hoa-do-be .rsvp-card > * { position: absolute; pointer-events: auto; }
.t-hoa-do-be .rsvp-field {
  left: 22px; width: 378px; height: 47px; padding: 0 14px;
  border: 1px solid var(--maroon); border-radius: 56px; background: #fff;
  font-family: var(--f-roboto); font-size: 15px; color: #333;
  -webkit-appearance: none; appearance: none;
}
.t-hoa-do-be .rsvp-field::placeholder { color: #8d8d8d; opacity: 1; }
.t-hoa-do-be .rsvp-field--1 { top: 159px; }
.t-hoa-do-be .rsvp-field--2 { top: 222px; }
.t-hoa-do-be .rsvp-field--3 { top: 285px; }
.t-hoa-do-be .rsvp-field--4 {
  top: 344px; color: #8d8d8d;
  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='%23777' stroke-width='2'/%3E%3C/svg%3E") right 16px center no-repeat;
}
.t-hoa-do-be .rsvp-send {
  left: 21px; top: 427px; width: 378px; height: 47px;
  border: 0; border-radius: 30px; background: var(--maroon); box-shadow: 0 6px 10px rgba(0, 0, 0, .3);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: #fff; text-transform: uppercase;
}
.t-hoa-do-be .rsvp-msg { left: 20px; right: 20px; top: 480px; font-size: 13px; text-align: center; }
.t-hoa-do-be .gift-card {
  left: 57px; top: 506px; width: 306px; height: 135px; padding: 0;
  border: 1px solid var(--maroon); border-radius: 10px; background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.t-hoa-do-be .gift-card > * { position: absolute; }
.t-hoa-do-be .gift-card__photo { left: 6px; top: 6px; width: 121px; height: 121px; overflow: hidden; border-radius: 8px; background: #eee; }
.t-hoa-do-be .gift-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.t-hoa-do-be .gift-card__title { left: 127px; top: 13px; width: 179px; font-family: var(--f-upright); font-size: 24px; line-height: 36px; font-weight: 700; text-align: center; }
.t-hoa-do-be .gift-card__icon { left: 172px; top: 41px; width: 89px; height: 89px; }

/* ---------- 9. album (ghi đè phần chung) ---------- */
.t-hoa-do-be .s-album { padding: 5px 13px 9px; }
.t-hoa-do-be .album-title, .t-hoa-do-be .album-rule { display: none; }
.t-hoa-do-be .album-grid { grid-template-columns: 194px 194px; grid-auto-rows: 141.5px; gap: 7px; }

/* ---------- 10. ảnh trượt ---------- */
.t-hoa-do-be .s-slide { height: 635px; }
.t-hoa-do-be .slide-main {
  left: 12px; top: 0; width: 397px; height: 535px;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.t-hoa-do-be .slide-main::-webkit-scrollbar, .t-hoa-do-be .slide-thumbs::-webkit-scrollbar { display: none; }
.t-hoa-do-be .slide-main__item { flex: 0 0 100%; height: 100%; scroll-snap-align: start; background: #eee; }
.t-hoa-do-be .slide-main__item img, .t-hoa-do-be .slide-thumbs__item img { width: 100%; height: 100%; object-fit: cover; }
.t-hoa-do-be .slide-thumbs { left: 12px; top: 545px; width: 408px; height: 80px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.t-hoa-do-be .slide-thumbs__item { flex: 0 0 80px; height: 80px; background: #eee; }
.t-hoa-do-be .slide-arrow { width: 20px; height: 20px; display: grid; place-items: center; font-size: 22px; line-height: 1; color: #fff; pointer-events: none; }
.t-hoa-do-be .slide-arrow--main { left: 379px; top: 258px; }
.t-hoa-do-be .slide-arrow--l { left: 17px; top: 573px; }
.t-hoa-do-be .slide-arrow--r { left: 384px; top: 573px; }

/* ---------- 11. kết ---------- */
.t-hoa-do-be .s-end { height: 249px; }
.t-hoa-do-be .s-end .hero-groom, .t-hoa-do-be .s-end .hero-bride { top: 17px; }
.t-hoa-do-be .s-end .hero-amp { top: 15px; }
.t-hoa-do-be .s-end .hero-date { top: 84px; }
.t-hoa-do-be .end-note { left: 23px; top: 163px; width: 375px; font-family: var(--f-pinyon); font-size: 23px; line-height: 34.5px; letter-spacing: 1px; text-align: center; }