/*------------------------------------------------------------------
Project:  ComingSoon
Version:  
Last change:  
Assigned to:  Bach Le
Primary use:  
-------------------------------------------------------------------*/



/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
    font-family: PlayfairDisplay-BlackItalic;
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-BlackItalic.ttf');
}

@font-face {
    font-family: Poppins-Regular;
    src: url('../fonts/Poppins/Poppins-Regular.ttf');
}

@font-face {
    font-family: Poppins-Medium;
    src: url('../fonts/Poppins/Poppins-Medium.ttf');
}

/*//////////////////////////////////////////////////////////////////
[ RS PLUGIN ]*/
/*---------------------------------------------*/
.container {
    max-width: 1200px;
}


/*//////////////////////////////////////////////////////////////////
[ Form ]*/
.contact100-form {
    max-width: 100%;
}
/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
    width: 500px;
    max-width: 100%;
    position: relative;
    background-color: transparent;
    height: 80px;
}

/*---------------------------------------------*/
.input100 {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 90px 0 35px;
    background-color: #fff;
    box-shadow: 0 10px 15px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 10px 15px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 10px 15px 0px rgba(0,0,0,0.1);
    -o-box-shadow: 0 10px 15px 0px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 10px 15px 0px rgba(0,0,0,0.1);
}

    .input100:focus {
        box-shadow: 0 10px 15px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 10px 15px 0px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 10px 15px 0px rgba(0,0,0,0.2);
        -o-box-shadow: 0 10px 15px 0px rgba(0,0,0,0.2);
        -ms-box-shadow: 0 10px 15px 0px rgba(0,0,0,0.2);
    }


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: #fff;
    border: 1px solid #c80000;
    border-radius: 0px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 82px;
    pointer-events: none;
    font-family: Poppins-Medium;
    color: #c80000;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f071";
    font-family: FontAwesome;
    display: block;
    position: absolute;
    color: #c80000;
    font-size: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 88px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 992px) {
    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }
}


/*//////////////////////////////////////////////////////////////////
[ Simple slide100 ]*/
.simpleslide100-parent {
    position: relative;
    z-index: 1;
}

/*comment on 20-05-2025*/
/*.simpleslide100 {
    display: block;*/
    /*position: absolute;
    z-index: -1;*/
    /*width: 100%;
    height: 100%;*/
    /*top: 0;
    left: 0;*/
/*}

.simpleslide100-item {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}*/

/*add on 20-05-2025*/
.simpleslide100 {
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: height 0.5s ease; /* Optional: smooth height transition */
}

.simpleslide100-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    opacity: 0;
}



/*==================================================================
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
==================================================================*/

/*==================================================================
[ Color ]*/
.cl0 {
    color: #fff;
}

.cl1 {
    color: #333;
}




/*//////////////////////////////////////////////////////////////////
[ S-Text 0 - 15 ]*/

/*---------------------------------------------*/
.s2-txt1 {
    font-family: Poppins-Medium;
    font-size: 15px;
    color: #333;
    line-height: 1.2;
}



/*//////////////////////////////////////////////////////////////////
[ M-Text 16 - 25 ]*/

/*---------------------------------------------*/
.m2-txt1 {
    font-family: Poppins-Regular;
    font-size: 24px;
    color: #999;
    line-height: 1.2;
}



/*//////////////////////////////////////////////////////////////////
[ L-Text >= 26 ]*/
.l1-txt1 {
    font-family: PlayfairDisplay-BlackItalic;
    font-size: 90px;
    color: #333;
    line-height: 1.1;
}


/*==================================================================
   SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE
==================================================================*/
/*//////////////////////////////////////////////////////////////////
[ Size ]*/
.size1 {
    width: 100%;
    min-height: 70vh;
}

.size2 {
    width: 90px;
    height: 80px;
}

.size3 {
    width: 36px;
    height: 36px;
}

/*//////////////////////////////////////////////////////////////////
[ Width ]*/
.wsize1 {
    width: 50%;
    background: #ffffff94;
}

.wsize2 {
    max-width: 100%;
}

@media(min-width:992px) {
    .wsize2 {
        margin:auto
    }
}

/*//////////////////////////////////////////////////////////////////
[ Height ]*/




/*//////////////////////////////////////////////////////////////////
[ Background ]*/
.bg0 {
    /*background-color: #cddc39a3;*/
    background-color: #13429391;
}

.bg1 {
    background-color: #ffffff94
}

.bg-img1 {
    background-position: center;
    background-repeat: no-repeat;
   /* background-size: cover;*/
   background-size:auto;
}




/*//////////////////////////////////////////////////////////////////
[ Border ]*/





/*==================================================================
   WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE  
==================================================================*/




/*==================================================================
 HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW 
==================================================================*/
.placeholder0::-webkit-input-placeholder {
    color: #999999;
}

.placeholder0:-moz-placeholder {
    color: #999999;
}

.placeholder0::-moz-placeholder {
    color: #999999;
}

.placeholder0:-ms-input-placeholder {
    color: #999999;
}


/*---------------------------------------------*/
.overlay1 {
    position: relative;
    z-index: 1;
}

    .overlay1::after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /* background: rgba(0,0,0,0.5);*/
        background: rgb(255 255 255 / 40%);
    }

/*---------------------------------------------*/
.wrappic1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*gap: 0.5rem;*/
    text-align: center;
    /*position:absolute*/
    margin: 10px 0
}

    .wrappic1 img {
        max-width: 60%;
        background: white; 
        box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
        margin-left: 12em;
    }


.wrappic2 {
    display: block;
}

    .wrappic2 img {
        background: white;
        max-width: 100%;
        box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
    }

/*---------------------------------------------*/
.how-btn1 {
    padding: 0 15px;
    background-color: #fff;
    border-radius: 25px;
}

    .how-btn1:hover {
        background-color: #555555;
        color: #fff;
    }

/*---------------------------------------------*/
.how-social {
    color: #fff;
    font-size: 22px;
    background-color: #ccc;
    border-radius: 50%;
}

    .how-social:hover {
        background-color: #333;
        color: #fff;
    }


/*//////////////////////////////////////////////////////////////////
[ Pseudo ]*/

/*------------------------------------------------------------------
[ Focus ]*/
.focus-in0:focus::-webkit-input-placeholder {
    color: transparent;
}

.focus-in0:focus:-moz-placeholder {
    color: transparent;
}

.focus-in0:focus::-moz-placeholder {
    color: transparent;
}

.focus-in0:focus:-ms-input-placeholder {
    color: transparent;
}


/*------------------------------------------------------------------
[ Hover ]*/
.hov-cl0:hover {
    color: #fff;
}

.hov-bg0:hover {
    background-color: #fff;
}

/*---------------------------------------------*/
.hov1:hover i {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px);
}






/*==================================================================
  RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE
==================================================================*/


/*//////////////////////////////////////////////////////////////////
[ XL ]*/
@media (max-width: 1200px) {
    .m-0-xl {
        margin: 0;
    }

    .m-lr-0-xl {
        margin-left: 0;
        margin-right: 0;
    }

    .m-lr-15-xl {
        margin-left: 15px;
        margin-right: 15px;
    }

    .m-l-0-xl {
        margin-left: 0;
    }

    .m-r-0-xl {
        margin-right: 0;
    }

    .m-l-15-xl {
        margin-left: 15px;
    }

    .m-r-15-xl {
        margin-right: 15px;
    }

    .p-0-xl {
        padding: 0;
    }

    .p-lr-0-xl {
        padding-left: 0;
        padding-right: 0;
    }

    .p-lr-15-xl {
        padding-left: 15px;
        padding-right: 15px;
    }

    .p-l-0-xl {
        padding-left: 0;
    }

    .p-r-0-xl {
        padding-right: 0;
    }

    .p-l-15-xl {
        padding-left: 15px;
    }

    .p-r-15-xl {
        padding-right: 15px;
    }

    .w-full-xl {
        width: 100%;
    }

    /*---------------------------------------------*/
    .respon1 {
        width: 50%;
    }

    /*---------------------------------------------*/
    /*.respon2 {
        width: 40%;
    }*/

    /*.respon2 {
        width: 50%;
    }*/
}

 

    /*//////////////////////////////////////////////////////////////////
[ LG ]*/
    @media (max-width: 992px) {
        .dis-none-lg {
            display: none;
        }

        .m-0-lg {
            margin: 0;
        }

        .m-lr-0-lg {
            margin-left: 0;
            margin-right: 0;
        }

        .m-lr-15-lg {
            margin-left: 15px;
            margin-right: 15px;
        }

        .m-l-0-lg {
            margin-left: 0;
        }

        .m-r-0-lg {
            margin-right: 0;
        }

        .m-l-15-lg {
            margin-left: 15px;
        }

        .m-r-15-lg {
            margin-right: 15px;
        }

        .p-0-lg {
            padding: 0;
        }

        .p-lr-0-lg {
            padding-left: 0;
            padding-right: 0;
        }

        .p-lr-15-lg {
            padding-left: 15px;
            padding-right: 15px;
        }

        .p-l-0-lg {
            padding-left: 0;
        }

        .p-r-0-lg {
            padding-right: 0;
        }

        .p-l-15-lg {
            padding-left: 15px;
        }

        .p-r-15-lg {
            padding-right: 15px;
        }

        .w-full-lg {
            width: 100%;
        }

        /*---------------------------------------------*/
        .respon1 {
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
        }

        /*---------------------------------------------*/
        /* .respon2 {
        width: 100%;
        height: 500px;
    }*/

        /*.respon2 {
            width: 100%;*/
           /* height: 620px;*/
        /*}*/
    }


    /*//////////////////////////////////////////////////////////////////
[ MD ]*/
    @media (max-width: 768px) {
        .m-0-md {
            margin: 0;
        }

        .m-lr-0-md {
            margin-left: 0;
            margin-right: 0;
        }

        .m-lr-15-md {
            margin-left: 15px;
            margin-right: 15px;
        }

        .m-l-0-md {
            margin-left: 0;
        }

        .m-r-0-md {
            margin-right: 0;
        }

        .m-l-15-md {
            margin-left: 15px;
        }

        .m-r-15-md {
            margin-right: 15px;
        }

        .p-0-md {
            padding: 0;
        }

        .p-lr-0-md {
            padding-left: 0;
            padding-right: 0;
        }

        .p-lr-15-md {
            padding-left: 15px;
            padding-right: 15px;
        }

        .p-l-0-md {
            padding-left: 0;
        }

        .p-r-0-md {
            padding-right: 0;
        }

        .p-l-15-md {
            padding-left: 15px;
        }

        .p-r-15-md {
            padding-right: 15px;
        }

        .w-full-md {
            width: 100%;
        }
        /*---------------------------------------------*/

    }


    /*//////////////////////////////////////////////////////////////////
[ SM ]*/
    @media (max-width: 576px) {
        .dis-none-sm {
            display: none;
        }

        .m-0-sm {
            margin: 0;
        }

        .m-lr-0-sm {
            margin-left: 0;
            margin-right: 0;
        }

        .m-lr-15-sm {
            margin-left: 15px;
            margin-right: 15px;
        }

        .m-l-0-sm {
            margin-left: 0;
        }

        .m-r-0-sm {
            margin-right: 0;
        }

        .m-l-15-sm {
            margin-left: 15px;
        }

        .m-r-15-sm {
            margin-right: 15px;
        }

        .p-0-sm {
            padding: 0;
        }

        .p-lr-0-sm {
            padding-left: 0;
            padding-right: 0;
        }

        .p-lr-15-sm {
            padding-left: 15px;
            padding-right: 15px;
        }

        .p-l-0-sm {
            padding-left: 0;
        }

        .p-r-0-sm {
            padding-right: 0;
        }

        .p-l-15-sm {
            padding-left: 15px;
        }

        .p-r-15-sm {
            padding-right: 15px;
        }

        .w-full-sm {
            width: 100%;
        }

        /*---------------------------------------------*/
        .respon3 {
            font-size: 60px;
        }
    }


    /*//////////////////////////////////////////////////////////////////
[ SSM ]*/
    @media (max-width: 480px) {
        .m-0-ssm {
            margin: 0;
        }

        .m-lr-0-ssm {
            margin-left: 0;
            margin-right: 0;
        }

        .m-lr-15-ssm {
            margin-left: 15px;
            margin-right: 15px;
        }

        .m-l-0-ssm {
            margin-left: 0;
        }

        .m-r-0-ssm {
            margin-right: 0;
        }

        .m-l-15-ssm {
            margin-left: 15px;
        }

        .m-r-15-ssm {
            margin-right: 15px;
        }

        .p-0-ssm {
            padding: 0;
        }

        .p-lr-0-ssm {
            padding-left: 0;
            padding-right: 0;
        }

        .p-lr-15-ssm {
            padding-left: 15px;
            padding-right: 15px;
        }

        .p-l-0-ssm {
            padding-left: 0;
        }

        .p-r-0-ssm {
            padding-right: 0;
        }

        .p-l-15-ssm {
            padding-left: 15px;
        }

        .p-r-15-ssm {
            padding-right: 15px;
        }

        .w-full-ssm {
            width: 100%;
        }
        /*---------------------------------------------*/

    }