/* Ý tưởng: bình minh trên vịnh — giấy kem, biển sâu và tia nắng cam dẫn mắt qua năm chặng */
.mgz-root {
  --mgz-ink: #15222c;
  --mgz-paper: #f4eee2;
  --mgz-mist: #e3ecee;
  --mgz-sea: #0f2d3d;
  --mgz-deep: #0a1c27;
  --mgz-sun: #d9692f;
  --mgz-sun-soft: #f2a46f;
  --mgz-jade: #2c8a7e;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--mgz-ink);
  background: var(--mgz-paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.mgz-root img {
  max-width: 100%;
}

/* Cảnh mở đầu toàn màn hình */
.mgz-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fbf7f0;
  background: var(--mgz-deep);
  isolation: isolate;
  overflow: hidden;
}

.mgz-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  z-index: -2;
}

.mgz-hero-media picture {
  display: block;
  height: 100%;
}

.mgz-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mgz-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 28, 39, 0) 30%, rgba(10, 28, 39, .55) 58%, rgba(10, 28, 39, .94) 100%);
}

.mgz-hero-text {
  width: 100%;
  max-width: 54rem;
  padding: clamp(28px, 6vw, 80px);
  box-sizing: border-box;
}

.mgz-title {
  margin: 0 0 .55em;
  font-weight: 400;
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.mgz-kicker {
  display: block;
  margin-bottom: .7em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(.78rem, .7rem + .3vw, .95rem);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mgz-sun-soft);
}

.mgz-title-main {
  display: block;
}

.mgz-sapo {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem);
  line-height: 1.62;
  color: rgba(251, 247, 240, .9);
}

.mgz-cue {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  min-height: 44px;
  margin-top: 1.6rem;
  padding: 0 4px;
  color: #fbf7f0;
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(251, 247, 240, .4);
}

.mgz-cue::after {
  content: "\2193";
  display: inline-block;
  color: var(--mgz-sun-soft);
  font-size: 1.1rem;
  animation: mgz-bob 2.4s ease-in-out infinite;
}

.mgz-cue:focus-visible {
  outline: 3px solid var(--mgz-sun-soft);
  outline-offset: 4px;
}

.mgz-cue:hover {
  border-bottom-color: var(--mgz-sun-soft);
}

/* Các chặng: mỗi chặng một bầu không khí riêng */
.mgz-chapter {
  position: relative;
  padding: clamp(72px, 12vw, 168px) 0;
}

.mgz-ch1 {
  background: var(--mgz-paper);
}

.mgz-ch2 {
  background: linear-gradient(180deg, var(--mgz-paper) 0%, var(--mgz-mist) 22%, var(--mgz-mist) 100%);
}

.mgz-ch3 {
  background: linear-gradient(180deg, var(--mgz-sea) 0%, var(--mgz-deep) 100%);
  color: #e6edf0;
}

.mgz-ch4 {
  background: var(--mgz-paper);
}

.mgz-ch5 {
  background: linear-gradient(180deg, var(--mgz-deep) 0%, #183142 55%, #3a2a24 100%);
  color: #f3ebe0;
}

.mgz-chno {
  display: block;
  margin: 0 auto 28px;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(3.4rem, 2rem + 6vw, 7rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--mgz-sun);
}

.mgz-ch3 .mgz-chno,
.mgz-ch5 .mgz-chno {
  -webkit-text-stroke: 1px var(--mgz-sun-soft);
}

.mgz-banner {
  max-width: 1120px;
  margin: 0 auto clamp(52px, 8vw, 104px);
  padding: 0 clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

.mgz-banner picture {
  display: block;
}

.mgz-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Cột đọc hẹp, chữ to, dòng thoáng */
.mgz-col {
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 22px;
}

.mgz-col p {
  margin: 0 0 1.45em;
  font-size: clamp(1.125rem, 1.02rem + .35vw, 1.3rem);
  line-height: 1.8;
  text-wrap: pretty;
}

.mgz-col .mgz-lead::first-letter {
  float: left;
  padding: .08em .12em 0 0;
  font-size: 4.3em;
  line-height: .8;
  color: var(--mgz-sun);
}

.mgz-col .mgz-pull {
  margin: 2.4em 0;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.38;
  font-style: italic;
  letter-spacing: -.005em;
}

.mgz-col .mgz-pull::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-bottom: .8em;
  background: var(--mgz-sun);
}

.mgz-col .mgz-quote {
  margin: 2.2em 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--mgz-sun-soft);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.6;
}

.mgz-col .mgz-quote::first-letter {
  color: var(--mgz-sun-soft);
}

.mgz-col .mgz-questions {
  padding: 1.4em 0;
  border-top: 1px solid rgba(243, 235, 224, .25);
  border-bottom: 1px solid rgba(243, 235, 224, .25);
}

.mgz-col .mgz-finale {
  margin-top: 2em;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  line-height: 1.55;
  color: #fff6ea;
}

/* Con số trong câu: nổi màu nắng, chữ số đều để không nhảy dòng */
.mgz-num {
  display: inline-block;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mgz-sun);
}

.mgz-ch3 .mgz-num,
.mgz-ch5 .mgz-num {
  color: var(--mgz-sun-soft);
}

/* Khoảnh khắc số liệu ngân sách */
.mgz-stat {
  margin: 2.4em 0;
  padding: 1.6em 0 1.2em;
  border-top: 1px solid rgba(21, 34, 44, .18);
}

.mgz-col .mgz-stat-text {
  margin-bottom: 1em;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.45;
}

.mgz-meter {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(21, 34, 44, .1);
  overflow: hidden;
}

.mgz-meter-plan,
.mgz-meter-now {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  transform-origin: left center;
}

.mgz-meter-plan {
  width: 19.2%;
  background: rgba(217, 105, 47, .35);
}

.mgz-meter-now {
  width: 21%;
  background: var(--mgz-sun);
  mix-blend-mode: multiply;
}

/* Ảnh tràn lề */
.mgz-bleed {
  margin: clamp(60px, 9vw, 128px) 0;
}

.mgz-bleed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mgz-deep);
}

.mgz-bleed-frame picture {
  display: block;
  height: 100%;
}

.mgz-bleed-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mgz-bleed figcaption {
  max-width: 38rem;
  margin: 16px auto 0;
  padding: 0 22px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .92rem;
  line-height: 1.6;
  opacity: .78;
}

.mgz-bleed figcaption::before {
  content: "\25B2";
  display: inline-block;
  margin-right: .6em;
  font-size: .6rem;
  vertical-align: .15em;
  color: var(--mgz-sun);
}

.mgz-end {
  margin-bottom: 0;
}

/* Chuyển động: chỉ khi JS đã chạy */
.mgz-root.mgz-js .mgz-hero-media img {
  animation: mgz-breathe 16s ease-out both;
}

.mgz-root.mgz-js .mgz-hero-text {
  animation: mgz-rise 1.6s .2s ease both;
}

.mgz-root.mgz-js .mgz-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

.mgz-root.mgz-js .mgz-reveal.mgz-visible {
  opacity: 1;
  transform: none;
}

.mgz-root.mgz-js .mgz-bleed-frame img {
  transform: scale(1.12);
  will-change: transform;
}

.mgz-root.mgz-js .mgz-meter span {
  transform: scaleX(0);
  transition: transform 1.8s .3s cubic-bezier(.2, .7, .2, 1);
}

.mgz-root.mgz-js .mgz-stat.mgz-visible .mgz-meter span {
  transform: none;
}

@keyframes mgz-breathe {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes mgz-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes mgz-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Điện thoại */
@media (max-width: 760px) {
  .mgz-hero-text {
    padding: 28px 20px 36px;
  }
  .mgz-chapter {
    padding: 64px 0;
  }
  .mgz-col {
    padding: 0 20px;
  }
  .mgz-col .mgz-pull {
    margin: 1.8em 0;
  }
  .mgz-col .mgz-quote {
    padding-left: .9em;
  }
  .mgz-bleed-frame {
    aspect-ratio: 4 / 3;
  }
  .mgz-bleed figcaption {
    padding: 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mgz-cue::after {
    animation: none;
  }
  .mgz-root.mgz-js .mgz-hero-media img,
  .mgz-root.mgz-js .mgz-hero-text {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .mgz-root.mgz-js .mgz-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mgz-root.mgz-js .mgz-bleed-frame img {
    transform: none;
  }
  .mgz-root.mgz-js .mgz-meter span {
    transform: none;
    transition: none;
  }
}

/* Bản in: hiện đủ mọi chữ và hình, gỡ mọi trạng thái chờ hiệu ứng */
@media print {
  .mgz-root,
  .mgz-ch2,
  .mgz-ch3,
  .mgz-ch5 {
    background: #fff;
    color: #000;
  }
  .mgz-hero {
    min-height: auto;
    color: #000;
    background: #fff;
  }
  .mgz-hero::after {
    background: none;
  }
  .mgz-hero-media {
    position: relative;
  }
  .mgz-sapo {
    color: #000;
  }
  .mgz-cue::after {
    animation: none;
  }
  .mgz-col .mgz-finale {
    color: #000;
  }
  .mgz-root.mgz-js .mgz-reveal,
  .mgz-root.mgz-js .mgz-reveal.mgz-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mgz-root.mgz-js .mgz-hero-text {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .mgz-root.mgz-js .mgz-hero-media img {
    animation: none;
    transform: none;
  }
  .mgz-root.mgz-js .mgz-meter span {
    transform: none;
    transition: none;
  }
  .mgz-root.mgz-js .mgz-bleed-frame img {
    transform: none;
  }
}