/* Baro TOC Product Styles */

/* Add a top padding to the scroll target to avoid being hidden by a fixed header */
html {
    scroll-behavior: smooth;
}

.bpt-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
}

.bpt-menu {
    flex: 1 1 250px;
    min-width: 220px;
    position: sticky;
    top: 110px; 
    align-self: flex-start; 
}

@media (max-width: 767px) {
    .bpt-menu {
        position: static; /* hoặc unset */
        top: auto;
    }
}

@media(max-width: 430px) {
    .bpt-wrapper {
        border: none;
    }

    .bpt-menu-list {
        background-color: #f9f9f9;
    }

    .bpt-menu-item a{
        border-bottom: none !important;
        font-size: 14px !important;
    }
    .bpt-menu-item.level-2{
        padding: 0 !important;
    }
    
}
.bpt-content {
    flex: 2 1 60%; /* Takes up more space */
    position: relative; /* Changed for wrapper */
}

.bpt-content-wrapper {
    flex: 2 1 60%; /* Takes up more space */
    position: relative;
}

.bpt-content.collapsed {
    overflow: hidden;
    position: relative; /* Required for the pseudo-element */
}

/* Add the fade-out effect */
.bpt-content.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
    pointer-events: none; /* Allows clicking through the gradient */
}

.bpt-read-more-container {
    padding-top: 10px;
    text-align: center;
}

.bpt-read-more-container.hidden {
    display: none;
}

#bpt-read-more-btn {
    cursor: pointer;
    background: none;
    border: none;
    color: #0073aa; /* WordPress blue */
    font-weight: bold;
    padding: 5px 0;
}

#bpt-read-more-btn:hover {
    text-decoration: underline;
}

.bpt-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bpt-menu-item.level-2{
    padding: 10px 0;
}
.bpt-menu-item a {
    display: block;
    padding: 8px 15px;
    font-size: 1.1875rem;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f4f4f4;
    transition: all 0.2s ease-in-out;
}

.bpt-menu-item.level-3 a {
    padding-left: 30px; /* Indent H3 items */
    font-size: 0.9em;
    color: #555;
}

.bpt-menu-item a:hover {
    background-color: #f9f9f9;
    color: #000;
}

.bpt-menu-item a.active {
    color: #000;
    background: #ddd;
    border-radius: 10px;
    margin-left: -2px; 
}