.neon-text {
    color: #ffffff;
    text-shadow: 0 0 5px #a5b122, 0 0 10px #21350c, 0 0 20px #14af40, 0 0 40px #77cc00, 0 0 80px #07cc00;
}

.neon-button {
    background: linear-gradient(45deg, #333, #666);
    color: #c9dee5;
    box-shadow: 0 0 10px #33ccff, 0 0 20px #33ccff, 0 0 30px #0099cc;
    transition: all 0.2s ease-in-out;
}

.neon-button:hover {
    transform: scale(1.1);
    background: #444;
    box-shadow: 0 0 15px #33ccff, 0 0 30px #33ccff, 0 0 45px #0099cc;
}

.blink-green {
    animation: blink-green 1s infinite;
}

.blink-red {
    animation: blink-red 1s infinite;
}

@keyframes blink-green {

    0%,
    100% {
        background-color: #00ff00;
    }

    50% {
        background-color: #006600;
    }
}

@keyframes blink-red {

    0%,
    100% {
        background-color: #ff0000;
    }

    50% {
        background-color: #660000;
    }
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.video-container::before {
    content: '';
    display: block;
    padding-top: 100%;
}

.scan-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(51, 204, 255, 0.5), transparent);
    animation: scan 3s infinite;
}

@keyframes scan {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thêm hiệu ứng ghi hình */
.recording-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ff0000;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}