/* ==========================================================================
   toc.css — contents list ("Mục lục trang") for doc pages and long posts.
   Desktop (≥1200px): sticky aside beside the text. Below 1200px: a gold tab on the
   right edge opens the list as a drawer (js/toc.js). Kept in its own file so a
   new URL reaches visitors past the CDN cache of the older stylesheets.
   ========================================================================== */

.prose h2[id] { scroll-margin-top: calc(var(--topbar-h) + var(--mheader-h) + var(--s-4)); }

/* ---------------------------------------------------------- Shared look */

.doc-aside__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.doc-aside .doc-aside__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}

.doc-aside__icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--c-gold); }

.doc-aside__progress {
  height: 3px;
  margin: 0 0 var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.doc-aside__progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--g33-read, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--c-orange), var(--c-gold));
  box-shadow: 0 0 8px rgba(252, 228, 3, .6);
}

.doc-aside__list { counter-reset: g33-toc; }

.doc-aside .doc-aside__list a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px var(--s-2) 7px 6px;
  line-height: 1.4;
  transition: background-color .2s, color .2s, border-color .2s;
}

.doc-aside .doc-aside__list a::before {
  counter-increment: g33-toc;
  content: counter(g33-toc);
  flex: 0 0 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-round);
  font-size: 11px;
  font-weight: 800;
  color: var(--c-gold);
  border: 1px solid rgba(252, 228, 3, .45);
  background: rgba(0, 0, 0, .25);
  transition: background-color .2s, color .2s;
}

.doc-aside .doc-aside__list a[aria-current="true"] {
  color: var(--c-text);
  border-left-color: var(--c-gold);
  background: linear-gradient(90deg, rgba(215, 0, 0, .55), rgba(215, 0, 0, 0));
}

.doc-aside .doc-aside__list a[aria-current="true"]::before,
.doc-aside .doc-aside__list a:hover::before,
.doc-aside .doc-aside__list a:focus-visible::before {
  color: var(--c-text-on-gold);
  border-color: transparent;
  background: linear-gradient(180deg, var(--c-gold), var(--c-orange));
}

.doc-aside[hidden],
.doc-aside__close,
.g33-toc-fab,
.g33-toc-scrim { display: none; }

/* ------------------------------------------------- Drawer (below 1200px) */

@media (max-width: 1199px) {
  .doc-aside {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    width: min(340px, 86vw);
    display: flex;
    flex-direction: column;
    padding: var(--s-5) var(--s-4) var(--s-4);
    border: 0;
    border-left: 2px solid var(--c-gold);
    border-radius: 18px 0 0 18px;
    background:
      radial-gradient(120% 60% at 100% 0, rgba(252, 143, 0, .22), transparent 60%),
      linear-gradient(180deg, var(--c-panel-2), var(--c-panel) 55%, #1c0000);
    box-shadow: -18px 0 40px rgba(0, 0, 0, .55), -2px 0 18px rgba(252, 228, 3, .25);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }

  .doc-aside[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform .38s var(--ease), visibility 0s;
  }

  .doc-aside .doc-aside__title {
    font-size: var(--fs-md);
    letter-spacing: .1em;
    background: linear-gradient(180deg, #fff6a8, var(--c-gold) 55%, var(--c-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .doc-aside__icon { width: 22px; height: 22px; flex-basis: 22px; }

  .doc-aside__close:not([hidden]) {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--r-round);
    border: 1px solid rgba(252, 228, 3, .5);
    background: rgba(0, 0, 0, .3);
    color: var(--c-gold);
    cursor: pointer;
  }

  .doc-aside__close svg { width: 18px; height: 18px; }
  .doc-aside__close:hover { background: var(--c-red); color: var(--c-text); }

  .doc-aside .doc-aside__list {
    flex: 1 1 auto;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 calc(var(--s-2) * -1);
    padding: 0 var(--s-2) var(--s-4);
    gap: 6px;
  }

  .doc-aside .doc-aside__list a {
    padding: 10px var(--s-3) 10px var(--s-2);
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, .82);
    border-radius: 10px;
    border-left-width: 3px;
    background: rgba(0, 0, 0, .18);
  }

  .doc-aside .doc-aside__list a::before { flex-basis: 26px; height: 26px; font-size: 12px; }

  .doc-aside .doc-aside__list a[aria-current="true"] {
    background: linear-gradient(90deg, var(--c-red), #8f0000);
    box-shadow: 0 0 0 1px rgba(252, 228, 3, .35), 0 6px 16px rgba(215, 0, 0, .35);
  }

  /* Floating tab on the right edge */
  .g33-toc-fab:not([hidden]) {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 50px;
    padding: 10px 0 8px 4px;
    border: 0;
    border-radius: 16px 0 0 16px;
    color: var(--c-text-on-gold);
    background: linear-gradient(160deg, #fff27a, var(--c-gold) 45%, var(--c-orange));
    box-shadow: -4px 6px 18px rgba(0, 0, 0, .5), 0 0 0 2px rgba(124, 0, 0, .9), 0 0 16px rgba(252, 228, 3, .45);
    transform: translateY(-50%);
    cursor: pointer;
    transition: transform .25s var(--ease), opacity .25s;
    animation: g33-toc-in .6s var(--ease) both;
  }

  .g33-toc-fab svg { width: 26px; height: 26px; }

  .g33-toc-fab__count {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .g33-toc-fab:hover { transform: translate(-3px, -50%); }

  .g33-toc-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }

  .g33-toc-scrim:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    display: block;
    background: var(--c-scrim);
    backdrop-filter: blur(2px);
    animation: g33-toc-fade .3s ease both;
  }

  html.g33-toc-lock { overflow: hidden; }
}

@keyframes g33-toc-in { from { opacity: 0; transform: translate(100%, -50%); } }
@keyframes g33-toc-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .doc-aside,
  .doc-aside[data-open="true"],
  .g33-toc-fab:not([hidden]) { transition: none; animation: none; }
}