body {
    overflow-x: hidden;
    overflow-y: auto;
}

::-webkit-scrollbar {
    display: none;
}

fieldset {
    width: 100%;
    border: 1px solid gray;
    padding: 20px;

    border-radius: 10px;
}

fieldset legend {
    margin: 20px;
}

fieldset input {
    border-radius: 10px;
    padding: 10px;
}

fieldset textarea {
    width: 100%;
    border-radius: 10px;
    margin: auto;
}

fieldset div {

    padding: 10px;
    margin: 10px;
}

.f-8 {
    font-size: 0.8rem;
}
.ptr{
    cursor: pointer;
}

.parallax-bg {
    background-image: url('../images/vnbg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Tablets */
@media (max-width: 1024px) {
    .parallax-bg {
        background-attachment: scroll;
        background-position: center top;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .parallax-bg {
        background-image: url('../images/vnbgmob.png');
        background-size: cover;
        background-attachment: scroll;
        background-position: center;
    }
}

@media (max-width: 480px) {
    .parallax-bg {
        background-image: url('../images/vnbgmob.png');
        background-size: cover;
        background-attachment: scroll;
    }
}

/* Fade animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out;
}

.glass {
    background: rgba(18, 1, 32, 0.452);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding:10px;
}
.glass2 {
  background: linear-gradient(rgba(1, 7, 26, 0.829), rgba(22, 1, 27, 0.76));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(56,189,248,0.4),
            0 0 40px rgba(56,189,248,0.4),
            0 0 60px rgba(56,189,248,0.2);
        opacity: 0.6;
    }
    50% {
        box-shadow:
            0 0 35px rgba(56,189,248,0.9),
            0 0 70px rgba(56,189,248,0.7),
            0 0 100px rgba(56,189,248,0.4);
        opacity: 1;
    }
}
@keyframes neonPulse2 {
    0%, 100% {
        box-shadow:
            0 0 5px rgba(107, 56, 248, 0.4),
            0 0 10px rgba(107, 56, 248,0.4),
            0 0 15px rgba(107, 56, 248,0.2);
        opacity: 0.6;
    }
    50% {
        box-shadow:
            0 0 10px rgba(107, 56, 248,0.9),
            0 0 20px rgba(107, 56, 248,0.7),
            0 0 25px rgba(107, 56, 248,0.4);
        opacity: 1;
    }
}
@keyframes neonPulse3 {
    0%, 100% {
        box-shadow:
            0 0 2px rgba(243, 3, 3, 0.4),
            0 0 4px rgba(88, 2, 31, 0.4),
            0 0 6px rgba(156, 28, 71, 0.2);
        opacity: 0.6;
    }
    50% {
        box-shadow:
            0 0 3px rgba(243, 3, 3, 0.4),
            0 0 5px rgba(88, 2, 31, 0.4),
            0 0 86px rgba(156, 28, 71, 0.2);
        opacity: 1;
    }
}

.neon-pulse {
    animation: neonPulse 2.5s ease-in-out infinite;
    border: 2px solid rgba(56,189,248,0.6);
}
.neon-pulse2 {
    animation: neonPulse2 2.5s ease-in-out infinite;
    border: 2px solid rgba(107, 56, 248,0.6);
}
.neon-pulse3 {
    animation: neonPulse3 2.5s ease-in-out infinite;
    border: 0.5px solid rgba(188, 215, 226, 0.418);
}

.glass-dark {
    /* Dark translucent base */
    background: linear-gradient(135deg,
            rgba(20, 20, 30, 0.65),
            rgba(10, 10, 20, 0.45));

    /* Frosted glass */
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);

    /* Subtle inner + outer border */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 12px 40px rgba(0, 0, 0, 0.55);

    border-radius: 18px;

    /* Improve text readability */
    color: rgba(230, 235, 245, 0.92);
}
.glass-dark.neon {
    box-shadow:
        inset 0 0 0 1px rgba(99, 102, 241, 0.15),
        0 0 18px rgba(99, 102, 241, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.6);
}
.glass-dark:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 18px 48px rgba(0, 0, 0, 0.7);
}
.glass-black {
    /* Dark translucent base */
    background: linear-gradient(135deg,
            black,
           rgb(1, 16, 34));

    /* Frosted glass */
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);

    /* Subtle inner + outer border */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 12px 40px rgba(0, 0, 0, 0.55);

    border-radius: 18px;

    /* Improve text readability */
    color: rgba(230, 235, 245, 0.92);
}
.glass-item {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.5rem;       /* p-2 */

  border: 1px solid rgba(255, 255, 255, 0.10);

  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;      /* space-y-1 */
}