/* Mẫu Vàng Xanh — nền kem, dải giấy xé xanh rêu, form xác nhận ngay trong trang. Vị trí đo theo bản gốc (khung 420px). */

.t-vang-xanh {
  --cream: #fffef0;
  --moss: #303c32;
  --ink: #181a17;
  --f-cond: "UTM Cafeta", "Oswald", sans-serif;
  --f-sign: "NVN Motherland Signature", "Pinyon Script", cursive;
  --f-mighty: "SVN-Mightiest", Georgia, serif;
  --f-amst: "SVN-Amstirdam", "Pinyon Script", cursive;
  --f-summer: "Summerfun", "Pinyon Script", cursive;
  --f-barlow: "Barlow", Arial, sans-serif;
  --f-roboto: "Roboto", Arial, sans-serif;
  --f-open: "Open Sans", Arial, sans-serif;
  --gate-bg: #fffef0;
  --gate-ink: #303c32;
  --accent-strong: #303c32;
}
.t-vang-xanh .vela-frame { background: var(--cream); }
.t-vang-xanh .s { position: relative; width: 420px; }
.t-vang-xanh .s > * { position: absolute; }

/* ---------- đường kẻ có tim ---------- */
.t-vang-xanh .vx-rule { left: 0; width: 420px; height: 20px; }
.t-vang-xanh .vx-rule > * { position: absolute; }
.t-vang-xanh .vx-rule span { top: 9px; width: 193px; height: 1.5px; background: var(--moss); }
.t-vang-xanh .vx-rule span:first-child { left: 0; }
.t-vang-xanh .vx-rule span:last-child { left: 227px; }
.t-vang-xanh .vx-rule svg { left: 200px; top: 0; width: 20px; height: 20px; fill: var(--moss); }
.t-vang-xanh .vx-rule--top { top: 9px; }
.t-vang-xanh .vx-rule--bottom { top: 772px; }
.t-vang-xanh .vx-hr { left: 92px; width: 236px; height: 1px; background: #555; }

/* ---------- 1. bìa ---------- */
.t-vang-xanh .s-hero { height: 804px; }
.t-vang-xanh .hero-photo { left: 0; top: 47px; width: 420px; height: 540px; }
.t-vang-xanh .hero-kicker { left: 83px; top: 623px; width: 254px; font-family: var(--f-barlow); font-size: 20px; line-height: 30px; color: var(--moss); text-align: center; text-transform: uppercase; }
.t-vang-xanh .hero-names { left: 5px; top: 683px; width: 410px; font-family: var(--f-sign); font-size: 20px; line-height: 30px; letter-spacing: 3px; text-align: center; white-space: nowrap; }

/* ---------- 2. dải nút nhanh + hai gia đình ---------- */
.t-vang-xanh .s-family { height: 693px; }
.t-vang-xanh .vx-torn { left: 0; width: 420px; fill: var(--moss); }
.t-vang-xanh .vx-torn--nav { top: 0; height: 168px; }
.t-vang-xanh .vx-quick { top: 41px; width: 78px; height: 92px; color: var(--cream); text-decoration: none; }
.t-vang-xanh .vx-quick--time { left: 32px; }
.t-vang-xanh .vx-quick--place { left: 171px; }
.t-vang-xanh .vx-quick--rsvp { left: 320px; }
.t-vang-xanh .vx-quick__ico { position: absolute; left: 10px; top: 0; width: 59px; height: 59px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); }
.t-vang-xanh .vx-quick__ico svg { width: 32px; height: 32px; fill: none; stroke: var(--moss); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-vang-xanh .vx-quick__label { position: absolute; left: 0; top: 68px; width: 78px; font-family: var(--f-cond); font-size: 16px; line-height: 24px; text-align: center; white-space: nowrap; }
.t-vang-xanh .fam-side, .t-vang-xanh .fam-parents { width: 200px; font-family: var(--f-cond); font-size: 16px; line-height: 24px; color: var(--ink); text-transform: uppercase; }
.t-vang-xanh .fam-side { color: rgba(24, 26, 23, .77); text-decoration: underline; text-underline-offset: 3px; }
.t-vang-xanh .fam-addr { width: 242px; font-family: var(--f-roboto); font-size: 13px; line-height: 19.5px; }
.t-vang-xanh .fam-side--groom, .t-vang-xanh .fam-parents--groom { left: -9px; text-align: right; }
.t-vang-xanh .fam-addr--groom { left: -51px; text-align: right; }
.t-vang-xanh .fam-side--bride, .t-vang-xanh .fam-parents--bride, .t-vang-xanh .fam-addr--bride { left: 230px; text-align: left; }
.t-vang-xanh .fam-side { top: 227px; }
.t-vang-xanh .fam-parents { top: 251px; }
.t-vang-xanh .fam-addr { top: 299px; }
.t-vang-xanh .fam-bar { left: 210px; top: 220px; width: 1px; height: 112px; background: var(--ink); }
.t-vang-xanh .fam-kicker { left: 40px; top: 351px; width: 340px; font-family: var(--f-mighty); font-size: 20px; line-height: 30px; color: var(--ink); text-align: center; white-space: nowrap; }
.t-vang-xanh .fam-photo { left: 0; top: 387px; width: 419px; height: 279px; }
.t-vang-xanh .fam-fade { left: 0; top: 541px; width: 420px; height: 128px; background: linear-gradient(rgba(255, 254, 240, 0), var(--cream) 85%); }
.t-vang-xanh .fam-names { left: 5px; top: 624px; width: 410px; font-family: var(--f-sign); font-size: 22px; line-height: 33px; color: var(--ink); text-align: center; white-space: nowrap; }
.t-vang-xanh .vx-leaf { width: 182px; height: 182px; }
.t-vang-xanh .vx-leaf--right { left: 329px; top: 612px; z-index: 1; }
.t-vang-xanh .vx-leaf--left { left: -60px; top: 241px; width: 198px; height: 198px; transform: scaleX(-1); }

/* ---------- 3. lễ + tiệc ---------- */
.t-vang-xanh .s-events { height: 420px; font-family: Arial, sans-serif; }
.t-vang-xanh .s-events p { left: 23px; width: 375px; text-align: center; }
.t-vang-xanh .ev-title { left: 0 !important; width: 420px !important; font-family: var(--f-cond); font-size: 23px; line-height: 34.5px; text-transform: uppercase; }
.t-vang-xanh .ev-line { font-size: 15px; line-height: 22.5px; letter-spacing: 1px; }
.t-vang-xanh .ev-lunar { font-size: 13px; line-height: 19.5px; letter-spacing: 1px; font-style: italic; color: rgba(0, 0, 0, .5); }
.t-vang-xanh .ev-title--cer { top: 10px; }
.t-vang-xanh .ev-time--cer { top: 71px; }
.t-vang-xanh .ev-date--cer { top: 102px; }
.t-vang-xanh .ev-lunar--cer { top: 134px; }
.t-vang-xanh .ev-place--cer { top: 161px; left: 11px !important; width: 399px !important; }
.t-vang-xanh .ev-rule { left: 92px; top: 203px; width: 236px; height: 1px; background: #333; }
.t-vang-xanh .ev-title--party { top: 224px; }
.t-vang-xanh .ev-time--party { top: 285px; }
.t-vang-xanh .ev-date--party { top: 316px; }
.t-vang-xanh .ev-lunar--party { top: 348px; }
.t-vang-xanh .ev-place--party { top: 376px; left: 11px !important; width: 399px !important; }

/* ---------- 4. lịch ---------- */
.t-vang-xanh .s-calendar { height: 272px; }
.t-vang-xanh .cal-band { left: -1px; top: 17px; width: 422px; height: 221px; background: var(--moss); }
.t-vang-xanh .cal-big { left: 5px; top: 57px; width: 60px; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 40px; line-height: 44px; color: #fff; }
.t-vang-xanh .cal-grid { left: 175px; top: 33px; width: 240px; font-family: var(--f-open); font-size: 10px; color: #fff; }
.t-vang-xanh .cal-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-vang-xanh .cal-row span { position: relative; display: grid; place-items: center; height: 32px; }
.t-vang-xanh .cal-row--head { margin-bottom: 7px; }
.t-vang-xanh .cal-row--head span { height: 15px; font-weight: 700; }
.t-vang-xanh .cal-row .is-sun { font-weight: 700; }
.t-vang-xanh .cal-heart { position: absolute; left: 50%; top: 50%; width: 32px; height: 30px; margin: -15px 0 0 -16px; animation: vela-heart 4s ease-in-out infinite; }

/* ---------- 5. địa điểm ---------- */
.t-vang-xanh .s-venue { height: 458px; }
.t-vang-xanh .vx-hr--venue { top: 8px; }
.t-vang-xanh .venue-title { left: 99px; top: 33px; width: 222px; font-family: var(--f-cond); font-size: 25px; line-height: 37.5px; text-align: center; text-transform: uppercase; }
.t-vang-xanh .venue-name { left: 12px; top: 82px; width: 396px; font-family: var(--f-barlow); font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.t-vang-xanh .venue-addr { left: 0; top: 111px; width: 420px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; letter-spacing: 1px; text-align: center; }
.t-vang-xanh .venue-map { left: 20px; top: 150px; width: 380px; height: 222px; border: 0; }
.t-vang-xanh .venue-btn {
  left: 100px; top: 389px; width: 222px; height: 29px;
  display: grid; place-items: center;
  border-radius: 6px; background: var(--moss); 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-vang-xanh .s-rsvp { height: 530px; }
.t-vang-xanh .vx-torn--rsvp { top: 16px; height: 494px; }
.t-vang-xanh .rsvp-title { left: 110px; top: 61px; width: 200px; font-family: var(--f-cond); font-size: 25px; line-height: 37.5px; color: var(--cream); text-align: center; text-transform: uppercase; }
.t-vang-xanh .rsvp-form { left: 21px; top: 118px; width: 377px; }
.t-vang-xanh .rsvp-field {
  display: block; width: 377px; height: 39px; margin-bottom: 12px; padding: 0 10px;
  border: 2px solid #39473a; border-radius: 0; background: #fff;
  font-family: var(--f-roboto); font-size: 14px; color: #111;
  -webkit-appearance: none; appearance: none;
}
.t-vang-xanh .rsvp-field::placeholder { color: #8a8a8a; }
.t-vang-xanh .rsvp-select { position: relative; display: block; margin-top: -2px; }
.t-vang-xanh .rsvp-select select:invalid { color: #8a8a8a; }
.t-vang-xanh .rsvp-select::after {
  content: ""; position: absolute; right: 16px; top: 12px;
  width: 8px; height: 8px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(45deg);
  pointer-events: none;
}
.t-vang-xanh .rsvp-send {
  display: block; width: 209px; height: 40px; margin: 17px 0 0 84px;
  border: 0; background: var(--cream); box-shadow: 0 4px 8px rgba(0, 0, 0, .35);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: rgba(24, 26, 23, .77); text-transform: uppercase;
}
.t-vang-xanh .rsvp-send:disabled { opacity: .6; }
.t-vang-xanh .rsvp-msg { position: absolute; left: 0; top: 262px; width: 377px; font-family: var(--f-roboto); font-size: 13px; color: var(--cream); text-align: center; }
.t-vang-xanh .rsvp-sep { left: 147px; top: 384px; width: 126px; height: 1px; background: var(--cream); }
.t-vang-xanh .rsvp-gift {
  left: 123px; top: 404px; width: 175px; height: 40px;
  border: 2px solid #fff; background: var(--moss);
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; color: var(--cream); text-transform: uppercase;
}

/* ---------- 7. album ---------- */
.t-vang-xanh .s-album { padding: 80px 10px 7px 11px; }
.t-vang-xanh .vx-hr--album { top: 17px; }
.t-vang-xanh .album-title { left: 110px; top: 26px; width: 200px; font-family: var(--f-cond); font-size: 27px; line-height: 40.5px; text-align: center; text-transform: uppercase; }
.t-vang-xanh .s-album > .album-grid { position: static; }
.t-vang-xanh .album-grid { display: grid; grid-template-columns: 196px 196px; gap: 7px; }
.t-vang-xanh .album-item { overflow: hidden; background: #eee; }
.t-vang-xanh .album-item img { width: 100%; height: 100%; object-fit: cover; }
.t-vang-xanh .album-item--wide { grid-column: span 2; width: 401px; height: 225px; margin: 0 0 3px -1px; }
.t-vang-xanh .album-item--sq { height: 195px; }
.t-vang-xanh .album-item--tall { height: 293px; }
.t-vang-xanh .album-quote {
  grid-column: span 2; height: 98px; padding-top: 12px; margin: 0 -11px 0 -14px;
  font-family: var(--f-amst); font-size: 30px; line-height: 30px; text-align: center;
}

/* ---------- 8. kết ---------- */
.t-vang-xanh .s-closing { height: 609px; }
.t-vang-xanh .closing-photo { left: 9px; top: 0; width: 405px; height: 609px; }
.t-vang-xanh .closing-fade { left: 0; top: 454px; width: 422px; height: 155px; background: linear-gradient(rgba(255, 254, 240, 0), var(--cream)); }
.t-vang-xanh .s-thanks { height: 183px; }
.t-vang-xanh .thanks-sub { left: -3px; top: 20px; width: 427px; font-family: var(--f-mighty); font-size: 25px; line-height: 25px; text-align: center; }
.t-vang-xanh .thanks-big { left: 85px; top: 95px; width: 242px; font-family: var(--f-summer); font-size: 40px; line-height: 40px; text-align: center; }

.t-vang-xanh .s-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; background: #fff;
  font-family: var(--f-roboto); font-size: 14px; color: #444;
}
.t-vang-xanh .footer-heart { color: #e5484d; font-size: 18px; }