/* ==========================================================================
   TOC – Mục lục bài viết  v3
   ==========================================================================
   Single-nav architecture:
     - 1 nav DOM element, responsive qua CSS + JS
     - Desktop: sticky sidebar (layout_blogpost 3-6-3)
     - Mobile: sticky bar dưới .top_mb, collapse/expand dropdown
   Sticky offset dùng chung --ivd-header-h (header-sticky.js), theo sát chiều
   cao header thực tế kể cả khi header tự thu gọn lúc scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOC Card – base (tất cả viewport)
   -------------------------------------------------------------------------- */
.toc-nav {
    background: #eaeffa;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.toc-header {
    display: flex;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid #d1d5db;
    user-select: none;
    -webkit-user-select: none;
    gap: 8px;
    cursor: default;
}
.toc-header-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.toc-title {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
   color: #6b7280;
}
/* Heading đang active – chỉ hiện trên mobile */
.toc-current-heading {
    display: none;
    font-size: 13px;
    font-weight: 500;
    color: #1250dc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-toggle-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    transition: background .15s, color .15s;
    line-height: 0;
}
.toc-toggle-btn:hover { background: #e2e8f0; }
.toc-toggle-btn:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; }
/* Desktop: TOC luôn mở (không collapse được, xem toc.js isMobile()) -> ẩn nút */
@media (min-width: 992px) {
    .toc-toggle-btn { display: none; }
}

.toc-arrow {
    display: block;
    transition: transform .25s ease;
    pointer-events: none;
}
.toc-arrow.toc-collapsed { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */
.toc-body {
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height .3s ease, opacity .2s ease;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}
.toc-body::-webkit-scrollbar       { width: 4px; }
.toc-body::-webkit-scrollbar-track { background: transparent; }
.toc-body::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 2px; }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
.toc-list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    counter-reset: toc-h2-counter;
}
.toc-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.toc-item   { position: relative; }
.toc-h2     { counter-increment: toc-h2-counter; }

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
.toc-link {
    display: block;
    padding: 8px 18px 8px 16px;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.55;
    transition: color .15s, background .15s, border-left-color .15s;
    border-left: 3px solid transparent;
    word-break: break-word;
}
.toc-h2 > .toc-link {
    font-size: 1rem;
    padding-left: 14px;
}
.toc-h2 > .toc-link::before {
    content: counter(toc-h2-counter) ". ";
    font-weight: 600;
    color: #1250DC;
    min-width: 20px;
    display: inline-block;
}
.toc-h3 > .toc-link { padding-left: 30px; font-size: 1rem; }
.toc-h4 > .toc-link { padding-left: 46px; font-size: 12.5px; color: #a0aec0; }

.toc-link:hover {
    color: #1250DC;
    border-left-color: #1250DC;
    text-decoration: none;
}
.toc-link.toc-active {
    font-weight: 600;
    border-left-color: #1250DC;
    text-decoration: none;
}
.toc-h2 > .toc-link.toc-active::before { color: #1250dc; }

/* ==========================================================================
   LAYOUT 1 – toc-article-wrap (layout_article.php, layout_portfolio.php)

   FIX STICKY: không dùng align-items: flex-start.
   Default stretch → sidebar cao bằng content → sticky có room hoạt động.
   ========================================================================== */
.toc-article-wrap {
    display: flex;
    gap: 28px;
    /* align-items: stretch — default, không ghi đè */
}
.toc-sidebar-col {
    flex: 0 0 280px;
    max-width: 280px;
    min-width: 220px;
}
.toc-nav.toc-sticky {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow: visible;
    z-index: 10;
}
.toc-nav.toc-sticky .toc-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
.toc-main-content {
    flex: 1 1 0;
    min-width: 0;
}

/* ==========================================================================
   LAYOUT 2 – Blogpost 3-6-3 (layout_blogpost.php)

   Desktop: sidebar col sticky, content col reads comfortably.
   Mobile: sidebar col transforms to sticky top bar below .top_mb.
   Bootstrap 3 dùng float → override bằng flexbox.
   ========================================================================== */
.blogpost-wrap {
    padding-top: 28px;
    padding-bottom: 20px;
}
.blogpost-layout {
    display: flex !important;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    /* align-items: stretch (default) — sidebar cao = content = sticky hoạt động */
}
.blogpost-layout > [class*="col-"] {
    float: none !important;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}
/* Col widths trong flex */
.blogpost-layout .col-lg-3 { flex: 0 0 25%;  max-width: 25%; }
.blogpost-layout .col-lg-6 { flex: 0 0 50%;  max-width: 50%; }
/* min-width:0 BAT BUOC tren flex item: mac dinh flex item khong chiu nho hon kich
   thuoc noi dung ben trong no (vd 1 bang co min-width:800px trong .table-content),
   khien ca cot content phinh to, day lech 2 cot ben canh — dung overflow-x:auto o
   .table-content la KHONG DU neu thieu dong nay. */
.blogpost-layout > [class*="col-"] { min-width: 0; }

/* ── Desktop sidebar ─────────────────────────────────────────────── */
.blogpost-sidebar-col {}
.blogpost-toc-sticky {
    position: sticky;
    /* var(--ivd-header-h): CSS var CHINH CHU cua header-sticky.js, cap nhat
       LIEN TUC moi lan scroll (khong chi luc load/resize nhu --top-mb-height
       cu) — bat buoc phai theo sat vi .ivd-header tu THU GON chieu cao khi
       scroll qua .is-scrolled (xem header-redesign.css). Dung --top-mb-height
       (toc.js do 1 lan, khong lang nghe scroll) gay lech: header thu gon
       nhung TOC van dinh o do cao CU -> ho khoang trong voi header (bug user
       bao: "khoang giua voi header" khi scroll). ── */
    top: var(--ivd-header-h, 60px);
    max-height: calc(100vh - 110px);
    overflow: visible;
}
.blogpost-toc-sticky .toc-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
/* Desktop: header không click-to-toggle */
.blogpost-sidebar-col .toc-header { cursor: default; }

/* ── Content col ─────────────────────────────────────────────────── */
.blogpost-content-col {}
.blogpost-article-body {
    counter-reset: bp-h2-counter;
    line-height: 1.6;
}
.blogpost-article-body img        { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.blogpost-article-body table      { overflow-x: auto; display: block; width: 100%; }
/* .table-content table: KHONG dung display:block/overflow-x:auto cua rule tren —
   no tao ra 1 hop scroll RIENG (native, khong style duoc) ngay tren chinh table,
   khien scrollbar mau o .table-content (style.css) khong bao gio la hop dang scroll
   thuc su. De .table-content (wrapper ngoai) la NOI DUY NHAT xu ly overflow-x.
   LUU Y: comment nay truoc gio chi la Y DINH, chua co rule nao thuc thi no —
   .table-content table van bi ke thua display:block tu rule tren (cung specificity
   0,1,1, ma toc.css load SAU style.css nen thang). Hau qua: trinh duyet phai
   tu tao 1 "anonymous table" de boc tbody/tr/td (vi table display:block khong
   con la table box nua), va hop an danh nay TU CO SHRINK theo noi dung thay vi
   lap day 100% nhu <table> ngoai — gay khoang trang thua ben phai (voi bang <=3
   cot) VA lam gay position:sticky tren td:first-child (them 1 hop khong the
   CSS-target vao giua containing-block chain). Phai ep lai display:table + tang
   specificity (2 class) de luon thang bat ke thu tu file. */
.blogpost-article-body .table-content table {
    display: table;
    overflow-x: visible;
}

/* Can them tien to "#news_detail " de thang specificity voi #news_detail h2/h3/h5
   (legacy-bootstrap-custom.css) — id+type (1,0,1) dang thang class+type (0,1,1) cua
   .blogpost-article-body h2 don gian, khien font-size/weight o day bi de. */
#news_detail .blogpost-article-body h2,
#news_detail .blogpost-article-body h3,
#news_detail .blogpost-article-body h4     { scroll-margin-top: 100px; font-weight: 700; }
#news_detail .blogpost-article-body h2     { margin-bottom: 20px; font-size: 1.5rem; font-weight: 700; counter-increment: bp-h2-counter; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#news_detail .blogpost-article-body h2::before {
    content: counter(bp-h2-counter, decimal-leading-zero) ".";
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: #ccc;
}
#news_detail .blogpost-article-body h3     { font-size: 1.25rem; }
#news_detail .blogpost-article-body h4     { font-size: 1rem; }

/* 1. Link mau #1250dc, hover khong doi gi ca (giu nguyen mau + khong underline) */
.blogpost-article-body a       { color: #1250dc; }
.blogpost-article-body a:hover { color: #1250dc; text-decoration: none; }

.blogpost-aside-col { /* reserved */ }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ── 992px–1199px (CHI Layout 2 Blogpost): cot TOC rieng (.blogpost-sidebar-col)
   bien mat — toc.js da REPARENT .blogpost-toc-sticky vao ben trong
   .blogpost-article-body (ngay truoc heading dau tien). Luc dau (chua cuon
   toi) hien day du nhu ban desktop. Khi cuon qua het no va no dinh len dau
   trang (position:sticky kich hoat), toc.js them class .toc-stuck va TU DONG
   THU GON — xem rule .toc-stuck duoi day (dat ngoai moi @media, JS moi la noi
   quyet dinh khi nao gan class nay). Content+related con lai xep 2 cot ty le
   8:4 (66.67%/33.33%). KHONG anh huong Layout 1 (toc-article-wrap,
   layout_article.php/layout_portfolio.php) — .blogpost-sidebar-col/
   .blogpost-content-col khong ton tai o Layout 1. ── */
@media (min-width: 992px) and (max-width: 1199px) {
    .blogpost-sidebar-col {
        display: none;
    }
    .blogpost-layout .col-lg-6.blogpost-content-col {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }
    .blogpost-layout .col-lg-3.blogpost-aside-col {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
    /* TOC nam trong content: khong con bi ep 25% nua, rong het cot content;
       them khoang cach duoi truoc khi vao heading dau tien. */
    .blogpost-article-body .blogpost-toc-sticky {
        margin-bottom: 24px;
    }
}

/* .toc-stuck: TOC (dang nam trong .blogpost-article-body, tier 992-1199px)
   da cuon qua va dang dinh o dau trang — chuyen sang dang thanh gon co the
   dong/mo (giong kieu mobile) de khong bi che chu ben duoi. Dat ngoai
   @media vi dieu kien la class do JS gan, khong phai theo kich thuoc man
   hinh. Toc-body an/hien qua inline maxHeight do collapse()/expand() dieu
   khien (toc.js) — o day chi can chuyen phan header sang giao dien "bar". */
.blogpost-toc-sticky.toc-stuck .toc-header          { cursor: pointer; }
.blogpost-toc-sticky.toc-stuck .toc-toggle-btn      { display: flex; }
.blogpost-toc-sticky.toc-stuck .toc-header-inner    { flex-direction: row; align-items: center; overflow: hidden; }
.blogpost-toc-sticky.toc-stuck .toc-title           { display: none; }
.blogpost-toc-sticky.toc-stuck .toc-current-heading { display: block; flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; }

/* ── ≤ 991px: mobile / tablet ──────────────────────────────────────── */
@media (max-width: 991px) {

    /* ── Layout 1: stack dọc ─────────────────────────────────────── */
    .toc-article-wrap {
        flex-direction: column;
        gap: 0;
    }
    .toc-sidebar-col {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .toc-nav.toc-sticky {
        position: static;
        max-height: none;
        overflow: hidden;
    }
    .toc-nav.toc-sticky .toc-body {
        max-height: 340px;
    }
    .toc-sidebar-col .toc-header { cursor: pointer; }

    /* ── Layout 2 Blogpost ──────── */

    /* Flex → block (giu nguyen tu truoc, ho tro sticky trong phan tu block) */
    .blogpost-layout {
        display: block !important;
    }

    /* TOC khong con o day nua — toc.js da reparent vao trong
       .blogpost-article-body (ngay truoc heading dau tien), dung chung co
       che voi tier 992-1199px (xem @media 992-1199px va .toc-stuck o tren). */
    .blogpost-sidebar-col {
        display: none;
    }

    /* Content col: full width */
    .blogpost-content-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Aside: full-width on mobile/tablet — product carousel stays visible */
    .blogpost-aside-col {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 15px 20px;
    }

    /* Touch targets tối thiểu 44px */
    .toc-link {
        padding-top: 8px;
        padding-bottom: 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .toc-h3 > .toc-link { padding-left: 26px; font-size: 0.875rem; }
    .toc-h4 > .toc-link { padding-left: 40px; font-size: 13px; }
    .toc-header          { padding: 14px 16px; }
    .toc-nav             { border-radius: 8px; }
}

@media (max-width: 575px) {
    .toc-link,
    .toc-h2 > .toc-link { font-size: 0.875rem; }
}

/* Print */
@media print {
    .toc-nav,
    .toc-sidebar-col,
    .blogpost-sidebar-col { display: none !important; }
    .toc-main-content,
    .blogpost-content-col { width: 100% !important; max-width: 100% !important; }
}