/* Mẫu 5 · Sticker Pop: tím oải hương + xanh chanh + hồng, viền đậm 2.5px, bóng cứng, Baloo 2.
   Thông số bám theo artboard "Mẫu 5 · Sticker Pop" (khung 390px). */
:root {
  --font-serif-display: 'Be Vietnam Pro', sans-serif;
  --font-serif-heading: 'Be Vietnam Pro', sans-serif;
  --font-serif-body: 'Be Vietnam Pro', sans-serif;
  --font-number: 'Baloo 2', sans-serif;
  --font-script: 'Baloo 2', sans-serif;
  --sp-ink: #1b1340;
  --sp-violet: #4a3c99;
  --sp-page: #ede7ff;
  --sp-dot: #c9bcf5;
  --sp-photo: #d9ccff;
  --sp-white: #ffffff;
  --lime: #c6f432;
  --pink: #ff6fb5;
  --bw: 2.5px;
  --ink: var(--sp-ink); --navy: var(--sp-ink); --gold: var(--sp-ink); --gold-light: var(--lime); --silk-gradient: var(--sp-page);
}

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

.invitation { display: flex; flex-direction: column; width: min(100%, 760px); background: var(--sp-page); box-shadow: 0 0 0 var(--bw) var(--sp-ink); }
.invitation > .site-footer { flex: 1 0 auto; }

/* Bỏ trang trí của các mẫu cũ */
.mini-ornament, .ornament, .gold-line-divider, .organize-header .floral-branch, .academic-ribbon,
.hero__cap, .details__cap, .guestbook-cap, .details__closing-heart, .cover__icon, .cover__tagline, .cover__hint,
.portrait-composition::before, .about-polaroid::before, .gallery-counter::before, .gallery-counter::after { display: none !important; }

/* ---------- Khung các phần ---------- */
.invitation .section-pad,
.invitation .site-footer {
  padding: 60px max(26px, calc((100% - 560px) / 2));
  background-image: none;
  border: 0;
  text-align: center;
}
.invitation .hero,
.invitation .dress-code { background: var(--sp-white); border-top: var(--bw) solid var(--sp-ink); border-bottom: var(--bw) solid var(--sp-ink); }
.invitation .details,
.invitation .about,
.invitation .timeline { background: var(--sp-page); }
.invitation .countdown-section { background: var(--sp-ink); color: var(--sp-white); }
.invitation .rsvp { padding-bottom: 40px; background: var(--lime); border-top: var(--bw) solid var(--sp-ink); }
.invitation .guestbook.section-pad { padding-top: 12px; padding-bottom: 56px; background: var(--lime); }
.invitation .dress-code.section-pad { padding-bottom: 52px; }
.invitation .hero.section-pad { container-type: normal; min-height: 0; }
.invitation .details.section-pad { container-type: normal; }
.invitation .site-footer { padding-top: 64px; padding-bottom: 44px; background: var(--sp-ink); color: var(--sp-white); border-top: var(--bw) solid var(--sp-ink); }

/* Các phần xếp dọc, căn giữa */
.invitation .hero, .invitation .details, .invitation .countdown-section > div, .invitation .about, .invitation .dress-code,
.invitation .timeline, .invitation .rsvp, .invitation .site-footer {
  display: flex; flex-direction: column; align-items: center;
}
.invitation .hero, .invitation .dress-code, .invitation .rsvp { gap: 16px; }
.invitation .details { gap: 14px; }
.invitation .countdown-section { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.invitation .countdown-section > div { gap: 22px; width: 100%; }
.invitation .about, .invitation .timeline { gap: 20px; }
.invitation .site-footer { gap: 12px; }
.invitation .section-pad > *, .invitation .site-footer > * { margin: 0; }

/* ---------- Chữ chung ---------- */
.invitation .section-title,
.invitation .about-heading {
  margin: 0;
  font: 800 34px/1.05 var(--font-script);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--sp-ink);
  text-align: center;
}
/* Nhãn dạng viên thuốc (tag) */
.invitation .section-kicker,
.hero__subtitle,
.cover__eyebrow,
.invitation .dress-code .dress-code__text {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 4px 12px;
  border: 2px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--lime);
  font: 700 11px/1.5 var(--font-serif-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-ink);
  text-align: center;
}
.invitation .section-kicker--pink, .hero__subtitle { background: var(--pink); }
.invitation .dress-code .dress-code__text { background: var(--sp-page); }
.organize-header, .organize-header + * { width: auto; }
.invitation .organize-header { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.invitation .countdown-section .organize-title { color: var(--sp-white); }
.script { color: var(--sp-ink); }
blockquote { margin: 0; font: 500 16px/1.6 var(--font-serif-body); font-style: normal; color: var(--sp-ink); white-space: pre-line; }

/* ---------- Bìa ---------- */
.cover {
  /* Trên web, bìa rộng bằng khung thiệp (760px) và nằm giữa màn hình */
  left: 0;
  right: 0;
  width: min(100%, 760px);
  margin: 0 auto;
  box-shadow: 0 0 0 var(--bw) var(--sp-ink);
  justify-content: flex-start;
  padding: 0;
  background-color: var(--sp-page);
  background-image: radial-gradient(var(--sp-dot) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  color: var(--sp-ink);
}
.cover__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: min(100%, 440px);
  max-width: none;
  min-height: 100%;
  margin: 0 auto;
  padding: 60px 26px 44px;
  box-sizing: border-box;
  text-align: center;
}
.cover__frame > * { margin: 0; }
.cover__title { font: 800 82px/.82 var(--font-script); letter-spacing: -.02em; color: var(--sp-ink); text-align: center; }
.cover__title span { display: inline-block; margin-top: 8px; padding: 0 14px; border: 3px solid var(--sp-ink); border-radius: 18px; background: var(--pink); rotate: -3deg; }
.cover__card {
  position: relative;
  display: block;
  flex: none;
  width: 260px;
  height: 230px;
  margin-top: 6px;
  padding: 10px;
  box-sizing: border-box;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-white);
  box-shadow: 5px 5px 0 var(--sp-ink);
  color: var(--sp-ink);
  cursor: pointer;
  rotate: 2deg;
  transition: transform .65s ease, opacity .65s ease;
}
.cover__selfie { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; background: var(--sp-photo); }
.cover__selfie img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover__class {
  position: absolute;
  top: -26px;
  left: -30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 50%;
  background: var(--lime);
  font-family: var(--font-script);
  rotate: -14deg;
}
.cover__class small { font-size: 11px; font-weight: 700; line-height: 1; }
.cover__class b { font-size: 26px; font-weight: 800; line-height: 1; }
.cover__note {
  position: absolute;
  right: -14px;
  bottom: -18px;
  padding: 4px 12px;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 10px;
  background: var(--sp-white);
  font: 700 13px/1.5 var(--font-serif-body);
  white-space: nowrap;
  rotate: -6deg;
}
.cover .cover__name { margin-top: 14px; font: 800 32px/1 var(--font-script); color: var(--sp-ink); overflow-wrap: anywhere; }
.cover__guest { font: 400 14px/1.5 var(--font-serif-body); color: var(--sp-ink); }
.cover__guest strong { font-weight: 700; }
.cover .open-button {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 56px;
  margin-top: 16px;
  padding: 0 30px;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-ink);
  color: var(--lime);
  box-shadow: 4px 4px 0 var(--pink);
  font: 800 18px/1 var(--font-script);
}
.cover .open-button:hover { background: var(--sp-ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pink); }
.cover.is-opening .cover__card { transform: scale(1.04); opacity: .8; }
@media (max-height: 760px) {
  .cover__frame { gap: 14px; padding-top: 44px; padding-bottom: 28px; }
  .cover__title { font-size: 66px; }
  .cover__card { width: 230px; height: 196px; }
  .cover .cover__name { margin-top: 10px; font-size: 28px; }
}
@media (max-height: 640px) {
  .cover__title { font-size: 54px; }
  .cover__card { width: 200px; height: 164px; }
}
/* Web: khung ảnh bìa to hơn; màn hình thấp thì thu chữ tiêu đề để vẫn vừa một màn */
@media (min-width: 720px) {
  .cover__card { width: 360px; height: 300px; }
  .cover__class { top: -30px; left: -36px; width: 96px; height: 96px; }
  .cover__class b { font-size: 29px; }
}
@media (min-width: 720px) and (max-height: 900px) {
  .cover__frame { gap: 14px; padding-top: 36px; padding-bottom: 28px; }
  .cover__title { font-size: 64px; }
  .cover .cover__name { margin-top: 10px; font-size: 28px; }
}
@media (min-width: 720px) and (max-height: 760px) {
  .cover__title { font-size: 52px; }
  .cover__card { width: 300px; height: 248px; }
}

/* ---------- Lễ tốt nghiệp ---------- */
.hero__icon { display: block; width: 52px; height: 52px; margin: 0; color: var(--sp-ink); }
.hero__title { margin: 0; font: 800 50px/1 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--sp-ink); }
.invitation .portrait-composition {
  position: relative;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin: 14px 0 6px;
  padding: 10px;
  box-sizing: border-box;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-white);
  box-shadow: 5px 5px 0 var(--sp-ink);
  transform: none;
  rotate: -2deg;
}
.invitation .portrait-wrap { width: 100%; height: auto; aspect-ratio: 256 / 336; margin: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--sp-photo); box-shadow: none; }
.invitation .portrait { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Tên + nhãn lớp dán bên cạnh */
.hero__name-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px 10px; max-width: 100%; }
.hero__class {
  flex: none;
  padding: 2px 10px;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 10px;
  background: var(--lime);
  box-shadow: 2px 2px 0 var(--sp-ink);
  font: 800 18px/1.3 var(--font-script);
  color: var(--sp-ink);
  rotate: 6deg;
}
.hero .host-name { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; font: 800 34px/1.05 var(--font-script); color: var(--sp-ink); white-space: normal; overflow-wrap: anywhere; }
.hero__date { display: inline-block; width: auto; margin: 0; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--sp-ink); font: 700 13px/1.5 var(--font-serif-body); letter-spacing: .08em; text-transform: none; color: var(--lime); }
.hero__weekday:not(:empty)::after { content: ' · '; white-space: pre; }
.invitation .hero blockquote { max-width: 100%; margin-top: 8px; font: 500 16px/1.6 var(--font-serif-body); font-style: normal; }

/* ---------- Trường & địa điểm ---------- */
.details__logo-frame { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 0; overflow: hidden; border: var(--bw) dashed var(--sp-ink); border-radius: 50%; background: var(--sp-white); }
.details__logo-frame:has(.details__logo[hidden]) { display: none; }
.details .details__logo { width: 100%; height: 100%; margin: 0; object-fit: cover; mix-blend-mode: normal; }
.invitation .details .details__school { width: auto; max-width: 100%; margin: 0; font: 800 22px/1.5 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--sp-ink); }
.details__slogan { max-width: 100%; margin: 0; font: 700 11px/1.5 var(--font-serif-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sp-violet); }
.invitation .details .details__ceremony { width: auto; margin: 12px 0 0; font: 800 50px/.9 var(--font-script); letter-spacing: 0; color: var(--sp-ink); }
.details__ceremony-line { display: block; white-space: normal; }
.details__ceremony-line--second { display: inline-block; margin-top: 6px; padding: 2px 12px; border: var(--bw) solid var(--sp-ink); border-radius: 14px; background: var(--lime); font-size: inherit; letter-spacing: 0; rotate: 2deg; }
.ceremony-initial, .details__ceremony-line:first-child .ceremony-initial { font: inherit; letter-spacing: 0; line-height: inherit; color: inherit; }
.invitation .details .details__name { width: auto; max-width: 100%; margin: 6px 0 0; font: 700 26px/1.2 var(--font-script); color: var(--sp-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(--sp-ink); }
.invitation .details .info-card--location {
  width: 100%;
  max-width: none;
  margin: 14px 0 0;
  padding: 22px 20px;
  box-sizing: border-box;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-white);
  box-shadow: 5px 5px 0 var(--sp-ink);
}
.info-card--location > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.details .details__location-label { display: flex; flex-direction: column; align-items: center; gap: 8px; width: auto; margin: 0; color: var(--sp-ink); }
.details__location-label i { display: none; }
.details .details__location-label svg { width: 48px; height: 48px; padding: 12px; box-sizing: border-box; border: var(--bw) solid var(--sp-ink); border-radius: 50%; background: var(--pink); color: var(--sp-ink); }
.details .details__location-label small { font: 700 11px/1.5 var(--font-serif-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sp-ink); }
.details .info-card--location strong { font: 800 22px/1.2 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--sp-ink); }
.details .info-card--location > div > span { margin: 0; font: 400 14px/1.5 var(--font-serif-body); color: var(--sp-violet); }
.details .info-card--location a.details__directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  margin: 4px 0 0;
  padding: 0 18px;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 999px;
  background: var(--lime);
  box-shadow: none;
  color: var(--sp-ink);
  font: 700 14px/1 var(--font-serif-body);
  letter-spacing: 0;
  text-decoration: none;
}
.details .info-card--location a.details__directions svg { display: none; }
.details .info-card--location a.details__directions:hover { transform: none; box-shadow: none; background: var(--pink); color: var(--sp-ink); }
.details .details__directions span { color: inherit; }
.map-embed-wrap { border: var(--bw) solid var(--sp-ink); border-radius: 20px; filter: none; }

/* ---------- Ngày tổ chức (nền tím than) ---------- */
.invitation .organize-date-banner { display: flex; align-items: center; justify-content: center; gap: 12px; width: auto; max-width: none; margin: 0; padding: 0; border: 0; }
.date-col--month, .date-col--year { display: block; }
.date-col__label {
  display: inline-block;
  padding: 8px 12px;
  border: var(--bw) solid var(--sp-white);
  border-radius: 14px;
  font: 700 15px/1.5 var(--font-script);
  letter-spacing: 0;
  color: var(--sp-white);
}
.date-col--month .date-col__label { rotate: -4deg; }
.date-col--year .date-col__label { rotate: 4deg; }
.invitation .date-col--main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 120px;
  height: 120px;
  padding: 0;
  box-sizing: border-box;
  border: 3px solid var(--sp-white);
  border-radius: 50%;
  background: var(--lime);
  box-shadow: none;
  color: var(--sp-ink);
}
.date-weekday { margin: 0; font: 700 12px/1.5 var(--font-script); letter-spacing: 0; color: var(--sp-ink); }
.date-day { font: 800 54px/.9 var(--font-script); color: var(--sp-ink); }
.date-time { margin: 0; font: 700 13px/1.5 var(--font-script); letter-spacing: 0; color: var(--sp-ink); }
.event-date-fallback { color: var(--sp-white); }
.invitation .event-calendar {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 12px;
  box-sizing: border-box;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-white);
  box-shadow: 5px 5px 0 var(--pink);
  color: var(--sp-ink);
}
.event-calendar__month { margin: 0 0 8px; font: 800 22px/1.5 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--sp-ink); text-align: center; }
.event-calendar__weekdays { gap: 2px; padding-bottom: 6px; border: 0; font: 700 10px/1.5 var(--font-serif-body); letter-spacing: 0; color: var(--sp-violet); }
.event-calendar__days { gap: 2px; padding-top: 0; font: 500 14px/1 var(--font-serif-body); color: var(--sp-ink); }
.event-calendar__days span { display: flex; align-items: center; justify-content: center; height: 34px; }
.event-calendar__days .is-event-day {
  width: auto;
  margin: 0;
  border: 2px solid var(--sp-ink);
  border-radius: 10px;
  background: var(--pink);
  font-size: 14px;
  font-weight: 800 !important;
  color: var(--sp-ink) !important;
  rotate: -6deg;
}
.event-calendar__days .is-event-day::before { content: none; }
.countdown-kicker { margin: 6px 0 0; font: 700 11px/1.5 var(--font-serif-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sp-photo); }
.invitation .countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: none; margin: 0; padding: 0; }
.invitation .countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 12px 0 8px;
  border: var(--bw) solid var(--sp-white);
  border-radius: 16px;
  background: var(--lime);
  box-shadow: none;
  color: var(--sp-ink);
  font-family: var(--font-script);
}
.invitation .countdown-box:nth-child(1) { rotate: -3deg; }
.invitation .countdown-box:nth-child(2) { background: var(--pink); rotate: 2deg; }
.invitation .countdown-box:nth-child(3) { background: var(--sp-white); rotate: -2deg; }
.invitation .countdown-box:nth-child(4) { background: var(--sp-photo); rotate: 3deg; }
.countdown-box strong { font: 800 32px/1 var(--font-script); color: var(--sp-ink); -webkit-text-stroke: 0; }
.countdown-box span { font: 700 12px/1.5 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--sp-ink); }
.invitation .details-actions { display: flex; justify-content: center; margin: 8px 0 0; }
.btn-rsvp-confirm {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 0 26px;
  border: var(--bw) solid var(--sp-white);
  border-radius: 999px;
  background: var(--lime);
  color: var(--sp-ink);
  box-shadow: 4px 4px 0 var(--pink);
  font: 800 17px/1 var(--font-script);
}
.btn-rsvp-confirm:hover { background: var(--lime); box-shadow: 5px 5px 0 var(--pink); }
.btn-rsvp-confirm svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; }
.btn-rsvp-confirm span { color: inherit; font: inherit; }
.invitation .details__closing-text { margin: 4px 0 0; font: 700 24px/1.5 var(--font-script); color: var(--sp-white); text-align: center; }

/* ---------- Album & lời tự bạch ---------- */
.invitation .about-card { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: none; margin: 0; }
.about-slider-wrap { --car-h: 420px; position: relative; width: 100%; max-width: none; }
.invitation .about-carousel {
  height: calc(var(--car-h) + 25px);
  max-height: none;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  background: var(--sp-white) !important;
  border: var(--bw) solid var(--sp-ink) !important;
  border-radius: 20px !important;
  box-shadow: 5px 5px 0 var(--sp-ink) !important;
}
.invitation .about-carousel__slide { background: transparent; }
.invitation .about-carousel__track { height: 100%; border-radius: 12px; overflow: hidden; background: var(--sp-photo); }
.about-carousel__slide img,
.about-carousel__slide.is-landscape img,
.about-carousel__slide.is-portrait img { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; object-fit: cover; border: 0 !important; border-radius: 0; box-shadow: none; background: var(--sp-photo); }
.gallery-arrow {
  top: calc((var(--car-h) + 25px) / 2);
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 50%;
  background: var(--lime);
  color: var(--sp-ink);
  box-shadow: none;
  font: 700 24px/1 var(--font-serif-body);
}
.gallery-arrow:hover { background: var(--pink); }
.gallery-arrow--prev { left: -10px; }
.gallery-arrow--next { right: -10px; }
.gallery-counter { position: absolute; top: 22px; right: 22px; z-index: 21; margin: 0; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--sp-ink); font: 700 12px/1.5 var(--font-serif-body); letter-spacing: 0; color: var(--sp-white); }
/* Chấm chỉ báo: tròn 12px, chấm đang xem màu hồng */
.about-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; padding: 0; overflow: visible; }
.about-slider__dot, .about-slider__dot.is-active {
  flex: none;
  width: 12px;
  min-width: 0;
  max-width: none;
  height: 12px;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--sp-ink);
  border-radius: 50%;
  background: var(--sp-white);
  box-shadow: none;
  outline: 0;
  opacity: 1;
  transform: none;
}
.about-slider__dot.is-active { background: var(--pink); }
.about-slider__dot img { display: none !important; }
.invitation .about-kicker { margin-top: 30px; }
.invitation .about-slider-wrap.is-empty ~ .about-kicker { margin-top: 0; }
.invitation .about-story { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; margin: 0; }
.invitation .about-polaroid {
  width: 220px;
  margin: 6px 0 0;
  padding: 10px 10px 0;
  box-sizing: border-box;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-white);
  box-shadow: 5px 5px 0 var(--sp-ink);
  transform: none;
  rotate: 3deg;
}
.invitation .about-polaroid img,
.invitation .about-polaroid.is-landscape img,
.invitation .about-polaroid.is-portrait img { display: block; width: 100%; height: 196px; aspect-ratio: auto; object-fit: cover; border-radius: 10px; background: var(--sp-photo); }
.about-polaroid figcaption { padding: 8px 0 10px; font: 700 18px/1.5 var(--font-script); color: var(--sp-ink); text-align: center; }
.about-content { width: 100%; }
.about-text { margin: 8px 0 0; font: 400 15px/1.75 var(--font-serif-body); text-align: left; color: var(--sp-ink); }
.invitation .about-quote-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px 22px;
  box-sizing: border-box;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 20px;
  background: var(--pink);
  box-shadow: 5px 5px 0 var(--sp-ink);
  text-align: left;
}
.about-quote-box .quote-icon { display: none; }
.about-quote-box::before { content: '\201C'; display: block; width: auto; margin: 0; border: 0; font: 800 60px/.6 var(--font-script); color: var(--sp-ink); }
.about-quote-box::after { content: none; }
.about-quote { margin: 0; font: 700 19px/1.35 var(--font-script); font-style: normal; text-align: left; color: var(--sp-ink); }

/* ---------- Trang phục ---------- */
.invitation .palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 6px 0 0; }
.palette__item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: auto; min-width: 0; max-width: none; }
.palette__swatch { width: 62px; height: 62px; border: var(--bw) solid var(--sp-ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--sp-ink); }
.palette__item:nth-child(4n + 1) .palette__swatch { rotate: -3deg; }
.palette__item:nth-child(4n + 2) .palette__swatch { rotate: 2deg; }
.palette__item:nth-child(4n + 3) .palette__swatch { rotate: -2deg; }
.palette__item:nth-child(4n) .palette__swatch { rotate: 3deg; }
.palette__item:hover .palette__swatch { transform: none; }
.palette__label { font: 700 11px/1.3 var(--font-serif-body); white-space: normal; text-align: center; color: var(--sp-ink); }

/* ---------- Lịch trình: thẻ dán ---------- */
.invitation .timeline__list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: none; margin: 0; padding: 0; }
.timeline__list::before { content: none !important; }
.invitation .timeline-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 10px 16px 10px 10px;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 16px;
  background: var(--sp-white);
  box-shadow: 4px 4px 0 var(--sp-ink);
  text-align: left;
}
.timeline-row::before { content: none !important; }
.timeline-row time { flex: none; padding: 4px 12px; border: 2px solid var(--sp-ink); border-radius: 10px; background: var(--lime); font: 800 18px/1.5 var(--font-script); letter-spacing: 0; color: var(--sp-ink); text-align: center; }
.timeline-row:nth-child(5n + 2) time { background: var(--pink); }
.timeline-row:nth-child(5n + 3) time { background: var(--sp-white); }
.timeline-row:nth-child(5n + 4) time { background: var(--sp-photo); }
.timeline-row strong { font: 600 16px/1.4 var(--font-serif-body); white-space: normal; color: var(--sp-ink); }
.invitation .timeline__note { position: static; margin: 0; font: 700 20px/1.5 var(--font-script); white-space: normal; color: var(--sp-ink); transform: none; opacity: 1; pointer-events: auto; }

/* ---------- Gửi lời chúc ---------- */
.invitation .rsvp > p { margin: 0; font: 500 14px/1.6 var(--font-serif-body); letter-spacing: 0; text-transform: none; color: var(--sp-ink); }
.invitation .rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-white);
  box-shadow: 5px 5px 0 var(--sp-ink);
  text-align: left;
}
.rsvp-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; font: 700 13px/1.4 var(--font-serif-body); color: var(--sp-ink); }
.rsvp-form input, .rsvp-form textarea { margin: 0; padding: 12px 14px; border: var(--bw) solid var(--sp-ink); border-radius: 14px; background: var(--sp-white); color: var(--sp-ink); font: 400 16px/1.45 var(--font-serif-body) !important; resize: none; }
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder { color: #8d84b3; opacity: 1; }
.rsvp-form input:focus, .rsvp-form textarea:focus { border-color: var(--sp-ink); box-shadow: 3px 3px 0 var(--pink); outline: 0; }
.rsvp-form-actions { display: flex; gap: 10px; max-width: none; margin: 0; }
.btn-quick-wishes { flex: none; width: 54px; height: 54px; padding: 0; border: var(--bw) solid var(--sp-ink); border-radius: 16px; background: var(--pink); color: var(--sp-ink); box-shadow: none; }
.btn-quick-wishes:hover { background: var(--lime); border-color: var(--sp-ink); color: var(--sp-ink); }
.rsvp-form-actions .btn-submit {
  display: flex;
  flex: 1;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 16px;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 16px;
  background: var(--sp-ink);
  color: var(--lime);
  box-shadow: none;
  font: 800 17px/1 var(--font-script);
}
.rsvp-form-actions .btn-submit:hover { filter: none; background: var(--sp-violet); }

/* ---------- Sổ lưu bút ---------- */
.invitation .guestbook__list { display: flex; flex-direction: column; gap: 16px; max-width: none; max-height: none; margin: 0; padding: 0; overflow: visible; }
.invitation .guest-entry, .invitation .guest-entry:nth-child(n) {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 18px;
  box-sizing: border-box;
  border: var(--bw) solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-white);
  box-shadow: 5px 5px 0 var(--sp-ink);
  text-align: left;
}
.invitation .guest-entry:nth-child(3n + 1) { rotate: -1.5deg; }
.invitation .guest-entry:nth-child(3n + 2) { rotate: 1deg; }
.invitation .guest-entry:nth-child(3n) { rotate: -.5deg; }
.guest-entry strong { display: block; padding-right: 96px; font: 800 20px/1.5 var(--font-script); color: var(--sp-ink); overflow-wrap: anywhere; }
.guest-entry p { margin: 6px 0 0; font: 400 14px/1.6 var(--font-serif-body); color: var(--sp-ink); }
.guest-entry time { position: absolute; top: 22px; right: 18px; font: 600 11px/1.5 var(--font-serif-body); color: var(--sp-violet); }

/* ---------- Chân trang ---------- */
.invitation .thank-you { max-width: none; margin: 0; font: 800 40px/1 var(--font-script); color: var(--sp-white); text-align: center; }
.invitation .footer-name { margin: 10px 0 0; padding: 4px 16px; border: var(--bw) solid var(--sp-white); border-radius: 14px; background: var(--pink); font: 800 22px/1.5 var(--font-script); color: var(--sp-ink); overflow-wrap: anywhere; rotate: -3deg; }
.invitation .footer-date { margin: 6px 0 0; font: 400 13px/1.5 var(--font-serif-body); letter-spacing: 0; color: var(--sp-photo); }
.invitation .footer-credit { margin: 20px 0 0; font: 700 11px/1.5 var(--font-serif-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sp-photo); }

/* ---------- Hộp thoại ---------- */
.attendance-modal__backdrop, .wish-modal__backdrop { background: rgba(27, 19, 64, .55) !important; }
.attendance-modal__content, .wish-modal__content, .error-card { border: var(--bw) solid var(--sp-ink); border-radius: 20px; background: var(--sp-white); box-shadow: 5px 5px 0 var(--sp-ink); }
.attendance-modal__header, .wish-modal__header { background: var(--lime); border-color: var(--sp-ink); }
.attendance-modal__header h3, .wish-modal__header h3, .error-title { font: 800 24px/1.2 var(--font-script); color: var(--sp-ink); }
.attendance-modal__close, .wish-modal__close { border: var(--bw) solid var(--sp-ink); background: var(--sp-white); color: var(--sp-ink); }
.attendance-modal__close:hover, .wish-modal__close:hover { background: var(--pink); color: var(--sp-ink); }
.attendance-form .form-label, .attendance-options-group .group-label { color: var(--sp-ink); font-family: var(--font-serif-body); }
.attendance-form .form-label b { color: var(--sp-ink); }
.attendance-form input[type='text'], .attendance-form textarea { border: var(--bw) solid var(--sp-ink); border-radius: 14px; background: var(--sp-white); color: var(--sp-ink); }
.attendance-form input[type='text']:focus, .attendance-form textarea:focus { border-color: var(--sp-ink); box-shadow: 3px 3px 0 var(--pink); }
.attendance-option .option-card { border: var(--bw) solid var(--sp-ink); border-radius: 14px; background: var(--sp-white); }
.attendance-option .option-card strong { color: var(--sp-ink); font-family: var(--font-serif-body); }
.attendance-option .option-card small { color: var(--sp-violet); }
.attendance-option input[type='radio']:checked + .option-card { border-color: var(--sp-ink); background: var(--lime); box-shadow: 3px 3px 0 var(--sp-ink); }
.attendance-option input[type='radio']:focus-visible + .option-card { outline: 2px solid var(--sp-ink); }
.btn-confirm-submit { min-height: 54px; border: var(--bw) solid var(--sp-ink); border-radius: 16px; background: var(--sp-ink); color: var(--lime); box-shadow: none; font: 800 17px/1 var(--font-script); }
.btn-confirm-submit:hover { filter: none; background: var(--sp-violet); }
.wish-suggest-item { border: var(--bw) solid var(--sp-ink); border-radius: 14px; background: var(--sp-white); color: var(--sp-ink); }
.wish-suggest-item:hover, .wish-suggest-item:active { background: var(--lime); border-color: var(--sp-ink); box-shadow: none; }
.wish-suggest-item svg { color: var(--pink); }

/* ---------- Xem ảnh phóng to ---------- */
.image-lightbox__backdrop { background: rgba(237, 231, 255, .92); }
.image-lightbox__counter, .image-lightbox__btn, .image-lightbox__nav { border: var(--bw) solid var(--sp-ink); background: var(--lime); color: var(--sp-ink); box-shadow: none; }
.image-lightbox__btn:hover, .image-lightbox__nav:hover { background: var(--pink); border-color: var(--sp-ink); color: var(--sp-ink); }
.image-lightbox__img { border: var(--bw) solid var(--sp-ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--sp-ink); }
.image-lightbox__hint { color: var(--sp-violet); }

/* ---------- Điều khiển nổi, thông báo, lỗi ---------- */
.music-toggle, .music-toggle.playing, .music-toggle.paused {
  top: auto;
  right: 16px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border: var(--bw) solid var(--sp-ink);
  background: var(--lime);
  color: var(--sp-ink);
  box-shadow: 3px 3px 0 var(--sp-ink);
}
.btn-scroll-top { border: var(--bw) solid var(--sp-ink); background: var(--lime); color: var(--sp-ink); box-shadow: 3px 3px 0 var(--sp-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-scroll-top:hover { background: var(--pink); color: var(--sp-ink); border-color: var(--sp-ink); }
.toast { border: var(--bw) solid var(--sp-ink); background: var(--lime); color: var(--sp-ink); box-shadow: 4px 4px 0 var(--sp-ink); }
.scroll-progress { height: 4px; background: rgba(27, 19, 64, .12); }
.scroll-progress__bar { background: var(--pink); box-shadow: none; }
.error-screen { background: var(--sp-page); }
.error-icon-wrap { border: var(--bw) solid var(--sp-ink); background: var(--pink); color: var(--sp-ink); }
.error-message { color: var(--sp-ink); }
.btn-error-reload { min-height: 48px; border: var(--bw) solid var(--sp-ink); border-radius: 999px; background: var(--sp-ink); color: var(--lime); box-shadow: 4px 4px 0 var(--pink); }

/* Màn hình rất hẹp */
@media (max-width: 360px) {
  .invitation .section-pad, .invitation .site-footer { padding-left: 18px; padding-right: 18px; }
  .invitation .section-title, .invitation .about-heading { font-size: 30px; }
  .hero__title, .invitation .details .details__ceremony { font-size: 42px; }
  .invitation .organize-date-banner { gap: 8px; }
  .date-col__label { padding: 6px 8px; font-size: 13px; }
  .invitation .date-col--main { width: 104px; height: 104px; }
  .date-day { font-size: 46px; }
  .countdown-box strong { font-size: 26px; }
  .palette__swatch { width: 52px; height: 52px; }
  .cover__title { font-size: 68px; }
}

/* iOS Safari tự phóng to trang khi chạm vào ô nhập có chữ nhỏ hơn 16px */
input, textarea, select { font-size: max(16px, 1em) !important; }