/* Bảng màu: giấy sen, vàng nghệ, mực nâu và đêm chàm của lễ hoa đăng */
.mgz-root {
  --mgz-paper: #faf5ea;
  --mgz-cream: #f1e6d1;
  --mgz-ink: #241d16;
  --mgz-ink-soft: #5e5142;
  --mgz-gold: #b07d2a;
  --mgz-gold-deep: #85601f;
  --mgz-gold-soft: #e2c07a;
  --mgz-saffron: #c8702a;
  --mgz-night: #11142a;
  --mgz-night-2: #1b2042;
  --mgz-moon: #efe6d3;
  --mgz-mist: #b9b4c9;
  background: var(--mgz-paper);
  color: var(--mgz-ink);
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
  font-size: 1.1875rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.mgz-root .mgz-col { box-sizing: content-box; max-width: 44rem; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }

/* Reset gọn */
.mgz-root figure { margin: 0; }
.mgz-root h2 { margin: 0; }
.mgz-root p { margin: 0 0 1em; }
.mgz-root picture { display: block; }
.mgz-root img { display: block; max-width: 100%; height: auto; }
.mgz-root a:focus-visible,
.mgz-root button:focus-visible { outline: 3px solid var(--mgz-gold); outline-offset: 3px; }

/* Cảnh mở đầu: điện thoại xếp chữ dưới ảnh, màn rộng chữ đè lên ảnh */
.mgz-root .mgz-hero { position: relative; background: var(--mgz-night); color: var(--mgz-moon); }
.mgz-root .mgz-hero-media { margin: 0; }
.mgz-root .mgz-hero-img { display: block; width: 100%; height: auto; }
.mgz-root .mgz-hero-text { box-sizing: border-box; padding: 28px 20px 40px; }
.mgz-root .mgz-hero-text::before { content: "\2740"; display: block; color: var(--mgz-gold-soft); font-size: 1.1rem; margin-bottom: .8rem; }
.mgz-root .mgz-title { margin: 0 0 .6em; font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: 1.18; font-weight: 400; color: #fbf3e2; text-wrap: balance; }
.mgz-root .mgz-accent { color: var(--mgz-gold-soft); font-style: italic; }
.mgz-root .mgz-sapo { margin: 0; max-width: 40rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.02rem; line-height: 1.7; color: #dcd4c3; }
.mgz-root.mgz-js .mgz-hero-text { animation: mgz-rise 1.6s .2s cubic-bezier(.2, .7, .2, 1) both; }

@media (min-width: 768px) {
  .mgz-root .mgz-hero { min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
  .mgz-root .mgz-hero-media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
  .mgz-root .mgz-hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: center 35%; will-change: transform; }
  .mgz-root .mgz-hero-media::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(17, 20, 42, .2) 0%, rgba(17, 20, 42, 0) 30%, rgba(17, 20, 42, .5) 62%, rgba(17, 20, 42, .93) 100%), radial-gradient(ellipse 60% 45% at 20% 100%, rgba(200, 112, 42, .35), rgba(200, 112, 42, 0) 70%); }
  .mgz-root .mgz-hero-text { position: relative; z-index: 2; width: 100%; max-width: 64rem; padding: 0 6vw 9svh; }
  .mgz-root .mgz-title { font-size: clamp(2.6rem, 5.2vw, 4.8rem); line-height: 1.1; text-shadow: 0 2px 30px rgba(0, 0, 0, .4); }
  .mgz-root .mgz-sapo { font-size: 1.12rem; color: #e6dfcf; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
}

/* Đoạn mở */
.mgz-root .mgz-lead-wrap { padding: 3.5rem 0 .5rem; }
.mgz-root .mgz-lead { font-size: 1.3em; line-height: 1.7; }
.mgz-root .mgz-lead::first-letter { float: left; font-size: 3.5em; line-height: .9; padding: .06em .12em 0 0; color: var(--mgz-gold); }

/* Mở chặng */
.mgz-root .mgz-chapter { position: relative; padding: 4.5rem 0 2.25rem; text-align: center; }
.mgz-root .mgz-chapter--dawn { background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(226, 192, 122, .4), rgba(226, 192, 122, 0) 70%), var(--mgz-paper); }
.mgz-root .mgz-chapter--leaf { background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(120, 140, 92, .22), rgba(120, 140, 92, 0) 70%), var(--mgz-paper); }
.mgz-root .mgz-chapter--sun { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(200, 112, 42, .24), rgba(200, 112, 42, 0) 70%), var(--mgz-paper); }
.mgz-root .mgz-chapter-num { display: block; font-size: clamp(3rem, 9vw, 6.5rem); line-height: 1; letter-spacing: .06em; color: rgba(176, 125, 42, .3); margin-bottom: .15em; }
.mgz-root .mgz-chapter-title { font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.2; font-weight: 400; color: var(--mgz-ink); text-wrap: balance; }
.mgz-root .mgz-chapter-head::after { content: ""; display: block; width: 64px; height: 1px; background: var(--mgz-gold); margin: 1.2rem auto 0; }

/* Cặp ảnh so le */
.mgz-root .mgz-pair { max-width: 72rem; margin: 2rem auto 2.5rem; padding: 0 24px; }
.mgz-root .mgz-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mgz-root .mgz-pair-cell { overflow: hidden; border-radius: 3px; background: var(--mgz-cream); }
.mgz-root .mgz-pair-cell--low { margin-top: 8%; }
.mgz-root .mgz-pair-cell img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Chú thích */
.mgz-root .mgz-cap-line { max-width: 44rem; margin: 12px auto 0; padding: 0 20px; text-align: center; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .9rem; line-height: 1.55; font-style: italic; color: var(--mgz-ink-soft); }
.mgz-root .mgz-cap-line::before { content: "\2014\00a0"; color: var(--mgz-gold); font-style: normal; }

/* Ảnh tràn lề, thị sai nhẹ ở màn rộng */
.mgz-root .mgz-bleed { margin: 2.25rem 0 2.75rem; }
.mgz-root .mgz-bleed-frame { position: relative; background: var(--mgz-cream); }
.mgz-root .mgz-bleed-img { width: 100%; height: auto; }

@media (min-width: 768px) {
  .mgz-root .mgz-bleed-frame { height: 82svh; overflow: hidden; }
  .mgz-root .mgz-bleed-img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; max-width: none; object-fit: cover; will-change: transform; }
}

/* Chuyển từ ngày sang đêm và ngược lại */
.mgz-root .mgz-band { height: 14svh; }
.mgz-root .mgz-band--dusk { background: linear-gradient(180deg, var(--mgz-paper) 0%, #d8b98a 30%, #6b4a5a 65%, var(--mgz-night) 100%); }
.mgz-root .mgz-band--dawn { background: linear-gradient(180deg, var(--mgz-night) 0%, #3d2f4f 30%, #c8702a 66%, #f0cf96 84%, var(--mgz-paper) 100%); }
.mgz-root .mgz-zone-night { background: var(--mgz-night); color: var(--mgz-moon); padding-bottom: 1.5rem; }
.mgz-root .mgz-zone-night .mgz-cap-line { color: var(--mgz-mist); }
.mgz-root .mgz-zone-night .mgz-cap-line::before { color: var(--mgz-gold-soft); }
.mgz-root .mgz-zone-night .mgz-pair-cell { background: var(--mgz-night-2); }
.mgz-root .mgz-zone-night .mgz-bleed-frame { background: var(--mgz-night-2); }
.mgz-root .mgz-night-text { padding-top: 3rem; }

/* Đêm hoa đăng: cảnh nền dính, chữ trôi lên trên */
.mgz-root .mgz-scrolly { position: relative; }
.mgz-root .mgz-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; background: var(--mgz-night); }
.mgz-root .mgz-stage img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(.8) saturate(1.05); transition: filter 1.4s ease; }
.mgz-root .mgz-stage::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 82%, rgba(240, 170, 80, .3), rgba(240, 170, 80, 0) 70%), linear-gradient(180deg, rgba(17, 20, 42, .6) 0%, rgba(17, 20, 42, 0) 28%, rgba(17, 20, 42, 0) 70%, rgba(17, 20, 42, .75) 100%); opacity: .6; transition: opacity 1.4s ease; }
.mgz-root .mgz-stage[data-mgz-active="1"] img { filter: brightness(.38) saturate(.7); }
.mgz-root .mgz-stage[data-mgz-active="2"] img { filter: brightness(.85) saturate(1.05); }
.mgz-root .mgz-stage[data-mgz-active="3"] img { filter: brightness(1) saturate(1.2); }
.mgz-root .mgz-stage[data-mgz-active="3"]::after { opacity: 1; }
/* Ánh đèn lung linh chỉ chạy khi người đọc không chọn giảm chuyển động */
@media (prefers-reduced-motion: no-preference) {
  .mgz-root .mgz-stage[data-mgz-active="3"]::after { animation: mgz-flicker 5s ease-in-out infinite; }
}
.mgz-root .mgz-steps { position: relative; z-index: 1; margin-top: -100svh; padding: 60svh 0 22svh; }
.mgz-root .mgz-step { margin-top: 0; margin-bottom: 40svh; }
.mgz-root .mgz-step.mgz-step--last { margin-bottom: 0; }
.mgz-root .mgz-veil { padding-top: 26px; padding-bottom: 6px; background: rgba(14, 16, 34, .82); color: var(--mgz-moon); border-top: 1px solid rgba(226, 192, 122, .45); border-radius: 3px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 1s ease; }
.mgz-root .mgz-step--on { border-top-color: var(--mgz-gold-soft); }
.mgz-root .mgz-cap { max-width: 34rem; margin: 0 auto 40svh; padding: 18px 22px; text-align: center; font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--mgz-gold-soft); background: rgba(14, 16, 34, .62); border-radius: 3px; }

/* Trích lời và đoạn kết */
.mgz-root .mgz-quote { margin: 1.5em 0; padding: .2em 0 .2em 1.2em; border-left: 2px solid var(--mgz-gold); font-size: 1.2em; line-height: 1.65; font-style: italic; color: var(--mgz-ink); }
.mgz-root .mgz-coda-wrap { padding: 2.5rem 0 0; background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(226, 192, 122, .35), rgba(226, 192, 122, 0) 70%), var(--mgz-paper); }
.mgz-root .mgz-coda { font-size: 1.3em; line-height: 1.65; text-align: center; color: var(--mgz-gold-deep); text-wrap: balance; }
.mgz-root .mgz-end { padding: 1.5rem 0 4.5rem; }
.mgz-root .mgz-end::before { content: ""; display: block; width: 140px; height: 56px; margin: 0 auto; background: linear-gradient(to top left, rgba(176, 125, 42, .55) 49.5%, rgba(176, 125, 42, 0) 50.5%) left / 50% 100% no-repeat, linear-gradient(to top right, rgba(176, 125, 42, .55) 49.5%, rgba(176, 125, 42, 0) 50.5%) right / 50% 100% no-repeat; }

/* Chữ hiện dần (chỉ khi JS chạy) */
.mgz-root.mgz-js [data-mgz-animate] { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.mgz-root.mgz-js [data-mgz-animate].mgz-visible { opacity: 1; transform: none; }

@keyframes mgz-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes mgz-flicker {
  0% { opacity: 1; }
  50% { opacity: .78; }
  100% { opacity: 1; }
}

/* Điện thoại */
@media (max-width: 760px) {
  .mgz-root { font-size: 1.0625rem; line-height: 1.75; }
  .mgz-root .mgz-lead-wrap { padding: 2.25rem 0 .25rem; }
  .mgz-root .mgz-lead { font-size: 1.16em; }
  .mgz-root .mgz-chapter { padding: 3rem 0 1.5rem; }
  .mgz-root .mgz-pair { margin: 1.5rem auto 2rem; padding: 0 14px; }
  .mgz-root .mgz-pair-grid { grid-template-columns: 1fr; gap: 10px; }
  .mgz-root .mgz-pair-cell--low { margin-top: 0; }
  .mgz-root .mgz-pair-cell img { aspect-ratio: 3 / 2; }
  .mgz-root .mgz-bleed { margin: 1.5rem 0 2rem; }
  .mgz-root .mgz-band { height: 10svh; }
  .mgz-root .mgz-night-text { padding-top: 2.25rem; }
  .mgz-root .mgz-steps { padding: 56svh 0 16svh; }
  .mgz-root .mgz-step { margin-bottom: 34svh; }
  .mgz-root .mgz-cap { margin-left: 16px; margin-right: 16px; margin-bottom: 34svh; font-size: .98rem; }
  .mgz-root .mgz-quote { font-size: 1.1em; }
  .mgz-root .mgz-coda-wrap { padding-top: 2rem; }
  .mgz-root .mgz-coda { font-size: 1.16em; }
  .mgz-root .mgz-end { padding: 1.25rem 0 3.5rem; }
}

/* Tôn trọng người đọc giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .mgz-root.mgz-js [data-mgz-animate] { opacity: 1; transform: none; transition: none; }
  .mgz-root.mgz-js .mgz-hero-text { animation: none; }
  .mgz-root .mgz-hero-img,
  .mgz-root .mgz-bleed-img { transform: none; }
  .mgz-root .mgz-stage img,
  .mgz-root .mgz-stage::after,
  .mgz-root .mgz-veil { transition: none; animation: none; }
  .mgz-root .mgz-stage[data-mgz-active="3"]::after { animation: none; }
}

@media print {
  .mgz-root .mgz-stage { position: relative; height: auto; }
  .mgz-root .mgz-steps { margin-top: 0; padding: 0; }
  .mgz-root .mgz-step { margin-bottom: 1em; }
  .mgz-root .mgz-cap { margin-bottom: 1em; }
  .mgz-root .mgz-zone-night { background: #ffffff; color: #000000; }
  .mgz-root .mgz-veil { background: #ffffff; color: #000000; }
}