/* NEON STYLE BOXES */
.neon-box {
    position: relative;
    border-radius: 10px;
}

.neon-box-1 {
    border: 2px solid rgba(94, 234, 255, 0.7);
    box-shadow: 0 0 10px rgba(94, 234, 255, 0.5);
    background: rgba(28, 28, 46, 0.9);
    color: white;
}

.neon-box-2 {
    border: 2px solid rgba(255, 0, 255, 0.7);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
    background: rgba(50, 0, 50, 0.9);
    color: white;
}

.neon-box-3 {
    border: 2px solid rgba(144, 238, 144, 0.8);
    box-shadow: 0 0 12px rgba(144, 238, 144, 0.5);
    background: rgba(20, 50, 20, 0.9);
    color: white;
}

.neon-box-4 {
    border: 2px solid rgba(255, 165, 0, 0.7);
    box-shadow: 0 0 12px rgba(255, 165, 0, 0.5);
    background: rgba(60, 30, 0, 0.9);
    color: white;
}

.neon-box-5 {
    border: 2px solid rgba(255, 105, 180, 0.7);
    box-shadow: 0 0 14px rgba(255, 105, 180, 0.6);
    background: rgba(60, 20, 40, 0.9);
    color: white;
}

.neon-box-6 {
    border: 2px solid rgba(0, 191, 255, 0.7);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.6);
    background: rgba(0, 40, 80, 0.85);
    color: white;
}

.neon-box-7 {
    border: 2px solid rgba(255, 255, 0, 0.7);
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.6);
    background: rgba(80, 80, 20, 0.85);
    color: white;
}

/* NEON STYLE BUTTONS */
.neon-btn {
    position: relative;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid transparent; /* để giữ layout */
    background: transparent;
    color: white;
    transition: all 0.3s ease;
    outline: none;
    text-decoration: none;
}

/* Static */
.neon-btn-static-1 {
    background: #39FF14;
    box-shadow: 0 0 10px #39FF14;
    color: black;
}
.neon-btn-static-1.hover,
.neon-btn-static-1:hover {
    background: #5CFF5C;
    box-shadow: 0 0 15px #5CFF5C, 0 0 25px #5CFF5C;
    color: black;
}

.neon-btn-static-2 {
    background: #B026FF;
    box-shadow: 0 0 10px #B026FF;
    color: white;
}
.neon-btn-static-2.hover,
.neon-btn-static-2:hover {
    background: #D46CFF;
    box-shadow: 0 0 15px #D46CFF, 0 0 25px #D46CFF;
    color: white;
}

.neon-btn-static-3 {
    background: #FF2079;
    box-shadow: 0 0 10px #FF2079;
    color: black;
}
.neon-btn-static-3.hover,
.neon-btn-static-3:hover {
    background: #FF5FA2;
    box-shadow: 0 0 15px #FF5FA2, 0 0 25px #FF5FA2;
    color: black;
}

.neon-btn-static-4 {
    background: #FFFF33;
    box-shadow: 0 0 10px #FFFF33;
    color: black;
}
.neon-btn-static-4.hover,
.neon-btn-static-4:hover {
    background: #FFFF66;
    box-shadow: 0 0 15px #FFFF66, 0 0 25px #FFFF66;
    color: black;
}

.neon-btn-static-5 {
    background: #5EEAFF;
    box-shadow: 0 0 10px #5EEAFF;
    color: black;
}
.neon-btn-static-5.hover,
.neon-btn-static-5:hover {
    background: #A0F8FF;
    box-shadow: 0 0 15px #A0F8FF, 0 0 25px #A0F8FF;
    color: black;
}
.neon-btn-static-6 {
    background: #FFA500;
    box-shadow: 0 0 10px #FFA500;
    color: black;
}
.neon-btn-static-6.hover,
.neon-btn-static-6:hover {
    background: #FFA500;
    box-shadow: 0 0 15px #FFA500, 0 0 25px #FFA500;
    color: black;
}

/* Dynamic */
.neon-btn-dynamic-1 {
    background: #00FFD1;
    box-shadow: 0 0 10px #00FFD1;
    color: black;
}
.neon-btn-dynamic-1.hover,
.neon-btn-dynamic-1:hover {
    background: #39FF14;
    box-shadow: 0 0 15px #39FF14;
    color: black;
}

.neon-btn-dynamic-2 {
    background: #FF00FF;
    box-shadow: 0 0 10px #FF00FF;
    color: black;
}
.neon-btn-dynamic-2.hover,
.neon-btn-dynamic-2:hover {
    background: #00FFFF;
    box-shadow: 0 0 15px #00FFFF;
    color: black;
}

.neon-btn-dynamic-3 {
    background: #FF6EC7;
    box-shadow: 0 0 10px #FF6EC7;
    color: black;
}
.neon-btn-dynamic-3.hover,
.neon-btn-dynamic-3:hover {
    background: #FFC300;
    box-shadow: 0 0 15px #FFC300;
    color: black;
}

.neon-btn-dynamic-4 {
    background: #00BFFF;
    box-shadow: 0 0 10px #00BFFF;
    color: black;
}
.neon-btn-dynamic-4.hover,
.neon-btn-dynamic-4:hover {
    background: #FF1493;
    box-shadow: 0 0 15px #FF1493;
    color: black;
}

.neon-btn-dynamic-5 {
    background: #7FFF00;
    box-shadow: 0 0 10px #7FFF00;
    color: black;
}
.neon-btn-dynamic-5.hover,
.neon-btn-dynamic-5:hover {
    background: #FF4500;
    box-shadow: 0 0 15px #FF4500;
    color: black;
}

.neon-btn-dynamic-6 {
    background: #FF073A; /* Đỏ neon */
    box-shadow: 0 0 10px #FF073A;
    color: white;
}
.neon-btn-dynamic-6.hover,
.neon-btn-dynamic-6:hover {
    background: #FFD700;
    box-shadow: 0 0 15px #FFD700;
    color: black;
}

/* FLICKER EFFECTS */
@keyframes flicker-1 {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(94, 234, 255, 0.7);
    }
    20%, 22%, 24%, 55% {
        opacity: 0.7;
        box-shadow: none;
    }
}

@keyframes flicker-2 {
    0%, 12%, 14%, 27%, 40%, 70%, 73%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(94, 234, 255, 0.7);
    }
    13%, 26%, 41%, 71% {
        opacity: 0.7;
        box-shadow: none;
    }
}

@keyframes flicker-3 {
    0%, 10%, 15%, 33%, 60%, 85%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(94, 234, 255, 0.7);
    }
    11%, 16%, 34%, 61%, 86% {
        opacity: 0.7;
        box-shadow: none;
    }
}

@keyframes flicker-4 {
    0%, 8%, 16%, 24%, 48%, 64%, 80%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(94, 234, 255, 0.7);
    }
    9%, 17%, 25%, 49%, 65%, 81% {
        opacity: 0.7;
        box-shadow: none;
    }
}

.neon-flicker-1 {
    animation: flicker-1 3s infinite;
}
.neon-flicker-2 {
    animation: flicker-2 3.3s infinite;
}
.neon-flicker-3 {
    animation: flicker-3 3.5s infinite;
}
.neon-flicker-4 {
    animation: flicker-4 3.8s infinite;
}

/* NEON STYLE SELECT */
select.neon-select {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #00FFFF;
    box-shadow: 0 0 10px #00FFFF;
    color: #FFFFFF;
    transition: 0.3s;
}
select.neon-select:focus {
    border-color: #5EEAFF;
    box-shadow: 0 0 15px #5EEAFF;
    background: #FFFFFF;
    color: black;
    outline: none;
}

/* NEON STYLE SELECT - SELECT 2 */
select.neon-select + .select2-container {
    width: 100% !important;
}
select.filter-select2.neon-select + .select2-container {
    min-width: 300px;
}

select.neon-select + .select2-container .select2-selection--single,
select.neon-select + .select2-container .select2-selection--multiple {
    font-size: 16px;
    width: 100%;
    height: unset;
    padding: .275rem 2.25rem .275rem .75rem;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #00FFFF;
    box-shadow: 0 0 10px #00FFFF;
    border-radius: 5px;
}

select.neon-select + .select2-container .select2-selection--multiple {
    padding: .35rem 0 .35rem 0
}

select.neon-select + .select2-container .select2-selection--multiple .select2-search__field {
    color: #FFFFFF;
}

select.neon-select + .select2-container .select2-selection--single .select2-selection__rendered,
select.neon-select + .select2-container .select2-selection--multiple .select2-selection__rendered {
    color: #FFFFFF;
}

select.neon-select + .select2-container .select2-selection--single .select2-selection__arrow,
select.neon-select + .select2-container .select2-selection--multiple .select2-selection__arrow {
    height: 40px;  
}

.select2-container--open .select2-dropdown {
    background: rgba(0, 0, 0, 1);
    border: 2px solid #00FFFF;
    box-shadow: 0 0 10px #00FFFF;
}

.select2-container--open li.select2-results__option--selected {
    background-color: #003344 !important;
    color: #00FFFF !important;
}
.select2-container--open li.select2-results__option--highlighted {
    background-color: #005566 !important;
    color: #5EEAFF !important;
}

.select2-selection__choice {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    background-color: #003344 !important;
    border: 2px solid #005566 !important;
}

.select2-selection__choice button {
    color: #FFFFFF !important;
}

/* NEON STYLE INPUT */
input.neon-input {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #00FFFF;
    box-shadow: 0 0 10px #00FFFF;
    color: #FFFFFF;
    font-size: 16px;
    width: 100%;
    border-radius: 5px;
    transition: 0.3s;
}

input.neon-input:focus {
    border-color: #5EEAFF;
    box-shadow: 0 0 15px #5EEAFF;
    outline: none;
}

input.neon-input[readonly] {
    background: rgba(0, 0, 0, 0.4);
    border: 2px dashed rgba(0, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
    cursor: not-allowed;
}

/* NEON TEXT */
.neon-text {
    font-weight: 500;
    transition: 0.3s ease;
}

.neon-text-1 {
    color: #4cd1d1;
    text-shadow: 0 0 3px #4cd1d1;
}
.neon-text-1:hover,
.neon-text-1.hover {
    color: #CFFFFF;
    text-shadow: 0 0 8px #CFFFFF, 0 0 16px #5EEAFF, 0 0 30px #5EEAFF;
}

.neon-text-2 {
    color: #2ebd12;
    text-shadow: 0 0 3px #2ebd12;
}
.neon-text-2:hover,
.neon-text-2.hover {
    color: #B6FF9E;
    text-shadow: 0 0 8px #B6FF9E, 0 0 16px #39FF14, 0 0 30px #39FF14;
}

.neon-text-3 {
    color: #cc2c94;
    text-shadow: 0 0 3px #cc2c94;
}
.neon-text-3:hover,
.neon-text-3.hover {
    color: #FFD1F1;
    text-shadow: 0 0 8px #FFD1F1, 0 0 16px #FF44CC, 0 0 30px #FF44CC;
}

.neon-text-4 {
    color: #ccab00;
    text-shadow: 0 0 3px #ccab00;
}
.neon-text-4:hover,
.neon-text-4.hover {
    color: #FFF9C4;
    text-shadow: 0 0 8px #FFF9C4, 0 0 16px #FFD700, 0 0 30px #FFD700;
}

.neon-text-5 {
    color: #cc3900;
    text-shadow: 0 0 3px #cc3900;
}
.neon-text-5:hover,
.neon-text-5.hover {
    color: #FFB47F;
    text-shadow: 0 0 8px #FFB47F, 0 0 16px #FF4D00, 0 0 30px #FF4D00;
}

.neon-text-6 {
    color: #8e28dc;
    text-shadow: 0 0 3px #8e28dc;
}
.neon-text-6:hover,
.neon-text-6.hover {
    color: #E0B3FF;
    text-shadow: 0 0 8px #E0B3FF, 0 0 16px #9D00FF, 0 0 30px #9D00FF;
}

.neon-text-7 {
    color: #0099cc;
    text-shadow: 0 0 3px #0099cc;
}
.neon-text-7:hover,
.neon-text-7.hover {
    color: #D4FFFF;
    text-shadow: 0 0 8px #D4FFFF, 0 0 16px #00FFFF, 0 0 30px #00FFFF;
}

/* FLICKER EFFECTS FOR TEXT */
@keyframes flicker-text-1 {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
    }
    20%, 22%, 24%, 55% {
        opacity: 0.7;
        box-shadow: none;
    }
}

@keyframes flicker-text-2 {
    0%, 12%, 14%, 27%, 40%, 70%, 73%, 100% {
        opacity: 1;
    }
    13%, 26%, 41%, 71% {
        opacity: 0.7;
        box-shadow: none;
    }
}

@keyframes flicker-text-3 {
    0%, 10%, 15%, 33%, 60%, 85%, 100% {
        opacity: 1;
    }
    11%, 16%, 34%, 61%, 86% {
        opacity: 0.7;
        box-shadow: none;
    }
}

@keyframes flicker-text-4 {
    0%, 8%, 16%, 24%, 48%, 64%, 80%, 100% {
        opacity: 1;
    }
    9%, 17%, 25%, 49%, 65%, 81% {
        opacity: 0.7;
        box-shadow: none;
    }
}

.neon-flicker-text-1 {
    animation: flicker-text-1 3.3s infinite;
}
.neon-flicker-text-2 {
    animation: flicker-text-2 3.5s infinite;
}
.neon-flicker-text-3 {
    animation: flicker-text-3 3.8s infinite;
}
.neon-flicker-text-4 {
    animation: flicker-text-4 3s infinite;
}

@media (max-width: 768px) {
    /* NEON SELECT */
    select.neon-select + .select2-container .select2-selection--single,
    select.neon-select + .select2-container .select2-selection--multiple {
        width: 100%;
    }
}

.pagination-links .pagination .page-link {
    color: black;
}

.pagination-links .pagination li.page-item .page-link {
    background-color: #2ebd12;
    box-shadow: 0 0 3px #2ebd12;
}

.pagination-links .pagination li.page-item .page-link:hover,
.pagination-links .pagination li.page-item.active .page-link {
    background-color: #B6FF9E;
    box-shadow: 0 0 8px #B6FF9E, 0 0 16px #39FF14, 0 0 30px #39FF14;
    border-color: #B6FF9E;
}