/* Non-critical helpers (critical CSS đã inline trong layout) */
.section{margin:28px 0}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
.card{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px}
.small{font-size:14px;color:var(--muted)}
/* ===========================
   TOC (Mục lục) sidebar phải
   =========================== */

.page-wrap{
  --page-max: 1380px;     /* đổi 12800px nếu bạn thật sự muốn */
  --toc-w: 300px;
  --gap: 24px;
  --header-offset: 0px;   /* sẽ set inline ở HTML nếu có header sticky */

  width: 100%;
  max-width: min(100%, var(--page-max));
  margin: 0 auto;
  padding: 0 16px;
}

.content-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toc-w);
  gap: var(--gap);
  align-items: start;
}

/* Sidebar TOC sticky bên phải */
.toc-col{
  position: sticky;
  top: calc(var(--header-offset) + 16px);
  align-self: start;
}

/* Mobile: TOC xuống dưới */
@media (max-width: 1100px){
  .content-grid{ grid-template-columns: 1fr; }
  .toc-col{ position: static; }
}

/* ===== TOC UI ===== */
.toc-box{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.toc-title{
  font-weight: 800;
  margin-bottom: 8px;
}

.toc-body{
  max-height: calc(100vh - var(--header-offset) - 80px);
  overflow: auto;
  padding-right: 4px;
}

.toc-lv{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-item{ margin: 0; }

.toc-link{
  display: block;
  padding: 7px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}

.toc-link:hover{
  border-color: rgba(184,138,42,.35);
  background: rgba(184,138,42,.06);
}

/* Thụt dòng cấp H3 */
.toc-item-lv-3 > .toc-link{
  padding-left: 18px;
  font-size: 13px;
  opacity: .9;
}
.dvhcm-cd-secure{ cursor:pointer; display:inline-block; }
.dvhcm-decor{ display:inline-block; line-height:1.4; }
.dvhcm-code{ display:inline-block; padding:6px 10px; border-radius:8px; border:1px dashed #aaa; }


