/* Mẫu 3 · Tạp Chí: nền giấy báo, đen + đỏ, Noto Serif Display đậm + Inter, đường kẻ biên tập */
:root {
  --font-serif-display: 'Noto Serif Display', Georgia, serif;
  --font-serif-heading: 'Inter', sans-serif;
  --font-serif-body: 'Inter', sans-serif;
  --font-number: 'Inter', sans-serif;
  --font-script: 'Noto Serif Display', Georgia, serif;
  --lb-navy: #111111; --lb-navy-deep: #000000; --lb-ink: #111111; --lb-sub: #2b2925; --lb-muted: #4a463f; --lb-sky: #cfc9bc;
  --lb-page: #f4f1ea; --lb-surface: #ffffff; --lb-line: #dcd7cc; --lb-ruling: #f4f1ea; --lb-photo: #dcd7cc; --lb-tape: transparent;
  --lb-on-accent: #f4f1ea; --lb-on-dark: #f4f1ea; --lb-on-dark-2: #cfc9bc;
  --hl: #c8102e;
  --ink: var(--lb-ink); --navy: var(--lb-navy); --gold: var(--hl); --gold-light: var(--hl); --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: #dcd7cc; }
@media (min-width: 720px) { body:not(.cover-visible) { background: #dcd7cc; } }
a { color: var(--hl); }
a:hover { color: #8f0b21; }
.invitation { box-shadow: 0 0 30px rgba(17, 17, 17, .15); }
.hero, .countdown-section, .dress-code, .rsvp, .guestbook { background-image: none; background-color: #f4f1ea; }
.details, .about, .timeline { background: #ffffff; border-top: 0; }
.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(24px, calc((100% - 560px) / 2)); padding-right: max(24px, calc((100% - 560px) / 2)); }
.invitation .details.section-pad, .invitation .about.section-pad, .invitation .timeline.section-pad { padding-top: 56px; padding-bottom: 56px; }
.invitation .hero.section-pad, .invitation .countdown-section.section-pad, .invitation .dress-code.section-pad, .invitation .rsvp.section-pad { padding-top: 56px; padding-bottom: 56px; }
.invitation .guestbook.section-pad { padding-top: 8px; }

/* chữ */
.invitation .section-title, .invitation .about-heading { font: 800 40px/1 var(--font-script); letter-spacing: -.01em; color: var(--lb-ink); text-align: left; }
.invitation .section-kicker, .countdown-kicker, .hero__subtitle, .details__slogan, .cover__eyebrow, .cover__book-subtitle, .details .details__location-label small { font: 700 11px/1.5 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--hl); text-align: left; }
.invitation .section-kicker { margin: 0 0 8px; order: -1; }
.organize-header, .about > .section-title, .timeline > .section-title { display: flex; flex-direction: column; }
.hero__title { font: 800 64px/.92 var(--font-script); letter-spacing: -.02em; text-align: left; color: var(--lb-ink); }
.hero .host-name, .details .details__name, .footer-name { font: italic 600 40px/1 var(--font-script); color: var(--lb-ink); text-align: left; }
.invitation .details .details__name { font-size: 22px; }
.hero__date { font: 700 11px/1.5 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--hl); text-align: left; }
.hero blockquote, blockquote { position: relative; padding: 16px 0 0 44px; border-top: 1px solid var(--lb-ink); font: 400 22px/1.35 var(--font-script); font-style: normal; color: var(--lb-ink); text-align: left; }
.hero blockquote::before { content: '\201C'; display: block; position: absolute; left: 0; top: 14px; font: 800 72px/.7 var(--font-script); color: var(--hl); }
.details__ceremony { font: 400 54px/.95 var(--font-script); letter-spacing: -.02em; color: var(--lb-ink); text-align: left; }
.ceremony-initial, .details__ceremony-line:first-child .ceremony-initial { color: var(--hl); font-weight: 800; }
.invitation .details .details__school { font: 700 16px/1.4 'Inter', sans-serif; letter-spacing: .08em; color: var(--lb-ink); text-align: left; }
.details__slogan { color: var(--lb-muted); letter-spacing: .12em; }
.details__invitation, .details__closing-text { text-align: left; }
.details__invitation { font: 400 15px/1.7 'Inter', sans-serif; color: var(--lb-sub); }
.details__closing-text, .timeline__note { font: italic 400 22px/1.3 var(--font-script); color: var(--lb-ink); text-align: center; }
.about-text, .guest-entry p { font-family: 'Inter', sans-serif; color: var(--lb-sub); }
.about-text { font-size: 15px; line-height: 1.75; }
.invitation .dress-code .dress-code__text, .dress-code__text { font: italic 400 22px/1.3 var(--font-script); color: var(--lb-ink); text-align: left; margin: 14px 0 0; }
.invitation .details.section-pad { align-items: stretch; }
.details__logo-frame, .details > * { text-align: left; }
.details__logo-frame { align-self: flex-start; width: 64px; height: 64px; }

/* bìa: trang bìa tạp chí toàn màn hình */
.cover { padding: 0; justify-content: flex-start; background-color: #dcd7cc; background-image: none; color: var(--lb-ink); }
.cover::before, .cover::after { display: none; }
.cover__frame { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: min(100%, 480px); height: 100svh; margin: 0 auto; background: #f4f1ea; }
.cover__eyebrow { margin: 0; padding: 20px 76px 0 20px; min-height: 64px; box-sizing: border-box; display: flex; align-items: center; border: 0; font: 700 10px/1.4 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--lb-ink); text-align: left; }
.cover__masthead { margin: 0; padding: 0 16px; font: 800 clamp(56px, 19vw, 88px)/.95 var(--font-script); letter-spacing: -.03em; text-transform: uppercase; color: var(--hl); text-align: left; }
.cover__book { position: relative; flex: 1; min-height: 0; margin: 14px 0 0; padding: 0; display: block; overflow: hidden; background: #dcd7cc; border: 0; border-radius: 0; box-shadow: none; rotate: 0deg; color: var(--lb-ink); cursor: pointer; }
.cover__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.cover__photo[hidden] { display: none; }
.cover__teaser { position: absolute; left: 20px; top: 24px; z-index: 1; width: 160px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.cover__teaser small { font: 800 10px/1.4 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--hl); }
.cover__teaser span { font: 600 22px/1.1 var(--font-script); color: var(--lb-ink); }
.cover__barcode { position: absolute; right: 20px; bottom: 24px; z-index: 1; width: 120px; height: 40px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px); }
.cover__footer { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 24px; background: var(--lb-ink); color: #f4f1ea; }
.cover__name { margin: 0; font: italic 600 34px/1.05 var(--font-script); color: #f4f1ea; overflow-wrap: anywhere; }
.cover__footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cover__to { min-width: 0; font: 400 12px/1.4 'Inter', sans-serif; color: #cfc9bc; }
.cover__to strong { color: #f4f1ea; }
.open-button { flex: none; align-self: auto; min-height: 48px; margin: 0; padding: 0 22px; gap: 8px; border-radius: 0; background: var(--hl); color: #ffffff; font: 800 12px/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.open-button:hover { background: #8f0b21; }
body.cover-visible .music-toggle { display: none; }
.cover__date:not([hidden])::before { content: ' \00B7 '; white-space: pre; }

/* trang đầu */
.hero { text-align: left; }
.hero__icon { margin: 0 0 6px; width: 32px; height: 32px; }
.hero__strip { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 3px solid var(--lb-ink); border-bottom: 1px solid var(--lb-ink); font: 700 10px/1.4 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--lb-ink); }
.hero__title { margin-top: 12px; padding-top: 0; border-top: 0; }
.hero__subtitle { margin: 6px 0 0; padding: 6px 0; border-top: 1px solid var(--lb-ink); text-align: left; }
.portrait-composition { width: 100%; margin: 20px 0 0; padding: 0; background: transparent; box-shadow: none; transform: none; }
.portrait-composition::before { display: none; }
.portrait-wrap { aspect-ratio: 3 / 4; }
.hero .portrait-note { position: static; margin: 8px 0 0; font: italic 400 12px/1.4 'Inter', sans-serif; color: var(--lb-muted); text-align: left; }
.hero .host-name { margin: 18px 0 0; }
.hero__date { margin: 10px 0 0; }

/* địa điểm */
.invitation .details .info-card--location { padding: 0; margin: 12px 0 0; background: #ffffff; border: 1.5px solid var(--lb-ink); border-radius: 0; box-shadow: none; text-align: left; }
.invitation .details .info-card--location > div { align-items: stretch; text-align: left; }
.details .details__location-label { width: auto; margin: 0 0 14px; padding: 8px 14px; background: var(--lb-ink); gap: 8px; }
.details .details__location-label small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #f4f1ea; }
.details .details__location-label svg { color: #f4f1ea; }
.details .info-card--location strong, .details .info-card--location > div > span, .details .info-card--location a.details__directions { margin-left: 14px; margin-right: 14px; }
.details .info-card--location strong { font: 600 22px/1.2 var(--font-script); }
.details .info-card--location > div > span { color: var(--lb-muted); font-size: 13px; }
.details .info-card--location a.details__directions { justify-content: flex-start; color: var(--hl); font: 800 12px/1.2 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.details .info-card--location a.details__directions:hover { color: #8f0b21; }

/* ngày, lịch, đếm ngược */
.organize-header { margin: 0 0 20px; text-align: left; }
.organize-date-banner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'main month' 'main year'; align-items: end; justify-items: start; gap: 4px 14px; margin: 0 0 20px; padding: 0 0 10px; border: 0; border-bottom: 3px solid var(--lb-ink); }
.date-col--main { grid-area: main; order: -1; align-items: flex-start; padding: 0; border: 0; text-align: left; }
.date-col--month { grid-area: month; align-self: end; }
.date-col--year { grid-area: year; align-self: start; }
.date-col__label { font: 400 22px/1.2 var(--font-script); letter-spacing: 0; color: var(--lb-ink); }
.date-weekday { order: 2; font: 800 12px/1.4 'Inter', sans-serif; letter-spacing: .16em; color: var(--lb-ink); }
.date-day { order: 1; font: 800 150px/.78 var(--font-script); letter-spacing: -.04em; color: var(--hl); }
.date-time { order: 3; font: 400 13px/1.4 'Inter', sans-serif; color: var(--lb-muted); }
.event-calendar { max-width: none; padding: 0; background: transparent; border: 0; border-radius: 0; }
.event-calendar__month { display: none; }
.event-calendar__weekdays { font: 800 10px/1.2 'Inter', sans-serif; letter-spacing: .08em; color: var(--lb-ink); padding-bottom: 8px; border-bottom: 1px solid var(--lb-ink); }
.event-calendar__days { row-gap: 0; font: 400 14px/1 'Inter', sans-serif; color: var(--lb-ink); }
.event-calendar__days span { height: 38px; border-bottom: 1px solid var(--lb-line); }
.event-calendar__days .is-event-day { width: auto; margin: 0; border-radius: 0; background: var(--hl); color: #ffffff !important; font-weight: 800 !important; }
.countdown-kicker { margin: 18px 0 12px; }
.countdown-grid { gap: 0; padding: 0; border-top: 1px solid var(--lb-ink); border-bottom: 1px solid var(--lb-ink); }
.countdown-box { border: 0; border-left: 1px solid var(--lb-line); border-radius: 0; background: transparent; align-items: flex-start; padding: 14px 8px; gap: 4px; }
.countdown-box:first-child { border-left: 0; }
.countdown-box strong { font: 800 40px/1 var(--font-script); color: var(--lb-ink); }
.countdown-box span { font: 700 10px 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--lb-muted); }
.details-actions { margin: 6px 0 0; }
.btn-rsvp-confirm { width: 100%; max-width: none; border-radius: 0; background: var(--lb-ink); color: #f4f1ea; font: 800 13px/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; min-height: 54px; }
.btn-rsvp-confirm:hover { background: var(--hl); }

/* album */
.about { text-align: left; }
.invitation .about-carousel { border: 0 !important; background: var(--lb-photo) !important; border-radius: 0 !important; }
.about-carousel__slide img, .about-carousel__slide.is-landscape img, .about-carousel__slide.is-portrait img { border: 0 !important; border-radius: 0; }
.gallery-arrow { border: 0; border-radius: 0; background: var(--lb-ink); color: #f4f1ea; }
.gallery-arrow:hover { background: var(--hl); }
.gallery-counter { top: 0; right: 0; border: 0; border-radius: 0; padding: 4px 10px; background: var(--lb-ink); color: #f4f1ea; font: 700 11px 'Inter', sans-serif; letter-spacing: .12em; }
.about-slider__dot, .about-slider__dot.is-active { border-radius: 0; }
.about-slider__dot.is-active { outline-color: var(--hl); }
.invitation .about-heading { margin-top: 44px; text-align: left; }
.about-story { align-items: stretch; }
.about-polaroid { width: 100%; padding: 0; background: transparent; box-shadow: none; rotate: 0deg; }
.about-polaroid::before { display: none; }
.about-polaroid img { aspect-ratio: 4 / 5; }
.about-polaroid figcaption { padding: 6px 0 0; font: italic 400 12px/1.4 'Inter', sans-serif; text-align: left; color: var(--lb-muted); }
.about-text { font: 400 15px/1.75 'Inter', sans-serif; }
.about-quote-box { padding: 16px 0 0; border-top: 1px solid var(--lb-ink); border-radius: 0; background: transparent; display: flex; gap: 12px; align-items: flex-start; }
.about-quote-box::before { font: 800 72px/.7 var(--font-script); color: var(--hl); }
.about-quote { font: 400 22px/1.35 var(--font-script); font-style: normal; color: var(--lb-ink); margin: 0; }

/* trang phục, lịch trình, lời chúc */
.dress-code { text-align: left; }
.palette { justify-content: flex-start; }
.palette__swatch { border-radius: 0; border: 1.5px solid var(--lb-ink); }
.palette__label { font: 600 11px/1.3 'Inter', sans-serif; color: var(--lb-ink); }
.timeline { align-items: stretch; text-align: left; }
.timeline__list { width: 100%; margin: 20px 0 0; padding: 0; border-top: 3px solid var(--lb-ink); }
.timeline__list::before, .timeline-row::before { display: none; }
.timeline-row { grid-template-columns: 84px 1fr; padding: 14px 0; border-bottom: 1px solid var(--lb-line); }
.timeline-row time { font: 800 22px/1.1 var(--font-script); color: var(--hl); }
.timeline-row strong { font: 600 15px/1.4 'Inter', sans-serif; color: var(--lb-ink); }
.timeline__note { text-align: left; }
.rsvp { text-align: left; }
.invitation .rsvp > p { text-align: left; margin-left: 0; font-size: 14px; }
.rsvp-form { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.rsvp-form label { font: 700 11px/1.4 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--lb-ink); gap: 2px; }
.rsvp-form label b { color: var(--hl); }
.rsvp-form input, .rsvp-form textarea { padding: 10px 0; border: 0; border-bottom: 1.5px solid var(--lb-ink); border-radius: 0; background: transparent; font: 400 18px/1.4 var(--font-script) !important; color: var(--lb-ink); }
.rsvp-form input:focus, .rsvp-form textarea:focus { border-bottom-color: var(--hl); box-shadow: none; }
.btn-quick-wishes { border: 1.5px solid var(--lb-ink); border-radius: 0; background: transparent; color: var(--lb-ink); }
.btn-quick-wishes:hover { background: var(--lb-ink); color: #f4f1ea; border-color: var(--lb-ink); }
.rsvp-form-actions .btn-submit, .btn-confirm-submit { border-radius: 0; background: var(--lb-ink); color: #f4f1ea; font: 800 12px/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.rsvp-form-actions .btn-submit:hover, .btn-confirm-submit:hover { background: var(--hl); }
.guest-entry, .guest-entry:nth-child(n) { padding: 14px 0; border: 0; border-top: 1px solid var(--lb-ink); border-radius: 0; background: transparent; rotate: 0deg; }
.guest-entry strong { font: italic 600 20px/1.2 var(--font-script); color: var(--lb-ink); }
.guest-entry p { font: 400 14px/1.6 'Inter', sans-serif; color: var(--lb-sub); }
.guest-entry time { font: 700 10px 'Inter', sans-serif; letter-spacing: .1em; color: var(--lb-muted); }
.invitation .site-footer { background: var(--lb-ink); text-align: left; }
.thank-you { max-width: none; margin: 0; font: 600 32px/1.1 var(--font-script); font-style: italic; color: #f4f1ea; text-align: left; }
.footer-name { margin: 14px 0 0; font-size: 24px; color: #cfc9bc; }
.footer-date { text-align: left; font: 400 12px 'Inter', sans-serif; color: #cfc9bc; }
.footer-credit { text-align: left; font: 700 10px 'Inter', sans-serif; letter-spacing: .16em; color: #cfc9bc; }

/* hộp thoại và điều khiển nổi */
.attendance-modal__backdrop, .wish-modal__backdrop { background: rgba(17, 17, 17, .55) !important; }
.attendance-modal__content, .wish-modal__content, .error-card { border: 1.5px solid var(--lb-ink); border-radius: 0; background: #ffffff; box-shadow: none; }
.attendance-modal__header, .wish-modal__header { background: #f4f1ea; }
.attendance-modal__header h3, .wish-modal__header h3, .error-title { font: 800 24px/1.2 var(--font-script); color: var(--lb-ink); }
.attendance-modal__close, .wish-modal__close { border-radius: 0; }
.attendance-form input[type='text'], .attendance-form textarea, .attendance-option .option-card, .wish-suggest-item { border-radius: 0; }
.attendance-option input[type='radio']:checked + .option-card { border-color: var(--hl); background: #f4f1ea; box-shadow: none; }
.attendance-option .option-card strong { color: var(--lb-ink); }
.wish-suggest-item:hover, .wish-suggest-item:active { border-color: var(--hl); }
.image-lightbox__counter, .image-lightbox__btn, .image-lightbox__nav { border-radius: 0; }
.image-lightbox__img { border-radius: 0; }
.toast { border-radius: 0; background: var(--lb-ink); color: #f4f1ea; }
.btn-scroll-top { border-radius: 0; border-color: var(--lb-ink); }
.scroll-progress__bar { background: var(--hl); }
.music-toggle, .music-toggle.playing, .music-toggle.paused { background: var(--lb-ink); border-color: var(--lb-ink); }
.error-screen { background: #f4f1ea; }
.btn-error-reload { border-radius: 0; background: var(--hl); color: #ffffff; }

/* trang đầu: bớt khoảng trống phía trên, tên chủ thiệp luôn 1 dòng */
.invitation .hero.section-pad { padding-top: 20px; }
.hero .host-name { margin-top: 14px; font-size: clamp(24px, 8.6vw, 38px); white-space: nowrap; overflow-wrap: normal; }

/* câu trích ở trang đầu: chữ nhỏ lại một chút */
.hero blockquote, blockquote { font-size: 16px; line-height: 1.45; }

/* địa điểm: logo + tên trường cùng một hàng, lời mời có tên in đậm */
.details__head { display: flex; align-items: center; gap: 14px; }
.details__head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.details__head .details__school, .details__head .details__slogan { margin: 0; }
.details__ceremony { margin-top: 16px; }
.details__invitation strong { font-weight: 700; color: var(--lb-ink); }

/* ngày tổ chức: tiêu đề căn trái; số ngày lớn, cột thông tin bên phải */
.organize-header { align-items: flex-start; justify-content: flex-start; gap: 8px; width: auto; text-align: left; }
.organize-title { text-transform: none; letter-spacing: -.01em; white-space: normal; }
.organize-date-banner { display: flex; align-items: flex-end; justify-content: flex-start; gap: 14px; max-width: none; width: auto; margin: 0 0 20px; padding: 0 0 10px; border: 0; border-bottom: 3px solid var(--lb-ink); }
.organize-date-banner .date-day { order: 0; flex: none; }
.date-info { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; text-align: left; }
.date-info .date-weekday { margin: 0; font: 800 12px/1.4 'Inter', sans-serif; letter-spacing: .16em; color: var(--lb-ink); }
.date-month-year { display: block; font: 400 22px/1.2 var(--font-script); letter-spacing: 0; text-transform: lowercase; color: var(--lb-ink); }
.date-month-year::first-letter { text-transform: uppercase; }
.date-year::before { content: ', '; white-space: pre; }
.date-info .date-time { margin: 0; font: 400 13px/1.4 'Inter', sans-serif; color: var(--lb-muted); }

/* tiêu đề mục: kicker đỏ phía trên, tiêu đề, dòng phụ xám */
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.section-head .section-kicker, .section-head .section-title, .section-head .about-heading { margin: 0; text-align: left; }
.section-head .section-sub { margin: 0; font: 400 13px/1.5 'Inter', sans-serif; letter-spacing: 0; text-transform: none; color: var(--lb-muted); }
.section-head--rule { margin-top: 32px; padding-top: 16px; border-top: 3px solid var(--lb-ink); }
.about-card > .section-head--rule { margin-bottom: 14px; }
.about > .section-head + .about-card { margin-top: 16px; }

/* lời tự bạch: ảnh nhỏ bên trái + chú thích, chữ cái đầu lớn, câu trích đỏ giữa hai đường kẻ */
.about-story { gap: 14px; margin-top: 4px; }
.about-polaroid { display: flex; align-items: flex-end; gap: 14px; width: 100%; margin: 0; }
.about-polaroid img { flex: none; width: 170px; height: 220px; aspect-ratio: auto; object-fit: cover; background: var(--lb-photo); }
.about-polaroid figcaption { padding: 0; font: italic 400 18px/1.3 var(--font-script); color: var(--lb-muted); text-align: left; }
.about-content { margin-top: 6px; }
.about-text { font: 400 15px/1.75 'Inter', sans-serif; color: var(--lb-sub); }
.about-text::first-letter { float: left; padding: 6px 8px 0 0; font: 800 64px/.8 var(--font-script); color: var(--hl); }
.about-quote-box { display: block; margin-top: 8px; padding: 18px 0; border-top: 1px solid var(--lb-ink); border-bottom: 1px solid var(--lb-ink); }
.about-quote-box::before, .about-quote-box .quote-icon { display: none; }
.about-quote { font: 600 24px/1.3 var(--font-script); font-style: normal; color: var(--hl); }

/* trang phục: kicker phía trên, bảng màu liền khối có viền */
.section-head .dress-code__text { margin: 0; font: italic 400 20px/1.3 var(--font-script); }
.palette { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 16px 0 0; border: 1.5px solid var(--lb-ink); }
.palette__item { display: flex; flex-direction: column; gap: 0; min-width: 0; max-width: none; }
.palette__swatch { display: block; width: 100%; height: 90px; border: 0; }
.palette__label { padding: 8px 6px; border-top: 1.5px solid var(--lb-ink); background: #ffffff; font: 700 10px/1.3 'Inter', sans-serif; color: var(--lb-ink); text-align: left; }

/* lịch trình: nền đen, kicker hồng, giờ trắng kem */
.timeline { background: var(--lb-ink); color: #f4f1ea; }
.timeline .section-head .section-kicker { color: #ff6b7f; }
.timeline .section-head .section-title { color: #f4f1ea; }
.timeline__list { margin: 16px 0 0; border-top: 0; }
.timeline-row { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid #3d3a35; }
.timeline-row time { flex: none; width: 92px; font: 800 30px/1.1 var(--font-script); color: #f4f1ea; }
.timeline-row strong { font: 500 16px/1.4 'Inter', sans-serif; color: #f4f1ea; }
.timeline__note { margin: 16px 0 0; font: italic 400 18px/1.3 var(--font-script); color: #cfc9bc; text-align: left; }

/* gửi lời chúc: kicker phía trên, nút gửi đỏ liền nút gợi ý */
.rsvp .section-head .section-sub { font-size: 14px; line-height: 1.6; }
.rsvp-form { margin-top: 16px; }
.rsvp-form-actions { gap: 0; }
.rsvp-form-actions .btn-submit { background: var(--hl); }
.rsvp-form-actions .btn-submit:hover { background: #8f0b21; }

/* trang đầu: tên chủ thiệp + lớp nằm cùng một hàng */
.hero__namerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.hero__namerow .host-name { margin: 0; min-width: 0; font-size: clamp(22px, 7.4vw, 34px); }
.hero__class { flex: none; padding: 4px 8px; border: 1.5px solid var(--lb-ink); font: 800 12px/1.2 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--lb-ink); }
.hero__class:empty { display: none; }