/* Mẫu 4 · Mùa Phượng: đỏ phượng + xanh lá, nền kem ấm, Dancing Script + Lora, hình vòm */
:root {
  --font-serif-display: 'Lora', Georgia, serif;
  --font-serif-heading: 'Lora', Georgia, serif;
  --font-serif-body: 'Lora', Georgia, serif;
  --font-number: 'Lora', Georgia, serif;
  --font-script: 'Dancing Script', cursive;
  --lb-navy: #b3341c; --lb-navy-deep: #8a2412; --lb-ink: #3a2a22; --lb-sub: #5a4135; --lb-muted: #7a5446; --lb-sky: #cfe3d2;
  --lb-page: #fff7ee; --lb-surface: #fffdf9; --lb-line: #e2c6b4; --lb-ruling: #fff7ee; --lb-photo: #f3e2d3; --lb-tape: transparent;
  --lb-on-accent: #fff7ee; --lb-on-dark: #fff7ee; --lb-on-dark-2: #cfe3d2;
  --green: #2f5d3a; --pink: #ffd9c7;
  --ink: var(--lb-ink); --navy: var(--lb-navy); --gold: var(--lb-navy); --gold-light: var(--pink); --silk-gradient: var(--lb-page);
}


body, body.cover-visible, body:not(.cover-visible) { background: var(--lb-ruling); color: var(--lb-ink); font-family: var(--font-serif-body); }
@media (min-width: 720px) { body:not(.cover-visible) { background: var(--lb-ruling); } }
a { color: var(--lb-navy); }
a:hover { color: var(--lb-navy-deep); }
button:focus-visible, a:focus-visible, [tabindex='0']:focus-visible { outline: 2px solid var(--lb-navy); outline-offset: 4px; }

.invitation { background: var(--lb-page); box-shadow: 0 0 40px rgba(30, 58, 138, .14); }

/* ---------- Giấy kẻ ngang và các trang trắng ---------- */
.hero, .countdown-section, .dress-code, .rsvp, .guestbook {
  background-color: var(--lb-on-accent);
  background-image:
    linear-gradient(90deg, transparent 30px, rgba(217, 83, 79, .4) 30px, rgba(217, 83, 79, .4) 31.5px, transparent 31.5px),
    repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--lb-ruling) 31px, var(--lb-ruling) 32px);
}
.details, .about, .timeline { background: var(--lb-surface); border-top: 1.5px dashed var(--lb-line); }
.invitation .hero.section-pad,
.invitation .countdown-section.section-pad,
.invitation .dress-code.section-pad,
.invitation .rsvp.section-pad,
.invitation .guestbook.section-pad { padding: 64px 24px 64px 48px; }
.invitation .details.section-pad,
.invitation .about.section-pad,
.invitation .timeline.section-pad { padding: 64px 28px; }
.invitation .guestbook.section-pad { padding-top: 24px; padding-bottom: 56px; }
.invitation .dress-code.section-pad { padding-bottom: 56px; }

/* Bỏ trang trí cũ: hoa, kim cương, đường vàng, dải ruy băng */
.mini-ornament, .ornament, .gold-line-divider, .organize-header .floral-branch, .academic-ribbon,
.hero__cap, .details__cap, .guestbook-cap, .details__closing-heart, .cover__book-rule, .cover__book-bottom, .cover__cap { display: none; }

/* ---------- Kiểu chữ chung ---------- */
.invitation .section-title {
  margin: 0;
  font: 400 42px/1.05 var(--font-script);
  text-transform: none;
  letter-spacing: 0;
  color: var(--lb-navy);
  text-align: center;
}
.invitation .section-kicker, .countdown-kicker {
  margin: 6px 0 0;
  font: 600 11px/1.5 var(--font-serif-body);
  letter-spacing: .06em;
  text-transform: none;
  color: var(--lb-muted);
  text-align: center;
}
.invitation .rsvp > p { font: 400 14px/1.6 var(--font-serif-body); letter-spacing: 0; text-transform: none; color: var(--lb-sub); margin: 14px auto 18px; }
.script { color: var(--lb-navy); }
blockquote { font: 400 23px/1.35 var(--font-script); color: var(--lb-ink); font-style: normal; }

/* ---------- Bìa: vở lưu bút ---------- */
.cover { background-color: var(--lb-navy); background-image: none; color: var(--lb-on-dark); }
.cover__frame { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(100%, 360px); }
.cover__eyebrow { margin: 0; font: 600 11px/1.5 var(--font-serif-body); letter-spacing: .06em; color: var(--lb-on-dark-2); }
.cover__icon { width: 64px; height: 64px; color: var(--lb-on-dark); }
.cover__book {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: var(--lb-page);
  color: var(--lb-ink);
  box-shadow: 0 14px 30px rgba(8, 20, 60, .35);
  text-align: left;
  rotate: -1.5deg;
  transform-origin: center;
}
.cover__book-border { inset: 10px; border: 1.5px solid var(--lb-navy); border-radius: 9px; }
.cover__book-border::after { display: none; }
.cover__book > :not(.cover__book-border) { position: relative; }
.cover__book-title { display: block; margin: 0; padding: 32px 30px 0; font: 400 44px/1 var(--font-script); color: var(--lb-navy); text-align: center; text-shadow: none; }
.cover__book-subtitle { display: block; margin: 14px 0 0; font: 600 11px/1.5 var(--font-serif-body); letter-spacing: .06em; text-transform: none; color: var(--lb-muted); text-align: center; }
.cover__field { display: flex; gap: 10px; align-items: baseline; margin: 14px 30px 0; padding-bottom: 2px; border-bottom: 1.5px dotted #8a93a8; }
.cover__book-subtitle + .cover__field { margin-top: 22px; }
.cover__field:last-child { margin-bottom: 30px; }
.cover__field small { flex: none; font: 400 12px/1.4 var(--font-serif-body); color: var(--lb-muted); }
.cover__field b { min-width: 0; font: 400 24px/1.25 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--lb-navy); overflow-wrap: anywhere; }
.open-button {
  min-width: 0;
  min-height: 52px;
  margin: 8px 0 0;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--lb-page);
  color: var(--lb-navy);
  box-shadow: none;
  font: 600 15px/1 var(--font-serif-body);
}
.open-button:hover { background: var(--lb-surface); }
.cover.is-opening .cover__book { transform: rotateY(-38deg); }

/* ---------- Trang đầu ---------- */
.hero { text-align: center; }
.hero__icon { display: block; width: 44px; height: 44px; margin: 0 auto 18px; color: var(--lb-navy); }
.hero__title { margin: 0 auto; font: 400 56px/1 var(--font-script); text-transform: none; letter-spacing: 0; color: var(--lb-navy); }
.hero__subtitle { margin: 18px auto 0; padding: 0; font: 600 11px/1.5 var(--font-serif-body); letter-spacing: .06em; text-transform: none; color: var(--lb-muted); }
.portrait-composition {
  position: relative;
  width: 240px;
  max-width: 100%;
  margin: 36px auto 10px;
  padding: 10px 10px 48px;
  background: var(--lb-surface);
  box-shadow: 0 8px 20px rgba(30, 58, 138, .15);
  transform: rotate(-2deg);
}
.portrait-composition::before { content: ''; position: absolute; top: -12px; left: 72px; width: 96px; height: 26px; background: var(--lb-tape); transform: rotate(4deg); z-index: 2; }
.portrait-wrap { width: 100%; height: auto; aspect-ratio: 220 / 252; margin: 0; border: 0; border-radius: 0; background: var(--lb-photo); box-shadow: none; }
.portrait { width: 100%; height: 100%; object-fit: cover; }
.hero .portrait-note { position: absolute; left: 0; right: 0; bottom: 10px; top: auto; width: auto; margin: 0; font: 400 22px/1.2 var(--font-script); color: var(--lb-navy); transform: none; }
.hero .host-name { max-width: 100%; margin: 28px auto 0; font: 400 48px/1.05 var(--font-script); color: var(--lb-navy); white-space: normal; overflow-wrap: anywhere; }
.hero__date { width: auto; max-width: 100%; margin: 18px auto 0; padding: 0; border: 0; font: 600 14px/1.5 var(--font-serif-body); letter-spacing: .08em; text-transform: none; color: var(--lb-ink); }
.hero blockquote { max-width: 100%; margin: 14px auto 0; font: 400 23px/1.35 var(--font-script); color: var(--lb-ink); }

/* ---------- Địa điểm ---------- */
.details { text-align: center; }
.invitation .details.section-pad { container-type: normal; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.details__logo-frame { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 0; border: 1.5px dashed #8a93a8; border-radius: 50%; overflow: hidden; }
.details__logo-frame:has(.details__logo[hidden]) { display: none; }
.details .details__logo { width: 100%; height: 100%; margin: 0; mix-blend-mode: normal; }
.invitation .details .details__school { width: auto; max-width: 100%; margin: 0; font: 700 18px/1.4 var(--font-serif-body); letter-spacing: .02em; text-transform: none; color: var(--lb-navy); }
.details__slogan { margin: 0; max-width: 100%; font: 600 11px/1.5 var(--font-serif-body); letter-spacing: .06em; color: var(--lb-muted); }
.details__ceremony { width: auto; margin: 12px 0 0; font: 400 52px/.95 var(--font-script); letter-spacing: 0; color: var(--lb-navy); }
.details__ceremony-line { white-space: normal; }
.details__ceremony-line--second { margin-top: 0; font-size: inherit; letter-spacing: 0; }
.ceremony-initial, .details__ceremony-line:first-child .ceremony-initial { font: inherit; letter-spacing: 0; line-height: inherit; }
.invitation .details .details__name { width: auto; max-width: 100%; margin: 0; font: 400 32px/1.2 var(--font-script); color: var(--lb-ink); overflow-wrap: anywhere; }
.details__invitation { margin: 0; font: 400 15px/1.6 var(--font-serif-body); letter-spacing: 0; font-style: normal; color: var(--lb-sub); }
.invitation .details .info-card--location {
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  padding: 22px 20px;
  background: var(--lb-page);
  border: 1.5px solid var(--lb-ink);
  border-radius: 6px;
  box-shadow: 5px 5px 0 var(--lb-navy);
}
.details .details__location-label { width: auto; margin-bottom: 8px; gap: 8px; color: var(--lb-navy); }
.details__location-label i { display: none; }
.details__location-label svg { width: 18px; height: 18px; }
.details .details__location-label small { font: 600 11px/1.5 var(--font-serif-body); letter-spacing: .06em; color: var(--lb-navy); }
.details .info-card--location strong { font: 600 18px/1.4 var(--font-serif-body); letter-spacing: 0; text-transform: none; color: var(--lb-ink); }
.details .info-card--location > div > span { margin: 8px 0 0; font: 400 14px/1.5 var(--font-serif-body); color: var(--lb-muted); }
.details .info-card--location a.details__directions {
  min-width: 0;
  min-height: 44px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--lb-navy);
  font: 600 14px/1.2 var(--font-serif-body);
  letter-spacing: 0;
}
.details .info-card--location a.details__directions:hover { transform: none; box-shadow: none; color: var(--lb-navy-deep); }
.details .details__directions span { color: inherit; }
.map-embed-wrap { border: 1.5px solid var(--lb-ink); border-radius: 6px; filter: none; }

/* ---------- Ngày tổ chức ---------- */
.countdown-section { text-align: center; }
.organize-header { display: block; margin: 0 auto 22px; }
.organize-title { white-space: normal; }
.organize-date-banner { max-width: none; margin: 0 0 22px; padding: 14px 0; border-top: 1.5px solid var(--lb-navy); border-bottom: 1.5px solid var(--lb-navy); }
.date-col__label { font: 700 13px/1.4 var(--font-serif-body); letter-spacing: .12em; color: var(--lb-ink); }
.date-col--main { padding: 0; gap: 2px; border-color: var(--lb-line); }
.date-weekday { margin: 0; font: 700 11px/1.4 var(--font-serif-body); letter-spacing: .14em; color: var(--lb-ink); }
.date-day { font: 400 66px/1 var(--font-script); color: var(--lb-navy); }
.date-time { margin: 0; font: 600 13px/1.4 var(--font-serif-body); letter-spacing: 0; color: var(--lb-ink); }
.event-calendar { max-width: none; margin: 0 0 22px; padding: 16px 12px; background: var(--lb-surface); border: 1.5px solid var(--lb-ink); border-radius: 6px; }
.event-calendar__month { margin: 0 0 10px; font: 400 26px/1.2 var(--font-script); letter-spacing: 0; color: var(--lb-navy); text-align: center; }
.event-calendar__weekdays { padding-bottom: 6px; border: 0; font: 700 10px/1.2 var(--font-serif-body); letter-spacing: .06em; color: var(--lb-muted); }
.event-calendar__days { padding-top: 0; row-gap: 2px; font: 400 14px/1 var(--font-serif-body); color: var(--lb-ink); }
.event-calendar__days span { height: 34px; }
.event-calendar__days .is-event-day { width: 34px; margin: 0 auto; border-radius: 50%; background: var(--lb-navy); font-size: 15px; font-weight: 700 !important; color: var(--lb-on-accent) !important; }
.event-calendar__days .is-event-day::before { content: none; }
.countdown-kicker { margin: 6px 0 14px; }
.countdown-grid { gap: 8px; max-width: none; margin: 0 0 22px; padding: 0; }
.countdown-box { padding: 12px 0 10px; border: 1.5px solid var(--lb-ink); border-radius: 6px; background: var(--lb-surface); box-shadow: none; gap: 2px; }
.countdown-box strong { font: 400 36px/1 var(--font-script); color: var(--lb-navy); }
.countdown-box span { font: 400 11px/1.4 var(--font-serif-body); letter-spacing: 0; color: var(--lb-muted); }
.details-actions { margin: 8px 0 0; }
.btn-rsvp-confirm {
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--lb-navy);
  color: var(--lb-on-accent);
  box-shadow: none;
  font: 600 15px/1 var(--font-serif-body);
  gap: 10px;
}
.btn-rsvp-confirm:hover { background: var(--lb-navy-deep); box-shadow: none; }
.btn-rsvp-confirm svg { width: 18px; height: 18px; stroke: currentColor; }
.btn-rsvp-confirm span { color: inherit; }
.details__closing-text { margin: 22px auto 0; font: 400 28px/1.2 var(--font-script); color: var(--lb-navy); }

/* ---------- Album & lời tự bạch ---------- */
.about { text-align: center; }
.about-card { max-width: none; margin: 20px 0 0; }
.about-slider-wrap { --car-h: 420px; max-width: none; }
.invitation .about-carousel {
  height: var(--car-h);
  max-height: none;
  margin: 0;
  background: var(--lb-photo) !important;
  border: 1.5px solid var(--lb-ink) !important;
  border-radius: 6px !important;
}
.about-carousel__slide img,
.about-carousel__slide.is-landscape img,
.about-carousel__slide.is-portrait img { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; }
.gallery-arrow { top: calc(var(--car-h) / 2); width: 44px; height: 44px; border: 1.5px solid var(--lb-ink); background: var(--lb-surface); color: var(--lb-ink); box-shadow: none; font: 400 22px/1 var(--font-serif-body); }
.gallery-arrow:hover { background: var(--lb-page); }
.gallery-arrow--prev { left: 10px; }
.gallery-arrow--next { right: 10px; }
.gallery-counter { position: absolute; top: 12px; right: 12px; z-index: 21; margin: 0; padding: 3px 10px; border: 1.5px solid var(--lb-ink); border-radius: 999px; background: var(--lb-surface); font: 400 12px/1.5 var(--font-serif-body); letter-spacing: 0; color: var(--lb-ink); }
.gallery-counter::before, .gallery-counter::after { content: none; }
.about-slider__dots { margin-top: 12px; scrollbar-color: var(--lb-line) transparent; }
.about-slider__dot, .about-slider__dot.is-active { border-radius: 6px; background: var(--lb-photo); }
.about-slider__dot.is-active { outline: 2px solid var(--lb-navy); }
.invitation .about-heading { margin-top: 40px; font: 400 42px/1.05 var(--font-script); text-transform: none; letter-spacing: 0; color: var(--lb-navy); }
.about-heading + .section-kicker { margin: 6px 0 0; }
.about-story { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 26px; }
.about-polaroid { width: 210px; padding: 10px 10px 0; box-shadow: 0 8px 20px rgba(30, 58, 138, .15); transform: none; rotate: 2.5deg; }
.about-polaroid::before { width: 96px; height: 26px; top: -12px; left: 50%; margin-left: -48px; background: var(--lb-tape); box-shadow: none; transform: rotate(4deg); }
.about-polaroid figcaption { padding: 8px 0 10px; font: 400 21px/1.2 var(--font-script); color: var(--lb-navy); }
.about-content { width: 100%; }
.about-text { font: 400 21px/1.5 var(--font-script); text-align: left; color: var(--lb-ink); }
.about-quote-box { width: 100%; max-width: none; margin: 0; padding: 20px 22px; border-radius: 6px; background: var(--lb-page); text-align: left; }
.about-quote-box::before { content: '\201C'; display: block; width: auto; margin: 0; border: 0; font: 400 52px/.6 var(--font-script); color: var(--lb-navy); }
.about-quote-box::after { content: none; }
.about-quote { margin: 4px 0 0; font: italic 400 15px/1.6 var(--font-serif-body); text-align: left; color: var(--lb-sub); }

/* ---------- Trang phục ---------- */
.dress-code { text-align: center; }
.dress-code__text, .invitation .dress-code .dress-code__text { margin: 18px 0 0; font: 400 24px/1.3 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--lb-ink); }
.palette { gap: 18px 14px; margin: 18px 0 0; }
.palette__item { min-width: 64px; max-width: 88px; gap: 8px; }
.palette__swatch { width: 56px; height: 56px; border: 1.5px solid var(--lb-ink); box-shadow: none; }
.palette__label { color: var(--lb-sub); font-size: 11px; font-weight: 400; line-height: 1.3; white-space: normal; }

/* ---------- Lịch trình ---------- */
.timeline { min-height: 0; }
.timeline__list { width: 100%; max-width: none; margin: 22px 0 0 24px; padding: 0 0 0 24px; }
.timeline__list::before { top: 0; bottom: 0; left: 0; width: 2px; background: var(--lb-navy); }
.timeline-row { grid-template-columns: 76px 1fr; min-height: 0; gap: 8px; padding: 12px 0; align-items: baseline; }
.timeline-row::before { left: -24px; top: 26px; width: 14px; height: 14px; background: var(--lb-page); border: 2px solid var(--lb-navy); border-radius: 50%; transform: translate(-50%, -50%); }
.timeline-row time { padding: 0; border: 0; font: 400 28px/1.1 var(--font-script); letter-spacing: 0; color: var(--lb-navy); text-align: left; }
.timeline-row strong { font: 600 16px/1.4 var(--font-serif-body); white-space: normal; color: var(--lb-ink); }
.timeline__note { margin-top: 22px; font: 400 22px/1.3 var(--font-script); white-space: normal; color: var(--lb-sub); }

/* ---------- Gửi lời chúc ---------- */
.rsvp { text-align: center; }
.rsvp-form { max-width: none; padding: 20px; border: 1.5px solid var(--lb-ink); border-radius: 6px; background: var(--lb-surface); box-shadow: 5px 5px 0 var(--lb-navy); }
.rsvp-form label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font: 600 13px/1.4 var(--font-serif-body); color: var(--lb-ink); }
.rsvp-form label b { color: var(--lb-navy); }
.rsvp-form input, .rsvp-form textarea { margin: 0; padding: 12px 14px; border: 1.5px solid var(--lb-ink); border-radius: 4px; background: var(--lb-surface); color: var(--lb-ink); font: 400 16px/1.45 var(--font-serif-body) !important; }
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder { font-size: 14px; color: #8a93a8; opacity: 1; }
.rsvp-form input:focus, .rsvp-form textarea:focus { border-color: var(--lb-navy); box-shadow: 0 0 0 3px rgba(30, 58, 138, .15); }
.rsvp-form-actions { max-width: none; gap: 10px; margin: 0; }
.btn-quick-wishes { width: 52px; height: 52px; border: 1.5px solid var(--lb-ink); border-radius: 6px; background: var(--lb-page); color: var(--lb-navy); }
.btn-quick-wishes:hover { background: var(--lb-ruling); border-color: var(--lb-ink); color: var(--lb-navy); }
.rsvp-form-actions .btn-submit { min-height: 52px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--lb-navy); color: var(--lb-on-accent); font: 600 15px/1 var(--font-serif-body); }
.rsvp-form-actions .btn-submit:hover { filter: none; background: var(--lb-navy-deep); }

/* ---------- Sổ lưu bút ---------- */
.guestbook__list { max-width: none; gap: 18px; padding: 6px 4px 6px 0; scrollbar-color: var(--lb-line) transparent; }
.guest-entry { padding: 16px 18px; border: 1.5px solid var(--lb-line); border-radius: 6px; background: var(--lb-surface); }
.guest-entry:nth-child(3n + 1) { rotate: -1deg; }
.guest-entry:nth-child(3n + 2) { rotate: .8deg; }
.guest-entry:nth-child(3n) { rotate: -.5deg; }
.guest-entry strong { font: 400 24px/1.2 var(--font-script); color: var(--lb-navy); }
.guest-entry p { margin: 6px 0 0; font: 400 20px/1.4 var(--font-script); color: var(--lb-ink); }
.guest-entry time { font-size: 11px; color: var(--lb-muted); }

/* ---------- Chân trang ---------- */
.invitation .site-footer { padding: 64px 28px 48px; background: var(--lb-navy); color: var(--lb-on-dark); }
.thank-you { max-width: 280px; margin: 0 auto; font: 400 34px/1.2 var(--font-script); color: var(--lb-on-dark); }
.footer-name { margin: 18px 0 0; font: 400 28px/1.2 var(--font-script); color: var(--lb-on-dark-2); overflow-wrap: anywhere; }
.footer-date { margin: 10px 0 0; font: 400 13px/1.5 var(--font-serif-body); letter-spacing: 0; color: var(--lb-on-dark-2); }
.footer-credit { margin: 20px 0 0; font: 400 11px/1.4 var(--font-serif-body); letter-spacing: .12em; text-transform: none; color: var(--lb-on-dark-2); }

/* ---------- Hộp thoại ---------- */
.attendance-modal__backdrop, .wish-modal__backdrop { background: rgba(20, 42, 102, .45) !important; }
.attendance-modal__content, .wish-modal__content { border: 1.5px solid var(--lb-ink); border-radius: 6px; background: var(--lb-surface); box-shadow: 5px 5px 0 var(--lb-navy); }
.attendance-modal__header, .wish-modal__header { background: var(--lb-page); border-color: var(--lb-line); }
.attendance-modal__header h3, .wish-modal__header h3 { font: 400 26px/1.2 var(--font-script); color: var(--lb-navy); }
.attendance-modal__close, .wish-modal__close { background: var(--lb-surface); border: 1.5px solid var(--lb-ink); color: var(--lb-ink); }
.attendance-modal__close:hover, .wish-modal__close:hover { background: var(--lb-page); color: var(--lb-ink); }
.attendance-form .form-label, .attendance-options-group .group-label { color: var(--lb-ink); font-family: var(--font-serif-body); }
.attendance-form .form-label b { color: var(--lb-navy); }
.attendance-form input[type='text'], .attendance-form textarea { border: 1.5px solid var(--lb-ink); border-radius: 4px; background: var(--lb-surface); color: var(--lb-ink); }
.attendance-form input[type='text']:focus, .attendance-form textarea:focus { border-color: var(--lb-navy); box-shadow: 0 0 0 3px rgba(30, 58, 138, .15); }
.attendance-option .option-card { border: 1.5px solid var(--lb-line); border-radius: 6px; background: var(--lb-surface); }
.attendance-option .option-card strong { color: var(--lb-ink); font-family: var(--font-serif-body); }
.attendance-option .option-card small { color: var(--lb-muted); }
.attendance-option input[type='radio']:checked + .option-card { border-color: var(--lb-navy); background: var(--lb-page); box-shadow: 3px 3px 0 var(--lb-navy); }
.attendance-option input[type='radio']:focus-visible + .option-card { outline: 2px solid var(--lb-navy); }
.btn-confirm-submit { min-height: 52px; border-radius: 6px; background: var(--lb-navy); color: var(--lb-on-accent); box-shadow: none; }
.btn-confirm-submit:hover { filter: none; background: var(--lb-navy-deep); }
.wish-suggest-item { border: 1.5px solid var(--lb-line); border-radius: 6px; background: var(--lb-surface); color: var(--lb-ink); }
.wish-suggest-item:hover, .wish-suggest-item:active { background: var(--lb-page); border-color: var(--lb-navy); box-shadow: none; }
.wish-suggest-item svg { color: var(--lb-navy); }

/* ---------- Xem ảnh phóng to ---------- */
.image-lightbox__backdrop { background: rgba(251, 248, 239, .88); }
.image-lightbox__counter, .image-lightbox__btn, .image-lightbox__nav { border: 1.5px solid var(--lb-ink); background: var(--lb-surface); color: var(--lb-ink); box-shadow: none; }
.image-lightbox__btn:hover, .image-lightbox__nav:hover { background: var(--lb-navy); border-color: var(--lb-navy); color: var(--lb-on-accent); }
.image-lightbox__img { border: 8px solid var(--lb-surface); border-radius: 0; box-shadow: 0 8px 20px rgba(30, 58, 138, .2); }
.image-lightbox__hint { color: var(--lb-muted); }

/* ---------- Điều khiển nổi, thông báo, lỗi ---------- */
.toast { border: 1.5px solid var(--lb-page); background: var(--lb-navy); box-shadow: 0 8px 24px rgba(20, 42, 102, .35); }
.scroll-progress { background: rgba(30, 58, 138, .08); }
.scroll-progress__bar { background: var(--lb-navy); box-shadow: none; }
.btn-scroll-top { border: 1.5px solid var(--lb-ink); background: var(--lb-surface); color: var(--lb-navy); box-shadow: none; }
.btn-scroll-top:hover { background: var(--lb-navy); border-color: var(--lb-navy); color: var(--lb-on-accent); }
.music-toggle, .music-toggle.playing, .music-toggle.paused { border: 1.5px solid var(--lb-page); background: var(--lb-navy); color: var(--lb-on-accent); box-shadow: 0 3px 12px rgba(20, 42, 102, .3); }
.error-screen { background: var(--lb-page); }
.error-card { border: 1.5px solid var(--lb-ink); border-radius: 6px; background: var(--lb-surface); box-shadow: 5px 5px 0 var(--lb-navy); }
.error-icon-wrap { border: 1.5px solid var(--lb-ink); background: var(--lb-page); color: var(--lb-navy); }
.error-title { font: 400 30px/1.2 var(--font-script); color: var(--lb-navy); }
.error-message { color: var(--lb-sub); }
.btn-error-reload { min-height: 48px; border-radius: 999px; background: var(--lb-navy); box-shadow: none; }

@media (max-width: 620px) {
  .invitation .section-title, .invitation .about-heading { font-size: 42px; }
  .hero__title { font-size: 56px; }
  .hero .host-name { font-size: 48px; margin: 28px auto 0; }
  .date-day { font-size: 66px; }
  .date-col__label { font-size: 13px; }
  .date-col--main { padding: 0; }
  .countdown-box strong { font-size: 36px; }
  .about-slider-wrap { --car-h: 380px; }
  .invitation .about-carousel { max-height: none; }
  .gallery-arrow { width: 44px; height: 44px; font-size: 22px; }
  .gallery-arrow--prev { left: 10px; }
  .gallery-arrow--next { right: 10px; }
  .guest-entry { grid-template-columns: minmax(0, 1fr) auto; }
  .guest-entry time { justify-self: auto; }
  .cover__frame { max-width: 360px; }
  .cover__book { padding: 10px; }
}
@media (max-width: 360px) {
  .invitation .hero.section-pad,
  .invitation .countdown-section.section-pad,
  .invitation .dress-code.section-pad,
  .invitation .rsvp.section-pad,
  .invitation .guestbook.section-pad { padding-left: 44px; padding-right: 16px; }
  .invitation .section-title, .invitation .about-heading { font-size: 36px; }
  .hero__title { font-size: 48px; }
  .hero .host-name { font-size: 40px; }
  .details__ceremony { font-size: 44px; }
  .cover__field { margin-left: 22px; margin-right: 22px; }
}
@media (max-height: 670px) {
  .cover__frame { gap: 12px; }
  .cover__icon { width: 44px; height: 44px; }
  .cover__book { min-height: 0; height: auto; padding: 10px; }
  .cover__book-title { padding-top: 20px; font-size: 38px; }
  .cover__field { margin-top: 8px; }
  .cover__field:last-child { margin-bottom: 20px; }
}

/* Lời chúc: chữ nhỏ hơn, thẻ rộng hết khung */
.invitation .guestbook.section-pad { padding-left: 40px; padding-right: 12px; }
.guestbook__list { padding: 6px 0; gap: 14px; }
.guest-entry, .guest-entry:nth-child(n) { position: relative; display: block; width: 100%; padding: 12px 14px; }
.guest-entry strong { padding-right: 84px; font-size: 20px; }
.guest-entry p { margin: 4px 0 0; font-size: 17px; line-height: 1.35; }
.guest-entry time { position: absolute; top: 14px; right: 14px; font-size: 10.5px; }

/* Chữ phụ (kicker) to hơn một chút */
.invitation .section-kicker, .countdown-kicker, .hero__subtitle, .details__slogan,
.cover__eyebrow, .cover__book-subtitle, .details .details__location-label small { font-size: 14px; letter-spacing: .04em; }

/* Bìa: câu đề từ và gợi ý chạm */
.cover__tagline { margin: 6px 0 0; font: 400 22px/1.3 var(--font-script); color: var(--lb-on-dark-2); text-align: center; }
.cover__hint { margin: 0; font: 400 12px/1.4 var(--font-serif-body); color: var(--lb-on-dark-2); text-align: center; }
.cover__tagline + .open-button { margin-top: 12px; }
@media (max-height: 760px) { .cover__tagline { font-size: 19px; margin-top: 0; } }

/* Ngày ở trang đầu: "CHỦ NHẬT · 26.12.2026" */
.hero__weekday:not(:empty)::after { content: ' \00B7 '; white-space: pre; }

/* Lịch trình: chữ nhỏ lại */
.timeline-row { grid-template-columns: 62px 1fr; padding: 10px 0; }
.timeline-row::before { top: 22px; }
.timeline-row time { font-size: 23px; }
.timeline-row strong { font-size: 14px; }

/* Lịch trình: căn giữa khối */
.timeline__list { width: fit-content; max-width: 100%; margin: 22px auto 0; }

/* Album: khung ôm theo tỉ lệ thật của từng ảnh (ngang/dọc) */
.invitation .about-carousel { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.about-carousel__slide img,
.about-carousel__slide.is-landscape img,
.about-carousel__slide.is-portrait img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border: 1.5px solid var(--lb-ink) !important;
  border-radius: 6px;
  background: var(--lb-photo);
}

/* Hàng ảnh thu nhỏ: căn giữa (vẫn cuộn được khi dài) */
.about-slider__dots { justify-content: safe center; }

/* Khung thiệp tối đa 760px; nội dung bên trong tối đa 560px */
.invitation .hero.section-pad,
.invitation .countdown-section.section-pad,
.invitation .dress-code.section-pad,
.invitation .rsvp.section-pad,
.invitation .guestbook.section-pad { padding-left: max(48px, calc((100% - 560px) / 2)); padding-right: max(24px, calc((100% - 560px) / 2)); }
.invitation .details.section-pad,
.invitation .about.section-pad,
.invitation .timeline.section-pad,
.invitation .site-footer { padding-left: max(28px, calc((100% - 560px) / 2)); padding-right: max(28px, calc((100% - 560px) / 2)); }
@media (max-width: 360px) {
  .invitation .hero.section-pad,
  .invitation .countdown-section.section-pad,
  .invitation .dress-code.section-pad,
  .invitation .rsvp.section-pad,
  .invitation .guestbook.section-pad { padding-left: 44px; padding-right: 16px; }
}

/* ===== ghi đè riêng của theme ===== */
body, body.cover-visible, body:not(.cover-visible) { background: #f3e2d3; }
@media (min-width: 720px) { body:not(.cover-visible) { background: #f3e2d3; } }
.invitation { box-shadow: 0 0 40px rgba(179, 52, 28, .12); }
.hero, .countdown-section, .dress-code, .rsvp, .guestbook, .details, .about, .timeline { background-image: none; border-top: 0; }
.hero { background-color: #fffdf9; }
.details { background-color: #fff7ee; }
.countdown-section { background-color: var(--green); color: #fff7ee; }
.about { background-color: #fff7ee; }
.dress-code { background-color: #fffdf9; }
.timeline { background-color: #fff7ee; }
.rsvp { background-color: #fffdf9; }
.guestbook { background-color: #fffdf9; }
.invitation .hero.section-pad, .invitation .countdown-section.section-pad, .invitation .dress-code.section-pad, .invitation .rsvp.section-pad, .invitation .guestbook.section-pad { padding-left: max(28px, calc((100% - 560px) / 2)); padding-right: max(28px, calc((100% - 560px) / 2)); }
.invitation .hero.section-pad, .invitation .countdown-section.section-pad { padding-top: 64px; }
.invitation .guestbook.section-pad { padding-top: 8px; }

/* chữ */
.invitation .section-title, .invitation .about-heading { font: 700 46px/1.05 var(--font-script); color: var(--lb-navy); }
.invitation .section-kicker, .countdown-kicker, .hero__subtitle, .details__slogan, .cover__book-subtitle, .details .details__location-label small { font: 600 11px/1.5 var(--font-serif-body); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.cover__eyebrow { font: 600 11px/1.5 var(--font-serif-body); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.hero__title { font: 500 40px/1.1 var(--font-serif-body); letter-spacing: .04em; color: var(--lb-ink); }
.hero .host-name { font: 700 50px/1.05 var(--font-script); color: var(--lb-navy); }
.hero__date { font: 500 14px/1.5 var(--font-serif-body); letter-spacing: .14em; color: var(--lb-ink); }
.hero blockquote, blockquote { font: italic 400 17px/1.65 var(--font-serif-body); color: var(--lb-sub); }
.details__ceremony { font: 700 54px/1 var(--font-script); color: var(--lb-navy); }
.details__ceremony-line--second { font-size: inherit; }
.invitation .details .details__name { font: 500 30px/1.2 var(--font-script); color: var(--lb-ink); }
.invitation .details .details__school { font: 600 18px/1.4 var(--font-serif-body); letter-spacing: .1em; color: var(--green); }
.details__slogan { color: var(--lb-muted); }
.details__invitation { font: 400 15px/1.7 var(--font-serif-body); color: var(--lb-sub); }
.details__closing-text { font: 700 30px/1.2 var(--font-script); color: var(--pink); }
.about-text { font: 400 15px/1.8 var(--font-serif-body); color: var(--lb-sub); }
.timeline__note { font: 500 24px/1.3 var(--font-script); color: var(--lb-muted); }
.invitation .dress-code .dress-code__text, .dress-code__text { font: 500 26px/1.3 var(--font-script); color: var(--lb-ink); }

/* bìa: vòm hoa phượng */
.cover { background-color: #fff7ee; background-image: none; color: var(--lb-ink); }
.cover__eyebrow { color: var(--green); }
.cover__icon { width: 44px; height: 44px; color: var(--lb-navy); }
.cover__book { padding: 8px; border: 1.5px solid var(--lb-navy); border-radius: 130px 130px 12px 12px; background: #fffdf9; box-shadow: 0 10px 30px rgba(179, 52, 28, .12); color: var(--lb-ink); rotate: 0deg; }
.cover__book-border { inset: 8px; border: 0; border-radius: 122px 122px 6px 6px; background: #f3e2d3; opacity: .55; }
.cover__book > :not(.cover__book-border) { z-index: 1; }
.cover__book-title { padding: 52px 24px 0; font: 700 54px/1 var(--font-script); color: var(--lb-navy); text-shadow: none; }
.cover__book-subtitle { color: var(--green); }
.cover__field { margin: 14px 26px 0; border-bottom: 1px dotted #b3341c88; }
.cover__book-subtitle + .cover__field { margin-top: 20px; }
.cover__field:last-child { margin-bottom: 26px; }
.cover__field small { font: 400 12px var(--font-serif-body); color: var(--lb-muted); }
.cover__field b { font: 700 28px/1.2 var(--font-script); color: var(--lb-ink); }
.open-button { background: var(--lb-navy); color: #fff7ee; font: 600 15px/1 var(--font-serif-body); }
.open-button:hover { background: var(--lb-navy-deep); }
.cover__tagline { font: 500 24px/1.3 var(--font-script); color: var(--lb-muted); }
.cover__hint { color: var(--lb-muted); }

/* trang đầu */
.hero__icon { color: var(--lb-navy); }
.portrait-composition { width: 270px; margin: 24px auto 8px; padding: 0; background: transparent; box-shadow: none; transform: none; }
.portrait-composition::before { display: none; }
.portrait-wrap { aspect-ratio: 270 / 360; border-radius: 135px 135px 0 0; background: var(--lb-photo); }
.hero .portrait-note { position: absolute; left: auto; right: -22px; bottom: 20px; top: auto; width: auto; padding: 8px 14px; border-radius: 12px; background: #fff7ee; font: 700 22px/1.1 var(--font-script); color: var(--lb-navy); transform: rotate(-6deg); box-shadow: 0 4px 12px rgba(179, 52, 28, .12); }

/* địa điểm */
.invitation .details .info-card--location { padding: 26px 22px; background: #fffdf9; border: 0; border-radius: 24px; box-shadow: 0 10px 30px rgba(179, 52, 28, .1); }
.details .details__location-label svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #f3e2d3; color: var(--lb-navy); }
.details .details__location-label { flex-direction: column; gap: 8px; }
.details .info-card--location strong { font: 600 19px/1.4 var(--font-serif-body); }
.details .info-card--location > div > span { color: var(--lb-muted); }
.details .info-card--location a.details__directions { color: var(--lb-navy); font: 600 14px/1.2 var(--font-serif-body); }

/* ngày tổ chức: mảng xanh lá */
.countdown-section .section-title { color: var(--pink); }
.countdown-section .section-kicker, .countdown-section .countdown-kicker { color: #cfe3d2; }
.organize-date-banner { grid-template-columns: 1fr auto 1fr; gap: 14px; padding: 0; border: 0; }
.date-col__label { font: 400 13px/1.4 var(--font-serif-body); letter-spacing: .16em; color: #fff7ee; padding: 6px 0; border-top: 1px solid #cfe3d2; border-bottom: 1px solid #cfe3d2; min-width: 84px; }
.date-col--main { width: 110px; height: 130px; padding: 0; border: 0; border-radius: 55px 55px 6px 6px; background: #fff7ee; justify-content: center; }
.date-weekday { font: 600 11px/1.4 var(--font-serif-body); letter-spacing: .14em; color: var(--green); }
.date-day { font: 500 58px/1 var(--font-serif-body); color: var(--lb-navy); }
.date-time { font: 400 13px/1.4 var(--font-serif-body); color: var(--lb-ink); }
.event-calendar { background: #fff7ee; border: 0; border-radius: 22px; color: var(--lb-ink); }
.event-calendar__month { font: 700 28px/1.2 var(--font-script); color: var(--lb-navy); }
.event-calendar__weekdays { color: var(--green); font-family: var(--font-serif-body); }
.event-calendar__days { font-family: var(--font-serif-body); color: var(--lb-ink); }
.event-calendar__days .is-event-day { background: var(--lb-navy); color: #fff7ee !important; }
.countdown-grid { gap: 8px; }
.countdown-box { background: #fff7ee; border: 0; border-radius: 18px; }
.countdown-box strong { font: 700 34px/1 var(--font-script); color: var(--lb-navy); }
.countdown-box span { font: 400 11px var(--font-serif-body); color: var(--lb-muted); }
.btn-rsvp-confirm { background: #fff7ee; color: var(--lb-navy); }
.btn-rsvp-confirm:hover { background: #ffd9c7; }
.btn-rsvp-confirm svg { stroke: currentColor; }

/* album */
.invitation .about-carousel { background: var(--lb-photo) !important; border: 0 !important; border-radius: 24px !important; }
.about-carousel__slide img, .about-carousel__slide.is-landscape img, .about-carousel__slide.is-portrait img { border: 0 !important; border-radius: 20px; }
.gallery-arrow { border: 0; background: rgba(255, 253, 249, .92); color: var(--lb-navy); box-shadow: 0 4px 12px rgba(179, 52, 28, .15); }
.gallery-counter { top: calc(var(--car-h) - 40px); bottom: auto; right: auto; left: 50%; transform: translateX(-50%); width: 70px; padding: 3px 0; text-align: center; border: 0; background: rgba(255, 253, 249, .92); color: var(--lb-ink); }
.about-slider__dot, .about-slider__dot.is-active { border-radius: 14px; }
.about-slider__dot.is-active { outline-color: var(--lb-navy); }
.about-polaroid { background: #fffdf9; box-shadow: 0 8px 24px rgba(179, 52, 28, .14); border-radius: 12px; rotate: -2deg; }
.about-polaroid::before { display: none; }
.about-polaroid img { border-radius: 6px; }
.about-polaroid figcaption { font: 700 22px/1.2 var(--font-script); color: var(--lb-navy); }
.about-quote-box { border-radius: 20px; background: #fffdf9; }
.about-quote-box::before { color: var(--lb-navy); }
.about-quote { font: italic 400 16px/1.65 var(--font-serif-body); }

/* trang phục, lịch trình, lời chúc */
.palette__swatch { width: 56px; height: 56px; border: 3px solid #fffdf9; box-shadow: 0 4px 12px rgba(179, 52, 28, .18); }
.palette__label { font: 400 12px/1.3 var(--font-serif-body); color: var(--lb-sub); }
.timeline__list::before { background: var(--lb-navy); width: 2px; }
.timeline-row::before { border-color: var(--lb-navy); background: #fff7ee; }
.timeline-row time { font: 700 28px/1.1 var(--font-script); color: var(--lb-navy); }
.timeline-row strong { font: 500 16px/1.4 var(--font-serif-body); color: var(--lb-ink); }
.rsvp-form { padding: 22px; border: 0; border-radius: 24px; background: #fff7ee; box-shadow: none; }
.rsvp-form label { font: 600 13px/1.4 var(--font-serif-body); color: var(--lb-ink); }
.rsvp-form label b { color: var(--lb-navy); }
.rsvp-form input, .rsvp-form textarea { padding: 12px 16px; border: 1px solid #e2c6b4; border-radius: 14px; background: #fffdf9; color: var(--lb-ink); font: 400 16px/1.45 var(--font-serif-body) !important; }
.rsvp-form input:focus, .rsvp-form textarea:focus { border-color: var(--lb-navy); box-shadow: 0 0 0 3px rgba(179, 52, 28, .12); }
.btn-quick-wishes { border: 1px solid #e2c6b4; border-radius: 50%; background: #fffdf9; color: var(--lb-navy); }
.btn-quick-wishes:hover { background: #f3e2d3; border-color: #e2c6b4; }
.rsvp-form-actions .btn-submit, .btn-confirm-submit { border-radius: 999px; background: var(--lb-navy); color: #fff7ee; font: 600 15px/1 var(--font-serif-body); }
.guest-entry, .guest-entry:nth-child(n) { border: 0; border-radius: 20px; background: #fff7ee; rotate: 0deg; box-shadow: 0 4px 14px rgba(179, 52, 28, .08); }
.guest-entry strong { font: 700 24px/1.2 var(--font-script); color: var(--lb-navy); }
.guest-entry p { font: 400 14px/1.6 var(--font-serif-body); color: var(--lb-sub); }
.guest-entry time { color: var(--lb-muted); }
.invitation .site-footer { background: var(--lb-navy); }
.thank-you { font: 700 36px/1.2 var(--font-script); }
.footer-name { font: 700 30px/1.2 var(--font-script); color: var(--pink); }
.footer-date, .footer-credit { font-family: var(--font-serif-body); color: #ffd9c7; }

/* hộp thoại và điều khiển nổi */
.attendance-modal__backdrop, .wish-modal__backdrop { background: rgba(58, 42, 34, .5) !important; }
.attendance-modal__content, .wish-modal__content, .error-card { border: 0; border-radius: 24px; background: #fffdf9; box-shadow: 0 16px 40px rgba(179, 52, 28, .2); }
.attendance-modal__header, .wish-modal__header { background: #fff7ee; border-color: #f3e2d3; }
.attendance-modal__header h3, .wish-modal__header h3, .error-title { font: 700 28px/1.2 var(--font-script); color: var(--lb-navy); }
.attendance-modal__close, .wish-modal__close { border: 0; background: #f3e2d3; }
.attendance-form input[type='text'], .attendance-form textarea { border: 1px solid #e2c6b4; border-radius: 14px; background: #fffdf9; }
.attendance-option .option-card { border: 1px solid #e2c6b4; border-radius: 16px; background: #fffdf9; }
.attendance-option input[type='radio']:checked + .option-card { border-color: var(--lb-navy); background: #fff7ee; box-shadow: none; }
.wish-suggest-item { border: 1px solid #e2c6b4; border-radius: 16px; background: #fffdf9; }
.wish-suggest-item:hover, .wish-suggest-item:active { background: #fff7ee; border-color: var(--lb-navy); }
.image-lightbox__backdrop { background: rgba(255, 247, 238, .9); }
.image-lightbox__counter, .image-lightbox__btn, .image-lightbox__nav { border: 0; background: #fffdf9; box-shadow: 0 4px 12px rgba(179, 52, 28, .18); }
.image-lightbox__btn:hover, .image-lightbox__nav:hover { background: var(--lb-navy); }
.image-lightbox__img { border-radius: 16px; border-width: 6px; }
.toast { border: 0; background: var(--lb-navy); }
.btn-scroll-top { border: 0; background: #fffdf9; color: var(--lb-navy); box-shadow: 0 4px 12px rgba(179, 52, 28, .2); }
.scroll-progress__bar { background: var(--lb-navy); }
.music-toggle, .music-toggle.playing, .music-toggle.paused { border: 0; background: var(--lb-navy); color: #fff7ee; }
.error-screen { background: #fff7ee; }
.error-icon-wrap { border: 0; background: #f3e2d3; }
.btn-error-reload { background: var(--lb-navy); }

/* ===== khớp design Mẫu 4 · Mùa Phượng ===== */
/* bìa */
.cover { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 56px 36px 44px; overflow-x: hidden; overflow-y: auto; background: #fff7ee; }
.cover::before, .cover::after { display: none; }
.cover__flower { position: absolute; pointer-events: none; }
.cover__flower--tl { top: -10px; left: -14px; width: 120px; height: 120px; }
.cover__flower--br { bottom: 120px; right: -18px; width: 90px; height: 90px; }
.cover__frame { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cover__eyebrow { margin: 0; }
.cover__title { margin: 0; font: 700 54px/1 var(--font-script); color: var(--lb-navy); text-align: center; }
.cover__book { flex: none; width: 240px; height: 330px; box-sizing: border-box; min-height: 0; padding: 8px; border: 1.5px solid var(--lb-navy); border-radius: 120px 120px 8px 8px; background: none; box-shadow: none; rotate: 0deg; }
.cover__photo { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 112px 112px 4px 4px; background: var(--lb-photo); }
.cover__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover__name { margin: 4px 0 0; font: 700 36px/normal var(--font-script); color: var(--lb-ink); text-align: center; overflow-wrap: anywhere; }
.cover__guest { margin: 0; font: 400 14px/normal var(--font-serif-body); color: var(--lb-muted); text-align: center; }
.cover__guest em { color: var(--lb-ink); }
.open-button { display: flex; align-items: center; gap: 10px; flex: none; margin: auto 0 0; padding: 0 30px; min-height: 52px; font: 600 15px/normal var(--font-serif-body); }
@media (max-height: 760px) {
  .cover { padding-top: 40px; padding-bottom: 28px; }
  .cover__title { font-size: 44px; }
  .cover__book { width: 190px; height: 262px; border-radius: 95px 95px 8px 8px; }
  .cover__photo { border-radius: 87px 87px 4px 4px; }
  .cover__name { font-size: 32px; }
}
.music-toggle, .music-toggle.playing, .music-toggle.paused { width: 44px; height: 44px; }
.music-toggle svg { width: 18px; height: 18px; }

/* trang đầu */
.invitation .hero.section-pad { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px max(32px, calc((100% - 560px) / 2)); text-align: center; }
.hero__icon { flex: none; width: 120px; height: 28px; margin: 0; }
.hero__title, .hero__subtitle { margin: 0; }
.portrait-composition { flex: none; margin: 16px 0 8px; }
.hero .portrait-note { box-shadow: none; font: 400 22px/1.1 var(--font-script); }
.hero .host-name { margin: 0; }
.hero__date { margin: 0; }
.hero blockquote { margin: 6px 0 0; }

/* địa điểm */
.invitation .details.section-pad { gap: 14px; }
.details__logo-frame { flex: none; border: 1px dashed var(--lb-navy); }
.details .details__logo { object-fit: cover; }
.details__ceremony { margin: 14px 0 0; }
.invitation .details .info-card--location { box-sizing: border-box; margin: 14px 0 0; }
.info-card--location > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.details .details__location-label { margin: 0; }
.details .info-card--location > div > span { margin: 0; font-size: 14px; }
.details .info-card--location strong { display: block; }
.details .info-card--location a.details__directions { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.details__directions svg { display: none; }

/* ngày tổ chức */
.invitation .countdown-section.section-pad { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 64px; padding-bottom: 64px; }
#countdownSection { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.organize-header { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.organize-header .section-kicker { margin: 0; }
.organize-date-banner { display: flex; align-items: center; justify-content: center; gap: 18px; width: auto; max-width: none; margin: 0; padding: 0; border: 0; }
.organize-date-banner[hidden] { display: none; }
.organize-date-banner .date-col { margin: 0; padding: 0; border: 0; }
.date-col__label { display: block; width: 84px; min-width: 0; box-sizing: content-box; margin: 0; padding: 6px 0; text-align: center; }
.date-col--main { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.date-weekday, .date-time { margin: 0; }
.event-calendar { box-sizing: border-box; width: 100%; margin: 0; padding: 18px 14px; }
.event-calendar[hidden] { display: none; }
.event-calendar__month { margin: 0 0 10px; }
.event-calendar__weekdays, .event-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.event-calendar__weekdays { padding: 0; }
.event-calendar__weekdays span { padding-bottom: 6px; font: 600 10px/normal var(--font-serif-body); letter-spacing: .06em; color: var(--green); }
.event-calendar__days { padding: 0; }
.event-calendar__days span { display: flex; align-items: center; justify-content: center; height: 34px; }
.event-calendar__days .is-event-day { width: auto; margin: 0; font-size: 14px; font-weight: 600 !important; }
.countdown-kicker { margin: 6px 0 0; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: none; margin: 0; padding: 0; }
.countdown-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0 12px; border: 1px solid #cfe3d2; border-radius: 40px 40px 10px 10px; background: transparent; }
.countdown-box strong { font: 500 30px/1 var(--font-serif-body); color: inherit; }
.countdown-box span { font: 400 11px/normal var(--font-serif-body); color: #cfe3d2; }
.details-actions { margin: 6px 0 0; }
.details__closing-text { margin: 4px 0 0; }

/* album và lời tự bạch */
.invitation .about.section-pad { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.about > .section-title + .section-kicker { margin: -14px 0 0; }
.about-card { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; margin: 0; }
.about-slider-wrap { position: relative; width: 100%; }
.invitation .about-carousel { height: 440px; max-height: none; margin: 0; overflow: hidden; border-radius: 167px 167px 18px 18px !important; background: var(--lb-photo) !important; }
.about-carousel__slide img, .about-carousel__slide.is-landscape img, .about-carousel__slide.is-portrait img { width: 100%; max-width: none; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; border: 0 !important; border-radius: 0; background: none; }
.gallery-arrow { top: 260px; transform: none; background: #fff7ee; box-shadow: none; font-size: 22px; line-height: 1; padding: 0; }
.gallery-counter { top: 403px; bottom: auto; left: 50%; right: auto; width: 70px; margin: 0 0 0 -35px; padding: 4px 0; transform: none; border-radius: 999px; background: #fff7ee; font: 400 12px/15px var(--font-serif-body); }
.about-slider__dots { gap: 8px; margin: 20px 0 0; padding: 0; min-height: 8px; overflow: visible; }
.about-slider__dot, .about-slider__dot.is-active { flex: none; width: 8px; height: 8px; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: #e2c6b4; outline: 0; box-shadow: none; }
.about-slider__dot.is-active { width: 24px; background: var(--lb-navy); }
.about-slider__dot img { display: none; }
.invitation .about-heading { margin: 30px 0 0; }
.about-heading + .section-kicker { margin: -14px 0 0; }
.about-story { width: 100%; margin: 0; gap: 20px; }
.about-polaroid { box-sizing: border-box; width: 210px; margin: 6px 0 0; padding: 10px 10px 0; border-radius: 0; background: #fffdf9; box-shadow: 0 10px 30px rgba(179, 52, 28, .12); }
.about-polaroid img { display: block; width: 100%; height: 220px; max-width: none; border-radius: 0; object-fit: cover; background: var(--lb-photo); }
.about-polaroid figcaption { padding: 8px 0 10px; font: 400 24px/normal var(--font-script); text-align: center; }
.about-content { max-width: none; }
.about-text { margin: 8px 0 0; font: 400 15px/1.8 var(--font-serif-body); text-align: center; color: #4a362c; }
.about-quote-box { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; border-radius: 22px; background: #f3e2d3; text-align: center; }
.about-quote-box::before { content: none; }
.about-quote-box .quote-icon { flex: none; width: 30px; height: 30px; }
.about-quote { margin: 0; font: italic 400 16px/1.65 var(--font-serif-body); text-align: center; color: var(--lb-ink); }

/* trang phục */
.invitation .dress-code.section-pad { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 64px max(28px, calc((100% - 560px) / 2)) 56px; }
.dress-code__text, .invitation .dress-code .dress-code__text { margin: 0; font: italic 400 16px/normal var(--font-serif-body); color: var(--lb-sub); }
.palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 0; }
.palette__item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; max-width: none; }
.palette__swatch { width: 60px; height: 76px; border: 1px solid #e2c6b4; border-radius: 30px 30px 6px 6px; box-shadow: none; }
.palette__label { font: 400 11px/1.3 var(--font-serif-body); text-align: center; color: var(--lb-sub); }

/* lịch trình */
.invitation .timeline.section-pad { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.timeline > .section-kicker { margin: -16px 0 0; }
.timeline__list { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: none; margin: 0; padding: 0; }
.timeline__list::before, .timeline-row::before { display: none; }
.timeline-row { display: flex; align-items: center; gap: 16px; min-height: 0; padding: 8px 20px 8px 8px; border-radius: 999px; background: #fffdf9; box-shadow: 0 4px 14px rgba(179, 52, 28, .08); }
.timeline-row time { flex: none; display: flex; align-items: center; justify-content: center; width: 66px; height: 44px; padding: 0; border-radius: 999px; background: var(--lb-navy); font: 600 14px/normal var(--font-serif-body); letter-spacing: 0; color: #fff7ee; }
.timeline-row strong { font: 400 16px/normal var(--font-serif-body); }
.timeline__note { margin: 0; font: 400 24px/normal var(--font-script); color: var(--green); text-align: center; }

/* gửi lời chúc */
.invitation .rsvp.section-pad { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 64px; padding-bottom: 40px; background-color: #f3e2d3; }
.invitation .rsvp > p { margin: 0; font: 400 14px/1.6 var(--font-serif-body); color: var(--lb-sub); }
.rsvp-form { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0; text-align: left; }
.rsvp-form label { margin: 0; gap: 6px; font: 600 13px/normal var(--font-serif-body); }
.rsvp-form label b { color: inherit; }
.rsvp-form input, .rsvp-form textarea { box-sizing: border-box; width: 100%; padding: 12px 16px; font: 400 16px/normal var(--font-serif-body) !important; resize: none; }
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder { font-size: 15px; color: #757575; }
.rsvp-form-actions { display: flex; gap: 10px; margin: 0; }
.btn-quick-wishes { flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--lb-navy); background: transparent; }
.btn-quick-wishes:hover { background: transparent; border-color: var(--lb-navy); }
.rsvp-form-actions .btn-submit { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0; font: 600 15px/normal var(--font-serif-body); }

/* sổ lưu bút */
.invitation .guestbook.section-pad { padding: 8px max(28px, calc((100% - 560px) / 2)) 56px; background-color: #f3e2d3; }
.guestbook__list { display: flex; flex-direction: column; gap: 14px; padding: 0; }
.guest-entry, .guest-entry:nth-child(n) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 10px; min-height: 0; padding: 18px 20px; border-radius: 20px; background: #fffdf9; box-shadow: none; }
.guest-entry > div { display: contents; }
.guest-entry strong { grid-area: 1 / 1; padding: 0; font: 700 26px/normal var(--font-script); }
.guest-entry time { position: static; grid-area: 1 / 2; font-size: 11px; }
.guest-entry p { grid-area: 2 / 1 / 3 / 3; margin: 0; font: 400 14px/1.65 var(--font-serif-body); color: var(--lb-ink); }

/* chân trang */
.invitation .site-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 64px; padding-bottom: 44px; text-align: center; }
.footer-flower { flex: none; width: 44px; height: 44px; }
.thank-you { max-width: none; margin: 0; font: 700 38px/1.15 var(--font-script); }
.footer-name { margin: 8px 0 0; font: 400 28px/normal var(--font-script); }
.footer-date { margin: 0; font-size: 13px; color: #ffe7dc; }
.footer-credit { margin: 20px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #ffe7dc; }
.invitation .section-kicker, .countdown-kicker, .hero__subtitle, .details__slogan, .cover__eyebrow, .cover__book-subtitle, .details .details__location-label small { line-height: normal; }
.cover__guest em { font-style: italic; font-weight: 400; }
.invitation .hero .portrait-composition { margin: 16px 0 8px; }
.hero__date { line-height: normal; }
.details__logo-frame { box-sizing: content-box; }
.invitation .details .details__school { line-height: normal; }
.details .info-card--location > div > span { line-height: normal; }
.palette__swatch { box-sizing: content-box; }
.footer-date, .footer-credit { line-height: normal; }
.rsvp-form input, .rsvp-form textarea { margin: 0; }
.hero__weekday:not(:empty)::after { content: ' \00B7\0020'; white-space: pre; }
.about-quote-box .quote-icon { display: block; margin: 0; }
.details .details__location-label svg { box-sizing: border-box; flex: none; }
.details .info-card--location a.details__directions, .details .info-card--location a.details__directions:hover { text-decoration: underline; }
.invitation .details .details__school { text-transform: uppercase; }
.gallery-arrow { font-family: Arial, Helvetica, sans-serif; }
.details .details__location-label svg { width: 44px; height: 44px; padding: 12px; }
.footer-credit { text-transform: none; }

/* bìa: giới hạn khung 760px như thiệp, hai bên là nền be */
.cover { left: max(0px, calc((100% - 760px) / 2)); right: max(0px, calc((100% - 760px) / 2)); }

/* tên chủ thiệp ở trang đầu luôn trên 1 dòng (thu nhỏ chữ nếu quá dài) */
.hero .host-name { white-space: nowrap; overflow-wrap: normal; max-width: 100%; }
.hero .host-line { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.hero .host-line .host-name { min-width: 0; flex: 0 1 auto; }
.host-class { flex: none; padding: 3px 10px; border: 1px solid var(--lb-navy); border-radius: 999px; font: 600 14px/normal var(--font-serif-body); letter-spacing: .08em; color: var(--lb-navy); }
.host-class:empty { display: none; }
.details .info-card--location a.details__directions { display: inline-block; gap: 0; line-height: 44px; }
.details .details__directions span { display: inline; }
.details .details__directions span::before { content: '\00a0'; }
.timeline > .section-kicker, .invitation .rsvp > p { white-space: nowrap; }
.invitation .section-title, .invitation .about-heading { font-size: 38px; white-space: nowrap; }
@media (min-width: 720px) and (min-height: 820px) {
  .cover__book { width: 340px; height: 470px; border-radius: 170px 170px 10px 10px; }
  .cover__photo { border-radius: 162px 162px 6px 6px; }
  .cover__title { font-size: 64px; }
  .cover__name { font-size: 44px; }
  .cover__guest { font-size: 16px; }
}
@media (min-width: 720px) and (max-height: 819px) and (min-height: 640px) {
  .cover__book { width: 280px; height: 380px; border-radius: 140px 140px 8px 8px; }
  .cover__photo { border-radius: 132px 132px 4px 4px; }
}
.cover__guest { font-size: 17px; }
@media (min-width: 720px) and (min-height: 820px) { .cover__guest { font-size: 19px; } }
.timeline > .section-kicker, .invitation .rsvp > p, .hero .host-name { max-width: 100%; min-width: 0; }
.rsvp-form label { display: block; }
.rsvp-form input, .rsvp-form textarea { margin-top: 6px; }
.invitation .rsvp > p { font: 600 11px/normal var(--font-serif-body); letter-spacing: .2em; text-transform: uppercase; color: var(--green); text-align: center; }
.invitation .hero.section-pad { padding-top: 28px; }
.is-empty { display: none !important; }
.cover { padding-bottom: 100px; }
@media (max-height: 760px) { .cover { padding-bottom: 64px; } }