/* Mẫu Xanh Lá — bìa phong bì, thẻ "Thư Mời Cưới", form xác nhận ngay trên trang. Phần chung ở templates/_ewed/ewed.css. */

.t-xanh-la {
  --moss: #39473a;
  --sage: rgb(178, 188, 163);
  --f-shelia: "VNF Shelia", "Great Vibes", cursive;
  --f-mango: "Black Mango", var(--f-serif);
  --f-mightiest: "SVN-Mightiest", "Cormorant Garamond", serif;
  --f-amstirdam: "SVN-Amstirdam", "Great Vibes", cursive;
  --f-azkia: "UTM Azkia", "Great Vibes", cursive;
  --gate-bg: #eef1ea;
  --accent-strong: #39473a;
}

/* ---------- 1. bìa ---------- */
.t-xanh-la .s-hero { height: 799px; overflow: hidden; }
.t-xanh-la .deco-wash--tl { left: -30px; top: -20px; width: 170px; height: 170px; }
.t-xanh-la .deco-wash--br { left: 300px; top: 560px; width: 240px; height: 240px; }
.t-xanh-la .deco-leaf--tr { left: 372px; top: 5px; width: 118px; height: 118px; transform: scaleX(-1); }
.t-xanh-la .deco-leaf--bl { left: -20px; top: 668px; width: 130px; height: 130px; }
.t-xanh-la .hero-kicker {
  left: 105px; top: 11px; width: 210px;
  font-family: var(--f-mightiest); font-size: 26px; line-height: 39px; letter-spacing: 3px;
  text-align: center; text-transform: uppercase;
}
.t-xanh-la .hero-title {
  left: 92px; top: 12px; width: 238px;
  font-family: var(--f-amstirdam); font-size: 90px; line-height: 135px; text-align: center; white-space: nowrap;
}
.t-xanh-la .env-back, .t-xanh-la .env-front { left: 35px; top: 155px; width: 350px; height: 490px; }
.t-xanh-la .env-photo { left: 85px; top: 126px; width: 251px; height: 335px; border: 3px solid var(--moss); border-radius: 10px; overflow: hidden; }
.t-xanh-la .env-photo .ph { inset: 0; }
.t-xanh-la .hero-line { left: 22px; width: 376px; height: 1px; background: #111; }
.t-xanh-la .hero-line--top { top: 540px; }
.t-xanh-la .hero-line--bottom { top: 605px; }
.t-xanh-la .hero-name { top: 546px; font-family: var(--f-shelia); font-size: 35px; line-height: 52.5px; text-align: center; white-space: nowrap; }
.t-xanh-la .hero-name--groom { left: 0; width: 184px; }
.t-xanh-la .hero-name--bride { left: 236px; width: 186px; }
.t-xanh-la .hero-heart { left: 185px; top: 555px; width: 51px; height: 47px; }
.t-xanh-la .hero-date { left: 122px; top: 624px; width: 176px; font-family: var(--f-mango); font-size: 32px; line-height: 48px; text-align: center; }

/* ---------- 2. thư mời + hai gia đình ---------- */
.t-xanh-la .s-family { height: 839px; }
.t-xanh-la .fam-tag { left: 306px; top: 0; width: 72px; height: 225px; background: var(--sage); }
.t-xanh-la .fam-tag > * { position: absolute; }
.t-xanh-la .fam-tag__hole { left: 27px; top: 8px; width: 18px; height: 18px; border: 3px solid #d2ae5c; border-radius: 50%; background: #fff; }
.t-xanh-la .fam-tag__hy { left: 10px; top: 158px; width: 52px; font-family: "Vela Hy", "Noto Serif SC", "Noto Serif", serif; font-size: 48px; line-height: 56px; font-weight: 700; color: #fff; text-align: center; }
.t-xanh-la .fam-title { left: 39px; top: 46px; width: 210px; font-family: var(--f-mightiest); font-size: 26px; line-height: 26px; letter-spacing: 2px; }
.t-xanh-la .fam-rule { left: 38px; top: 136px; width: 1.5px; height: 237px; background: #6b7c93; }
.t-xanh-la .fam-side { left: 44px; width: 200px; font-family: var(--f-cond); font-size: 16px; line-height: 24px; font-style: italic; }
.t-xanh-la .fam-parents { left: 44px; width: 250px; font-family: var(--f-cond); font-size: 16px; line-height: 24px; text-transform: uppercase; }
.t-xanh-la .fam-addr { left: 44px; width: 250px; font-family: var(--f-roboto); font-size: 14px; line-height: 20px; }
.t-xanh-la .fam-side--groom { top: 142px; }
.t-xanh-la .fam-parents--groom { top: 166px; }
.t-xanh-la .fam-addr--groom { top: 214px; }
.t-xanh-la .fam-side--bride { top: 262px; }
.t-xanh-la .fam-parents--bride { top: 286px; }
.t-xanh-la .fam-addr--bride { top: 334px; }
.t-xanh-la .fam-news { left: 40px; top: 381px; width: 340px; font-family: var(--f-mightiest); font-size: 20px; line-height: 30px; text-align: center; }
.t-xanh-la .fam-full { left: 12px; width: 397px; font-family: var(--f-ephesis); font-size: 40px; line-height: 60px; text-align: center; white-space: nowrap; }
.t-xanh-la .fam-full--groom { top: 416px; }
.t-xanh-la .fam-full--bride { top: 495px; }
.t-xanh-la .fam-amp { left: 151px; top: 464px; width: 118px; font-family: "EB Garamond", Georgia, serif; font-size: 26px; line-height: 39px; text-align: center; }
.t-xanh-la .fam-photo { left: 35px; top: 565px; width: 351px; height: 270px; border: 7px solid var(--moss); overflow: hidden; }
.t-xanh-la .fam-photo .ph { inset: 0; }

/* ---------- 3. trân trọng kính mời ---------- */
.t-xanh-la .s-invite-xl { height: 261px; }
.t-xanh-la .ixl-title { left: 58px; top: 11px; width: 304px; font-family: var(--f-mightiest); font-size: 25px; line-height: 37.5px; font-style: italic; text-align: center; }
.t-xanh-la .ixl-photo { width: 116px; height: 165px; border: 3px solid var(--moss); overflow: hidden; }
.t-xanh-la .ixl-photo .ph { inset: 0; }
.t-xanh-la .ixl-photo--0 { left: 25px; top: 85px; }
.t-xanh-la .ixl-photo--1 { left: 153px; top: 60px; }
.t-xanh-la .ixl-photo--2 { left: 280px; top: 85px; }

/* ---------- 4. lễ thành hôn ---------- */
.t-xanh-la .s-ceremony-xl { height: 234px; font-family: Arial, var(--f-roboto); }
.t-xanh-la .s-ceremony-xl p { text-align: center; letter-spacing: 1px; }
.t-xanh-la .cxl-title { left: 0; top: 26px; width: 420px; font-size: 19px; line-height: 28.5px; font-weight: 700; text-transform: uppercase; }
.t-xanh-la .cxl-at { left: 0; top: 69px; width: 420px; font-size: 14px; line-height: 21px; }
.t-xanh-la .cxl-month { left: -13px; top: 110px; width: 185px; font-size: 14px; line-height: 21px; font-weight: 700; }
.t-xanh-la .cxl-year { left: 249px; top: 110px; width: 185px; font-size: 14px; line-height: 21px; font-weight: 700; }
.t-xanh-la .cxl-bar { top: 102px; width: 2px; height: 34px; background: rgb(83, 96, 119); }
.t-xanh-la .cxl-bar--l { left: 142px; }
.t-xanh-la .cxl-bar--r { left: 276px; }
.t-xanh-la .cxl-day { left: 117px; top: 90px; width: 185px; font-family: var(--f-ephesis); font-size: 42px; line-height: 63px; font-weight: 700; }
.t-xanh-la .cxl-lunar { left: 0; top: 153px; width: 420px; font-size: 14px; line-height: 21px; font-style: italic; }
.t-xanh-la .cxl-place { left: 0; top: 182px; width: 420px; font-size: 17px; line-height: 25.5px; letter-spacing: 0 !important; }

/* ---------- 5. tiệc (ghi đè phần chung) ---------- */
.t-xanh-la .s-party { height: 282px; }
.t-xanh-la .party-box { left: 26px; top: 30px; width: 368px; height: 211px; border-color: var(--moss); background: rgba(241, 243, 224, .3); }
.t-xanh-la .party-title { top: 55px; font-size: 20px; line-height: 30px; }
.t-xanh-la .party-time { top: 87px; font-size: 18px; line-height: 27px; }
.t-xanh-la .party-date { top: 116px; font-size: 21px; line-height: 31.5px; }
.t-xanh-la .party-lunar { top: 158px; font-size: 14px; line-height: 21px; }
.t-xanh-la .party-venue { top: 191px; font-size: 17px; line-height: 25.5px; }

/* ---------- 6. lịch (ghi đè phần chung) ---------- */
.t-xanh-la .s-calendar { height: 386px; }
.t-xanh-la .cal-head, .t-xanh-la .cal-month { left: 25px; font-family: "Kaisei Decol", var(--f-serif); }
.t-xanh-la .cal-grid { left: 25px; background: #ededef; }
.t-xanh-la .cal-row--head { background: var(--moss); }
.t-xanh-la .cal-row--head span { color: #fff; }
.t-xanh-la .cal-flourish { display: none; }

/* ---------- 7. địa điểm ---------- */
.t-xanh-la .s-venue-xl { height: 437px; }
.t-xanh-la .vxl-bar { left: 0; top: 0; width: 420px; height: 48px; background: var(--moss); }
.t-xanh-la .vxl-bar > * { position: absolute; }
.t-xanh-la .vxl-pin { left: 8px; top: 2px; width: 42px; height: 42px; }
.t-xanh-la .vxl-title { left: 12px; top: 3px; width: 395px; font-family: var(--f-mightiest); font-size: 26px; line-height: 39px; color: #fff; text-align: center; }
.t-xanh-la .vxl-name { left: 0; top: 60px; width: 420px; font-family: var(--f-barlow); font-size: 17px; line-height: 25.5px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-xanh-la .vxl-addr { left: 30px; top: 90px; width: 360px; font-family: var(--f-barlow); font-size: 14px; line-height: 21px; letter-spacing: 1px; text-align: center; }
.t-xanh-la .vxl-btn {
  left: 140px; top: 145px; width: 140px; height: 32px;
  display: grid; place-items: center;
  border-radius: 42px; background: var(--moss); box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: Arial, sans-serif; font-size: 15px; color: #fff; text-decoration: none;
}
.t-xanh-la .vxl-map { left: 33px; top: 192px; width: 355px; height: 235px; background: var(--moss); overflow: hidden; }
.t-xanh-la .vxl-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- 8. xác nhận tham dự ---------- */
.t-xanh-la .s-rsvp-xl { height: 441px; background: var(--sage); }
.t-xanh-la .rxl-title { left: 58px; top: 10px; width: 304px; font-family: var(--f-mightiest); font-size: 25px; line-height: 25px; text-align: center; }
.t-xanh-la .rxl-form { left: 38px; top: 101px; width: 336px; display: grid; gap: 12px; }
.t-xanh-la .rxl-form input:not(.vela-hp), .t-xanh-la .rxl-form select {
  width: 100%; height: 40px; padding: 0 12px;
  border: 2px solid var(--moss); border-radius: 0;
  background: #fff;
  font-family: var(--f-roboto); font-size: 14px; color: #111;
}
.t-xanh-la .rxl-form select:invalid { color: #757575; }
.t-xanh-la .rxl-form button {
  height: 40px; border: 0; background: var(--moss); box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: #fff; text-transform: uppercase;
}
.t-xanh-la .rxl-msg { min-height: 0; font-family: var(--f-roboto); font-size: 14px; text-align: center; }
.t-xanh-la .rxl-msg:empty { display: none; }
.t-xanh-la .rxl-gift {
  left: 99px; top: 380px; width: 214px; height: 40px;
  border: 0; border-radius: 9px; background: var(--moss); box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: #fff; text-transform: uppercase;
}

/* ---------- 9. album ---------- */
.t-xanh-la .s-album-xl { padding: 54px 18px 3px; }
.t-xanh-la .s-album-xl > .axl-grid { position: static; }
.t-xanh-la .axl-title { left: 0; top: 2px; width: 193px; font-family: var(--f-ephesis); font-size: 32px; line-height: 48px; text-align: center; }
.t-xanh-la .axl-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1px; column-gap: 3px; }
.t-xanh-la .axl-item { overflow: hidden; background: #eee; }
.t-xanh-la .axl-item img { width: 100%; height: 100%; object-fit: cover; }
.t-xanh-la .axl-item--tall { grid-column: span 3; grid-row: span 286; width: 187px; height: 280px; }
.t-xanh-la .axl-item--tall[data-anim="fade-in-right"] { justify-self: end; }
.t-xanh-la .axl-item--third { grid-column: span 2; grid-row: span 199; height: 189px; }
.t-xanh-la .axl-item--half { grid-column: span 3; grid-row: span 143; width: 187px; height: 121px; justify-self: end; align-self: center; }

/* ---------- 10. cảm ơn ---------- */
.t-xanh-la .s-closing-xl { height: 631px; overflow: hidden; }
.t-xanh-la .s-closing-xl .closing-photo { left: 0; top: 0; width: 420px; height: 631px; }
.t-xanh-la .kxl-band { left: -17px; top: 365px; width: 453px; height: 147px; background: rgba(57, 71, 58, .3); }
.t-xanh-la .kxl-thanks { left: -8px; top: 318px; width: 435px; font-family: var(--f-amstirdam); font-size: 128px; line-height: 150px; letter-spacing: -2px; color: #fff; text-align: center; }
.t-xanh-la .kxl-swash { left: 0; top: 380px; width: 420px; height: 40px; }
.t-xanh-la .kxl-sub { left: -30px; top: 439px; width: 480px; font-family: var(--f-azkia); font-size: 38px; line-height: 57px; color: #fff; text-align: center; }