body {
    background-color: #2a2a40; /* nền sáng vừa phải, dễ nhìn */
    background-image: linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: pixelMove 25s linear infinite; /* chậm, nhẹ nhàng */
}

/* Pixel grid movement */
@keyframes pixelMove {
    0% {
        background-position: 0 0, 0 0;
    }

    50% {
        background-position: 20px 20px, -20px -20px;
    }

    100% {
        background-position: 0 0, 0 0;
    }
}

/* Neon glow color shift */
@keyframes neonGlow {
    0% {
        background-color: #111;
    }

    25% {
        background-color: #1a1a2e;
    }

    50% {
        background-color: #162447;
    }

    75% {
        background-color: #1f4068;
    }

    100% {
        background-color: #1a1a2e;
    }
}

/* Navbar customization */
.navbar {
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(6px);
}

.navbar-brand {
    font-weight: bold;
    font-size: 22px;
    letter-spacing: 1px;
}

.nav-link {
    color: #f8f9fa !important;
}

    .nav-link:hover {
        color: #ffeb3b !important;
    }

/* Footer styling */
.footer {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ccc;
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
}

    .footer a {
        color: #0d6efd;
        text-decoration: none;
    }

        .footer a:hover {
            text-decoration: underline;
        }

.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Card cơ bản */
.card {
    background-color: #fff; /* card trắng */
    color: #000; /* chữ đen */
    border-radius: 10px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

    /* Hover nâng card */
    .card:hover {
        transform: translateY(-5px);
        z-index: 2;
    }

    /* Aura trắng xung quanh viền */
    .card::before {
        content: "";
        position: absolute;
        top: -6px;
        left: -6px;
        width: calc(100% + 12px);
        height: calc(100% + 12px);
        border-radius: 12px;
        pointer-events: none;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        box-shadow: 0 0 5px rgba(255,255,255,0.6), 0 0 10px rgba(255,255,255,0.4), 0 0 15px rgba(255,255,255,0.3);
    }

    /* Khi hover -> hiện aura */
    .card:hover::before {
        opacity: 1;
        animation: whiteGlowBorder 1.5s infinite alternate;
    }

/* Animation glow trắng */
@keyframes whiteGlowBorder {
    0% {
        box-shadow: 0 0 5px rgba(255,255,255,0.6), 0 0 10px rgba(255,255,255,0.4), 0 0 15px rgba(255,255,255,0.3);
    }

    50% {
        box-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 12px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.4);
    }

    100% {
        box-shadow: 0 0 5px rgba(255,255,255,0.6), 0 0 10px rgba(255,255,255,0.4), 0 0 15px rgba(255,255,255,0.3);
    }
}