/* ══════════════════════════════════════════════
   NAM THẮNG — 3D "NĂM BỘ SƯU TẬP, 38 MÀU"
   Mặc định là bản tĩnh (tiêu đề + đoạn giới thiệu). Khi 3D chạy được,
   mau-ma-3d.js thêm class .mm3-live; hạt đá tự gom về năm bộ, chạy một lần (không ghim, không theo cuộn).
   ══════════════════════════════════════════════ */

.mm3 { position: relative; background: var(--cream); padding: 44px 0 30px; }
.mm3-stage { position: relative; }
.mm3-head { text-align: center; }
.mm3-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.12; margin: 10px auto 12px; max-width: 18em; text-wrap: balance;
}
.mm3-head .mm3-lede { margin: 0 auto; max-width: 36em; color: var(--mid); font-size: 14.5px; line-height: 1.65; }
.mm3-cap, .mm3-labels, .mm3-next { display: none; }

/* ── Khi 3D chạy ── */
.mm3.mm3-live { padding: 0; background: var(--warm); }
.mm3-live .mm3-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.mm3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.mm3-on .mm3-canvas { opacity: 1; }
.mm3-live .mm3-head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none;
  padding-top: calc(68px + clamp(18px, 5vh, 48px));
}
.mm3-live .mm3-head::before {
  /* soft wash so the heading stays legible over the stone surface */
  content: ""; position: absolute; top: 0; bottom: -60px; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: linear-gradient(to bottom, var(--warm) 55%, rgba(245,240,235,0));
}
.mm3-live .mm3-cap {
  display: block; position: relative; height: 1.6em; margin-top: 14px;
  font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2vw, 21px); color: var(--dark);
  opacity: 0; transition: opacity .9s ease;
}
.mm3-end .mm3-cap { opacity: 1; }

.mm3-live .mm3-labels { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mm3-lab { position: absolute; transform: translate(-50%, 0); text-align: center; white-space: nowrap; opacity: 0; }
.mm3-lab strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(17px, 1.7vw, 22px); }
.mm3-lab small { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }

.mm3-live .mm3-next {
  display: block; position: absolute; left: 0; right: 0; bottom: clamp(18px, 5vh, 44px); z-index: 2; text-align: center;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dark);
  opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; pointer-events: none;
}
.mm3-next span { border-bottom: 1px solid var(--accent); padding-bottom: 4px; }
.mm3-end .mm3-next { opacity: 1; transform: none; pointer-events: auto; }


@media (max-width: 768px) {
  .mm3-head .mm3-lede { font-size: 13.5px; line-height: 1.55; }
  .mm3-live .mm3-lede { max-height: 8em; overflow: hidden; transition: max-height .5s, opacity .4s; }
  .mm3-moved .mm3-lede { max-height: 0; opacity: 0; }
  .mm3-lab { transform: translate(0, -50%); text-align: left; }
  .mm3-lab strong { font-size: 16px; }
  .mm3-lab small { font-size: 9px; letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) {
  .mm3-canvas, .mm3-cap, .mm3-next { transition: none; }
}