/* Ý tưởng: sơn mài thức giấc — nền giấy dó, đen son, đỏ son, vàng thếp; từ đêm tới bình minh */
.mgz-root {
  --mgz-ink: #17110d;
  --mgz-ink-soft: #3a2e26;
  --mgz-paper: #f3ebdf;
  --mgz-paper-deep: #e8dccb;
  --mgz-lacquer: #7a1a12;
  --mgz-cinnabar: #b8361f;
  --mgz-gold: #c9a24a;
  --mgz-gold-soft: #e3c98a;
  --mgz-serif: Georgia, "Times New Roman", serif;
  --mgz-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: relative;
  background-color: var(--mgz-paper);
  background-image: radial-gradient(circle at 15% 20%, rgba(201, 162, 74, 0.08), transparent 45%), radial-gradient(circle at 85% 70%, rgba(122, 26, 18, 0.05), transparent 50%);
  color: var(--mgz-ink);
  font-family: var(--mgz-serif);
  font-size: 1.2rem;
  line-height: 1.8;
  overflow-x: clip;
}
.mgz-root p { margin: 0 0 1.5em; }
.mgz-root strong { font-weight: 700; }
.mgz-root figure { margin: 0; }
.mgz-root picture { display: block; }
.mgz-root .mgz-img { display: block; width: 100%; height: auto; }

/* Cảnh mở đầu toàn màn hình */
.mgz-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--mgz-ink);
  color: var(--mgz-paper);
}
.mgz-hero-media { position: absolute; inset: 0; overflow: hidden; }
.mgz-hero-media picture { height: 100%; }
.mgz-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.mgz-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 17, 13, 0.15) 0%, rgba(23, 17, 13, 0.35) 40%, rgba(23, 17, 13, 0.92) 100%);
}
.mgz-hero-text {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 30svh 32px 9svh;
}
.mgz-hero-rule { width: 72px; height: 3px; background: var(--mgz-gold); margin-bottom: 28px; }
.mgz-title {
  font-family: var(--mgz-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  max-width: 15ch;
  text-wrap: balance;
}
.mgz-title-a { display: block; font-style: italic; color: var(--mgz-gold-soft); }
.mgz-sapo {
  font-family: var(--mgz-sans);
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 40em;
  color: rgba(243, 235, 223, 0.88);
  border-left: 2px solid var(--mgz-gold);
  padding-left: 20px;
}
.mgz-cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 4px;
  font-family: var(--mgz-sans);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mgz-gold-soft);
  text-decoration: none;
}
.mgz-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--mgz-gold), transparent);
  animation: mgz-drop 2.6s ease-in-out infinite;
}
.mgz-cue:focus-visible { outline: 3px solid var(--mgz-gold); outline-offset: 4px; border-radius: 4px; }
@keyframes mgz-drop {
  0% { transform: translateY(-6px); opacity: 0.2; }
  50% { transform: translateY(6px); opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0.2; }
}

/* Chương và cột đọc */
.mgz-chapter { padding: 18svh 0 8svh; }
.mgz-col { max-width: 680px; margin: 0 auto; padding: 0 28px; }
.mgz-num {
  display: block;
  font-family: var(--mgz-serif);
  font-style: italic;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--mgz-gold);
  margin-bottom: 36px;
}
.mgz-num::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--mgz-lacquer);
  margin-top: 18px;
}
.mgz-lede { font-size: 1.42rem; line-height: 1.7; color: var(--mgz-ink); }
.mgz-ch-open .mgz-lede::first-letter {
  float: left;
  font-size: 4.4em;
  line-height: 0.82;
  padding: 6px 12px 0 0;
  color: var(--mgz-cinnabar);
}

/* Ảnh tràn lề */
.mgz-bleed { margin: 14svh 0 6svh; }
.mgz-bleed-frame { position: relative; overflow: hidden; height: clamp(360px, 82svh, 860px); background: var(--mgz-ink); }
.mgz-bleed-frame picture { height: 100%; }
.mgz-bleed-frame img { width: 100%; height: 100%; object-fit: cover; }
.mgz-cap {
  max-width: 680px;
  margin: 16px auto 0;
  padding: 0 28px;
  font-family: var(--mgz-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--mgz-ink-soft);
}

/* Khung ảnh có viền sơn mài */
.mgz-frame { max-width: 980px; margin: 10svh auto; padding: 0 28px; }
.mgz-frame picture { border: 1px solid var(--mgz-gold); padding: 10px; background: var(--mgz-paper-deep); }
.mgz-frame .mgz-cap { padding: 0; margin-left: 0; }

/* Câu trích lớn */
.mgz-pull {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.3;
  color: var(--mgz-lacquer);
  margin-bottom: 1.2em;
  text-wrap: balance;
}
.mgz-pull strong { font-weight: 400; font-style: italic; }
.mgz-four strong {
  display: block;
  margin: 0.6em 0 0.7em;
  padding: 18px 0;
  border-top: 1px solid var(--mgz-gold);
  border-bottom: 1px solid var(--mgz-gold);
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--mgz-cinnabar);
  text-align: center;
}

/* Khoảnh khắc nghỉ: phương trình đổi mới */
.mgz-formula {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #3a120c 0%, var(--mgz-ink) 62%);
  color: var(--mgz-paper);
  padding: 20svh 0;
  margin-top: 8svh;
}
.mgz-sun {
  position: absolute;
  left: 50%;
  bottom: -38vmin;
  width: 76vmin;
  height: 76vmin;
  margin-left: -38vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 74, 0.35) 0%, rgba(184, 54, 31, 0.15) 45%, transparent 70%);
}
.mgz-formula-inner { position: relative; max-width: 940px; margin: 0 auto; padding: 0 28px; text-align: center; }
.mgz-equation { font-size: clamp(1.6rem, 3.8vw, 3rem); line-height: 1.35; margin-bottom: 0.8em; }
.mgz-equation strong { font-weight: 400; }
.mgz-term { display: inline-block; }
.mgz-term-lead { font-style: italic; color: var(--mgz-gold-soft); }
.mgz-op { display: inline-block; color: var(--mgz-cinnabar); padding: 0 0.15em; }
.mgz-rule { width: 64px; height: 0; border: 0; border-top: 1px solid var(--mgz-gold); margin: 40px auto; }
.mgz-formula-text { max-width: 640px; margin: 0 auto; font-size: 1.22rem; color: rgba(243, 235, 223, 0.86); }

/* Kể chuyện theo cuộn: khung cảnh đứng yên, các bước chữ trôi qua */
.mgz-ch-scrolly { padding-bottom: 4svh; }
.mgz-scrolly {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  align-items: start;
}
.mgz-stage { position: sticky; top: 8svh; }
.mgz-stage-frame { overflow: hidden; height: 72svh; background: var(--mgz-ink); border: 1px solid var(--mgz-gold); }
.mgz-stage-frame picture { height: 100%; }
.mgz-stage-frame img { width: 100%; height: 100%; object-fit: cover; }
.mgz-stage .mgz-cap { padding: 0; margin-left: 0; }
.mgz-steps { padding: 6svh 0 10svh; }
.mgz-step { min-height: 72svh; display: flex; align-items: center; }
.mgz-step p {
  margin: 0;
  padding: 28px 0 28px 26px;
  border-left: 2px solid var(--mgz-gold);
}
.mgz-step strong { display: block; color: var(--mgz-lacquer); font-size: 1.3rem; line-height: 1.45; margin-bottom: 10px; }
.mgz-root.mgz-js .mgz-step { opacity: 0.32; transition: opacity 0.9s ease; }
.mgz-root.mgz-js .mgz-step.mgz-step--on { opacity: 1; }
.mgz-root.mgz-js .mgz-step.mgz-step--on p { border-left-color: var(--mgz-cinnabar); }
.mgz-root.mgz-js .mgz-stage-frame img { transition: transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mgz-root.mgz-js .mgz-stage[data-mgz-active="2"] .mgz-stage-frame img { transform: scale(1.07) translateX(-1.5%); }
.mgz-root.mgz-js .mgz-stage[data-mgz-active="3"] .mgz-stage-frame img { transform: scale(1.14) translateX(1.5%); }

/* Kết: bình minh */
.mgz-ch-close { padding-bottom: 14svh; }
.mgz-finale {
  position: relative;
  overflow: hidden;
  min-height: 90svh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--mgz-ink) 0%, #2a0f0a 45%, var(--mgz-lacquer) 100%);
  color: var(--mgz-paper);
  padding: 16svh 0;
}
.mgz-dawn {
  position: absolute;
  left: 50%;
  bottom: -30vmin;
  width: 90vmin;
  height: 90vmin;
  margin-left: -45vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 201, 138, 0.55) 0%, rgba(201, 162, 74, 0.2) 40%, transparent 68%);
}
.mgz-finale-inner { position: relative; max-width: 900px; margin: 0 auto; padding: 0 28px; text-align: center; }
.mgz-manifesto { font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.4; margin: 0; }
.mgz-manifesto strong { font-weight: 400; }
.mgz-line { display: block; margin-bottom: 0.5em; }
.mgz-line-long { font-size: 0.72em; line-height: 1.6; color: rgba(243, 235, 223, 0.9); max-width: 36em; margin: 0.9em auto 0; }
.mgz-coda { font-size: clamp(1.4rem, 2.6vw, 2rem); font-style: italic; color: var(--mgz-gold-soft); margin: 0; }
.mgz-coda strong { font-weight: 400; }

/* Chữ hiện dần — chỉ khi JS chạy */
.mgz-root.mgz-js [data-mgz-animate] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s ease; }
.mgz-root.mgz-js [data-mgz-animate].mgz-visible { opacity: 1; transform: none; }
.mgz-root.mgz-js .mgz-equation .mgz-term, .mgz-root.mgz-js .mgz-equation .mgz-op { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease, transform 0.9s ease; }
.mgz-root.mgz-js .mgz-equation.mgz-visible .mgz-term, .mgz-root.mgz-js .mgz-equation.mgz-visible .mgz-op { opacity: 1; transform: none; }
.mgz-root.mgz-js .mgz-equation.mgz-visible .mgz-term:nth-child(3) { transition-delay: 0.35s; }
.mgz-root.mgz-js .mgz-equation.mgz-visible .mgz-op:nth-child(2) { transition-delay: 0.2s; }
.mgz-root.mgz-js .mgz-equation.mgz-visible .mgz-op:nth-child(4) { transition-delay: 0.5s; }
.mgz-root.mgz-js .mgz-equation.mgz-visible .mgz-term:nth-child(5) { transition-delay: 0.65s; }
.mgz-root.mgz-js .mgz-equation.mgz-visible .mgz-op:nth-child(6) { transition-delay: 0.8s; }
.mgz-root.mgz-js .mgz-equation.mgz-visible .mgz-term:nth-child(7) { transition-delay: 0.95s; }
.mgz-root.mgz-js [data-mgz-parallax] img { transform: scale(1.12); will-change: transform; }

/* Điện thoại */
@media (max-width: 760px) {
  .mgz-root { font-size: 1.1rem; line-height: 1.75; }
  .mgz-hero-text { padding: 34svh 20px 7svh; }
  .mgz-title { font-size: clamp(2.1rem, 10vw, 3rem); }
  .mgz-sapo { font-size: 1rem; padding-left: 14px; }
  .mgz-chapter { padding: 12svh 0 5svh; }
  .mgz-col { padding: 0 20px; }
  .mgz-num { font-size: 3.2rem; margin-bottom: 26px; }
  .mgz-lede { font-size: 1.22rem; }
  .mgz-bleed { margin: 9svh 0 4svh; }
  .mgz-bleed-frame { height: auto; }
  .mgz-bleed-frame img { height: auto; }
  .mgz-cap { padding: 0 20px; }
  .mgz-frame { padding: 0 20px; margin: 7svh auto; }
  .mgz-frame picture { padding: 6px; }
  .mgz-four strong { font-size: 1.22rem; }
  .mgz-formula { padding: 13svh 0; }
  .mgz-formula-inner { padding: 0 20px; }
  .mgz-term, .mgz-op { display: block; }
  .mgz-formula-text { font-size: 1.08rem; }
  .mgz-scrolly { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
  .mgz-stage { position: relative; top: auto; }
  .mgz-stage-frame { height: auto; }
  .mgz-stage-frame img { height: auto; }
  .mgz-steps { padding: 2svh 0 4svh; }
  .mgz-step { min-height: 0; margin-bottom: 20px; }
  .mgz-step p { padding: 16px 0 16px 18px; }
  .mgz-step strong { font-size: 1.15rem; }
  .mgz-root.mgz-js .mgz-step { opacity: 1; }
  .mgz-finale { min-height: 0; padding: 14svh 0; }
  .mgz-finale-inner { padding: 0 20px; }
  .mgz-line-long { font-size: 0.78em; }
}

/* Tôn trọng người đọc tắt chuyển động */
@media (prefers-reduced-motion: reduce) {
  .mgz-cue::after { animation: none; }
  .mgz-root.mgz-js [data-mgz-animate] { opacity: 1; transform: none; transition: none; }
  .mgz-root.mgz-js .mgz-equation .mgz-term, .mgz-root.mgz-js .mgz-equation .mgz-op { opacity: 1; transform: none; transition: none; }
  .mgz-root.mgz-js .mgz-step { opacity: 1; transition: none; }
  .mgz-root.mgz-js .mgz-stage-frame img { transition: none; transform: none; }
  .mgz-root.mgz-js .mgz-stage[data-mgz-active="2"] .mgz-stage-frame img { transform: none; }
  .mgz-root.mgz-js .mgz-stage[data-mgz-active="3"] .mgz-stage-frame img { transform: none; }
  .mgz-root.mgz-js [data-mgz-parallax] img { transform: none; }
}

@media print {
  .mgz-root { background: #ffffff; color: #000000; font-size: 11pt; }
  .mgz-hero, .mgz-formula, .mgz-finale { background: #ffffff; color: #000000; min-height: 0; }
  .mgz-sapo, .mgz-formula-text, .mgz-line-long, .mgz-coda { color: #000000; }
  .mgz-hero-shade { background: none; }
}