/* ========================================================
   SCROLL REVEAL ANIMATIONS — RED VELVET & GOLD THEME
   Granular 5s smooth scroll reveal animations with extended left/right travel
   ======================================================== */

:root {
  --reveal-duration: 4s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slide-distance-wide: 88px;
  --slide-distance-medium: 60px;
}

/* Ngăn thanh cuộn ngang (dùng 100% thay 100vw — 100vw dễ tràn trên WebView) */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.app-container {
  overflow-x: hidden;
  overflow-x: clip;
  /* Không set max-width ở đây — để responsive.css giữ max-width: 900px trên desktop */
}

/* Các section và card luôn hiển thị trọn vẹn, không sinh thanh cuộn dọc bên trong */
.reveal-section,
.reveal-block,
.reveal-item,
.red-card,
.reception-card,
.venue-card,
.timeline-card,
.countdown-card,
.dresscode-card,
.guestbook-card,
.gift-wrapper {
  overflow: visible !important;
}

/* Base reveal transition for all revealable elements */
.reveal-block,
.reveal-section,
.reveal-item {
  will-change: opacity, transform;
}

/* Section không ẩn cả khối — từng chữ / phần tử con tự reveal */
.reveal-section {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ========================================================
   13. VIETNAM THEME — reveal từng chữ & item trên toàn bộ các khối
   (Giống thiệp 14: 5s cubic-bezier(0.22, 1, 0.36, 1), trượt trái ↔ phải rõ nét)
   ======================================================== */

/* Khối / card bao ngoài: luôn hiện sẵn, không fade cả cục */
.red-card,
.ceremony-card,
.reception-card,
.venue-card,
.bride-reception-card,
.countdown-card,
.timeline-card,
.dresscode-card,
.guestbook-card,
.gift-wrapper,
.artwork-wall,
.parents-grid,
.couple-highlight-names,
.vn-banner,
.ceremony-inner,
.ceremony-time-badge,
.ceremony-date-grid,
.ceremony-note,
.calendar-paper,
.reception-times,
.reception-header,
.reception-actions,
.countdown-grid,
.timeline-list,
.dresscode-palettes,
.guestbook-form,
.wishes-list,
.rb-date,
.rb-times,
.rb-venue,
.family-side,
footer.exit-room,
footer {
  opacity: 1 !important;
  transform: none !important;
}

/* Danh sách lời chúc: chặn thanh cuộn ngang */
.wishes-list {
  overflow-x: hidden !important;
}
.wishes-list::-webkit-scrollbar:horizontal {
  display: none !important;
  height: 0px !important;
}

/* Inline elements cần inline-block để transform translateX/Y hoạt động */
.ceremony-dow,
.ceremony-day,
.ceremony-month,
.ceremony-note-label,
.ceremony-note-place,
.rb-day,
.rb-month,
.rb-year,
.family-side small,
.family-side .role-badge {
  display: inline-block;
}

/* ---- Toàn bộ chữ & phần tử con của tất cả các khối: ẩn sẵn ---- */
.vn-kicker,
.vn-lotus,
.vn-zigzag,
.vn-title,
.hero-kicker,
.envelope-stage,
.hero-title-box,
.hero-names,
.hero-invite-guest,
.hero-quote,
.card-heading,
.family-side small,
.family-side h4,
.family-side p,
.family-side .groom-name,
.family-side .bride-name,
.family-side .role-badge,
.ceremony-type-title,
.ceremony-dow,
.ceremony-day,
.ceremony-month,
.ceremony-time,
.ceremony-time-badge .lunar,
.ceremony-note-label,
.ceremony-note-place,
.ceremony-direction,
.artwork-item,
.reception-date-text,
.reception-lunar,
.reception-time-col,
.calendar-paper-title,
.calendar-grid-header,
.reception-actions .btn-gold-outline,
.reception-actions .btn-cream-solid,
.venue-heading,
.venue-name,
.venue-address,
.map-embed-wrapper,
.venue-direction-btn,
.rb-heading,
.rb-lead,
.rb-weekday,
.rb-day,
.rb-month-year,
.rb-lunar,
.rb-time-col,
.rb-venue-label,
.rb-venue-name-row,
.rb-venue-address,
.rb-direction,
.count-box,
.timeline-item,
.dresscode-note,
.dresscode-item,
.dresscode-palette,
.guestbook-heading,
.field-label,
.guestbook-form .form-input,
.guestbook-form .form-textarea,
.guestbook-actions,
.wish-item,
.gift-trap,
.gift-heading,
.gift-note,
.gift-envelope-trigger,
.exit-title,
.exit-lead,
.exit-names,
.gift-brand-footer {
  opacity: 0 !important;
  transform: translateY(36px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

/* ---- Hướng trượt Trái ↔ Phải rõ nét cho từng dòng chữ / item (như thiệp 14) ---- */

/* 1. HERO (Ngày chung đôi) */
.hero-kicker { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.envelope-stage { transform: translateY(42px) scale(0.94); }
.hero-title-box,
.hero-names { transform: translateX(var(--slide-distance-wide)); }
.hero-invite-guest { transform: translateX(calc(-1 * var(--slide-distance-medium))); }
.hero-quote { transform: translateX(var(--slide-distance-wide)); }

/* 2. HAI GIA ĐÌNH (.red-card) — Nhà trai từ trái, Nhà gái từ phải */
.vn-banner .vn-kicker { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.vn-banner .card-heading { transform: translateX(var(--slide-distance-wide)); }

.family-side:first-child small,
.family-side:first-child h4,
.family-side:first-child p,
.family-side:first-child .groom-name,
.family-side:first-child .role-badge {
  transform: translateX(calc(-1 * var(--slide-distance-wide)));
}

.family-side:last-child small,
.family-side:last-child h4,
.family-side:last-child p,
.family-side:last-child .bride-name,
.family-side:last-child .role-badge {
  transform: translateX(var(--slide-distance-wide));
}

/* 3. LỄ THÀNH HÔN / VU QUY (.ceremony-card) — xen kẽ trái / phải */
.ceremony-card .vn-kicker { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.ceremony-type-title { transform: translateX(var(--slide-distance-wide)); }
.ceremony-dow { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.ceremony-day { transform: translateY(36px) scale(0.9); }
.ceremony-month { transform: translateX(var(--slide-distance-wide)); }
.ceremony-time { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.ceremony-time-badge .lunar { transform: translateX(var(--slide-distance-wide)); }
.ceremony-note-label { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.ceremony-note-place { transform: translateX(var(--slide-distance-wide)); }
.ceremony-direction { transform: translateY(32px); }

/* 4. ALBUM ẢNH CƯỚI (#gallery) — ảnh trượt so le trái / phải */
#gallery .vn-title { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.artwork-item:nth-child(odd) { transform: translateX(calc(-1 * var(--slide-distance-medium))) scale(0.95); }
.artwork-item:nth-child(even) { transform: translateX(var(--slide-distance-medium)) scale(0.95); }

/* 5. TIỆC CƯỚI (#reception) */
.reception-card .vn-kicker { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.reception-card .vn-title { transform: translateX(var(--slide-distance-wide)); }
.reception-date-text { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.reception-lunar { transform: translateX(var(--slide-distance-wide)); }
.reception-time-col:first-child { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.reception-time-col:last-child { transform: translateX(var(--slide-distance-wide)); }
.calendar-paper-title { transform: translateX(calc(-1 * var(--slide-distance-medium))); }
.calendar-grid-header { transform: translateX(var(--slide-distance-medium)); }
.reception-actions .btn-gold-outline { transform: translateX(calc(-1 * var(--slide-distance-medium))); }
.reception-actions .btn-cream-solid { transform: translateX(var(--slide-distance-medium)); }

/* 6. ĐỊA ĐIỂM TỔ CHỨC (#venue) */
.venue-heading { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.venue-name { transform: translateX(var(--slide-distance-wide)); }
.venue-address { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.map-embed-wrapper { transform: translateY(36px) scale(0.95); }
.venue-direction-btn { transform: translateX(var(--slide-distance-medium)); }

/* 7. TIỆC NHÀ GÁI (#reception-bride) */
.rb-heading { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.rb-lead { transform: translateX(var(--slide-distance-wide)); }
.rb-weekday { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.rb-day { transform: translateY(32px) scale(0.92); }
.rb-month-year { transform: translateX(var(--slide-distance-wide)); }
.rb-lunar { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.rb-time-col:first-child { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.rb-time-col:last-child { transform: translateX(var(--slide-distance-wide)); }
.rb-venue-label { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.rb-venue-name-row { transform: translateX(var(--slide-distance-wide)); }
.rb-venue-address { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.rb-direction { transform: translateX(var(--slide-distance-medium)); }

/* 8. ĐẾM NGƯỢC (#countdown) */
.countdown-card .card-heading { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.countdown-grid .count-box:nth-child(1),
.countdown-grid .count-box:nth-child(2) {
  transform: translateX(calc(-1 * var(--slide-distance-medium))) translateY(18px) scale(0.9);
}
.countdown-grid .count-box:nth-child(3),
.countdown-grid .count-box:nth-child(4) {
  transform: translateX(var(--slide-distance-medium)) translateY(18px) scale(0.9);
}

/* 9. TRÌNH TỰ HÔN LỄ (#timeline) — trượt so le trái / phải */
.timeline-card .card-heading { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.timeline-item:nth-child(odd) { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.timeline-item:nth-child(even) { transform: translateX(var(--slide-distance-wide)); }

/* 10. TRANG PHỤC (#dresscode) */
.dresscode-card .card-heading { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.dresscode-note { transform: translateX(var(--slide-distance-wide)); }
.dresscode-item:nth-child(odd) { transform: translateX(calc(-1 * var(--slide-distance-medium))) translateY(16px); }
.dresscode-item:nth-child(even) { transform: translateX(var(--slide-distance-medium)) translateY(16px); }

/* 11. SỔ LƯU BÚT (#guestbook) */
.guestbook-heading { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.field-label:nth-of-type(1),
.guestbook-form .form-input { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.field-label:nth-of-type(2),
.guestbook-form .form-textarea { transform: translateX(var(--slide-distance-wide)); }
.guestbook-actions { transform: translateX(calc(-1 * var(--slide-distance-medium))); }
.wish-item:nth-child(odd) { transform: translateX(calc(-1 * var(--slide-distance-medium))); }
.wish-item:nth-child(even) { transform: translateX(var(--slide-distance-medium))); }

/* 12. HỘP QUÀ MỪNG (#gift) */
.gift-trap { transform: translateY(32px) scale(0.92); }
.gift-heading { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.gift-note { transform: translateX(var(--slide-distance-wide)); }
.gift-envelope-trigger { transform: translateY(28px); }

/* 13. CẢM ƠN (footer.exit-room) */
.exit-title { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.exit-lead { transform: translateX(var(--slide-distance-wide)); }
.exit-names { transform: translateX(calc(-1 * var(--slide-distance-wide))); }
.gift-brand-footer { transform: translateY(22px); }

/* ---- Hiện phần tử khi chính nó có .visible HOẶC khối cha có .visible ---- */
:is(
  .vn-kicker,
  .vn-lotus,
  .vn-zigzag,
  .vn-title,
  .hero-kicker,
  .envelope-stage,
  .hero-title-box,
  .hero-names,
  .hero-invite-guest,
  .hero-quote,
  .card-heading,
  .family-side small,
  .family-side h4,
  .family-side p,
  .family-side .groom-name,
  .family-side .bride-name,
  .family-side .role-badge,
  .ceremony-type-title,
  .ceremony-dow,
  .ceremony-day,
  .ceremony-month,
  .ceremony-time,
  .ceremony-time-badge .lunar,
  .ceremony-note-label,
  .ceremony-note-place,
  .ceremony-direction,
  .artwork-item,
  .reception-date-text,
  .reception-lunar,
  .reception-time-col,
  .calendar-paper-title,
  .calendar-grid-header,
  .reception-actions .btn-gold-outline,
  .reception-actions .btn-cream-solid,
  .venue-heading,
  .venue-name,
  .venue-address,
  .map-embed-wrapper,
  .venue-direction-btn,
  .rb-heading,
  .rb-lead,
  .rb-weekday,
  .rb-day,
  .rb-month-year,
  .rb-lunar,
  .rb-time-col,
  .rb-venue-label,
  .rb-venue-name-row,
  .rb-venue-address,
  .rb-direction,
  .count-box,
  .timeline-item,
  .dresscode-note,
  .dresscode-item,
  .dresscode-palette,
  .guestbook-heading,
  .field-label,
  .guestbook-form .form-input,
  .guestbook-form .form-textarea,
  .guestbook-actions,
  .wish-item,
  .gift-trap,
  .gift-heading,
  .gift-note,
  .gift-envelope-trigger,
  .exit-title,
  .exit-lead,
  .exit-names,
  .gift-brand-footer
).visible,
.visible :is(
  .vn-kicker,
  .vn-lotus,
  .vn-zigzag,
  .vn-title,
  .hero-kicker,
  .envelope-stage,
  .hero-title-box,
  .hero-names,
  .hero-invite-guest,
  .hero-quote,
  .card-heading,
  .family-side small,
  .family-side h4,
  .family-side p,
  .family-side .groom-name,
  .family-side .bride-name,
  .family-side .role-badge,
  .ceremony-type-title,
  .ceremony-dow,
  .ceremony-day,
  .ceremony-month,
  .ceremony-time,
  .ceremony-time-badge .lunar,
  .ceremony-note-label,
  .ceremony-note-place,
  .ceremony-direction,
  .artwork-item,
  .reception-date-text,
  .reception-lunar,
  .reception-time-col,
  .calendar-paper-title,
  .calendar-grid-header,
  .reception-actions .btn-gold-outline,
  .reception-actions .btn-cream-solid,
  .venue-heading,
  .venue-name,
  .venue-address,
  .map-embed-wrapper,
  .venue-direction-btn,
  .rb-heading,
  .rb-lead,
  .rb-weekday,
  .rb-day,
  .rb-month-year,
  .rb-lunar,
  .rb-time-col,
  .rb-venue-label,
  .rb-venue-name-row,
  .rb-venue-address,
  .rb-direction,
  .count-box,
  .timeline-item,
  .dresscode-note,
  .dresscode-item,
  .dresscode-palette,
  .guestbook-heading,
  .field-label,
  .guestbook-form .form-input,
  .guestbook-form .form-textarea,
  .guestbook-actions,
  .wish-item,
  .gift-trap,
  .gift-heading,
  .gift-note,
  .gift-envelope-trigger,
  .exit-title,
  .exit-lead,
  .exit-names,
  .gift-brand-footer
),
.hero-title-box.visible .hero-names,
.hero-title-box.visible .hero-invite-guest {
  opacity: 1 !important;
  transform: none !important;
}

.gift-brand-footer.visible,
.visible .gift-brand-footer {
  opacity: 0.55 !important;
}

/* ---- Nhịp stagger nhẹ khi các phần tử cùng vào tầm nhìn ---- */
.vn-lotus.visible, .visible .vn-lotus { transition-delay: 0.02s; }
.vn-kicker.visible, .visible .vn-kicker { transition-delay: 0.05s; }
.vn-title.visible, .card-heading.visible, .ceremony-type-title.visible, .rb-heading.visible, .guestbook-heading.visible, .gift-heading.visible,
.visible .vn-title, .visible .card-heading, .visible .ceremony-type-title, .visible .rb-heading, .visible .guestbook-heading, .visible .gift-heading {
  transition-delay: 0.1s;
}
.vn-zigzag.visible, .visible .vn-zigzag { transition-delay: 0.14s; }

.family-side:first-child small.visible, .visible .family-side:first-child small { transition-delay: 0.08s; }
.family-side:last-child small.visible, .visible .family-side:last-child small { transition-delay: 0.14s; }
.family-side:first-child h4.visible, .visible .family-side:first-child h4 { transition-delay: 0.18s; }
.family-side:last-child h4.visible, .visible .family-side:last-child h4 { transition-delay: 0.24s; }
.family-side:first-child p.visible, .visible .family-side:first-child p { transition-delay: 0.28s; }
.family-side:last-child p.visible, .visible .family-side:last-child p { transition-delay: 0.34s; }
.family-side .groom-name.visible, .visible .family-side .groom-name { transition-delay: 0.38s; }
.family-side .bride-name.visible, .visible .family-side .bride-name { transition-delay: 0.44s; }
.family-side .role-badge.visible, .visible .family-side .role-badge { transition-delay: 0.5s; }

.ceremony-dow.visible, .visible .ceremony-dow { transition-delay: 0.14s; }
.ceremony-day.visible, .visible .ceremony-day { transition-delay: 0.2s; }
.ceremony-month.visible, .visible .ceremony-month { transition-delay: 0.26s; }
.ceremony-time.visible, .visible .ceremony-time { transition-delay: 0.32s; }
.ceremony-time-badge .lunar.visible, .visible .ceremony-time-badge .lunar { transition-delay: 0.38s; }
.ceremony-note-label.visible, .visible .ceremony-note-label { transition-delay: 0.44s; }
.ceremony-note-place.visible, .visible .ceremony-note-place { transition-delay: 0.52s; }
.ceremony-direction.visible, .visible .ceremony-direction { transition-delay: 0.6s; }

.reception-date-text.visible, .visible .reception-date-text { transition-delay: 0.15s; }
.reception-lunar.visible, .visible .reception-lunar { transition-delay: 0.22s; }
.reception-time-col:first-child.visible, .visible .reception-time-col:first-child { transition-delay: 0.28s; }
.reception-time-col:last-child.visible, .visible .reception-time-col:last-child { transition-delay: 0.36s; }

.venue-name.visible, .visible .venue-name { transition-delay: 0.14s; }
.venue-address.visible, .visible .venue-address { transition-delay: 0.24s; }
.map-embed-wrapper.visible, .visible .map-embed-wrapper { transition-delay: 0.32s; }
.venue-direction-btn.visible, .visible .venue-direction-btn { transition-delay: 0.4s; }

.rb-lead.visible, .visible .rb-lead { transition-delay: 0.14s; }
.rb-weekday.visible, .visible .rb-weekday { transition-delay: 0.2s; }
.rb-day.visible, .rb-month-year.visible, .visible .rb-day, .visible .rb-month-year { transition-delay: 0.26s; }
.rb-lunar.visible, .visible .rb-lunar { transition-delay: 0.32s; }
.rb-time-col:first-child.visible, .visible .rb-time-col:first-child { transition-delay: 0.38s; }
.rb-time-col:last-child.visible, .visible .rb-time-col:last-child { transition-delay: 0.44s; }
.rb-venue-label.visible, .visible .rb-venue-label { transition-delay: 0.5s; }
.rb-venue-name-row.visible, .visible .rb-venue-name-row { transition-delay: 0.56s; }
.rb-venue-address.visible, .visible .rb-venue-address { transition-delay: 0.62s; }
.rb-direction.visible, .visible .rb-direction { transition-delay: 0.68s; }

.count-box:nth-child(1).visible, .visible .count-box:nth-child(1) { transition-delay: 0.12s; }
.count-box:nth-child(2).visible, .visible .count-box:nth-child(2) { transition-delay: 0.22s; }
.count-box:nth-child(3).visible, .visible .count-box:nth-child(3) { transition-delay: 0.32s; }
.count-box:nth-child(4).visible, .visible .count-box:nth-child(4) { transition-delay: 0.42s; }

.timeline-item:nth-child(1).visible, .visible .timeline-item:nth-child(1) { transition-delay: 0.1s; }
.timeline-item:nth-child(2).visible, .visible .timeline-item:nth-child(2) { transition-delay: 0.22s; }
.timeline-item:nth-child(3).visible, .visible .timeline-item:nth-child(3) { transition-delay: 0.34s; }
.timeline-item:nth-child(4).visible, .visible .timeline-item:nth-child(4) { transition-delay: 0.46s; }
.timeline-item:nth-child(5).visible, .visible .timeline-item:nth-child(5) { transition-delay: 0.58s; }
.timeline-item:nth-child(n+6).visible, .visible .timeline-item:nth-child(n+6) { transition-delay: 0.7s; }

.dresscode-note.visible, .visible .dresscode-note { transition-delay: 0.14s; }
.dresscode-item:nth-child(1).visible, .visible .dresscode-item:nth-child(1) { transition-delay: 0.18s; }
.dresscode-item:nth-child(2).visible, .visible .dresscode-item:nth-child(2) { transition-delay: 0.28s; }
.dresscode-item:nth-child(3).visible, .visible .dresscode-item:nth-child(3) { transition-delay: 0.38s; }
.dresscode-item:nth-child(4).visible, .visible .dresscode-item:nth-child(4) { transition-delay: 0.48s; }
.dresscode-item:nth-child(n+5).visible, .visible .dresscode-item:nth-child(n+5) { transition-delay: 0.58s; }

.artwork-item:nth-child(1).visible, .visible .artwork-item:nth-child(1) { transition-delay: 0.1s; }
.artwork-item:nth-child(2).visible, .visible .artwork-item:nth-child(2) { transition-delay: 0.2s; }
.artwork-item:nth-child(3).visible, .visible .artwork-item:nth-child(3) { transition-delay: 0.3s; }
.artwork-item:nth-child(4).visible, .visible .artwork-item:nth-child(4) { transition-delay: 0.4s; }
.artwork-item:nth-child(5).visible, .visible .artwork-item:nth-child(5) { transition-delay: 0.5s; }
.artwork-item:nth-child(6).visible, .visible .artwork-item:nth-child(6) { transition-delay: 0.6s; }

.wish-item:nth-child(1).visible, .visible .wish-item:nth-child(1) { transition-delay: 0.1s; }
.wish-item:nth-child(2).visible, .visible .wish-item:nth-child(2) { transition-delay: 0.22s; }
.wish-item:nth-child(3).visible, .visible .wish-item:nth-child(3) { transition-delay: 0.34s; }
.wish-item:nth-child(n+4).visible, .visible .wish-item:nth-child(n+4) { transition-delay: 0.46s; }

.exit-title.visible, .visible .exit-title { transition-delay: 0.08s; }
.exit-lead.visible, .visible .exit-lead { transition-delay: 0.18s; }
.exit-names.visible, .visible .exit-names { transition-delay: 0.28s; }
.gift-brand-footer.visible, .visible .gift-brand-footer { transition-delay: 0.38s; }

/* Calendar ngày: stagger nhẹ khi lịch vào viewport */
.calendar-grid-days span {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.65s var(--reveal-ease), transform 0.65s var(--reveal-ease);
}
.calendar-grid-days.visible span,
.calendar-paper.visible .calendar-grid-days span,
.visible .calendar-grid-days span {
  opacity: 1;
  transform: none;
}
.calendar-grid-days.visible span:nth-child(7n+1), .visible .calendar-grid-days span:nth-child(7n+1) { transition-delay: 0.12s; }
.calendar-grid-days.visible span:nth-child(7n+2), .visible .calendar-grid-days span:nth-child(7n+2) { transition-delay: 0.16s; }
.calendar-grid-days.visible span:nth-child(7n+3), .visible .calendar-grid-days span:nth-child(7n+3) { transition-delay: 0.2s; }
.calendar-grid-days.visible span:nth-child(7n+4), .visible .calendar-grid-days span:nth-child(7n+4) { transition-delay: 0.24s; }
.calendar-grid-days.visible span:nth-child(7n+5), .visible .calendar-grid-days span:nth-child(7n+5) { transition-delay: 0.28s; }
.calendar-grid-days.visible span:nth-child(7n+6), .visible .calendar-grid-days span:nth-child(7n+6) { transition-delay: 0.32s; }
.calendar-grid-days.visible span:nth-child(7n),   .visible .calendar-grid-days span:nth-child(7n)   { transition-delay: 0.36s; }

/* Note: không tắt animation theo prefers-reduced-motion —
   thiệp cưới chủ đích dùng scroll reveal 5s và mở bìa trượt lên như thiệp 14. */