/* ===== VFRO Wiki — custom theme =====
   Palette: crimson red + amber gold, matching the VFRO logo
   (red knight armor + gold "VFRO" text). Dark-first.
*/

:root {
  --vfro-gold: #f0bf42;         /* warm vibrant gold (between bright & muted) */
  --vfro-gold-soft: #ffd266;    /* sunny gold-cream */
  --vfro-red: #d63a44;          /* fresh cherry red — sống động không chói */
  --vfro-red-soft: #e85a64;     /* lively coral */
  --vfro-red-deep: #5a1922;     /* deep crimson background */
  --vfro-orange: #f08542;       /* warm fire accent */
  --vfro-bg-panel: rgba(255, 255, 255, 0.04);
  --vfro-border: rgba(240, 191, 66, 0.28);
}

/* ===== Typography — slightly larger than Material default =====
   Body: 0.8rem → 0.85rem (~13.6px). Tables were 0.64rem (~10.2px, quá nhỏ),
   nâng lên ~13px để dễ đọc mà không phá layout.
*/
.md-typeset {
  font-size: 0.85rem;
  line-height: 1.65;
}
.md-typeset table:not([class]) {
  font-size: 0.8rem;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1c1213;
  --md-default-bg-color--light: #261a1c;
  --md-primary-fg-color: #2a1417;
  --md-primary-fg-color--light: var(--vfro-red);
  --md-primary-fg-color--dark: #1a0c0e;
  --md-accent-fg-color: var(--vfro-gold);
  --md-typeset-a-color: var(--vfro-gold-soft);
}

/* ============================================================================
   Header — cherry red gradient + sweep shine animation
   Material's default 2-row layout (header bar + tabs row).
   On mobile, Material auto-hides .md-tabs and shows drawer hamburger.
   ============================================================================ */
.md-header {
  background:
    linear-gradient(100deg,
      transparent 38%,
      rgba(255, 255, 255, 0.10) 48%,
      rgba(255, 240, 200, 0.18) 50%,
      rgba(255, 255, 255, 0.10) 52%,
      transparent 62%),
    linear-gradient(135deg, #2a0d12 0%, var(--vfro-red-deep) 50%, #9b2630 100%);
  background-size: 220% 100%, 100% 100%;
  background-position: -120% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  animation: vfro-header-shine 7s ease-in-out infinite;
}
@keyframes vfro-header-shine {
  0%, 12%   { background-position: -120% 0, 0 0; }
  55%, 100% { background-position: 220% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .md-header { animation: none; background-position: -120% 0, 0 0; }
}
.md-header__title { font-weight: 700; letter-spacing: 0.2px; }
.md-header__topic > .md-ellipsis { font-weight: 600; }

/* ============================================================================
   Single-row header layout — logo + hamburger + tabs + spacer + actions + CTAs
   chung 1 hàng. Mobile: tabs ẩn (Material default), chỉ còn hamburger →
   Material drawer hoạt động sạch.
   ============================================================================ */
.md-header--single .md-header__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  /* Header span full viewport — BẮT BUỘC !important vì .md-header__inner
     cũng có class .md-grid (Material rule .md-grid{max-width:61rem;margin:auto}
     có cùng specificity với selector này, nên không có !important sẽ phụ thuộc
     thứ tự nguồn). */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
.md-header--single .md-header__spacer {
  flex: 1 1 auto;
  min-width: 0;
}
/* Desktop (>= 76.25em): tabs INLINE trong header, hide title, show big logo.
   Mobile: KHÔNG override gì — Material default ẩn .md-tabs, show hamburger,
   header chỉ còn logo + hamburger + actions = layout chuẩn Material. */
@media (min-width: 76.25em) {
  .md-header--single { min-height: 4.4rem; }

  /* Title bị thay bằng tabs trong layout single-row → ẩn để tránh chiếm chỗ */
  .md-header--single .md-header__title { display: none; }

  /* Tabs INLINE trong header (không phải full-width row riêng) */
  .md-header--single .md-tabs {
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    display: flex;
    align-self: stretch;
    align-items: stretch;
    flex-shrink: 0;
    width: auto;
    margin: 0;
  }
  .md-header--single .md-tabs > .md-tabs__inner {
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
  }
  .md-header--single .md-tabs__list {
    align-items: stretch;
    height: 100%;
  }
  .md-header--single .md-tabs__item {
    height: auto;
    display: flex;
    align-items: center;
  }
  .md-header--single .md-tabs__link--mega {
    height: 100%;
    margin-top: 0;          /* Material default = margin-top:0.8rem cho 2-row */
    padding: 0 0.85rem;
  }
  /* Active tab underline cần re-position cho layout inline */
  .md-header--single .md-tabs__item--active > .md-tabs__link--mega::after {
    bottom: 0.5rem;
  }

  /* Logo to ở desktop */
  .md-header--single .md-logo {
    position: static;
    display: flex;
    align-items: center;
    top: auto; left: auto; right: auto;
    margin: 0;
    padding: 0.15rem 0.4rem;
    flex-shrink: 0;
  }
  .md-header--single .md-header__button.md-logo img,
  .md-header--single .md-header__button.md-logo svg {
    height: 3.6rem;
    width: auto;
    max-width: none;
    filter:
      drop-shadow(0 0 12px rgba(240, 191, 66, 0.55))
      drop-shadow(0 0 2px rgba(0, 0, 0, 0.65));
  }
}

/* Mobile: header gọn lại, tabs ẩn (Material default — không cần override) */
@media (max-width: 76.1875em) {
  .md-header--single { min-height: 3rem; }
  .md-header--single .md-header__inner { padding: 0.3rem 0.5rem; gap: 0.3rem; }
  .md-header--single .md-logo {
    position: static;
    display: flex;
    align-items: center;
    top: auto; left: auto; right: auto;
    margin: 0;
    padding: 0.15rem 0.3rem;
    flex-shrink: 0;
  }
  .md-header--single .md-header__button.md-logo img,
  .md-header--single .md-header__button.md-logo svg {
    height: 2.4rem;
    width: auto;
    max-width: none;
  }
  /* Material đã ẩn .md-tabs ở mobile breakpoint (76.234375em) — không cần thêm */
}

/* ============================================================================
   Tabs row — slightly larger labels; allow mega-menu dropdown to overflow
   ============================================================================ */
.md-tabs {
  background: rgba(30, 18, 20, 0.55);
  backdrop-filter: blur(6px);
  /* Mega dropdown phải tràn ra ngoài tabs row, override Material's overflow:auto */
  overflow: visible;
}
.md-tabs .md-tabs__inner,
.md-tabs__list {
  overflow: visible;
  contain: none;
}
.md-tabs__list {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  position: relative;
}
.md-tabs__link {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 1;
}

/* ============================================================================
   Mega-menu dropdown — hover/focus opens panel below tab
   ============================================================================ */
.md-tabs__item--mega { position: relative; }
.md-tabs__link--mega {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.md-tabs__chevron {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 160ms ease, opacity 160ms ease;
}
.md-tabs__item--mega:hover .md-tabs__chevron,
.md-tabs__item--mega:focus-within .md-tabs__chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.md-tabs__item--active > .md-tabs__link--mega {
  color: var(--vfro-gold);
  position: relative;
}
.md-tabs__item--active > .md-tabs__link--mega::after {
  content: "";
  position: absolute;
  left: 0.6rem; right: 0.6rem; bottom: 0.35rem;
  height: 2px;
  background: var(--vfro-gold);
  border-radius: 1px;
}

/* Dropdown panel — ẩn mặc định, hover/focus mở */
.md-mega {
  position: absolute;
  top: 100%; left: 0;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  pointer-events: none;
  /* "Vùng cầu" 6px nối tab xuống panel để mouse di chuyển không mất hover */
  padding-top: 6px;
  margin-top: -6px;
}
.md-tabs__item--mega:hover > .md-mega,
.md-tabs__item--mega:focus-within > .md-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.md-mega__inner {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 auto;
  /* width (không phải max-width) để grid `auto-fit` đủ chỗ xếp ngang các col;
     fallback co theo viewport - 2rem lề. .md-tabs chỉ hiện ≥76.25em (Material
     default), nên width này không leak xuống mobile. */
  width: min(56rem, calc(100vw - 2rem));
  padding: 1rem 1.4rem 1.2rem;
  background: linear-gradient(180deg,
    rgba(38, 22, 24, 0.98) 0%,
    rgba(28, 16, 18, 0.98) 100%);
  border: 1px solid var(--vfro-border);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
[data-md-color-scheme="default"] .md-mega__inner {
  background: linear-gradient(180deg,
    rgba(255, 248, 240, 0.99) 0%,
    rgba(250, 238, 222, 0.99) 100%);
  border-color: rgba(214, 58, 68, 0.25);
}
/* Section parent link — đầu dropdown, thụt trái + bold hơn item con */
.md-mega__heading {
  display: block;
  margin: 0 -0.4rem 0.15rem;
  padding: 0.35rem 0.5rem 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--vfro-gold);
  text-decoration: none;
  border-radius: 0.35rem;
  border-bottom: 1px solid var(--vfro-border);
  transition: background-color 120ms ease, color 120ms ease;
}
.md-mega__heading:hover,
.md-mega__heading:focus-visible {
  background: rgba(240, 191, 66, 0.14);
  color: var(--vfro-gold);
}
.md-mega__heading--active { background: rgba(240, 191, 66, 0.1); }
[data-md-color-scheme="default"] .md-mega__heading {
  color: var(--vfro-red);
  border-bottom-color: rgba(214, 58, 68, 0.2);
}
[data-md-color-scheme="default"] .md-mega__heading:hover,
[data-md-color-scheme="default"] .md-mega__heading:focus-visible {
  background: rgba(214, 58, 68, 0.08);
  color: var(--vfro-red);
}
.md-mega__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.2rem 1.6rem;
}
.md-mega__col { min-width: 0; }
.md-mega__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--vfro-gold);
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--vfro-border);
}
[data-md-color-scheme="default"] .md-mega__title {
  color: var(--vfro-red);
  border-bottom-color: rgba(214, 58, 68, 0.2);
}
.md-mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.md-mega__item { margin: 0; }
.md-mega__link {
  display: block;
  padding: 0.32rem 0.55rem;
  border-radius: 0.3rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--md-default-fg-color);
  text-decoration: none;
  line-height: 1.35;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.md-mega__link:hover,
.md-mega__link:focus-visible {
  background: rgba(240, 191, 66, 0.12);
  color: var(--vfro-gold);
  transform: translateX(2px);
}
.md-mega__link--active {
  color: var(--vfro-gold);
  background: rgba(240, 191, 66, 0.08);
}
[data-md-color-scheme="default"] .md-mega__link:hover,
[data-md-color-scheme="default"] .md-mega__link:focus-visible {
  background: rgba(214, 58, 68, 0.08);
  color: var(--vfro-red);
}
[data-md-color-scheme="default"] .md-mega__link--active {
  color: var(--vfro-red);
  background: rgba(214, 58, 68, 0.06);
}

/* Last tab (Nhiệm vụ & Nghề) — đẩy sát phải, dropdown mở centered để không tràn */
.md-tabs__item--align-end { margin-left: auto; }
.md-tabs__item--align-end > .md-mega {
  left: 50%;
  right: auto;
  transform: translate(-50%, -6px);
}
.md-tabs__item--mega.md-tabs__item--align-end:hover > .md-mega,
.md-tabs__item--mega.md-tabs__item--align-end:focus-within > .md-mega {
  transform: translate(-50%, 0);
}
.md-tabs__item--align-end .md-mega__inner {
  width: min(64rem, calc(100vw - 2rem));
}

/* ============================================================================
   Header CTAs — Tải game (ghost) + Đăng ký (gold pill)
   Inject vào md-header__option slot (header.html override).
   Mobile: ghost ẩn dưới 600px, giữ primary làm CTA chính.
   ============================================================================ */
.md-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  margin-left: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
.md-header__cta--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
}
.md-header__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--vfro-gold-soft);
}
.md-header__cta--primary {
  color: #2a0d12;
  background: linear-gradient(135deg, var(--vfro-gold-soft), var(--vfro-gold));
  box-shadow: 0 2px 8px rgba(240, 191, 66, 0.35);
}
.md-header__cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(240, 191, 66, 0.5);
}
.md-header__cta-icon { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .md-header__cta--ghost { display: none; }
  .md-header__cta {
    padding: 0.32rem 0.7rem;
    font-size: 0.8rem;
    margin-left: 0.2rem;
  }
}

/* ============================================================================
   Compact mode cho desktop hẹp (1220-1600px) — co content header để
   tránh CTA + search overflow ra khỏi header bg đỏ.
   Material's `.md-search__inner` mặc định 34.4rem (550px) ở >=76.25em — đó
   là thủ phạm chính chiếm chỗ. Phải shrink CẢ inner lẫn form.
   ============================================================================ */
@media (min-width: 76.25em) and (max-width: 100em) {
  .md-header--single .md-header__inner {
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
  }
  .md-header--single .md-tabs__link--mega {
    padding: 0 0.5rem;
    font-size: 0.85rem;
  }
  /* Search — closed state: siết wrapper xuống 14rem để CTA + tabs vừa header.
     Material default rule `[data-md-toggle="search"]:checked ~ .md-header .md-search__inner{width:34.4rem}`
     ở specificity (0,4,0) — chỉ override CLOSED state, để Material expand 34.4rem
     khi :checked (mở dropdown kết quả) → text preview có chỗ wrap, không bị cắt. */
  [data-md-toggle="search"] ~ .md-header.md-header--single .md-header__inner .md-search__inner {
    width: 14rem !important;
    max-width: 14rem !important;
    min-width: 0 !important;
  }
  [data-md-toggle="search"] ~ .md-header.md-header--single .md-header__inner .md-search__form {
    width: 14rem !important;
    max-width: 14rem !important;
    min-width: 0 !important;
  }
  /* Open (:checked): cho phép giãn rộng để kết quả không bị clip.
     Specificity (0,5,1) > Material's (0,4,0). */
  [data-md-toggle="search"]:checked ~ .md-header.md-header--single .md-header__inner .md-search__inner {
    width: 34.4rem !important;
    max-width: 34.4rem !important;
  }
  [data-md-toggle="search"]:checked ~ .md-header.md-header--single .md-header__inner .md-search__form {
    width: 34.4rem !important;
    max-width: 34.4rem !important;
  }
  .md-header__cta {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    margin-left: 0.1rem;
  }
  .md-header__cta-icon { width: 11px; height: 11px; }
  .md-header__cta--ghost svg { display: none; }
  /* Logo nhỏ hơn */
  .md-header--single .md-header__button.md-logo img,
  .md-header--single .md-header__button.md-logo svg {
    height: 2.8rem;
  }
}


/* Drop the heavy block on the meta line ("Nhập để bắt đầu tìm kiếm"…) so
   the empty/loading state looks like part of the same panel, not a separate
   strip floating beneath the form. */
.md-search-result__meta {
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(240, 191, 66, 0.18);
  /* Default top padding clips against the form's bottom edge; push the line
     down so descenders/diacritics on "4 tài liệu liên quan" stay clear. */
  padding-top: 0.75rem;
  padding-bottom: 0.55rem;
  line-height: 1.5;
}
.md-search-result__item + .md-search-result__item {
  border-top: 1px solid rgba(240, 191, 66, 0.10);
}
.md-search-result__link {
  transition: background-color 0.12s ease;
}
.md-search-result__link:focus,
.md-search-result__link:hover {
  background-color: rgba(214, 58, 68, 0.10);
}
.md-search-result__article--document .md-search-result__title {
  font-weight: 700;
  color: var(--vfro-gold-soft);
}
[data-md-color-scheme="default"] .md-search-result__article--document .md-search-result__title {
  color: var(--vfro-red-deep);
}
.md-search-result mark {
  color: var(--vfro-gold);
  background: rgba(240, 191, 66, 0.18);
  border-radius: 3px;
  padding: 0 0.15em;
}
[data-md-color-scheme="default"] .md-search-result mark {
  color: var(--vfro-red-deep);
  background: rgba(240, 191, 66, 0.28);
}

/* Search result preview (mkdocs-material search-result-preview): plugin render
   nội dung trang trong context .md-typeset → H1/H2 nhặt phải override 2rem/1.55rem
   (line ~1773) → tràn box .md-search-result__article (overflow:hidden) → clip
   text. Thu nhỏ typography + ép wrap để text co lại trong popup. */
.md-search-result .md-typeset h1,
.md-search-result__article .md-search-result__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0 0 0.25rem;
}
.md-search-result .md-typeset h2 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.4rem 0 0.2rem;
}
.md-search-result .md-typeset h3,
.md-search-result .md-typeset h4 {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.35rem 0 0.15rem;
}
.md-search-result .md-typeset p,
.md-search-result__teaser {
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.md-search-result .md-typeset ul,
.md-search-result .md-typeset ol {
  font-size: 0.78rem;
  margin: 0.25rem 0 0.4rem 1rem;
  line-height: 1.45;
}
.md-search-result .md-typeset code,
.md-search-result .md-typeset .md-typeset__table {
  font-size: 0.75rem;
}

/* ===== Home hero ===== */
.vfro-hero {
  position: relative;
  /* Contain all internal z-index within hero so animated layers don't render
     above the sticky header / tabs when the page scrolls. */
  isolation: isolate;
  margin: -1.5rem -1.2rem 2rem;
  padding: 4.5rem 1.5rem 4rem;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(ellipse at top left, rgba(240, 191, 66, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(240, 133, 66, 0.22), transparent 60%),
    linear-gradient(160deg, #2a0d12 0%, var(--vfro-red-deep) 50%, #a83040 100%);
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}
.vfro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06) 0, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0, transparent 2px);
  background-size: 40px 40px, 60px 60px, 90px 90px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 2;  /* above slides + overlay */
}

/* ===== Hero background slideshow (3 ingame screenshots crossfading) ===== */
.vfro-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.vfro-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  /* 12 slides × 5s mỗi slide = 60s/chu kỳ. Mỗi slide visible ~5s. */
  animation: vfro-slide-fade 60s ease-in-out infinite;
  transform: scale(1.05);
}
.vfro-hero__slide:nth-child(1)  { animation-delay:  0s; }
.vfro-hero__slide:nth-child(2)  { animation-delay:  5s; }
.vfro-hero__slide:nth-child(3)  { animation-delay: 10s; }
.vfro-hero__slide:nth-child(4)  { animation-delay: 15s; }
.vfro-hero__slide:nth-child(5)  { animation-delay: 20s; }
.vfro-hero__slide:nth-child(6)  { animation-delay: 25s; }
.vfro-hero__slide:nth-child(7)  { animation-delay: 30s; }
.vfro-hero__slide:nth-child(8)  { animation-delay: 35s; }
.vfro-hero__slide:nth-child(9)  { animation-delay: 40s; }
.vfro-hero__slide:nth-child(10) { animation-delay: 45s; }
.vfro-hero__slide:nth-child(11) { animation-delay: 50s; }
.vfro-hero__slide:nth-child(12) { animation-delay: 55s; }

@keyframes vfro-slide-fade {
  /* Mỗi slide chiếm 1/12 ≈ 8.33% chu kỳ. Fade-in 1%, hold ~7%, fade-out tới 8.33%. */
  0%, 8.33%, 100% { opacity: 0;    transform: scale(1.05); }
  1%, 7.5%        { opacity: 0.45; transform: scale(1.10); }
}

/* Dark overlay to keep text legible on bright screenshots */
.vfro-hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(26, 12, 14, 0.55) 0%, rgba(26, 12, 14, 0.85) 100%),
    linear-gradient(180deg, rgba(42, 20, 23, 0.40) 0%, rgba(26, 12, 14, 0.60) 100%);
  z-index: 1;
}

/* Logo watermark on the right side of hero — gently floating with glow pulse */
.vfro-hero::after {
  content: "";
  position: absolute;
  right: -4rem;
  top: 50%;
  width: 520px;
  height: 520px;
  max-width: 55%;
  background-image: url("../assets/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 0.18;
  pointer-events: none;
  z-index: 3;
  animation:
    vfro-float 7s ease-in-out infinite,
    vfro-glow 5s ease-in-out infinite;
}

@keyframes vfro-float {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 14px)); }
}
@keyframes vfro-glow {
  0%, 100% {
    filter: drop-shadow(0 0 22px rgba(232, 185, 74, 0.30));
  }
  50% {
    filter:
      drop-shadow(0 0 40px rgba(232, 185, 74, 0.55))
      drop-shadow(0 0 80px rgba(204, 113, 120, 0.18));
  }
}

/* Hero content stays above slides, overlay, dot pattern, and watermark */
.vfro-hero > *:not(.vfro-hero__slides) {
  position: relative;
  z-index: 4;
}
.vfro-hero__eyebrow {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vfro-gold);
  background: rgba(245, 197, 66, 0.08);
  border: 1px solid var(--vfro-border);
  border-radius: 999px;
  animation: vfro-eyebrow-pulse 3.5s ease-in-out infinite;
}
@keyframes vfro-eyebrow-pulse {
  0%, 100% {
    border-color: var(--vfro-border);
    box-shadow: 0 0 0 0 rgba(232, 185, 74, 0);
  }
  50% {
    border-color: rgba(232, 185, 74, 0.55);
    box-shadow: 0 0 12px 0 rgba(232, 185, 74, 0.18);
  }
}

/* Respect users who prefer reduced motion (a11y) */
@media (prefers-reduced-motion: reduce) {
  .vfro-hero::after,
  .vfro-hero h1,
  .vfro-hero__eyebrow,
  .vfro-hero__slide {
    animation: none !important;
  }
  .vfro-hero::after {
    transform: translateY(-50%);
  }
  /* Show only the first slide statically */
  .vfro-hero__slide:first-child { opacity: 0.30; transform: scale(1.05); }
}
/* === Tiêu đề Hero — cách điệu game RO/RPG ===
   Cinzel: serif La Mã/fantasy phổ biến cho RPG (Diablo, Pillars of Eternity…).
   Layered: gradient kim loại vàng (top sáng → bottom đậm) + dark stroke + glow.
   Ornament ✦ hai bên có pulse, shimmer animation cho chữ. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&display=swap');

.vfro-hero h1 {
  font-family: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif !important;
  font-size: 7.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin: 0 0 1.2rem;
  line-height: 1.02;
  position: relative;
  isolation: isolate;
  /* Gradient kim loại vàng — sáng ở đỉnh, đậm ở chân chữ */
  background: linear-gradient(
    180deg,
    #fff5d4 0%,
    #ffe49a 22%,
    #f0bf42 50%,
    #c9892a 78%,
    #6f4410 100%
  );
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  /* Stroke đen mảnh viền ngoài chữ — nổi rõ trên carousel */
  -webkit-text-stroke: 1px rgba(50, 18, 8, 0.6);
  filter:
    drop-shadow(0 2px 0 rgba(40, 18, 8, 0.6))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 22px rgba(240, 191, 66, 0.45));
  animation: vfro-title-shimmer 6s ease-in-out infinite;
}
@keyframes vfro-title-shimmer {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 0% 60%; }
}

/* Ornament ✦ hai bên — kim cương nhỏ nhịp pulse */
.vfro-hero h1::before,
.vfro-hero h1::after {
  content: "✦";
  display: inline-block;
  font-size: 0.55em;
  margin: 0 0.55em;
  vertical-align: 0.25em;
  opacity: 0.8;
  color: var(--vfro-gold);
  -webkit-text-fill-color: var(--vfro-gold);
  -webkit-text-stroke: 0;
  background: none;
  filter: drop-shadow(0 0 10px rgba(240, 191, 66, 0.75));
  animation: vfro-ornament-pulse 4s ease-in-out infinite;
}
.vfro-hero h1::after { animation-delay: 2s; }
@keyframes vfro-ornament-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

/* Ẩn permalink anchor (¶) — sẽ phá ornament ::after */
.vfro-hero h1 .headerlink { display: none !important; }

/* Fallback nếu browser cũ không hỗ trợ background-clip: text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .vfro-hero h1 {
    color: #ffe49a !important;
    background: none;
  }
}

/* Light scheme: giữ gradient vàng (hero luôn có dark overlay phía trên carousel) */
[data-md-color-scheme="default"] .vfro-hero h1 { color: transparent !important; }
.vfro-hero p {
  max-width: 640px;
  margin: 0 auto 1.8rem;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}
/* Hero CTA — bố cục 2 hàng:
   Hàng 1 (main): Đăng ký · TẢI GAME (plaque) · Hướng dẫn tân thủ
   Hàng 2 (social): Discord · Fanpage — nhỏ hơn, có separator vàng mờ phía trên. */
.vfro-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  margin: 0 !important;
}
.vfro-hero__cta > p {
  /* Wrapper <p> mà markdown tự thêm — không break flex layout */
  display: contents;
}
.vfro-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
}
.vfro-hero__cta-row > p {
  display: contents;
}
.vfro-hero__cta-row--social {
  gap: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(240, 191, 66, 0.18);
  width: 100%;
  max-width: 26rem;
}

.vfro-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.3rem;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none !important;
  white-space: nowrap;
}
.vfro-btn--primary {
  color: #2a0a0e !important;
  background: linear-gradient(135deg, var(--vfro-gold) 0%, var(--vfro-gold-soft) 100%);
  box-shadow: 0 6px 20px rgba(245, 197, 66, 0.4);
}
.vfro-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(245, 197, 66, 0.55);
}
.vfro-btn--ghost {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.vfro-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}
/* Variant nhỏ cho social row — visual hierarchy thấp hơn 3 nút chính */
.vfro-btn--social {
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  border-radius: 8px;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Brand colors — match màu gốc của Discord / Facebook */
.vfro-btn--discord {
  color: #fff !important;
  background: #5865F2;          /* Discord Blurple */
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.30);
}
.vfro-btn--discord:hover {
  background: #4752C4;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(88, 101, 242, 0.45);
}
.vfro-btn--facebook {
  color: #fff !important;
  background: #1877F2;          /* Facebook Blue */
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.30);
}
.vfro-btn--facebook:hover {
  background: #166FE5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(24, 119, 242, 0.45);
}

/* ===== Hero Download CTA — RO-style ornate plaque =====
 * Wide hexagonal/notched plate with a metallic gold frame, deep-red marble
 * core, gold serif text, decorative crest at the top, and a small pendant
 * at the bottom. Inspired by Diablo / classic MMO login plaques but in the
 * VFRO red-gold palette.
 *
 * Layer stack (z low → high):
 *   __plate         outer hexagonal gold frame
 *   ::before        inner red-marble surface (clip-path inset)
 *   __sheen         diagonal light sweep across the marble every 3.5s
 *   __text          embossed gold "TẢI GAME" serif
 *   __crest         gold horns + ruby gem SVG above the plate
 *   __pendant       small gold accent below the plate
 * No JS, no external assets — entirely CSS + inline SVG.
 */
.vfro-dlplaque {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none !important;
  color: #ffe88a !important;
  flex: 0 0 auto;
  margin: 0 0.4rem;
  padding-top: 30px;       /* room for the crest above */
  padding-bottom: 14px;    /* room for the pendant below */
  filter: drop-shadow(0 8px 18px rgba(214, 58, 68, 0.35));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.vfro-dlplaque:hover {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 14px 26px rgba(245, 197, 66, 0.55));
}
.vfro-dlplaque:active { transform: translateY(-1px) scale(1.0); }

/* ----- Top crest: gold horn-ring with ruby gem ----- */
.vfro-dlplaque__crest {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 64px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 6px rgba(214, 58, 68, 0.5));
}
.vfro-dlplaque__crest svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Subtle gem-pulse on the central ruby <circle>. */
.vfro-dlplaque__crest svg circle:first-of-type {
  animation: vfro-plaque-gem 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes vfro-plaque-gem {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(214, 58, 68, 0.7)); }
  50%      { filter: drop-shadow(0 0 9px rgba(255, 122, 131, 0.95)); }
}

/* ----- Plate: hexagonal gold frame ----- */
.vfro-dlplaque__plate {
  position: relative;
  width: 290px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gold frame: vertical metallic gradient — bright top, dark bottom. */
  background:
    linear-gradient(180deg,
      #ffe88a 0%,
      #f0bf42 25%,
      #b88720 55%,
      #6b4d10 90%,
      #3a2b08 100%);
  /* Hex/notch shape with pointed left/right ends. */
  clip-path: polygon(
    0% 50%,
    7% 0%, 93% 0%,
    100% 50%,
    93% 100%, 7% 100%
  );
  /* Outer rim glow. */
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.55));
}

/* Inner red-marble surface drawn via ::before with a smaller hex inset
   so the gold frame remains visible as a 4-5px border. */
.vfro-dlplaque__plate::before {
  content: "";
  position: absolute;
  inset: 5px;
  background:
    /* Cracked-marble streaks (subtle, on top of the base color). */
    repeating-linear-gradient(
      48deg,
      rgba(255, 230, 200, 0.045) 0px,
      transparent 2px,
      transparent 14px,
      rgba(0, 0, 0, 0.08) 16px
    ),
    radial-gradient(ellipse 80% 90% at 50% 35%, rgba(255, 80, 80, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 110% 110% at 50% 100%, #2a0d12 0%, transparent 60%),
    linear-gradient(180deg, #b22228 0%, #6c1018 60%, #3a060c 100%);
  clip-path: polygon(
    0% 50%,
    7% 0%, 93% 0%,
    100% 50%,
    93% 100%, 7% 100%
  );
  z-index: 0;
}
/* Ridge highlight along the top edge inside the frame. */
.vfro-dlplaque__plate::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 18%,
    transparent 82%,
    rgba(0, 0, 0, 0.35) 100%);
  clip-path: polygon(
    0% 50%,
    7% 0%, 93% 0%,
    100% 50%,
    93% 100%, 7% 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ----- Diagonal shine sweep across the marble ----- */
.vfro-dlplaque__sheen {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: -20%;
  width: 35%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 230, 180, 0) 35%,
    rgba(255, 230, 180, 0.55) 50%,
    rgba(255, 230, 180, 0) 65%,
    transparent 100%
  );
  clip-path: polygon(
    0% 50%,
    7% 0%, 93% 0%,
    100% 50%,
    93% 100%, 7% 100%
  );
  z-index: 2;
  pointer-events: none;
  animation: vfro-plaque-sheen 3.5s ease-in-out infinite;
}
@keyframes vfro-plaque-sheen {
  0%        { transform: translateX(0);     opacity: 0; }
  20%       { opacity: 1; }
  60%, 100% { transform: translateX(380%);  opacity: 0; }
}

/* ----- Embossed gold serif text ----- */
.vfro-dlplaque__text {
  position: relative;
  z-index: 3;
  font-family: "Cinzel", "Trajan Pro", "Cormorant SC", "Times New Roman", serif;
  font-weight: 900;
  font-size: 1.65rem;
  letter-spacing: 0.18em;
  /* Gold gradient text via background-clip; fallback solid gold for browsers
     that don't support transparent text. */
  color: #ffd866;
  background: linear-gradient(180deg, #fff5c2 0%, #f0bf42 45%, #9a6e16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Multi-shadow for embossed depth + dark outline so it reads on red. */
  filter:
    drop-shadow(1px 1px 0 #4a2a08)
    drop-shadow(0 2px 0 #2a1604)
    drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6));
  padding: 0 0.4rem;
  transition: filter 0.18s ease;
}
.vfro-dlplaque:hover .vfro-dlplaque__text {
  filter:
    drop-shadow(1px 1px 0 #4a2a08)
    drop-shadow(0 2px 0 #2a1604)
    drop-shadow(0 0 8px rgba(255, 215, 100, 0.7));
}

/* ----- Bottom pendant: tiny gold drop accent ----- */
.vfro-dlplaque__pendant {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 14px;
  background: linear-gradient(180deg, #f0bf42 0%, #9a6e16 70%, #3a2208 100%);
  clip-path: polygon(0% 0%, 100% 0%, 80% 60%, 50% 100%, 20% 60%);
  z-index: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* Reduced motion — kill the sheen + gem pulse. */
@media (prefers-reduced-motion: reduce) {
  .vfro-dlplaque__sheen { display: none; }
  .vfro-dlplaque__crest svg circle:first-of-type { animation: none; }
}

/* Compact mobile — shrink the plate so the row doesn't wrap awkwardly. */
@media (max-width: 540px) {
  .vfro-dlplaque__plate { width: 230px; height: 64px; }
  .vfro-dlplaque__text { font-size: 1.3rem; letter-spacing: 0.14em; }
  .vfro-dlplaque__crest { width: 92px; height: 54px; top: 0; }
  .vfro-dlplaque { padding-top: 24px; padding-bottom: 10px; }
}

/* ===== Stats strip ===== */
.vfro-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.8rem;
  margin: -2rem auto 2.5rem;
  padding: 1.2rem;
  max-width: 880px;
  background: var(--vfro-bg-panel);
  border: 1px solid var(--vfro-border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
}
.vfro-stats__item {
  text-align: center;
}
.vfro-stats__item > p {
  margin: 0 !important;
}
.vfro-stats__label {
  display: block;
}
.vfro-stats__num {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--vfro-gold);
  line-height: 1.1;
}
.vfro-stats__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

/* ===== Grid cards ===== */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  position: relative;
  border: 1px solid rgba(146, 100, 24, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(214, 58, 68, 0.06), rgba(240, 191, 66, 0.04)),
    var(--md-default-bg-color--light);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 3px 8px rgba(40, 20, 14, 0.10);
}
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  border-color: var(--vfro-gold);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 10px 24px rgba(179, 74, 82, 0.22);
}

/* Light scheme: bg ánh vàng gold (champagne/pale gold) — nhạt hơn, không
   ngả nâu như trước. RGB shift: bỏ red component, tăng yellow.
   #FFF0C8 (255, 240, 200) = pale gold cream
   #F8E1AF (248, 225, 175) = light goldenrod */
[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="default"] .md-typeset .grid > .card {
  background:
    linear-gradient(135deg, rgba(240, 191, 66, 0.05), rgba(255, 232, 138, 0.04)),
    linear-gradient(180deg, rgba(255, 248, 225, 0.50), rgba(252, 239, 200, 0.42));
  border-color: rgba(218, 165, 32, 0.30);
}
[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li:hover,
[data-md-color-scheme="default"] .md-typeset .grid > .card:hover {
  border-color: rgba(218, 165, 32, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 10px 24px rgba(218, 165, 32, 0.25);
}
.md-typeset .grid.cards > ul > li > hr {
  display: none;
}

/* Make the last link inside each card cover the whole card so the entire
   panel is clickable, not just the small CTA link.

   IMPORTANT: do NOT set `position: relative` on the CTA link itself,
   otherwise its `::after` would be absolutely positioned relative to the
   anchor's tight bounding box instead of the parent <li>. The card <li>
   is the positioning context (it has `position: relative` set above). */
.md-typeset .grid.cards > ul > li > p:last-child a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.md-typeset .grid.cards > ul > li > p:last-child a:focus {
  outline: 2px solid var(--vfro-gold);
  outline-offset: -2px;
}
/* Inline links in the description (non-CTA paragraphs) need to stay on top
   of the overlay so they remain clickable. */
.md-typeset .grid.cards > ul > li > p:not(:last-child) a {
  position: relative;
  z-index: 2;
}

/* ===== Headings — gradient underline for h2 ===== */
.md-typeset h1 {
  font-weight: 800;
}
.md-typeset h2 {
  position: relative;
  padding-bottom: 0.4rem;
  margin-top: 2.2rem;
  font-weight: 700;
}
.md-typeset h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--vfro-gold), var(--vfro-red));
}

/* ===== Admonitions — warmer tints ===== */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-left-width: 4px;
}

/* Light scheme: bg ánh vàng nhạt cho admonition nổi bật trên section-card */
[data-md-color-scheme="default"] .md-typeset .admonition,
[data-md-color-scheme="default"] .md-typeset details {
  background:
    linear-gradient(180deg, rgba(255, 248, 225, 0.42), rgba(252, 239, 200, 0.36));
  border-color: rgba(218, 165, 32, 0.25);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 3px 10px rgba(40, 20, 14, 0.06);
}

/* ===== Code blocks ===== */
.md-typeset pre > code {
  border-radius: 10px;
}

/* ===== Footer / nav polish ===== */
.md-footer {
  background: #100406;
}
.md-footer-meta {
  background: #08020303;
  background: #0a0203;
}

/* ===== Scrollbar — slim themed ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--vfro-red), var(--vfro-red-deep));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vfro-gold);
}

/* ===== Tag chips (material `tags` plugin) ===== */
.md-tag {
  background: rgba(245, 197, 66, 0.12);
  color: var(--vfro-gold);
  border: 1px solid var(--vfro-border);
}

.vfro-footnote {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--md-default-fg-color--light);
}

/* ===== Responsive tweaks ===== */
@media (max-width: 720px) {
  .vfro-hero {
    padding: 3rem 1rem 2.8rem;
    margin: -1rem -0.8rem 1.5rem;
  }
  .vfro-hero h1 { font-size: 3.4rem; }
  .vfro-hero p { font-size: 0.98rem; }
  .vfro-hero::after {
    /* On mobile, push logo behind text and reduce opacity for legibility */
    right: -8rem;
    width: 380px;
    height: 380px;
    opacity: 0.08;
  }
  .vfro-stats__num { font-size: 1.3rem; }
}

/* ===== Grid cards: clickable card =====
   Vùng click toàn card được wire bằng JS (extra.js, class .vfro-card-link).
   CSS chỉ lo cursor + hover effect.
*/
.md-typeset .grid.cards > ul > li.vfro-card-link,
.md-typeset .grid.cards > ol > li.vfro-card-link {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.md-typeset .grid.cards > ul > li.vfro-card-link:hover,
.md-typeset .grid.cards > ol > li.vfro-card-link:hover {
  transform: translateY(-2px);
  border-color: var(--vfro-gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.md-typeset .grid.cards > ul > li.vfro-card-link:hover > p:first-of-type a:first-of-type,
.md-typeset .grid.cards > ol > li.vfro-card-link:hover > p:first-of-type a:first-of-type {
  color: var(--vfro-gold);
}
.md-typeset .grid.cards > ul > li:hover > p:first-of-type a:first-of-type,
.md-typeset .grid.cards > ol > li:hover > p:first-of-type a:first-of-type {
  color: var(--vfro-gold);
}


/* ============================================================================
   Site background + 3-card layout (sidebar primary | content | sidebar secondary).
   Đặt cả site lên background.png cố định, mỗi container thành card riêng có gap.
   ============================================================================ */

/* Bg + overlay BOTH với attachment fixed → cùng anchor vào viewport, không
   còn seam khi scroll (overlay không bị "trôi" theo body). */
html {
  background:
    linear-gradient(rgba(28, 14, 16, 0.10), rgba(20, 8, 11, 0.18)) center / cover no-repeat fixed,
    url('../assets/background.png') center center / cover no-repeat fixed;
  background-color: #1c1213;
  min-height: 100vh;
}
body {
  background: transparent;
}

[data-md-color-scheme="slate"] .md-container,
[data-md-color-scheme="slate"] .md-main,
[data-md-color-scheme="slate"] .md-main__inner {
  background: transparent !important;
}

/* === Card chung — multi-ring border (gold outer + crimson + gold inner)
       không còn outline đỏ ngoài cùng. Áp dụng toàn bộ container.
       LƯU Ý: KHÔNG include .md-sidebar--primary/--secondary ở đây —
       trên mobile sidebar trở thành drawer slide-out (position:fixed) và
       `position: relative` ở rule này sẽ ghi đè làm drawer hỏng. Card style
       cho sidebar được wrap trong @media (min-width: 76.25em) phía dưới. */
.md-content,
.md-typeset .ro-section-card {
  position: relative;
  background:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(214, 58, 68, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(28, 14, 18, 0.92) 0%, rgba(18, 8, 10, 0.95) 100%);
  border: 1px solid rgba(255, 216, 102, 0.85);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 0 0 3px rgba(214, 58, 68, 0.55),
    inset 0 0 0 4px rgba(255, 216, 102, 0.55),
    0 0 18px rgba(255, 216, 102, 0.18),
    0 8px 26px rgba(0, 0, 0, 0.45);
}

.md-content {
  margin: 1.2rem 0.5rem;
  padding: 0.4rem 1.4rem 2rem;
}

/* Override Material default `.md-grid { max-width: 61rem }` để center container
   rộng hơn ~22% — nhiều khoảng đọc text dài hơn */
.md-main__inner.md-grid {
  max-width: 75rem;
}

/* Outer sidebar = card stretched đến chiều cao .md-main__inner (= content).
   Override Material default `position: sticky; align-self: flex-start`.
   QUAN TRỌNG: chỉ áp dụng trên DESKTOP (>= 76.25em). Trên mobile, Material
   chuyển sidebar thành drawer slide-out (position: fixed; left: -12.1rem; …)
   — nếu rule desktop leak xuống thì drawer hỏng. */
/* Card style cho sidebar — chỉ apply khi sidebar đã RA KHỎI drawer mode.
   Material defaults: TOC sidebar inline từ 60em (=960px), primary nav inline
   từ 76.25em (=1220px). Drawer mode KHÔNG override gì để Material native chạy.

   Dùng selector chung cho card style (background/border/shadow) với 2 media:
   - 60em+: chỉ TOC apply (primary còn ở drawer mode)
   - 76.25em+: thêm primary apply */
/* Ẩn sidebar phải khi TOC rỗng (trang không có heading H2/H3) */
.md-sidebar--secondary:not(:has(.md-nav--secondary .md-nav__list)) {
  display: none !important;
}

@media (min-width: 60em) {
  .md-sidebar--secondary {
    position: relative !important;
    background:
      radial-gradient(ellipse 80% 30% at 50% 0%, rgba(214, 58, 68, 0.08), transparent 70%),
      linear-gradient(180deg, rgba(28, 14, 18, 0.92) 0%, rgba(18, 8, 10, 0.95) 100%);
    border: 1px solid rgba(255, 216, 102, 0.85);
    border-radius: 10px;
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.45),
      inset 0 0 0 3px rgba(214, 58, 68, 0.55),
      inset 0 0 0 4px rgba(255, 216, 102, 0.55),
      0 0 18px rgba(255, 216, 102, 0.18),
      0 8px 26px rgba(0, 0, 0, 0.45);
    align-self: stretch !important;
    top: auto !important;
    margin: 1.2rem 0.4rem;
    padding: 0;
    height: auto !important;
  }
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    padding: 0.9rem 0.95rem;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow-y: auto;
  }
}

@media (min-width: 76.25em) {
  .md-sidebar--primary {
    position: relative !important;
    background:
      radial-gradient(ellipse 80% 30% at 50% 0%, rgba(214, 58, 68, 0.08), transparent 70%),
      linear-gradient(180deg, rgba(28, 14, 18, 0.92) 0%, rgba(18, 8, 10, 0.95) 100%);
    border: 1px solid rgba(255, 216, 102, 0.85);
    border-radius: 10px;
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.45),
      inset 0 0 0 3px rgba(214, 58, 68, 0.55),
      inset 0 0 0 4px rgba(255, 216, 102, 0.55),
      0 0 18px rgba(255, 216, 102, 0.18),
      0 8px 26px rgba(0, 0, 0, 0.45);
    align-self: stretch !important;
    top: auto !important;
    margin: 1.2rem 0.4rem;
    padding: 0;
    height: auto !important;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    padding: 0.9rem 0.95rem;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow-y: auto;
    width: auto;
  }
}

/* === Ornate decorations — 4 corner brackets vàng đậm (đồng bộ hero) === */
.md-content::before,
.md-sidebar--primary::before,
.md-sidebar--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866);
  background-size:
    24px 3px, 3px 24px,
    24px 3px, 3px 24px,
    24px 3px, 3px 24px,
    24px 3px, 3px 24px;
  background-position:
    top    left,    top    left,
    top    right,   top    right,
    bottom left,    bottom left,
    bottom right,   bottom right;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 216, 102, 0.85))
          drop-shadow(0 0 2px rgba(214, 58, 68, 0.6));
  z-index: 1;
}

.md-content::after,
.md-sidebar--primary::after,
.md-sidebar--secondary::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #ffd866 0%, #f0bf42 50%, #9a6e16 100%);
  box-shadow:
    0 0 0 1px #3a2208,
    0 0 6px rgba(255, 216, 102, 0.7);
  pointer-events: none;
  z-index: 2;
}

/* Hero / banner trong content card — đang dùng negative margin để full-bleed,
   bù lại padding card để không tràn quá khung.
   LƯU Ý: trên homepage block "Homepage: bỏ wrap .md-content" bên dưới sẽ override
   các margin này — hero ngồi trong .md-content__inner width thay vì full-bleed. */
.md-content .vfro-hero,
.md-content .ro-banner {
  margin-left: -1.4rem;
  margin-right: -1.4rem;
  margin-top: -0.4rem;
  border-radius: 6px 6px 0 0;
}

/* ===== Homepage: bỏ wrap .md-content (cream/dark card) =====
   Hero và các section-card cùng width, ngồi trực tiếp trên body background.
   :has() — Chrome 105+, Safari 15.4+, Firefox 121+ (đủ rộng cho 2026). */
body:has(.vfro-hero) .md-content,
[data-md-color-scheme="default"] body:has(.vfro-hero) .md-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0.6rem 0 !important;
}
body:has(.vfro-hero) .md-content::before,
body:has(.vfro-hero) .md-content::after {
  display: none !important;
}
/* Hero: bỏ slideshow + dot pattern, GIỮ bg image của body lộ qua nhưng có
   subtle dark overlay để hero có presence, text rõ. Watermark logo
   (.vfro-hero::after) giữ nguyên. Border ornate đa màu. */
body:has(.vfro-hero) .md-content .vfro-hero {
  margin: 0 0 1.6rem !important;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(0, 0, 0, 0.70), transparent 75%),
    linear-gradient(180deg, rgba(15, 5, 8, 0.85) 0%, rgba(30, 10, 16, 0.72) 60%, rgba(50, 16, 22, 0.62) 100%) !important;
  border-radius: 10px;
  border: 1px solid rgba(255, 216, 102, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 0 0 3px rgba(214, 58, 68, 0.55),
    inset 0 0 0 4px rgba(255, 216, 102, 0.55),
    0 0 18px rgba(255, 216, 102, 0.18),
    0 8px 26px rgba(0, 0, 0, 0.55) !important;
}
body:has(.vfro-hero) .vfro-hero__slides,
body:has(.vfro-hero) .vfro-hero::after {
  display: none !important;
}
body:has(.vfro-hero) .vfro-hero::before {
  background-image:
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866) !important;
  background-size:
    24px 3px, 3px 24px,
    24px 3px, 3px 24px,
    24px 3px, 3px 24px,
    24px 3px, 3px 24px !important;
  background-position:
    top    left,    top    left,
    top    right,   top    right,
    bottom left,    bottom left,
    bottom right,   bottom right !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 5px rgba(255, 216, 102, 0.85))
          drop-shadow(0 0 2px rgba(214, 58, 68, 0.6)) !important;
  z-index: 6 !important;
}
/* hero không có outline đỏ — giữ multi-ring border đã có ở rule trên */
/* Section-card đầu tiên sát hero — không cần margin-top mặc định 2.4rem */
body:has(.vfro-hero) .md-typeset .ro-section-card:first-of-type {
  margin-top: 0;
}

@media (max-width: 76.1875em) {
  /* Reset max-width grid (desktop = 75rem, mobile auto) */
  .md-main__inner.md-grid {
    max-width: none;
  }
  .md-content {
    margin: 0.6rem 0;
    border-radius: 6px;
  }
  .md-content::before,
  .md-content::after,
  .md-sidebar--primary::before,
  .md-sidebar--primary::after,
  .md-sidebar--secondary::before,
  .md-sidebar--secondary::after { display: none !important; }
  /* Mobile: KHÔNG override .md-sidebar--primary/--secondary nữa — Material's
     default mobile drawer (position: fixed; left: -12.1rem; width: 12.1rem;
     transform translateX khi toggle) chạy sạch khi không bị desktop rule leak.
     Desktop rule giờ đã wrap trong @media (min-width: 76.25em) ở trên. */
  /* Hero responsive */
  body:has(.vfro-hero) .md-content .vfro-hero {
    border-radius: 6px;
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.45),
      inset 0 0 0 2px rgba(214, 58, 68, 0.5),
      inset 0 0 0 3px rgba(255, 216, 102, 0.5),
      0 4px 14px rgba(0, 0, 0, 0.4) !important;
  }
  /* ro-section-card mobile */
  .md-typeset .ro-section-card {
    margin: 1.2rem 0;
    padding: 1rem 1rem 1.2rem;
  }
  .md-typeset .ro-section-card::before,
  .md-typeset .ro-section-card::after { display: none !important; }
}

/* Light scheme equivalent — dùng overlay sáng + viền nâu vàng */
[data-md-color-scheme="default"] html {
  background:
    linear-gradient(rgba(255, 252, 245, 0.04), rgba(248, 240, 226, 0.10)) center / cover no-repeat fixed,
    url('../assets/background.png') center center / cover no-repeat fixed;
  background-color: #faf6ee;
}
[data-md-color-scheme="default"] body {
  background: transparent;
}
[data-md-color-scheme="default"] .md-container,
[data-md-color-scheme="default"] .md-main,
[data-md-color-scheme="default"] .md-main__inner {
  background: transparent !important;
}
[data-md-color-scheme="default"] .md-content {
  background:
    linear-gradient(180deg, rgba(254, 253, 250, 0.96), rgba(252, 250, 245, 0.94));
  /* Multi-ring border KHỚP hero (gold outer + crimson + gold inner) */
}
[data-md-color-scheme="default"] .md-sidebar--primary,
[data-md-color-scheme="default"] .md-sidebar--secondary {
  background:
    linear-gradient(180deg, rgba(254, 253, 250, 0.94), rgba(252, 250, 245, 0.92));
  /* Multi-ring border kế thừa từ rule chung (giống hero) */
}
[data-md-color-scheme="default"] .md-sidebar--primary .md-sidebar__scrollwrap,
[data-md-color-scheme="default"] .md-sidebar--secondary .md-sidebar__scrollwrap {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Homepage / trang có section cards: bỏ frame .md-content outer để tránh
   2 khung lồng nhau + bỏ outline đỏ ngoài cùng để homepage gọn gàng. */
.md-content:has(.ro-section-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.md-content:has(.ro-section-card)::before,
.md-content:has(.ro-section-card)::after {
  display: none !important;
}

/* === Homepage section cards — wrap mỗi block H2+content trong khung ornate === */
/* ro-section-card chỉ giữ margin/padding riêng — border/shadow đã share
   ở rule chung phía trên. Override .vfro-hero::before (corner brackets vàng)
   để section-card cũng có 4 góc bracket đồng bộ với hero. */
.md-typeset .ro-section-card {
  margin: 2.4rem 0;
  padding: 1.4rem 1.6rem 1.6rem;
}
.md-typeset .ro-section-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866),
    linear-gradient(#ffd866, #ffd866);
  background-size:
    24px 3px, 3px 24px,
    24px 3px, 3px 24px,
    24px 3px, 3px 24px,
    24px 3px, 3px 24px;
  background-position:
    top    left,    top    left,
    top    right,   top    right,
    bottom left,    bottom left,
    bottom right,   bottom right;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 216, 102, 0.85))
          drop-shadow(0 0 2px rgba(214, 58, 68, 0.6));
}
.md-typeset .ro-section-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #ffd866 0%, #f0bf42 50%, #9a6e16 100%);
  box-shadow:
    0 0 0 1px #3a2208,
    0 0 6px rgba(255, 216, 102, 0.7);
  pointer-events: none;
}
/* H2 đầu mỗi card: bỏ margin-top thừa */
.md-typeset .ro-section-card > h2:first-child {
  margin-top: 0;
}

/* Light scheme — bg trắng-cream sáng, multi-ring border kế thừa rule chung */
[data-md-color-scheme="default"] .md-typeset .ro-section-card {
  background:
    linear-gradient(180deg, rgba(254, 253, 250, 0.96), rgba(252, 250, 245, 0.94));
}

/* ============================================================================
   Sidebar nav items — to hơn + divider trên/dưới rõ (cách điệu)
   ============================================================================ */
.md-nav--primary .md-nav__item,
.md-nav--secondary .md-nav__item {
  border-bottom: 1px solid rgba(146, 100, 24, 0.18);
}
.md-nav--primary .md-nav__item:last-child,
.md-nav--secondary .md-nav__item:last-child {
  border-bottom: none;
}
.md-nav--primary .md-nav__link,
.md-nav--secondary .md-nav__link {
  font-size: 0.7rem;
  padding: 0.3rem 0.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 0.15s, color 0.15s;
}
.md-nav--primary .md-nav__link:hover,
.md-nav--secondary .md-nav__link:hover {
  background: rgba(214, 58, 68, 0.06);
  color: var(--vfro-red, #d63a44);
}
.md-nav--primary .md-nav__link--active,
.md-nav--secondary .md-nav__link--active {
  font-weight: 700;
  color: var(--vfro-red, #d63a44);
  background: rgba(214, 58, 68, 0.08);
  border-left: 2px solid var(--vfro-red, #d63a44);
  padding-left: calc(0.3rem - 2px);
}
.md-nav--primary .md-nav__title,
.md-nav--secondary .md-nav__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a0608;
  padding: 0.25rem 0.25rem 0.4rem;
  border-bottom: 2px solid rgba(146, 100, 24, 0.32);
  margin-bottom: 0.25rem;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title,
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__title {
  color: #ffe88a;
  border-bottom-color: rgba(240, 191, 66, 0.45);
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item,
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__item {
  border-bottom-color: rgba(240, 191, 66, 0.18);
}

/* Drawer title (mobile sidebar header): logo + chữ "VFRO" inline, không overlap.
   HTML do drawer-title.js rewrite: <a.md-logo><img></a><span.md-nav__title-brand>VFRO</span> */
.md-nav--primary > .md-nav__title[for="__drawer"] {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: auto;
  min-height: 2.4rem;
  padding: 0.55rem 0.8rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.md-nav--primary > .md-nav__title[for="__drawer"] .md-nav__button.md-logo {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  top: auto; left: auto; right: auto;
}
.md-nav--primary > .md-nav__title[for="__drawer"] .md-nav__button.md-logo img,
.md-nav--primary > .md-nav__title[for="__drawer"] .md-nav__button.md-logo svg {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}
.md-nav--primary > .md-nav__title[for="__drawer"] .md-nav__title-brand {
  font-family: 'Cinzel', 'Bebas Neue', 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: inherit;
  line-height: 1;
}

/* Sub-drawer titles ("Tra cứu", "Hướng dẫn cơ bản", …) khi click mục có > trong
   sidebar mobile: back-arrow icon đang absolute-positioned của Material default
   bị đè vào text khi rule .md-nav__title (line ~1751) override padding nhỏ.
   Ép cùng flex pattern như drawer primary để icon + text inline, không tràn.
   Chỉ áp dụng ở mobile vì desktop sub-nav titles không cần back-arrow. */
@media (max-width: 76.1875em) {
  .md-nav .md-nav__title[for^="__nav_"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: auto;
    min-height: 2.4rem;
    padding: 0.55rem 0.8rem;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Override flat-header rule (~line 1751) cho riêng sub-drawer */
    border-bottom: none;
    margin-bottom: 0;
  }
  .md-nav .md-nav__title[for^="__nav_"] > .md-nav__icon.md-icon {
    position: static;
    top: auto; left: auto; right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    font-size: 1rem;
  }
  .md-nav .md-nav__title[for^="__nav_"] > .md-nav__icon.md-icon::after {
    width: 100%;
    height: 100%;
  }
}

/* ============================================================================
   Heading bài viết — to hơn, đậm hơn, color đen rõ (light scheme)
   ============================================================================ */
[data-md-color-scheme="default"] .md-typeset h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #0a0608;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
[data-md-color-scheme="default"] .md-typeset h2 {
  font-size: 1.55rem;
  font-weight: 700;
  color: #0a0608;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
[data-md-color-scheme="default"] .md-typeset h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #16080a;
  line-height: 1.3;
}
[data-md-color-scheme="default"] .md-typeset h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #16080a;
}
[data-md-color-scheme="slate"] .md-typeset h1 { font-size: 2rem; font-weight: 800; }
[data-md-color-scheme="slate"] .md-typeset h2 { font-size: 1.55rem; font-weight: 700; }
[data-md-color-scheme="slate"] .md-typeset h3 { font-size: 1.2rem; font-weight: 700; }