/* SPLASH SCREEN */
 .splash-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     opacity: 1;
     transition: opacity 0.3s ease;
 }

 .splash-screen.fade-out {
     opacity: 0;
     pointer-events: none;
 }

 /* Container chính logo */
 .intro-container1 {
     position: relative;
     width: 160px;
     height: 160px;
     z-index: 5;
 }

 /* Logo container */
 .logo-container1 {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: #fff;
     box-shadow:
         0 0 15px rgba(220, 85, 108, 0.4),
         0 0 30px rgba(203, 58, 80, 0.25),
         inset 0 0 10px rgba(227, 64, 64, 0.3);
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     overflow: hidden;
     animation: fadeInScale 2s ease forwards;
     z-index: 10;
     cursor: default;
     transition: box-shadow 0.3s ease;
 }

 .logo-container1:hover {
     box-shadow:
         0 0 30px #db6a6a,
         0 0 40px #ca4242,
         inset 0 0 20px #da3a72;
 }

 .logo-container1 img {
     width: 90%;
     height: auto;
     border-radius: 50%;
     animation: glowPulse 1s infinite ease-in-out, subtleMove 6s infinite ease-in-out;
     position: relative;
     z-index: 12;
     transform-origin: center center;
 }


 /* Dải ánh sáng chính */
 .shine-main {
    position: absolute;
    top: -10%;
    left: -120%;
    width: 140%;
    height: 120%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(158, 112, 112, 0.773) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-15deg);
    animation: shineMove 6s ease-in-out infinite;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.95)) blur(6px) brightness(1.4);
}

/* Dải ánh sáng phụ */
.shine-sub {
    position: absolute;
    top: 5%;
    left: -90%;
    width: 70%;
    height: 110%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(165, 113, 113, 0.7) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-10deg);
    animation: shineMoveSub 9s ease-in-out infinite;
    z-index: 21;
    pointer-events: none;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) blur(4px) brightness(1.3);
}

 /* Ripple sóng nước */
 .ripple {
     position: absolute;
     border: 3px solid #d15072;
     border-radius: 50%;
     width: 140px;
     height: 140px;
     top: 50%;
     left: 50%;
     opacity: 0.4;
     animation: rippleExpand 3.5s ease-out infinite;
     z-index: 5;
     transform: translate(-50%, -50%);
     filter: drop-shadow(0 0 6px rgba(150, 58, 69, 0.6));
 }

 .ripple:nth-child(1) {
     animation-delay: 0s;
 }

 .ripple:nth-child(2) {
     animation-delay: 1.25s;
 }

 .ripple:nth-child(3) {
     animation-delay: 2.5s;
 }

 /* KEYFRAMES */
 @keyframes fadeInScale {
     0% {
         opacity: 0;
         transform: scale(0.75);
     }

     100% {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes glowPulse {

     0%,
     100% {
         filter: drop-shadow(0 0 6px #c9356e);
         transform: scale(1);
     }

     50% {
         filter: drop-shadow(0 0 18px #b52c2c);
         transform: scale(1.06);
     }
 }

 @keyframes subtleMove {

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

     50% {
         transform: translateY(-4px);
     }
 }

 @keyframes shineMove {
     0% {
         left: -120%;
         opacity: 0;
         transform: skewX(-15deg) rotate(0deg);
     }

     20% {
         opacity: 1;
     }

     80% {
         opacity: 1;
         transform: skewX(-15deg) rotate(3deg);
     }

     100% {
         left: 150%;
         opacity: 0;
         transform: skewX(-15deg) rotate(0deg);
     }
 }

 @keyframes shineMoveSub {
     0% {
         left: -90%;
         opacity: 0;
         transform: skewX(-10deg) rotate(0deg);
     }

     25% {
         opacity: 0.8;
     }

     75% {
         opacity: 0.8;
         transform: skewX(-10deg) rotate(-3deg);
     }

     100% {
         left: 140%;
         opacity: 0;
         transform: skewX(-10deg) rotate(0deg);
     }
 }

 @keyframes rippleExpand {
     0% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 0.4;
     }

     100% {
         transform: translate(-50%, -50%) scale(2.7);
         opacity: 0;
     }
 }