/**
 * nv-toc.css — style cho mục lục tự động (đi kèm js/nv-toc.js), độc lập theme.
 * Copy sang dự án khác dùng ngay được. Màu sắc lấy qua CSS variable kèm giá trị dự phòng
 * (vd. var(--smt-orange, #f5921e)) nên khi dự án đích không có các biến --smt-... vẫn hiển thị
 * đẹp với bộ màu mặc định bên phải dấu phẩy. Muốn đổi màu cho khớp thương hiệu dự án khác,
 * chỉ cần định nghĩa lại khối biến --toc-... ngay dưới đây (hoặc override theo #id cụ thể).
 */
:root {
    /* Định nghĩa ở :root (không chỉ trong .nv-toc) vì vùng nội dung cần "né" TOC lúc nổi
       (.nv-toc-reserve-left/-right, xem bên dưới) là phần tử ANH EM (data-toc-target), không
       phải hậu duệ của .nv-toc, nên không thừa hưởng được biến nếu chỉ khai báo trong .nv-toc. */
    --toc-width: 280px;
}
.nv-toc {
    --toc-accent: var(--smt-orange, #f5921e);
    --toc-heading: var(--smt-navy, #1c2b3f);
    --toc-border: var(--smt-border, #e3e8ef);
    --toc-bg: #fff;
    --toc-text: var(--smt-text, #33465c);
    --toc-text-mute: var(--smt-text-mute, #5b6b80);
    --toc-radius: 10px;
    --toc-width: 280px;

    background: var(--toc-bg);
    border: 1px solid var(--toc-border);
    border-radius: var(--toc-radius);
    font-size: 14px;
    box-sizing: border-box;
}
.nv-toc *,
.nv-toc *::before,
.nv-toc *::after {
    box-sizing: border-box;
}

.nv-toc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
}
.nv-toc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    color: var(--toc-heading);
    min-width: 0;
}
.nv-toc-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-toc-icon {
    flex: none;
    width: 16px;
    height: 2px;
    background: currentColor;
    color: var(--toc-heading);
    border-radius: 1px;
    box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}
.nv-toc-caret {
    display: none;
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--toc-text-mute);
    border-bottom: 2px solid var(--toc-text-mute);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.nv-toc-body {
    padding: 14px 18px 16px;
    border-top: 1px solid var(--toc-border);
}

/* ---- Danh sách đánh số lồng cấp (1. / 1.1 / 1.1.1) bằng CSS counter ---- */
.nv-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: nv-toc-l1;
}
.nv-toc-list > li {
    counter-increment: nv-toc-l1;
    margin-bottom: 10px;
}
.nv-toc-list > li:last-child { margin-bottom: 0; }
.nv-toc-list > li > a:before {
    content: counter(nv-toc-l1) ".";
    display: inline-block;
    min-width: 22px;
    font-weight: 700;
    color: var(--toc-heading);
}
.nv-toc-list ol {
    list-style: none;
    margin: 8px 0 0;
    padding-left: 22px;
    counter-reset: nv-toc-l2;
}
.nv-toc-list ol > li {
    counter-increment: nv-toc-l2;
    margin-bottom: 8px;
}
.nv-toc-list ol > li:last-child { margin-bottom: 0; }
.nv-toc-list ol > li > a:before {
    content: counter(nv-toc-l1) "." counter(nv-toc-l2);
    display: inline-block;
    min-width: 30px;
    font-weight: 600;
    color: var(--toc-text-mute);
}
.nv-toc-list ol ol { counter-reset: nv-toc-l3; }
.nv-toc-list ol ol > li { counter-increment: nv-toc-l3; }
.nv-toc-list ol ol > li > a:before {
    content: counter(nv-toc-l1) "." counter(nv-toc-l2) "." counter(nv-toc-l3);
    min-width: 38px;
}
.nv-toc-list a {
    color: var(--toc-text);
    text-decoration: none;
    line-height: 1.6;
}
.nv-toc-list a:hover,
.nv-toc-list a.active { color: var(--toc-accent); }
.nv-toc-list a.active { font-weight: 700; }

/* ---- layout="sidebar": dính theo khi cuộn (position: sticky, không cần JS tính toán) ----
 * top dùng biến --toc-offset-top do nv-toc.js tự đo (= chiều cao header cố định/dính của
 * trang, nếu có, cộng data-toc-offset) để không bị header che mất; nếu JS chưa kịp chạy
 * (hoặc trang không có header cố định) thì dùng tạm 20px. */
@media (min-width: 768px) {
    .nv-toc--sidebar {
        position: sticky;
        top: var(--toc-offset-top, 20px);
        max-height: calc(100vh - var(--toc-offset-top, 20px) - 20px);
        overflow-y: auto;
    }
}

/* ---- layout="floating": nằm trong dòng chảy, nổi cố định khi cuộn qua khỏi vị trí gốc ---- */
.nv-toc-placeholder { display: none; }
.nv-toc-placeholder.is-active { display: block; }
@media (min-width: 768px) {
    .nv-toc--floating.is-floating {
        position: fixed;
        top: var(--toc-offset-top, 20px);
        width: var(--toc-width, 280px);
        z-index: 1020;
        max-height: calc(100vh - var(--toc-offset-top, 20px) - 20px);
        overflow-y: auto;
        box-shadow: 0 12px 28px rgba(15, 43, 82, .14);
        /* left/right do JS tự tính theo đúng mép cột chứa TOC (xem nv-toc.js _float()),
           không đặt cố định ở đây để tránh tràn sang cột khác nằm cạnh bên. */
    }

    /* position: fixed lấy TOC ra khỏi dòng chảy nhưng KHÔNG khiến chữ xung quanh tự "né" nó
       (khác kiểu float:left/right cũ) - nếu không chừa chỗ, TOC nổi sẽ đè thẳng lên đoạn văn
       bên dưới trong cùng cột. JS gắn class này lên đúng phần tử data-toc-target khi bắt đầu
       nổi (xem nv-toc.js _float()/_unfloat()) để chữ tự thu hẹp lại, chừa 1 khoảng trống vừa
       đúng bề rộng TOC (+ khoảng cách) ở phía TOC đang nổi. */
    .nv-toc-reserve-right { padding-right: calc(var(--toc-width, 280px) + 24px); }
    .nv-toc-reserve-left { padding-left: calc(var(--toc-width, 280px) + 24px); }
}

/* ---- mobile: thu gọn thành thanh cố định trên cùng, bấm để mở rộng ---- */
@media (max-width: 767.98px) {
    .nv-toc--floating.is-floating {
        position: static;
        box-shadow: none;
        max-height: none;
        overflow: visible;
    }
    .nv-toc-mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 1030;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: 0 2px 8px rgba(15, 43, 82, .1);
    }
    .nv-toc-mobile-bar .nv-toc-bar { cursor: pointer; }
    .nv-toc-mobile-bar .nv-toc-caret { display: block; }
    .nv-toc-mobile-bar .nv-toc-body {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        max-height: 70vh;
        overflow-y: auto;
        background: var(--toc-bg);
        border-top: 1px solid var(--toc-border);
        box-shadow: 0 8px 16px rgba(15, 43, 82, .1);
    }
    .nv-toc-mobile-bar.is-expanded .nv-toc-body { display: block; }
    .nv-toc-mobile-bar.is-expanded .nv-toc-caret { transform: rotate(225deg); }
}