html {
    scroll-behavior: smooth;
}

body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
}

.dainguyen-header {
    background-color: #1F3A25;
}

.dainguyen-header-img {
    background-size: clamp(300px, 50vw, 500px);
    opacity: .4;
    /* background-position: 0% 50%; */
    background-size: 500px;
    background-size: clamp(300px, 50vw, 500px);
}

.dainguyen-section-name {
    background-color: #ECE8D6;
}

.dainguyen-section-name-img {
    background-size: clamp(300px, 50vw, 500px);
    opacity: .25;
    background-position-y: 50%;
    mix-blend-mode: color-dodge;
}

.dainguyen-section-name-line {
    background-color: #1F3A25;
}

.dainguyen-section-name-line-img {
    background-size: clamp(300px, 50vw, 500px);
    background-position-y: 50%;
    mix-blend-mode: color-dodge;
}

.section-name-content {}

.section-name-content .img-nam {
    object-fit: cover;
    object-position: 50% 20%;
}

.section-name-content .img-nu {
    object-fit: cover;
}

#cd {
    background: radial-gradient(circle at center,
            #1F3A25 40%,
            #2e5a3a 70%,
            #0f1f14 100%);

    animation: spin 5s linear infinite;
    box-shadow: 0 0 15px rgba(31, 58, 37, 0.6);
}

/* quay CD */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* glow khi phát */
.playing #cd {
    box-shadow:
        0 0 10px rgba(31, 58, 37, 0.8),
        0 0 25px rgba(31, 58, 37, 0.6),
        0 0 40px rgba(31, 58, 37, 0.4);
}

.bar {
    width: 3px;
    height: 20px;
    /* chiều cao cố định */
    background: white;
    border-radius: 2px;

    transform-origin: center;
    /* QUAN TRỌNG */
    transform: scaleY(0.3);
    transition: transform 0.1s linear;
}

@keyframes handShake {
    0% {
        transform: rotate(0deg) translateX(0);
    }

    20% {
        transform: rotate(2deg) translateX(2px);
    }

    40% {
        transform: rotate(-2deg) translateX(-2px);
    }

    60% {
        transform: rotate(1.5deg) translateX(1px);
    }

    80% {
        transform: rotate(-1deg) translateX(-1px);
    }

    100% {
        transform: rotate(0deg) translateX(0);
    }
}

.envelope-wrapper {
    animation: handShake 1.2s ease-in-out infinite;
}

/* intro animation */
.intro-hide {
    opacity: 0;
    transform: scale(1.2);
    filter: blur(10px);
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

#introScreen {
    z-index: 50;
}