#mobile-toc-wrapper, #desktop-toc-container { box-sizing: border-box; }
body.gtoc-locked { overflow: hidden !important; }
#mobile-toc-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 89; }
.toc-h2 { font-size: var(--gtoc-h2); font-weight: 600; padding-left: 10px; margin-top: 2px; }
.toc-h3 { font-size: var(--gtoc-h3); padding-left: 25px; font-weight: 400; }
.toc-h4 { font-size: var(--gtoc-h4); padding-left: 40px; font-weight: 400; color: #555; }
.toc-h5 { font-size: var(--gtoc-h5); padding-left: 55px; font-weight: 400; color: #777; }
@keyframes gtoc-pop { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
#desktop-toc-list a.active, #mobile-toc-dropdown-list a.active { color: var(--gtoc-primary); font-weight: 600; background-color: var(--gtoc-primary-light); border-radius: 6px; }
#desktop-toc-list a.active::before, #mobile-toc-dropdown-list a.active::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 8px; margin-bottom: -3px; background-color: var(--gtoc-primary); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; animation: gtoc-pop 0.3s ease-out forwards; }

@media (min-width: 769px) {
    #mobile-toc-wrapper, #mobile-toc-overlay { display: none !important; }
    #desktop-toc-container { display: block; width: 100%; background: var(--gtoc-bg); padding: 15px 0; border-radius: 8px; border: 1px solid #eaeaea; position: sticky; top: 20px; z-index: 99; align-self: start; }
    .dtoc-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; text-transform: uppercase; color: #333; border-bottom: 2px solid #e8e3d8; padding: 0 15px 8px 15px; }
    .dtoc-scroll-area { max-height: 70vh; overflow-y: auto; }
    .dtoc-scroll-area::-webkit-scrollbar { width: 4px; }
    .dtoc-scroll-area::-webkit-scrollbar-track { background: transparent; }
    .dtoc-scroll-area::-webkit-scrollbar-thumb { background: #dcd0c0; border-radius: 4px; }
    .dtoc-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--gtoc-primary); }
    #desktop-toc-list { list-style: none; padding: 0; margin: 0; }
    #desktop-toc-list li { margin: 0; line-height: 1.3; }
    #desktop-toc-list a { text-decoration: none; color: #444; display: block; transition: all 0.2s ease; }
    #desktop-toc-list a.toc-h2 { padding: 6px 15px; font-size: var(--gtoc-h2); font-weight: 600; margin-top: 2px; }
    #desktop-toc-list a.toc-h3 { padding: 6px 15px 6px 30px; font-size: var(--gtoc-h3); }
    #desktop-toc-list a.toc-h4 { padding: 6px 15px 6px 45px; font-size: var(--gtoc-h4); color: #555; }
    #desktop-toc-list a.toc-h5 { padding: 6px 15px 6px 60px; font-size: var(--gtoc-h5); color: #777; }
    #desktop-toc-list a.active { border-radius: 0; }
}

@media (max-width: 768px) {
    #desktop-toc-container { display: none; }
    
    /* Thiết lập lại wrapper: Mặc định nằm Absolute ở trên cùng */
    #mobile-toc-wrapper { display: block; position: absolute; left: 0; top: 0; width: 100%; z-index: 999; }
    
    /* Class này sẽ được JS thêm vào khi cuộn chuột qua Header */
    #mobile-toc-wrapper.is-fixed { position: fixed; top: 0 !important; }
    
    #mobile-sticky-heading { display: flex; justify-content: flex-start; align-items: center; gap: 10px; background-color: var(--gtoc-bg); color: #222222; padding: 10px 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-bottom: 1px solid #eee; cursor: pointer; }
    #m-sticky-icon { display: flex; align-items: center; justify-content: center; color: var(--gtoc-primary); font-size: 22px; }
    .toc-icon-close { display: none; } 
    #mobile-toc-wrapper.is-open .toc-icon-list { display: none; }
    #mobile-toc-wrapper.is-open .toc-icon-close { display: block; font-size: 24px;}
    
    #m-sticky-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; font-size: 16px; font-weight: 600; transition: font-size 0.2s ease; }
    #m-sticky-text:not(:empty) { font-size: 14px; color: #444; }
    #m-sticky-text[data-default] { font-size: 14px; }
    
    /* Dropdown menu giờ sẽ xổ từ trên xuống thay vì trượt từ dưới lên */
    #mobile-toc-dropdown { display: none; background: var(--gtoc-bg); max-height: 60vh; overflow-y: auto; box-shadow: 0 10px 15px rgba(0,0,0,0.1); border-top: 1px solid #eee; -webkit-overflow-scrolling: touch; position: absolute; top: 100%; width: 100%; }
    #mobile-toc-wrapper.is-open #mobile-toc-dropdown { display: block; }
    #mobile-toc-dropdown-list { list-style: none; padding: 5px 0; margin: 0; }
    #mobile-toc-dropdown-list li { margin: 0; }
    #mobile-toc-dropdown-list a { text-decoration: none; color: #444; display: block; line-height: 1.3; }
    #mobile-toc-dropdown-list a.toc-h2 { padding: 5px 15px; font-size: var(--gtoc-h2); font-weight: 600; }
    #mobile-toc-dropdown-list a.toc-h3 { padding: 5px 15px 5px 25px; font-size: var(--gtoc-h3); }
    #mobile-toc-dropdown-list a.toc-h4 { padding: 5px 15px 5px 35px; font-size: var(--gtoc-h4); }
    #mobile-toc-dropdown-list a.toc-h5 { padding: 5px 15px 5px 45px; font-size: var(--gtoc-h5); }
}