@charset "utf-8";
/* Payment 2024 Copyright by https://ASCVN.com.vn  */
body * {
    font-family: Roboto,Helvetica,Arial, Verdana, Geneva, sans-serif;
}
a, html, input, body, img, p, br, ul, li, h1, h2, h3, h4 {
    text-decoration: none;
    margin: 0;
    padding: 0;
}
ul, li {
    list-style-type: none;
}
a:hover {
    cursor: pointer;
}
a:visited, a:link {
    color: inherit;
    decoration: none;
}
/*--------------------------------------------------------------
*{word-wrap: break-word} >>> REPONSIVE
---------------------------------------------------------------- */
@media screen and (max-width: 1280px) and (min-width: 1024px) {}
@media screen and (max-width: 1024px) and (min-width: 970px) {}
@media screen and (max-width: 970px) and (min-width:767px) {}
@media screen and (max-width:767px) {
	
    .row.h-100 .col-lg-4 {
		box-sizing: border-box;
		width: calc(100% - 30px) !important;
		/* padding:10px!important; */
		margin:15px!important;
		top:0%!important;
		transform: translateY(0%)!important;
		right: 0% !important;
		}
    .slide-left {
        display: none;
    }
}
@media screen and (min-width:320px) and (max-width: 480px) {}
@media screen and (max-width: 380px) {}
/*---- end Responsive base screen witdh ------- */
@font-face {
    font-family: myFONT;
    src: url(../font/Bebas.ttf);
    src: url(../font/Bebas.woff);
}
/*--------------------------------------------------------------
>>> WRAP-MAIN ; CONTAINER
---------------------------------------------------------------- */

.background {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -999;
}
.logo-top {
    background: rgba(255, 255, 255, 0.7);
    /* background: linear-gradient(#fff, #d0d0d0, #e8e8e8); */
    padding: 10px;
    width: 100%;
    border-radius: 5px 5px 0 0;
}
.logo-top .mg-0 {
    margin: 0 !important;
}
.logo-top ul .logo-hd {
    text-align: center;
}
.logo-top ul .name-hd {
    text-align: center;
    padding: 0;
}
.logo-top ul .name-hd h1 {
    color: #000000;
    font-size: 1.6em;
    line-height: 1.4em;
    margin: 0;
}
.logo-top-2 ul .name-hd h1 {
    color: #000000;
    text-align: center;
    font-size: 1.6em;
    line-height:1.4em;
    margin: 0;
}
.name-lg {
    text-align: center;
    padding: 10px 0 10px 0;
    font-size: 150%;
    color: #095f90
}
.form-login {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    border-radius: 8px;
    /* box-shadow: -5px 5px 20px #dedede inset; */
}
button.btn-100 {
    width: 100%;
    height: 3em;
	overflow: hidden;
	position: relative;
    /* border-radius: 5px 5px!important; */
    /* border-bottom: 5px solid #0055b1!important; */
}
button.btn-100:active {
	background-color: inherit;
}
.btn-100::before {
    width: 200%;
    height: 200%;
    content: '';
    transform: rotate(-45deg);
    position: absolute;
    top: -10%;
  	left: -140%;
    background: rgb(146 235 136 / 20%);
    transition: 0.3s ease-in-out;
}

.btn-100:hover::before {
    left: 55%;
}
.carousel {
    position: relative;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.carousel-item img{
	max-width: 100%!important;
	margin: 0 auto;
}
/****************************************************************/
.message-notification {
    margin: 0px 0px;
}
#flash-messages {
    position: relative;
    padding: 0;
    background-position: 10px 11px !important;
    background-repeat: no-repeat !important;
    font-size: 13px;
}
#flash-messages div {
    display: block;
    font-style: normal;
    padding: 10px 10px 10px 36px;
    line-height: 1.5em;
}
.success {
    background: #d5ffce url('../images/success.png') 10px center no-repeat;
    border: 1px solid #9adf8f;
    color: #556652;
}
.error {
    background: #ffcece url('../images/error.png') 10px center no-repeat;
    border: 1px solid #df8f8f;
    color: #665252;
}
.warning {
    background: #fffbcc url('../images/warning.png') 10px center no-repeat;
    border: 1px solid #e6db55;
    color: #666452;
}
.info {
    background: #dbe3ff url('../images/info.png') 10px center no-repeat;
    border: 1px solid #a2b4ee;
    color: #585b66;
}
a.close {
    color: #990000;
    font-size: 9px;
    position: absolute;
    right: 5px;
    top: 5px;
}

body {
 
   overflow: auto;
}
.row.h-100 .col-lg-8 {
    position: absolute;
    width: 30%;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
}
.row.h-100 .col-lg-4 {
    position: absolute;
    padding: 1.4em;
    width: 23%;
    right: 15%;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    top: 50%;
    transform: translateY(-50%);
    /*
  background:url(https://onefin.vn/wp-content/themes/main/assets/images/home/bgr.png),linear-gradient(to top,#fff,#ddd);*/
    box-shadow: 4px 16px 40px 10px rgba(0, 0, 0, 0.2);
	overflow: auto;
}
.row.h-100 .col-lg-4 .logo-top, .row.h-100 .col-lg-4 form {
    background: none;
}
.form-control:focus {
    transition: all ease 0.5s;
    box-shadow: none;
    border: #186AE5 1px solid;
}
a.btn.login-with-social-btn.login-with-microsoft-btn:before {
    display: none;
}
a.btn.login-with-social-btn.login-with-microsoft-btn {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABRSURBVDiNY2CgAWBkYGBg+BSg9J+QQr4N9xjrdzEQVNfoxsDIRA2XoYNRQ0cNHQqAkYGBgYFhyXuCOYUhRpDx/07COYrRfTRHjRo6NAylCQAAN14NI2Qzu4kAAAAASUVORK5CYII=) 22px center no-repeat, #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0);
    font-weight: 500;
    display: block;
    padding: 12px 30px 12px 62px;
    font-size: 1.6em;
}
a.btn.login-with-social-btn.login-with-microsoft-btn:hover, button.btn.btn-primary.btn-100:hover {
    filter: brightness(1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
button.btn.btn-primary.btn-100 {
    background-color: #14A334;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1.2em;
}
input.form-control {
    height: 2.6em;
    padding-left: 10px;
    border-radius: 6px;
    border-color: #e7e7e7 1px solid;
}
#inputCode{
	display: flex;
	flex-wrap: wrap;
}
#inputCode label{
	flex: 100%;
}
#inputCode input, #inputCode img{flex:50%; width: 50%}
.logo-hd {
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin: 0 auto;
/*
     width: 120px; 
    height: 120px;
*/
}
.logo-hd img {
    width: 100%;
    max-height: 70px;
}
.name-hd h1 {
    text-transform: unset;
    color: #212223;
    font-family: Roboto,Helvetica,Arial, Verdana, Geneva, sans-serif;
    font-weight: 500;
    font-size: 1.3em;
}
footer{
	position: absolute;
    bottom: 10px;
    width: 100%;
	text-align: center;
}
.copyright-ascvn {
  	display: inline-block;
}
/* background image */
#background-login {
    position: absolute;
    z-index: -1;
    display: flex;
    width: 100%;
    height: 100vh;
}
.bg_left {
    background: url("../img/bg_left.png") top center no-repeat;
    position: relative;
    flex: 75%;
    height: 100vh;
}
.bg_right {
    background: url("../img/bg_right.png") top left no-repeat;
    position: relative;
    flex: 25%;
    height: 100vh;
}
.form-login .form-group label{
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2em;
}



















/*
HTML/CSS3/PSD/AI/FIGMA/XD/SKETCH/PREMIERE/AFTEREFFECT/3DANIMATION/UX/UI/VIDEO/ 

2024 Copyright © 2024. Designed by ĐỖ NGUYÊN THANH TRIỀU

https://www.facebook.com/profile.php?id=100015727831838

Please Call me or Zalo App: 084 0901 479 994

Mọi thông tin vui lòng liên hệ Email: sngdesigner@gmail.com

Website: http://forum.sieunhan.xyz

2025 Copyright © 2025. Designed by Do Nguyen Thanh Trieu
*/