/**
 * Back to Top Button Styles
 */

/* Container của nút */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #343a40;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    z-index: 9999;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.3s;
}

/* Icon mũi tên */
#back-to-top i {
    font-size: 18px;
}

/* Hiển thị nút */
#back-to-top.show {
    display: block;
}

/* Hover effect */
#back-to-top:hover {
    background-color: #0056b3;
    transform: translateY(-3px);
}

/* Active state khi click */
#back-to-top.active {
    transform: scale(0.9);
}

/* Hiệu ứng pulse để thu hút sự chú ý */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(111, 66, 193, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(111, 66, 193, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(111, 66, 193, 0);
    }
}

#back-to-top.pulse {
    animation: pulse 1.5s infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    
    #back-to-top i {
        font-size: 16px;
        line-height: 40px;
    }
}

@media (max-width: 480px) {
    #back-to-top {
        bottom: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
    }
    
    #back-to-top i {
        font-size: 14px;
        line-height: 35px;
    }
} 