/* toc-style.css - Phiên bản 2.1 tối ưu bởi Tips AI Tech */

.beautiful-toc-container {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    width: auto;
    max-width: 700px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

#beautiful-toc-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 15px 0;
    padding: 0;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toc-toggle {
    font-size: 0.8em;
    font-weight: normal;
    color: #0073aa;
    cursor: pointer;
    background: #e9f5ff;
    padding: 3px 8px;
    border-radius: 4px;
    user-select: none;
}

.toc-toggle:hover {
    background: #d0e8ff;
}

#beautiful-toc-list, #beautiful-toc-list ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

#beautiful-toc-list ul {
    padding-left: 20px; /* Thụt lề cho các cấp con */
    margin-top: 8px;
}

#beautiful-toc-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}

#beautiful-toc-list li > a { /* Nhắm trực tiếp vào thẻ a */
    text-decoration: none;
    color: #555;
    transition: color 0.2s ease-in-out;
    display: block; /* Giúp dễ click hơn */
}

#beautiful-toc-list li > a:hover {
    color: #0073aa;
    text-decoration: underline;
}

/* === LỜI KHUYÊN TỐI ƯU CỦA TIPS AI TECH === */
/* Ẩn hoàn toàn mục lục trên các thiết bị mobile có chiều rộng dưới 768px */
@media (max-width: 768px) {
    .beautiful-toc-container {
        display: none !important; /* Lệnh quan trọng nhất để ẩn đi */
    }
}

/* === MÃ CSS TỰ ĐỘNG ĐÁNH SỐ (PHIÊN BẢN 2.4 - HOÀN THIỆN) === */

/* Loại bỏ hoàn toàn bộ đếm và dấu đầu dòng mặc định */
#beautiful-toc-list, #beautiful-toc-list ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

/* Thiết lập bộ đếm gốc cho toàn bộ danh sách */
#beautiful-toc-list {
    counter-reset: toc-counter;
}

/* Áp dụng số và tăng bộ đếm cho MỌI mục li */
#beautiful-toc-list li {
    counter-increment: toc-counter;
}

/* Sử dụng ::before để hiển thị số thứ tự */
#beautiful-toc-list li > a::before {
    /* 
     * counters(tên-bộ-đếm, 'chuỗi-phân-cách')
     * Hàm này sẽ tự động tạo ra chuỗi số lồng nhau như 1, 1.1, 1.1.1 
     */
    content: counters(toc-counter, '.') ". ";
    margin-right: 8px; /* Thêm khoảng cách */
}

/* --- TÙY CHỈNH STYLE CHO TỪNG CẤP ĐỘ --- */

/* Cấp 1 (H2) */
#beautiful-toc-list > li > a::before {
    font-weight: 600; /* Đậm hơn */
    color: #1a73e8; /* Màu xanh */
}

/* Cấp 2 (H3) và sâu hơn */
#beautiful-toc-list ul li a::before {
    font-weight: normal; /* Bình thường */
    color: #5f6368; /* Màu xám */
}

/* Thụt đầu dòng cho các cấp con để tạo sự phân cấp trực quan */
#beautiful-toc-list ul {
    padding-left: 25px; 
    margin-top: 8px;
}