#lottery-container {
    max-width: 100%;
    margin: 0px auto;
    text-align: center;
    overflow-x: auto;
    display: block;
    /* Ẩn vì không cần nữa */
}

#results-container {
    max-width: 100%;
    margin: 0px auto;
    text-align: center;
    overflow-x: auto;
}

.lottery-table {
    width: 100%;
    border-collapse: collapse;
}

.number-flash {
    font-weight: bold;
    font-size: 18px;
    animation: flash 0.2s ease-in-out;
}

@keyframes flash {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.loading {
    color: transparent;
}

.loading::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loadingio-spinner-spin-hgd29ahypuk {
    width: 20px;
    height: 20px;
    border: 3px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.countdown-text {
    font-size: 18px;
    color: #555;
}

.temp-number {
    color: #f60;
}

/* CSS cho thẻ <a class="alert"> */
.alert {
    display: none;
    font-size: 20px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    text-align: center;
    width: fit-content;
    margin: 20px auto;
}

/* Định dạng liên kết bên trong .alert */
.alert a {
    user-select: none;
    color: #ffffff;
    text-decoration: none; /* Bỏ gạch chân */
    display: block; /* Chiếm toàn bộ không gian của div */
}

/* Hiệu ứng hover cho div hoặc liên kết */
.alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer; /* Con trỏ chuột khi hover */
}

/* Khi alert được hiển thị */
.alert.show {
    display: block;
    animation: slideUp 0.5s ease-out forwards, blinkColors 1.2s infinite;
}

/* Hiệu ứng trượt lên */
@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hiệu ứng nhấp nháy */
@keyframes blinkColors {
    0% {
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        filter: brightness(100%);
    }
    25% {
        background: linear-gradient(45deg, #feca57, #ff006e);
        filter: brightness(130%);
    }
    50% {
        background: linear-gradient(45deg, #48dbfb, #1dd1a1);
        filter: brightness(100%);
    }
    75% {
        background: linear-gradient(45deg, #ff9ff3, #feca57);
        filter: brightness(130%);
    }
    100% {
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        filter: brightness(100%);
    }
}

/* Hiệu ứng trượt lên */
@keyframes slideUp {
    0% {
        transform: translateY(50px);
        /* Bắt đầu từ dưới */
        opacity: 0;
        /* Ẩn hoàn toàn */
    }
    100% {
        transform: translateY(0);
        /* Trượt lên vị trí bình thường */
        opacity: 1;
        /* Hiện hoàn toàn */
    }
}

/* Hiệu ứng nhấp nháy nhiều màu */
@keyframes blinkColors {
    0% {
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        /* Màu 1 */
        color: #ffffff;
        filter: brightness(100%);
    }
    25% {
        background: linear-gradient(45deg, #feca57, #ff006e);
        /* Màu 2 */
        color: #ffffff;
        filter: brightness(90%);
        /* Tăng độ sáng gây chú ý */
    }
    50% {
        background: linear-gradient(45deg, #48dbfb, #1dd1a1);
        /* Màu 3 */
        color: #ffffff;
        filter: brightness(100%);
    }
    75% {
        background: linear-gradient(45deg, #ff9ff3, #feca57);
        /* Màu 4 - thêm màu mới */
        color: #ffffff;
        filter: brightness(90%);
    }
    100% {
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        /* Quay lại màu 1 */
        color: #ffffff;
        filter: brightness(90%);
    }

}

.wait {
    /* Căn giữa nội dung */
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 100%;

    /* Kích thước và khoảng cách */
    width: fit-content;
    padding: 15px 25px;
    margin: 20px auto; /* Căn giữa theo chiều ngang */

    /* Font chữ */
    font-size: 24px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    color: #fff; /* Màu chữ trắng để nổi bật trên nền gradient */

    /* Nền gradient rực rỡ */
    background: linear-gradient(45deg, #ff4d4d, #ff8c00, #ffd700, #00ff7f, #00b7eb);
    background-size: 400%; /* Tăng kích thước để hiệu ứng gradient chuyển động */
    border-radius: 12px; /* Bo góc mềm mại */

    /* Hiệu ứng lung linh */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 69, 0, 0.5);
    animation: gradient 6s ease infinite; /* Hiệu ứng gradient chuyển động */

    /* Đảm bảo nội dung không bị cắt */
    
}

.wait.show{
    display: block;
    animation: slideUp 0.5s ease-out forwards, gradient 6s ease infinite;

}

/* Hiệu ứng gradient chuyển động */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}