*{
    box-sizing:border-box;

    font-family:
    "Times New Roman",
    Times,
    serif;
}



body{

    margin:0;

    min-height:100vh;

    background:

    radial-gradient(
        circle at top,
        #fff4ed 0%,
        #ffe5d6 45%,
        #ffd1bd 100%
    );

    color:#333;
    -webkit-text-size-adjust:100%;


}



/* =====================
   CONTAINER
===================== */

.container{

    width:100%;

    max-width:900px;

    margin:auto;

    padding:40px 20px;

    text-align:center;

}





/* =====================
   LOGO
===================== */


.logo{

    width:420px;

    max-width:90%;

    height:auto;

    margin-bottom:5px;

}

/* =====================
   TITLE
===================== */


h1{

    margin-top:10px;

    font-size:42px;

    font-weight:900;

    letter-spacing:1px;


    background:

    linear-gradient(
        90deg,
        #d94700,
        #ff6a00,
        #c83200
    );


    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;


}





/* =====================
   SEARCH
===================== */


.search-box{

    margin:35px auto;

    width:680px;

    max-width:100%;

    height:65px;


    background:white;

    border:2px solid #f36b21;

    border-radius:18px;


    display:flex;

    align-items:center;


    padding:0 8px;

}




.search-box input{


    flex:1;


    height:100%;


    border:none;


    outline:none;


    padding:0 25px;


    font-size:17px;


    color:#555;


}




.search-box button{

    width:130px;

    height:48px;

    margin-right:8px;


    display:flex;

    align-items:center;

    justify-content:center;


    flex-shrink:0;


    border:none;

    border-radius:14px;


    cursor:pointer;


    font-family:
    "Times New Roman",
    serif;


    font-size:16px;

    font-weight:bold;


    color:white;


    background:

    linear-gradient(
        135deg,
        #ff8a00,
        #e84100
    );


    transition:.3s;

}


.search-box button:hover{

    transform:scale(1.05);

}


.search-box button:active{

    transform:scale(.98);

}

/* =====================
   RESULT
===================== */


.result{


    margin-top:20px;


    font-size:22px;


    font-weight:bold;


}




.safe{


    color:#009b4d;


    animation:fade .3s;


}



.danger{


    color:#e60000;


    animation:fade .3s;


}



.loading{

    color:#e36b00;

}





@keyframes fade{


    from{

        opacity:0;

        transform:translateY(-10px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}






/* =====================
   NOTICE
===================== */


.notice{


    margin:40px auto 20px;


    width:680px;


    max-width:100%;


    background:

    rgba(255,255,255,.9);



    border:

    2px solid #f58235;



    border-radius:20px;


    padding:35px 45px;


    line-height:1.7;


    font-size:16px;


    font-weight:600;



    box-shadow:

    0 8px 25px rgba(220,80,0,.12);



}




.notice a{


    color:#e45100;


    font-weight:bold;


}




.official{


    margin-top:20px;


    padding-top:15px;


    border-top:

    1px solid #ffd0b0;


}






/* =====================
   SUPPORT
===================== */


.support{


    margin-top:20px;


    font-size:16px;


    color:#555;


}




.support a{


    color:#d94700;


    font-weight:bold;


    text-decoration:underline;


}





/* =====================
 MOBILE
===================== */
@media(max-width:600px){


body{

    -webkit-text-size-adjust:100%;

}



.container{

    width:100%;

    padding:15px 20px;

}



/* LOGO */

.logo{

    width:220px;

    max-width:70%;

}



/* TITLE MOBILE */

h1{

    font-size:22px;

    line-height:1.4;

    margin:25px auto;

    white-space:nowrap;

    letter-spacing:0;


    padding-top:5px;


    transform:scale(.9);

    transform-origin:center;


    display:block;

    text-align:center;

}



/* SEARCH */

.search-box{

    width:100%;

    height:52px;

    border-radius:14px;

}



.search-box input{

    font-size:13px;

    padding:0 12px;

}



.search-box button{

    width:100px;

    height:42px;

    font-size:13px;

    border-radius:14px;

    margin-right:6px;

}




/* RESULT */

.result{

    font-size:16px;

}





/* BOX THÔNG BÁO */

.notice{

    width:100%;

    padding:25px 18px;

    margin-top:25px;

    border-radius:18px;

    font-size:14px;

    line-height:1.5;

}



.notice p{

    margin-bottom:18px;

}





/* LOGO U888 TRONG TEXT */

.text-logo{

    width:45px;

    height:auto;

    vertical-align:middle;

}





/* KHU VỰC LINK */

.official{

    margin-top:15px;

}





.official-link{


    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-size:13px;

    white-space:nowrap;


}



.link-icon{


    width:38px;

    height:22px;

    object-fit:contain;

    flex-shrink:0;


}



.official-link a{


    white-space:nowrap;

    font-size:13px;


}





/* TELE */

.official-link.tele{

    gap:8px;

}



.support{

    margin-top:20px;

    font-size:14px;

}


}



/* Thiết kế icon */
.link-icon{

    object-fit:contain;

    vertical-align:middle;

    margin-right:6px;

}



.u888-icon{

    width:60px;

    height:30px;

}



.telegram-icon{

    width:24px;

    height:24px;

}

/* =====================
   ICON ANIMATION
===================== */


.u888-icon{

    animation:
    u888Float 2.5s ease-in-out infinite;

}



.telegram-icon{

    animation:
    teleRotate 3s ease-in-out infinite;

}




@keyframes u888Float{


    0%{

        transform:translateY(0);

        filter:
        drop-shadow(0 0 0 rgba(255,100,0,0));

    }


    50%{

        transform:translateY(-4px);

        filter:
        drop-shadow(0 0 8px rgba(255,120,0,.6));

    }


    100%{

        transform:translateY(0);

        filter:
        drop-shadow(0 0 0 rgba(255,100,0,0));

    }


}




@keyframes teleRotate{


    0%{

        transform:
        rotate(0deg)
        scale(1);

    }


    25%{

        transform:
        rotate(-10deg)
        scale(1.05);

    }


    50%{

        transform:
        rotate(0deg)
        scale(1);

    }


    75%{

        transform:
        rotate(10deg)
        scale(1.05);

    }


    100%{

        transform:
        rotate(0deg)
        scale(1);

    }

}


.text-logo{

    width:65px;
    height:32px;

    object-fit:contain;

    vertical-align:middle;

    margin:0 5px;

}


.highlight{

    color:#e85b00;

    font-weight:900;

}


.important-title{

    color:#d83a00;

    font-weight:900;

}