:root {
  --font1: 'Be Vietnam Pro', Arial, sans-serif;
  --font2: 'Nunito', Arial, sans-serif;
  --font-black: 900;
  --font-bold: 700;
  --font-mid: 500;
  --color1: #054190;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1120px;
    }
}

*{
	/*transition: all 0.5s ease;*/
}


* {
	scrollbar-width: thin;
	scrollbar-color: #054190 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 3px;
}

*::-webkit-scrollbar-track {
	background: #ffffff;
}

*::-webkit-scrollbar-thumb {
	background-color: #054190;
	border-radius: 10px;
	border: 0px solid #ffffff;
}
				
body{
	font-family: var(--font1);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: var(--color1);
	background-color: #fff;
	line-height: 1.3;
	transition: unset;
}

main{
	overflow: hidden;
}

.navbar{
	box-shadow: 1px -4px 16px 0px #9f9f9f;
}

a {
    text-decoration: none;
    color: var(--color1);
}

.post-content a {
    text-decoration: none;
    color: #0ba5dd;
}

a:hover{
	text-decoration: none;
	color: #0d6efd;
}

.logo{
	height: 60px;
}

.shadow-2{
	box-shadow: -1px 0px 8px 0px #9f9f9f;
}

.shadow-3{
	text-shadow: 2px 2px 0px rgba(255, 255, 255, 1), 3px 3px 0px rgba(171, 134, 58, 1);
}
.footer{
	background-color: #03469f;
    color: #fff;
    padding: 15px 0;
	position: relative;
}

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

.footer a{
	color: #fff;
}

.navbar-expand-md .navbar-nav .nav-link {
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 18px;
    color: var(--color1);
    text-transform: uppercase;
    padding: 0 18px;
    line-height: 2;
	border-radius: 10px 10px 0 0 !important;
}

.navbar-expand-md .navbar-nav .nav-link.active {
	color: #056f44;
    border-radius: 7px;
    line-height: 2;
    background-color: #c6efe0;
}

.navbar-expand-md .navbar-nav {
	padding-left: 15px;
}

.dropdown-menu.show {
    transform: translateX(-190px);
    width: 250px;
}
.dropdown-menu.noti {
        width: 335px;
		padding: 15px;
}
.dropdown-menu.noti.show {
    transform: translateX(-287px);
}

.title-1{
	text-align: center;
    margin-top: 35px;
    margin-bottom: 25px;
}

.title-1 img{
	 width: 50%;
}

.title-5{
	text-align: center;
}

.title-5 img{
	 width: 65%;
}

.title-6{
	text-align: center;
    margin-top: 15px;
    margin-bottom: 25px;
}

.title-6 img{
	 width: 55%;
}

.title-7{
	text-align: center;
    margin-top: 15px;
    margin-bottom: 45px;
}

.title-7 img{
	 width: 90%;
}

.title-home-4{
	text-align: center;
    margin-top: 50px;
    margin-bottom: 45px;
}

.title-home-4 img{
	 width: 80%;
}

.title-home-5{
	text-align: center;
    margin-top: 50px;
    margin-bottom: 45px;
}



.des-1{
	text-align: center !important;
    width: 80%;
    margin: auto;
	padding-bottom: 30px;
	font-size: 20px;
}
.des-2 {
	text-align: center !important;
    width: 80%;
    margin: auto;
	padding-bottom: 30px;
	font-size: 17px;
}
.btn-login-header{
	background-color: var(--color1);
    color: #fff;
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 10px;
    text-transform: uppercase;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 16px 0;
    text-align: center;
}

.btn-noti-header{
	background-color: var(--color1);
    color: #fff;
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 12px;
    text-transform: uppercase;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 10px 0;
    text-align: center;
}
.slider-camp .swiper-button-next:after, .slider-camp .swiper-rtl .swiper-button-prev:after {
    content: '';
}

.slider-camp .swiper-button-prev:after,.slider-camp  .swiper-rtl .swiper-button-next:after{
    content: '';
}

.slider-camp .swiper-button-next, .slider-camp .swiper-button-prev{
	width: 60px;
	height: auto;
}

.bg-style1{
	background-color: #fffef0;
	padding: 15px 0;
}
.bg-style3{
	background-color: rgba(249,234,167,1);
	background: rgb(249,234,167);
	background: -moz-linear-gradient(0deg, rgba(249,234,167,1) 0%, rgba(229,205,101,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(249,234,167,1) 0%, rgba(229,205,101,1) 100%);
	background: linear-gradient(0deg, rgba(249,234,167,1) 0%, rgba(229,205,101,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9eaa7",endColorstr="#e5cd65",GradientType=1);
}
.bg-style6{
	background: #FDFCF7;
	background: -webkit-linear-gradient(180deg,rgba(253, 252, 247, 1) 0%, rgba(249, 243, 212, 1) 100%);
	background: -moz-linear-gradient(180deg,rgba(253, 252, 247, 1) 0%, rgba(249, 243, 212, 1) 100%);
	background: linear-gradient(180deg,rgba(253, 252, 247, 1) 0%, rgba(249, 243, 212, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#FDFCF7",
	  endColorstr="#F9F3D4",
	  GradientType=0
	);
	
	padding: 45px 20px;
}


.bg-style2{
	background-color: #fffef0;
	background: linear-gradient(180deg, #fffef0 0%, #f8edb2 40%);
	padding: 45px 0;
}


.product-summary{
	padding: 0;
}
.product-summary .icon{
	text-align: center;
    height: 50px;
    width: 50px;
    margin: auto;
    margin-bottom: 15px;
}
.product-summary .icon img{
	width: 100%;
    object-fit: scale-down;
    height: 100%;
}
.product-summary .number{
	text-align: center;
    font-family: var(--font1);
    font-weight: var(--font-black);
    font-size: 25px;
    line-height: 1.2;
}
.product-summary .text{
	text-align: center;
    font-family: var(--font1);
    font-weight: var(--font-bold);
    font-size: 16px;
}

.product-list .head-title{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.product-list .head-title .title{
	font-family: var(--font2);
	font-weight: var(--font-black);
	font-size: 30px;
	text-transform: uppercase;
	color: var(--color1);
}


.product-list .head-title .view-more{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 17px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 18px;
    border-radius: 30px;
    text-transform: uppercase;
    line-height: 1;
	border: 1px solid var(--color1);
}

.deactive{
    background-color: #707070 !important;
	border: 1px solid #707070 !important;
}

.content-post * {
    white-space: normal !important;
	line-height: 1.5;
}


.product-list .head-title .view-more:hover{
    color: var(--color1);
    background-color: #fff;
	border: 1px solid var(--color1);
}

.video-item{
	display: block;
    width: 90%;
    position: relative;
	transition: all 0.5s ease;
}
.video-item:hover{
	transition: all 0.5s ease;
}

.video-item .video-image{
	height: 320px;
    overflow: hidden;
    border-radius: 15px;
}

.video-item .video-image img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-item .video-image .info{
	background: rgb(176, 165, 106);
    background: linear-gradient(0deg, rgba(176, 165, 106, 1) 0%, rgba(176, 165, 106, 0) 40%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 0 15px 15px 25px;
    color: #fff;
}
.video-item .video-image .avatar{
	width: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 5px;
    opacity: 0.7;
}

.video-item:hover .video-image .avatar{
	animation:spin 3s linear infinite;
}

.video-item .video-image .avatar img{
	
}

.video-item .video-image .info .title{
	font-family: var(--font1);
    font-weight: var(--font-black);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 12px;
}

.video-item .video-image .info .caption{
	font-family: var(--font1);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 12px;
}

.video-item .video-image .view_count{
	position: absolute;
    top: 0;
    right: 0;
    background-color: var(--color1);
    color: #fff;
    font-family: var(--font1);
    font-weight: var(--font-black);
    padding: 8px 15px;
    font-size: 15px;
    border-radius: 0 15px 0;
	z-index: 2;
}

.video-item .video-image .pending{
	position: absolute;
    top: 0;
    right: 0;
    background-color: rgb(255 255 255 / 78%);
    color: var(--color1);
    font-family: var(--font1);
    font-weight: var(--font-black);
    font-size: 16px;
    z-index: 9;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: 10px;

}

.video-item .video-image .reject{
	position: absolute;
    top: 0;
    right: 0;
    background-color: rgb(255 255 255 / 78%);
    color: red;
    font-family: var(--font1);
    font-weight: var(--font-black);
    font-size: 16px;
    z-index: 9;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: 10px;
    flex-direction: column;

}
.video-item .video-image .reject span{
	font-size: 12px;
    display: block;
    text-align: center;
    padding: 0 5px;
    color: #000;
    text-transform: none;
    font-weight: 400;
}

.video-item .video-image .frame{
	position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 3px solid var(--color1);
    transform: translate(10px, 10px);
    border-radius: 15px;
    transition: all 0.5s ease;
}

.video-item:hover .video-image .frame{
	transform: translate(0, 0);
	transition: all 0.5s ease;
}

.action-link-1{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 20px;
    text-transform: uppercase;
    padding: 0 15px;
    display: block;
    width: 95%;
    margin: auto;
}

.action-link-2 {
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 20px;
    text-transform: uppercase;
    padding: 0;
    display: block;
    width: 100%;
    margin: auto;
}

.br-r{
	border-right: 2px solid var(--color1);
}

.campaign-detail .detail{
	font-family: var(--font1);
    font-weight: var(--font-mid);
	text-align: center;
	margin-bottom: 0;
	font-size: 17px;
}

.campaign-detail .detail p{
	font-family: var(--font1);
    font-weight: var(--font-mid);
	text-align: center;
	margin-bottom: 0;
}
.hashtag-box{
	font-family: var(--font1);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 18px;
    border-radius: 30px;
    line-height: 1;
    border: 1px solid var(--color1);
    cursor: pointer;
    margin: auto;
    line-height: 1.3;
}

.btn1{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 18px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 18px;
    border-radius: 30px;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid var(--color1);
    cursor: pointer;
	width: 300px;
    margin: auto;
	user-select: none;
	white-space: nowrap;
}



.btn1:hover{
    color: var(--color1);
	background-color: #fff;
}


.btnguibaidang{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 16px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 18px;
    border-radius: 15px;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid var(--color1);
    cursor: pointer;
	width: 300px;
    margin: auto;
	user-select: none;
	white-space: nowrap;
}

.btnguibaidang img{
	height: 20px;
}


.btnguibaidang:hover{
    color: #fff;
}

.bg-image-1{
	background-image: url(/public/icon/line.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}

.rank-box{
	background-color: #fff;
    padding: 25px 35px;
    border-radius: 30px;
}

.rank-item{
	display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}
.rank-item .number{
	font-family: var(--font1);
    font-weight: var(--font-black);
    font-size: 25px;
    width: 50px;
}

.rank-item .avatar{
	padding-right: 20px;
}

.rank-item .avatar img{
	width: 65px;
	height: 65px;
	border-radius: 50%;
	
}
.rank-item .info{
	font-family: var(--font1);
    font-weight: var(--font-mid);
	width: 100%
}

.rank-item .info .username{
	font-family: var(--font1);
    font-weight: var(--font-bold);
	font-size: 18px;
	
}

.rank-item .info .stats ul{
	    padding: 0;
    margin: 8px 0 0 0;
    list-style: none;


}
.rank-item .info .stats li{
	display: inline-block;
    font-size: 16px;
    padding-right: 15px;
    line-height: 1.3;
}

.rank-item .info .stats li img{
	width: 20px;
    height: 20px;
    vertical-align: middle;
    line-height: 1;
}
.rank-item .info .stats li span{
	vertical-align: middle;
}

.rank-item .info .stats li.youtube{
	color: #ff0000;
}



.avatar-top .stats ul{
	    padding: 0;
    margin: 8px 0 0 0;
    list-style: none;


}
.avatar-top .stats li{
	display: inline-block;
    font-size: 16px;
    padding-right: 15px;
    line-height: 1.3;
}

.avatar-top .stats li img{
	width: 20px;
    height: 20px;
    vertical-align: middle;
    line-height: 1;
}
.avatar-top .stats li span{
	vertical-align: middle;
}

.avatar-top .stats li.youtube{
	color: #ff0000;
}



.layout4 .stats ul{
	    padding: 0;
    margin: 8px 0 0 0;
    list-style: none;


}
.layout4 .stats li{
	display: inline-block;
    font-size: 16px;
    padding-right: 15px;
    line-height: 1.3;
}

.layout4 .stats li img{
	width: 20px;
    height: 20px;
    vertical-align: middle;
    line-height: 1;
}
.layout4 .stats li span{
	vertical-align: middle;
}

.layout4 .stats li.youtube{
	color: #ff0000;
}



.form-select-custom{
	background-color: #fffef0;
    border-radius: 15px;
    border: var(--bs-border-width) solid var(--color1);
    color: var(--color1);
	font-family: var(--font1);
    font-weight: var(--font-bold);
	    font-size: 20px;
}

.shadow-1{
	box-shadow: 2px 4px 6px 0px #898989;
}

.form-select-custom3{
	background-color: var(--color1);
    border-radius: 15px;
    border: var(--bs-border-width) solid var(--color1);
    color: #fff;
	font-family: var(--font1);
    font-weight: var(--font-bold);
	font-size: 17px;
}

.title-2 {
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 25px;
    text-transform: uppercase;
}
.title-3 {
    font-family: var(--font1);
    font-weight: var(--font-black);
    font-size: 19px;
    text-transform: uppercase;
}
.title-4 {
    font-family: var(--font1);
    font-weight: var(--font-black);
    font-size: 22px;
}


.btn4 {
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 14px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 20px;
    border-radius: 15px;
    line-height: 1;
    border: 1px solid var(--color1);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-transform: uppercase;

}

.btn2 {
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 20px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 40px;
    border-radius: 30px;
    line-height: 1;
    border: 1px solid var(--color1);
    cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.btn3 {
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 15px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 10px;
    border-radius: 30px;
    line-height: 1;
    border: 1px solid var(--color1);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.btn-style-3{
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
}

.bg-style4 {
    background-color: #fffef0;
    background: linear-gradient(180deg, #d4b246 0%, #f8edb2 40%);
    padding: 0px 0;
}

.bradius-50{
	border-radius: 50px;
}

.bradius-15{
	border-radius: 15px;
}

.btn-neutral {
  color: #212529;
  border-color: #fff;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
}

.btn-neutral:hover {
  color: #212529;
  border-color: white;
  background-color: white;
  transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
}


.btn-neutral:focus {
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(255, 255, 255, .5);
}

.btn-neutral:disabled {
  color: #212529;
  border-color: #fff;
  background-color: #fff;
}

.btn-neutral:not(:disabled):not(.disabled):active {
  color: #212529;
  border-color: white;
  background-color: #e6e6e6;
}

.btn-neutral:not(:disabled):not(.disabled):active:focus {
  box-shadow: none, 0 0 0 0 rgba(255, 255, 255, .5);
}

.btn-icon .btn-inner--icon img {
  width: 20px;
  vertical-align: sub;
}

.btn-icon .btn-inner--text:not(:first-child) {
  margin-left: .75em;
}

.btn-icon .btn-inner--text:not(:last-child) {
  margin-right: .75em;
}
ul.float-button{
	position: fixed;
    right: 20px;
    bottom: 50px;
    list-style: none;
    padding: 0;
    margin: 0;
	z-index: 2;
}
ul.float-button li{
	margin-bottom: 10px;
	display: flex;
    justify-content: flex-end;
}
.float-button .btnFloat{
	width: 60px;
    display: block;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    box-shadow: 1px 1px 1px #9f9f9f;
	cursor: pointer;
}

.float-button .btnFloatGift{
    display: block;
	cursor: pointer;
}


.calltrap_spin{
		-webkit-animation: calltrap_spin 3s infinite linear;
        -moz-animation: calltrap_spin 3s infinite linear;
        -o-animation: calltrap_spin 3s infinite linear;
        animation: calltrap_spin 3s infinite linear
		
}
.float-button .btnHashTag{
	background-color: #f9ca45;
	font-size: 30px;
    padding: 11px 0;
	
		
}
.float-button .btnMail{
	background-color: #fff;
}
.float-button .btnLogo{
	background-color: #fff;
}



.float-button .btnGift1{
	
}

.float-button .btnGift2{
	
}

.float-button .btnHST{
	background-color: #fff;
}

.float-button .btnMail img{
	width: 40px;
    padding: 16px 0;
}
.float-button .btnLogo img{
	width: 45px;
    padding: 8px 0;
}

.float-button .btnMaGioiThieu{
	
}

.float-button .btnMaGioiThieu img{
	width: 115px;
    padding: 8px 0;
	cursor: pointer;
}

.float-button .btnGift1 img{
	width: 100px;
}

.float-button .btnGift2 img{
	width: 100px;
}

.float-button .btnHST img{
	width: 35px;
    padding: 15px 0;
}

.text-hashtag{
	font-family: var(--font1);
    font-weight: var(--font-mid);
    font-size: 16px;
    padding: 15px 0;
	color: green;
}
.note-hashtag{
	font-family: var(--font1);
    font-weight: var(--font-mid);
    font-size: 16px;
    padding: 0 0 15px 0;
}
.hashtag-title{
	display: flex;
    align-items: center;
    justify-content: space-between;
}

.closePop{
	width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

#popGift1{
	position: relative;
}

#popGift2{
	position: relative;
}

.hashtag-title img{
	cursor: pointer;
}

.post_url{
	width: 100%;
    background-color: transparent;
    color: var(--color1);
    font-family: var(--font1);
    font-weight: var(--font-mid);
    border: 1px solid var(--color1);
    border-radius: 15px;
    font-size: 15px;
    margin: 15px 0 15px 0;
    padding: 15px 20px;
}

.post_nguoigioithieu{
	width: 100%;
    background-color: transparent;
    color: var(--color1);
    font-family: var(--font1);
    font-weight: var(--font-mid);
    border: 1px solid var(--color1);
    border-radius: 15px;
    font-size: 15px;
    margin: 15px 0 15px 0;
    padding: 15px 20px;
}

.post_ref{
	width: 100%;
    background-color: transparent;
    color: var(--color1);
    font-family: var(--font1);
    font-weight: var(--font-mid);
    border: 1px solid var(--color1);
    border-radius: 15px;
    font-size: 15px;
    margin: 15px 0 15px 0;
    padding: 15px 20px;
}

.post_ref_text{
	width: 100%;
    background-color: transparent;
    color: var(--color1);
    font-family: var(--font1);
    font-weight: var(--font-mid);
    border: 1px solid var(--color1);
    border-radius: 15px;
    font-size: 15px;
    margin: 15px 0 15px 0;
    padding: 15px 20px;
}

.error-code{
	color: red;
    margin-bottom: 15px;
    display: none;
}

.login_email{
	width: 100%;
    background-color: var(--color1);
    color: #fff;
    font-family: var(--font1);
    font-weight: var(--font-mid);
    border: 0;
    border-radius: 15px;
    font-size: 15px;
    margin: 15px 0 15px 0;
    padding: 15px 20px;
}

.btnSubmitPost{
	font-size: 20px;
}
.link-note{
	font-family: var(--font1);
    font-weight: var(--font-mid);
	word-wrap: break-word;
}
.link-note ul{
	padding-left: 18px;
}
.link-note li{
	    
}

.btnCloseModal{
	    background-color: var(--color1);
    font-family: var(--font2);
    font-weight: var(--font-black);
    color: #fff;
    border-radius: 50%;
    border: 0;
    width: 50px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    position: absolute;
    right: -15px;
    top: -10px;
    padding: 0;
	user-select: none;
}

.dropdown-menu-user{
	margin-bottom: 5px;
    border-radius: 7px;
    overflow: hidden;
	background-color: var(--color1);
    padding: 15px;
}
.dropdown-menu-user li.avatar{
	background-color: transparent;
	
}
.dropdown-menu-user li.avatar{
	color: #fff;
	margin-bottom: 15px;
	
}

.dropdown-menu-user li{
	margin-bottom: 5px;
    border-radius: 7px;
    overflow: hidden;
	background-color: #fff;
}

.dropdown-menu-user li a{
	padding: 5px 8px;
	color: var(--color1);
	font-weight:500;
}

.dropdown-menu-user li a i{
	    color: #5d5d5d;
}

.bg-style3 {
    background-color: #fffef0;
    background: linear-gradient(180deg, #ffffff 0%, #f8edb2 40%);
    padding: 45px 0;
}

.box-1{
	padding: 30px 30px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 2px 4px 6px 0px #898989;
}
.box-2{
	padding: 15px 15px;
    border-radius: 15px;
}

.form-label,.col-form-label {
    margin-bottom: .5rem;
    font-weight: 700;
    font-size: 16px;
}

.required{
	color:red;
}


.error{
	color: red;
	padding: 3px 0;
}

.btn2[disabled] {
    opacity: 0.5;
}


div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: 1.3em !important;
	color: #054190 !important;
}

.main-menu{
	display: none;
	width: 100%;
    height: 100%;
    position: fixed;
    background-color: #fff;
    z-index: 3;
    top: 58px;
	
}

.main-menu.show{

}
.main-menu .item-list{
	font-family: var(--font2);
    font-weight: var(--font-black);
    text-align: center;
    font-size: 20px;
    padding-top: 6px;
    padding-bottom: 15px;
	
}
.main-menu .item-list a{
	font-family: var(--font2);
	font-weight: var(--font-black);
}
.main-menu hr{
	margin: 0;
}

.overflow-hidden{
	overflow: hidden;
}

.pagination{
	display: flex;
    align-items: center;
    justify-content: center;
}
.pagination li a{
	border-left: 1px solid var(--color1);
    border-right: 1px solid var(--color1);
    border-bottom: 0;
    border-top: 0;
    background-color: unset;
    color: var(--color1);
    padding: 0 15px;
    text-decoration: none;
    position: relative;
    display: block;
    font-size: 25px;
}

.pagination li:last-child a{
    border-right: 0;
}

.pagination li:first-child a{
    border-left: 0;
}

.pagination li a:hover {
    z-index: 2;
    color: #fff;
    background-color: var(--color1);
    border-color: unset;
}
.no-payment{
	padding: 40px 15px;
}

.no-payment .icon{
	margin-bottom: 10px;
}

.no-payment .icon i{
	
	font-size: 45px;
}

.no-payment .note{
	font-size: 18px;
    font-weight: 700;
    margin: 15px 0;
}

.account-status{
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    font-weight: 700;
    font-size: 18px;
    padding-top: 20px;
}
.account-status .good{
	color: green;
	font-size: 20px;
}

.text-style-1{
	font-weight: 700;
    font-size: 20px;
}

.box-style-2{
	border: 2px solid var(--color1);
    border-radius: 15px;
    padding: 30px 15px;
    font-weight: 700;
    font-size: 20px;
	margin-bottom: 15px;
}

.box-style-2 .title{
	text-align:center;
}

.box-style-2 .money{
	text-align:center;
}

.table.pay-out{
	border-radius: 10px;
    overflow: hidden;
	
	
}

.table.pay-out .table-dark {
    --bs-table-color: #fff;
    --bs-table-bg: #054190;
    --bs-table-border-color: #054190;
}

.quydinhthanhtoan ol, .quydinhthanhtoan ul{
	padding-left: 15px;
    font-weight: 400;
    font-size: 16px;
}
.cccd-image{
	border: 2px solid var(--color1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    cursor: pointer;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #cecece;
}
.cccd-image i{
	font-size: 40px;
}
.bank-box{
	border-left: 5px solid var(--color1);
    padding-left: 15px;
}

.bank-box .bank_name{
	font-size: 15px;
    font-weight: 700;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.bank-box .bank_name div{
	
}

.bank-box .bank_name>span{
	font-size: 15px;
	color: green;
	cursor: pointer;
}

.bank-box .account_number{
	font-size: 16px;
    font-weight: 600;
}

.bank-box .account_name{
	font-size: 14px;
    font-weight: 600;
	margin-bottom: 8px;
}

.v-center{
	display: flex;
    align-items: center;
}

.stepThongTin .bank-box{
	
}


.progressbar {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.progressbar li {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    width: 50%;
    color: #999999;
    font-weight: bold;
}
.progressbar li div{
	padding-top: 45px;
}

.progressbar li:before {
    display: block;
    width: 28px;
    height: 28px;
    margin: 7px auto 20px auto;
    content: '';
    text-align: center;
    border-radius: 50%;
    background-color: #F5F5F5;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    z-index: 2;
}
.progressbar li:after {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: -50%;
    width: 100%;
    height: 2px;
    content: '';
    background-color: #F5F5F5;
}
.progressbar li:first-child:after {
    content: none;
}
.progressbar li.active,
.progressbar li.complete{
    color: #0070BD;
}
.progressbar li.active:before,
.progressbar li.complete:before {
    background-color: #0070BD;
}
.progressbar li.active:after,
.progressbar li.complete:after {
    background-color: #0070BD;
}

.campaign-list-tab{
	
}

.campaign-list-tab .campaign-item{
	font-family: var(--font1);
    font-weight: var(--font-black);
    color: #fff;
    background-color: var(--color1);
    border-radius: 15px;
    margin-bottom: 15px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
	opacity: 0.5;
	user-select: none;
}

.campaign-list-tab .campaign-item.active{
	opacity: 1;
}

.doanhthutong-box{
	border-radius: 20px;
    border: 2px solid var(--color1);
    padding: 20px;
    background-color: #fff;
    margin-top: 15px;
}

.doanhthutong-box .tongdoanhthu-item{
	display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 16px;
	align-items: flex-end;
}

.content-post{
	font-size: 15px;
}

.content-post ul{
	margin: 0;
}

.content-post p {
    margin-top: 0;
    margin-bottom: 0px;
	line-height: 1.5;
}

.reward-box{
	border: 2px solid var(--color1);
    border-radius: 20px;
    overflow: hidden;
   
    background-color: #fff;
}

.reward-box .reward-title{
	background-color: var(--color1);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    font-size: 20px;
    font-weight: 600;
}

.reward-box .reward-title div{
	
}

.reward-box .reward-title span{
	
}

.reward-box .reward-content{
	 padding: 20px;
}

.reward-item{
	border: 2px solid var(--color1);
    padding: 25px;
    border-radius: 20px;
	text-align: center;
}

.reward-item .name{
	
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 15px;
}
.reward-item .image {
	margin-bottom: 15px;
}
.reward-item .image img{
	width: 40%;
}
.reward-item .amount{
	font-weight: 700;
    font-size: 20px;
}

.reward-item .earn{
	position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgb(67 133 219 / 48%);
    border-radius: 20px;
}
.reward-item .earn img{
	width: 60px;
	width: 60px;
}

.flex-between{
	display: flex;
    justify-content: space-between;

}
.campaign-box{
	border-radius: 15px;
    overflow: hidden;
	    margin-bottom: 35px;
		box-shadow: 2px 4px 6px 0px #898989;
}
.campaign-box .info{
	background-color: #fefede;
    padding: 20px 25px;

}
.campaign-box .info .head{
	
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.campaign-box .info .head>div{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 17px;
    text-transform: uppercase;
}


.campaign-box .info .detail{
	font-family: var(--font1);
    font-weight: var(--font-mid);
	font-size: 14px;
	min-height: 130px;
    overflow: hidden;
}

.product-box{
	border-radius: 15px;
    overflow: hidden;
	    margin-bottom: 35px;
		box-shadow: 2px 4px 6px 0px #898989;
		background-color: #fffef0;
}

.campaign-title{
	width: 100%;
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 55px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto 25px;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 1), 4px 4px 0px rgba(171, 134, 58, 1);
}
.bank_pending{
	background-color: #747474;
    color: #fff;
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 20px;
    vertical-align: middle;
	display: inline-block;
}

.bank_success{
	background-color: #15b320;
    color: #fff;
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 20px;
    vertical-align: middle;
	display: inline-block;
}

.table>tbody>tr>td,.table>tbody>tr>th{
	color: var(--color1);
}

.table>:not(caption)>*>* {
    padding: 0.8rem 1.5rem;
}

.nowrap{
	white-space: nowrap;
}

.btnGuiBaiDangFloat{
	white-space: unset;
    width: 60px;
    display: block;
    font-size: 12px;
    padding: 15px 0px;
    text-align: center;
    height: 60px;
    line-height: 1.3;
}

.helpZalo{
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 90%);
	z-index: 9999;
	position: fixed;
	display: none;
}

.helpZalo img{
	position: absolute;
    width: 80px;
    right: 0;
    top: 20px;
    animation: moveupdown 2s ease infinite;
}

.helpZalo div{
	width: 80%;
    color: #fff;
    text-align: center;
    margin: auto;
    font-size: 20px;
}
.note_tuchoi{
	border: 2px solid var(--color1);
    border-radius: 15px;
    padding: 20px;
    background-color: #ffef6f;
}
.note_tuchoi .title{
	font-weight: 700;
    color: red;
    font-size: 16px;
}
.note_tuchoi .note{
	
}

.btn2 {
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 13px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 18px;
    border-radius: 30px;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid var(--color1);
    cursor: pointer;
    /* width: 300px; */
    /* margin: auto; */
    user-select: none;
    white-space: nowrap;
}
.floatBoxHST{
	display:none;
	position: absolute;
    right: 66px;
    width: 250px;
    background-color: #fff;
    border-radius: 15px;
    padding: 15px;
}
.floatBoxHST a{
	font-weight: 700;
}
.floatBoxHST a img{
	width: 30px;
	padding-right: 5px;
}
.floatBoxHST hr{
	margin: 10px 0;
    opacity: 1;
    border-top: 1px solid var(--color1);
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: '';
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: '';
}
.noti{
	margin: 0;
    padding: 0;
    list-style: none;
}
.has_noti{
	width: 17px;
    height: 17px;
    background-color: red;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 1px 0;
    position: absolute;
    top: 0;
    right: 0;
}

.noti li{
	
}

.noti li a{
	cursor: pointer;
    display: flex;
    align-items: flex-start;
    margin-bottom: 7px;
}

.noti li a .icon{
	
}

.noti li a .icon img{
	width: 45px;
}

.noti li a .info{
	padding-left: 5px;
}

.noti li a .info .name{
	text-transform: uppercase;
    font-weight: 400;
    color: #000;
    white-space: nowrap;
	line-height: 1.5;
}

.noti li a .info .des{
	font-size: 15px;
    color: #5c5c5c;
    padding: 3px 0px;
}
.noti li a .info .view-more{
	font-size: 15px;
    color: #0053f2;
}

.title-login-email{
	text-align: left;
    font-weight: 700;
    font-size: 18px;
    margin-top: 15px;
	text-transform: uppercase;
}

.formOTP{
	display:none;
}

.login_otp {
    width: 100%;
    background-color: var(--color1);
    color: #fff;
    font-family: var(--font1);
    font-weight: var(--font-mid);
    border: 0;
    border-radius: 15px;
    font-size: 28px;
    margin: 15px 0 15px 0;
    padding: 7px 20px;
    letter-spacing: 20px;
    text-align: center;
}

.user_avatar{
	width: 100px;
    height: 100px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	cursor: pointer;
}
.rcrop-wrapper{
	
}
.modalcus-1{
	right: -17px;top: -13px;
}

.rcrop-wrapper .rcrop-croparea .rcrop-croparea-inner{
	border-radius: 50%;
}
.rcrop-wrapper .rcrop-outer {
    background: #000000;
}

.btn1[disabled] {
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 18px;
    color: #fff;
    background-color: var(--color1);
    padding: 10px 18px;
    border-radius: 30px;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid var(--color1);
    cursor: pointer;
    width: 300px;
    margin: auto;
    user-select: none;
    white-space: nowrap;
	opacity: 0.5;
}

.bxh{
	-moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    padding: 0;
    list-style: none;
    margin: 0;
}

.bxh li{
	
}


.layout4 .item-top-lv-2 .info .view {
    color: #ffffff;
	font-weight: 700;
}

.avatar-top .view{
	color: #855015;
	font-size: 20px;
	font-weight: 700;
}

@media (min-width: 1290px) {
    .col-lg-5c {
        flex: 0 0 auto;
        width: 20%;
    }
}


@media (max-width: 765px) {
	
	.bxh{
		-moz-column-count: 1;
		-moz-column-gap: 10px;
		-webkit-column-count: 1;
		-webkit-column-gap: 10px;
		column-count: 1;
		column-gap: 10px;
		padding: 0;
		list-style: none;
		margin: 0;
	}
	
	.account-status {
		font-size: 15px;
	}
	.rcrop-wrapper {
		max-width: 70%;
	}

	.dropdown-menu.noti.show {
		transform: translateX(-205px);
	}

	.btn-noti-header{
		width: 40px;
		height: 40px;
		padding: 7px 0;
	}
	.floatBoxHST{
		right: 50px;
	}
	.text-style-1 {
		font-weight: 700;
		font-size: 17px;
	}

	.btnguibaidang{
		font-size: 12px;
	}
	.btn2 {
		font-family: var(--font2);
		font-weight: var(--font-black);
		font-size: 11px;
		color: #fff !important;
		background-color: var(--color1);
		padding: 10px 18px;
		border-radius: 30px;
		text-transform: uppercase;
		line-height: 1;
		border: 1px solid var(--color1);
		cursor: pointer;
		/* width: 300px; */
		/* margin: auto; */
		user-select: none;
		white-space: nowrap;
		height: 33px;
	}

	.title-4 {
		font-size: 17px;
	}
	ul.float-button{
		right: 5px;
		bottom: 70px;
	}

	.btnGuiBaiDangFloat{
		font-size: 12px !important;
	}

	.title-5 img{
		 width: 95%;
	}

	.reward-item .name {
		font-weight: 700;
		font-size: 13px;
		margin-bottom: 15px;
	}
	.reward-item .amount {
		font-weight: 700;
		font-size: 16px;
	}

	.campaign-list-tab .campaign-item {
		font-family: var(--font1);
		font-weight: var(--font-black);
		color: #fff;
		background-color: var(--color1);
		border-radius: 15px;
		margin-bottom: 15px;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		text-align: center;
		cursor: pointer;
		opacity: 0.5;
		user-select: none;
		
	}

	.footer .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column-reverse;
	}

	.float-button .btnFloat {
		width: 45px;
		height: 45px;
	}
	.float-button .btnMail img {
		width: 30px;
		padding: 12px 0;
	}
	
	.float-button .btnHashTag {
		font-size: 24px;
		padding: 8px 0;
	}
	
	.float-button .btnMaGioiThieu img{
		width: 100px;
		padding: 10px 0;
		
	}
	
	.float-button .btnLogo img {
		width: 30px;
		padding: 10px 0;
	}
	
	.float-button .btnHST img {
		width: 35px;
		padding: 6px 0;
	}

	.hashtag-box {
		font-size: 15px;
	}

	.rank-item .info .stats ul{

		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;

	}
	
	.avatar-top .stats ul{

		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;

	}
	.layout4 .stats ul{

		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;

	}
	
	
	.product-summary .icon {
		text-align: center;
		height: 35px;
		width: 35px;
		margin: auto;
		margin-bottom: 15px;
	}
	
	.product-summary .number {
		text-align: center;
		font-family: var(--font1);
		font-weight: var(--font-black);
		font-size: 13px;
		line-height: 1.2;
	}
	
	.product-summary .text {
		text-align: center;
		font-family: var(--font1);
		font-weight: var(--font-bold);
		font-size: 12px;
	}
	.campaign-box .info .detail{
		font-size: 15px;
	}
	.campaign-title {
		width: 100%;
		font-size: 30px;
		text-shadow: 1px 1px 0px #ffffff, 3px 3px 0px #ab863a;
	}
	
	.shadow-3 {
		text-shadow: 1px 1px 0px #ffffff, 2px 3px 0px #ab863a;
	}

	.campaign-box .info .head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
	}
	
	.campaign-box .info .head>div {
		font-family: var(--font2);
		font-weight: var(--font-black);
		font-size: 20px;
		text-align: center;
		margin-bottom: 15px;
	}
	
	.campaign-box .info {
		background-color: #fff;
		padding: 15px 15px;
	}

	.reward-item{
		padding: 20px 10px;
	}


	.navbar-toggler:focus {
		text-decoration: none;
		outline: 0;
		box-shadow: unset;
	}

	.size-top {
        width: 40px;
        height: 40px;
        font-size: 9px;
        padding: 15px 0;
    }
	
	.size-top-image {
        width: 40px;
        height: 40px;
    }
	.navbar{
		    box-shadow: 0px 1px 20px 0px #e6e6e6;
	}
	.logo {
		height: 40px;
	}

	.box-1{
		padding: 25px 20px;
	}
	
	.box-2{
		padding: 0;
	}
	
    .des-1 {
		width: 100%;
		margin: auto;
		padding-bottom: 20px;
		font-size: 15px;
	}
	.des-2 {
		width: 100%;
		margin: auto;
		padding-bottom: 20px;
		font-size: 15px;
	}
	
	.title-1 img {
		width: 100%;
	}
	
	.title-6 img {
		width: 100%;
	}
	
	.title-7 img {
		width: 100%;
	}
	
	.title-1 {
		text-align: center;
		margin-top: 25px;
		margin-bottom: 15px;
	}
	
	.slider-camp .swiper-button-next, .slider-camp .swiper-button-prev {
		width: 35px;
		height: auto;
	}
	
	.product-list .head-title .title {
		font-size: 21px;
	}
	
	.product-list .head-title .view-more {
		font-size: 10px;
	}
	
	.action-link-1 {
		font-size: 15px;
		padding: 0px;
		width: 100%;
	}
	
	.action-link-2 {
		font-size: 15px;
		padding: 0px;
		width: 100%;
	}
	
	.campaign-detail .detail {
		font-size: 15px;
	}
	
	.btn1 {
		font-size: 20px;
	}
	.video-item {
		width: 93%;
	}
	.video-item .video-image {
		height: 625px;
	}
	
	.video-item .video-image {
		height: 290px;
        margin-bottom: 15px !important;
	}
	
	
	.bg-style1 {
		padding: 15px 0;
	}
	
	.rank-box {
		background-color: #fff;
		padding: 15px 0;
		border-radius: 30px;
	}
	.rank-item {
		display: flex;
		align-items: flex-start;
		flex-wrap: nowrap;
		margin-bottom: 20px;
	}
	.rank-item .number {
		font-family: var(--font1);
        font-weight: var(--font-black);
        font-size: 17px;
        
        padding-top: 10px;
		width: 20px;
	}
	.rank-item .avatar {
		padding-right: 5px;
	}
	.rank-item .avatar img {
		width: 40px;
        height: 40px;
        border-radius: 50%;
	}
	.rank-item .info .username {
		font-family: var(--font1);
        font-weight: var(--font-bold);
        font-size: 15px;
        margin-bottom: 0px;
	}
	
	.rank-item .info .stats .item {
		font-size: 15px;
		padding-right: 15px;
		line-height: 1.3;
		margin-bottom: 5px;
	}
	.rank-item .info .stats .item img {
		width: 25px;
		height: 25px;
		vertical-align: middle;
		line-height: 1;
	}
	.rank-item .info .stats .item span {
		vertical-align: middle;

	}
	
	.rank-item .info .stats li {
		display: inline-block;
		font-size: 11px;
		padding-right: 5px;
		line-height: 1.3;
	}
	
	.rank-item .info .stats li img {
		width: 17px;
		height: 17px;
		vertical-align: middle;
		line-height: 1;
	}
	
	
	
	.avatar-top .stats .item {
		font-size: 15px;
		padding-right: 15px;
		line-height: 1.3;
		margin-bottom: 5px;
	}
	.avatar-top .stats .item img {
		width: 25px;
		height: 25px;
		vertical-align: middle;
		line-height: 1;
	}
	.avatar-top .stats .item span {
		vertical-align: middle;

	}
	
	.avatar-top .stats li {
		display: inline-block;
		font-size: 11px;
		padding-right: 5px;
		line-height: 1.3;
	}
	
	.avatar-top .stats li img {
		width: 17px;
		height: 17px;
		vertical-align: middle;
		line-height: 1;
	}
	
	.layout4 .stats .item {
		font-size: 15px;
		padding-right: 15px;
		line-height: 1.3;
		margin-bottom: 5px;
	}
	.layout4  .stats .item img {
		width: 25px;
		height: 25px;
		vertical-align: middle;
		line-height: 1;
	}
	.layout4  .stats .item span {
		vertical-align: middle;

	}
	
	.layout4  .stats li {
		display: inline-block;
		font-size: 11px;
		padding-right: 5px;
		line-height: 1.3;
	}
	
	.layout4  .stats li img {
		width: 17px;
		height: 17px;
		vertical-align: middle;
		line-height: 1;
	}
	
	.btnCloseModal {
		right: 15px;
        top: 10px;
        width: 30px;
        height: 30px;
        font-size: 15px;
	}
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}


@-webkit-keyframes zoom {

	100% {
		box-shadow: 0 0 0 15px rgb(249 202 69 / 30%)
	}
}

@keyframes zoom {

	100% {
		box-shadow: 0 0 0 15px rgb(249 202 69 / 30%)
	}
}

@-webkit-keyframes calltrap_spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	30% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	33% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	36% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	39% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	42% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	45% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	48% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
		opacity: 1
	}
	51% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	54% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	57% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@-moz-keyframes calltrap_spin {
	0% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	30% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	33% {
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	36% {
		-moz-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	39% {
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	42% {
		-moz-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	45% {
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	48% {
		-moz-transform: rotate(10deg);
		transform: rotate(10deg);
		opacity: 1
	}
	51% {
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	54% {
		-moz-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	57% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@-o-keyframes calltrap_spin {
	0% {
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	30% {
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	33% {
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	36% {
		-o-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	39% {
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	42% {
		-o-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	45% {
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	48% {
		-o-transform: rotate(10deg);
		transform: rotate(10deg);
		opacity: 1
	}
	51% {
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	54% {
		-o-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	57% {
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@keyframes calltrap_spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	30% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	33% {
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	36% {
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	39% {
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	42% {
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	45% {
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	48% {
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
		transform: rotate(10deg);
		opacity: 1
	}
	51% {
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}
	54% {
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
		transform: rotate(10deg)
	}
	57% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@keyframes moveupdown{
  50% { transform: translateY(-15px); }
}
@keyframes moveupdown2{
  50% { transform: translateY(-15px) scaleX(-1); }
}
@keyframes moveupdown3{
  50% { transform: translateY(-15px) rotate(20deg) ; -webkit-transform: translateY(-15px) rotate(20deg) ; -moz-transform: translateY(-15px) rotate(20deg) ; -ms-transform: translateY(-15px) rotate(20deg) ; -o-transform: translateY(-15px) rotate(20deg) ; }
}

#modalPopup .modal-content {
    background-color: transparent;
    background-clip: padding-box;
    border: 0;
}


#modalPopupGioiThieu .modal-content {
    background-color: transparent;
    background-clip: padding-box;
    border: 0;
}

#modalPopup .modal-body{
	
}
.close_popup_cnvk{
	width: 6%;
    height: 6%;
    position: absolute;
    top: 3%;
    right: 20%;
    cursor: pointer;
    z-index: 999;
}

.close_popupgioithieu{
	width: 6%;
    height: 6%;
    position: absolute;
    top: 3%;
    right: 20%;
    cursor: pointer;
    z-index: 999;
}

.bg-style5{
	background: #FFFEFC;
	background: -webkit-linear-gradient(180deg,rgba(255, 254, 252, 1) 0%, rgba(252, 248, 227, 1) 100%);
	background: -moz-linear-gradient(180deg,rgba(255, 254, 252, 1) 0%, rgba(252, 248, 227, 1) 100%);
	background: linear-gradient(180deg,rgba(255, 254, 252, 1) 0%, rgba(252, 248, 227, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#FFFEFC",
	  endColorstr="#FCF8E3",
	  GradientType=0
	);
	padding: 35px 0;
}

.mb-4{
	margin-bottom: 35px;
}

.mb-8{
	margin-bottom: 60px;
}

.unset-min-height{
	min-height: unset !important;
}

#tabNoiBat .nav-link{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 19px;
    text-transform: uppercase;
    color: #03469f;
	border: 0;
	border-right: 1px solid #fff;
    border-left: 1px solid #fff;
	padding: 20px 18px;
}

#tabNoiBat .nav-link.active{
	background-color: #fefede;
	border: 0;
	border-radius: 20px 20px 0 0;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

#noiBatContent .tab-pane{
	
	padding: 30px 15px;
    min-height: 200px;
    background-color: #fefede;
    
}

#noibatbox{
	margin-bottom: 50px;
	box-shadow: 0px 0px 8px 0px #898989;
	border-radius: 20px;
	overflow: hidden;
	
}

#noiBatContent{
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background-color: #fefede;
}

.btnOnTop{
	text-align: center;
    margin: 20px 0;
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
	
}
.btnOnTop img{
	
}

#modalMaGioiThieu .title-2{
	font-size: 30px;
}

#modalMaGioiThieu .input-2{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

#modalMaGioiThieu .input-2 .input{
	border: 1px solid #054190;
    border-radius: 15px;
    height: 45px;
    line-height: 1;
    width: 80%;
    font-size: 13px;
    padding: 15px 15px;
    margin: 10px 15px 10px 0;
}

#modalMaGioiThieu .input-2 .btnCopy{
	border: 1px solid #054190;
    border-radius: 15px;
    height: 45px;
    line-height: 1;
    padding: 13px 15px;
    margin: 10px 0;
    font-weight: 700;
    background-color: #054190;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

#modalMaGioiThieu .title-sub{
	font-family: var(--font1);
    font-size: 17px;
    font-weight: 700;
}

.text-color-gray{
	color: #5e5e5e;
}
#modalMaGioiThieu .viewmore{
	font-size: 16px;
	font-weight: 500;
}

#modalMaGioiThieu .viewmore i{
	font-size: 20px;
}
#modalMaGioiThieu .viewmore a{
	
}

.gioithieu_userinfo{
	background: #FFFBCB;
    background: -webkit-linear-gradient(180deg, rgba(255, 251, 203, 1) 0%, rgba(254, 228, 83, 1) 100%);
    background: -moz-linear-gradient(180deg,rgba(255, 251, 203, 1) 0%, rgba(254, 228, 83, 1) 100%);
    background: linear-gradient(180deg, rgba(255, 251, 203, 1) 0%, rgba(254, 228, 83, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FFFBCB", endColorstr="#FEE453", GradientType=0 );
    border-radius: 25px;
    box-shadow: 0px 3px 7px 0px #9f9f9f;
    padding: 25px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.gioithieu_userinfo img{
	margin: 0 40px;
}

.gioithieu_userinfo .info{
	
}

.gioithieu_userinfo .info .name{
	text-transform: uppercase;
    font-size: 30px;
    font-weight: 900;
    font-family: var(--font2);
}

.gioithieu_userinfo .info .sum{
    font-size: 22px;
    font-weight: 500;
}

.gioithieu_userinfo .info .sum span{
	color: #3db259;
}

.sotiengioithieu{
	color: #3db259;
	font-weight: 900;
	font-size: 60px;
}

.form-select-custom2{
   background-color: transparent;
    border-radius: 15px;
    border: 0;
    color: var(--color1);
    font-family: var(--font1);
    font-weight: var(--font-bold);
    font-size: 20px;
    padding-left: 0;
}
.giuchuoi_box{
	background-color: #fbf3cc;
    padding: 5px 40px 5px 15px;
    border-radius: 10px;
    border: 1px solid #054190;
    position: relative;
    font-weight: 800;
    font-size: 17px;
    margin-right: 20px;
	display: inline-block;
}

.giuchuoi_box img{
	position: absolute;
    top: -7px;
    right: -10px;
}

.giuchuoi_detail .title{
	text-align: center;
    font-family: var(--font2);
    font-weight: 900;
    font-size: 40px;
    text-transform: uppercase;
    padding-bottom: 20px;
}

.giuchuoi_detail ul{
	padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
	column-gap: 15px;
	overflow: auto;
}

.giuchuoi_detail ul li{
	
}

.giuchuoi_detail ul li .giuchuoi_item{
    border-radius: 10px;
    background-color: #e8e8e8;
    text-align: center;
    padding: 10px 13px;
    min-width: 90px;
    margin-bottom: 15px;
}

.giuchuoi_detail ul li .giuchuoi_item .stt{
	color: #40a1eb;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.giuchuoi_detail ul li .giuchuoi_item img{
	margin-bottom: 8px;
}

.giuchuoi_detail ul li .giuchuoi_item .status{
	color: gray;
}

.giuchuoi_detail ul li .giuchuoi_item.active{
    background-color: #40a1eb;
}

.giuchuoi_detail ul li .giuchuoi_item.active .stt{
	color: #fff;
}

.giuchuoi_detail ul li .giuchuoi_item.active .status{
	color: #fff;
}

.nhiemvu{
	
}

.nhiemvu .nhiemvu_item{
	border: 1px solid #054190;
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 17px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.nhiemvu .nhiemvu_item .text{
	
}

.nhiemvu .nhiemvu_item .status{
	background-color: #e8e8e8;
    color: gray;
    padding: 8px 10px;
    text-align: center;
    min-width: 140px;
    border-radius: 8px;
	cursor: pointer;
}
.nhiemvu .nhiemvu_item.success{
	background-color: #dbeed1;
	color: #3fb353;
	border: 1px solid #dbeed1;
}
.nhiemvu .nhiemvu_item.success .text{
	
}

.nhiemvu .nhiemvu_item.success .status{
	background-color: #3fb353;
	color: #fff;
}

.nhiemvu .nhiemvu_item.start .text{
	
}

.nhiemvu .nhiemvu_item.start .status{
	background-color: #03469f;
	color: #fff;
}

.nhiemvu .nhiemvu_item.wait .text{
	
}

.nhiemvu .nhiemvu_item.wait .status{
	
}

.chuoi_title{
	width: 240px;
    margin: auto;
}

.chuoi_icon{
	width: 140px;
    margin: auto;
    padding: 30px 0;
}

.chuoiText{
	font-size: 17px;
}
.chuoiText span{
	margin-top:10px;
	color: #2689d5;
	font-weight: 600;
	display: block;
}

.submenu{
	padding: 0;
	margin: 0;
	list-style:none;
}

.menuproduct{
    width: 190px !important;
	border-radius: 10px 10px 0 0 !important;
}

.menuproduct:hover>a{
    width: 190px !important;
	border-radius: 10px 10px 0 0 !important;
}

.menuproduct:hover>a{
	background-color: var(--color1) !important;
    color: #fff !important;
    width: 190px !important;
    border-radius: 10px 10px 0 0 !important;
}

.navbar-nav .dropdown-menu {
    transform: unset;
    width: 190px;
}

.navbar-nav .dropdown-menu.show {
    transform: unset;
    width: 190px;
}

.navbar-expand-md .navbar-nav li .nav-link.dropdown-item{
	font-family: var(--font2);
    font-weight: 800;
    font-size: 12px;
    color: var(--color1);
    text-transform: uppercase;
    padding: 0 18px;
    line-height: 2;
    text-align: center;
	border-bottom: 1px solid var(--color1);
}

.navbar-expand-md .navbar-nav li:last-child .nav-link.dropdown-item{
	border-bottom: unset;
}

.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
	border-radius: 0 0 15px 15px;
}

.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited{
	text-decoration: none;
    color: var(--color1);
    font-family: var(--font2);
    font-weight: var(--font-black);
    text-align: center;
    font-size: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}

#panel-menu .mm-navbar{
	opacity: 0;
}

.l2-bar{
	box-shadow: 0px 1px 6px 0px #ddd;
    margin-bottom: 0;
    background-color: #fff;
    background-image: url(/public/icon/bar-bg.png);
    background-repeat: repeat-x;
    background-size: cover;
}

.l3-bar{
        margin: 20px 0;
}

.layout2{
		
}

.layout2 .product-summary .number{
	color: #e30020;
}

.layout2 .product-summary .text{
	color: #e30020;
	font-size: 18px;
}

.layout2 .action-link-1 img{
	
}

.layout2 .boxnd{
	padding: 0 50px;
}

.layout2 .bg2{
	position: relative;
	background-color: #fff;
	
	background-image: url(/public/icon/layout2/bg2.png?v=2);
    height: 750px;
    background-size: cover;
    background-position: bottom center;
}

.layout2 .bg2 .btn-bg2{
	    position: absolute;
    width: 100%;
    bottom: 8%;
}


.layout3 .btn-bg2{
    width: 100%;

}

.layout3 .btn-bg2 img{
	cursor: pointer;
    width: 250px;
}

.layout4 .btn-bg2{
    width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

.layout4 .btn-bg2 img{
	cursor: pointer;
    width: 250px;
}

.layout2 .bg2 .btn-bg2 img{
	cursor: pointer;
    width: 300px;
}

.layout2 .bg2 .text-1{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 20px;
    width: 100%;
    padding: 10px 50px;
    text-align: center;
    text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 16px #fff, 0 0 20px #fff, 0 0 24px #fff, 0 0 28px #fff, 0 0 32px #fff;
}

.layout3 .text-1{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 20px;
    width: 100%;
    padding: 10px 50px;
    text-align: center;
	color: #ffa45b;
}

.layout4 .text-1{
	font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 20px;
    width: 100%;
    padding: 10px 50px;
    text-align: center;
	color: #ffa45b;
}

.layout2 .bg2 .chuoi{
	position: absolute;
    top: 10%;
    width: 70%;
    left: 2%;
}

.layout2 .bg2 .dau{
	position: absolute;
    top: 37%;
    width: 70%;
    right: 2%;
}

.layout2 .bg2 .may{
	position: absolute;
    bottom: -26%;
    width: 70%;
    left: 0;
}


.layout2 .btnTitle-1{
	width: 20%;
    margin: auto;
    position: relative;
}

.layout3 .btnTitle-1{
	width: 50%;
    margin: -3% auto -9%;
    position: relative;
}

.layout4 .btnTitle-1{
	width: 50%;
    margin: -3% auto -9%;
    position: relative;
}

.layout2 .lophoc-tag{
	text-align: center
}

.layout2 .lophoc-tag img{
	height: 60px;
    width: auto !important;
}

.product-banner{
	background-color: #fff5ae;
}

.slider-lophoc-list{
	padding: 0 30px;
    margin-top: 20px;
    padding-bottom: 80px;
}


.videonoibat3-box .titleNoiBat{
	width: 750px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -30%;
}

.videonoibat4-box{
	margin-top: 80px;
    position: relative;
	
    
}

.btnXemThem{
	margin: auto;
    width: 215px;
}

.layout4 .btnXemThem{
	margin-left: auto;
	margin-right: auto;
    width: 215px;
	margin-top: 10px;
	margin-bottom: 50px;
}

.layout4 .btnThamGiaNgay{
	margin-left: auto;
	margin-right: auto;
    width: 320px;
	margin-top: 10px;
	margin-bottom: 50px;
}

.videonoibat-box{
	min-height: 500px;
    margin: 15px 30px;
    border: 5px solid #ffc000;
    border-radius: 60px;
	background-color: #fff5d8;
	box-shadow: inset 1px -10px 20px 9px #ebd290;
	position: relative;
}

.videonoibat-box .icon1{
	position: absolute;
    width: 65px;
    left: -35px;
    top: 35px;
}




.videonoibat-box .icon2{
	position: absolute;
    width: 95px;
    top: -56px;
    right: 5px;
}

.videonoibat-box .icon3{
	position: absolute;
    width: 97px;
    bottom: -48px;
    left: -34px;
}

.videonoibat-box .icon4{
	position: absolute;
    right: -25px;
    bottom: -68px;
    width: 90px;
}

.videonoibat-box .titleNoiBat{
	width: 700px;
    margin: auto;
    padding: 30px 0;
}


.video-item2{
	
    display: block;
    height: 450px;
    background-color: #d6d6d6;
    border-radius: 35px;
    position: relative;
    margin-top: 15px;
    margin-left: 30px;
    box-shadow: -3px 8px 15px 0px #4d4c4c;
    margin-bottom: 30px;
}

.video-item2 .border1{
	border-radius: 35px;
    overflow: hidden;
    border: 10px solid #fff;
    height: 100%;
    width: 100%;
    transform: translate(8px, -10px);
    position: absolute;
}

.video-item2 .border1 img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-item2 .frame1{
	background-color: #d6d6d6;
}



.videonoibat3-box{
	min-height: 500px;
    margin: 80px 0 20px 0;
    border-radius: 40px;
    background-color: #fff5d8;
    box-shadow: 0px 10px 20px 0px rgb(193 193 193 / 39%);
    position: relative;
    background: #FFE18E;
    background: -webkit-linear-gradient(180deg, rgba #ffe18e
	(255, 225, 142, 1) 0%, rgba(255, 225, 142, 1) 10%, rgba(200, 233, 255, 1) 100%);
	background: -moz-linear-gradient(180deg,rgba(255, 225, 142, 1) 0%, rgba(255, 225, 142, 1) 10%, rgba(200, 233, 255, 1) 100%);
	background: linear-gradient(180deg, rgba(255, 225, 142, 1) 0%, rgba(255, 225, 142, 1) 10%, rgba(200, 233, 255, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FFE18E", endColorstr="#C8E9FF", GradientType=0 );
	padding: 40px;
	position: relative;
	
}
.videonoibat3-box-outer{
	position: relative;
}

.videonoibat3-box-outer .icon1{
	position: absolute;
    top: -43%;
    left: 0%;
    width: 200px;
}



.videonoibat3-box-outer .icon2{
	position: absolute;
    top: -41%;
    right: 0%;
    width: 200px;
}

.layout3 .bg-2{
	background-image: url(/public/icon/layout3/bg-2.png?v=1);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
	padding-bottom: 70px;
}

.layout4 .bg-2{
	background-image: url(/public/icon/layout3/bg-2.png?v=1);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
	padding-bottom: 70px;
}


.video-item3{
    display: block;
    height: 370px;
    border-radius: 35px;
    position: relative;
    overflow: hidden;
}

.video-item3 .frame1{
	display: block;
    height: 100%;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0px 0px 6px 12px #ffbe00;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 35px;
}

.videonoibat3-box .bg{
	
    background-image: url(/public/icon/layout3/bg-1.png?v=1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 18px;
    border-radius: 40px;
}

.video-item3 img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}


.layout2 .btnXemThem{
	width: 165px;
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
}

.bxhluotxem-box{
	padding: 50px 0;
}

.bxhluotxem-box .bxhluotxem{
	
}

.bxhluotxem-box{
	position: relative;
}

.bxhluotxem-list{
	position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}



.bxhluotxem3-box{
	padding: 50px 0;
}

.bxhluotxem3-box .bxhluotxem{
	margin-top: -10%;
}

.bxhluotxem3-box{
	position: relative;
}

.bxhluotxem3-list{
	
}




.bxhhoatdong3-box{
	padding: 50px 0 200px 0;
}

.bxhhoatdong3-box .bxhhoatdong{
	margin-top: -10%;
}

.bxhhoatdong3-box{
	position: relative;
}

.bxhhoatdong3-list{
	
}

.item-top{
	background: #FFC07B;
	background: -webkit-linear-gradient(90deg, rgba(255, 192, 123, 1) 0%, rgba(255, 152, 32, 1) 50%, rgba(255, 192, 123, 1) 100%);
	background: -moz-linear-gradient(90deg, rgba(255, 192, 123, 1) 0%, rgba(255, 152, 32, 1) 50%, rgba(255, 192, 123, 1) 100%);
	background: linear-gradient(90deg, rgba(255, 192, 123, 1) 0%, rgba(255, 152, 32, 1) 50%, rgba(255, 192, 123, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFC07B", endColorstr="#FFC07B", GradientType=1);
	    border-radius: 150px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
	width: 100%;
}

.lv-2{
	display: flex;
    justify-content: flex-start;
    align-items: center;
	position: relative;
}

.lv-3{
	display: flex;
    justify-content: flex-start;
    align-items: center;
	position: relative;
	margin-bottom: 20px;
}

.lv-3 .number{
	margin-right: 20px;
}

.lv-3 .number img{
	width: 88px !important;
}

.lv-2 .number{
	margin-right: 20px;
}


.item-top .number{
	position: absolute;
    left: -25%;
    width: 105px;
}

.layout4 .item-top .number{
	color: #D67411;
    position: relative;
    left: unset;
    width: 30px;
    font-weight: 700;
    font-size: 27px;
}

.item-top .avatar{
	height: 85px;
    border-radius: 50%;
    overflow: hidden;
    width: 85px;
	margin-right: 20px;
	object-fit: cover;
}

.layout4 .item-top-lv-2 {
    background: #DDB462;
}

.layout4 .item-top-lv-2 .info .name a {
    color: #ffffff;
}

.layout4 .item-top .info .name {
    font-weight: 600;
    font-family: var(--font2);
    font-size: 21px;
    color: #fff;
    line-height: 1.3;
    text-transform: uppercase;
}

.layout4 .item-top-lv-2 .avatar {
    height: 73px;
    width: 70px;
    margin-right: 10px;
    border: 5px solid #ddb462;
}

.item-top .avatar img{
	width: 100%;
    height: 100%;
}

.item-top .info{
	
}

.item-top .info .name{
	font-weight: 900;
    font-family: var(--font2);
    font-size: 30px;
    color: #fff;
    line-height: 1.3;
}

.item-top .info .name a{
	color: #fff;
}

.item-top .info .huychuong{
	width: 140px;
    right: -8%;
    position: absolute;
    top: -40%;
}

.item-top .info .view{
	color: #fff;
	font-weight: 900;
	font-family: var(--font2);
	line-height: 1;
	font-size: 20px;
}

.item-top-lv-2{
	background: #90d7ff;
}

.item-top-lv-2 .avatar{
	height: 60px;
    width: 60px;
    margin-right: 10px;
}

.item-top-lv-2 .info{
	
}

.item-top-lv-2 .info .name{
	font-size: 24px;
}

.item-top-lv-2 .info .name a{
	color: #0084e0;
}

.item-top-lv-2 .info .view{
	color: #0084e0;
    font-size: 15px;
}

.layout3 .bxh2{
	padding: 0 105px;
	margin-top: 50px;
}

.layout4 .bxh2{
	padding: 0 105px;
	margin-top: 50px;
}

.bxhhoatdong-box{
	padding: 50px 10px 120px 10px;

}

.bxhhoatdong-box .bxhhoatdong{
	
}
.bxhhoatdong-box{
	position: relative;
}

.bxhhoatdong-list{
	position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}



.bxh2 .rank-item .number {
    font-family: var(--font2);
    font-weight: var(--font-black);
    font-size: 38px;
    width: 103px;
    color: #ff474c;
    text-align: right;
    padding-right: 10px;
}

.avatar-top{
	display: flex;
    align-items: flex-end;
    justify-content: center;
	margin-bottom: 40px;
}

.avatar-top .avatar-top-1{
	width: 40%;
	text-align: center;
}

.avatar-top .avatar-top-2{
	width: 30%;
	text-align: center;
}

.avatar-top .avatar-top-1 .avatar{
	background-color: #D1AA4A;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
	margin: auto;
	padding: 5px;
}

.avatar-top .avatar-top-1 .avatar img{
	width: 100%;
	height: 100%;
	border: 6px solid #855015;
    border-radius: 50%;
}

.avatar-top .avatar-top-2 .avatar{
	background-color: #D1AA4A;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
	margin: auto;
	padding: 5px;
}

.avatar-top .avatar-top-2 .avatar img{
	width: 100%;
	height: 100%;
	border: 5px solid #855015;
    border-radius: 50%;
}

.avatar-top .number{
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	color: #855015;
}
.avatar-top .icon1{
	width: 30px;
    margin: auto;
    padding: 10px 0;
}

.avatar-top .icon2{
	width: 150px;
    margin: auto;
    padding: 10px 0;
}

.avatar-top .name{
	margin-top: 20px;
}

.avatar-top .name a{
	font-size: 25px;
    text-align: center;
    color: #855015;
    font-weight: 500;
}

.layout4{
	font-family: "Montserrat", sans-serif !important;
}

@media (max-width: 1200px) {
	.layout3 .bxh2{
		padding: 0 45px;
		margin-top: 50px;
	}
	
	.layout4 .bxh2{
		padding: 0 45px;
		margin-top: 50px;
	}
}

@media (min-width: 1400px) {
   
}

@media (min-width: 1200px) {
   
}

@media (min-width: 1800px) {
   .layout2 .bg2{
    height: 900px;
}
}


.order-6 {
    order: 6 !important;
}


.layout3{
	background: #EEF7FD;
	background: -webkit-linear-gradient(180deg,rgba(238, 247, 253, 1) 0%, rgba(200, 228, 249, 1) 100%);
	background: -moz-linear-gradient(180deg,rgba(238, 247, 253, 1) 0%, rgba(200, 228, 249, 1) 100%);
	background: linear-gradient(180deg,rgba(238, 247, 253, 1) 0%, rgba(200, 228, 249, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#EEF7FD",
	  endColorstr="#C8E4F9",
	  GradientType=0
	);	
}

.layout4{
	background: #fff8e5;
	background-image: url("/public/icon/layout4/bg.png");
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

.layout3 .product-summary .number{
	color: #ff9e00;
}

.layout3 .product-summary .text{
	color: #ff9e00;
}

.layout4 .product-summary .number{
	color: #ff9e00;
}

.layout4 .product-summary .text{
	color: #ff9e00;
}

.detail-box-outer{
	background: #C69034;
	background: -webkit-linear-gradient(180deg,rgba(198, 144, 52, 1) 0%, rgba(240, 213, 146, 1) 100%);
	background: -moz-linear-gradient(180deg,rgba(198, 144, 52, 1) 0%, rgba(240, 213, 146, 1) 100%);
	background: linear-gradient(180deg,rgba(198, 144, 52, 1) 0%, rgba(240, 213, 146, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#C69034",
	  endColorstr="#F0D592",
	  GradientType=0
	);
	border-radius: 30px;
	padding: 10px;
	position: relative;
}

.detail-box-outer .detail-box{
	background-color: #F3EBDE;
	border-radius: 25px;
	padding: 30px;
    text-align: center;
}

.detail-box-outer .detail-box p{
	border-bottom: 1px solid #8B7D67;
    font-size: 25px;
    color: #A2631F;
    margin-bottom: 15px;
    line-height: 1;
}

.detail-box-outer .ghim{
	width: 25px;
    position: absolute;
    top: 0;
    left: 5%;
}

.detail-box-outer .hopsua{
	width: 200px;
    position: absolute;
    bottom: -9%;
    right: -2%;
}

.layout4 .video-item3 .frame1 {
    box-shadow: inset 0px 0px 6px 12px #F3E8C9;
}

.videonoibat5-box{
	position: relative;
	margin-top: 200px;

	background: #AD7800;
	background: -webkit-linear-gradient(15deg,rgba(173, 120, 0, 1) 0%, rgba(218, 170, 60, 1) 100%);
	background: -moz-linear-gradient(15deg,rgba(173, 120, 0, 1) 0%, rgba(218, 170, 60, 1) 100%);
	background: linear-gradient(15deg,rgba(173, 120, 0, 1) 0%, rgba(218, 170, 60, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#AD7800",
	  endColorstr="#DAAA3C",
	  GradientType=0
	);
	padding: 70px 25px 60px 25px;
	border-radius: 35px;
	box-shadow: inset -5px 5px 5px 2px #edc975;
	border-left: 5px solid #893e00;
    border-bottom: 5px solid #893e00;
	min-height: 505px;
}

.videonoibat5-box .den{
	position: absolute;
    width: 170px;
    z-index: 99;
}

.videonoibat5-box .den1{
    top: -10%;
    left: -3%;
}
.videonoibat5-box .den2{
    top: -10%;
    left: 1%;
}
.videonoibat5-box .den3{
    top: -10%;
    left: 6%;
}
.videonoibat5-box .den4{
    top: -10%;
    right: -3%;
}
.videonoibat5-box .den5{
    top: -10%;
    right: 1%;
}
.videonoibat5-box .den6{
    top: -10%;
    right: 5%;
}

.videonoibat5-box .titleVideoNoiBat{
	position: absolute;
    top: -12%;
    width: 650px;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 600px;
    }
	
	
}

@media (max-width: 990px) {
	.videonoibat5-box{
		min-height: 350px;
	}
	.videonoibat5-box .titleVideoNoiBat {
		position: absolute;
		top: -8%;
		width: 350px;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.videonoibat5-box .den {
		width: 110px;
	}
	
	.videonoibat5-box .den1 {
		top: -5%;
		left: 28%;
	}
	
	.videonoibat5-box .den2 {
		top: -5%;
		left: 36%;
	}
	
	.videonoibat5-box .den3 {
		top: -5%;
		left: 45%;
	}
	
	.videonoibat5-box .den1, .videonoibat5-box .den2, .videonoibat5-box .den3, .videonoibat5-box .den4,.videonoibat5-box .den5, .videonoibat5-box .den6 {
		display: none;
	}



	.avatar-top .name a {
		font-size: 15px;
	}
	
	.layout4 .item-top-lv-2 .info .name a {
		font-size: 17px;
	}
	
	.layout4 .stats ul {
		margin: 0px 0 0 0;
	}
	.lv-3 .number img {
		width: 45px !important;
	}

	.layout3 .btn-bg2 img{
		cursor: pointer;
		width: 150px;
	}
	
	.layout4 .btn-bg2 img{
		cursor: pointer;
		width: 150px;
	}

	.bxhhoatdong3-box {
		padding: 0;
	}


	.lv-3 .number {
        margin-right: 20px;
        width: 15%;
    }
	
	.layout3 .bxh2 {
        padding: 0;
        margin-top: 0;
    }
	
	.layout4 .bxh2 {
        padding: 0;
        margin-top: 0;
    }
	
	.item-top .info .huychuong {
		width: 97px;
		right: -33px;
		position: absolute;
		top: -40%;
	}

	.item-top .info .view {
		font-size: 15px;
	}

	.item-top .info .name {
		font-size: 17px;
	}

	.item-top .avatar {
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		width: 60px;
		margin-right: 15px;
		object-fit: cover;
	}

	.lv-2 .number {
		margin-right: 20px;
		width: 15%;
	}


	.video-item3 {
		height: 250px;
	}
	
	.videonoibat3-box {
		padding: 15px;
		        min-height: unset;

	}
	.videonoibat3-box-outer .icon1 {
		position: absolute;
		top: -48%;
		left: -20%;
		width: 140px;
	}
	.videonoibat3-box-outer .icon2 {
		position: absolute;
		top: -45%;
		right: -20%;
		width: 140px;
	}
	
	
	.bxhhoatdong3-box {
		padding: 0 0 200px 0;
		        min-height: unset;

	}
	.bxhhoatdong3-box-outer .icon1 {
		position: absolute;
		top: -48%;
		left: -20%;
		width: 140px;
	}
	.bxhhoatdong3-box-outer .icon2 {
		position: absolute;
		top: -40%;
		right: -20%;
		width: 140px;
	}

	.layout3 .btnTitle-1 {
		width: 90%;
		margin: -3% auto -9%;
		position: relative;
	}

	.layout3 .text-1 {
		font-family: var(--font2);
		font-weight: var(--font-black);
		font-size: 14px;
		width: 100%;
		padding: 0;
		text-align: center;
		color: #ffa45b;
	}
	
	.layout4 .btnTitle-1 {
		width: 90%;
		margin: -3% auto -9%;
		position: relative;
	}

	.layout4 .text-1 {
		font-family: var(--font2);
		font-weight: var(--font-black);
		font-size: 14px;
		width: 100%;
		padding: 0;
		text-align: center;
		color: #ffa45b;
	}

	.videonoibat3-box .titleNoiBat {
		width: 90%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -22%;
	}
	
	.videonoibat3-box {
		margin: 40px 0 20px 0;
	}
	.layout2 .boxnd{
		padding: 0;
	}

	.layout2 .lophoc-tag img{
		height: 35px;
	}
	.layout2 .bg2 .chuoi{
		top: 13%;
	}
	.layout2 .bg2{
		height: 320px;
	}
	.layout2 .btnTitle-1 {
		width: 35%;
	}
	.layout2 .bg2 .text-1{
		padding: 10px;
		    font-size: 11px;
	}
	.layout2 .bg2 .btn-bg2{
		bottom: 4%;
	}

	.layout2 .bg2 .btn-bg2 img{
		width: 40%;
	}

	.l2-bar {
		height: auto;
	}
	
	.videonoibat-box {
		margin: 15px 5px;
	}
	.videonoibat-box .titleNoiBat {
		width: 280px;
		margin: auto;
		padding: 17px 0;
	}
	
	.videonoibat-box .icon2 {
		position: absolute;
		width: 55px;
		top: -28px;
		right: 5px;
	}
	
	.videonoibat-box .icon1 {
		position: absolute;
		width: 45px;
		left: -25px;
		top: 35px;
	}
	
	.video-item2 {
		margin-right: 35px;
	}
	
	.videonoibat-box .icon4 {
		position: absolute;
		right: 0px;
		bottom: -34px;
		width: 60px;
	}
	
	.bxhluotxem-box {
		padding: 50px 0;
	}
	
	.bxh2 .rank-item .number {
		font-size: 20px;
	}
	
	.bxhluotxem-list {
		height: 190px;
		overflow: auto;
	}
	
	.bxhhoatdong-box {
		padding: 50px 0;
		transform: translateX(-17px);
	}
	
	.bxh2 .rank-item .number {
		font-size: 20px;
	}
	
	.bxhhoatdong-list {
		height: 190px;
		overflow: auto;
	}
	
	.btnOnTop img {
		width: 30px;
	}
	
	.btnOnTop {
		top: -55px;

	}

}

@media (max-width: 992px) {
	.avatar-top .avatar-top-2 .avatar {
		width: 70px;
		height: 70px;
	}
	
	.avatar-top .avatar-top-1 .avatar {
		width: 120px;
		height: 120px;
	}
	
	.detail-box-outer .detail-box p {
		font-size: 10px;
		font-weight: 700;
	}
	
	.detail-box-outer .hopsua {
		width: 100px;
	}
	
	.btnXemThem {
		width: 115px;
	}
	
	.layout4 .btnXemThem{
		width: 115px;
	}
	
	.layout4 .btnThamGiaNgay{
		width: 180px;
	}

	
	.avatar-top .icon2 {
    width: 90px;
	}
	.avatar-top .icon1 {
    width: 20px;
	}

	.giuchuoi_box {
		background-color: #fbf3cc;
		padding: 10px 28px 10px 8px;
		border-radius: 10px;
		border: 1px solid #054190;
		position: relative;
		font-weight: 800;
		font-size: 13px;
		margin-right: 9px;
		display: inline-block;
	}

	.giuchuoi_box img {
		position: absolute;
		top: 7px;
		right: 2px;
		width: 20px;
	}

	.giuchuoi_detail .title{
		font-size: 30px;
	}

	.title-home-5 img{
		width: 60%;
	}
	
	.sotiengioithieu{
		color: #3db259;
		font-weight: 900;
		font-size: 40px;
	}
	
	.gioithieu_userinfo{
		padding: 15px;
	}

	.gioithieu_userinfo img{
		margin: 0 10px;
	}

	.gioithieu_userinfo .info{
		
	}

	.gioithieu_userinfo .info .name{
		text-transform: uppercase;
		font-size: 18px;
		font-weight: 900;
		font-family: var(--font2);
	}

	.gioithieu_userinfo .info .sum{
		font-size: 16px;
		font-weight: 500;
	}

	.gioithieu_userinfo .info .sum span{
		color: #3db259;
	}

}