/* 🔔 Popup rung */
.shake {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-8px);
    }

    40%, 80% {
        transform: translateX(8px);
    }
}

/* 🔥 Viền sáng khi click ngoài */
.alert-focus {
    outline: 2px solid #f87171 !important;
    box-shadow: 0 0 10px #f87171 !important;
}

/* ✨ Nút Hủy nhấp nháy */
.btn-warning-flash {
    animation: flash 0.6s ease-in-out;
}

@keyframes flash {
    0%, 100% {
        background-color: #e5e7eb;
        color: #374151;
    }

    50% {
        background-color: #f87171;
        color: white;
    }
}
/* 🔴 Nút Xóa màu Danger */
.btn-danger-confirm {
    background-color: #ef5f5f !important; /* đỏ đậm */
    color: #fff !important;
}

.btn-danger-confirm:hover {
        background-color: #b91c1c !important;
        transform: scale(1.05);
}

@media (max-width: 1600px) {
    .table-centered .hide-on-small-row {
        display: none !important;
    }
}

@media (max-width: 1600px) {
    .hide-on-small-row {
        display: none !important;
    }
}

/* 🔴Mobi */


@media (max-width: 992px) {
    .table-centered .hide-on-tablet-row {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .hide-on-tablet-row {
        display: none !important;
    }
}



@media (max-width: 576px) {
    .table-centered .hide-on-mobi-row {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .hide-on-mobi-row {
        display: none !important;
    }
}

@media (max-width: 576px) {

    #searchBox {
        width: 100%;
    }

.nav.nav-mobi {
        width: 76vw;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

        .nav.nav-mobi .nav-item:first-child {
            flex: 0 0 50%;
            box-sizing: border-box;
        }

    .nav.nav-mobi .nav-item:last-child {
        flex: 1;
        box-sizing: border-box;
    }

    .nav.nav-mobi .nav-item button {
        width: 100%;
        box-sizing: border-box;
    }


    .nav.nav-search-mobi {
        width: 75vw;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

        .nav.nav-search-mobi .nav-item:first-child {
            flex: 0 0 75%;
            box-sizing: border-box;
        }

        .nav.nav-search-mobi .nav-item:last-child {
            flex: 1;
            box-sizing: border-box;
        }

        .nav.nav-search-mobi .nav-item button {
            width: 100%;
            box-sizing: border-box;
        }

    /* Container ul chia 2 cột detail */
    .nav.nav-mobi-detail {
        width: 75vw;
        display: flex;
        flex-wrap: wrap; /* xuống dòng nếu cần */
        gap: 5px; /* khoảng cách giữa li */
    }

        /* Li chiếm 50% width */
        .nav.nav-mobi-detail .nav-item {
            flex: 0 0 48%; /* mỗi li ~50%, còn lại gap */
            box-sizing: border-box;
        }

            /* Button trong li chiếm hết li */
            .nav.nav-mobi-detail .nav-item button {
                width: 100%;
                box-sizing: border-box;
            }
}