@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Literata:wght@400;600&family=Be+Vietnam+Pro:wght@400;600&display=swap");

/* Bảng màu "tím Huế": mực tím đêm, giấy dó, vàng son cung đình */
.mgz-root {
  --mgz-ink: #21172b;
  --mgz-plum: #3a2450;
  --mgz-paper: #f5eee2;
  --mgz-gold: #b8893a;
  --mgz-gold-soft: #d8b878;
  --mgz-red: #9a3a2a;
  --mgz-muted: #6c6172;
  --mgz-display: "Cormorant Garamond", serif;
  --mgz-body: "Literata", serif;
  --mgz-ui: "Be Vietnam Pro", sans-serif;
  background: var(--mgz-paper);
  color: var(--mgz-ink);
  font-family: var(--mgz-body);
  line-height: 1.6;
}

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

/* Đặt lại lề mặc định */
.mgz-root figure { margin: 0; }
.mgz-root h2 { margin: 0; }
.mgz-root p { margin: 0; }
.mgz-root picture { display: block; }
.mgz-root img { display: block; max-width: 100%; }

.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 trọn khung */
.mgz-hero {
  position: relative;
  background: var(--mgz-ink);
  color: var(--mgz-paper);
}
.mgz-hero img { width: 100%; height: auto; }
.mgz-hero-text { padding: 36px 20px 20px; }
.mgz-title {
  font-family: var(--mgz-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.mgz-root .mgz-sapo {
  font-family: var(--mgz-body);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.7;
  max-width: 40rem;
  color: rgba(245, 238, 226, 0.88);
}
.mgz-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px;
  font-family: var(--mgz-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mgz-gold-soft);
}
.mgz-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background: var(--mgz-gold-soft);
  transform-origin: top;
  animation: mgz-drip 2.6s ease-in-out infinite;
}
.mgz-hero-cap {
  padding: 4px 20px 30px;
  font-family: var(--mgz-ui);
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(245, 238, 226, 0.6);
}

@keyframes mgz-drip {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (max-width: 767px) {
  .mgz-root .mgz-hero img { position: static; width: 100%; height: auto; transform: none !important; }
}

@media (min-width: 768px) {
  .mgz-hero {
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .mgz-hero img {
    position: absolute;
    top: -6%;
    left: 0;
    width: 100%;
    height: 112%;
    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(33, 23, 43, 0.2) 0%, rgba(33, 23, 43, 0.3) 45%, rgba(33, 23, 43, 0.94) 100%);
  }
  .mgz-hero-text {
    position: relative;
    z-index: 2;
    max-width: 64rem;
    padding: 0 6vw 10svh;
  }
  .mgz-hero-cap {
    position: absolute;
    z-index: 2;
    top: 28px;
    right: 6vw;
    max-width: 22rem;
    padding: 0;
    text-align: right;
  }
}

/* Chặng chữ */
.mgz-chapter { padding: clamp(72px, 14svh, 160px) 0; }
.mgz-chapter--tight { padding: clamp(56px, 10svh, 110px) 0; }
.mgz-num {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
  font-family: var(--mgz-display);
  font-style: italic;
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--mgz-gold);
}
.mgz-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.mgz-root .mgz-col p {
  font-size: clamp(1.12rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.85;
  margin-bottom: 1.5em;
  text-wrap: pretty;
}
.mgz-root .mgz-col p:last-child { margin-bottom: 0; }
.mgz-root .mgz-dropcap::first-letter {
  float: left;
  font-family: var(--mgz-display);
  font-weight: 600;
  font-size: 4.8em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--mgz-red);
}
.mgz-root .mgz-col .mgz-statement {
  font-family: var(--mgz-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
  line-height: 1.38;
  color: var(--mgz-plum);
  border-top: 1px solid var(--mgz-gold);
  border-bottom: 1px solid var(--mgz-gold);
  padding: 30px 0;
  margin-bottom: 1.4em;
}

/* Chú thích ảnh */
.mgz-root .mgz-cap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 16px 20px 0;
  font-family: var(--mgz-ui);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--mgz-muted);
}

/* Ảnh tràn lề, thị sai nhẹ trên màn rộng */
.mgz-bleed { padding-bottom: 8px; }
.mgz-bleed--dark { background: var(--mgz-ink); padding-bottom: 36px; }
.mgz-bleed--dark .mgz-cap { color: rgba(245, 238, 226, 0.65); }
.mgz-bleed-frame { position: relative; }
.mgz-bleed img { width: 100%; height: auto; }

@media (min-width: 768px) {
  .mgz-bleed-frame { height: 84svh; overflow: hidden; }
  .mgz-bleed-frame img {
    position: absolute;
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
  }
}

/* Ảnh khung giữa: khoảnh khắc nghỉ */
.mgz-pause { padding-top: clamp(80px, 14svh, 150px); }
.mgz-root .mgz-frame { max-width: 70rem; margin: 0 auto; padding: 0 20px; }
.mgz-frame img { width: 100%; height: auto; border-radius: 2px; }
.mgz-root .mgz-frame .mgz-cap { padding-left: 0; padding-right: 0; }
.mgz-root .mgz-frame--coda { margin-top: clamp(64px, 10svh, 120px); margin-bottom: clamp(64px, 10svh, 120px); }

/* Cặp ảnh bảo tàng */
.mgz-root .mgz-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 20px;
  align-items: start;
}
.mgz-duo-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.mgz-root .mgz-duo .mgz-cap { padding-left: 0; padding-right: 0; }
.mgz-root .mgz-duo-item--low { margin-top: 90px; }

@media (max-width: 760px) {
  .mgz-root .mgz-duo { grid-template-columns: 1fr; gap: 40px; }
  .mgz-root .mgz-duo-item--low { margin-top: 0; }
  .mgz-duo-item img { aspect-ratio: auto; }
}

/* Khung kể chuyện theo cuộn: không JS thì ảnh và chữ xếp liền nhau */
.mgz-story { position: relative; background: var(--mgz-ink); color: var(--mgz-paper); padding-bottom: 80px; }
.mgz-scene img { width: 100%; height: auto; }
.mgz-root .mgz-story .mgz-scene-cap { color: rgba(245, 238, 226, 0.7); padding-bottom: 28px; }
.mgz-story .mgz-step { padding-top: 48px; }
.mgz-story .mgz-num { color: var(--mgz-gold-soft); }

/* Khi JS chạy: khung ảnh dính ở nửa trên màn hình, chú thích nằm ngay dưới ảnh trong khung;
   các bước chữ cuộn ở phần dưới, nằm sau khung ảnh nên không bao giờ đè lên chú thích */
.mgz-root.mgz-js.mgz-story-on .mgz-story { padding-bottom: 0; }
.mgz-root.mgz-js.mgz-story-on .mgz-stage {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 52svh;
  overflow: hidden;
  background: var(--mgz-ink);
  border-bottom: 1px solid rgba(216, 184, 120, 0.35);
}
.mgz-root.mgz-js.mgz-story-on .mgz-scene {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease, visibility 0s linear 1.4s;
}
.mgz-root.mgz-js.mgz-story-on .mgz-scene picture {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.mgz-root.mgz-js.mgz-story-on .mgz-scene img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mgz-root.mgz-js.mgz-story-on .mgz-scene picture img {
  transform: scale(1.07);
  transition: transform 9s ease-out;
}
.mgz-root.mgz-js.mgz-story-on .mgz-stage[data-mgz-active="1"] .mgz-scene[data-mgz-scene="1"],
.mgz-root.mgz-js.mgz-story-on .mgz-stage[data-mgz-active="2"] .mgz-scene[data-mgz-scene="2"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s ease, visibility 0s linear 0s;
}
.mgz-root.mgz-js.mgz-story-on .mgz-stage[data-mgz-active="1"] .mgz-scene[data-mgz-scene="1"] picture img,
.mgz-root.mgz-js.mgz-story-on .mgz-stage[data-mgz-active="2"] .mgz-scene[data-mgz-scene="2"] picture img { transform: scale(1); }
.mgz-root.mgz-root.mgz-js.mgz-story-on .mgz-scene-cap {
  position: static;
  flex: 0 0 auto;
  max-width: none;
  margin: 0;
  padding: 12px 20px 14px;
  background: var(--mgz-ink);
  color: rgba(245, 238, 226, 0.82);
}
.mgz-root.mgz-js.mgz-story-on .mgz-steps {
  position: relative;
  z-index: 1;
  padding-top: 6svh;
  padding-bottom: 34svh;
}
.mgz-root.mgz-js.mgz-story-on .mgz-step {
  background: var(--mgz-ink);
  border-top: 2px solid var(--mgz-gold);
  padding-top: 28px;
  padding-bottom: 28px;
  margin-bottom: 26svh;
  opacity: 0.55;
  transition: opacity 0.8s ease;
}
.mgz-root.mgz-js.mgz-story-on .mgz-step:last-child { margin-bottom: 0; }
.mgz-root.mgz-js.mgz-story-on .mgz-step.mgz-step--on { opacity: 1; }
.mgz-root.mgz-js.mgz-story-on .mgz-story .mgz-num { font-size: 2.6rem; margin-bottom: 22px; }

@media (min-width: 768px) {
  .mgz-root.mgz-js.mgz-story-on .mgz-stage { height: 64svh; }
  .mgz-root.mgz-root.mgz-js.mgz-story-on .mgz-scene-cap { padding: 14px 6vw 16px; }
}

/* Đoạn kết: đêm Huế */
.mgz-coda {
  background: var(--mgz-ink);
  color: var(--mgz-paper);
  padding: clamp(80px, 14svh, 160px) 0;
}
.mgz-root .mgz-coda .mgz-cap { color: rgba(245, 238, 226, 0.62); }
.mgz-coda .mgz-num { color: var(--mgz-gold-soft); }
.mgz-end {
  display: block;
  margin-top: 56px;
  text-align: center;
  font-size: 1.4rem;
  color: var(--mgz-gold-soft);
}
.mgz-end::before { content: "\2756"; }

/* Chữ hiện dần khi cuộn tới (chỉ khi JS chạy) */
.mgz-root.mgz-js [data-mgz-animate] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s ease, transform 1s ease;
}
.mgz-root.mgz-js [data-mgz-animate].mgz-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mgz-root.mgz-js [data-mgz-animate] { opacity: 1; transform: none; transition: none; }
  .mgz-cue::after { animation: none; }
  .mgz-root .mgz-hero img { transform: none !important; }
  .mgz-root .mgz-bleed-frame img { transform: none !important; }
  .mgz-root.mgz-js.mgz-story-on .mgz-scene { transition: none; }
  .mgz-root.mgz-js.mgz-story-on .mgz-scene img { transition: none; transform: none; }
  .mgz-root.mgz-js.mgz-story-on .mgz-step { transition: none; }
}

@media print {
  .mgz-root { background: #fff; color: #000; }
  .mgz-hero { background: #fff; color: #000; }
  .mgz-root .mgz-sapo { color: #000; }
  .mgz-coda { background: #fff; color: #000; }
  .mgz-story { background: #fff; color: #000; }
}