:root {
  --font1: 'Unbounded', Arial, sans-serif;
  --font2: 'Unbounded', Arial, sans-serif;
  --font3: 'Bellarina', Arial, sans-serif;
  --font-black: 900;
  --font-bold: 700;
  --font-mid: 500;
  --color1: #000;
}

@font-face {
    font-family: 'Bellarina';
    src: url('fonts/Bellarina.eot');
    src: url('fonts/Bellarina.eot?#iefix') format('embedded-opentype'),
        url('fonts/Bellarina.woff2') format('woff2'),
        url('fonts/Bellarina.woff') format('woff'),
        url('fonts/Bellarina.ttf') format('truetype'),
        url('fonts/Bellarina.svg#Bellarina') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@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: #e66f93 #ffffff;
}

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

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

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

.bg-home{
	background: #FDEFDA;
	background: -webkit-linear-gradient(166deg,rgba(253, 239, 218, 1) 0%, rgba(253, 239, 218, 1) 50%, rgba(255, 211, 203, 1) 100%);
	background: -moz-linear-gradient(166deg,rgba(253, 239, 218, 1) 0%, rgba(253, 239, 218, 1) 50%, rgba(255, 211, 203, 1) 100%);
	background: linear-gradient(166deg,rgba(253, 239, 218, 1) 0%, rgba(253, 239, 218, 1) 50%, rgba(255, 211, 203, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#FDEFDA",
	  endColorstr="#FFD3CB",
	  GradientType=0
	);
	background-size: contain;
	background-attachment: fixed;
}

.bg-base{
	background-color: #ffc3c3;
}

.navbar{
	
}

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

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

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

.logo{
	height: 75px;
}

.text-home-1{
	font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 15px;
}

.text-home-2{
	font-size: 23px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 15px;
}

.btnDefault{
	background-color: #000;
    color: #d4ba74;
    text-transform: uppercase;
    text-align: center;
    border-radius: 50px;
    padding: 19px 50px;
    font-weight: 700;
    font-size: 18px;
    display: inline-block;
}

.btnDefault2{
	background-color: #000;
    color: #d4ba74;
    text-transform: uppercase;
    text-align: center;
    border-radius: 50px;
    padding: 11px 40px;
    font-weight: 400;
    font-size: 13px;
    display: inline-block;
}


.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;
}

.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(--font1);
    font-weight: 500;
    font-size: 19px;
    color: #000;
    padding: 0 18px;
    line-height: 2;
    border-radius: 10px 10px 0 0 !important;
}

.navbar-expand-md .navbar-nav .nav-link.active {
	color: #ed8f90;
    line-height: 2;
}

.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);
}

.navbar .btnLogin{
	height: 40px;
    width: auto;
}

.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;
	    color: #e66f93;
}
.product-summary .text{
	text-align: center;
    font-family: var(--font1);
    font-weight: var(--font-bold);
    font-size: 16px;
	    color: #e66f93;
}

.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: #fff;
}


.product-list .head-title .view-more{
	font-family: var(--font2);
    font-weight: 300;
    font-size: 15px;
    color: #fff;
    padding: 10px 18px;
    border-radius: 30px;
    line-height: 1;
}

.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: 400;
    padding: 8px 15px;
    font-size: 11px;
    border-radius: 0 15px 0;
    z-index: 2;
}

.modal .title-2{
	display: inline-block;
    margin: auto;
    position: absolute;
    top: -15px;
    background-color: #000;
    color: #d4ba74;
    border-radius: 10px;
    padding: 13px 40px;
    font-size: 15px;
    font-weight: 500;
    left: 50%;
    transform: translateX(-50%);
	white-space: nowrap;
}

.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: 500;
    font-size: 15px;
    text-transform: uppercase;
    padding: 0 15px;
    display: block;
    background: #FAA377;
    background: -webkit-linear-gradient(90deg, rgba(250, 163, 119, 1) 0%, rgba(189, 83, 56, 1) 100%);
    background: -moz-linear-gradient(90deg,rgba(250, 163, 119, 1) 0%, rgba(189, 83, 56, 1) 100%);
    background: linear-gradient(90deg, rgba(250, 163, 119, 1) 0%, rgba(189, 83, 56, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FAA377", endColorstr="#BD5338", GradientType=1 );
    padding: 10px 0;
    border-radius: 10px;
    border: 2px solid #fff;
    color: #fff;
}
.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: 300;
	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: 95px;
    text-align: center;
}

.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;
}

.form-select-custom{
	background-color: #fffef0;
    border-radius: 30px;
    border: 0;
    color: #000000;
    text-align: center;
    font-family: var(--font1);
    font-weight: 400;
    padding: 5px 10px;
    height: 39px;
    font-size: 15px;
    background: #EA986E;
    background: -webkit-linear-gradient(90deg, rgba(234, 152, 110, 1) 0%, rgba(195, 90, 56, 1) 100%);
    background: -moz-linear-gradient(90deg,rgba(234, 152, 110, 1) 0%, rgba(195, 90, 56, 1) 100%);
    background: linear-gradient(90deg, rgba(234, 152, 110, 1) 0%, rgba(195, 90, 56, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#EA986E", endColorstr="#C35A38", GradientType=1 );
}

.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: 12px;
    padding: 0 0 15px 0;
	color: red;
}
.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: #ffffff;
    color: #000000;
    font-family: var(--font1);
    font-weight: var(--font-mid);
    border: 0;
    border-radius: 15px;
    font-size: 15px;
    margin: 5px 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;
    font-weight: 300;
    font-size: 12px;
}
.link-note li{
	    
}
.color-1{
	color: #e66f93 !important;
}


.color-2{
	color: #fff !important;
}


.btnCloseModal{
	background-color: #ffffff;
    font-family: var(--font2);
    font-weight: var(--font-black);
    color: #000000;
    border-radius: 50%;
    border: 0;
    width: 50px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: -80px;
    padding: 0;
    user-select: none;
    border: 2px solid #d4ba74;
    transform: translateX(-50%);
}

.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;
}

.btn2-new{
	font-family: var(--font2);
    font-weight: 700;
    font-size: 12px;
    color: #000000;
    background-color: #ffffff;
    padding: 10px 30px;
    border-radius: 30px;
    text-transform: uppercase;
    line-height: 1;
    border: 2px solid var(--color1);
    cursor: pointer;
    /* width: 300px; */
    /* margin: auto; */
    user-select: none;
    white-space: nowrap;
}

.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: 30px;
    box-shadow: inset 6px 14px 20px 5px #934027;
    background: #C05534;
    background: -webkit-linear-gradient(180deg, rgba(192, 85, 52, 1) 0%, rgba(232, 148, 107, 1) 100%);
    background: -moz-linear-gradient(180deg,rgba(192, 85, 52, 1) 0%, rgba(232, 148, 107, 1) 100%);
    background: linear-gradient(180deg, rgba(192, 85, 52, 1) 0%, rgba(232, 148, 107, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#C05534", endColorstr="#E8946B", GradientType=0 );
}
.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;
	color: #e66f93;
}

.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: #e66f93;
}
.progressbar li.active:after,
.progressbar li.complete:after {
    background-color: #e66f93;
}


.campaign-list-tab{
	
}

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


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

.doanhthutong-box{

    padding: 20px;
   
    margin-top: 15px;
	
	display: flex;
    justify-content: flex-start;
}

.box-style1 th{
	background-color: transparent;
}
.box-style1 .table>:not(caption)>*>*{
	background-color: transparent;
	font-weight: 300;
}

.box-style1 .reward-box .reward-title{
	background-color: transparent;
	color: #fff;
}

.box-style1 .reward-box{
	background-color: transparent;
	border: 0;
}


.doanhthutong-box .tongdoanhthu-item{
	display: flex;
    justify-content: space-between;
    font-weight: 300;
    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;
}
main{
	padding-bottom: 80px;
}

.reward-item{
	border: 0;
    padding: 15px;
    border-radius: 20px;
    text-align: center;
    background-color: #f6bba8;
}

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

.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: 1px 1px 2px 4px #fed2c5;
    background-color: #ffcec1;
    padding: 20px 25px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.box-style1{
	border-radius: 15px;
    overflow: hidden;
    margin-bottom: 35px;
    box-shadow: 1px 1px 2px 4px #fed2c5;
    background-color: #ffcec1;
    padding: 20px 25px;
    border-left: 2px solid rgb(255 255 255 / 50%);
    border-bottom: 2px solid rgb(255 255 255 / 50%);
}


.campaign-box .info{
	text-align: center;


}

.campaign-box .head-campaign{
	font-family: var(--font3);
    font-size: 50px;
    color: #e66f93;
    padding: 10px 0;
}
.campaign-box .info .head{
	
}

.product-banner{
	margin-top: 35px
}

.product-banner img{
	border-radius: 20px !important;
    box-shadow: 4px -3px 8px 0px rgb(0 0 0 / 30%);
    margin-bottom: 25px;
}

.campaign-box .info .head>div.name{
	font-family: var(--font1);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
	height: 90px;
}

.campaign-box .info .head>div.name>span{
	font-family: var(--font1);
    font-weight: 400;
    font-size: 16px;
	display: block;
	
}


.campaign-box .info .detail{
	font-family: var(--font1);
	font-size: 14px;
	min-height: 195px;
    overflow: hidden;
	text-align: center;
}

.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;
	
}

.bg-style3-new {
    background-color: #ffc1ba;
    padding: 45px 0;
}

.title-5-1{
	text-align: center;
    color: #e66f93;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 53px;
    margin-top: 20px;
}
.title-5-2{
	color: #e66f93;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    font-size: 35px;
    margin-bottom: 15px;
}

.formOTP{
	display:none;
}

.login_otp {
    width: 100%;
    background-color: #ffffff;
    color: #000000;
    font-family: var(--font1);
    font-weight: var(--font-mid);
    border: 0;
    border-radius: 15px;
    font-size: 28px;
    margin: 5px 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{
	
}



@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;

	}
	.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;
		height: auto !important;
	}
	
	.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;
	}
	
	.campaign-detail .detail {
		font-size: 15px;
	}
	
	.btn1 {
		font-size: 20px;
	}
	.video-item {
		width: 100%;
	}
	.video-item .video-image {
		height: 625px;
	}
	
	.video-item .video-image {
		height: 250px;
        margin-bottom: 0 !important;
	}
	
	
	.bg-style1 {
		padding: 15px 0;
	}
	
	.rank-box {
		background-color: #fff;
        padding: 15px 15px;
        border-radius: 15px;
	}
	.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;
	}
	
	.btnCloseModal {
		
	}
}

@-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: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: #ffffff;
    border: 0;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    padding: 12px 18px;
	border-radius: 42px
}

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

#noiBatContent .tab-pane{
	
	
	/*
	padding: 20px 5px;
    min-height: 200px;
    background-color: #fefede;
    */
}

#tabNoiBat{
	border: 0;
}

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

#noiBatContent{
	padding: 20px 5px;
    min-height: 200px;
	
	/*
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background-color: #fefede;
	*/
}

.btnOnTop{
	text-align: center;
    margin: 20px 0;
}
.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;
}
.summary-margin{
	margin: 0 60px;
}

.btn-hashtag-show{
	font-size: 18px;
    padding: 12px;
    color: #d4ba74;
}

.button-hashtag{
	height: 15px;
    vertical-align: bottom;
    padding-left: 5px;
}

.view-earn{
	text-align: center;
    font-weight: 500;
    padding-top: 8px;
    padding-bottom: 8px;
}


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

}

@media (max-width: 992px) {
	.view-earn{
		text-align: center;
		font-weight: 500;
		padding-top: 8px;
		padding-bottom: 8px;
		font-size: 12px;
	}
	
	#tabNoiBat{
		    justify-content: center;
	}

	.summary-margin{
		margin: 0 4px;
	}
	
	.box-style1{
		padding: 15px;
	}
	.btn-hashtag-show{
		padding: 9px;
	}

	.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;
	}

}

.rankicon{
	width: 55px;
}

.rankicon2{
	width: 60px !important;
    height: auto !important;
    object-fit: none !important;
    position: absolute;
    top: 8px;
    left: 0;
}
.title-12{
	 font-size: 24px;
    font-weight: 600;
    padding-bottom: 6px;
    padding-left: 25px;
}
@media (max-width: 768px) {
  .title-12{
	 font-size: 17px;
    text-align: center;
  }
  .responsive-table thead {
	display: none; /* Ẩn tiêu đề trên mobile */
  }

  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
	display: block;
	width: 100%;
  }

  .responsive-table tr {
	margin-bottom: 15px;
  }

  /* Cột 1 giữ nguyên */
  .responsive-table td:nth-child(1) {
	font-weight: bold;
  }

  /* Cột 2 và 3 xếp dọc */
  .responsive-table td:nth-child(2),
  .responsive-table td:nth-child(3) {
	display: block;
        border: 0 !important;
  }
}