/* ==========================================================================
   CSS cho TOC (v14 - Tối ưu vị trí nút trên PC)
   ========================================================================== */

/* --- Container chung --- */
.cbm-toc-container {
    background: #fff; border-radius: 4px; border: 1px solid #e5e5e5;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    margin-top: 1.5em; margin-bottom: 2em; overflow: hidden;
}
#cbm-toc-inline-container.cbm-toc-container {
    width: 650px; max-width: 100%;
}

/* --- Tiêu đề TOC --- */
.cbm-toc-title {
    background-color: #fff; color: #333; font-size: 16px; font-weight: 700;
    padding: 12px 15px; margin: 0; display: flex; align-items: center;
    position: relative; border-bottom: 1px solid #e5e5e5;
}
.cbm-toc-container.cbm-toc-collapsed .cbm-toc-title { border-bottom: none; }
.cbm-toc-title .icon-list-nested { font-size: 20px; margin-right: 10px; }
.cbm-toc-toggle-main {
    position: absolute; right: 15px; top: 50%;
    transform: translateY(-50%); width: 20px; height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain; transition: transform 0.3s;
}
.cbm-toc-container.cbm-toc-collapsed .cbm-toc-toggle-main { transform: translateY(-50%) rotate(-90deg); }

/* --- Wrapper cho danh sách --- */
.cbm-toc-list-wrapper {
    background-color: #fff; padding: 10px 0; max-height: 43vh; overflow-y: auto;
}
.cbm-toc-list-wrapper::-webkit-scrollbar { width: 8px; }
.cbm-toc-list-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
.cbm-toc-list-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.cbm-toc-list-wrapper::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* --- Danh sách & Đánh số phân cấp --- */
.cbm-toc-list, .cbm-toc-list-nested { list-style-type: none; margin: 0; padding: 0; }
.cbm-toc-list { counter-reset: toc-h2; }
.cbm-toc-item-h2 { counter-reset: toc-h3; }
.cbm-toc-item-h3 { counter-reset: toc-h4; }
.cbm-toc-list li { padding: 0; line-height: 1.5; position: relative;   margin-bottom: 0;margin-left: 0 !important; font-size: 16px !important;}
.cbm-toc-list li > a { display: flex; align-items: flex-start; padding: 5px 15px; text-decoration: none; color: #000; font-weight: 600; }
.cbm-toc-list > li > a:before,
.cbm-toc-list-nested li > a:before {
    flex-shrink: 0; width: 35px; text-align: right; margin-right: 10px;
    font-weight: 600; color: #000; padding-top: 1px;
}
.cbm-toc-list-nested li.cbm-toc-item-h3 a, .cbm-toc-list-nested li.cbm-toc-item-h3 a:before{
	font-weight: 400; 
}
.cbm-toc-item-h2 > a:before { counter-increment: toc-h2; content: counter(toc-h2); }
.cbm-toc-item-h3 > a:before { counter-increment: toc-h3; content: counter(toc-h2) "." counter(toc-h3); }
.cbm-toc-item-h4 > a:before { counter-increment: toc-h4; content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4); }
.cbm-toc-list-nested { padding-left: 33px; }
.cbm-toc-item-h4 > a { font-size: 0.95em; color: #444; }

/* --- Nút đóng/mở mục con --- */
.cbm-toc-toggle {
    position: absolute; left: 15px; top: 8px; width: 16px; height: 16px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 16px; background-repeat: no-repeat; background-position: center;
    transition: transform 0.3s; z-index: 2;
}
.cbm-item-collapsed > .cbm-toc-toggle { transform: rotate(-90deg); }
.has-children > a { padding-left: 30px; }

/* --- Trạng thái Active --- */
.cbm-toc-list li.active > a {color: #137734; }
.cbm-toc-list li.active > a:before { color: #137734; }
.cbm-toc-list li:hover > a {color: #137734; }
.cbm-toc-list li:hover > a:before { color: #137734; }

#cbm-toc-floating-button {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: calc((100vw - 1200px) / 2 - 60px);
    z-index: 998;
    background-color: #fff !important;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, right 0.3s ease-in-out;
    border-radius: 4px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    margin: 0 !important;
    padding: 0 !important;
	text-decoration: none !important;
}
.cbm-toc-item-h3.has-children .cbm-toc-toggle{
	left: 5px;
}
.page #cbm-toc-floating-button{
	right: calc((100vw - 600px) / 2 - 60px);
}
#cbm-toc-floating-button:hover{
	    background-color: #137734 !important;
    border: 1px solid #137734;
}
#cbm-toc-floating-button .icon-menu
 {
    font-size: 24px;
    color: #555;
    margin: 0 !important;
    top: 0 !important;
}
#cbm-toc-floating-button:hover .icon-menu{
	color: #fff;
}
#cbm-toc-floating-button.visible { opacity: 1; visibility: visible; }
#cbm-toc-floating-button.visible.is-fading { opacity: 0.35; }
#cbm-toc-floating-button:hover { opacity: 1 !important; }
.category-page-row_custom table, .tab-panels table {
        width: 100% !important;
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
        max-width: 100% !important;
	height: auto !important;
}
/* --- Panel nổi --- */
.cbm-toc-off-canvas .mfp-content { --drawer-width: 420px; }
#cbm-toc-floating-panel {
    width: 100%; height: 100%; min-width: unset; max-width: unset;
    display: block; margin: 0; border-radius: 0;
}
#cbm-toc-floating-panel .cbm-toc-container {
    border: none; box-shadow: none; margin: 0; border-radius: 0;
    height: 100%; display: flex; flex-direction: column;
}
#cbm-toc-floating-panel .cbm-toc-list-wrapper { flex-grow: 1; max-height: none; }
#cbm-toc-floating-panel .cbm-toc-title { padding: 15px 25px; }
#cbm-toc-floating-panel .cbm-toc-list-wrapper { padding: 15px 0; }
#cbm-toc-floating-panel .cbm-toc-list li > a { padding-top: 0; padding-bottom: 10px; padding-right: 15px; transition: background-color 0.2s ease-in-out; }
#cbm-toc-floating-panel .cbm-toc-list li:not(.active) > a:hover {  }
#cbm-toc-floating-panel .cbm-toc-toggle-main { display: none; }
#cbm-toc-floating-panel .cbm-toc-toggle{
	top: 4px;
}
/* --- Responsive --- */
/* --- [BẮT ĐẦU THAY ĐỔI] --- */
/* Khi màn hình hẹp hơn, nút sẽ tự động chuyển về vị trí cách cạnh phải 20px */
@media (max-width: 1366px) { 
    #cbm-toc-floating-button { right: 5px !important; } 
}
/* --- [KẾT THÚC THAY ĐỔI] --- */