.navbar-toggler{
    border: none;
    padding: 0;
    outline: none;
    &:focus{
        box-shadow: none;
    }
    .hamburger-toggle{
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        z-index: 11;
        .hamburger {
            position: absolute;
            transform: translate(-50%, -50%) rotate(0deg);
            left: 50%;
            top: 50%;
            width: 50%;
            height: 50%;
            pointer-events: none;
            span {
                width: 100%;
                height: 4px;
                position: absolute;
                background: #333;
                border-radius: 2px;
                z-index: 1;
                transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0), background 0.2s cubic-bezier(0.77,0.2,0.05,1.0), all 0.2s ease-in-out;
                left: 0px;
                &:first-child{
                    top: 10%;
                    transform-origin: 50% 50%;
                    transform: translate(0% -50%) !important;
                }
                &:nth-child(2){
                    top: 50%;
                    transform: translate(0,-50%);
                }
                &:last-child{
                    left: 0px;
                    top: auto;
                    bottom: 10%;
                    transform-origin: 50% 50%;
                }
            }
            &.active{
                span {
                    position: absolute;
                    margin: 0;
                    &:first-child{
                        top: 45%;
                        transform: rotate(45deg);
                    }
                    &:nth-child(2){
                        left: 50%;
                        width: 0px;
                    }
                    &:last-child{
                        top: 45%;
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }
}


/* ===== Accordion (Table of Content) Styles ===== */
.accordion-button {
    /* Thêm hiệu ứng chuyển màu khi hover/mở/đóng */
    transition: background-color 0.3s ease;
}
.accordion-button:not(.collapsed) {
    /* Khi accordion đang mở */
    background-color: #0d6efd !important; /* Màu nền xanh bootstrap primary */
    color: white; /* Chữ trắng để nổi bật */
}
.accordion-body {
    /* Nội dung bên trong accordion */
    font-size: 0.95rem; /* Chữ hơi nhỏ hơn mặc định */
    line-height: 1.5; /* Khoảng cách dòng thoáng hơn */
}

/* ===== Code Block & Copy Button Styles ===== */
pre {
    position: relative; /* Để định vị nút copy ở góc phải */
}
pre code {
    background-color: #f8f9fa; /* Màu nền xám nhạt cho code */
    padding: 10px; /* Khoảng cách bên trong code block */
    display: block;
    border-radius: 5px; /* Bo góc nhẹ cho code block */
    font-size: 0.9rem; /* Giảm nhẹ cỡ chữ */
    overflow-x: auto; /* Thêm thanh cuộn ngang nếu code dài */
}
.copy-btn {
    position: absolute; /* Định vị nút trong khối pre */
    top: 5px;
    right: 5px;
    background: #0d6efd; /* Màu xanh bootstrap primary */
    color: #fff; /* Chữ trắng */
    border: none;
    padding: 2px 8px; /* Nhỏ gọn vừa phải */
    font-size: 0.8rem; /* Cỡ chữ nhỏ */
    border-radius: 4px; /* Bo góc nhẹ */
    cursor: pointer; /* Con trỏ hình bàn tay */
}
.copy-btn:active {
    /* Hiệu ứng khi click */
    background: #0b5ed7; /* Màu xanh đậm hơn */
}