/* Mẫu Thêu Hoa — tranh thêu chữ thập trên vải kem, dây hoa hồng đỏ lá xanh, chữ pixel. Không cần ảnh cưới.
   Hình thêu vẽ từ bản đồ điểm trong scripts/theu-hoa-px.mjs. Bố cục chảy dọc (khung 420px). */

.t-theu-hoa {
  --red: #c8283c;
  --red-deep: #8c1c2c;
  --green: #23452e;
  --cloth: #f6eedd;
  --f-px: "VT323", monospace;
  --f-mono: "Space Mono", monospace;
  --f-script: "VT323", monospace;
  --gate-bg: #f6eedd;
  --gate-ink: #23452e;
  --accent-strong: #c8283c;
  /* góc bậc thang kiểu pixel */
  --px-corner: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
  color: var(--green);
  font-family: var(--f-mono);
}
/* vải thêu aida: lưới ô nhỏ */
.t-theu-hoa .vela-frame {
  background:
    repeating-linear-gradient(0deg, rgba(120, 90, 50, .06) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(120, 90, 50, .06) 0 1px, transparent 1px 5px),
    var(--cloth);
}
.t-theu-hoa .vela-gate__names, .t-theu-hoa .vela-gate__guest { font-family: var(--f-px); color: var(--red); }
.t-theu-hoa .vela-gate__label, .t-theu-hoa .vela-gate__date { font-family: var(--f-mono); }
.t-theu-hoa .vela-gate__open { background: var(--red); color: #fff; font-family: var(--f-mono); font-weight: 700; border-radius: 0; clip-path: var(--px-corner); }

.t-theu-hoa .s { position: relative; width: 420px; text-align: center; }
.t-theu-hoa .px { display: block; image-rendering: pixelated; }
.t-theu-hoa .title {
  font-family: var(--f-px); font-size: 40px; line-height: 1; letter-spacing: 2px; text-transform: uppercase;
  color: var(--green); text-shadow: 1px 0 currentColor;
}
.t-theu-hoa .label { font-family: var(--f-mono); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.t-theu-hoa .divider { width: 250px; margin: 0 auto; }
.t-theu-hoa .divider--small { width: 150px; margin-top: 24px; }

.t-theu-hoa .btn {
  display: inline-block; margin-top: 16px; padding: 10px 26px; border: 0;
  background: var(--red); color: #fff; clip-path: var(--px-corner);
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--red-deep);
}
.t-theu-hoa .btn--ghost { background: var(--green); box-shadow: inset 0 -3px 0 #122a1b; }

/* ---------- 1. bìa ---------- */
.t-theu-hoa .s-hero { height: 820px; padding-top: 10px; }
.t-theu-hoa .vine { position: absolute; top: 58px; bottom: 60px; width: 36px; background: url("/t/theu-hoa/px/vine.svg") 0 0 / 36px 72px repeat-y; }
.t-theu-hoa .vine--l { left: 16px; }
.t-theu-hoa .vine--r { right: 16px; transform: scaleX(-1); }
.t-theu-hoa .hero-garland { width: 300px; margin: 12px auto 0; }
.t-theu-hoa .hero-names { margin-top: 40px; font-family: var(--f-px); font-size: 58px; line-height: .95; color: var(--green); text-shadow: 1.5px 0 currentColor; }
.t-theu-hoa .hero-names span { display: block; white-space: nowrap; }
.t-theu-hoa .hero-names small { display: block; font-size: 28px; line-height: 1.1; color: var(--red); text-shadow: none; }
.t-theu-hoa .hero-couple { position: relative; width: 320px; margin: 30px auto 0; }
.t-theu-hoa .hero-couple__img { width: 216px; margin: 0 auto; }
.t-theu-hoa .hero-heart { position: absolute; top: 170px; width: 28px; }
.t-theu-hoa .hero-heart--l { left: 14px; }
.t-theu-hoa .hero-heart--r { right: 14px; }
.t-theu-hoa .hero-sub { margin-top: 26px; font-family: var(--f-px); font-size: 30px; line-height: 1; color: var(--green); text-shadow: 1px 0 currentColor; }
.t-theu-hoa .hero-rose { position: absolute; bottom: 20px; width: 56px; }
.t-theu-hoa .hero-rose--l { left: 12px; }
.t-theu-hoa .hero-rose--r { right: 12px; }

/* ---------- 2. ngày cưới ---------- */
.t-theu-hoa .s-date { padding: 36px 30px 30px; }
.t-theu-hoa .big-date { font-family: var(--f-px); font-size: 64px; line-height: 1; letter-spacing: 2px; color: var(--red); text-shadow: 1.5px 0 currentColor; }
.t-theu-hoa .date-sub { margin-top: 6px; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.t-theu-hoa .date-lunar { margin: 4px 0 20px; font-size: 12px; opacity: .75; }
.t-theu-hoa .quote { margin-top: 20px; font-size: 13px; line-height: 1.7; }

/* ---------- 3. hai gia đình ---------- */
.t-theu-hoa .s-family { padding: 20px 20px 40px; }
.t-theu-hoa .fam-cols { display: flex; gap: 12px; }
.t-theu-hoa .fam-col { flex: 1; }
.t-theu-hoa .fam-col .label { margin-bottom: 6px; }
.t-theu-hoa .fam-parent { font-size: 13px; line-height: 1.7; }
.t-theu-hoa .fam-addr { margin-top: 4px; font-size: 11px; opacity: .7; }
.t-theu-hoa .fam-lead { margin-top: 30px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.t-theu-hoa .fam-full { margin-top: 8px; font-family: var(--f-px); font-size: 42px; line-height: 1; color: var(--red); text-shadow: 1.5px 0 currentColor; white-space: nowrap; }
.t-theu-hoa .fam-heart { width: 24px; margin: 10px auto 0; }
.t-theu-hoa .guest-line { margin-top: 30px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.t-theu-hoa .guest-line b { display: block; margin-top: 4px; font-family: var(--f-px); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--green); text-shadow: 1.5px 0 currentColor; }
.t-theu-hoa .guest-sub { margin-top: 4px; font-size: 12px; opacity: .8; }

/* ---------- 4. lịch trình ---------- */
.t-theu-hoa .s-program { padding: 10px 0 30px; }
.t-theu-hoa .s-program .title { margin-top: 18px; }
.t-theu-hoa .prog { list-style: none; width: 280px; margin: 22px auto 24px; padding: 0; }
.t-theu-hoa .prog li { display: flex; align-items: center; gap: 22px; padding: 10px 0; text-align: left; }
.t-theu-hoa .prog img { width: 58px; }
.t-theu-hoa .prog b { display: block; font-family: var(--f-px); font-weight: 400; font-size: 30px; line-height: 1; text-shadow: 1px 0 currentColor; }
.t-theu-hoa .prog span { display: block; margin-top: 2px; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }

/* ---------- 5. lễ & tiệc ---------- */
.t-theu-hoa .s-events { padding: 10px 0 30px; }
.t-theu-hoa .event {
  margin: 0 34px 22px; padding: 22px 16px 24px;
  background: rgba(255, 253, 248, .75); clip-path: var(--px-corner);
  box-shadow: inset 0 0 0 2px rgba(200, 40, 60, .5);
}
.t-theu-hoa .event-icon { width: 40px; margin: 14px auto 6px; }
.t-theu-hoa .event-icon--pin { width: 34px; margin-top: 18px; }
.t-theu-hoa .event-time { font-family: var(--f-px); font-size: 28px; line-height: 1; text-shadow: 1px 0 currentColor; }
.t-theu-hoa .event-date { margin-top: 4px; font-family: var(--f-px); font-size: 40px; line-height: 1; color: var(--red); text-shadow: 1.5px 0 currentColor; }
.t-theu-hoa .event-lunar { margin-top: 4px; font-size: 11px; opacity: .75; }
.t-theu-hoa .event-place { margin-top: 8px; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.t-theu-hoa .event-addr { margin-top: 4px; font-size: 12px; line-height: 1.5; }
.t-theu-hoa .vela-events { padding: 0 34px; }
.t-theu-hoa .vela-event { margin-bottom: 22px; background: rgba(255, 253, 248, .75); border: 2px solid rgba(200, 40, 60, .5); border-radius: 0; font-family: var(--f-mono); }

/* ---------- 6. lịch ---------- */
.t-theu-hoa .s-calendar { padding: 10px 0 40px; }
.t-theu-hoa .cal-box { width: 330px; margin: 0 auto; padding: 22px 14px; background: var(--green); color: #fff; clip-path: var(--px-corner); }
.t-theu-hoa .cal-box .title { color: #fff; font-size: 34px; }
.t-theu-hoa .cal-grid { margin-top: 12px; }
.t-theu-hoa .cal-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-theu-hoa .cal-row span { position: relative; z-index: 0; height: 34px; line-height: 34px; font-family: var(--f-px); font-size: 22px; }
.t-theu-hoa .cal-row--head span { font-family: var(--f-mono); font-size: 11px; font-weight: 700; opacity: .75; }
.t-theu-hoa .cal-row .is-day { color: #fff; }
.t-theu-hoa .cal-row .is-day::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 32px; height: 29px; margin: -15px 0 0 -16px;
  background: url("/t/theu-hoa/px/heart.svg") center / contain no-repeat;
}
.t-theu-hoa .countdown { display: flex; justify-content: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 2px dashed rgba(255, 255, 255, .35); }
.t-theu-hoa .countdown p { width: 64px; }
.t-theu-hoa .countdown b { display: block; font-family: var(--f-px); font-weight: 400; font-size: 36px; line-height: 1; }
.t-theu-hoa .countdown span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }

/* ---------- 7. trang phục ---------- */
.t-theu-hoa .s-dress { padding: 10px 0 30px; }
.t-theu-hoa .dress-style { margin-top: 8px; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.t-theu-hoa .dress-art { display: flex; justify-content: center; align-items: flex-end; gap: 30px; margin: 22px 0 20px; }
.t-theu-hoa .dress-art img { width: 90px; }
.t-theu-hoa .swatches { display: flex; justify-content: center; gap: 8px; }
.t-theu-hoa .swatches span { width: 24px; height: 24px; clip-path: var(--px-corner); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }

/* ---------- 8. album ---------- */
.t-theu-hoa .s-album { padding: 10px 0 30px; }
.t-theu-hoa .album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 30px 0; }
.t-theu-hoa .album-item { aspect-ratio: 3 / 4; padding: 5px; background: #fffdf8; box-shadow: inset 0 0 0 2px rgba(200, 40, 60, .45); }
.t-theu-hoa .album-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 9. xác nhận ---------- */
.t-theu-hoa .s-rsvp { padding: 20px 34px 10px; }
.t-theu-hoa .rsvp-lead { margin-top: 8px; font-size: 12px; line-height: 1.6; }
.t-theu-hoa .rsvp-form { margin-top: 18px; text-align: left; }
.t-theu-hoa .rsvp-form label { display: block; margin-bottom: 12px; }
.t-theu-hoa .rsvp-form label > span { display: block; margin-bottom: 4px; font-weight: 700; font-size: 12px; }
.t-theu-hoa .rsvp-form input:not(.vela-hp), .t-theu-hoa .rsvp-form select, .t-theu-hoa .rsvp-form textarea {
  width: 100%; padding: 9px 10px; border: 2px solid var(--green); border-radius: 0; background: #fffdf8;
  font: 14px var(--f-mono); color: var(--green);
}
.t-theu-hoa .rsvp-form .btn { display: block; margin: 16px auto 0; }
.t-theu-hoa .rsvp-msg { min-height: 20px; margin-top: 10px; font-size: 12px; text-align: center; color: var(--red); }
.t-theu-hoa .s-gift { padding-bottom: 20px; }

/* ---------- 10. kết ---------- */
.t-theu-hoa .s-closing { padding: 20px 20px 50px; }
.t-theu-hoa .closing-big { margin-top: 20px; font-family: var(--f-px); font-size: 44px; line-height: 1; color: var(--red); text-shadow: 1.5px 0 currentColor; }
.t-theu-hoa .closing-text { margin-top: 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.t-theu-hoa .closing-heart { width: 30px; margin: 16px auto 8px; }
.t-theu-hoa .closing-names { font-family: var(--f-px); font-size: 34px; line-height: 1; text-shadow: 1px 0 currentColor; }
.t-theu-hoa .closing-date { margin-top: 4px; font-size: 13px; letter-spacing: 3px; }
.t-theu-hoa .vela-credit { background: var(--green); color: #fff; }