/* Mẫu Trắng Xanh Dương — nền trắng xanh, chữ WEDDING INVITATION, hoa mộc lan line-art vàng, lịch nền ảnh, form xác nhận + đếm ngược. */

.t-trang-xanh-duong {
  --txd-bg: rgb(248, 253, 255);
  --f-might: "SVN-Mightiest", "Cormorant Upright", serif;
  --f-summer: "Summerfun", "Pinyon Script", cursive;
  --f-funky: "NVN Funky Signature", "Pinyon Script", cursive;
  --f-amst: "SVN-Amstirdam", "Pinyon Script", cursive;
  --f-script: var(--f-summer);
  --gate-bg: #eef7fb;
  --accent-strong: #2f6f9f;
}
.t-trang-xanh-duong .vela-frame { background: var(--txd-bg); }
.t-trang-xanh-duong .s { background: var(--txd-bg); }

/* ---------- 1. bìa ---------- */
.t-trang-xanh-duong .s-hero { height: 799px; overflow: hidden; }
.t-trang-xanh-duong .txd-branch { top: 0; width: 150px; height: 254px; opacity: .5; }
.t-trang-xanh-duong .txd-branch--l { left: -4px; }
.t-trang-xanh-duong .txd-branch--r { left: 274px; }
.t-trang-xanh-duong .txd-title { font-family: var(--f-might); font-size: 40px; line-height: 40px; letter-spacing: 8px; text-align: center; text-transform: uppercase; }
.t-trang-xanh-duong .txd-title--1 { left: 9px; top: 17px; width: 402px; }
.t-trang-xanh-duong .txd-title--2 { left: 16px; top: 57px; width: 389px; }
.t-trang-xanh-duong .txd-date { left: 9px; top: 113px; width: 402px; font-family: var(--f-might); font-size: 25px; line-height: 25px; letter-spacing: 4px; color: rgba(186, 133, 55, .95); text-align: center; }
.t-trang-xanh-duong .txd-date-rule { left: 155px; top: 145px; width: 111px; height: 1px; background: #111; }
.t-trang-xanh-duong .txd-name { top: 175px; width: 180px; font-family: var(--f-summer); font-size: 18px; line-height: 54px; letter-spacing: 4px; text-align: center; white-space: nowrap; }
.t-trang-xanh-duong .txd-name--groom { left: 3px; }
.t-trang-xanh-duong .txd-name--bride { left: 238px; }
.t-trang-xanh-duong .txd-amp { left: 185px; top: 161px; width: 50px; height: 96px; }
.t-trang-xanh-duong .txd-cover-wrap { left: 35px; top: 275px; width: 350px; height: 525px; }
.t-trang-xanh-duong .txd-cover { inset: 0; }
.t-trang-xanh-duong .txd-cover-fade { position: absolute; left: -36px; top: 0; width: 422px; height: 74px; background: linear-gradient(var(--txd-bg), rgba(232, 249, 255, 0)); }

/* ---------- 2. hai gia đình ---------- */
.t-trang-xanh-duong .s-family { height: 385px; }
.t-trang-xanh-duong .txd-side, .t-trang-xanh-duong .txd-parents { font-family: var(--f-cond); font-size: 16px; line-height: 24px; text-transform: uppercase; }
.t-trang-xanh-duong .txd-side { top: 35px; text-decoration: underline; text-underline-offset: 3px; }
.t-trang-xanh-duong .txd-parents { top: 59px; }
.t-trang-xanh-duong .txd-addr { top: 107px; font-family: var(--f-roboto); font-size: 14px; line-height: 19.5px; }
.t-trang-xanh-duong .txd-side--groom, .t-trang-xanh-duong .txd-parents--groom, .t-trang-xanh-duong .txd-addr--groom { left: 9px; width: 182px; text-align: right; }
.t-trang-xanh-duong .txd-side--bride, .t-trang-xanh-duong .txd-parents--bride, .t-trang-xanh-duong .txd-addr--bride { left: 230px; width: 184px; text-align: left; }
.t-trang-xanh-duong .txd-vline { left: 210px; top: 27px; width: 1px; height: 112px; background: #333; }
.t-trang-xanh-duong .txd-announce { left: 60px; top: 160px; width: 300px; font-family: var(--f-might); font-size: 20px; line-height: 30px; text-align: center; }
.t-trang-xanh-duong .txd-full { left: 9px; width: 403px; font-family: var(--f-summer); font-size: 25px; line-height: 75px; white-space: nowrap; }
.t-trang-xanh-duong .txd-full--groom { top: 206px; text-align: left; }
.t-trang-xanh-duong .txd-full--bride { top: 299px; text-align: right; }
.t-trang-xanh-duong .txd-amp2 { left: 151px; top: 236px; width: 118px; font-family: "EB Garamond", serif; font-size: 30px; line-height: 90px; color: #505050; text-align: center; }

/* ---------- 3. dải ảnh ---------- */
.t-trang-xanh-duong .s-band { height: 337px; overflow: hidden; }
.t-trang-xanh-duong .txd-band { left: -1px; top: 0; width: 421px; height: 270px; }
.t-trang-xanh-duong .txd-band-fade { left: -1px; top: 170px; width: 422px; height: 100px; background: linear-gradient(rgba(248, 253, 255, 0), var(--txd-bg)); }
.t-trang-xanh-duong .txd-std { left: 32px; top: 240px; width: 357px; font-family: var(--f-funky); font-size: 40px; line-height: 60px; text-align: center; }

/* ---------- 4-5. lễ, tiệc ---------- */
.t-trang-xanh-duong .s-cer { height: 220px; }
.t-trang-xanh-duong .s-party2 { height: 834px; overflow: hidden; }
.t-trang-xanh-duong .txd-rule { height: 1px; background: #333; }
.t-trang-xanh-duong .txd-rule--cer { left: 0; top: 34px; width: 210px; }
.t-trang-xanh-duong .txd-rule--party { left: 237px; top: 36px; width: 184px; }
.t-trang-xanh-duong .txd-rule--small { left: 321px; top: 535px; width: 79px; }
.t-trang-xanh-duong .txd-rule--center { left: 92px; top: 8px; width: 236px; }
.t-trang-xanh-duong .txd-ev-title { font-family: var(--f-cond); font-size: 25px; line-height: 37.5px; text-transform: uppercase; white-space: nowrap; }
.t-trang-xanh-duong .txd-ev-title--r { left: 200px; top: 16px; width: 210px; text-align: right; }
.t-trang-xanh-duong .txd-ev-title--l { left: 21px; top: 18px; width: 224px; text-align: left; }
.t-trang-xanh-duong .txd-line { font-family: Arial, sans-serif; font-size: 17px; line-height: 25.5px; letter-spacing: 1px; }
.t-trang-xanh-duong .txd-l { left: 21px; width: 384px; text-align: left; }
.t-trang-xanh-duong .txd-r { left: 32px; width: 375px; text-align: right; }
.t-trang-xanh-duong .txd-lunar { font-size: 15px; line-height: 22.5px; font-style: italic; color: rgba(0, 0, 0, .5); }
.t-trang-xanh-duong .txd-venue { left: 14px; width: 392px; top: 150px; }

.t-trang-xanh-duong .txd-cal-bg { left: 0; top: 217px; width: 420px; height: 242px; }
.t-trang-xanh-duong .txd-cal-veil { left: 0; top: 217px; width: 420px; height: 242px; background: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .5) 60%, rgba(248, 253, 255, .92)); }
.t-trang-xanh-duong .txd-cal-big { left: 5px; top: 258px; width: 100px; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 40px; line-height: 44px; }
.t-trang-xanh-duong .txd-cal { left: 175px; top: 223px; width: 240px; font-family: var(--f-open); font-size: 10px; }
.t-trang-xanh-duong .txd-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-trang-xanh-duong .txd-cal-row span { position: relative; display: grid; place-items: center; height: 32px; }
.t-trang-xanh-duong .txd-cal-row--head span { height: 35px; font-weight: 700; }
.t-trang-xanh-duong .txd-cal-row .is-sun { font-weight: 700; }
.t-trang-xanh-duong .txd-heart { position: absolute; left: 50%; top: 50%; width: 32px; height: 30px; margin: -15px 0 0 -16px; animation: vela-heart 4s ease-in-out infinite; }
.t-trang-xanh-duong .txd-pic--l { left: 16px; top: 503px; width: 204px; height: 306px; }
.t-trang-xanh-duong .txd-pic--r { left: 243px; top: 571px; width: 159px; height: 238px; }

/* ---------- 6. địa điểm ---------- */
.t-trang-xanh-duong .s-venue2 { height: 484px; }
.t-trang-xanh-duong .txd-sec-title { left: 110px; top: 17px; width: 200px; font-family: var(--f-cond); font-size: 27px; line-height: 40.5px; text-align: center; text-transform: uppercase; white-space: nowrap; }
.t-trang-xanh-duong .txd-vbox { left: 16px; top: 71px; width: 389px; height: 366px; border: 1px solid #000; border-radius: 6px; background: #fff; }
.t-trang-xanh-duong .txd-vbox > * { position: absolute; }
.t-trang-xanh-duong .txd-vname { left: 13px; top: 16px; width: 360px; font-family: Arial, sans-serif; font-size: 15px; line-height: 22.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.t-trang-xanh-duong .txd-vaddr { left: 13px; top: 48px; width: 360px; font-family: Arial, sans-serif; font-size: 14px; line-height: 19.5px; letter-spacing: 1px; }
.t-trang-xanh-duong .txd-vbtn { left: 13px; top: 108px; width: 128px; height: 26px; display: grid; place-items: center; border: 1px solid #000; border-radius: 6px; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); font-family: Arial, sans-serif; font-size: 12px; color: #000; text-decoration: none; }
.t-trang-xanh-duong .txd-vmap { left: 13px; top: 146px; width: 361px; height: 204px; border: 0; border-radius: 4px; background: #eef3f5; }

/* ---------- 7. đếm ngược + form ---------- */
.t-trang-xanh-duong .s-rsvp2 { height: 589px; }
.t-trang-xanh-duong .txd-count { left: 65px; top: 18px; width: 290px; display: flex; gap: 10px; }
.t-trang-xanh-duong .txd-count div { width: 65px; height: 70px; display: grid; justify-items: center; align-content: center; gap: 0; border: 1px solid #000; border-radius: 12px; background: #fff; font-family: var(--f-might); }
.t-trang-xanh-duong .txd-count b { font-weight: 400; font-size: 22px; line-height: 28px; }
.t-trang-xanh-duong .txd-count span { font-size: 16px; line-height: 24px; }
.t-trang-xanh-duong .txd-form { left: 42px; top: 112px; width: 336px; display: flex; flex-direction: column; gap: 13px; }
.t-trang-xanh-duong .txd-form input:not([type="hidden"]):not(.vela-hp), .t-trang-xanh-duong .txd-form select {
  width: 336px; height: 40px; padding: 0 10px;
  border: 1px solid #000; border-radius: 0; background: #fff;
  font-family: var(--f-roboto); font-size: 14px; color: #111;
}
.t-trang-xanh-duong .txd-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-trang-xanh-duong .txd-form input::placeholder { color: #666; }
.t-trang-xanh-duong .txd-send { height: 40px; margin-top: -3px; border: 1px solid #000; background: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, .35); font-family: var(--f-might); font-size: 20px; line-height: 30px; text-transform: uppercase; color: #000; }
.t-trang-xanh-duong .txd-msg { margin-top: -8px; min-height: 18px; font-size: 13px; text-align: center; }
.t-trang-xanh-duong .txd-gift { left: 133px; top: 398px; width: 155px; height: 155px; padding: 0; border: 1px solid #000; border-radius: 15px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .3); }
.t-trang-xanh-duong .txd-gift span { position: absolute; left: -6px; top: 7px; width: 164px; font-family: var(--f-might); font-size: 20px; line-height: 30px; text-transform: uppercase; color: #000; }
.t-trang-xanh-duong .txd-gift svg { position: absolute; left: 30px; top: 48px; width: 96px; height: 90px; }

/* ---------- 8. album ---------- */
.t-trang-xanh-duong .s-album2 { height: 521px; }
.t-trang-xanh-duong .txd-sec-title--album { top: 25px; }
.t-trang-xanh-duong .txd-a--wide { left: 10px; top: 81px; width: 401px; height: 225px; }
.t-trang-xanh-duong .txd-a--sl { left: 11px; top: 316px; width: 196px; height: 195px; }
.t-trang-xanh-duong .txd-a--sr { left: 214px; top: 316px; width: 196px; height: 195px; }
.t-trang-xanh-duong .s-quote2 { height: 385px; }
.t-trang-xanh-duong .txd-quote { left: -5px; top: -1px; width: 427px; font-family: var(--f-amst); font-size: 30px; line-height: 30px; text-align: center; }
.t-trang-xanh-duong .txd-a--tl { left: 11px; top: 84px; width: 196px; height: 293px; }
.t-trang-xanh-duong .txd-a--tr { left: 214px; top: 85px; width: 196px; height: 293px; }
.t-trang-xanh-duong .s-pair2 { height: 303px; }
.t-trang-xanh-duong .txd-a--pl { left: 11px; top: 0; width: 196px; height: 293px; }
.t-trang-xanh-duong .txd-a--pr { left: 214px; top: 1px; width: 196px; height: 293px; }
.t-trang-xanh-duong .s-big2 { height: 615px; overflow: hidden; }
.t-trang-xanh-duong .txd-big { left: 8px; top: 0; width: 406px; height: 609px; }
.t-trang-xanh-duong .txd-big-fade { left: -3px; width: 426px; }
.t-trang-xanh-duong .txd-big-fade--top { top: 0; height: 89px; background: linear-gradient(var(--txd-bg), rgba(248, 253, 255, 0)); }
.t-trang-xanh-duong .txd-big-fade--bottom { top: 447px; height: 162px; background: linear-gradient(rgba(248, 253, 255, 0), var(--txd-bg)); }

/* ---------- 9. cảm ơn ---------- */
.t-trang-xanh-duong .s-thanks2 { height: 143px; }
.t-trang-xanh-duong .txd-thanks { left: -3px; top: 5px; width: 427px; font-family: var(--f-might); font-size: 25px; line-height: 25px; text-align: center; }
.t-trang-xanh-duong .txd-ty { left: 84px; top: 42px; width: 242px; font-family: var(--f-summer); font-size: 40px; line-height: 120px; text-align: center; white-space: nowrap; }
.t-trang-xanh-duong .s-footer { position: relative; height: 51px; background: #fff; }