:root{
  --content-width: 1100px;   /* chỉnh theo container chính (paperMod default ~1100) */
  --toc-width: 260px;
  --toc-gap: 24px;
  --toc-top-offset: 88px;    /* header height */
}

/* fixed left sidebar (desktop) */
.hackmd-toc {
  position: fixed;
  top: var(--toc-top-offset);
  left: calc(50% - (var(--content-width) / 2) - var(--toc-gap) - var(--toc-width));
  width: var(--toc-width);
  max-height: calc(100vh - var(--toc-top-offset) - 24px);
  overflow: auto;
  z-index: 1200;
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
}

/* inner nav */
.hackmd-toc .hackmd-toc-body,
.post-toc-left .hackmd-toc-body {
  font-size: .95rem;
  line-height: 1.4;
  padding: 0.35rem;
  background: var(--toc-background-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* root ul and nested ul styling */
.toc-root, .toc-root ul {
  list-style: none;
  margin: 0;
  padding-left: 0.6rem;
}
.toc-root ul { margin-left: 0.4rem; padding-left: 0.8rem; }

/* indentation per level (optional finer control) */
.toc-level-1 > a { font-weight: 700; }
.toc-level-2 > a { padding-left: 0.25rem; }
.toc-level-3 > a { padding-left: 0.9rem; font-size: .95rem; }
.toc-level-4 > a { padding-left: 1.4rem; font-size: .92rem; color: #a7a7a7; }

/* links */
.hackmd-toc .toc-link,
.post-toc-left .toc-link {
  display: block;
  padding: .18rem .35rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--secondary-text-color);
}

/* active / focus */
.hackmd-toc .toc-link.active,
.post-toc-left .toc-link.active,
.hackmd-toc .toc-link:focus,
.post-toc-left .toc-link:focus {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-color);
  font-weight: 700;
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Hide top automatic TOC from theme (force) */
.post-header + .table-of-contents,
.post .table-of-contents,
.toc-top { display: none !important; }

/* Responsive: mobile inline & toggle */
@media (max-width: 1200px) {
  .hackmd-toc { position: relative; left: 0; top: 0; width: 100%; max-height: none; margin-bottom: 1rem; }
  .hackmd-toc-toggle { display: inline-block; }
  .hackmd-toc .hackmd-toc-body { display: none; }
  .hackmd-toc.open .hackmd-toc-body { display: block; }
}

/* Toggle button */
.hackmd-toc-toggle { display: none; background:none; border: none; cursor:pointer; font-weight:700; margin-bottom:.4rem; }
@media (min-width: 980px) { .hackmd-toc-toggle { display: none; } }
@media (max-width: 980px) { .hackmd-toc-toggle { display:inline-block; } }

/* small visual tweaks */
.hackmd-toc { -webkit-overflow-scrolling: touch; }