/* --- tableOfContents.css (Tương thích Bootstrap 3, Phiên bản tối ưu) --- */

/* Kiểu chung cho các link trong TOC */
#toc-container .nav > li > a {
    padding: 3px 0px;
	display: block;
	text-decoration: none;
	border-radius: 4px;
    color: #333;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
#toc-container .nav > li > a:hover,
#toc-container .nav > li > a:focus {
    background-color: #eee;
	text-decoration: none;
}
#toc-container .nav > li.active > a {
    color: #ED1C24 !important;
	font-weight: bold;
	background-color: transparent;
	border-radius: 4px;
}
.toc-list-inner { margin-left: 15px; padding-left: 10px; border-left: 1px solid #ccc; }
/* Kiểu cho số thứ tự */
.toc-number { margin-right: 8px; font-weight: normal; color: #555; }
/* .toc-level1 > a > .toc-number { font-weight: bold; color: #337ab7; } */
/* .toc-level2 > a > .toc-number { color: #5cb85c; } */
/* .toc-level3 > a > .toc-number { color: #f0ad4e; } */

/* Placeholder (JS tự tạo) - Chủ yếu dùng cho desktop layout 'top-then-sidebar' */
.toc-placeholder {
    display: none; 
    clear: both; 
}
/* ======================= TIÊU ĐỀ DESKTOP MỚI ======================= */
.toc-desktop-title {
    display: none; /* Ẩn mặc định, chỉ hiện trên desktop */
    font-size: 2rem; 
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #787878;
}
/* ===================== KẾT THÚC TIÊU ĐỀ DESKTOP ===================== */
/* === CSS CHO TOC TRÊN DESKTOP (MÀN HÌNH LỚN) === */
@media (min-width: 768px) {
	.toc-desktop-title {
        display: block;
		padding: 10px;
    }
    /* --- Layout: Sidebar (Mặc định) --- */
    #toc-container.layout-sidebar {
        position: -webkit-sticky; position: sticky;
        top: 20px; 
        max-height: calc(100vh - 40px); 
        overflow-y: auto; 
    }
    #toc-container.layout-sidebar .toc-list-container {
        border: 1px solid #ddd; padding: 15px;
        border-radius: 4px; background-color: #fff;
    }

    /* --- Layout: Top-then-Sidebar --- */
    /* Trạng thái ban đầu khi TOC ở trên cùng */
    #toc-container.layout-top-then-sidebar {
        position: relative; 
        width: 100%;
        margin-bottom: 25px;
        padding: 15px;
        border: 1px solid rgb(51 51 51 / 95%);
        background: #F4F4F4;
        border-radius: 4px;
        /* Sẽ bị ẩn đi khi .toc-fixed-right được thêm vào */
        transition: opacity 0.3s ease, visibility 0s 0.3s; 
    }
    #toc-container.layout-top-then-sidebar.toc-fixed-right-active {
        opacity: 0;
        visibility: hidden;
        /* Vẫn chiếm không gian nếu không có placeholder, nhưng placeholder sẽ xử lý */
    }
    
    /* Bản sao của TOC hoặc TOC được di chuyển và fixed bên phải */
    #toc-fixed-right-sidebar {
        display: none;
        position: fixed;
        top: 0px;
        right: 0px;
        width: auto;
        max-height: 100%;
        overflow-y: auto;
        height: 100%;
        z-index: 1020;
        /* border: 1px solid #ddd; */
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 0;
        /* border-radius: 4px; */
    }
     #toc-fixed-right-sidebar.active { display: block;}


    /* Placeholder khi TOC (layout top-then-sidebar) chuyển sang fixed-right */
    .toc-placeholder.active-for-top-then-sidebar-desktop {
        display: block;
        /* Chiều cao sẽ được JS đặt */
    }

    /* Chung cho cả 2 layout desktop */
    .toc-title-bar { display: none; } 
    #toc-container .toc-list-container, #toc-fixed-right-sidebar .toc-list-container { 
      display: block !important; 
    }
    #toc-container .nav > li.active > a, #toc-fixed-right-sidebar .nav > li.active > a { 
		/* border-left: 2px solid #c7254e; */
        border-radius: 0;
		background-color: transparent;
		color: #015432;
		font-weight: bold;
    }
     #toc-container .nav > li > a:hover, #toc-fixed-right-sidebar .nav > li > a:hover {
        background-color: #ecf0f1;
        color: #2c3e50;
    }
}
        
/* === CSS CHO TOC TRÊN MOBILE (MÀN HÌNH NHỎ) === */
@media (max-width: 767px) {
    /* Placeholder không cần thiết trên mobile nếu body đã có padding-top */
    .toc-placeholder { 
        display: none !important;
    }

    #toc-container { /* Container chính của TOC trên mobile */
        position: fixed;
        top: 0; left: 0; width: 100%;
        z-index: 1030;
        background-color: #ffffff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        border-bottom: 1px solid #ddd;
        height: 50px; /* Chiều cao cố định cho thanh TOC bar */
        
        /* Trạng thái ẩn mặc định bằng transform và opacity */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease;
    }
    /* Khi JS thêm class này, TOC sẽ trượt xuống và hiện ra */
    #toc-container.toc-is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s; 
    }
    /* Nếu là layout top-then-sidebar, TOC gốc trên mobile sẽ bị ẩn hoàn toàn */
    #toc-container.layout-top-then-sidebar {
        /* Có thể ẩn nó đi nếu muốn chỉ dùng 1 cơ chế fixed top cho mobile */
        /* display: none; */ /* Tạm thời vẫn để nó quản lý thanh mobile */
    }
    /* Ẩn sidebar phải trên mobile nếu nó được tạo cho desktop */
    #toc-fixed-right-sidebar {
        display: none !important;
    }
    .toc-title-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px; /* Giảm padding cho vừa height 50px */
        cursor: pointer;
        height: 100%; 
    }
    .toc-title-text {
        font-weight: bold; color: #333; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; 
    }
    .toc-title-bar .toc-arrow {
        font-size: 1.2em; transition: transform 0.3s ease-in-out;
    }

    .toc-list-container {
        display: none; /* Chỉ hiện khi is-expanded */
        position: absolute; /* Để xổ xuống dưới thanh title bar */
        top: 50px; /* Ngay dưới thanh title bar */
        left: 0; right: 0;
        max-height: calc(80vh - 50px); 
        overflow-y: auto;
        padding: 10px 15px;
        background-color: #f9f9f9;
        border-top: 1px solid #eee;
        box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    }
    .nav-stacked > li + li { margin-top: 2px; margin-left: 0; }
    
    
    #toc-container.is-expanded .toc-list-container { display: block; }
    #toc-container.is-expanded .toc-arrow { transform: rotate(180deg); }
}