/* @font-face {
    font-family: 'SVN-Gilroy';
    src: URL('http://demoit.site/dqhung/vstep/static/fonts/Gilroy/SVN-Gilroy Regular.otf') format('opentype');
}

@font-face {
    font-family: 'SVN-Gilroy-Bold';
    src: URL('http://demoit.site/dqhung/vstep/static/fonts/Gilroy/SVN-Gilroy Bold.otf') format('opentype');
}

@font-face {
	font-family: 'SVN-Gilroy-Black';
	src: URL('http://demoit.site/dqhung/vstep/static/fonts/Gilroy/SVN-Gilroy Black.otf') format('opentype');
} */

  @media only screen and (max-width: 600px) {
            .vstep-main-login {
                flex-direction: column-reverse !important;
            }
        }
.dont-scroll {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.vstep-section-home {
    position: relative;
}

.image-abs-1 {
    position: absolute;
    width: 100%;
    max-width: 550px;
    height: auto;
    top: -315px;
    left: -230px;
    z-index: -1;
}

.image-abs-2 {
    position: absolute;
    width: 100%;
    max-width: 950px;
    height: auto;
    top: 300px;
    right: 0px;
    z-index: -1;
    transform: rotate(180deg);
}

.home-id {
    max-width: 1500px;
    margin: 100px auto 0 auto;
    font-size: 18px;
    color: #01366C;
    font-weight: bold;
    z-index: 1;
    position: relative;
    padding: 0 12px;
}

.home-id-block {
    border: 1px solid;
    padding: 0 10px;
    background: #F9F0DE;
    max-width: 300px;
    border-radius: 5px;
}

.home-id span {
    font-weight: normal;
}


/* ========== NAVBAR ============= */
.login-navbar {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 2;
    transition: .5s;
}

.login-container a {
    text-decoration: none;
}

.navbar-vstep {
    justify-content: flex-end;
}

.navbar-vstep .item-navbar {
    padding: 0 15px;
}

@media all and (min-width: 992px) {
    /* .login-navbar {
        padding: 35px 35px 0 35px;
    } */

    .login-container {
        box-shadow: 0 4px 40px #00000040;
    }

    .login-container .logo-vstep {
        /* margin-left: 50px; */
    }
}

@media(max-width: 991px) {
    .home-id {
        font-size: 16px;
    }

    /* .block-item-navbar {
        margin-top: 10px;
        margin-bottom: 10px;
    } */

    .navbar-vstep .item-navbar {
        padding: 10px 0;
        border-bottom: 1px solid #aeaeae;
    }

    .navbar-vstep .item-navbar a {
        display: flex;
        justify-content: flex-end;
        padding: 10px 0;
    }

    /* .navbar-item-image {
        padding: 0 10px 0 0;
        width: 45px;
    } */

    .navbar-vstep {
        width: 100%;
        max-width: 230px;
        position: fixed;
        background: rgb(255, 255, 255);
        z-index: -1;
        right: 0px;
        transition: 0s;
        padding: 10px 12px 10px 12px;
        /* box-shadow: 20px 0 50px 90px #000000ad; */
        box-shadow: -5px 5px 5px rgba(30, 30, 30, 0.1);
    }

    /* .navbar-vstep:after {
        content: "";
        position: absolute;
        height: 100%;
        width: 55px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 100%);
    } */
}



/*NAVBAR v2 ============= */
.navbar-v2 .navbar-vstep {
    justify-content: flex-start;
}

.navbar-v2 .item-navbar {
    padding: 0;
    margin: 0 20px;
}

.navbar-v2 .item-navbar.active {
    border-bottom: 2px solid #01366C;
}


.login-navbar.navbar-v2 .btn-dangky {
    background: #01366C;
    border: 2px solid #01366C;
}

.login-navbar.navbar-v2 .btn-dangky:hover {
    opacity: 0.85;
}

.login-navbar.navbar-v2 .btn-dangky.thi {
    background: #FF9D00;
    border: 2px solid #FF9D00;
}

.login-navbar.navbar-v2 .btn-dangky.thi .btn-dangky-text {
    color: #000;
}

.btn-dangky-text {
    color: #fff;
    font-family: 'SVN-Gilroy', sans-serif;
    text-align: center;
}

.vstep-main-logout-v2 {
    display: flex;
    justify-content: flex-start;
}

.vstep-main-logout-v2 button {
    padding: 0;
    text-decoration: none;
}

.navbar-right .navbar-nav .dropdown-menu {
    border: 0;
    box-shadow: 0 4px 40px #0000004a;
    border-radius: 0;
    min-width: 180px;
}

.navbar-item-image {
    width: 22px;
    height: auto;
}


.image-info-pay {
    width: 35px;
    height: auto;
}

.login-navbar.navbar-v2 .navbar>.container-fluid.navbar-left{
    width: 55%;
}

.login-navbar.navbar-v2 .navbar>.container-fluid.navbar-right{
    width: 45%;
}



/* @media all and (min-width: 992px) {
    
} */
.login-navbar.navbar-v2 .navbar>.container-fluid.navbar-right {
    justify-content: flex-end !important;
    padding: 0;
}

.login-navbar.navbar-v2 .navbar {
    padding: 0;
}

.login-navbar.navbar-v2 .btn-dangky {
    height: 70px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* @media all and (min-width: 992px) {
    
} */



@media(max-width: 1200px) {
    .login-container .logo-vstep {
        max-width: 140px;
    }

    /* .login-container .navbar-item-text {
        font-size: 12px;
        line-height: 12px;
    } */

    .login-navbar.navbar-v2 .btn-dangky {
        height: 60px;
        padding: 0 30px;
    }

    .btn-dangky-text {
        font-size: 14px;
    }
}


@media(max-width: 991px) {
    .login-navbar.navbar-v2 .btn-dangky {
        height: 100%;
        padding: 10px 0;
        border-radius: 5px;
    }

    .login-navbar.navbar-v2 .navbar>.container-fluid.navbar-left {
        justify-content: flex-end !important;
    }

    .login-navbar.navbar-v2 .navbar>.container-fluid.navbar-right {
        justify-content: flex-start !important;
        padding: 0;
    }

    .login-navbar.navbar-v2 .container-fluid {
        flex-direction: row-reverse;
    }

    .login-navbar.navbar-v2 .navbar {
        flex-wrap: nowrap;
    }

    .login-navbar.navbar-v2 .logo-vstep {
        max-width: 100px;
    }

    .btn-dangky-text {
        font-size: 14px;
        padding: 5px 10px;
    }

    .navbar-v2 .item-navbar {
        margin: 0;
        padding: 5px 0 5px 0;
    }

    .navbar-v2 .item-navbar.active {
        border-bottom: 2px solid #E53A38;
    }

    .navbar-v2 .item-navbar.active .navbar-item-text {
        color: #E53A38;
        font-weight: bold;
    }

    .navbar-v2 .navbar-item-image {
        padding-right: 15px;
        width: 35px;
        height: auto;
    }

    .navbar-right .navbar-nav .dropdown-menu {
        position: absolute;
        right: 5px;
        left: auto;
    }

}

/*END NAVBAR v2 ============= */
/* ========== END NAVBAR ============= */









/* ========== UPCOMING ============= */
.upcoming-test-section {
    max-width: 1300px;
    padding: 0 12px;
    margin: 70px auto 120px auto;
}

.upcoming-block {
    margin-bottom: 40px;
    box-shadow: 0 4px 40px #00000040;
    border-radius: 5px;
}

.upcoming-test-section *:not(i) {
    font-family: 'SVN-Gilroy', sans-serif;
}

.upcoming-head {
    background: #F9F0DE;
    border: 1px solid #FF9D00;
    padding: 10px 30px;
    border-radius: 5px 5px 0 0;
}

.upcoming-head .title {
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-size: 20px;
}

.upcoming-head .desc {
    font-size: 18px;
    color: #828282;
    display: flex;
    justify-content: space-between;
}

.upcoming-body {
    padding: 10px 50px;
    background: #ffffffeb;
}

.upcoming-title {
    position: relative;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upcoming-title .title {
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-size: 26px;
}

.upcoming-title .more a {
    color: #000;
    text-decoration: none;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-size: 18px;
}

.upcoming-title .more a:hover {
    text-decoration: underline;
}

.upcoming-title .more .fa-circle-chevron-right {
    color: #FF9D00;
}

.upcoming-title:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    border-radius: 5px;
    height: 5px;
    width: 80px;
    background: #FF9D00;
    /* background: linear-gradient(to right, #01366C, #A8CCED); */
}

.upcoming-body .body-block-right {
    justify-content: flex-end;
}

.body-block-items {
    border: 1px solid #01366C;
    width: 100%;
    max-width: 500px;
    border-radius: 5px;
}

.body-block-date {
    /* background: #01366C; */
    color: white;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-right: 1px solid black;
}

.body-block-date .month {
    font-size: 15px;
    color: black;
}

.body-block-date .day {
    font-size: 42px;
    line-height: 42px;
    color: #ff0000;
}

.body-block-date .year {
    font-size: 15px;
    color: black;
}

.body-block-info {
    padding: 0 30px;
}

.body-block-info .body-title {
    font-size: 18px;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    color: #01366C;
}

.body-block-info .body-desc {
    font-size: 18px;
    color: #828282;
}

.name-desc {
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    color: #ff0000;
    font-size: 16px;
}

.name-uni{
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    font-size: 18px;
    color: #ff0000;
}

.name-locate {
    font-size: 16px;
}

.body-block-info .body-time {
    font-size: 16px;
    color: #332929;
    border-bottom: 1px solid #808080;
    padding-bottom: 5px;
}

.payment-block {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.a-payment {
    min-width: 230px;
    background: #FF9D00;
    border: 2px solid #FF9D00;
    padding: 10px 40px;
    color: #F9F0DE;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-weight: bold;
    font-size: 18px;
    transition: .3s;
}

.a-payment:hover {
    background: #F9F0DE;
    color: #FF9D00;
}

.expired-payment {
    color: #ff0000;
}

@media(max-width: 991px) {
    .name-desc {
        font-size: 15px;
    }

    .name-locate {
        font-size: 14px;
    }

    .upcoming-head {
        padding: 10px 15px;
    }

    .upcoming-title .title {
        font-size: 20px;
    }

    .upcoming-title .more a {
        font-size: 16px;
    }

    .upcoming-head .title {
        font-size: 18px;
    }

    .upcoming-head .desc {
        flex-direction: column;
        font-size: 16px;
    }

    .upcoming-head .desc div {
        padding: 5px 0;
    }

    .upcoming-body {
        padding: 20px 30px;
    }

    .body-block-date {
        height: 100px;
    }

    .body-block-date .month {
        font-size: 12px;
    }

    .body-block-date .day {
        font-size: 35px;
        line-height: 35px;
    }

    .body-block-date .year {
        font-size: 12px;
    }

    .body-block-info {
        padding: 0 12px;
    }

    .body-block-info .body-title {
        font-size: 16px;
    }

    .body-block-info .body-desc {
        font-size: 16px;
    }

    .body-block-info .body-time {
        font-size: 14px;
    }

    .a-payment {
        border: 1px solid #FF9D00;
        padding: 10px 35px;
        font-size: 16px;
    }

    .upcoming-body .body-block-right {
        justify-content: center;
    }
}

/* ========== END UPCOMING ============= */




/* ========== UPCOMING v2 ============= */
.v2-upcoming-section {
	max-width: 1300px;
	/* padding: 0 12px; */
	margin: 50px auto 120px auto;
}

.v2-upcoming-container {
	padding: 30px;
	box-shadow: 0 4px 15px #00000040;
	background: #ffffff;
}

.v2-upcoming-container .block-date {
	background: #01366C;
	color: #ffffff;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 50px 0px;
}

.v2-upcoming-container .block-time {
	background: #01366C;
	color: #ffffff;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 50px 0px;
}

.v2-upcoming-container .block-date .month {
	font-family: 'SVN-Gilroy-Bold', sans-serif;
	font-size: 24px;
}

.v2-upcoming-container .block-date .day {
	font-family: 'SVN-Gilroy-Black', sans-serif;
	font-weight: bold;
	font-size: 55px;
    line-height: 60px;
	color: #FF9D00;
}

.v2-upcoming-container .block-date .year {
	font-family: 'SVN-Gilroy-Bold', sans-serif;
	font-weight: bold;
	font-size: 40px;
	line-height: 55px;
}

.v2-upcoming-container .block-time .buoi {
	font-family: 'SVN-Gilroy-Bold', sans-serif;
    text-align: center;
	/* font-size: 24px; */
    /* font-size: 1vw; */
}

@media all and (min-width: 1920px){
    /* .v2-upcoming-container .block-time .buoi {
        font-size: 16px;
    } */
}

.v2-upcoming-container .block-time .image{
    height: 60px;
}

.v2-upcoming-container .block-time .image img{
	height: 50px;
    margin: 6px 0px;
    transform: translateY(5px);
}

.v2-upcoming-container .block-time .time {
	font-family: 'SVN-Gilroy-Bold', sans-serif;
	font-weight: bold;
	font-size: 40px;
	line-height: 45px;
	color: #FF9D00;
    text-align: center;
}

.v2-upcoming-container .block-time .time .time-0{
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
	font-weight: bold;
	font-size: 40px;
	line-height: 45px;
	color: #FF9D00;
    text-align: center;
}

.v2-upcoming-container .block-time .time .time-slash{
    height: 18px;
    width: 5px;
    background: #FF9D00;
    margin: 10px auto 0px auto;
    border-radius: 99px;
}

.v2-upcoming-container .block-time .time .time-1{
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
	font-weight: bold;
	font-size: 40px;
	line-height: 45px;
	color: #FF9D00;
    text-align: center;
}

.v2-upcoming-container .block-infotest .title{
	font-family: 'SVN-Gilroy-Black', sans-serif;
	color: #FF9D00;
	font-size: 50px;
}

.v2-upcoming-container .block-infotest .name{
	font-family: 'SVN-Gilroy', sans-serif;
	color: #ED1C24;
	font-size: 24px;
	padding: 0px 0 10px 0;
}

.v2-upcoming-container .block-infotest .locate img{
	height: 25px;
    padding-right: 5px;
    transform: translateY(-5px);
}

.v2-upcoming-container .block-infotest .locate{
	font-family: 'SVN-Gilroy', sans-serif;
	font-size: 16px;
}

.v2-pay-button{
	text-align: center;
}

.v2-pay-button_a{
	background:#FF9D00;
	color: #ffffff;
	font-size: 18px;
	font-family: 'SVN-Gilroy', sans-serif;
	text-decoration: none;
    width: 200px;
    display: inline-block;
    text-align: center;
    padding: 6px 0;
}

.v2-expired{
	margin-top: 10px;
	text-align: center;
	color: #ED1C24;
}

/* .cloud-background{
	position: absolute;
	width: 1096px;
	height: 1096px;
	left: -1048px;
	top: 300px;
	background: rgba(255, 167, 38, 0.15);
	filter: blur(127px);
	z-index: -2;
} */

@media all and (min-width: 992px){
	.block-infotest{
		padding-left: 20px;
	}
}

@media(max-width: 991px){

    .v2-upcoming-container .block-date{
        padding: 30px 5px;
    }

    .v2-upcoming-container .block-time{
        padding: 30px 5px;
    }

	.v2-upcoming-container .block-date .month {
		font-size: 20px;
	}
	
	.v2-upcoming-container .block-date .day {
		font-size: 65px;
        line-height: 60px;
	}
	
	.v2-upcoming-container .block-date .year {
		font-size: 30px;
        line-height: 50px;
	}
	
	.v2-upcoming-container .block-time .buoi {
/*		font-size: 20px;*/
        /* font-size: 5vw; */
	}
	
	.v2-upcoming-container .block-time .image img{
		height: 45px;
		transform: translateY(5px);
	}
	
	.v2-upcoming-container .block-time .time {
		font-size: 40px;
        line-height: 40px;
	}


	.block-infotest{
		margin-bottom: 20px;
	}
	.v2-upcoming-container .block-infotest .title{
		font-size: 40px;
	}
	.v2-upcoming-container .block-infotest .name{
		font-size: 20px;
	}
	.v2-pay-button{
		margin-top: 25px;
	}
}
/* ========== END UPCOMING v2 ============= */





/* ========== FAQ ============= */
.collapse-block {
    border: 1px solid #ccc;
    padding: 20px 25px;
    border-radius: 5px;
    background: #fffffff5;
}

.nhom-totnghiep {
    font-weight: bold;
    font-size: 22px;
    color: #0051BB;
    cursor: pointer;
    font-family: "SVN-Gilroy", sans-serif;
}

.totnghiep-timeline {
    font-family: "SVN-Gilroy", sans-serif;
    font-size: 18px;
}

.collapse-totnghiep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.collapse-totnghiep i {
    background: #ccc;
    color: #CF1A21;
    padding: 7px;
    border-radius: 999px;
}

.collapse-totnghiep i:hover {
    color: white;
    background: #CF1A21;
}

.classday-content-title.first-child-title {
    margin-top: 0rem;
}

.collapse-block.child-block:nth-child(1) {
    border-radius: 5px 5px 0px 0px;
}

.collapse-block.child-block:nth-child(n+2) {
    border-radius: 0px;
    border-top: none;
}

.collapse-block.child-block:nth-last-child(1) {
    border-radius: 0px 0px 5px 5px;
}

.collapse-block.child-block .nhom-totnghiep,
.collapse-block.child-block .timeline-p {
    padding-right: 80px;
}

@media(max-width: 991px) {
    .collapse-block {
        padding: 10px 15px;
    }

    .nhom-totnghiep {
        font-size: 16px;
    }

    .collapse-totnghiep i {
        padding: 4px;
        font-size: 13px;
    }
}

/* ========== END FAQ ============= */




/* ========== PROFILE ============= */
.vstep-profile {
    max-width: 1400px;
    padding: 0 12px;
    margin: 0px auto 0 auto;
}

.warning-profile {
    max-width: 1400px;
    padding: 0 12px;
    margin: 70px auto 0 auto;
}

.warning-text {
    border: 2px solid #ff0000;
    padding: 20px;
    font-family: 'SVN-Gilroy', sans-serif !important;
    color: #ff0000;
    font-size: 18px;
    display: flex;
    align-items: center;
    background: #fffffff5;
}

.warning-text i {
    width: 40px;
    font-size: 30px;
    margin-right: 10px;
}

.vstep-profile-form-container {
    max-width: 1400px;
    padding: 0 12px;
    margin: 0 auto;
}
.update_profile {
    /* border-bottom: 1px solid #11467F; */
}

.vstep-profile-block {
    padding: 15px 0px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vstep-profile-block
{
    border-bottom: 1px solid #11467F;
}

.vstep-profile-block .title {
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    color: #01366C;
    font-size: 24px;
    text-decoration: none !important;
}
.home_maintitle.update_profile {
    padding-bottom: 2rem;
}
.home_maintitle {
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-size: 30px;
    color: #ED1F24;
}

.vstep-profile-block .arrow i {
    color: #01366C;
    font-size: 18px;
    transform: translateY(5px);
}
.update_profile_title i {
    color: #ED1F24;
}
.vstep-profile-form {
    max-width: 1400px !important;
    background: #fffffff5;
    padding-top: 30px;
    /* border: 1px solid #eaeaea !important; */
}
.form-label {
    margin-bottom: .5rem;
}
.dk-text-title {
    font-size: 18px;
    color: #11467F !important;
}

.vstep-dk-col-update {
    max-width: 300px;
    cursor: pointer;
}
.home_subtitle.update_profile {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0;
    color: #11467F;
    font-size: 20px;
    font-weight: bold;
}
.sel-pro-btn-next:hover {
    background: #fff;
    color: #11467F;
}
.sel-pro-btn-next {
    background: #11467F;
    border: 1px solid #11467F;
    border-radius: 5px;
    cursor: pointer;
    width: 240px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: .3s ease-in-out;
}

.btn-update-profile {
    font-family: 'SVN-Gilroy', sans-serif !important;
    font-size: 18px;
    font-weight: bold;
    padding: 15px;
    background: #01366C;
    border: 1px solid #01366C;
    color: #ffffff;
    transition: .3s;
    border-radius: 5px;
}

.vstep-dk-col-update:hover .btn-update-profile {
    background: #ffffff;
    color: #01366C;
}

@media(max-width: 991px) {
    .vstep-profile-form-container .vstep-dangkythi {
        padding: 0px;
    }
}

/* ========== END PROFILE ============= */









/* ========== VIEW DIEM ============= */
.view-mark-section {
    max-width: 1400px;
    padding: 0 12px;
    margin: 70px auto 120px auto;
}

.view-mark-section *:not(i) {
    font-family: 'SVN-Gilroy', sans-serif;
}

.view-mark-block {
    border: 1px solid #01366C;
    background: #ffffffeb;
    margin-bottom: 40px;
    box-shadow: 0 4px 40px #00000040;
    border-radius: 5px;
    padding: 30px;
}

.mark-person-title {
    color: #ff0000;
    font-size: 32px;
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    margin-bottom: 50px;
}

.mark-info-person {
    margin-bottom: 15px;
}

.mark-info-person .title {
    font-weight: bold;
    font-size: 18px;
    color: #01366C;
}

.mark-info-person .content {
    font-size: 18px;
}

.mark-detail-block {
    display: flex;
}

.mark-detail-item {
    border-right: 1px solid #ff0000;
}

.mark-box {
    border: 1px solid #ff0000;
    background: #ffffffeb;
    box-shadow: 0 4px 40px #00000040;
    padding: 20px 25px;
    border-radius: 5px;
}

.mark-single {
    width: 80%;
}

.mark-average {
    width: 20%;
    background: #ff0000;
}

.mark-average .mark-detail-title {
    color: #fff;
}

.mark-average .mark-detail-mark {
    color: #fff;
}

.mark-detail-title {
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    font-size: 20px;
}

.mark-detail-mark {
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    font-size: 32px;
    line-height: 32px;
    color: #ff0000;
}

@media all and (min-width: 992px) {
    .mark-single {
        margin-right: 10px;
    }

    .mark-average {
        margin-left: 10px;
    }

    .mark-single .col-lg-3:nth-last-child(1) .mark-detail-item {
        border-right: none;
    }
}

@media(max-width: 991px) {
    .mark-detail-block {
        flex-direction: column;
    }

    .mark-single {
        width: 100%;
    }

    .mark-average {
        width: 100%;
    }

    .mark-detail-item {
        margin-bottom: 20px;
    }
}

/* ========== END VIEW DIEM ============= */










.vstep-main-login {
    position: relative;
    z-index: 1;
}

.logo-vstep {
    max-width: 167px;
}

@media(max-width: 991px) {
    .logo-vstep {
        max-width: 137px;
    }
}

.vstep-main {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    min-height: 990px;
    margin: 0 auto;
    background-image: url(https://dkvstep.nctu.edu.vn/static/images/vstep-2024/vstep-login-bg-R.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    /* background-image: url(https://dkvstep.nctu.edu.vn/static/images/vstep-2024/dots-square-2.svg), url(https://dkvstep.nctu.edu.vn/static/images/vstep-2024/vstep-login-bg.jpg);
    background-size: 10% 10%, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: 71% 89%, center;
    display: flex;
    align-items: center; */
}

.navbar-item-text {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 16px;
    line-height: 18px;
    color: #01366C;
    margin-top: 5px;
}


.vstep-main-inner-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 700px;
    z-index: 0;
}

.vstep-container {
    max-width: 1100px;
    margin: 0 auto;
}

.vstep-main-title {
    padding: 0px 0 50px 0;
    margin-left: -5px;
}

.vstep-main-welcome {
    font-family: 'SVN-Gilroy', sans-serif;
    font-weight: bold;
    font-size: 60px;
    color: #2468F1;
    text-transform: uppercase;
}

.vstep-login-block * {
    font-family: 'SVN-Gilroy-Bold', sans-serif;
}

.vstep-login-block.right {
    border-top: 10px solid #2468F1;
    border-bottom: 10px solid #2468F1;
    background: #fff;
    padding: 100px 50px 100px 50px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15);
}

.login-block-item a {
    text-decoration: none;
}

.login-block-item:nth-child(1) {
    margin-bottom: 25px;
}

.vstep-login-block .title {
    font-weight: bold;
    font-size: 24px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid #2468F1;
    color: #4D4D4D;
}

.vstep-login-block .desc {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 18px;
    color: #4D4D4D;
}

.vstep-login-block .button {
    margin-top: 15px;
    padding: 9px;
    border-radius: 5px;
    background: #2468F1;
    text-align: center;
}

.vstep-login-block .button.search {
    background: #ffffff;
    border: 1px solid #2468F1;
}

.vstep-login-block .button-text {
    font-family: 'SVN-Gilroy', sans-serif!important;
    font-size: 18px;
    color: #ffffff;
}

.vstep-login-block .button.search .button-text{
    color: #2468F1;
}

@media(max-width: 991px) {
    .vstep-main{
        padding: 50px 0 150px 0;
    }
    .vstep-login-block .button-text {
        font-size: 16px;
    }
}

.vstep-login-block .forget {
    margin-top: 0px;
}

.vstep-login-block .forget a {
    color: #2468F1;
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 18px;
    text-decoration: underline;
}

.vstep-login-block .forget a:hover {
    color: black;
}

.vstep-info-title {
    display: flex;
    align-items: center;
    padding: 15px 0 15px 10px;
    margin-bottom: 50px;
}

.vstep-info-title .title {
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-size: 26px;
    padding-left: 10px;
    color: #4d4d4d;
}

.vstep-info-content * {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 18px;
    color: #4d4d4d;
}

.vstep-info-content li {
    margin-bottom: 20px;
    text-align: justify;
}

.vstep-info-content li::marker{
    color: #2468F1;
    background: #2468F1;
}

.vstep-info-content li strong{
    color:#2468F1;
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
}

@media all and (min-width: 992px) {
    .vstep-info-block {
        margin-right: 70px;
    }
}

@media(max-width: 991px) {
    .vstep-container {
        padding: 0 15px;
    }

    .vstep-main-row {
        padding-bottom: 20px;
    }

    .vstep-info-title{
        padding: 35px 0 15px 10px;
        margin-bottom: 30px;
    }
}






/* =========== CSS HOME ============= */
.vstep-main.home a {
    text-decoration: none;
}

.vstep-main-id {
    color: white;
    font-size: 15px;
    font-family: 'SVN-Gilroy', sans-serif;
    text-align: start;
    display: flex;
    align-items: center;
}

.vstep-main-logout {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vstep-main-logout button {
    padding: 0;
    color: white !important;
    font-size: 15px;
    font-family: 'SVN-Gilroy', sans-serif;
}

.vstep-main-home {
    color: white;
    font-size: 24px;
    font-weight: bold;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
}

.vstep-main-line {
    border-bottom: 1px dotted #fff;
    padding-bottom: 15px;
    margin-bottom: 15px;
    width: calc(100% - 24px);
    margin: 0 auto;
}

.vstep-container.home {
    max-width: 1230px;
}

.vstep-info-block{
    position: relative;
}

.dots-square-1{
    position: absolute;
    top: -25%;
    left: 15px;
}

/* .dots-square-2{
    position: absolute;
    bottom: 12%;
    right: 27.2%;
} */

.vstep-info-block.home * {
    color: black;
}

.vstep-info-block.home {
    margin-right: 0;
    min-height: 200px;
}

.vstep-info-block.home .title {
    color: black;
}

.home-image {
    margin-right: 25px;
}

.home-image img {
    max-width: 300px;
}

.home-content a {
    text-decoration: none;
    display: block;
    width: fit-content;
}

.home-content_title {
    margin-bottom: 15px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
}

.home-content_desc {
    margin-bottom: 15px;
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 18px;
    color: #fff;
}

.home-content .button-dangky {
    width: fit-content;
    display: block;
    text-decoration: none;
}

.home-content_button {
    margin-bottom: 15px;
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 18px;
    padding: 5px 20px;
    width: fit-content;
    border-radius: 5px;
    background: #FF9D00;
    border: 2px solid #FF9D00;
    color: rgba(0, 0, 0, .7);
    text-align: center;
    transition: .3s;
}

.home-content_button:hover {
    background: #F9F0DE;
}

.home-content_view {
    font-family: 'SVN-Gilroy', sans-serif;
    color: #FEEAB8;
    font-size: 18px;
    margin-bottom: 10px;
}

.home-content_view i {
    width: 20px;
    text-align: center;
}

.home-content_view:hover span {
    text-decoration: underline;
}

.vstep-info-content_block {
    padding-left: 32px;
}

.vstep-main-subblock {
    margin-top: 50px;
}

.home-subblock {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #FF9D00;
    padding: 27px 20px;
    text-align: center;
}

.subblock_block {
    padding-bottom: 15px;
    border-bottom: 1px solid #FF9D00;
}

.subblock_block i {
    color: #FF9D00;
    font-size: 35px;
}

.subblock_title {
    margin-top: 7px;
    font-size: 18px;
    font-family: 'SVN-Gilroy', sans-serif;
    font-weight: bold;
}

.subblock_item_link {
    text-align: start;
    font-size: 18px;
    font-family: 'SVN-Gilroy', sans-serif;
    color: #01366C;
    border-bottom: 1px dotted #35353A;
    padding-top: 10px;
    padding-bottom: 10px;
}

.subblock_item_link:hover {
    text-decoration: underline;
}

@media all and (min-width: 992px) {
    .subblock_col {
        padding: 0 20px;
    }
}

@media(max-width: 991px) {
    .subblock_col {
        margin-bottom: 20px;
    }

    .vstep-main-home-left {
        margin-bottom: 20px;
        flex-direction: column;
    }

    .vstep-main-home-left .home-image {
        margin-bottom: 20px;
    }

    .home-content_title {
        font-size: 24px;
    }

    .home-content_desc,
    .home-content_view {
        font-size: 16px;
    }

    .subblock_item_link {
        font-size: 16px;
    }

    .vstep-main-home {
        font-size: 18px;
    }

    .vstep-main-id {
        font-size: 14px;
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }

    .vstep-main-logout {
        font-size: 14px;
        display: block;
        text-align: center;
        margin-top: 5px;
    }
}

/* =========== CSS HOME ============= */





/* ============ CSS FORM DANG KY =============== */
.vstep-line-form {
    border-bottom: 1px solid #FE0000;
    margin-top: 50px;
    margin-bottom: 80px;
}

.vstep-dangkythi-form {
    max-width: 1366px;
    margin: 0 auto;
    /* padding: 70px 40px 40px 40px; */
    /* border: 3px solid #FE0000; */
}

.vstep-dangkythi-form .vstep-dk-input .dk-text-title {
    color: #FE0000;
    font-weight: bold;
}

.vstep-dangkythi-form .vstep-dk-input .required {
    color: #FE0000;
}

.vstep-dk-col {
    margin-bottom: 30px;
}

.vstep-dangkythi-form .vstep-dk-input *:not(i) {
    font-family: 'SVN-Gilroy', sans-serif;
}

.vstep-dk-input .vstep-dk-label {
    margin-bottom: 10px;
    font-size: 18px;
}

.vstep-dk-input input,
.vstep-dk-input select,
.vstep-dk-input .select2-selection {
    /* background: #E7E7E7;
    border-radius: 0; */
}


.vstep-dk-radio .btn-gender {
    width: 49%;
    background: #313030;
    color: white;
    border: 1px solid #313030;
    border-radius: 0;
}

.vstep-dk-radio .btn-check+.btn-gender:hover {
    background: #FE0000;
    color: white;
    border: 1px solid #FE0000;
}

.vstep-dk-radio .btn-check:checked+.btn-gender {
    background: #FE0000;
    color: white;
    border: 1px solid #FE0000;
}

.vstep-main-title-form {
    position: relative;
    margin-bottom: 30px;
}

.vstep-main-title-form span {
    background: #ff0000;
    font-size: 24px;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    color: white;
    padding: 5px 20px;
}


.vstep-stepbystep {
    max-width: 1366px;
    margin: 0 auto;
}

.stepbystep {
    font-family: 'SVN-Gilroy', sans-serif;
    background: #E7E7E7;
    padding: 10px 20px;
    color: #313030;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(max-width: 991px) {
    .vstep-stepbystep {
        padding: 0 12px;
    }

    .stepbystep {
        justify-content: flex-start;
        border-bottom: 1px solid #fff;
    }
}

.number {
    font-family: 'SVN-Gilroy', sans-serif;
    background: #313030;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 99px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stepbystep.active {
    background: #ff0000;
    color: #fff;
}

.stepbystep.active .number {
    color: #ff0000;
    background: #fff;
}


@media(max-width: 991px) {
    .vstep-dangkythi {
        padding: 0 12px;
    }

    .vstep-dangkythi-form {
        padding: 50px 20px 20px 20px;
    }
}


.vstep-table-choose {
    background: #ffffff;
    border: 1px solid #ffffff;
    /* border-left: 10px solid #01366C; */
    padding: 20px;
    margin: 0 0 40px 0;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.vstep-table-choose:hover {
    /* border: 1px solid #313030;
    border-left: 10px solid #01366C; */
    background: #ffe3e3;
}

input[name="dkDotdangky"]:checked+label .vstep-table-choose {
    border: 1px solid green;
    border-left: 10px solid #01366C;
    background: #ffe3e3;
}

input[name="dkDotdangky"]:checked+label .vstep-table-choose .vstep-table-down .table-btn {
    background: green;
}

.vstep-table-up {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #aeaeae;
    padding-bottom: 20px;
}

.vstep-table-down {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
}

.vstep-table-choose .title {
    color: #ff0000;
    font-weight: bold;
    font-size: 18px;
}

.vstep-table-choose .title-down {
    font-weight: bold;
    font-size: 18px;
}

.table-btn {
    background: #ff0000;
    padding: 5px 15px;
    color: #fff;
    transition: .2s;
}

.table-btn.cathi{
    padding: 5px 25px;
    border-radius: 99px;
    /* background: #FFA726; */
}

.vstep-table-choose .content {
    font-size: 17px;
}

.vstep-table-choose .table-right .fa-circle-check {
    color: #04D242;
    font-size: 18px;
}

.dotdangky-label {
    display: block;
}

.vstep-upload-block {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #aeaeae;
}

.vstep-upload-icon i {
    font-size: 40px;
    padding-right: 20px;
    color: #aeaeae;
    padding-top: 5px;
    padding-bottom: 20px;
}


.vstep-dk-label p {
    font-size: 16px;
    font-style: italic;
}



/* CHON DON VI */
/* #inputDonvicongtac, */
.Donvicongtac-khac,
.MaSVHVCBGV {
    display: none;
}

.chondonvi-label {
    position: relative;
    font-size: 18px;
    margin-bottom: 5px;
    cursor: pointer;
    padding-left: 20px;
}

input[name="chondonvi"] {
    opacity: 0;
}

.chondonvi-label .checkmark {
    position: absolute;
    top: 0;
    left: -19px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

input[name="chondonvi"]:checked+.chondonvi-label .checkmark {
    background-color: #ff0000;
}

.chondonvi-label .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

input[name="chondonvi"]:checked+.chondonvi-label .checkmark:after {
    display: block;
}

.chondonvi-label .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

/* END CHON DON VI */




/* CHON BUOI */
.chonbuoiLabel {
    display: block;
}

.chonbuoiBlock {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-buoi {
    font-weight: bold;
    font-size: 20px;
}

.time-buoi-gio{
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    color: #ff0000;
    font-size: 22px;
}

.title-buoi-ngay{
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
}

.title-buoi-span{
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    color: #ff0000;
}

.title-buoi {
    font-size: 16px;
}

.chonbuoi-table-right {
    display: flex;
    align-items: center;
}

.chonbuoi-slot {
    /* color: #429e15;
    background: #edfce5; */
    color: #e1ffd3;
    background: green;
    margin-right: 30px;
    padding: 5px 25px;
    border-radius: 99px;
}

input[name="dkBuoi"]:checked+label .vstep-table-choose {
    border: 1px solid green;
    /* border-left: 10px solid #01366C; */
    background: #ffe3e3;
}

input[name="dkBuoi"]:checked+label .vstep-table-choose .table-btn {
    background: green;
}


.v2-chonbuoiText{
    max-width: 400px;
    width: 100%;
}

.v2-chonca-row .v2-chonca-col-l{
    padding-right: 5px;
}

.v2-chonca-row .v2-chonca-col-r{
    padding-left: 5px;
}

.v2-chonca-1,
.v2-chonca-2{
    background: #eff5ff;
    border: 2px solid #01366C;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 8px;
}

.v2-chonca-1 .month{
    font-size: 18px;
    line-height: 18px;
}

.v2-chonca-1 .year{
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-size: 24px;
    line-height: 30px;
}

.v2-chonca-1 .day{
    font-family: 'SVN-Gilroy-Black', sans-serif!important;
    font-size: 50px;
    line-height: 50px;
    color: #ff9d00;
}

.v2-chonca-2 .buoi{
    text-align: center;
    font-size: 18px;
    line-height: 18px;
}

.v2-chonca-2 .image{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-chonca-2 .image img{
    width: 35px;
    transform: translateY(5px);
    filter: invert(1);
}

.v2-chonca-2 .time{
    font-family: 'SVN-Gilroy-Black', sans-serif!important;
    font-size: 30px;
    line-height: 30px;
    color: #ff9d00;
}

@media(max-width: 991px) {

    .v2-chonca-1 .month{
        font-size: 16px;
        line-height: 16px;
    }
    
    .v2-chonca-1 .year{
        font-size: 20px;
        line-height: 20px;
    }
    
    .v2-chonca-1 .day{
        font-size: 40px;
        line-height: 40px;
    }
    
    .v2-chonca-2 .buoi{
        font-size: 16px;
        line-height: 16px;
    }
    
    .v2-chonca-2 .image{
        height: 40px;
    }
    
    .v2-chonca-2 .image img{
        width: 30px;
        transform: translateY(0px);
    }
    
    .v2-chonca-2 .time{
        font-size: 20px;
        line-height: 20px;
    }


    .chonbuoiBlock {
        flex-direction: column;
    }

    .chonbuoiText {
        margin-bottom: 10px;
    }

    .chonbuoi-table-right {
        flex-direction: column;
    }

    .chonbuoi-slot {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .time-buoi,
    .title-buoi {
        text-align: center;
    }
}

/* END CHON BUOI */





/* STEP BY STEP */
.vstep-btn {
    border-radius: 5px !important;
    padding: 10px 90px !important;
    background-image: linear-gradient(to right, #ff0000 0%, #ff3700 51%, #ff0000 100%) !important;
}

body {
    overflow-y: scroll;
}

#dangky .step {
    display: none;
}

.stepbystep {
    cursor: pointer;
}

#submit-form {
    display: none;
}

.form-footer {
    justify-content: flex-end;
}

#prevBtn,
#nextBtn {
    background: red;
    border: 1px solid red;
    color: #fff;
    padding: 5px 20px;
    margin-left: 15px;
    transition: .3s;
}

#prevBtn:hover,
#nextBtn:hover {
    background: #fff;
    color: #ff0000;
}

/* STEP BY STEP */





.vstep-alert {
    max-width: 1366px;
    margin: 30px auto 0 auto;
}


@media all and (min-width: 992px) {
    .vstep-table-down .table-left-block {
        margin-right: 30px;
    }

    .vstep-upload-label {
        width: 45%;
        padding-right: 20px;
    }

    .vstep-dk-label p {
        padding-right: 50px;
    }
}

@media(max-width: 991px) {
    .vstep-table-down {
        flex-direction: column;
    }

    .vstep-table-down .table-left-block {
        margin-bottom: 15px;
    }

    .vstep-upload-block {
        flex-direction: column;
    }

    .vstep-alert {
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* ============ CSS FORM DANG KY =============== */



/* ============ CSS PAYMENT =============== */
/* .choose-pay-section {
    position: relative;
    overflow-x: hidden;
} */

.choose-pay-section *:not(i) {
    font-family: 'SVN-Gilroy', sans-serif;
}

.choose-pay-section .vstep-table-choose {
    background: #fff;
    cursor: default;
}

.choose-pay-section .vstep-table-choose .vstep-table-down {
    align-items: flex-start;
}

.pay-block-left {
    position: relative;
    /* background: linear-gradient(to top, #01366C, #A8CCED); */
    padding: 230px 20px;
    height: 100%;
    /* background-image: url(https://dqh.vieit.net/vstep/static/images/vstep-2024/vstep-home-abs-1.png); */
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 100% 25%;
}

.pay-block-left .note{
    color: #01366C;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
}

.pay-logo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 90px 10px 15px;
    background: #fff;
    box-shadow: 0 4px 40px #00000040;
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}

.pay-main-title {
    font-size: 26px;
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    margin-bottom: 5px;
    color: #01366C;
}

.pay-main-desc {
    font-size: 22px;
    margin-bottom: 30px;
    color: #01366C;
}

.pay-main-desc .desc-bold {
    color: #01366C;
    font-weight: bold;
}

.pay-block-right {
    max-width: 1000px;
    margin: 0 auto;
    /* position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1000px;
    margin: 0 auto; */
    /* padding: 120px 100px 230px 100px; */
}

.pay-block-right .navbar-item-text {
    font-weight: bold;
}

.pay-sign {
    position: absolute;
    top: 24px;
    right: 12px;
}

.pay-item {
    margin-bottom: 15px;
    padding: 20px 30px 25px 30px;
    /* background: #A8CCED; */
    background: #01366C;
    border: 1px solid #01366C;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .3s;
    height: 100%;
    cursor: pointer;
}

.pay-item:hover {
    border: 1px solid #A8CCED;
    background: #FF9D00;
}

.pay-item-left {
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.pay-item-icon i {
    color: #01366C;
    font-size: 40px;
    width: 70px;
    text-align: center;
}

.pay-item-info .title {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
}

.pay-item-info .desc {
    color: #ffffff;
    font-size: 13px;
    font-family: 'SVN-Gilroy', sans-serif;
}

.pay-item-arrow {
    font-size: 25px;
    color: #01366C;
}

.body-block-items.pay {
    margin: 0 0 20px 0;
    background: #ffffff;
    max-width: 100%;
}

.money-origin {
    text-decoration: line-through;
}

.money-discount {
    color: #ff0000;
}

.pay-image-abs-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    filter: grayscale();
}

.body-pay-block-items {
    margin: 0 0 20px 0;
    border: 1px solid #01366C;
}

.body-pay-block-items .body-pay-block-date {
    background: #01366C;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}

.body-pay-block-date .month {
    color: #ffffff;
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 18px;
}

.body-pay-block-date .day {
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    color: #ff0000;
    font-size: 45px;
    line-height: 35px;
}

.body-pay-block-date .year {
    color: #ffffff;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-size: 20px;
}

.body-pay-block-info {
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    text-align: center;
}

.body-pay-block-info .body-title {
    font-family: 'SVN-Gilroy', sans-serif;
    font-weight: bold;
    font-size: 30px;
    color: #ff0000;
}

.payment-box-col {
    padding: 1px;
}

.pay-item-icon-v2 {
    margin-right: 15px;
    border: 1px solid #fff;
    border-radius: 99px;
    height: 40px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay-item-icon-v2 i {
    display: none;
    color: #fff;
    font-size: 24px;

}

.body-pay-block-info .body-time {
    font-size: 22px;
}

.payment-tructiep-info {
    display: none;
    background: #ffffff;
    padding: 30px;
    margin-top: 30px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15);
}

.payment-tructiep-info_title {
    color: #01366C;
    font-size: 20px;
    margin-bottom: 10px;
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
}

.payment-tructiep-info_content {
    color: #01366C;
    font-size: 18px;
    line-height: 35px;
}

.payment-tructiep-info_link {
    margin-top: 50px;
    background: #01366C;
    width: fit-content;
    border-radius: 3px;
    box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 27%);
    transition: .2s;
}

.payment-tructiep-info_link:hover{
    background: green;
}

.payment-tructiep-info_link a {
    color: white;
    text-decoration: none;
}

.payment-tructiep-info_link i {
    padding: 10px 10px;
    border-right: 1px solid #fff;
}

.payment-tructiep-info_link span {
    padding: 10px 10px;
}

@media(max-width: 1366px) {
    .pay-block-right {
        padding: 10rem 0rem;
    }
}

@media(max-width: 991px) {
    .pay-item{
        padding: 10px 20px 15px 20px;
    }
    .body-pay-block-info .body-title {
        font-size: 24px;
    }

    .pay-block-left {
        padding: 100px 10px 80px 10px;
    }

    .pay-block-right {
        padding: 1rem 1rem 6rem 1rem;
    }

    .pay-main-title {
        font-size: 26px;
        line-height: 30px;
    }

    .pay-item-info .title {
        font-size: 18px;
    }

    .pay-item-icon i {
        font-size: 40px;
        width: 55px;
    }

    .pay-item-info .desc {
        font-size: 12px;
    }
}

/* ============ END CSS PAYMENT =============== */






/* =============== CSS XEM LICH ON ============= */

.section-on {
    max-width: 1400px;
    margin: 70px auto 100px auto;
    padding: 0 12px;
}

.section-on *:not(i) {
    font-family: 'SVN-Gilroy', sans-serif;
}

.date-info-title {
    font-family: 'SVN-Gilroy-Bold', sans-serif !important;
    font-size: 24px;
    margin-top: 50px;
    margin-bottom: 10px;
}

.date-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.date-info-square {
    height: 15px;
    width: 15px;
    margin-right: 10px;
}

.date-info-square.green {
    background: green;
}

.date-info-square.red {
    background: red;
}


/* Datepicker */
.section-on .ui-datepicker-inline {
    width: 100%;
}

.section-on .ui-datepicker td {
    width: 13%;
}

.section-on .ui-state-default,
.section-on .ui-widget-content .ui-state-default {
    background: none;
    border: none;
    text-align: center;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    line-height: 1px;
}

.section-on .ui-datepicker-today .ui-state-default,
.section-on .ui-datepicker-today .ui-widget-content .ui-state-default {
    background: #FF9D00;
    color: #01366C;
    font-weight: bold;
}

.section-on .ui-state-active,
.section-on .ui-widget-content .ui-state-active {
    color: #01366C;
    font-weight: bold;
}

.blue a {
    background-color: #01366C !important;
    color: white !important;
}

/* Datepicker */


/* Full Calendar */
.section-on .fc-toolbar-title {
    text-transform: capitalize;
    font-family: 'SVN-Gilroy-Bold', sans-serif;
    font-size: 28px;
}

.section-on .fc-event-title {
    white-space: normal;
    color: green;
}

.section-on .fc-h-event {
    background-color: #cdffcd;
    border: 1px solid #014f0a;
}

.section-on .fc-col-header-cell .fc-scrollgrid-sync-inner {
    background: #01366C;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-on .fc-col-header-cell a {
    color: #FF9D00;
    text-decoration: none;
}

.section-on .fc-daygrid-day-number {
    color: black;
    text-decoration: none;
}

.section-on th,
.section-on td {
    overflow: visible;
}

@media (max-width: 991px){
    .section-on .fc-toolbar-title {
        font-size: 18px;
    }
}

/* Full Calendar */

/* =============== CSS XEM LICH ON ============= */