/* ============================================
   MU Season 5 — Unified Professional Stylesheet
   ============================================ */
:root {
  --bg: #0a0a0c;
  --bg2: #121218;
  --bg3: #1a1a22;
  --gold: #e8c56a;
  --gold-d: #c9a227;
  --gold-l: #f5e6b0;
  --text: #f0eee8;
  --muted: #9a968c;
  --line: rgba(232, 197, 106, 0.28);
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-title: "Roboto Slab", "Be Vietnam Pro", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 70px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
body.drawer-open { overflow: hidden; }
a { color: var(--gold); text-decoration: none; transition: color 0.25s var(--ease); }
a:hover { color: var(--gold-l); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ---------- Buttons ---------- */
.gbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 1.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
  overflow: hidden;
}
.gbtn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.gbtn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.gbtn:active { transform: translateY(0) scale(0.98); }
.gbtn--gold {
  color: #2a1f08;
  background: linear-gradient(180deg, #f5e6b0 0%, #e8c56a 40%, #c9a227 100%);
  box-shadow: 0 3px 0 #8a6f1a, 0 6px 18px rgba(201, 162, 39, 0.4);
}
.gbtn--gold:hover {
  color: #2a1f08;
  box-shadow: 0 4px 0 #8a6f1a, 0 8px 26px rgba(201, 162, 39, 0.55);
}
.gbtn--dark {
  color: var(--gold-l);
  background: linear-gradient(180deg, #2a2a35 0%, #1a1a22 100%);
  border: 1px solid var(--line);
  box-shadow: 0 3px 0 #0a0a0c, 0 4px 14px rgba(0,0,0,0.4);
}
.gbtn--dark:hover {
  color: #fff;
  border-color: var(--gold);
}
.gbtn--lg { min-height: 52px; padding: 0 1.75rem; font-size: 0.95rem; }
.gbtn--sm { min-height: 36px; padding: 0 0.95rem; font-size: 0.78rem; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 70%, transparent);
  transition: background 0.35s var(--ease), border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.header.is-solid {
  background: rgba(10, 10, 12, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header__inner {
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.logo img {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(232,197,106,0.3));
}
.logo span {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.menu a {
  display: block;
  padding: 0.45rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  border-radius: 4px;
  transition: color 0.25s, background 0.25s;
}
.menu a:hover,
.menu a.active {
  color: var(--gold);
  background: rgba(232, 197, 106, 0.1);
}
.header__btns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.burger {
  display: none;
  color: var(--gold);
  font-size: 1.55rem;
  padding: 0.25rem;
  line-height: 1;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background:#050609;
}
.hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,10,12,0.35) 0%,
    transparent 25%,
    transparent 70%,
    rgba(10,10,12,0.45) 90%,
    var(--bg) 100%
  );
  pointer-events: none;
}
/* CTA không đè video — nằm ở .quick bên dưới */
.hero__actions { display: none !important; }

/* ---------- Quick panel ---------- */
.quick {
  position: relative;
  z-index: 5;
  margin-top: -0.5rem;
  padding: 1rem 0 2rem;
}
.quick__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
}
.quick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 96px;
  padding: 0.9rem 0.4rem;
  background: linear-gradient(180deg, rgba(42,42,53,0.95) 0%, rgba(18,18,24,0.98) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s, color 0.3s;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.quick__item:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(201,162,39,0.22);
  color: var(--gold-l);
}
.quick__item:active { transform: translateY(-1px); }
.quick__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(232,197,106,0.12);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.quick__item:hover .quick__icon {
  background: linear-gradient(180deg, var(--gold-l), var(--gold-d));
  color: #2a1f08;
  border-color: transparent;
}
.quick__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.quick__item--main {
  border-color: rgba(232,197,106,0.5);
  background: linear-gradient(180deg, rgba(201,162,39,0.22) 0%, rgba(18,18,24,0.98) 100%);
}
.quick__item--main .quick__icon {
  background: linear-gradient(180deg, var(--gold-l), var(--gold-d));
  color: #2a1f08;
  border: none;
}

/* ---------- News box ---------- */
.news-sec { padding: 2.5rem 0 3.5rem; }
.news-box {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(0,0,0,0.28);
}
.news-box__head {
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #1e1e28 0%, #14141c 100%);
  border-bottom: 1px solid var(--line);
}
.news-box__title {
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(232,197,106,0.14) 0%, transparent 100%);
}
.news-tabs {
  display: flex;
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.news-tabs button {
  flex: 1;
  min-width: max-content;
  padding: 0.9rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.news-tabs button:hover {
  color: var(--gold-l);
  background: rgba(232,197,106,0.05);
}
.news-tabs button.is-on {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(232,197,106,0.08);
}
.news-body { min-height: 0; }
.news-list li {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.news-list li:last-child { border-bottom: none; }
.news-list a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.2rem;
  color: inherit;
  transition: background 0.25s var(--ease);
}
.news-list a:hover { background: rgba(232,197,106,0.06); }
.news-list time {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 5.5rem;
  font-variant-numeric: tabular-nums;
}
.news-list__tag {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  background: rgba(232,197,106,0.14);
  color: var(--gold);
  text-transform: uppercase;
}
.news-list__title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  transition: color 0.25s;
  min-width: 0;
}
.news-list a:hover .news-list__title { color: var(--gold-l); }
.news-more {
  display: block;
  text-align: center;
  padding: 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.2);
  transition: background 0.25s, color 0.25s;
}
.news-more:hover {
  background: rgba(232,197,106,0.1);
  color: var(--gold-l);
}

/* ---------- Features ---------- */
.feat {
  padding: 3.25rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feat__title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1.75rem;
}
.feat__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.feat__card {
  padding: 1.4rem 1.1rem;
  text-align: center;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.feat__card:hover {
  border-color: var(--line);
  transform: translateY(-3px);
}
.feat__ico {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 50%;
  background: rgba(232,197,106,0.1);
  border: 1px solid var(--line);
  color: var(--gold);
}
.feat__card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gold-l);
  margin: 0.7rem 0 0.35rem;
}
.feat__card p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- CTA ---------- */
.cta-sec { padding: 3.25rem 0; }
.cta-box {
  text-align: center;
  padding: 2.5rem 1.4rem;
  background: linear-gradient(135deg, rgba(232,197,106,0.1) 0%, transparent 55%), var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cta-box h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
}
.cta-box p {
  color: var(--muted);
  margin-bottom: 1.35rem;
  font-size: 0.95rem;
}
.cta-box__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

/* ---------- Footer ---------- */
.footer {
  padding: 2.25rem 0 1.15rem;
  background: #050506;
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.footer h4 {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}
.footer li { margin-bottom: 0.35rem; }
.footer a {
  color: var(--muted);
  font-size: 0.85rem;
}
.footer a:hover { color: var(--gold); }
.footer__copy {
  text-align: center;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---------- Lightbox ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lb.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lb__bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lb {
  padding: 1.5vh 1.5vw;
}
.lb__panel {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 90vw;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.35s var(--ease);
}
.lb.open .lb__panel { transform: none; }
.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: linear-gradient(180deg, #1e1e28, #14141c);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.lb__bar h3 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
}
.lb__close {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 1.35rem;
  transition: background 0.2s, color 0.2s;
}
.lb__close:hover {
  background: rgba(232,197,106,0.12);
  color: var(--gold);
}
.lb__body {
  flex: 1;
  overflow: auto;
  background: #0a0a0c;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.lb__body img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Download popup ---------- */
.pop {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}
.pop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.pop__bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pop__box {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 1rem;
  padding: 1.7rem;
  text-align: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  transform: scale(0.95);
  transition: transform 0.3s var(--ease);
}
.pop.open .pop__box { transform: none; }
.pop__box h3 {
  color: var(--gold);
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
  font-weight: 800;
}
.pop__box p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}
.pop__x {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  color: var(--muted);
  font-size: 1.3rem;
}

/* ---------- Drawer ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(10,10,12,0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.drawer.open {
  opacity: 1;
  visibility: visible;
}
.drawer a {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}
.drawer a:hover { color: var(--gold); }
.drawer__x {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  color: var(--gold);
  font-size: 1.75rem;
}

/* ---------- Music ---------- */
.music {
  position: fixed;
  bottom: 1.1rem;
  right: 1.1rem;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transition: transform 0.25s, background 0.25s;
}
.music:hover {
  transform: scale(1.08);
  background: rgba(232,197,106,0.12);
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Article / News detail pages ---------- */
.page-pad {
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 3rem;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--gold); }
.article {
  max-width: 720px;
  margin: 0 auto;
}
.article h1 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}
.article-meta time { color: var(--gold); font-weight: 600; }
.article-content {
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.75;
}
.article-content p { margin-bottom: 1rem; }
.article-content h2,
.article-content h3 {
  color: var(--gold);
  margin: 1.5rem 0 0.65rem;
  font-weight: 700;
}
.article-content ul {
  list-style: disc;
  padding-left: 1.35rem;
  margin-bottom: 1rem;
}
.article-content li { margin-bottom: 0.35rem; }
.article-back { margin-top: 2.25rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .menu,
  .header__btns { display: none; }
  .burger { display: block; }
  .news-box__title { display: none; }
  .quick__grid { grid-template-columns: repeat(3, 1fr); }
  .feat__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .quick__grid { grid-template-columns: repeat(2, 1fr); }
  .quick__item { min-height: 86px; }
  .feat__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .news-list a {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }
  .news-list__title { flex-basis: 100%; }
}


/* CTA row under hero — không đè video */
.quick-cta {
  position: relative;
  z-index: 6;
  margin-top: -0.25rem;
  padding: 0.75rem 0 0.5rem;
}
.quick-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
@media (max-width: 500px) {
  .quick-cta__row { flex-direction: column; align-items: stretch; }
  .quick-cta__row .gbtn { width: 100%; }
}



/* ---------- Motion polish ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gbtn {
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s, border-color 0.25s, color 0.25s;
  }
  .quick__item {
    transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s, color 0.3s, background 0.3s;
  }
  .quick__item:hover {
    transform: translateY(-6px) scale(1.02);
  }
  .quick__icon {
    transition: transform 0.35s var(--ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.35s;
  }
  .quick__item:hover .quick__icon {
    transform: scale(1.12) rotate(-4deg);
    box-shadow: 0 0 20px rgba(232,197,106,0.35);
  }
  .news-list a {
    transition: background 0.3s var(--ease), transform 0.25s var(--ease), padding-left 0.25s;
  }
  .news-list a:hover {
    padding-left: 1.4rem;
  }
  .feat__card {
    transition: border-color 0.35s, transform 0.35s var(--ease), box-shadow 0.35s;
  }
  .feat__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  }
  .feat__ico {
    transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.35s;
  }
  .feat__card:hover .feat__ico {
    transform: scale(1.1);
    box-shadow: 0 0 18px rgba(232,197,106,0.25);
  }
  .news-box {
    transition: box-shadow 0.4s var(--ease), border-color 0.3s;
  }
  .news-box:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  }
  .cta-box {
    transition: box-shadow 0.4s, border-color 0.3s, transform 0.35s var(--ease);
  }
  .cta-box:hover {
    border-color: rgba(232,197,106,0.45);
    box-shadow: 0 12px 40px rgba(201,162,39,0.12);
  }
  .header {
    transition: background 0.4s var(--ease), border-color 0.35s, backdrop-filter 0.35s;
  }
  .logo img {
    transition: transform 0.35s var(--ease), filter 0.35s;
  }
  .logo:hover img {
    transform: scale(1.06);
    filter: drop-shadow(0 0 12px rgba(232,197,106,0.45));
  }
  .menu a {
    position: relative;
  }
  .menu a::after {
    content: "";
    position: absolute;
    left: 0.95rem; right: 0.95rem; bottom: 0.2rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform 0.3s var(--ease);
  }
  .menu a:hover::after,
  .menu a.active::after {
    transform: scaleX(1);
  }
}

/* Soft glow accents */
.gbtn--gold {
  position: relative;
}
.gbtn--gold:hover {
  box-shadow: 0 4px 0 #8a6f1a, 0 10px 28px rgba(201,162,39,0.55), 0 0 24px rgba(232,197,106,0.2);
}
.quick__item--main {
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(232,197,106,0.15);
}
.hero__shade {
  background: linear-gradient(
    180deg,
    rgba(10,10,12,0.4) 0%,
    transparent 22%,
    transparent 68%,
    rgba(10,10,12,0.55) 88%,
    var(--bg) 100%
  );
}

/* News tag pulse on hover row */
.news-list a:hover .news-list__tag {
  background: rgba(232,197,106,0.25);
}

/* Smooth page sections */
.news-sec, .feat, .cta-sec {
  position: relative;
}
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Scrollbar subtle */
body {
  scrollbar-width: thin;
  scrollbar-color: rgba(232,197,106,0.35) transparent;
}



/* ---------- Class system (tỉ lệ gần vttt.cmplay.vn) ---------- */
.class-sec {
  padding: 2.5rem 0 2.75rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(35,70,140,0.28) 0%, transparent 68%),
    linear-gradient(180deg, #0a0e16 0%, #0c121c 45%, #0a0a0c 100%);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.class-sec__ornament { text-align: center; margin-bottom: 0.35rem; }
.class-sec__badge {
  display: inline-block;
  padding: 0.4rem 1.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8eefc;
  background: linear-gradient(180deg, rgba(90,120,180,0.55), rgba(30,45,80,0.85));
  border: 1px solid rgba(180,200,255,0.4);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}
.class-sec__title {
  text-align: center;
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  font-weight: 800;
  color: #e8c56a;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 24px rgba(232,197,106,0.28);
}
/* 3 cột: banner list | art lớn | panel info — tỉ lệ gần vttt */
.class-stage {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: 0.75rem 1.1rem;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  min-height: 420px;
}
@media (max-width: 960px) {
  .class-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1rem;
  }
}
.class-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 220px;
}
@media (max-width: 960px) {
  .class-list {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .class-tab { width: calc(50% - 0.25rem); max-width: 220px; }
}
/* Banner class: 220×56 — copy PNG đúng size từ vttt */
.class-tab {
  display: block;
  width: 220px;
  height: 56px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #12161f;
  position: relative;
  transition: border-color 0.25s, box-shadow 0.3s var(--ease), transform 0.25s var(--ease);
}
.class-tab:hover {
  border-color: rgba(232,197,106,0.55);
  transform: translateX(3px);
}
.class-tab.is-on {
  border-color: #e8c56a;
  box-shadow: 0 0 0 1px rgba(232,197,106,0.35), 0 0 18px rgba(232,197,106,0.25);
}
.class-tab__img {
  width: 220px;
  height: 56px;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* Fallback khi chưa có ảnh banner */
.class-tab__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.65rem;
  background: linear-gradient(90deg, #1a2030, #12161f);
}
.class-tab__ph {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  background: rgba(232,197,106,0.12);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
}
.class-tab__name {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d8dce8;
  line-height: 1.15;
}
.class-tab.is-on .class-tab__name { color: #e8c56a; }

.class-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  height: 420px;
}
.class-hero__glow {
  position: absolute;
  width: min(420px, 90%);
  height: min(420px, 90%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(100,150,255,0.18) 0%, transparent 62%),
    radial-gradient(circle, transparent 55%, rgba(40,60,120,0.15) 70%, transparent 78%);
  border: 1px solid rgba(120,160,220,0.12);
  pointer-events: none;
}
/* Ảnh nhân vật lớn: khuyến nghị 480×640 (3:4) */
.class-hero__img {
  position: relative;
  max-height: 400px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.55));
  transition: opacity 0.35s ease, transform 0.4s var(--ease);
}
.class-hero__ph {
  position: relative;
  width: 220px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(40,55,90,0.45), rgba(10,12,20,0.85));
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-align: center;
  padding: 1rem;
}
.class-info {
  width: 260px;
  padding: 1.35rem 1.25rem 1.45rem;
  background: linear-gradient(165deg, rgba(28,34,52,0.95), rgba(12,14,22,0.97));
  border: 1px solid rgba(180,160,100,0.35);
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  min-height: 220px;
}
@media (max-width: 960px) {
  .class-info { width: 100%; max-width: 420px; margin: 0 auto; }
  .class-hero { height: auto; min-height: 280px; }
  .class-hero__img { max-height: 320px; }
}
.class-info__name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #e8c56a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(232,197,106,0.25);
  text-align: center;
}
.class-info__desc {
  font-size: 0.88rem;
  color: #c5cad6;
  line-height: 1.7;
  text-align: justify;
}

/* ---------- Side dock ---------- */
.side-dock {
  position: fixed;
  top: auto;
  bottom: 1.25rem;
  right: 0;
  transform: none;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.5rem 0.45rem 0.5rem 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.side-dock.is-visible {
  opacity: 1;
  visibility: visible;
}
.side-dock.left {
  right: auto;
  left: 0;
  align-items: flex-start;
  padding: 0.5rem 0 0.5rem 0.45rem;
}
.side-dock__item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 148px;
  padding: 0.55rem 0.75rem;
  background: linear-gradient(135deg, rgba(24,28,42,0.96), rgba(14,16,24,0.98));
  border: 1px solid rgba(232,197,106,0.28);
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: #fff;
  text-decoration: none;
  box-shadow: -4px 4px 20px rgba(0,0,0,0.35);
  transition: transform 0.3s var(--ease), border-color 0.25s, background 0.25s, box-shadow 0.3s;
}
.side-dock.left .side-dock__item {
  border-right: 1px solid rgba(232,197,106,0.28);
  border-left: none;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.35);
}
.side-dock__item:hover {
  transform: translateX(-4px);
  border-color: var(--gold);
  color: #fff;
  box-shadow: -6px 6px 24px rgba(201,162,39,0.2);
}
.side-dock.left .side-dock__item:hover {
  transform: translateX(4px);
}
.side-dock__item--gold {
  background: linear-gradient(135deg, rgba(232,197,106,0.25), rgba(40,32,12,0.95));
  border-color: rgba(232,197,106,0.5);
}
.side-dock__ico {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(232,197,106,0.12);
  border: 1px solid rgba(232,197,106,0.25);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
}
.side-dock__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.side-dock__label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.side-dock__sub {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
}
@media (max-width: 700px) {
  .side-dock {
    top: auto;
    bottom: 0.75rem;
    right: 0.5rem;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 56vw;
  }
  .side-dock__item {
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    border: 1px solid rgba(232,197,106,0.28);
  }
  .side-dock__txt { display: none; }
  .side-dock__item:hover { transform: translateY(-3px); }
}

/* 2026 PHP refresh — icon artwork */
.quick__icon img,
.feat__ico img,
.side-dock__ico img,
.btn-ico {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.quick__icon { width: 48px; height: 48px; padding: 4px; }
.feat__ico { width: 58px; height: 58px; margin: 0 auto .8rem; }
.side-dock__ico { width: 42px; height: 42px; padding: 3px; flex: 0 0 42px; }
.btn-ico { width: 24px; height: 24px; margin-right: .5rem; }
.gbtn { gap: .35rem; }
.quick__item:focus-visible,
.gbtn:focus-visible,
.news-tabs button:focus-visible,
.class-tab:focus-visible {
  outline: 2px solid var(--gold-l);
  outline-offset: 3px;
}

/* ===== 2026 COMPLETE VISUAL REDESIGN ===== */
body {
  background:
    linear-gradient(rgba(5,7,12,.92),rgba(5,7,12,.96)),
    none center top / cover fixed no-repeat;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 50% 20%,rgba(205,151,45,.12),transparent 34%),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,80px 80px}
.header{height:78px;background:linear-gradient(180deg,rgba(5,6,10,.96),rgba(5,6,10,.58),transparent)}
.header.is-solid{background:rgba(6,8,13,.94);box-shadow:0 10px 35px rgba(0,0,0,.4)}
.logo img{height:54px}.menu a{font-size:.82rem;letter-spacing:.045em;text-transform:uppercase}
.hero{min-height:720px;height:100svh;background:#05070c}
.hero__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 52% 38%,transparent 0 18%,rgba(3,5,9,.18) 48%,rgba(3,5,9,.9) 100%),linear-gradient(90deg,rgba(3,5,9,.82),rgba(3,5,9,.12) 50%,rgba(3,5,9,.72))}
.hero__shade{background:linear-gradient(180deg,rgba(3,5,9,.3),transparent 45%,rgba(3,5,9,.76) 83%,#080a10 100%)}
.hero__content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:82px;max-width:1200px}
.hero__eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.28em;color:#f2d787;text-shadow:0 2px 12px #000;margin-bottom:1rem}
.hero__logo{width:min(360px,62vw);filter:drop-shadow(0 10px 30px rgba(0,0,0,.75));margin-bottom:.25rem}
.hero__content h1{font-family:var(--font-title);font-size:clamp(2.6rem,6vw,5.8rem);line-height:.95;text-transform:uppercase;letter-spacing:.02em;background:linear-gradient(#fff8da,#e4bb54 55%,#8e5a13);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 4px 1px #2b1602);max-width:850px}
.hero__content>p{max-width:700px;font-size:clamp(.95rem,1.4vw,1.18rem);color:#ddd7c8;margin:1.25rem 0;text-shadow:0 2px 8px #000}
.hero__meta{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:1.35rem}.hero__meta span{padding:.62rem .9rem;border:1px solid rgba(232,197,106,.35);background:rgba(7,9,14,.68);backdrop-filter:blur(8px);font-size:.8rem;border-radius:4px;box-shadow:inset 0 0 18px rgba(232,197,106,.04)}.hero__meta b{color:#efd27c;margin-right:.4rem}
.hero__buttons{display:flex;gap:.75rem;flex-wrap:wrap}.hero__scroll{position:absolute;z-index:4;bottom:26px;left:50%;transform:translateX(-50%);font-size:2rem;color:#f1d47c;animation:muBounce 1.8s infinite}@keyframes muBounce{50%{transform:translate(-50%,8px)}}
.quick-cta{margin-top:-1px;background:linear-gradient(180deg,#080a10,#0d1018);border-top:1px solid rgba(232,197,106,.18)}
.quick{padding:1.25rem 0 3rem;background:linear-gradient(180deg,#0d1018,rgba(8,10,16,.75))}
.quick__item{min-height:126px;border:1px solid rgba(232,197,106,.24)!important;background:linear-gradient(145deg,rgba(31,34,45,.88),rgba(9,11,17,.95))!important;box-shadow:inset 0 0 28px rgba(232,197,106,.035),0 10px 25px rgba(0,0,0,.3)!important}
.quick__item:hover{transform:translateY(-6px)!important;border-color:#e8c56a!important;box-shadow:0 16px 38px rgba(0,0,0,.45),0 0 22px rgba(232,197,106,.11)!important}.quick__icon{width:52px!important;height:52px!important;background:radial-gradient(circle,#4a3412,#17130d)!important;border:1px solid #b68b36!important}.quick__icon img{width:27px!important;height:27px!important}
.news-sec,.class-sec,.feat,.cta-sec,.page-pad{position:relative;background-image:linear-gradient(rgba(7,9,14,.91),rgba(7,9,14,.96)),none;background-size:cover;background-position:center}
.news-box,.cta-box,.article,.download-panel,.gd-card{border:1px solid rgba(232,197,106,.24)!important;background:linear-gradient(145deg,rgba(20,23,32,.94),rgba(8,10,15,.96))!important;box-shadow:0 26px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.03)!important}
.class-stage{background:radial-gradient(circle at 56% 42%,rgba(179,112,25,.17),transparent 38%),linear-gradient(145deg,rgba(18,20,28,.94),rgba(6,8,13,.97));border:1px solid rgba(232,197,106,.24);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.class-tab{width:220px!important;height:56px!important;padding:0!important;overflow:hidden;border-radius:5px!important;border:1px solid rgba(232,197,106,.18)!important;background:#080a0f!important}.class-tab__img{width:220px!important;height:56px!important;object-fit:contain!important}.class-tab:hover,.class-tab.is-on{transform:translateX(7px);border-color:#f0d47b!important;box-shadow:0 0 18px rgba(232,197,106,.25)}
.class-hero__img{filter:drop-shadow(0 28px 30px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(219,154,48,.16))}
.feat__card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(29,32,42,.9),rgba(9,11,17,.98))!important;border:1px solid rgba(232,197,106,.22)!important;box-shadow:0 16px 38px rgba(0,0,0,.35)}.feat__card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#e8c56a,transparent)}.feat__card:hover{transform:translateY(-8px);border-color:#e8c56a!important}
.gbtn{border-radius:4px;letter-spacing:.065em}.gbtn--gold{background:linear-gradient(180deg,#fff0ad,#dcae3c 48%,#9a6513);box-shadow:0 3px 0 #62400c,0 10px 28px rgba(199,145,31,.34)}
.footer{background:#05070b;border-top:1px solid rgba(232,197,106,.18)}
.btn-ico{width:18px;height:18px;object-fit:contain;flex:none}
@media(max-width:900px){.hero{min-height:680px}.hero__content{align-items:center;text-align:center;padding-top:90px}.hero__content h1{font-size:clamp(2.5rem,11vw,4.2rem)}.hero__meta,.hero__buttons{justify-content:center}.hero__bg video{object-position:63% top}.quick__grid{grid-template-columns:repeat(2,1fr)}.class-tab{width:100%!important}.class-tab__img{width:100%!important}}
@media(max-width:560px){.hero{min-height:650px}.hero__eyebrow{font-size:.62rem;letter-spacing:.17em}.hero__meta{display:grid;width:100%}.hero__meta span{font-size:.72rem}.hero__buttons{width:100%}.hero__buttons .gbtn{width:100%}.quick__grid{grid-template-columns:1fr 1fr}.quick__item{min-height:112px}.class-tab{height:52px!important}.class-tab__img{height:52px!important}}


/* 2026 complete visual refresh */
.hero{min-height:clamp(520px,72vw,820px);display:flex;align-items:flex-end;overflow:hidden;background:#050608}
.hero__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,3,5,.08) 0%,rgba(2,3,5,.08) 58%,#090a0d 100%),radial-gradient(circle at 50% 48%,transparent 25%,rgba(0,0,0,.45) 100%)}
.hero__shade{background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 45%,rgba(0,0,0,.08))}
.hero__ambient{position:absolute;inset:auto 0 30px;height:80px;pointer-events:none;z-index:3;display:flex;justify-content:center;gap:120px;opacity:.7}
.hero__ambient span{width:5px;height:5px;border-radius:50%;background:#ffbd45;box-shadow:0 0 18px 7px rgba(255,113,21,.55);animation:emberFloat 4s ease-in-out infinite}
.hero__ambient span:nth-child(2){animation-delay:1.3s}.hero__ambient span:nth-child(3){animation-delay:2.4s}
@keyframes emberFloat{50%{transform:translateY(-35px) scale(.6);opacity:.2}}
.section-heading{text-align:center;margin:0 auto 32px;max-width:760px}.section-heading>span{font-size:.76rem;letter-spacing:.22em;color:var(--gold);font-weight:800}.section-heading h2{font-family:var(--font-title);color:#f3d98b;font-size:clamp(1.7rem,3vw,2.7rem);margin:.4rem 0}.section-heading p{color:var(--muted)}
.event-guide-sec{padding:80px 0;background:linear-gradient(180deg,rgba(9,10,13,.97),rgba(14,10,7,.96)),none center/cover}
.event-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.event-guide-card{position:relative;overflow:hidden;min-height:390px;border:1px solid rgba(226,176,73,.35);background:#0d0e12;border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:.3s}.event-guide-card:before{content:"";position:absolute;inset:0;border:1px solid rgba(255,225,146,.1);margin:7px;z-index:2;pointer-events:none}.event-guide-card:hover{transform:translateY(-7px);border-color:#e3b956;box-shadow:0 25px 70px rgba(0,0,0,.55),0 0 25px rgba(193,119,26,.15)}.event-guide-card img{width:100%;height:210px;object-fit:contain;display:block;transition:.4s}.event-guide-card:hover img{transform:none}.event-guide-card div{padding:22px 24px 25px}.event-guide-card small{color:#d8aa4b;font-weight:800;letter-spacing:.14em}.event-guide-card h3{font-family:var(--font-title);font-size:1.6rem;color:#f5e0a5;margin:.35rem 0}.event-guide-card p{color:#aaa69d;line-height:1.65;font-size:.9rem}.event-guide-card span{display:inline-block;margin-top:15px;color:#e8c56a;font-weight:800;font-size:.82rem}
.forge-showcase{padding:45px 0 85px;background:#090a0d}.forge-banner{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:35px;border:1px solid rgba(226,176,73,.36);background:linear-gradient(100deg,#111014,#17100a 55%,#0d0d10);padding:22px 30px;box-shadow:inset 0 0 35px rgba(205,126,29,.08),0 16px 50px rgba(0,0,0,.35)}.forge-banner img{width:220px;height:125px;object-fit:contain;border:1px solid rgba(255,213,113,.25)}.forge-banner span{font-size:.75rem;letter-spacing:.2em;color:#dbad4d;font-weight:800}.forge-banner h2{font-family:var(--font-title);color:#f0d58a;font-size:1.8rem;margin:.25rem 0}.forge-banner p{color:#aaa69d;line-height:1.6}
.news-box,.feat__card,.class-stage,.cta-box{backdrop-filter:blur(6px)}
@media(max-width:900px){.event-guide-grid{grid-template-columns:1fr}.event-guide-card{min-height:auto;display:grid;grid-template-columns:220px 1fr}.event-guide-card img{height:100%}.forge-banner{grid-template-columns:150px 1fr}.forge-banner img{width:150px}.forge-banner .gbtn{grid-column:1/-1;justify-self:center}}
@media(max-width:600px){.event-guide-card{display:block}.event-guide-card img{height:190px}.forge-banner{display:block;text-align:center}.forge-banner img{width:100%;height:150px;margin-bottom:18px}.forge-banner .gbtn{margin-top:20px}.hero{min-height:480px}}

.article-page{background:#07080a none top center/cover fixed;color:#eee}.article-shell{width:min(1000px,calc(100% - 30px));margin:0 auto;padding:55px 0 90px}.article-back{display:inline-block;margin-bottom:18px;color:#e5bd61;font-weight:700}.article-card{background:rgba(10,11,14,.96);border:1px solid rgba(226,176,73,.38);box-shadow:0 30px 90px rgba(0,0,0,.55)}.article-cover{width:100%;max-height:430px;object-fit:contain;display:block}.article-content{padding:clamp(24px,5vw,58px)}.article-tag{color:#d9aa4c;letter-spacing:.18em;font-size:.72rem;font-weight:800}.article-content h1{font-family:var(--font-title);color:#f0d78f;font-size:clamp(2rem,4vw,3.2rem);margin:.5rem 0 1rem}.article-lead{font-size:1.03rem;color:#bbb5a8;line-height:1.8;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:25px}.article-block{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.07)}.article-block h2{color:#e3bb61;font-size:1.25rem;margin-bottom:8px}.article-block p{color:#c5c1b8;line-height:1.85}.article-note{margin-top:28px;padding:18px 20px;background:rgba(221,147,35,.09);border-left:4px solid #dc9e31;color:#d7d1c4;line-height:1.7}


/* ===== BOSS SYSTEM ===== */
.boss-sec{padding:85px 0;background:linear-gradient(180deg,rgba(5,7,10,.94),rgba(12,9,7,.97)),none center/cover fixed;border-top:1px solid rgba(216,170,74,.18);border-bottom:1px solid rgba(216,170,74,.18)}
.boss-layout{display:grid;grid-template-columns:minmax(280px,390px) 1fr;gap:22px;align-items:stretch}.boss-list{display:grid;gap:10px;max-height:660px;overflow:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:#a9782e #090b0f}.boss-card{width:100%;display:grid;grid-template-columns:82px 1fr auto;gap:13px;align-items:center;text-align:left;background:linear-gradient(135deg,#111720,#090b0f);border:1px solid #34302a;color:#eee;padding:8px;cursor:pointer;transition:.25s;border-radius:4px;font-family:inherit}.boss-card:hover,.boss-card.is-on{border-color:#d6a94a;transform:translateX(4px);box-shadow:0 0 24px rgba(217,165,58,.14)}.boss-card img{width:82px;height:66px;object-fit:contain;background:#05070a}.boss-card span{min-width:0}.boss-card b,.boss-card small{display:block}.boss-card b{color:#f2d17f;font-size:15px}.boss-card small{color:#979da7;margin-top:4px}.boss-card em{font-size:11px;color:#f7c55d;font-style:normal;border:1px solid #6b5125;padding:4px 6px;white-space:nowrap}.boss-detail{min-height:570px;background:linear-gradient(135deg,rgba(15,18,23,.98),rgba(7,8,11,.98));border:1px solid #785b2b;display:grid;grid-template-columns:minmax(330px,46%) 1fr;overflow:hidden;box-shadow:0 22px 70px #000}.boss-detail__visual{position:relative;min-height:570px;background:radial-gradient(circle at 50% 38%,rgba(230,173,71,.22),transparent 55%)}.boss-detail__visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#090b0f),linear-gradient(0deg,#090b0f,transparent 38%)}.boss-detail__visual img{width:100%;height:100%;object-fit:contain}.boss-detail__body{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center}.boss-detail__top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.boss-detail__top small{color:#c99c4d;text-transform:uppercase;letter-spacing:.12em}.boss-detail h3{font-size:clamp(31px,4vw,55px);margin:5px 0 10px;color:#f3d789}.boss-status{background:#153b24;border:1px solid #2a8a4d;color:#8cf0ad;padding:6px 10px;font-size:11px;font-weight:800;white-space:nowrap}.boss-lead{color:#bfc2c7;line-height:1.75}.boss-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:20px 0}.boss-stats div{padding:12px;background:#0a0e14;border:1px solid #292f38}.boss-stats span,.boss-stats b{display:block}.boss-stats span{font-size:11px;color:#8c939d;text-transform:uppercase}.boss-stats b{margin-top:4px;color:#f1ddb0}.boss-drop{padding:16px;border-left:3px solid #d5a64a;background:rgba(188,127,29,.09)}.boss-drop span,.boss-drop strong{display:block}.boss-drop span{font-size:11px;color:#c59c55;text-transform:uppercase}.boss-drop strong{margin-top:6px;color:#fff;line-height:1.6}@media(max-width:950px){.boss-layout{grid-template-columns:1fr}.boss-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.boss-detail{grid-template-columns:1fr}.boss-detail__visual{min-height:430px}}@media(max-width:620px){.boss-list{grid-template-columns:1fr}.boss-detail__visual{min-height:330px}.boss-stats{grid-template-columns:1fr}.boss-card{grid-template-columns:70px 1fr}.boss-card em{display:none}}


/* ===== 2026 stability + visual polish patch ===== */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,173,51,.14), transparent 26%),
    radial-gradient(circle at 80% 20%, rgba(232,197,106,.10), transparent 22%),
    radial-gradient(circle at 50% 120%, rgba(255,80,0,.12), transparent 35%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.68));
  pointer-events:none; z-index:-2;
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:220px;
  background:linear-gradient(180deg, rgba(8,8,10,0), rgba(8,8,10,.95));
  pointer-events:none;
}
.quick-cta{position:relative; z-index:6; margin-top:-56px; padding-bottom:1rem;}
.quick-cta__row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:0 8px;}
.quick-cta .gbtn{min-width:220px; box-shadow:0 10px 26px rgba(0,0,0,.42);}
.btn-ico{width:20px;height:20px;object-fit:contain;display:inline-block;vertical-align:middle;filter:drop-shadow(0 0 4px rgba(0,0,0,.25));}
.quick__icon img,.feat__ico img,.side-dock__ico img{width:26px;height:26px;object-fit:contain;}
.news-box,.feat__card,.cta-box,.boss-detail,.boss-card,.event-guide-card,.forge-banner,.class-info,.class-tab,.quick__item{backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);}
.menu a{display:flex;align-items:center;gap:6px}
.menu .btn-ico{width:17px;height:17px}
@media (max-width: 768px){
  .quick-cta{margin-top:-28px}
  .quick-cta .gbtn{min-width:unset; width:100%}
}

/* ===== FIX: hero sáng rõ + nút fantasy không cắt góc ===== */
.hero__shade,.hero::after,.hero__bg::after{display:none!important;background:none!important;opacity:0!important}
.hero__bg video{filter:none!important;opacity:1!important}
.quick-cta{margin-top:0!important;padding:20px 0 18px!important;background:linear-gradient(180deg,#080b10,#0c1017)!important;border-top:1px solid rgba(232,197,106,.24)}
.gbtn{overflow:visible!important;border-radius:4px!important;clip-path:none!important;border:1px solid rgba(232,197,106,.75)!important;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 7px 20px rgba(0,0,0,.38)!important}
.gbtn::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,230,160,.22);pointer-events:none;border-radius:2px}
.gbtn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 66%);transform:translateX(-130%);transition:transform .6s ease;pointer-events:none;border-radius:inherit}
.gbtn:hover::after{transform:translateX(130%)}
.gbtn--gold{color:#231806!important;background:linear-gradient(180deg,#f5dc8c 0%,#c88b22 55%,#75420d 100%)!important}
.gbtn--dark{color:#f8e8b1!important;background:linear-gradient(180deg,#14242b 0%,#091016 58%,#05080c 100%)!important;border-color:rgba(50,211,225,.58)!important}
.gbtn .btn-ico{width:20px;height:20px;object-fit:contain}
.quick__item{clip-path:none!important;border-radius:6px!important;overflow:hidden}
@media(max-width:768px){.quick-cta .gbtn{width:100%}}

/* ===== Button hover beam: scoped and clipped per button ===== */
.gbtn{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  clip-path:none!important;
  border-radius:5px!important;
}
.gbtn::before{
  content:"";
  position:absolute;
  inset:3px;
  z-index:0;
  border:1px solid rgba(255,235,180,.22);
  border-radius:2px;
  pointer-events:none;
}
.gbtn::after{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-55%;
  width:34%;
  z-index:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.08) 22%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.08) 78%,transparent 100%);
  transform:skewX(-18deg) translateX(0);
  opacity:0;
  transition:none;
  pointer-events:none;
}
.gbtn:hover::after{
  opacity:1;
  animation:mu-button-shine .72s ease-out 1;
}
.gbtn > *,.gbtn{z-index:1}
.gbtn .btn-ico,.gbtn span{position:relative;z-index:2}
@keyframes mu-button-shine{
  0%{left:-55%;opacity:0}
  15%{opacity:1}
  100%{left:125%;opacity:0}
}

/* ===== Boss carousel 3D — ảnh PNG trong suốt, kéo xoay mượt ===== */
.boss-sec{
  overflow:hidden;
  background:linear-gradient(180deg,rgba(5,7,10,.95),rgba(8,9,12,.98))!important;
}
.boss-layout{
  display:block!important;
  position:relative;
  width:100%;
  min-height:710px;
  margin-top:12px;
}
.boss-list{
  position:relative!important;
  display:block!important;
  width:100%;
  height:470px;
  max-height:none!important;
  overflow:hidden!important;
  padding:0!important;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  perspective:1100px;
  outline:none;
}
.boss-list.is-dragging{cursor:grabbing}
.boss-list::before{
  content:"";
  position:absolute;
  left:50%;bottom:44px;
  width:min(820px,88vw);height:130px;
  transform:translateX(-50%);
  border:1px solid rgba(220,173,75,.22);
  border-radius:50%;
  box-shadow:0 0 42px rgba(218,159,48,.08),inset 0 0 38px rgba(0,0,0,.7);
  pointer-events:none;
}
.boss-list::after{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;bottom:64px;
  width:min(550px,62vw);height:74px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(232,184,80,.18),rgba(0,0,0,0) 70%);
  filter:blur(8px);
  pointer-events:none;
}
.boss-orbit-item{
  position:absolute!important;
  z-index:1;
  left:50%;top:28px;
  width:clamp(190px,24vw,330px);
  height:390px;
  margin-left:calc(clamp(190px,24vw,330px) / -2);
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#fff;
  font:inherit;
  transform-origin:50% 78%;
  transition:filter .15s ease,opacity .15s ease;
  will-change:transform,opacity,filter;
  cursor:pointer;
}
.boss-orbit-item img{
  display:block!important;
  width:100%;
  height:330px;
  object-fit:contain;
  object-position:center bottom;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  pointer-events:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.7));
}
.boss-orbit-item span{
  display:block;
  max-width:100%;
  margin-top:2px;
  padding:6px 13px;
  color:#a9a9a9;
  font-family:var(--font-title);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-align:center;
  text-shadow:0 2px 5px #000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:.2s ease;
}
.boss-orbit-item.is-active span{
  color:#f6d77f;
  font-size:16px;
  text-shadow:0 0 16px rgba(234,184,69,.45),0 2px 5px #000;
}
.boss-orbit-item.is-active img{
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(224,167,53,.18));
}
.boss-detail{
  position:relative;
  width:min(1080px,100%);
  min-height:0!important;
  margin:-16px auto 0;
  padding:0 16px 16px!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.boss-detail-name{text-align:center;margin-bottom:22px}
.boss-detail-name small{display:block;color:#9b875c;font-size:10px;font-weight:800;letter-spacing:.2em}
.boss-detail-name h3{margin:3px 0 0;color:#f3d17b;font-size:clamp(27px,4vw,46px);line-height:1.1;text-shadow:0 2px 7px #000}
.boss-simple-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  border-top:1px solid rgba(225,183,88,.3);
  border-bottom:1px solid rgba(225,183,88,.24);
}
.boss-simple-grid>div{
  position:relative;
  min-width:0;
  padding:16px 15px 18px;
  text-align:center;
}
.boss-simple-grid>div+div::before{
  content:"";
  position:absolute;left:0;top:16px;bottom:16px;width:1px;
  background:linear-gradient(transparent,rgba(223,177,75,.38),transparent);
}
.boss-simple-grid span,.boss-simple-grid strong{display:block}
.boss-simple-grid span{color:#8f939a;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.boss-simple-grid strong{margin-top:7px;color:#ece3cf;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.boss-simple-grid .boss-reward strong{color:#f1c861}
.boss-countdown{font-variant-numeric:tabular-nums}
.boss-drag-tip{display:flex;justify-content:center;align-items:center;gap:9px;margin:18px 0 0;color:#777f89;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.boss-drag-tip i{position:relative;width:28px;height:12px;border-top:1px solid #b18b43;border-bottom:1px solid #b18b43}
.boss-drag-tip i::before,.boss-drag-tip i::after{content:"";position:absolute;top:3px;width:6px;height:6px;border-top:1px solid #d5ae5c;border-right:1px solid #d5ae5c}
.boss-drag-tip i::before{left:1px;transform:rotate(-135deg)}.boss-drag-tip i::after{right:1px;transform:rotate(45deg)}
@media(max-width:900px){
  .boss-layout{min-height:760px}
  .boss-list{height:450px}
  .boss-orbit-item{width:clamp(170px,38vw,285px);margin-left:calc(clamp(170px,38vw,285px) / -2);height:365px}
  .boss-orbit-item img{height:305px}
  .boss-simple-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .boss-simple-grid>div+div::before{display:none}
  .boss-simple-grid>div{border-top:1px solid rgba(220,174,75,.13)}
  .boss-simple-grid .boss-reward{grid-column:1/-1}
}
@media(max-width:560px){
  .boss-sec{padding-top:65px!important}
  .boss-layout{min-height:760px}
  .boss-list{height:400px;margin-left:-15px;width:calc(100% + 30px)}
  .boss-list::before{bottom:36px;width:105vw;height:95px}
  .boss-list::after{bottom:46px}
  .boss-orbit-item{top:14px;width:210px;height:330px;margin-left:-105px}
  .boss-orbit-item img{height:280px}
  .boss-detail{margin-top:-8px;padding-inline:0!important}
  .boss-simple-grid{grid-template-columns:1fr}
  .boss-simple-grid .boss-reward{grid-column:auto}
  .boss-simple-grid>div{padding:12px 8px}
}
@media(prefers-reduced-motion:reduce){.boss-orbit-item{transition:none!important}}

/* ===== Hero/Boss transparent PNG art layers ===== */
.hero__art-overlay{
  position:absolute;z-index:2;right:-5%;bottom:-16%;width:min(62vw,880px);height:auto;
  object-fit:contain;pointer-events:none;user-select:none;opacity:.9;
  filter:drop-shadow(0 0 20px rgba(31,196,255,.22));
}
.boss-layout{position:relative;isolation:isolate}
.boss__art-overlay{
  position:absolute;z-index:-1;left:50%;top:34px;width:min(980px,92vw);height:auto;
  transform:translateX(-50%);pointer-events:none;user-select:none;opacity:.27;
  object-fit:contain;filter:drop-shadow(0 0 20px rgba(35,193,255,.18));
}
@media(max-width:700px){
  .hero__art-overlay{width:95vw;right:-34%;bottom:-3%;opacity:.66}
  .boss__art-overlay{width:120vw;top:90px;opacity:.2}
}

/* ===== Direct click boss selector ===== */
.boss-selector{
  position:relative;z-index:5;display:flex;gap:10px;width:min(1050px,100%);margin:-8px auto 24px;
  padding:8px 6px 12px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:#9d7630 transparent;
}
.boss-selector__item{
  flex:0 0 112px;min-width:112px;padding:7px 7px 8px;border:1px solid rgba(208,163,68,.2);
  background:rgba(5,7,11,.58);color:#aeb2b9;border-radius:8px;cursor:pointer;scroll-snap-align:center;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.boss-selector__item:hover,.boss-selector__item.is-active{
  transform:translateY(-3px);border-color:rgba(240,197,91,.72);background:rgba(29,23,12,.8);color:#f3d47c;
}
.boss-selector__item img{display:block;width:100%;height:72px;object-fit:contain;background:transparent;pointer-events:none}
.boss-selector__item span{display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:800;text-align:center}

/* Six concise boss data cells */
.boss-simple-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.boss-simple-grid .boss-reward{grid-column:auto}
@media(max-width:760px){.boss-simple-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.boss-selector__item{flex-basis:94px;min-width:94px}.boss-selector__item img{height:60px}.boss-simple-grid{grid-template-columns:1fr}}

/* Webmin multiple daily time inputs */
.time-list{display:grid;gap:8px;margin:6px 0 9px}
.time-row{display:flex;gap:8px;align-items:center}
.time-row input[type="time"]{flex:1;margin:0}
.time-row .btn{flex:0 0 auto;margin:0}

/* ===== V3: Boss scene 3D trực tiếp — không danh sách thumbnail phụ ===== */
.boss-selector{display:none!important}
.boss-list{
  --stage-x:0;--stage-y:0;
  height:560px!important;
  perspective:1450px!important;
  perspective-origin:50% 48%;
  transform-style:preserve-3d;
}
.boss-list::before{bottom:28px!important;width:min(900px,92vw)!important;height:165px!important;transform:translateX(-50%) rotateX(67deg)!important;border-color:rgba(70,194,255,.25)!important;box-shadow:0 0 55px rgba(34,173,255,.11),inset 0 0 65px rgba(0,0,0,.78)!important}
.boss-list::after{bottom:35px!important;width:min(680px,72vw)!important;height:110px!important;background:radial-gradient(ellipse,rgba(78,210,255,.25),rgba(30,120,255,.08) 38%,transparent 72%)!important;animation:boss-floor-pulse 3.8s ease-in-out infinite}
.boss-orbit-item{top:5px!important;width:clamp(260px,30vw,430px)!important;height:500px!important;margin-left:calc(clamp(260px,30vw,430px) / -2)!important;transform-style:preserve-3d!important;transition:filter .18s ease,opacity .18s ease!important}
.boss-orbit-scene{position:relative;display:block;width:100%;height:445px;transform-style:preserve-3d;pointer-events:none}
.boss-orbit-stage-art{position:absolute;z-index:1;left:50%;bottom:0;width:108%;height:100%;transform:translateX(-50%) translateZ(-24px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 20px rgba(0,0,0,.52));opacity:.92}
.boss-orbit-stage-fallback{position:absolute;z-index:1;left:50%;bottom:18px;width:88%;height:62%;transform:translateX(-50%) translateZ(-30px);border-radius:50%;background:radial-gradient(circle at 50% 62%,rgba(109,229,255,.33),rgba(28,91,177,.12) 34%,transparent 68%);border:1px solid rgba(85,210,255,.22);box-shadow:0 0 40px rgba(38,169,255,.15),inset 0 0 42px rgba(45,190,255,.12)}
.boss-orbit-character{position:absolute!important;z-index:3;left:50%;bottom:32px;width:80%!important;height:88%!important;transform:translateX(-50%) translateZ(42px);object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 24px 22px rgba(0,0,0,.76)) drop-shadow(0 0 calc(8px + var(--boss-depth)*20px) rgba(86,210,255,.2))!important;animation:boss-character-float 4.4s ease-in-out infinite;animation-delay:-.4s}
.boss-orbit-energy{position:absolute;z-index:2;left:50%;bottom:38px;width:72%;height:30%;transform:translateX(-50%) translateZ(12px) rotateX(68deg);border-radius:50%;background:radial-gradient(ellipse,rgba(170,244,255,.42),rgba(29,180,255,.16) 34%,transparent 70%);filter:blur(3px);opacity:.58;animation:boss-energy 2.8s ease-in-out infinite}
.boss-orbit-name{position:absolute!important;z-index:5;left:50%;bottom:0;transform:translateX(-50%) translateZ(55px);margin:0!important;color:#9fa8b5!important;transition:.25s ease!important}
.boss-orbit-item.is-active .boss-orbit-name{color:#f2d880!important;transform:translateX(-50%) translateZ(60px) scale(1.1)}
.boss-orbit-item.is-active .boss-orbit-scene{animation:boss-scene-breathe 3.2s ease-in-out infinite}
.boss-layout{min-height:820px!important}
.boss-detail{margin:-44px auto 0!important}
@keyframes boss-character-float{0%,100%{margin-bottom:0}50%{margin-bottom:9px}}
@keyframes boss-energy{0%,100%{transform:translateX(-50%) translateZ(12px) rotateX(68deg) scale(.96);opacity:.3}50%{transform:translateX(-50%) translateZ(12px) rotateX(68deg) scale(1.07);opacity:.7}}
@keyframes boss-floor-pulse{0%,100%{opacity:.55;filter:blur(9px)}50%{opacity:1;filter:blur(5px)}}
@keyframes boss-scene-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}

/* Class/Hero: mỗi nhân vật có thể có một PNG/WebP sân khấu riêng */
.class-hero>div[data-bind="classes-hero"]{position:relative;isolation:isolate;transform-style:preserve-3d}
.class-hero__stage-art{position:absolute;z-index:0;left:50%;bottom:0;width:115%;height:100%;transform:translateX(-50%) translateZ(-30px);object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55));animation:class-stage-breathe 5s ease-in-out infinite}
.class-hero__img{position:relative;z-index:2;transform:translateZ(35px);filter:drop-shadow(0 25px 24px rgba(0,0,0,.72));animation:class-character-float 4.8s ease-in-out infinite}
@keyframes class-stage-breathe{0%,100%{transform:translateX(-50%) translateZ(-30px) scale(.99)}50%{transform:translateX(-50%) translateZ(-30px) scale(1.015)}}
@keyframes class-character-float{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* 3D nhẹ toàn trang: không thay bố cục gốc, chỉ tăng chiều sâu */
html{scroll-behavior:smooth}
body{perspective:1800px}
.mu-tilt{position:relative;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease;will-change:transform}
.mu-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.11),transparent 36%);opacity:0;transition:opacity .25s ease}
.mu-tilt:hover::after{opacity:1}
.mu-tilt:hover{box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero{--hero-x:0;--hero-y:0;perspective:1400px;transform-style:preserve-3d}
.hero__bg{transform:scale(1.035) translate3d(var(--hero-tx,0px),var(--hero-ty,0px),-8px);transition:transform .2s ease-out;will-change:transform}
.hero__art-overlay{transform:translate3d(var(--hero-art-x,0px),var(--hero-art-y,0px),30px);transition:transform .2s ease-out;will-change:transform}
.reveal.is-visible{animation:mu-depth-in .8s cubic-bezier(.2,.75,.2,1) both}
@keyframes mu-depth-in{from{opacity:0;transform:perspective(900px) translateY(24px) translateZ(-55px) rotateX(3deg)}to{opacity:1;transform:perspective(900px) translateY(0) translateZ(0) rotateX(0)}}
@media(max-width:900px){.boss-list{height:500px!important}.boss-orbit-item{width:310px!important;margin-left:-155px!important;height:455px!important}.boss-orbit-scene{height:405px}.boss-layout{min-height:790px!important}}
@media(max-width:560px){.boss-list{height:445px!important}.boss-orbit-item{width:245px!important;margin-left:-122.5px!important;height:405px!important}.boss-orbit-scene{height:355px}.boss-orbit-character{width:84%!important}.boss-layout{min-height:775px!important}.boss-detail{margin:-24px auto 0!important}}
@media(prefers-reduced-motion:reduce){.boss-orbit-character,.boss-orbit-energy,.boss-list::after,.boss-orbit-item.is-active .boss-orbit-scene,.class-hero__stage-art,.class-hero__img{animation:none!important}.mu-tilt,.hero__bg,.hero__art-overlay{transition:none!important;transform:none!important}}

/* ===== V4 PERFORMANCE: hiệu ứng chỉ dành cho Class và Boss ===== */
body{perspective:none!important}
.hero{perspective:none!important;transform-style:flat!important}
.hero__bg{transition:none!important;will-change:auto!important}
.hero__art-overlay{display:none!important}
.mu-tilt{transition:none!important;will-change:auto!important}
.mu-tilt::after{display:none!important}
.reveal.is-visible{animation:none!important}
section{content-visibility:auto;contain-intrinsic-size:800px}
.hero,.class-sec,.boss-sec{content-visibility:visible;contain-intrinsic-size:auto}

/* Lớp hiệu ứng động nhẹ, không cần GIF nặng */
.stage-fx{--fx:#32cfff;--fx2:#d8fbff;position:absolute;z-index:2;left:50%;bottom:4%;width:88%;height:72%;transform:translateX(-50%) translateZ(5px);pointer-events:none;opacity:.9;contain:layout paint;overflow:visible}
.stage-fx::before,.stage-fx::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none}
.stage-fx::before{width:82%;aspect-ratio:1;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 12%,color-mix(in srgb,var(--fx) 72%,transparent) 18%,transparent 27% 43%,color-mix(in srgb,var(--fx2) 65%,transparent) 51%,transparent 62% 80%,color-mix(in srgb,var(--fx) 60%,transparent) 88%,transparent 96%);mask:radial-gradient(circle,transparent 0 48%,#000 57% 62%,transparent 72%);opacity:.72;animation:stage-fx-spin 10s linear infinite;will-change:transform}
.stage-fx::after{width:72%;height:34%;transform:translate(-50%,42%) rotateX(68deg);background:radial-gradient(ellipse,color-mix(in srgb,var(--fx2) 38%,transparent),color-mix(in srgb,var(--fx) 22%,transparent) 36%,transparent 72%);border:1px solid color-mix(in srgb,var(--fx) 36%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--fx) 22%,transparent),inset 0 0 22px color-mix(in srgb,var(--fx) 16%,transparent);animation:stage-fx-pulse 3.2s ease-in-out infinite;will-change:transform,opacity}
.stage-fx--red{--fx:#ff3a24;--fx2:#ffd0a7}.stage-fx--gold{--fx:#ffc43d;--fx2:#fff2a8}.stage-fx--purple{--fx:#a855f7;--fx2:#e9c7ff}.stage-fx--green{--fx:#35e36c;--fx2:#c8ffd4}.stage-fx--ice{--fx:#7deaff;--fx2:#ffffff}.stage-fx--dark{--fx:#6235ad;--fx2:#d0b7ff}.stage-fx--blue{--fx:#32cfff;--fx2:#d8fbff}.stage-fx--none{display:none}
@keyframes stage-fx-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes stage-fx-pulse{0%,100%{transform:translate(-50%,42%) rotateX(68deg) scale(.96);opacity:.38}50%{transform:translate(-50%,42%) rotateX(68deg) scale(1.06);opacity:.82}}

/* Boss: giảm filter động để cuộn mượt hơn */
.boss-list::after{animation:none!important;filter:none!important}
.boss-orbit-item.is-active .boss-orbit-scene{animation:none!important}
.boss-orbit-character{animation:boss-character-float 5.2s ease-in-out infinite!important;filter:drop-shadow(0 20px 18px rgba(0,0,0,.68))!important;will-change:transform}
.boss-orbit-energy{display:none!important}
.boss-orbit-stage-art{filter:drop-shadow(0 14px 16px rgba(0,0,0,.45))!important}
.boss-orbit-scene .stage-fx{z-index:2;bottom:2%;width:102%;height:92%}
.boss-orbit-character{z-index:4}

/* Class: hiệu ứng riêng theo từng nhân vật */
.class-hero>div[data-bind="classes-hero"]{overflow:visible}
.class-hero>div[data-bind="classes-hero"] .stage-fx{z-index:1;bottom:0;width:112%;height:94%}
.class-hero__stage-art{z-index:0;animation:none!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.48))}
.class-hero__img{z-index:3;animation:class-character-float 5.4s ease-in-out infinite!important;will-change:transform}

@media(max-width:760px){
  section{content-visibility:visible}
  .stage-fx::before{animation-duration:14s}
  .boss-orbit-character,.class-hero__img{animation:none!important;will-change:auto}
}
@media(prefers-reduced-motion:reduce){.stage-fx::before,.stage-fx::after{animation:none!important}.boss-orbit-character,.class-hero__img{animation:none!important;will-change:auto}}


/* V5 CLEAN MOTION — no artificial FX; motion only when selected */
.stage-fx,.boss-orbit-energy{display:none!important}
.boss-list{overflow:visible!important}
.boss-orbit-item{transition:opacity .22s ease,filter .22s ease!important}
.boss-orbit-scene{overflow:visible!important;animation:none!important}
.boss-orbit-stage-art{width:calc(100% * var(--stage-scale,.68))!important;height:calc(100% * var(--stage-scale,.68))!important;left:50%!important;bottom:2%!important;transform:translateX(-50%) translateZ(-24px)!important;opacity:1!important;animation:none!important;filter:drop-shadow(0 12px 14px rgba(0,0,0,.4))!important}
.boss-orbit-character{width:calc(80% * var(--boss-scale,1))!important;height:calc(88% * var(--boss-scale,1))!important;animation:none!important;will-change:auto!important;transition:none!important;filter:drop-shadow(0 22px 20px rgba(0,0,0,.7))!important}
.boss-orbit-item.is-selected-motion .boss-orbit-character{animation:boss-selected-once .72s cubic-bezier(.2,.8,.2,1) 1!important}
@keyframes boss-selected-once{0%{transform:translateX(-50%) translateZ(42px) scale(.96) rotateY(-3deg)}55%{transform:translateX(-50%) translateZ(58px) scale(1.035) rotateY(1deg)}100%{transform:translateX(-50%) translateZ(42px) scale(1) rotateY(0)}}
.class-hero__stage-art,.class-hero__img{animation:none!important;will-change:auto!important}
.class-hero [data-bind="classes-hero"].is-selected-motion .class-hero__img{animation:class-selected-once .72s cubic-bezier(.2,.8,.2,1) 1!important}
@keyframes class-selected-once{0%{transform:translateZ(35px) translateY(7px) scale(.98)}55%{transform:translateZ(48px) translateY(-4px) scale(1.025)}100%{transform:translateZ(35px) translateY(0) scale(1)}}
@media(max-width:900px){.boss-orbit-stage-art{width:calc(96% * var(--stage-scale,.68))!important;height:calc(96% * var(--stage-scale,.68))!important}}
@media(prefers-reduced-motion:reduce){.boss-orbit-item.is-selected-motion .boss-orbit-character,.class-hero [data-bind="classes-hero"].is-selected-motion .class-hero__img{animation:none!important}}

/* V6 — Boss/Class và sân khấu chuyển động cùng nhau */

/* Chỉ nhóm Boss đang chọn chuyển động */
.boss-orbit-scene {
  animation: none !important;
  will-change: auto !important;
}

.boss-orbit-item.is-active .boss-orbit-scene {
  animation: boss-scene-active-float 3.6s ease-in-out infinite !important;
  will-change: transform !important;
}

/* Không cho ảnh Boss và sân khấu tự chạy riêng */
.boss-orbit-character,
.boss-orbit-stage-art {
  animation: none !important;
  will-change: auto !important;
}

@keyframes boss-scene-active-float {
  0%, 100% {
    transform: translateY(0) translateZ(0) rotateY(0deg);
  }

  50% {
    transform: translateY(-9px) translateZ(10px) rotateY(1.2deg);
  }
}


/* Class và sân khấu Class chuyển động cùng nhau */
.class-hero > div[data-bind="classes-hero"] {
  animation: class-scene-active-float 4s ease-in-out infinite !important;
  will-change: transform !important;
}

/* Không cho nhân vật hoặc sân khấu Class tự chạy riêng */
.class-hero__img,
.class-hero__stage-art {
  animation: none !important;
  will-change: auto !important;
}

@keyframes class-scene-active-float {
  0%, 100% {
    transform: translateY(0) translateZ(0) rotateY(0deg);
  }

  50% {
    transform: translateY(-7px) translateZ(8px) rotateY(-1deg);
  }
}


/* Mobile chuyển động chậm hơn một chút */
@media (max-width: 760px) {
  .boss-orbit-item.is-active .boss-orbit-scene {
    animation-duration: 4.4s !important;
  }

  .class-hero > div[data-bind="classes-hero"] {
    animation-duration: 4.8s !important;
  }
}


/* Tôn trọng tùy chọn giảm chuyển động của trình duyệt */
@media (prefers-reduced-motion: reduce) {
  .boss-orbit-item.is-active .boss-orbit-scene,
  .class-hero > div[data-bind="classes-hero"] {
    animation: none !important;
    will-change: auto !important;
  }
}
/* ===== Boss V8: tiêu đề đồng bộ Class + bố cục gọn trong một màn hình ===== */
.boss-sec{padding-top:42px!important;padding-bottom:58px!important}
.boss-sec__heading{text-align:center;margin:0 auto 8px;max-width:820px}
.boss-sec__heading .class-sec__ornament{margin-bottom:.2rem}
.boss-sec__title{margin:.25rem 0 .3rem!important}
.boss-sec__description{margin:0 auto;color:var(--muted);font-size:.92rem;line-height:1.45}
.boss-layout{min-height:650px!important;margin-top:0!important}
.boss-list{height:430px!important;margin-top:-4px!important}
.boss-orbit-item{top:-6px!important;height:410px!important}
.boss-orbit-scene{height:360px!important}
.boss-orbit-name{bottom:4px!important}
.boss-detail{margin:-10px auto 0!important;padding:18px 20px!important;max-width:1080px!important}
.boss-detail-name{margin-bottom:12px!important}
.boss-detail-name small{font-size:.68rem;letter-spacing:.16em}
.boss-detail-name h3{margin:.18rem 0 0!important;font-size:clamp(1.35rem,2.3vw,2rem)!important}
.boss-simple-grid{gap:9px!important}
.boss-simple-grid>div{padding:10px 12px!important;min-height:68px!important}
.boss-simple-grid span{font-size:.68rem!important}
.boss-simple-grid strong{font-size:.88rem!important;line-height:1.35!important}
.boss-drag-tip{margin:11px 0 0!important}
@media(max-width:900px){.boss-layout{min-height:670px!important}.boss-list{height:430px!important}.boss-detail{margin:0 auto!important}}
@media(max-width:560px){.boss-sec{padding-top:34px!important}.boss-layout{min-height:720px!important}.boss-list{height:390px!important}.boss-orbit-item{height:370px!important}.boss-orbit-scene{height:325px!important}.boss-detail{padding:14px!important}.boss-sec__description{font-size:.84rem}}
/* FIX CUỐI — bỏ nền CSS che Boss, giữ ảnh sân khấu trong suốt */

.boss-list::before,
.boss-list::after,
.boss-orbit-energy,
.boss-orbit-stage-fallback,
.boss-orbit-scene .stage-fx,
.boss-orbit-scene .stage-fx::before,
.boss-orbit-scene .stage-fx::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* Khung chứa tuyệt đối trong suốt */
.boss-list,
.boss-orbit-item,
.boss-orbit-scene {
  background: transparent !important;
  box-shadow: none !important;
}

/* Sân khấu thật nằm sau Boss nhưng không bị nền giả che */
.boss-orbit-stage-art {
  z-index: 1 !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* Boss luôn nằm trên sân khấu */
.boss-orbit-character {
  z-index: 3 !important;
  background: transparent !important;
}

/* Tên Boss nằm trên cùng */
.boss-orbit-name {
  z-index: 5 !important;
}
/* ===== Lightweight entry cards: Forge + Boss ===== */
.boss-showcase{padding:0 0 70px;background:#090a0d}.boss-showcase__banner{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:32px;padding:22px 30px;border:1px solid rgba(226,176,73,.36);background:linear-gradient(100deg,#10131a,#12100d 58%,#0d0d10);box-shadow:0 16px 50px rgba(0,0,0,.35)}
.boss-showcase__preview{height:125px;position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 80%,rgba(213,164,60,.2),transparent 60%)}.boss-showcase__avatar{width:70px;height:112px;margin:0 -12px;display:block}.boss-showcase__avatar img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 8px rgba(0,0,0,.55))}.boss-showcase__copy>span{font-size:.75rem;letter-spacing:.2em;color:#dbad4d;font-weight:800}.boss-showcase__copy h2{font-family:var(--font-title);color:#f0d58a;font-size:1.8rem;margin:.25rem 0}.boss-showcase__copy p{color:#aaa69d;line-height:1.6}
@media(max-width:900px){.boss-showcase__banner{grid-template-columns:150px 1fr}.boss-showcase__preview{width:150px}.boss-showcase__banner .gbtn{grid-column:1/-1;justify-self:center}}@media(max-width:600px){.boss-showcase__banner{display:block;text-align:center}.boss-showcase__preview{width:100%;margin-bottom:18px}.boss-showcase__banner .gbtn{margin-top:20px}}

/* ===== Boss catalog: chỉ tải khi người dùng mở trang ===== */
.boss-page{background:#07090d}.boss-catalog-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:calc(var(--nav-h) + 34px) 0 70px}.boss-catalog-head{text-align:center;max-width:820px;margin:0 auto 28px}.boss-catalog-head>span{font-size:.72rem;letter-spacing:.2em;color:var(--gold);font-weight:800}.boss-catalog-head h1{font-family:var(--font-title);color:#f2d88c;font-size:clamp(1.8rem,4vw,3rem);margin:.35rem 0}.boss-catalog-head p{color:var(--muted);line-height:1.65}.boss-search{margin:20px auto 0;max-width:560px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#0d1118;border:1px solid rgba(232,197,106,.25);border-radius:7px}.boss-search input{width:100%;padding:13px 0;background:transparent;color:#fff;border:0;outline:0}.boss-catalog-layout{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}.boss-catalog-list{display:grid;gap:8px;max-height:720px;overflow:auto;padding-right:5px}.boss-pick{display:grid;grid-template-columns:68px 1fr auto;gap:12px;align-items:center;width:100%;padding:8px;text-align:left;background:#0d1117;border:1px solid rgba(255,255,255,.08);color:#eee;border-radius:7px;cursor:pointer}.boss-pick:hover,.boss-pick.is-on{border-color:#d5a84c;background:#15140f}.boss-pick img{width:68px;height:62px;object-fit:contain}.boss-pick b,.boss-pick small{display:block}.boss-pick b{color:#f0d27e}.boss-pick small{margin-top:4px;color:#8f97a2;font-size:.72rem}.boss-pick em{font-style:normal;color:#d4ad59;font-size:.7rem}.boss-catalog-detail{min-height:520px;display:grid;grid-template-columns:minmax(280px,42%) 1fr;background:linear-gradient(145deg,#111720,#080a0f);border:1px solid rgba(232,197,106,.28);border-radius:10px;overflow:hidden}.boss-catalog-visual{min-height:520px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(circle at 50% 70%,rgba(218,166,60,.18),transparent 58%)}.boss-catalog-visual img{width:92%;height:92%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 18px rgba(0,0,0,.65))}.boss-catalog-info{padding:clamp(24px,5vw,52px);display:flex;flex-direction:column;justify-content:center}.boss-catalog-info>small{color:#bf9850;letter-spacing:.18em;font-weight:800}.boss-catalog-info h2{font-family:var(--font-title);color:#f3d789;font-size:clamp(2rem,4vw,3.5rem);margin:.35rem 0 22px}.boss-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.boss-facts>div{padding:14px;background:#090d13;border:1px solid rgba(255,255,255,.08)}.boss-facts span,.boss-facts strong{display:block}.boss-facts span{font-size:.68rem;color:#8e96a1;text-transform:uppercase;letter-spacing:.08em}.boss-facts strong{margin-top:7px;color:#eee;line-height:1.5}.boss-facts__wide{grid-column:1/-1;border-left:3px solid #d5a84c!important}.boss-facts__wide strong{color:#f2ca68}.boss-pick[hidden]{display:none}
@media(max-width:900px){.boss-catalog-layout{grid-template-columns:1fr}.boss-catalog-list{display:flex;overflow:auto;max-height:none;padding-bottom:6px}.boss-pick{min-width:260px}.boss-catalog-detail{grid-template-columns:1fr}.boss-catalog-visual{min-height:390px}}@media(max-width:560px){.boss-catalog-detail{display:block}.boss-catalog-visual{min-height:310px}.boss-facts{grid-template-columns:1fr}.boss-facts__wide{grid-column:auto}.boss-pick{min-width:230px}}

/* ===== Forge guide readability + fast lookup ===== */
.gd-search{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:0 14px;background:#0c1017;border:1px solid rgba(232,197,106,.24);border-radius:8px}.gd-search input{width:100%;padding:13px 0;background:transparent;border:0;outline:0;color:#fff}.gd-empty{padding:18px;text-align:center;color:var(--muted);border:1px dashed rgba(232,197,106,.25);border-radius:8px}.guide-block[hidden]{display:none!important}.guide-media{min-width:0}.guide-body__head{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}.guide-body__head small{font-size:.66rem;letter-spacing:.16em;color:#b58c43;font-weight:800}.guide-body__head h3{font-size:1.18rem!important;margin:.25rem 0 0!important}.guide-info{margin-top:12px;padding:13px 14px;background:rgba(6,8,12,.55);border:1px solid rgba(255,255,255,.07);border-radius:7px}.guide-info>span{display:block;margin-bottom:8px;color:#d5ad59;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.guide-materials{display:flex;flex-wrap:wrap;gap:6px}.guide-materials .mat{margin:0}.guide-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.guide-result{padding:13px 14px;border-radius:7px}.guide-result span,.guide-result strong{display:block}.guide-result span{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.guide-result strong{margin-top:7px;color:#eee;font-size:.86rem;line-height:1.5}.guide-result--ok{background:rgba(42,138,77,.09);border:1px solid rgba(74,222,128,.22)}.guide-result--ok span{color:#69df91}.guide-result--bad{background:rgba(184,59,59,.08);border:1px solid rgba(248,113,113,.2)}.guide-result--bad span{color:#f28a8a}.guide-info--tip{border-left:3px solid #c99a42}.guide-info--tip p{margin:0;color:#bfc2c8}.guide-info ul{margin-bottom:0}.guide-block{content-visibility:auto;contain-intrinsic-size:350px}.guide-img img{decoding:async}
@media(max-width:700px){.guide-results{grid-template-columns:1fr}.gd-layout{padding-inline:12px}.gd-side{display:flex;overflow:auto;gap:6px;padding:8px;position:sticky;top:var(--nav-h);z-index:20}.gd-side__label,.gd-nav-sub{display:none!important}.gd-nav-btn{min-width:max-content;border:1px solid rgba(255,255,255,.08)!important;border-radius:6px;padding:.6rem .8rem!important}.gd-nav-btn.is-on{border-color:var(--gold)!important}}
.boss-showcase__avatar--single{width:150px;height:122px;margin:0}.boss-showcase__avatar--single img{filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}

/* ===== Unified catalog/navigation system ===== */
.catalog-header .header__inner{width:min(1240px,calc(100% - 28px));gap:20px}
.catalog-logo{flex:0 0 auto;min-width:190px}
.catalog-tabs{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;flex:1}
.catalog-tab{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border:1px solid transparent;border-radius:7px;color:#c9ced7;font-size:.84rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s,color .18s,transform .18s}
.catalog-tab:hover{color:#f2d27a;background:rgba(232,197,106,.07);border-color:rgba(232,197,106,.18)}
.catalog-tab.is-active{color:#17130a;background:linear-gradient(180deg,#f1d985,#b88631);border-color:#f2d77d;box-shadow:0 5px 18px rgba(0,0,0,.25)}
.catalog-actions{flex:0 0 auto}
.catalog-drawer a.active{color:var(--gold);background:rgba(232,197,106,.08)}
.catalog-page-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:calc(var(--nav-h) + 32px) 0 70px}
.catalog-page-head{text-align:center;max-width:820px;margin:0 auto 26px}
.catalog-page-head>span{font-size:.72rem;letter-spacing:.2em;color:var(--gold);font-weight:800;text-transform:uppercase}
.catalog-page-head h1{font-family:var(--font-title);color:#f2d88c;font-size:clamp(1.75rem,4vw,2.85rem);line-height:1.15;margin:.4rem 0}
.catalog-page-head p{color:var(--muted);line-height:1.65;margin:0}
.catalog-filter{margin:18px auto 0;max-width:560px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#0d1118;border:1px solid rgba(232,197,106,.25);border-radius:7px}
.catalog-filter input{width:100%;padding:13px 0;background:transparent;color:#fff;border:0;outline:0}
.catalog-split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
.catalog-picker{display:grid;gap:8px;max-height:690px;overflow:auto;padding-right:5px;scrollbar-width:thin}
.catalog-pick{display:grid;grid-template-columns:68px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:80px;padding:8px;text-align:left;text-decoration:none;background:#0d1117;border:1px solid rgba(255,255,255,.08);color:#eee;border-radius:7px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.catalog-pick:hover,.catalog-pick.is-on{border-color:#d5a84c;background:#15140f}.catalog-pick:hover{transform:translateX(2px)}
.catalog-pick img{width:68px;height:62px;object-fit:contain;display:block;border-radius:5px;background:rgba(0,0,0,.18)}
.catalog-pick b,.catalog-pick small{display:block;overflow:hidden;text-overflow:ellipsis}.catalog-pick b{color:#f0d27e;font-size:.9rem}.catalog-pick small{margin-top:4px;color:#8f97a2;font-size:.72rem;line-height:1.35}.catalog-pick em{font-style:normal;color:#d4ad59;font-size:.7rem;white-space:nowrap}.catalog-pick[hidden]{display:none}
.catalog-detail{min-height:520px;background:linear-gradient(145deg,#111720,#080a0f);border:1px solid rgba(232,197,106,.28);border-radius:10px;overflow:hidden}
@media(max-width:1050px){.catalog-logo{min-width:auto}.catalog-logo span{display:none}.catalog-tab{padding-inline:11px}}
@media(max-width:900px){.catalog-tabs{display:none}.catalog-split{grid-template-columns:1fr}.catalog-picker{display:flex;overflow:auto;max-height:none;padding:0 0 7px}.catalog-pick{min-width:260px}.catalog-actions{margin-left:auto}}
@media(max-width:560px){.catalog-page-shell{width:min(100% - 20px,1180px);padding-top:calc(var(--nav-h) + 22px)}.catalog-pick{min-width:228px;grid-template-columns:58px 1fr}.catalog-pick img{width:58px;height:54px}.catalog-pick em{display:none}.catalog-page-head{margin-bottom:20px}}


/* ===== Vietnamese typography + stable shared navigation ===== */
html, body, button, input, select, textarea {
  font-family: var(--font);
  font-synthesis: none;
}
body {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
h1, h2, h3, .hero__content h1, .section-heading h2,
.catalog-page-head h1, .boss-catalog-head h1, .boss-catalog-info h2,
.article-content h1, .article-card h1, .event-head h1 {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0;
}
.catalog-header {
  background: rgba(8, 9, 12, .98);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.catalog-header .header__inner {
  max-width: 1240px;
  width: calc(100% - 28px);
  padding-inline: 0;
  gap: clamp(10px, 1.5vw, 20px);
}
.catalog-logo { min-width: 205px; }
.catalog-logo img { height: 44px; }
.catalog-logo span {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  line-height: 1.25;
}
.catalog-tabs { gap: 4px; }
.catalog-tab {
  min-height: 38px;
  padding-inline: clamp(10px, 1.2vw, 15px);
  font-size: .79rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
}
.catalog-actions .gbtn { min-height: 38px; font-size: .75rem; }
@media (max-width: 1100px) {
  .catalog-logo { min-width: auto; }
  .catalog-logo span { display: none; }
  .catalog-tab { padding-inline: 10px; font-size: .76rem; }
}
@media (max-width: 900px) {
  .catalog-header .header__inner { width: calc(100% - 22px); }
  .catalog-logo img { height: 41px; }
}


/* ===== Unified public UI v3 ===== */
:root{--ui-radius:8px;--ui-control-h:42px;--ui-page-w:1180px}
.catalog-tabs{flex:1;justify-content:center;min-width:0}
.catalog-tab{height:var(--ui-control-h);min-height:var(--ui-control-h);padding:0 14px;border-radius:var(--ui-radius)}
.catalog-tab:last-child{color:#17130a;background:linear-gradient(180deg,#f1d985,#b88631);border-color:#f2d77d}
.catalog-tab:last-child.is-active{box-shadow:0 0 0 2px rgba(242,215,125,.22),0 7px 20px rgba(0,0,0,.35)}
.gbtn,.btn,.dl-btn,.news-more,.event-actions a{min-height:var(--ui-control-h);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-radius);font-family:var(--font);font-weight:800;line-height:1.1}
.site-footer-unified{border-top:1px solid rgba(232,197,106,.2);background:#07090d;padding:34px 0;color:#aeb4bf}
.site-footer-unified__inner{width:min(var(--ui-page-w),calc(100% - 28px));margin:auto;display:flex;justify-content:space-between;gap:30px;align-items:center}
.site-footer-unified__inner>div{max-width:560px}.site-footer-unified img{width:58px;height:58px;object-fit:contain;float:left;margin-right:14px}.site-footer-unified strong{color:#efd17d}.site-footer-unified p{margin:5px 0 0;line-height:1.6}.site-footer-unified nav{display:flex;flex-wrap:wrap;gap:8px}.site-footer-unified a{color:#d4d8df;text-decoration:none;padding:9px 11px;border:1px solid rgba(255,255,255,.08);border-radius:7px}.site-footer-unified a:hover{color:#f0cf77;border-color:rgba(232,197,106,.35)}
.public-page{width:min(var(--ui-page-w),calc(100% - 28px));margin:0 auto;padding:calc(var(--nav-h) + 30px) 0 64px}
@media(max-width:900px){.site-footer-unified__inner{display:block}.site-footer-unified nav{margin-top:20px}.catalog-tabs{display:none}}


/* GUIDE V3 SITE CONSISTENCY */
.site-footer-unified{clear:both;overflow:hidden}
.site-footer-unified__inner{width:min(var(--ui-page-w),calc(100% - 28px));margin:auto;display:grid;grid-template-columns:minmax(280px,1.6fr) repeat(3,minmax(150px,1fr));gap:28px;align-items:start}
.site-footer-unified__inner>div{max-width:none;min-width:0}.site-footer-brand{display:flex;align-items:flex-start;gap:14px}.site-footer-unified .site-footer-brand img{width:58px;height:58px;object-fit:contain;float:none;margin:0;flex:0 0 auto}.site-footer-group b{display:block;margin-bottom:11px;color:#efd17d;font-size:12px;letter-spacing:.08em}.site-footer-unified .site-footer-group nav{display:grid;gap:7px}.site-footer-unified .site-footer-group a{padding:7px 0;border:0;border-radius:0;color:#c8ced8}.site-footer-unified .site-footer-group a:hover{border:0;color:#f0cf77}.site-footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#858d99}
.news-catalog-shell{padding-bottom:48px}.news-catalog-head{margin-bottom:18px}.news-catalog-body{width:min(900px,100%);margin:0 auto}.news-catalog-body .news-box{margin:0;width:100%;max-width:none}
@media(max-width:980px){.site-footer-unified__inner{grid-template-columns:1.4fr repeat(2,1fr)}.site-footer-group--legal{grid-column:2/4}.site-footer-bottom{grid-column:1/-1}}
@media(max-width:700px){.site-footer-unified__inner{grid-template-columns:1fr 1fr;gap:22px}.site-footer-brand{grid-column:1/-1}.site-footer-group--legal{grid-column:auto}.site-footer-bottom{grid-column:1/-1;display:grid;gap:5px}.news-catalog-body{width:100%}}
@media(max-width:440px){.site-footer-unified__inner{grid-template-columns:1fr}.site-footer-brand,.site-footer-bottom{grid-column:auto}.site-footer-group--legal{grid-column:auto}}

/* GUIDE V3: unified legal pages */
.legal-page{width:min(960px,calc(100% - 28px));margin:0 auto;padding:calc(var(--nav-h) + 30px) 0 64px}.legal-hero{padding:clamp(22px,4vw,38px);border:1px solid rgba(232,197,106,.22);border-radius:12px 12px 0 0;background:linear-gradient(135deg,rgba(38,31,18,.94),rgba(11,15,21,.98));text-align:left}.legal-hero span{color:#dfbc61;font-size:10px;font-weight:800;letter-spacing:.18em}.legal-hero h1{margin:7px 0 7px;color:#f0d794;font:800 clamp(28px,4vw,42px)/1.15 var(--font-title)}.legal-hero p{max-width:760px;margin:0;color:#b9c0ca;line-height:1.7}.legal-content{padding:clamp(20px,4vw,38px);border:1px solid rgba(255,255,255,.09);border-top:0;border-radius:0 0 12px 12px;background:#0e131a}.legal-content section+section{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07)}.legal-content h2{margin:0 0 8px;color:#e8cf8e;font-size:18px}.legal-content p{margin:0;color:#c8ced6;line-height:1.8}.legal-updated{margin-top:30px!important;padding-top:18px;border-top:1px solid rgba(232,197,106,.14);color:#8d96a2!important;font-size:12px}
@media(max-width:560px){.legal-page{width:min(100% - 18px,960px);padding-top:calc(var(--nav-h) + 18px)}}


/* =========================================================
   NEWS V8.1 — text-first editorial list (no thumbnails)
   ========================================================= */
.news-list li{border-bottom-color:rgba(255,255,255,.045)}
.news-list a{display:grid;grid-template-columns:92px minmax(0,1fr) 26px;gap:14px;align-items:center;padding:14px 18px}
.news-list time{min-width:0;color:#8e846c;font-size:.7rem;font-weight:700;letter-spacing:.025em}
.news-list__main{display:block;min-width:0}
.news-list__meta{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.news-list__tag{display:inline-flex;align-items:center;min-height:21px;padding:0 .5rem;border:1px solid rgba(232,197,106,.18);background:rgba(232,197,106,.075);font-size:.59rem;letter-spacing:.045em}
.news-list__title{display:block;color:#e8e4dc;font-size:.9rem;font-weight:700;line-height:1.42;transition:color .2s ease}
.news-list__summary{display:-webkit-box;max-width:880px;margin-top:4px;overflow:hidden;color:#817d76;font-size:.71rem;line-height:1.52;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.news-list__arrow{display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(232,197,106,.12);border-radius:50%;color:#776747;font-size:1.05rem;transition:.2s ease}
.news-list a:hover{background:linear-gradient(90deg,rgba(232,197,106,.055),rgba(232,197,106,.018))}
.news-list a:hover .news-list__arrow{border-color:rgba(232,197,106,.38);color:#e0bd68;transform:translateX(2px)}
.news-list a:hover .news-list__title{color:var(--gold-l)}
@media(max-width:700px){.news-list a{grid-template-columns:minmax(0,1fr) 24px;gap:8px 10px;padding:13px 14px}.news-list time{grid-column:1;grid-row:1;order:0}.news-list__main{grid-column:1;grid-row:2}.news-list__arrow{grid-column:2;grid-row:1/3;align-self:center}.news-list__summary{-webkit-line-clamp:2}.news-list__tag{font-size:.56rem}}

/* MU Hùng Phong V11 — universal content-image containment. Never crop real <img> content. */
body img:not([data-crop]){
  object-fit:contain!important;
  object-position:center!important;
  box-sizing:border-box!important;
}

/* =========================================================
   MU Hùng Phong PRIVATE UI V15 — OLD KINGDOM BUTTONS
   Complete button silhouette replacement. Layout/content untouched.
   ========================================================= */
:root{--v15-iron:#171512;--v15-iron2:#090a0a;--v15-bronze:#9b7137;--v15-bronze2:#4c3218;--v15-ivory:#f2e7cf;--v15-red:#6d2118}

/* Primary buttons: old forged plaques, NOT the old long clipped bars */
.gbtn,.btn,.dl-btn,.event-actions a{
  position:relative!important; isolation:isolate; overflow:visible!important;
  min-height:48px!important; padding:0 24px!important;
  border:2px solid #5d4529!important;
  border-radius:3px 18px 3px 18px!important;
  clip-path:none!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 16% 84%,rgba(255,255,255,.025)),
    linear-gradient(180deg,#25211a 0%,#12110e 46%,#080909 47%,#15120e 100%)!important;
  color:var(--v15-ivory)!important;
  font-family:var(--font-title)!important; font-weight:800!important;
  letter-spacing:.055em!important; text-transform:uppercase!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:inset 0 0 0 1px #17100a,inset 0 1px 0 rgba(255,224,166,.13),0 5px 0 #050505,0 9px 18px rgba(0,0,0,.42)!important;
  transform:none!important; transition:.22s ease!important;
}
.gbtn::before,.btn::before,.dl-btn::before,.event-actions a::before{
  content:""!important; position:absolute!important; z-index:-1!important;
  left:9px!important; right:9px!important; top:6px!important; bottom:6px!important;
  border:1px solid rgba(180,132,67,.34)!important; border-radius:1px 11px 1px 11px!important;
  background:none!important; opacity:1!important; transform:none!important;
}
.gbtn::after,.btn::after,.dl-btn::after,.event-actions a::after{
  content:"◆"!important; position:absolute!important; width:auto!important; height:auto!important;
  left:-8px!important; top:50%!important; right:auto!important; bottom:auto!important;
  transform:translateY(-50%) rotate(45deg)!important;
  display:grid!important; place-items:center!important; color:#c7974f!important;
  font-size:10px!important; line-height:1!important; background:#15110c!important;
  border:1px solid #6e4d25!important; box-shadow:0 0 0 2px #080807!important;
  opacity:1!important; transition:.22s ease!important;
}
.gbtn:hover,.btn:hover,.dl-btn:hover,.event-actions a:hover{
  color:#fff4d7!important; border-color:#bd8b49!important;
  background:linear-gradient(180deg,#33271a 0%,#1c130d 46%,#0b0908 47%,#20130d 100%)!important;
  box-shadow:inset 0 0 0 1px #241509,inset 0 1px 0 rgba(255,225,165,.22),0 5px 0 #050505,0 10px 24px rgba(126,62,24,.28)!important;
  transform:translateY(-2px)!important;
}
.gbtn:hover::after,.btn:hover::after,.dl-btn:hover::after,.event-actions a:hover::after{color:#ffe2a0!important;box-shadow:0 0 0 2px #080807,0 0 13px rgba(218,146,56,.5)!important}
.gbtn:active,.btn:active,.dl-btn:active,.event-actions a:active{transform:translateY(2px)!important;box-shadow:inset 0 2px 8px #000,0 2px 0 #050505!important}

/* Gold/main action becomes royal red-bronze instead of old gold bar */
.gbtn--gold,.btn--gold,.side-dock__item--gold{
  color:#fff0d0!important; border-color:#9d6235!important;
  background:linear-gradient(180deg,#54271c 0%,#2b130f 48%,#120b09 49%,#32150f 100%)!important;
}
.gbtn--dark{color:var(--v15-ivory)!important;border-color:#5d4529!important}
.gbtn--lg{min-height:52px!important;padding:0 30px!important}.gbtn--sm{min-height:38px!important;padding:0 17px!important;font-size:.76rem!important}
.btn-ico{width:28px!important;height:28px!important;padding:5px!important;margin-right:8px!important;border:1px solid #8b6638!important;border-radius:50%!important;background:#090908!important;box-shadow:inset 0 0 0 2px #21180e!important}

/* Hero quick CTA gets plaque spacing without changing its position */
.quick-cta__row{gap:18px!important}.quick-cta .gbtn{min-width:220px!important}

/* News tabs: parchment labels */
.news-tabs{gap:7px!important;padding:7px!important;background:#090a0a!important}
.news-tabs button{
  position:relative!important; min-height:40px!important; padding:0 18px!important;
  border:1px solid #49371f!important; border-bottom:3px solid #21170d!important;
  border-radius:12px 2px 12px 2px!important;
  background:linear-gradient(180deg,#211d16,#100f0c)!important;
  color:#a99c86!important; font-family:var(--font-title)!important; letter-spacing:.04em!important;
}
.news-tabs button:hover{color:#f1dfbc!important;border-color:#8f6936!important;background:linear-gradient(180deg,#30261a,#17120d)!important}
.news-tabs button.is-on{color:#fff0c9!important;border-color:#b57b37!important;border-bottom-color:#7d291c!important;background:linear-gradient(180deg,#512319,#24100c)!important;box-shadow:inset 0 0 0 1px rgba(230,174,95,.16)!important}

/* News more: centered antique seal button */
.news-more{width:max-content!important;min-width:180px!important;margin:15px auto!important;padding:10px 22px!important;border:1px solid #684a27!important;border-radius:2px 14px 2px 14px!important;background:#15120e!important;color:#dbc18e!important;box-shadow:0 4px 0 #070707!important}
.news-more:hover{background:#2b1c10!important;color:#fff0c7!important;border-color:#b48142!important}

/* Catalog/header controls */
.catalog-tab{border-radius:3px 13px 3px 13px!important;border:1px solid #46351f!important;background:linear-gradient(#201c16,#0e0e0c)!important;color:#cfc2aa!important}
.catalog-tab:hover,.catalog-tab.is-active{border-color:#9f7540!important;background:linear-gradient(#382719,#17100c)!important;color:#f4e4c4!important;box-shadow:inset 0 0 0 1px rgba(222,169,91,.12)!important}
.catalog-tab:last-child{color:#f5e8cf!important;background:linear-gradient(#54271c,#25100c)!important;border-color:#9d6235!important}

/* Class selector buttons become framed nameplates */
.class-tab{border-radius:2px 14px 2px 14px!important;border:2px solid #44331e!important;background:#0d0d0b!important;box-shadow:inset 0 0 0 1px #17120c,0 4px 0 #050505!important}
.class-tab:hover,.class-tab.is-on{transform:translateX(5px)!important;border-color:#a5783c!important;box-shadow:inset 0 0 0 1px #2c1d10,0 4px 0 #050505,0 0 16px rgba(145,83,31,.22)!important}

/* Side dock: square medieval tabs, not capsules */
.side-dock__item{border-radius:14px 2px 2px 14px!important;border:2px solid #4e3a22!important;background:linear-gradient(135deg,#211b13,#0b0c0c)!important;box-shadow:inset 0 0 0 1px #17110b,-5px 5px 0 #050505!important}
.side-dock.left .side-dock__item{border-radius:2px 14px 14px 2px!important}
.side-dock__ico{border-radius:3px 10px 3px 10px!important;background:#15110d!important;border:1px solid #8a6335!important}

/* Popup/utility buttons */
.lb__close,.pop__x,.drawer__x,.burger,.music{border:1px solid #5d4529!important;border-radius:3px 11px 3px 11px!important;background:linear-gradient(#211c15,#0c0d0c)!important;color:#d9bc83!important;box-shadow:inset 0 0 0 1px #17110b,0 3px 0 #050505!important}
.lb__close:hover,.pop__x:hover,.drawer__x:hover,.burger:hover,.music:hover{border-color:#a97b40!important;background:linear-gradient(#3a2819,#17100c)!important;color:#fff0c9!important}

@media(max-width:700px){.quick-cta__row{gap:10px!important}.quick-cta .gbtn{min-width:0!important}.gbtn,.btn,.dl-btn,.event-actions a{border-radius:3px 14px 3px 14px!important}.gbtn::after,.btn::after,.dl-btn::after,.event-actions a::after{left:-5px!important}}


/* === 2026 CLASS PORTRAIT CARDS === */
.class-list{width:238px!important;gap:8px!important}
.class-tab{width:238px!important;height:66px!important;display:flex!important;align-items:center!important;gap:11px!important;padding:5px 10px 5px 5px!important;overflow:hidden!important;text-align:left!important;border-radius:3px 15px 3px 15px!important;border:1px solid rgba(151,101,37,.62)!important;background:linear-gradient(90deg,#17191f 0%,#101217 72%,#0b0c0f 100%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 3px 7px rgba(0,0,0,.55)!important}
.class-tab:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;background:linear-gradient(transparent,#d79b39,transparent);opacity:.55}
.class-tab__portrait{position:relative;flex:0 0 54px;width:54px;height:54px;overflow:hidden;border-radius:2px 9px 2px 9px;border:1px solid rgba(187,123,39,.58);background:radial-gradient(circle at 50% 25%,#45351e,#15171c 68%);box-shadow:inset 0 0 14px rgba(0,0,0,.55)}
.class-tab__portrait b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#d9a749;font-size:.67rem;letter-spacing:.04em;z-index:0}
.class-tab__portrait img{position:relative;z-index:1;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;display:block;filter:brightness(.82) saturate(.88) contrast(1.08);transition:transform .3s ease,filter .3s ease}
.class-tab__portrait.no-image b{z-index:2}
.class-tab__copy{position:relative;z-index:2;min-width:0;display:flex;flex:1;flex-direction:column;justify-content:center;gap:4px}
.class-tab__name{font-size:.72rem!important;font-weight:900!important;line-height:1.1!important;letter-spacing:.025em!important;color:#eceff5!important;white-space:nowrap;text-shadow:0 1px 2px #000}
.class-tab__copy small{font-size:.49rem;color:#777f8e;letter-spacing:.12em;font-weight:700}
.class-tab__arrow{font-family:Georgia,serif;font-size:1.35rem;line-height:1;color:#69583d;transform:translateX(-1px);transition:.25s}
.class-tab:hover,.class-tab.is-on{transform:translateX(6px)!important;border-color:#d99a34!important;background:linear-gradient(90deg,#322412 0%,#17191f 58%,#0d0e11 100%)!important;box-shadow:inset 0 0 18px rgba(211,144,40,.08),0 5px 13px rgba(0,0,0,.55),0 0 14px rgba(183,115,27,.12)!important}
.class-tab:hover .class-tab__portrait img,.class-tab.is-on .class-tab__portrait img{transform:scale(1.08);filter:brightness(1.03) saturate(1.03) contrast(1.08)}
.class-tab.is-on .class-tab__name{color:#ffc84e!important}.class-tab.is-on .class-tab__arrow{color:#e6ad4b;transform:translateX(2px)}
@media(max-width:960px){.class-list{width:100%!important}.class-tab{width:calc(50% - 4px)!important;max-width:none!important}}
@media(max-width:560px){.class-tab{height:62px!important}.class-tab__portrait{width:50px;height:50px;flex-basis:50px}.class-tab__copy small{display:none}}

/* MU Sai Gon branding 2026 */
.hero__bg{background-image:url("../images/bg.png")!important;background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important;}
.catalog-logo img,.logo img{object-fit:contain!important;}


/* =========================================================
   MU HUNG PHONG - CLASS SHOWCASE V2
   ========================================================= */
.class-sec{position:relative;padding:58px 0 72px;background:linear-gradient(180deg,rgba(4,4,5,.30),rgba(7,4,3,.82));overflow:hidden}
.class-sec__ornament{text-align:center;margin-bottom:8px}.class-sec__badge{display:inline-flex;align-items:center;justify-content:center;min-width:210px;height:38px;padding:0 34px;clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);background:linear-gradient(180deg,#7c1a0e,#260705);border:1px solid #bc6b25;color:#fff;font-weight:900;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 2px 2px #000;box-shadow:0 0 22px rgba(213,56,18,.22)}
.class-sec__title{text-align:center;margin:10px 0 28px!important;color:#f4ca64!important;font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(28px,3vw,42px)!important;text-shadow:0 2px 0 #000,0 0 18px rgba(236,107,28,.28)}
.class-stage{position:relative;display:grid!important;grid-template-columns:360px minmax(380px,1fr) 350px!important;gap:18px!important;min-height:650px;padding:24px!important;border:2px solid #4a2a16!important;background:linear-gradient(90deg,rgba(10,9,8,.98),rgba(16,12,9,.92),rgba(8,8,8,.98))!important;box-shadow:inset 0 0 0 2px #0a0908,inset 0 0 45px rgba(180,45,10,.08),0 18px 45px rgba(0,0,0,.5)!important}
.class-stage:before,.class-stage:after{content:"";position:absolute;left:16px;right:16px;height:2px;background:linear-gradient(90deg,transparent,#7b3218,#e66d24,#7b3218,transparent);opacity:.8}.class-stage:before{top:8px}.class-stage:after{bottom:8px}
.class-list{display:flex!important;flex-direction:column!important;gap:9px!important;align-self:center;z-index:5}
.class-tab{position:relative!important;width:100%!important;height:76px!important;display:grid!important;grid-template-columns:64px 58px 1fr 20px!important;align-items:center!important;gap:9px!important;padding:5px 10px 5px 5px!important;border-radius:3px 14px 3px 14px!important;border:1px solid #7c5427!important;background:linear-gradient(90deg,#17130f 0%,#0d0e10 72%,#08090a 100%)!important;overflow:hidden!important;box-shadow:inset 0 0 0 1px rgba(255,184,62,.04),0 4px 8px rgba(0,0,0,.45)!important;transition:.22s ease!important}
.class-tab__portrait{grid-column:1!important;width:64px!important;height:64px!important;flex:none!important;border-radius:3px 10px 3px 10px!important;border:1px solid #a96c29!important;background:#090909!important;overflow:hidden!important;box-shadow:inset 0 0 12px #000,0 0 0 1px rgba(255,182,58,.08)!important}
.class-tab__portrait img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 15%!important;filter:brightness(.92) contrast(1.08) saturate(1.08)!important;transform:scale(1.04);transition:.25s ease!important}.class-tab__portrait b{display:none!important}
.class-tab:after{content:attr(data-code);grid-column:2;color:#f5b942;font-weight:900;font-size:15px;text-align:center;text-shadow:0 0 10px rgba(255,153,34,.35)}
.class-tab__copy{grid-column:3!important;gap:5px!important}.class-tab__name{font-size:14px!important;color:#f4f4f4!important}.class-tab__copy small{font-size:10px!important;color:#999!important;letter-spacing:.04em!important}.class-tab__arrow{grid-column:4!important;color:#d79b39!important;font-size:25px!important}
.class-tab:hover,.class-tab.is-on{transform:translateX(7px)!important;border-color:#ff9a27!important;background:linear-gradient(90deg,#391109,#17100c 55%,#0d0c0b)!important;box-shadow:inset 0 0 22px rgba(204,57,10,.16),0 0 18px rgba(255,76,15,.28)!important}.class-tab.is-on:before{content:""!important;position:absolute!important;inset:0!important;width:auto!important;background:linear-gradient(90deg,rgba(255,69,14,.18),transparent 58%)!important;opacity:1!important}.class-tab:hover .class-tab__portrait img,.class-tab.is-on .class-tab__portrait img{transform:scale(1.11);filter:brightness(1.08) contrast(1.08) saturate(1.15)!important}.class-tab.is-on .class-tab__name{color:#ffc14d!important}
.class-hero{position:relative!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;min-height:600px!important;height:auto!important;overflow:hidden!important;background:radial-gradient(circle at 50% 55%,rgba(125,34,10,.22),rgba(0,0,0,0) 55%)!important}.class-hero__glow{position:absolute!important;left:50%!important;bottom:55px!important;width:500px!important;height:500px!important;transform:translateX(-50%)!important;border:1px solid rgba(170,83,29,.2)!important;border-radius:50%!important;background:radial-gradient(circle,rgba(255,86,17,.11),rgba(63,22,8,.08) 45%,transparent 70%)!important;box-shadow:inset 0 0 80px rgba(213,61,13,.08)!important}
.class-hero>div[data-bind="classes-hero"]{position:relative!important;width:100%!important;height:610px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow:visible!important}.class-hero__stage-art{position:absolute!important;left:50%!important;bottom:20px!important;width:92%!important;height:88%!important;transform:translateX(-50%)!important;object-fit:contain!important;opacity:.38!important}.class-hero__img{position:relative!important;z-index:3!important;display:block!important;width:auto!important;height:580px!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 25px 24px rgba(0,0,0,.8)) drop-shadow(0 0 20px rgba(222,63,14,.2))!important}.class-hero__ph{position:absolute!important;inset:0!important;align-items:center!important;justify-content:center!important;color:#dca447!important;font-weight:900!important}
.class-info{align-self:center!important;padding:28px 24px!important;min-height:390px!important;border:1px solid #4b2615!important;background:linear-gradient(180deg,rgba(16,14,12,.96),rgba(8,8,8,.96))!important;box-shadow:inset 0 0 30px rgba(128,42,14,.06)!important}.class-info__name{text-align:center!important;padding-bottom:16px!important;margin-bottom:18px!important;border-bottom:1px solid #3a2b1b!important;color:#f4c25a!important;font-family:Georgia,'Times New Roman',serif!important;font-size:26px!important;font-weight:900!important;letter-spacing:.05em!important}.class-info__desc{font-size:16px!important;line-height:1.75!important;color:#e3e3e3!important}
@media(max-width:1100px){.class-stage{grid-template-columns:300px 1fr!important}.class-info{grid-column:1/-1!important;min-height:0!important}.class-tab{grid-template-columns:58px 48px 1fr 18px!important}.class-tab__portrait{width:58px!important;height:58px!important}.class-hero__img{height:520px!important}}
@media(max-width:760px){.class-stage{grid-template-columns:1fr!important;padding:16px!important}.class-list{display:grid!important;grid-template-columns:1fr 1fr!important}.class-tab{height:68px!important;grid-template-columns:54px 1fr 16px!important}.class-tab__portrait{width:54px!important;height:54px!important}.class-tab:after{display:none!important}.class-tab__copy{grid-column:2!important}.class-tab__arrow{grid-column:3!important}.class-hero{min-height:470px!important}.class-hero>div[data-bind="classes-hero"]{height:480px!important}.class-hero__img{height:460px!important}.class-info{grid-column:auto!important}}
@media(max-width:500px){.class-list{grid-template-columns:1fr!important}.class-tab{width:100%!important}.class-sec__title{font-size:28px!important}.class-hero__img{height:420px!important}}
\n\n/* ===== MU HUNG PHONG CLASS PRO V3 ===== */
.class-sec{padding:64px 0 76px!important;background:linear-gradient(180deg,rgba(3,3,4,.08),rgba(3,3,4,.52))!important}
.class-sec__ornament{margin-bottom:10px!important}.class-sec__badge{background:linear-gradient(180deg,#5c1b0e,#250b08)!important;border:1px solid #9e5425!important;color:#f7e0a3!important;box-shadow:0 0 20px rgba(194,61,16,.18)!important}
.class-sec__title{margin:0 0 26px!important;font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(30px,3vw,44px)!important;line-height:1.05!important;color:#f1c15b!important;text-shadow:0 3px 0 #3d1808,0 0 20px rgba(222,121,27,.2)!important}
.class-stage{grid-template-columns:330px minmax(420px,1fr) 330px!important;gap:16px!important;min-height:590px!important;padding:18px!important;border:1px solid #643319!important;outline:1px solid rgba(198,120,46,.2)!important;outline-offset:-7px!important;background:radial-gradient(circle at 53% 52%,rgba(142,43,12,.15),transparent 34%),linear-gradient(90deg,rgba(8,8,8,.985),rgba(15,12,10,.965),rgba(7,7,7,.985))!important}
.class-list{gap:7px!important;align-self:center!important}.class-tab{height:68px!important;grid-template-columns:58px 46px 1fr 16px!important;gap:8px!important;padding:4px 9px 4px 4px!important;border-radius:3px 11px 3px 11px!important;border-color:#65451f!important;background:linear-gradient(90deg,#15130f,#0b0c0e 72%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 3px 8px rgba(0,0,0,.45)!important}
.class-tab__portrait{width:58px!important;height:58px!important;border-radius:3px 8px 3px 8px!important;border-color:#8e6129!important}.class-tab__portrait img{image-rendering:auto!important;object-position:center 18%!important;transform:scale(1.02)!important;filter:brightness(.98) contrast(1.12) saturate(1.08)!important}
.class-tab:after{font-size:13px!important;color:#e9ad43!important}.class-tab__name{font-size:13px!important;letter-spacing:.01em!important}.class-tab__copy small{font-size:8px!important;color:#8d8d8d!important;letter-spacing:.045em!important}.class-tab__arrow{font-size:20px!important}
.class-tab:hover,.class-tab.is-on{transform:translateX(5px)!important;border-color:#f07b24!important;background:linear-gradient(90deg,#391006,#17100b 56%,#0b0b0b)!important;box-shadow:inset 0 0 18px rgba(211,56,10,.14),0 0 14px rgba(255,73,15,.22)!important}
.class-tab.is-on .class-tab__portrait{border-color:#ff9b31!important;box-shadow:0 0 12px rgba(255,77,18,.25)!important}
.class-hero{min-height:550px!important;background:radial-gradient(circle at 50% 62%,rgba(188,53,13,.18),rgba(65,22,8,.07) 35%,transparent 66%)!important}.class-hero__glow{bottom:34px!important;width:440px!important;height:440px!important;border-color:rgba(196,85,27,.17)!important}
.class-hero>div[data-bind="classes-hero"]{height:560px!important}.class-hero__stage-art{bottom:8px!important;width:88%!important;height:82%!important;opacity:.32!important}.class-hero__img{height:535px!important;max-width:96%!important;filter:drop-shadow(0 22px 20px rgba(0,0,0,.82)) drop-shadow(0 0 16px rgba(211,67,19,.18))!important}
.class-info{min-height:0!important;padding:24px 22px!important;border-color:#4f2916!important;background:linear-gradient(180deg,rgba(17,14,12,.97),rgba(7,7,7,.98))!important}.class-info__name{font-size:24px!important;color:#f2bd53!important;margin-bottom:15px!important;padding-bottom:13px!important}.class-info__desc{font-size:14px!important;line-height:1.72!important;color:#dedede!important;margin-bottom:20px!important}
.class-info__features{border:1px solid #492312;background:rgba(8,7,6,.72);box-shadow:inset 0 0 20px rgba(115,35,11,.05)}.class-info__features-title{padding:10px 13px;border-bottom:1px solid #492312;background:linear-gradient(90deg,rgba(100,27,8,.38),transparent);font-family:Georgia,'Times New Roman',serif;font-weight:800;color:#efb94d;letter-spacing:.035em}.class-info__features ul{list-style:none;margin:0;padding:10px 13px 12px}.class-info__features li{position:relative;padding:6px 0 6px 22px;color:#d7d7d7;font-size:13px}.class-info__features li:before{content:'◆';position:absolute;left:1px;color:#ff5b1e;text-shadow:0 0 8px #e32f0c}
@media(max-width:1150px){.class-stage{grid-template-columns:300px 1fr!important}.class-info{grid-column:1/-1!important}.class-hero__img{height:500px!important}}
@media(max-width:760px){.class-sec{padding:45px 0 55px!important}.class-stage{grid-template-columns:1fr!important;padding:13px!important}.class-list{grid-template-columns:1fr 1fr!important}.class-tab{height:64px!important;grid-template-columns:54px 1fr 14px!important}.class-tab__portrait{width:54px!important;height:54px!important}.class-tab:after{display:none!important}.class-hero{min-height:430px!important}.class-hero>div[data-bind="classes-hero"]{height:440px!important}.class-hero__img{height:425px!important}.class-info{padding:20px!important}}
@media(max-width:500px){.class-list{grid-template-columns:1fr!important}.class-sec__title{font-size:29px!important}.class-hero{min-height:390px!important}.class-hero>div[data-bind="classes-hero"]{height:400px!important}.class-hero__img{height:385px!important}}

/* ===== MU HUNG PHONG CLASS COMPACT BANNER V4 ===== */
.class-sec{padding:44px 0 58px!important}
.class-sec__title{margin:8px 0 22px!important;font-size:clamp(25px,2.4vw,34px)!important}
.class-stage{grid-template-columns:250px minmax(390px,1fr) 300px!important;gap:22px!important;min-height:510px!important;padding:14px!important}
.class-list{width:250px!important;gap:7px!important;align-self:center!important}
.class-tab{position:relative!important;width:250px!important;height:56px!important;display:block!important;padding:0!important;overflow:hidden!important;border-radius:4px!important;border:1px solid #3a3024!important;background:#090a0c!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 2px 5px rgba(0,0,0,.55)!important}
.class-tab__portrait{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:#090a0c!important;box-shadow:none!important}
.class-tab__portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.03) 0%,rgba(5,6,8,.2) 34%,rgba(7,8,10,.92) 68%,#08090b 100%);z-index:2}
.class-tab__portrait img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:18% 22%!important;filter:brightness(.72) contrast(1.12) saturate(.9)!important;transform:scale(1.03)!important}
.class-tab__copy{position:absolute!important;z-index:4!important;left:82px!important;right:28px!important;top:50%!important;transform:translateY(-50%)!important;display:flex!important;gap:3px!important;pointer-events:none}
.class-tab__name{font-size:12px!important;line-height:1!important;color:#e8e8e8!important;text-shadow:0 2px 3px #000!important}
.class-tab__copy small{font-size:7px!important;line-height:1!important;color:#8b8e94!important;letter-spacing:.07em!important;text-transform:uppercase!important}
.class-tab__arrow{display:none!important}
.class-tab:after{content:attr(data-code)!important;display:flex!important;position:absolute!important;z-index:5!important;right:5px!important;bottom:5px!important;width:20px!important;height:14px!important;align-items:center!important;justify-content:center!important;border:1px solid #6e4b26!important;border-radius:8px 2px 8px 2px!important;background:rgba(10,10,11,.88)!important;color:#d6b067!important;font-size:7px!important;line-height:1!important;text-shadow:0 1px #000!important}
.class-tab:before{content:""!important;position:absolute!important;z-index:6!important;inset:0!important;width:auto!important;border-left:2px solid transparent!important;background:none!important;opacity:1!important;pointer-events:none}
.class-tab:hover,.class-tab.is-on{transform:translateX(4px)!important;border-color:#d7a33d!important;background:#090a0c!important;box-shadow:inset 0 0 0 1px rgba(255,221,112,.08),0 0 12px rgba(219,156,50,.15)!important}
.class-tab:hover:before,.class-tab.is-on:before{border-left-color:#f0b542!important;box-shadow:inset 10px 0 18px rgba(197,111,24,.08)!important}
.class-tab:hover .class-tab__portrait img,.class-tab.is-on .class-tab__portrait img{transform:scale(1.07)!important;filter:brightness(.9) contrast(1.13) saturate(1.04)!important}
.class-tab.is-on .class-tab__name{color:#f1d486!important}
.class-hero{min-height:480px!important;overflow:visible!important;background:radial-gradient(circle at 50% 52%,rgba(34,65,90,.15),rgba(0,0,0,0) 58%)!important}
.class-hero__glow{width:390px!important;height:390px!important;bottom:42px!important;border-color:rgba(77,113,145,.22)!important;background:radial-gradient(circle,rgba(62,109,139,.10),rgba(20,30,43,.10) 52%,transparent 72%)!important}
.class-hero>div[data-bind="classes-hero"]{height:490px!important}
.class-hero__stage-art{width:88%!important;height:88%!important;bottom:12px!important;opacity:.30!important}
.class-hero__img{height:470px!important;max-width:96%!important;filter:drop-shadow(0 22px 24px rgba(0,0,0,.78)) drop-shadow(0 0 12px rgba(89,143,174,.14))!important}
.class-info{min-height:250px!important;padding:24px 20px!important;border-color:#482719!important;background:rgba(11,11,11,.9)!important}
.class-info__name{font-size:22px!important;margin-bottom:13px!important;padding-bottom:13px!important}.class-info__desc{font-size:14px!important;line-height:1.7!important}
@media(max-width:1050px){.class-stage{grid-template-columns:250px 1fr!important}.class-info{grid-column:1/-1!important}.class-hero__img{height:450px!important}}
@media(max-width:720px){.class-stage{grid-template-columns:1fr!important}.class-list{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important}.class-tab{width:100%!important}.class-hero{min-height:430px!important}.class-hero>div[data-bind="classes-hero"]{height:440px!important}.class-hero__img{height:420px!important}}
@media(max-width:480px){.class-list{grid-template-columns:1fr!important}.class-tab{height:58px!important}.class-tab__copy{left:88px!important}}

/* ===== MU HUNG PHONG CLASS V5: SINGLE IMAGE LAYER ===== */
.class-hero__stage-art{display:none!important;}
.class-hero>div[data-bind="classes-hero"]{position:relative;isolation:auto!important;transform:none!important;}
.class-hero>div[data-bind="classes-hero"]::before{content:"";position:absolute;left:50%;top:50%;width:min(420px,90%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(36,55,82,.30) 0%,rgba(18,27,41,.18) 58%,rgba(7,10,15,0) 72%);border:1px solid rgba(99,122,157,.16);pointer-events:none;}
.class-hero__img{position:relative!important;z-index:2!important;width:auto!important;max-width:95%!important;height:auto!important;max-height:430px!important;object-fit:contain!important;object-position:center bottom!important;transform:none!important;animation:none!important;filter:drop-shadow(0 24px 28px rgba(0,0,0,.68))!important;}
.class-hero{overflow:visible!important;}

/* =========================================================
   MU HUNG PHONG CLASS SYSTEM V6 — compact cinematic layout
   Hero is ONE image layer only. Replace images/classes/*.png later.
   ========================================================= */
.class-sec{padding:52px 0 68px!important;background:linear-gradient(180deg,#050506 0%,#080808 45%,#030304 100%)!important;border-bottom:1px solid rgba(131,35,20,.5)!important}
.class-sec__ornament{margin-bottom:8px!important}.class-sec__badge{min-width:205px!important;padding:9px 30px!important;background:linear-gradient(180deg,#432016,#1d0c08)!important;border:1px solid #7d3b20!important;clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%)!important;color:#f5e7cf!important;letter-spacing:.13em!important;text-shadow:0 1px 2px #000!important}
.class-sec__title{margin:0 0 24px!important;font-family:Georgia,'Times New Roman',serif!important;font-size:34px!important;line-height:1.1!important;color:#e8bb61!important;text-shadow:0 2px 3px #000,0 0 20px rgba(197,85,22,.16)!important}
.class-stage{position:relative!important;display:grid!important;grid-template-columns:255px minmax(430px,1fr) 310px!important;gap:28px!important;align-items:center!important;min-height:540px!important;padding:18px 22px!important;border:1px solid #4e4438!important;outline:1px solid #171717!important;outline-offset:-7px!important;background:linear-gradient(90deg,rgba(8,8,9,.99),rgba(14,14,14,.97) 52%,rgba(8,8,9,.99))!important;box-shadow:inset 0 0 55px rgba(0,0,0,.78),0 16px 35px rgba(0,0,0,.5)!important;overflow:hidden!important}
.class-stage:before,.class-stage:after{content:""!important;position:absolute!important;left:18px!important;right:18px!important;height:1px!important;background:linear-gradient(90deg,transparent,#9c3e20,#d27030,#9c3e20,transparent)!important;opacity:.58!important}.class-stage:before{top:10px!important}.class-stage:after{bottom:10px!important}
.class-list{position:relative!important;z-index:4!important;display:flex!important;flex-direction:column!important;gap:7px!important;width:255px!important;align-self:center!important}
.class-tab{position:relative!important;width:255px!important;height:61px!important;display:block!important;padding:0!important;border:1px solid #3c3328!important;border-radius:2px!important;background:#08090a!important;overflow:hidden!important;clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%)!important;box-shadow:0 3px 7px rgba(0,0,0,.52)!important;transition:transform .2s ease,filter .2s ease!important}
.class-tab__portrait{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:#090909!important;box-shadow:none!important}
.class-tab__portrait:after{content:""!important;position:absolute!important;z-index:2!important;inset:0!important;background:linear-gradient(90deg,rgba(0,0,0,.02),rgba(6,6,7,.18) 40%,rgba(7,7,8,.82) 72%,rgba(7,7,8,.98))!important}
.class-tab__portrait img{position:absolute!important;z-index:1!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 22%!important;filter:grayscale(.88) brightness(.60) contrast(1.15)!important;transform:scale(1.02)!important;transition:.25s ease!important}
.class-tab__portrait b,.class-tab__copy small,.class-tab__arrow{display:none!important}
.class-tab__copy{position:absolute!important;z-index:4!important;left:96px!important;right:28px!important;top:50%!important;transform:translateY(-50%)!important;display:block!important;text-align:left!important;pointer-events:none!important}
.class-tab__name{display:block!important;font-family:Georgia,'Times New Roman',serif!important;font-size:14px!important;line-height:1.05!important;font-weight:800!important;color:#dedede!important;text-transform:uppercase!important;letter-spacing:.02em!important;text-shadow:0 2px 3px #000!important;white-space:normal!important}
.class-tab:after{content:'›'!important;position:absolute!important;z-index:5!important;right:15px!important;top:50%!important;transform:translateY(-52%)!important;color:#aaa!important;font:28px/1 Georgia,serif!important}
.class-tab:before{content:""!important;position:absolute!important;z-index:6!important;inset:0!important;width:auto!important;background:none!important;border:1px solid transparent!important;pointer-events:none!important;opacity:1!important}
.class-tab:hover,.class-tab.is-on{transform:translateX(7px)!important;border-color:#f0a53a!important;filter:drop-shadow(0 0 7px rgba(220,72,18,.24))!important;background:#0b0807!important}
.class-tab:hover:before,.class-tab.is-on:before{border-color:#ffb23e!important;box-shadow:inset 0 0 16px rgba(222,58,10,.18)!important}
.class-tab:hover .class-tab__portrait img,.class-tab.is-on .class-tab__portrait img{filter:grayscale(0) brightness(.95) contrast(1.12) saturate(1.08)!important;transform:scale(1.07)!important}
.class-tab.is-on .class-tab__name{color:#f5d17c!important}.class-tab.is-on:after{color:#ffc15a!important;text-shadow:0 0 8px #f05a1a!important}
.class-hero{position:relative!important;min-height:500px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:none!important;overflow:visible!important}
.class-hero__glow{position:absolute!important;left:50%!important;bottom:34px!important;transform:translateX(-50%)!important;width:430px!important;height:430px!important;border-radius:50%!important;border:1px solid rgba(77,122,160,.26)!important;background:radial-gradient(circle at 50% 55%,rgba(42,105,140,.18),rgba(21,39,57,.12) 52%,rgba(0,0,0,0) 72%)!important;box-shadow:inset 0 0 45px rgba(36,91,124,.08)!important}
.class-hero>div[data-bind="classes-hero"]{position:relative!important;z-index:2!important;width:100%!important;height:500px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;transform:none!important}
.class-hero>div[data-bind="classes-hero"]::before{display:none!important}.class-hero__stage-art{display:none!important}
.class-hero__img{position:relative!important;z-index:2!important;width:auto!important;height:auto!important;max-width:96%!important;max-height:500px!important;object-fit:contain!important;object-position:center bottom!important;transform:none!important;animation:none!important;filter:drop-shadow(0 25px 24px rgba(0,0,0,.72)) drop-shadow(0 0 10px rgba(201,58,17,.12))!important}
.class-info{position:relative!important;z-index:4!important;align-self:center!important;min-height:330px!important;padding:25px 24px!important;border:1px solid #4c291b!important;border-radius:0!important;background:linear-gradient(180deg,rgba(24,17,16,.94),rgba(8,8,9,.97))!important;box-shadow:inset 0 0 28px rgba(0,0,0,.5)!important}
.class-info__name{margin:0 0 16px!important;padding:0 0 15px!important;border-bottom:1px solid #564127!important;font-family:Georgia,'Times New Roman',serif!important;font-size:25px!important;line-height:1.1!important;font-weight:800!important;text-align:center!important;color:#efc568!important;letter-spacing:.045em!important;text-transform:uppercase!important;text-shadow:0 2px 3px #000!important}
.class-info__desc{margin:0 0 18px!important;font-family:Georgia,'Times New Roman',serif!important;font-size:15px!important;line-height:1.65!important;color:#e3e3e3!important;text-align:left!important}
.class-info__features{margin-top:15px!important;border:1px solid #492516!important;background:rgba(7,7,7,.66)!important}.class-info__features-title{padding:9px 12px!important;border-bottom:1px solid #492516!important;background:linear-gradient(90deg,rgba(104,29,10,.42),transparent)!important;color:#e8b958!important;font-family:Georgia,'Times New Roman',serif!important;font-size:15px!important;font-weight:800!important}.class-info__features ul{list-style:none!important;margin:0!important;padding:8px 12px 10px!important}.class-info__features li{position:relative!important;padding:5px 0 5px 21px!important;color:#d6d6d6!important;font-size:12px!important}.class-info__features li:before{content:'◆'!important;position:absolute!important;left:1px!important;color:#ff5b1e!important;text-shadow:0 0 7px #e32f0c!important}
@media(max-width:1100px){.class-stage{grid-template-columns:255px 1fr!important}.class-info{grid-column:1/-1!important;min-height:auto!important}.class-hero__img{max-height:470px!important}}
@media(max-width:760px){.class-sec__title{font-size:28px!important}.class-stage{grid-template-columns:1fr!important;padding:14px!important}.class-list{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important}.class-tab{width:100%!important}.class-hero{min-height:420px!important}.class-hero>div[data-bind="classes-hero"]{height:430px!important}.class-hero__img{max-height:420px!important}.class-hero__glow{width:360px!important;height:360px!important}.class-info{grid-column:auto!important}}
@media(max-width:500px){.class-list{grid-template-columns:1fr!important}.class-tab{height:58px!important}.class-sec__title{font-size:24px!important}.class-hero{min-height:370px!important}.class-hero>div[data-bind="classes-hero"]{height:380px!important}.class-hero__img{max-height:370px!important}.class-hero__glow{width:310px!important;height:310px!important}}
/* =========================================================
   MU HUNG PHONG CLASS V8 — 1:1 REFERENCE COMPOSITION
   ========================================================= */
.class-sec{padding:18px 0 70px!important;background:#050505!important;overflow:hidden!important}
.class-sec .wrap{width:min(1320px,calc(100% - 32px))!important;max-width:1320px!important}
.class-sec__ornament{margin:0 auto -1px!important;position:relative!important;z-index:6!important}
.class-sec__badge{min-width:210px!important;padding:6px 30px!important;clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%)!important;background:linear-gradient(#64230f,#2b0c06)!important;border:0!important;color:#f6d999!important;font:700 15px Georgia,serif!important;text-transform:uppercase!important;letter-spacing:.05em!important}
.class-sec__title{margin:0 auto 12px!important;font:700 32px/1.05 Georgia,'Times New Roman',serif!important;color:#f0c56e!important;text-shadow:0 2px 2px #000,0 0 12px rgba(213,83,20,.25)!important}
.class-stage{position:relative!important;display:grid!important;grid-template-columns:265px minmax(510px,1fr) 300px!important;align-items:center!important;gap:28px!important;min-height:510px!important;padding:18px 24px 24px!important;border:1px solid #665b4c!important;outline:1px solid #171717!important;outline-offset:-7px!important;background:radial-gradient(circle at 51% 52%,rgba(25,54,75,.20),transparent 33%),linear-gradient(90deg,#080808 0,#111 50%,#080808 100%)!important;box-shadow:0 0 0 3px #151515,0 0 0 4px #45423c,inset 0 0 40px #000!important;overflow:visible!important}
.class-list{display:flex!important;flex-direction:column!important;align-self:center!important;width:265px!important;gap:6px!important}
.class-tab{position:relative!important;display:block!important;width:265px!important;height:59px!important;padding:0!important;overflow:hidden!important;clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%)!important;border:1px solid #4b4740!important;border-radius:0!important;background:#080808!important;box-shadow:none!important;transform:none!important}
.class-tab__portrait{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:#090909!important;overflow:hidden!important}
.class-tab__portrait img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:left 22%!important;transform:scale(1.01)!important;filter:grayscale(1) brightness(.52) contrast(1.18)!important;transition:.25s ease!important}
.class-tab__portrait:after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(0,0,0,.02) 0,rgba(0,0,0,.04) 34%,rgba(4,4,4,.72) 66%,#070707 100%)!important;z-index:2!important}
.class-tab__portrait b{display:none!important}.class-tab__copy{position:absolute!important;z-index:4!important;left:112px!important;right:32px!important;top:50%!important;transform:translateY(-50%)!important;display:block!important;text-align:left!important;pointer-events:none!important}.class-tab__name{display:block!important;font:700 16px/.98 Georgia,'Times New Roman',serif!important;color:#e8e8e8!important;text-transform:uppercase!important;text-shadow:0 2px 3px #000!important;letter-spacing:0!important}.class-tab__copy small{display:none!important}.class-tab__arrow{display:block!important;position:absolute!important;z-index:6!important;right:17px!important;top:50%!important;transform:translateY(-52%)!important;color:#ddd!important;font:400 28px/1 Georgia,serif!important}.class-tab:after{display:none!important}.class-tab:before{content:""!important;position:absolute!important;z-index:7!important;inset:0!important;width:auto!important;background:none!important;border:0!important;pointer-events:none!important}
.class-tab:hover,.class-tab.is-on{border-color:#ff9b31!important;background:#0a0807!important;box-shadow:0 0 13px rgba(255,72,13,.65),inset 0 0 22px rgba(255,56,8,.17)!important}.class-tab.is-on:before{border:1px solid #ffb13e!important;box-shadow:inset 0 0 16px rgba(255,74,10,.12)!important}.class-tab:hover .class-tab__portrait img,.class-tab.is-on .class-tab__portrait img{filter:grayscale(0) brightness(.95) contrast(1.12) saturate(1.12)!important;transform:scale(1.04)!important}.class-tab.is-on .class-tab__name{color:#ffe3a5!important;text-shadow:0 0 7px rgba(255,112,30,.7),0 2px 2px #000!important}.class-tab.is-on .class-tab__arrow{color:#fff1c8!important;text-shadow:0 0 7px #ff5d16!important}
.class-hero{position:relative!important;min-height:465px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;background:none!important}.class-hero__glow{position:absolute!important;left:50%!important;bottom:17px!important;transform:translateX(-50%)!important;width:440px!important;height:440px!important;border-radius:50%!important;border:2px solid rgba(46,102,139,.30)!important;background:radial-gradient(circle,rgba(21,59,82,.16) 0,rgba(11,30,44,.08) 58%,transparent 70%)!important;box-shadow:0 0 0 9px rgba(26,66,90,.035),inset 0 0 45px rgba(35,111,157,.11)!important}.class-hero>div[data-bind="classes-hero"]{position:relative!important;z-index:2!important;width:100%!important;height:475px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}.class-hero__img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:475px!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 22px 22px rgba(0,0,0,.78))!important;transform:none!important}
.class-info{align-self:center!important;min-height:410px!important;padding:27px 24px 22px!important;border:1px solid #5a2518!important;background:linear-gradient(180deg,rgba(30,17,15,.93),rgba(7,7,7,.98))!important;box-shadow:inset 0 0 24px rgba(88,24,10,.08)!important}.class-info__name{margin:0 0 14px!important;padding:0 0 15px!important;border-bottom:1px solid #6a4a2d!important;font:700 27px/1.05 Georgia,'Times New Roman',serif!important;text-align:center!important;color:#efca75!important;text-transform:uppercase!important;letter-spacing:.025em!important}.class-info__name:after{content:'◆'!important;display:block!important;margin:-8px auto -23px!important;width:24px!important;color:#ef3c17!important;font-size:14px!important;text-shadow:0 0 6px #df2e0e!important;background:#160d09!important}.class-info__desc{margin:20px 0 12px!important;font:400 16px/1.48 Georgia,'Times New Roman',serif!important;color:#e7e1d8!important;text-align:left!important}.class-info__features{margin-top:12px!important;border:1px solid #5a2518!important;background:rgba(7,7,7,.62)!important}.class-info__features-title{padding:8px 12px!important;border-bottom:1px solid #5a2518!important;background:linear-gradient(90deg,rgba(111,29,9,.45),transparent)!important;color:#e9bb62!important;font:700 15px Georgia,'Times New Roman',serif!important}.class-info__features ul{list-style:none!important;margin:0!important;padding:8px 12px 10px!important}.class-info__features li{position:relative!important;padding:5px 0 5px 23px!important;color:#dedbd6!important;font-size:13px!important}.class-info__features li:before{content:'◆'!important;position:absolute!important;left:1px!important;color:#ff4d19!important;text-shadow:0 0 7px #df2e0e!important}
.class-stage__footer{position:absolute!important;z-index:8!important;left:50%!important;bottom:-45px!important;transform:translateX(-50%)!important;width:520px!important;max-width:68%!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#e4b966!important;font:400 13px Georgia,'Times New Roman',serif!important;letter-spacing:.035em!important;background:linear-gradient(90deg,transparent,#170d09 13%,#25110b 50%,#170d09 87%,transparent)!important;border-top:1px solid #6b3d22!important;border-bottom:1px solid #6b3d22!important;text-shadow:0 1px 2px #000!important}.class-stage__footer:before,.class-stage__footer:after{content:'◆'!important;color:#df3d16!important;font-size:18px!important;margin:0 18px!important;text-shadow:0 0 8px #d53511!important}
@media(max-width:1100px){.class-stage{grid-template-columns:265px 1fr!important}.class-info{grid-column:1/-1!important;min-height:auto!important}.class-stage__footer{bottom:-44px!important}}
@media(max-width:760px){.class-sec .wrap{width:calc(100% - 20px)!important}.class-sec__title{font-size:27px!important}.class-stage{grid-template-columns:1fr!important;padding:14px 14px 34px!important}.class-list{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important}.class-tab{width:100%!important}.class-hero{min-height:410px!important}.class-hero>div[data-bind="classes-hero"]{height:420px!important}.class-hero__img{max-height:415px!important}.class-hero__glow{width:350px!important;height:350px!important}.class-stage__footer{width:88%!important;max-width:none!important;font-size:10px!important}}
@media(max-width:500px){.class-list{grid-template-columns:1fr!important}.class-tab{height:59px!important}.class-stage__footer{display:none!important}}
/* =========================================================
   MU HUNG PHONG CLASS V9 — USER REFERENCE MENU + STAGE
   Exact supplied class-menu artwork and supplied DK stage artwork.
   ========================================================= */
.class-sec{padding:18px 0 70px!important;background:#050505!important}
.class-sec .wrap{width:min(1420px,calc(100% - 24px))!important;max-width:1420px!important}
.class-stage{grid-template-columns:294px minmax(600px,677px) minmax(280px,320px)!important;justify-content:center!important;gap:22px!important;min-height:550px!important;padding:14px 18px 22px!important}
.class-list{width:294px!important;gap:2px!important}
.class-tab{width:294px!important;height:67px!important;clip-path:none!important;border:0!important;background:transparent!important;overflow:visible!important;box-shadow:none!important}
.class-tab__portrait{inset:0!important;width:100%!important;height:100%!important;background:transparent!important;overflow:visible!important}
.class-tab__portrait img{width:100%!important;height:100%!important;object-fit:fill!important;object-position:center!important;filter:none!important;transform:none!important}
.class-tab__portrait:after{display:none!important}
.class-tab__copy,.class-tab__arrow{display:none!important}
.class-tab:hover,.class-tab.is-on{border:0!important;background:transparent!important;box-shadow:0 0 14px rgba(255,74,10,.30)!important;transform:translateX(3px)!important}
.class-tab.is-on:before{display:none!important}
.class-tab:hover .class-tab__portrait img,.class-tab.is-on .class-tab__portrait img{filter:none!important;transform:none!important}
.class-hero{min-height:508px!important;width:677px!important;max-width:100%!important;overflow:hidden!important;background:#050505!important}
.class-hero__glow{display:none!important}
.class-hero>div[data-bind="classes-hero"]{width:677px!important;max-width:100%!important;height:508px!important;display:block!important}
.class-hero__img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;filter:none!important;transform:none!important}
.class-hero__ph{height:100%!important}
.class-info{min-height:430px!important;align-self:center!important}
@media(max-width:1250px){.class-stage{grid-template-columns:294px minmax(520px,1fr)!important}.class-info{grid-column:1/-1!important}.class-hero{width:100%!important}.class-hero>div[data-bind="classes-hero"]{width:100%!important}}
@media(max-width:850px){.class-stage{grid-template-columns:1fr!important}.class-list{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important}.class-tab{width:100%!important;height:auto!important;aspect-ratio:272/68!important}.class-hero{width:100%!important;min-height:0!important;aspect-ratio:677/508!important}.class-hero>div[data-bind="classes-hero"]{height:100%!important}.class-info{grid-column:auto!important}}
@media(max-width:520px){.class-list{grid-template-columns:1fr!important}.class-tab{max-width:294px!important;margin:auto!important}}

/* =========================================================
   MU HUNG PHONG CLASS V10 — BALANCED / NO OVERFLOW / CLICKABLE
   ========================================================= */
.class-sec{padding:24px 0 76px!important;overflow:hidden!important}
.class-sec .wrap{width:min(1360px,calc(100% - 32px))!important;max-width:1360px!important;margin:0 auto!important}
.class-stage{box-sizing:border-box!important;width:100%!important;max-width:1360px!important;min-height:540px!important;margin:0 auto!important;padding:18px!important;display:grid!important;grid-template-columns:minmax(220px,270px) minmax(0,1fr) minmax(250px,300px)!important;gap:18px!important;align-items:stretch!important;overflow:hidden!important}
.class-list{box-sizing:border-box!important;width:100%!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:5px!important;overflow:hidden!important}
.class-tab{box-sizing:border-box!important;width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:272/68!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;transform:none!important;cursor:pointer!important;flex:none!important}
.class-tab__portrait{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;overflow:hidden!important}
.class-tab__portrait img{display:block!important;width:100%!important;height:100%!important;object-fit:fill!important}
.class-tab:hover,.class-tab.is-on{transform:none!important;box-shadow:0 0 12px rgba(255,80,18,.48)!important}
.class-hero{box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:0!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:#050505!important}
.class-hero>div[data-bind="classes-hero"]{box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:500px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.class-hero__img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important}
.class-info{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:0!important;height:auto!important;align-self:stretch!important;margin:0!important;padding:24px 20px!important;overflow:hidden!important}
.class-info__name{font-size:clamp(21px,2vw,28px)!important;overflow-wrap:anywhere!important}
.class-info__desc{font-size:15px!important;line-height:1.5!important;overflow-wrap:anywhere!important}
.class-info__features{width:100%!important;box-sizing:border-box!important;overflow:hidden!important}
.class-info__features-title{font-size:14px!important;white-space:normal!important}
.class-info__features li{font-size:13px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
.class-stage__footer{bottom:-45px!important}
@media(max-width:1120px){
 .class-stage{grid-template-columns:240px minmax(0,1fr)!important}
 .class-info{grid-column:1/-1!important;min-height:auto!important}
 .class-hero>div[data-bind="classes-hero"]{min-height:470px!important}
}
@media(max-width:760px){
 .class-sec .wrap{width:calc(100% - 20px)!important}
 .class-stage{grid-template-columns:1fr!important;padding:12px!important;gap:12px!important;overflow:hidden!important}
 .class-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
 .class-tab{width:100%!important;max-width:100%!important}
 .class-hero{aspect-ratio:677/508!important;height:auto!important}
 .class-hero>div[data-bind="classes-hero"]{min-height:0!important;height:100%!important}
 .class-info{grid-column:auto!important;padding:20px 16px!important}
}
@media(max-width:500px){.class-list{grid-template-columns:1fr!important}.class-tab{max-width:294px!important;margin:0 auto!important}.class-stage__footer{display:none!important}}

/* ==========================================================
   MU HUNG PHONG CLASS V11 — FULL COLOR BUTTONS + ACTIVE FRAME
   ========================================================== */
.class-list{gap:7px!important;overflow:visible!important}
.class-tab{position:relative!important;height:68px!important;aspect-ratio:auto!important;border:1px solid #70431d!important;border-radius:2px!important;background:linear-gradient(90deg,#160a06 0%,#090909 72%,#050505 100%)!important;overflow:hidden!important;box-shadow:inset 0 0 0 1px rgba(255,179,66,.06),0 2px 8px rgba(0,0,0,.55)!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.class-tab__portrait{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important}
.class-tab__portrait img{display:block!important;width:48%!important;height:100%!important;object-fit:cover!important;object-position:center 28%!important;filter:saturate(1.18) contrast(1.08) brightness(.82)!important;transform:scale(1.03)!important;transition:filter .2s ease,transform .25s ease!important}
.class-tab__portrait:after{display:block!important;content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 28%,rgba(8,6,5,.78) 50%,#080706 72%,#060606 100%)!important;z-index:2!important}
.class-tab__copy{display:flex!important;position:absolute!important;z-index:5!important;left:42%!important;right:34px!important;top:0!important;bottom:0!important;transform:none!important;align-items:flex-start!important;justify-content:center!important;flex-direction:column!important;text-align:left!important;pointer-events:none!important}
.class-tab__name{display:block!important;color:#f1e7d5!important;font:700 16px/1.05 Georgia,'Times New Roman',serif!important;text-transform:uppercase!important;text-shadow:0 2px 3px #000!important;white-space:normal!important}
.class-tab__copy small{display:block!important;margin-top:4px!important;color:#a98d70!important;font:700 8px/1 Arial,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase!important}
.class-tab__arrow{display:block!important;position:absolute!important;z-index:6!important;right:14px!important;top:50%!important;transform:translateY(-52%)!important;color:#d8c7ae!important;font:400 28px/1 Georgia,serif!important;text-shadow:0 1px 2px #000!important}
.class-tab:before{display:block!important;content:""!important;position:absolute!important;z-index:7!important;inset:2px!important;border:1px solid transparent!important;border-radius:2px!important;pointer-events:none!important;transition:border-color .18s ease,box-shadow .18s ease!important}
.class-tab:hover{transform:translateX(3px)!important;border-color:#d68125!important;box-shadow:0 0 11px rgba(238,113,23,.35),inset 0 0 18px rgba(255,92,17,.08)!important}
.class-tab:hover .class-tab__portrait img{filter:saturate(1.35) contrast(1.08) brightness(1)!important;transform:scale(1.08)!important}
.class-tab.is-on{transform:translateX(4px)!important;border-color:#ffb13b!important;background:linear-gradient(90deg,#431308 0%,#170a06 66%,#090706 100%)!important;box-shadow:0 0 5px #ff9a2c,0 0 17px rgba(255,68,13,.72),inset 0 0 22px rgba(255,67,11,.18)!important}
.class-tab.is-on:before{border-color:#ffbd54!important;box-shadow:inset 0 0 12px rgba(255,83,13,.24),0 0 8px rgba(255,94,16,.45)!important}
.class-tab.is-on .class-tab__portrait img{filter:saturate(1.45) contrast(1.12) brightness(1.06)!important;transform:scale(1.09)!important}
.class-tab.is-on .class-tab__name{color:#ffe6a8!important;text-shadow:0 0 8px rgba(255,117,26,.8),0 2px 2px #000!important}
.class-tab.is-on .class-tab__arrow{color:#fff0c4!important;text-shadow:0 0 9px #ff6a18!important}
.class-hero__img{object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 12px 14px rgba(0,0,0,.65))!important}
.class-hero .is-selected-motion,.class-hero>div.is-selected-motion{animation:classPickV11 .48s ease both!important}
@keyframes classPickV11{0%{opacity:.25;transform:scale(.965)}60%{opacity:1;transform:scale(1.012)}100%{opacity:1;transform:scale(1)}}
@media(max-width:850px){.class-tab{height:auto!important;aspect-ratio:272/68!important}.class-tab__name{font-size:14px!important}.class-tab__copy small{font-size:7px!important}}

/* ===== V12 CLASS SYSTEM — balanced reference layout ===== */
.class-sec{padding:30px 0 58px!important;background:#070708!important;overflow:hidden!important}
.class-sec .wrap{width:min(1360px,calc(100% - 32px))!important;max-width:1360px!important}
.class-sec__ornament{margin-bottom:5px!important}
.class-sec__title{margin:0 0 22px!important;font-size:34px!important;line-height:1.1!important;text-align:center!important}
.class-stage{position:relative!important;width:100%!important;max-width:none!important;height:570px!important;min-height:570px!important;padding:22px 28px 30px!important;display:grid!important;grid-template-columns:270px minmax(0,1fr) 300px!important;grid-template-rows:1fr!important;gap:18px!important;align-items:stretch!important;overflow:hidden!important}
.class-list{width:270px!important;height:100%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:7px!important;overflow:visible!important;padding:0!important}
.class-tab{width:270px!important;height:62px!important;min-height:62px!important;flex:0 0 62px!important;margin:0!important;border:1px solid #4c3b2c!important;background:#090909!important;clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%)!important;transform:none!important}
.class-tab__portrait img{width:46%!important;height:100%!important;object-fit:cover!important;object-position:center 25%!important;filter:saturate(1.05) contrast(1.08) brightness(.78)!important}
.class-tab__copy{left:42%!important;right:36px!important;align-items:flex-start!important}
.class-tab__name{font-size:17px!important;line-height:.98!important;color:#eee3d4!important;font-family:Georgia,'Times New Roman',serif!important}
.class-tab__copy small{display:none!important}
.class-tab__arrow{right:17px!important;font-size:27px!important}
.class-tab:hover{transform:translateX(2px)!important;border-color:#b36a22!important}
.class-tab.is-on{transform:none!important;border-color:#ffb13b!important;background:linear-gradient(90deg,#3b1008 0%,#170907 62%,#090706 100%)!important;box-shadow:0 0 5px #ff9a2c,0 0 14px rgba(255,68,13,.65),inset 0 0 18px rgba(255,67,11,.15)!important}
.class-tab.is-on .class-tab__portrait img{filter:saturate(1.45) contrast(1.1) brightness(1.08)!important}
.class-hero{width:100%!important;height:100%!important;min-width:0!important;background:#050505!important;overflow:hidden!important;align-self:stretch!important}
.class-hero>div[data-bind="classes-hero"]{width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
.class-hero__img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;filter:none!important}
.class-info{width:300px!important;height:auto!important;min-height:0!important;max-height:100%!important;align-self:center!important;padding:22px 20px!important;overflow:hidden!important}
.class-info__name{font-size:29px!important;line-height:1.05!important;text-align:center!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
.class-info__desc{font-size:14px!important;line-height:1.55!important;margin-top:18px!important}
.class-info__features{margin-top:14px!important}
.class-info__features-title{font-size:15px!important;padding:10px 11px!important}
.class-info__features ul{padding:8px 12px!important;margin:0!important}
.class-info__features li{font-size:13px!important;line-height:1.35!important;margin:8px 0!important}
.class-stage__footer{left:50%!important;right:auto!important;bottom:-42px!important;transform:translateX(-50%)!important;width:max-content!important;max-width:70%!important;text-align:center!important;white-space:nowrap!important}
@media(max-width:1100px){.class-stage{height:auto!important;min-height:0!important;grid-template-columns:240px minmax(0,1fr)!important}.class-list,.class-tab{width:240px!important}.class-info{grid-column:1/-1!important;width:100%!important;max-width:none!important}.class-hero{min-height:450px!important}}
@media(max-width:760px){.class-stage{grid-template-columns:1fr!important;padding:14px!important}.class-list{width:100%!important;height:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.class-tab{width:100%!important}.class-hero{min-height:0!important;aspect-ratio:677/508!important}.class-info{grid-column:auto!important}.class-stage__footer{display:none!important}}
@media(max-width:500px){.class-list{grid-template-columns:1fr!important}.class-tab{max-width:300px!important;margin:auto!important}}

/* ==========================================================
   MU HUNG PHONG CLASS V13 — CLEAN / BALANCED / CLICKABLE
   ========================================================== */
.class-sec{padding:26px 0 54px!important;background:#070708!important;overflow:hidden!important}
.class-sec .wrap{width:min(1220px,calc(100% - 28px))!important;max-width:1220px!important}
.class-sec__ornament{margin-bottom:7px!important}.class-sec__badge{min-width:205px!important;height:36px!important;background:linear-gradient(180deg,#263b69,#14203e)!important;border-color:#52668c!important;color:#fff!important;font:800 14px/1 Arial,sans-serif!important;letter-spacing:.13em!important}
.class-sec__title{margin:8px 0 28px!important;color:#f3c455!important;font:800 34px/1.08 Georgia,'Times New Roman',serif!important;text-align:center!important;text-shadow:0 3px 0 #2a1508,0 0 18px rgba(237,158,45,.18)!important}
.class-stage{position:relative!important;box-sizing:border-box!important;width:100%!important;height:458px!important;min-height:458px!important;padding:14px 18px!important;display:grid!important;grid-template-columns:238px minmax(0,1fr) 278px!important;gap:22px!important;align-items:stretch!important;overflow:hidden!important;border:1px solid #4b4a47!important;outline:1px solid #171717!important;outline-offset:-7px!important;background:linear-gradient(90deg,#111212 0%,#161717 48%,#101111 100%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 38px #050505,0 12px 34px rgba(0,0,0,.5)!important}
.class-stage:before{top:10px!important;left:14px!important;right:14px!important;background:linear-gradient(90deg,transparent,#6e2515,#922413,#6e2515,transparent)!important}.class-stage:after{bottom:10px!important;left:14px!important;right:14px!important;background:linear-gradient(90deg,transparent,#6e2515,#922413,#6e2515,transparent)!important}
.class-list{box-sizing:border-box!important;width:238px!important;height:100%!important;padding:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;overflow:visible!important}
.class-tab{box-sizing:border-box!important;position:relative!important;width:222px!important;height:55px!important;min-height:55px!important;flex:0 0 55px!important;margin:0!important;padding:0!important;border:1px solid #44351f!important;border-radius:5px!important;clip-path:none!important;background:#080808!important;overflow:hidden!important;transform:none!important;box-shadow:0 2px 5px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.025)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.class-tab__portrait{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:#090909!important;overflow:hidden!important}
.class-tab__portrait img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:saturate(1.02) brightness(.84) contrast(1.06)!important;transform:scale(1)!important;transition:filter .2s ease,transform .22s ease!important}
.class-tab__portrait:after{content:""!important;display:block!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,0) 65%,rgba(0,0,0,.18))!important;pointer-events:none!important}
.class-tab__copy,.class-tab__arrow,.class-tab:after{display:none!important}
.class-tab:before{content:""!important;display:block!important;position:absolute!important;z-index:4!important;inset:0!important;border:1px solid transparent!important;border-radius:5px!important;pointer-events:none!important}
.class-tab:hover{transform:translateX(3px)!important;border-color:#a86523!important;box-shadow:0 0 11px rgba(216,112,25,.28)!important}.class-tab:hover .class-tab__portrait img{filter:saturate(1.15) brightness(.98) contrast(1.07)!important;transform:scale(1.025)!important}
.class-tab.is-on{transform:translateX(3px)!important;border-color:#f1c344!important;box-shadow:0 0 4px #ffbf31,0 0 14px rgba(255,74,15,.6),inset 0 0 16px rgba(255,65,12,.14)!important}.class-tab.is-on:before{border-color:#ffcf56!important;box-shadow:inset 0 0 10px rgba(255,79,13,.18)!important}.class-tab.is-on .class-tab__portrait img{filter:saturate(1.28) brightness(1.08) contrast(1.08)!important;transform:scale(1.03)!important}
.class-hero{position:relative!important;min-width:0!important;width:100%!important;height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;background:transparent!important}
.class-hero__glow{display:block!important;position:absolute!important;left:50%!important;top:50%!important;bottom:auto!important;width:372px!important;height:372px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;border:1px solid rgba(62,100,136,.25)!important;background:radial-gradient(circle at 50% 50%,rgba(37,67,95,.23) 0%,rgba(18,31,45,.16) 57%,rgba(0,0,0,0) 72%)!important;box-shadow:inset 0 0 45px rgba(48,91,130,.08)!important;pointer-events:none!important}
.class-hero>div[data-bind="classes-hero"]{position:relative!important;z-index:2!important;width:100%!important;height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
.class-hero__img{display:block!important;width:auto!important;height:390px!important;max-width:98%!important;max-height:98%!important;object-fit:contain!important;object-position:center center!important;filter:drop-shadow(0 18px 14px rgba(0,0,0,.58))!important;transform-origin:center bottom!important}
.class-info{box-sizing:border-box!important;width:278px!important;height:246px!important;min-height:246px!important;max-height:none!important;align-self:center!important;padding:22px 20px!important;overflow:hidden!important;border:1px solid #4a2a1c!important;background:linear-gradient(180deg,rgba(18,18,18,.95),rgba(10,10,10,.95))!important;box-shadow:inset 0 0 26px rgba(107,31,12,.05)!important}
.class-info__name{margin:0 0 14px!important;padding:0 0 13px!important;border-bottom:1px solid #4b3b22!important;color:#f3c24e!important;font:800 22px/1.08 Arial,sans-serif!important;letter-spacing:.025em!important;text-align:center!important;white-space:normal!important;word-break:normal!important}
.class-info__desc{margin:0!important;color:#e8e8e8!important;font:400 15px/1.55 Arial,sans-serif!important;text-align:left!important}.class-info__features{display:none!important}.class-stage__footer{display:none!important}
@keyframes classPickV13{0%{opacity:.25;transform:scale(.97)}55%{opacity:1;transform:scale(1.015)}100%{opacity:1;transform:scale(1)}}.class-hero .is-selected-motion,.class-hero>div.is-selected-motion{animation:classPickV13 .42s ease both!important}
@media(max-width:1000px){.class-stage{height:auto!important;min-height:0!important;grid-template-columns:220px minmax(0,1fr)!important}.class-list{width:220px!important}.class-tab{width:210px!important}.class-info{grid-column:1/-1!important;width:100%!important;height:auto!important;min-height:0!important}.class-hero{min-height:410px!important}}
@media(max-width:700px){.class-sec .wrap{width:calc(100% - 18px)!important}.class-stage{grid-template-columns:1fr!important;padding:14px!important}.class-list{width:100%!important;height:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.class-tab{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:272/68!important}.class-hero{min-height:390px!important}.class-hero__img{height:370px!important}.class-info{grid-column:auto!important}.class-sec__title{font-size:28px!important}}
@media(max-width:460px){.class-list{grid-template-columns:1fr!important}.class-tab{max-width:272px!important;margin:auto!important}.class-hero{min-height:340px!important}.class-hero__img{height:320px!important}}

/* =========================================================
   MU HUNG PHONG CLASS V14 - MAGIC RING + PLATFORM STAGE
   Stage/effects are CSS only. Character remains one PNG layer.
   ========================================================= */
.class-stage{grid-template-columns:265px minmax(500px,1fr) 315px!important;gap:20px!important;align-items:center!important;min-height:560px!important;padding:18px 22px 28px!important;overflow:hidden!important}
.class-list{align-self:center!important;z-index:5!important}
.class-hero{position:relative!important;min-height:520px!important;height:520px!important;overflow:visible!important;isolation:isolate!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;background:radial-gradient(circle at 50% 48%,rgba(17,73,111,.18),transparent 48%)!important}
.class-hero__glow{display:block!important;position:absolute!important;z-index:0!important;left:50%!important;top:47%!important;bottom:auto!important;width:430px!important;height:430px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;border:2px solid rgba(39,137,202,.48)!important;background:radial-gradient(circle,rgba(13,45,68,.04) 0 48%,rgba(22,118,179,.13) 60%,rgba(0,0,0,0) 72%)!important;box-shadow:0 0 0 8px rgba(27,99,146,.06),0 0 35px rgba(28,145,214,.20),inset 0 0 45px rgba(38,132,190,.13)!important}
.class-hero__glow:before{content:"";position:absolute;inset:24px;border-radius:50%;border:1px solid rgba(66,164,224,.22);box-shadow:inset 0 0 30px rgba(31,126,186,.11)}
.class-hero__glow:after{content:"";position:absolute;left:50%;bottom:-57px;width:540px;height:126px;transform:translateX(-50%);border-radius:50%;border:2px solid rgba(65,174,226,.70);background:radial-gradient(ellipse at center,rgba(40,123,164,.28) 0%,rgba(13,48,68,.40) 34%,rgba(7,15,21,.96) 67%,rgba(2,4,6,.98) 100%);box-shadow:0 -4px 18px rgba(48,177,234,.32),0 0 0 7px rgba(82,95,94,.25),0 12px 24px rgba(0,0,0,.85),inset 0 8px 18px rgba(67,185,232,.20),inset 0 -12px 24px rgba(0,0,0,.85)}
.class-hero:before{content:""!important;display:block!important;position:absolute!important;z-index:1!important;left:50%!important;bottom:20px!important;width:500px!important;height:72px!important;transform:translateX(-50%)!important;border-radius:50%!important;border:1px solid rgba(210,154,72,.50)!important;background:radial-gradient(ellipse at center,rgba(42,137,181,.22) 0%,rgba(18,72,100,.28) 36%,rgba(11,17,21,.96) 68%,rgba(0,0,0,.98) 100%)!important;box-shadow:0 0 20px rgba(50,174,226,.28),0 5px 0 rgba(116,73,34,.75),0 8px 0 rgba(24,17,12,.95),0 13px 20px rgba(0,0,0,.8),inset 0 3px 8px rgba(100,207,244,.28)!important}
.class-hero:after{content:"";position:absolute;z-index:1;left:50%;bottom:31px;width:455px;height:48px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(71,187,232,.58);background:repeating-radial-gradient(ellipse at center,rgba(65,171,211,.11) 0 2px,rgba(0,0,0,0) 3px 15px);box-shadow:inset 0 0 18px rgba(49,167,219,.20)}
.class-hero>div[data-bind="classes-hero"]{position:relative!important;z-index:3!important;width:100%!important;height:520px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow:visible!important;padding-bottom:42px!important}
.class-hero>div[data-bind="classes-hero"]:before{content:""!important;display:block!important;position:absolute!important;z-index:0!important;left:50%!important;bottom:65px!important;width:470px!important;height:250px!important;transform:translateX(-50%)!important;background:radial-gradient(ellipse at center bottom,rgba(50,181,235,.30),rgba(20,93,137,.15) 38%,transparent 72%)!important;filter:blur(2px)!important;pointer-events:none!important}
.class-hero__stage-art{display:none!important}
.class-hero__img{position:relative!important;z-index:4!important;display:block!important;width:auto!important;height:auto!important;max-width:96%!important;max-height:490px!important;object-fit:contain!important;object-position:center bottom!important;transform:none!important;filter:drop-shadow(0 24px 22px rgba(0,0,0,.82)) drop-shadow(0 0 13px rgba(229,63,18,.20))!important}
.class-info{align-self:center!important;max-width:none!important;overflow:hidden!important}
@media(max-width:1100px){.class-stage{grid-template-columns:250px minmax(430px,1fr)!important}.class-info{grid-column:1/-1!important}.class-hero{height:500px!important;min-height:500px!important}.class-hero>div[data-bind="classes-hero"]{height:500px!important}.class-hero__img{max-height:465px!important}}
@media(max-width:760px){.class-stage{grid-template-columns:1fr!important}.class-hero{height:440px!important;min-height:440px!important}.class-hero>div[data-bind="classes-hero"]{height:440px!important}.class-hero__img{max-height:405px!important}.class-hero__glow{width:350px!important;height:350px!important}.class-hero__glow:after{width:420px!important}.class-hero:before{width:390px!important}.class-hero:after{width:350px!important}}

/* ===== V16 CLASS STAGE — FORCE NEW MAGIC RING + PLATFORM ===== */
.class-hero{background:radial-gradient(ellipse at 50% 88%,rgba(0,136,210,.20),transparent 42%),linear-gradient(180deg,rgba(2,6,10,.08),rgba(0,0,0,.18))!important;overflow:hidden!important}
.class-hero__glow{width:440px!important;height:440px!important;top:45%!important;border:3px solid rgba(32,166,236,.72)!important;background:radial-gradient(circle,transparent 0 48%,rgba(11,101,161,.10) 49% 56%,transparent 57%),repeating-conic-gradient(from 0deg,rgba(48,170,232,.22) 0 1deg,transparent 1deg 12deg)!important;box-shadow:0 0 12px #1aa7ef,0 0 44px rgba(0,151,231,.45),inset 0 0 38px rgba(0,133,207,.28)!important;opacity:.92!important}
.class-hero__glow:before{inset:28px!important;border:2px solid rgba(81,190,241,.48)!important;box-shadow:0 0 20px rgba(29,169,238,.24),inset 0 0 32px rgba(17,122,186,.25)!important;background:repeating-conic-gradient(from 22deg,rgba(82,188,238,.12) 0 2deg,transparent 2deg 18deg)!important}
.class-hero__glow:after{width:530px!important;height:118px!important;bottom:-74px!important;border:2px solid #35c4ff!important;background:radial-gradient(ellipse at center,rgba(42,184,235,.42) 0%,rgba(15,93,137,.38) 31%,rgba(8,25,36,.94) 62%,#020304 78%)!important;box-shadow:0 0 14px #20b8ff,0 0 34px rgba(18,171,237,.5),0 8px 0 #5a4935,0 12px 0 #17110d,0 20px 26px rgba(0,0,0,.9),inset 0 5px 18px rgba(107,220,255,.35)!important}
.class-hero:before{bottom:19px!important;width:540px!important;height:92px!important;border:2px solid rgba(207,154,77,.82)!important;background:radial-gradient(ellipse at center,rgba(50,175,223,.35) 0 22%,rgba(20,91,128,.36) 38%,rgba(13,22,28,.96) 66%,#030405 78%)!important;box-shadow:0 0 0 2px #1d1711,0 0 0 5px #6e5434,0 0 24px rgba(29,184,247,.55),0 13px 24px rgba(0,0,0,.9),inset 0 0 24px rgba(54,194,246,.3)!important}
.class-hero:after{bottom:37px!important;width:485px!important;height:56px!important;border:2px solid rgba(61,199,255,.86)!important;background:repeating-radial-gradient(ellipse at center,rgba(75,196,238,.18) 0 2px,transparent 3px 17px),repeating-conic-gradient(from 8deg,rgba(101,201,238,.12) 0 1deg,transparent 1deg 15deg)!important;box-shadow:0 0 16px rgba(41,192,249,.55),inset 0 0 20px rgba(38,166,217,.34)!important}
.class-hero>div[data-bind="classes-hero"]:before{bottom:72px!important;width:520px!important;height:285px!important;background:radial-gradient(ellipse at center bottom,rgba(31,183,246,.38),rgba(16,105,158,.18) 38%,transparent 70%)!important;filter:blur(5px)!important}
.class-hero__img{max-height:475px!important;margin-bottom:13px!important;filter:drop-shadow(0 24px 20px rgba(0,0,0,.9)) drop-shadow(0 0 9px rgba(255,75,20,.34))!important}
\n/* ===== V17 REAL IMAGE LAYER STAGE ===== */\n.class-hero{position:relative!important;overflow:hidden!important;background:transparent!important;isolation:isolate!important}\n.class-hero__glow,.class-hero:before,.class-hero:after,.class-hero>div[data-bind="classes-hero"]:before{display:none!important;content:none!important}\n.class-hero>div[data-bind="classes-hero"]{position:relative!important;width:100%!important;height:520px!important;padding:0!important;display:block!important;overflow:hidden!important}\n.class-hero__stage{position:absolute!important;left:50%!important;top:50%!important;width:100%!important;height:100%!important;transform:translate(-50%,-50%)!important;object-fit:contain!important;pointer-events:none!important;user-select:none!important}\n.class-hero__stage--back{z-index:1!important;opacity:1!important}\n.class-hero__stage--floor{z-index:3!important;opacity:1!important}\n.class-hero__img{position:absolute!important;z-index:2!important;left:50%!important;bottom:54px!important;transform:translateX(-50%)!important;width:auto!important;height:auto!important;max-width:78%!important;max-height:455px!important;margin:0!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 20px 18px rgba(0,0,0,.88)) drop-shadow(0 0 9px rgba(255,76,20,.24))!important}\n.class-hero__ph{position:absolute;z-index:4;inset:0;align-items:center;justify-content:center;color:#e6b44c;font-weight:800}\n@media(max-width:1100px){.class-hero>div[data-bind="classes-hero"]{height:500px!important}.class-hero__img{max-height:435px!important}}\n@media(max-width:760px){.class-hero>div[data-bind="classes-hero"]{height:440px!important}.class-hero__img{max-height:380px!important;bottom:45px!important}}\n

/* ===== V18 USER SUPPLIED CLASS STAGE ===== */
/* One shared transparent stage image. Character changes independently. */
.class-hero{position:relative!important;overflow:visible!important;background:transparent!important;isolation:isolate!important}
.class-hero__glow,.class-hero:before,.class-hero:after,.class-hero>div[data-bind="classes-hero"]:before,.class-hero>div[data-bind="classes-hero"]:after{display:none!important;content:none!important}
.class-hero>div[data-bind="classes-hero"]{position:relative!important;width:100%!important;height:610px!important;display:block!important;overflow:visible!important;animation:none!important}
.class-hero__stage{position:absolute!important;z-index:1!important;left:50%!important;bottom:0!important;top:auto!important;width:112%!important;height:auto!important;max-width:none!important;transform:translateX(-50%)!important;object-fit:contain!important;object-position:center bottom!important;opacity:1!important;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))!important;pointer-events:none!important;user-select:none!important}
.class-hero__stage--back,.class-hero__stage--floor{display:none!important}
.class-hero__stage--single{display:block!important}
.class-hero__img{position:absolute!important;z-index:2!important;left:50%!important;bottom:68px!important;transform:translateX(-50%)!important;width:auto!important;height:auto!important;max-width:68%!important;max-height:520px!important;margin:0!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 24px 22px rgba(0,0,0,.88)) drop-shadow(0 0 14px rgba(54,180,255,.18))!important;animation:none!important}
.class-hero__ph{z-index:3!important}
@media(max-width:1100px){.class-hero>div[data-bind="classes-hero"]{height:540px!important}.class-hero__stage{width:116%!important}.class-hero__img{bottom:60px!important;max-height:455px!important;max-width:70%!important}}
@media(max-width:760px){.class-hero>div[data-bind="classes-hero"]{height:430px!important}.class-hero__stage{width:124%!important}.class-hero__img{bottom:48px!important;max-height:360px!important;max-width:72%!important}}

/* ===== V19 FULL FRAME CLASS STAGE ===== */
/* Enlarge the supplied stage and character so the center panel feels full and premium. */
.class-stage{grid-template-columns:245px minmax(560px,1fr) 290px!important;gap:14px!important;min-height:610px!important;padding:14px 16px 20px!important}
.class-hero{min-height:580px!important;height:580px!important;overflow:hidden!important}
.class-hero>div[data-bind="classes-hero"]{width:100%!important;height:580px!important;overflow:hidden!important}
.class-hero__stage{left:50%!important;bottom:-18px!important;width:138%!important;max-width:none!important;height:auto!important;transform:translateX(-50%)!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 18px 28px rgba(0,0,0,.58)) saturate(1.08) contrast(1.04)!important}
.class-hero__img{left:50%!important;bottom:58px!important;width:auto!important;height:auto!important;max-width:88%!important;max-height:555px!important;transform:translateX(-50%)!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 26px 20px rgba(0,0,0,.92)) drop-shadow(0 0 16px rgba(61,183,255,.22))!important}
.class-info{width:290px!important}
@media(max-width:1100px){.class-stage{grid-template-columns:230px minmax(0,1fr)!important}.class-info{grid-column:1/-1!important;width:100%!important}.class-hero{height:540px!important;min-height:540px!important}.class-hero>div[data-bind="classes-hero"]{height:540px!important}.class-hero__stage{width:135%!important;bottom:-15px!important}.class-hero__img{max-width:86%!important;max-height:510px!important;bottom:54px!important}}
@media(max-width:760px){.class-stage{grid-template-columns:1fr!important}.class-hero{height:450px!important;min-height:450px!important}.class-hero>div[data-bind="classes-hero"]{height:450px!important}.class-hero__stage{width:142%!important;bottom:-10px!important}.class-hero__img{max-width:86%!important;max-height:420px!important;bottom:45px!important}}

/* ===== V20 NEWS CENTER ===== */
.news-box{max-width:1120px;margin:0 auto!important}.news-box__head{gap:18px!important;align-items:center!important}.news-tabs{display:flex!important;flex-wrap:wrap!important;gap:7px!important}.news-tabs button{min-width:105px!important;padding:9px 15px!important;border-radius:4px!important}.news-list__summary{display:block;margin-top:4px;color:#9f9b91;font-size:12px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.simple-article{max-width:1000px;margin:0 auto;padding:130px 20px 70px;min-height:75vh}.simple-article__card{padding:38px 44px;background:linear-gradient(180deg,rgba(18,16,14,.97),rgba(8,8,8,.98));border:1px solid rgba(211,165,74,.35);box-shadow:0 20px 55px rgba(0,0,0,.45)}.article-back{display:inline-block;margin-bottom:18px;color:#d9b55e;font-weight:700}.simple-article__meta{display:flex;gap:14px;color:#b8954b;font-size:13px;text-transform:uppercase}.simple-article__meta span{border:1px solid rgba(216,171,74,.45);padding:4px 9px}.simple-article h1{margin:15px 0 12px;color:#f0d48b;font-family:'Roboto Slab',serif;font-size:36px;line-height:1.25}.simple-article__summary{font-size:17px;color:#c7c2b8;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:22px}.simple-article__content{color:#ddd7ca;font-size:16px;line-height:1.8}.simple-article__content h2{color:#e3bd62;margin-top:30px}.simple-article__content li{margin:7px 0}@media(max-width:700px){.simple-article{padding-top:95px}.simple-article__card{padding:24px 20px}.simple-article h1{font-size:28px}.news-tabs button{min-width:auto!important;flex:1 1 42%!important}}

/* ===== V21 USER ICONS + COMPACT CLASS (2026-09-18) ===== */
/* Feature icons: supplied transparent artwork, no decorative CSS replacement. */
.feat__ico{width:92px!important;height:92px!important;margin:0 auto 10px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.feat__ico img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))!important}
.side-dock__ico{width:62px!important;height:62px!important;flex:0 0 62px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.side-dock__ico img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))!important}

/* Compact class system: same content/functionality, reduced overall footprint. */
.class-sec{padding:18px 0 42px!important}
.class-sec .wrap{width:min(1120px,calc(100% - 28px))!important;max-width:1120px!important}
.class-sec__title{margin:6px 0 16px!important;font-size:28px!important}
.class-stage{width:100%!important;min-height:0!important;height:430px!important;padding:12px 14px!important;grid-template-columns:205px minmax(0,1fr) 245px!important;gap:12px!important;overflow:hidden!important}
.class-list{width:205px!important;height:100%!important;gap:4px!important;justify-content:center!important}
.class-tab{width:198px!important;height:50px!important;min-height:50px!important;flex:0 0 50px!important}
.class-hero{height:404px!important;min-height:404px!important;overflow:hidden!important}
.class-hero>div[data-bind="classes-hero"]{height:404px!important;min-height:0!important;overflow:hidden!important}
.class-hero__stage{width:126%!important;bottom:-12px!important}
.class-hero__img{max-width:80%!important;max-height:375px!important;bottom:38px!important}
.class-info{width:245px!important;height:auto!important;min-height:220px!important;padding:17px 15px!important;align-self:center!important}
.class-info__name{font-size:19px!important;margin-bottom:10px!important;padding-bottom:10px!important}
.class-info__desc{font-size:13px!important;line-height:1.45!important}
@media(max-width:1000px){.class-stage{height:auto!important;grid-template-columns:205px minmax(0,1fr)!important}.class-info{grid-column:1/-1!important;width:100%!important}.class-hero{height:400px!important;min-height:400px!important}.class-hero>div[data-bind="classes-hero"]{height:400px!important}}
@media(max-width:700px){.feat__ico{width:78px!important;height:78px!important}.side-dock__ico{width:48px!important;height:48px!important;flex-basis:48px!important}.class-stage{grid-template-columns:1fr!important;height:auto!important}.class-list{width:100%!important;height:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important}.class-tab{width:100%!important}.class-hero{height:390px!important;min-height:390px!important}.class-hero>div[data-bind="classes-hero"]{height:390px!important}.class-info{grid-column:auto!important}}