@charset "utf-8";
/* CSS Document */

*,
.box_sizing_border_box {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

::-webkit-scrollbar {
  width: 6px; }

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #ffc144; }

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); }

*{box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;text-decoration:none}
*:focus{outline:none}

body{width:100%;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;background:none}
body,html{padding:0;margin:0;background:#000000}
body.openedPopup{height:100vh;overflow:hidden}
ul{
    list-style: none;
    margin: 0
}
.img-responsive{display: block; max-width: 100%;height: auto;}
.pull-right{float:right!important}
.pull-left{float:left!important}
.relative-content{
    position: relative;
}
.content-container{
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
}
.pr{position: relative;}
.pa{position: absolute;}
.wrapper{
	/*max-width: 1920px;*/
    margin: 0 auto;
    width: 100%;
	position: absolute;
}
@font-face {
  font-family: 'roboto_bold';
  src: url("../font/Roboto-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_medium';
  src: url("../font/Roboto-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_light';
  src: url("../font/Roboto-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SFU_Helvetica';
  src: url("../font/SFUHelveticaBold.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.f-SFU_Helvetica {
  font-family: 'SFU_Helvetica';
}
.f-roboto-light {
  font-family: 'roboto_light';
}
.f-roboto-medium {
  font-family: 'roboto_medium';
}
.f-roboto-bold {
  font-family: 'roboto_bold';
}
@font-face {
  font-family: 'SFUEurostile';
  src: url("../font/SFUEurostileBoldCondensed.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.f-SFUEurostile {
  font-family: 'SFUEurostile';
}
.wrapper{
	overflow:hidden;
	transform-origin:top left
}
.container{
	display:block;
	margin:0 auto;
	width:1140px;
	max-width:calc(100% - 100px * 2)
}
@media (max-width: 575px){
	.container{max-width:calc(100% - 30px * 2)}
}
@media (orientation: portrait){
	.container{max-width:calc(100% - 30px * 2)}
}
.wrapper{width:2000px}
@media (max-width: 575px){.wrapper{width:768px}}
@media (orientation: portrait){.wrapper{width:768px}}

.section{
	position:relative;
	display:block;
	max-width:100%
}
.section__background{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px
}
.section__background img,.section__background video{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top center;
}
.section__content{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px
}
.section--auto_height .section__content{
	display:block;
	position:static
}
.section__background .background{
	width:100%;
	height:100%
}
.section--auto_height .section__inner{
	padding-top:30px;
	padding-bottom:200px;
	position:relative
}

/*----------------------------frame 1---------------------------------*/
.section--frame1{
	height:1000px;
	margin-top:0
}
@media (orientation: portrait){
	.section--frame1{height:1210px;margin-top:0px}
}
@media (max-width: 575px){
	.section--frame1{height:1210px;margin-top:0px}
}
.header-menu{
    position: absolute;
    width: 100%;
	top: 0;
	left:66%;
	margin:2% 1% 0 0;
	z-index: 2;
}
.header-menu .menu{
    width:30%;
    display: inline-block;
    transform: translateY(-50%);
    max-width: 172px;
    background-size: contain;
}
.header-menu .menu.login:hover{
    background: url('../images/bt-login.png');
    background-size: contain;
	filter: brightness(1.1);
}
.header-menu .menu:hover img{
    opacity: 0;
}
.header-menu .dn{
	position: absolute;
    width:30%;
    display: inline-block;
    max-width: 260px;
}
.header-menu .dn.no-bg{
    width:40%;
    background: rgba(0, 0, 0,.5) !important;
	height: 50px;
    max-height: 50px;
	color: #ffffff;
	font-size: 15px;
	line-height: 20px;
	margin:-1% 0 0 1%;
	background-size: contain;
	padding: 5px;
}
.logo{
	width: 100%;
	position: absolute;
	margin:0.5% 0 0 60%; 
	z-index: 1;
}
.logo .img-responsive{
	width: 5%;
}

/*------------------*/
/*------------------------menu-mobile----------------------------------*/
.header-menu-m{
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 9;
	background-color: rgba(0, 0, 0, 0.8);
}
.logo-m{
	position: absolute;
	display: flex;
	justify-content: flex-start;
	width: 15%;
	margin:1% 0 0 1%; 
}
.logo-m .img-responsive{
	width: 100%;
}
.menu-cover{
    width: 100%;
	float: left;
	margin: 0 0 1% 20%;
}
.menu-item1{
	float: left;
    width:9%;
	margin:1.5% 1% 0 0;  
}
.menu-item2{
	float: left;
    width:32%;
	margin:1.5% 1% 0 0;
	font-size: 10px;
}
.menu-item2 span{
	display: inline-block;
	vertical-align: middle;
	font-size: 10px;
	color: #fbffce;
	text-decoration: none;
}
.menu-item1:hover, .menu-item2:hover{
	filter: brightness(1.3);
	color: #ffffff;
	text-decoration: none;
}
@media only screen and (min-width:320px) {
	.menu-item2 span{
		font-size: 9px;
		padding: 2px 0 0 5px;
		line-height: 12px;
	}
}
@media only screen and (min-width:375px) {
	.menu-item2 span{
		font-size: 10px;
		padding: 3px 0 0 5px;
		line-height: 13px;
	}
}
@media only screen and (min-width:414px) {
	.menu-item2 span{
		font-size: 12px;
		padding: 3px 0 0 5px;
		line-height: 15px;
	}
}
@media only screen and (min-width:540px) {
	.menu-item2 span{
		font-size: 13px;
		padding: 3px 0 0 5px;
		line-height: 20px;
	}
}
@media only screen and (min-width:768px) {
	.menu-cover{
		justify-content:center;
	}
	.menu-item1{
		width:8%;
		margin:2% 1% 0 0;  
	}
	.menu-item2{
		width:27%;
		margin:2% 1% 0 0;
		font-size: 10px;
	}
	.menu-item2 span{
		font-size: 15px;
		padding: 3px 0 0 5px;
		line-height: 20px;
	}
}

/*****************/
.play {
  display: block;
  font-size: 0px;
  background-image: url("../images/video.png");
  width: 55px;
  height: 55px;
  position: absolute;
  top: 330px;
  left: calc(50% + 60px);
  z-index: 3;
}
.play:hover {
  filter: brightness(1.2);
}
@media (max-width: 575px) {
  .play {
    top: 400px;
  }
}
@media (orientation: portrait) {
  .play {
    top: 400px;
  }
}

@-webkit-keyframes rotates{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes rotates{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.wheel{position: relative;}
.wheel-turn{position: absolute; margin:26.5% 0 0 0; left: calc(39% + 10px);-webkit-animation:rotates 20s linear infinite;animation:rotates 20s linear infinite;transform-origin: center center;z-index: 1}
.wheel-text{position: absolute; width: 19%; text-align: center;margin:30.5% 0 0 0%;left: calc(39% + 15px);z-index: 2; color: #ffffff; font-size: 78px;line-height: 50px;text-shadow: 4px 0 0 #be680c, -4px 0 0 #be680c, 0 4px 0 #be680c, 0 -4px 0 #be680c, 2px 2px #be680c, -2px -2px 0 #be680c, 2px -2px 0 #be680c, -2px 2px 0 #be680c;
}
.wheel-text span{text-align: center;color: #fef7db; font-size: 36px; line-height: 50px;
	text-shadow: 2px 0 0 #db7511, -2px 0 0 #db7511, 0 2px 0 #db7511, 0 -2px 0 #db7511, 1px 1px #db7511, -1px -1px 0 #db7511, 1px -1px 0 #db7511, -1px 1px 0 #db7511;
}
@media (max-width: 912px){
	.wheel-turn{margin:83% 0 0 0; left: calc(22% + 10px);}
	.wheel-text{width: 40%; margin:92% 0 0 0%;left: calc(27% + 15px);font-size: 78px;line-height: 50px;}
}
@media (orientation: portrait){
	.wheel-text{width: 40%; margin:92% 0 0 0%;left: calc(27% + 15px);font-size: 78px;line-height: 50px;}
}
	
@-webkit-keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
.vibrate-1 {
  -webkit-animation: vibrate-1 0.3s linear infinite both;
  animation: vibrate-1 0.3s linear infinite both;
}
.bt-dkn{
	display:block;
	background-image:url("../images/bt-dangky.png");
	width:374px;
	height:143px;
	position:absolute;
	top:800px;
	left:calc(50% - 190px);
	z-index: 9;
}
.bt-dkn:hover{
	filter: brightness(1.2);
}
@media (max-width: 575px){
	.bt-dkn{
		top:920px;
	}
}
@media (orientation: portrait){
	.bt-dkn{
		top:920px;
	}
}

/*----------------------------frame 2---------------------------------*/
.section--frame2{
	height:1531px;
	margin-top:0
}
@media (orientation: portrait){
	.section--frame2{height:1340px;margin-top:0px}
}
@media (max-width: 575px){
	.section--frame2{height:1340px;margin-top:0px}
}
.moc-group{
    width: 60%;
    position: absolute;
	z-index:2;
	margin:3% 20% 0 20%;
}
.moc-group ul{
	width: 100%;
	display: flex;
	justify-content:flex-start;
	margin: 0;
}
.moc-group ul li{
    width: 30%;
	margin: 0 1% 0 1%;
}
.moc-group ul li .active{
	filter: grayscale(1);
}
.moc-group ul li img{
    max-width: 100%;
    width: auto;
}
.moc-group ul li .img1{
	margin-top: 0;
	margin-left:0%;
}
.moc-group ul li .img2{
	margin-top:25%;
	margin-left:0%;
}
@media (max-width: 575px){
	.moc-group{
		width: 100%;
		margin:5% 0 0 0;
	}
}
@media (orientation: portrait){
	.moc-group{
		width: 100%;
		margin:5% 0 0 0;
	}
}

.bt-group{
	width: 60%;
    position: absolute;
	z-index:2;
	margin:33% 20% 0 20%;
}
.bt-group ul{
	display: flex;
	justify-content: center;
	margin-left:0;
}
.bt-group ul li{
    display:block;
	margin: 0 1% 0 1%;
}
.bt-group ul li:first-child {
	width:24%;
    display: block;
	background: url("../images/bt-thele.png") no-repeat;
	background-size: contain;
}
.bt-group ul li:first-child:hover {
	width:24%;
    display: block;
	background: url("../images/bt-thele-hover.png") no-repeat;
	background-size: contain;
}
.bt-group ul li:nth-child(2){
	width:24%;
    display: block;
	background: url("../images/bt-themluot.png") no-repeat;
	background-size: contain;
}
.bt-group ul li:nth-child(2):hover {
	width:24%;
    display: block;
	background: url("../images/bt-themluot-hover.png") no-repeat;
	background-size: contain;
}
.bt-group ul li:nth-child(3){
	width:24%;
    display: block;
	background: url("../images/bt-doithuong.png") no-repeat;
	background-size: contain;
}
.bt-group ul li:nth-child(3):hover {
	width:24%;
    display: block;
	background: url("../images/bt-doithuong-hover.png") no-repeat;
	background-size: contain;
}
.bt-group ul li:nth-child(4){
	width:24%;
    display: block;
	background: url("../images/bt-lichsu.png") no-repeat;
	background-size: contain;
}
.bt-group ul li:nth-child(4):hover {
	width:24%;
    display: block;
	background: url("../images/bt-lichsu-hover.png") no-repeat;
	background-size: contain;
}
@media (max-width: 575px){
	.bt-group{
		width: 100%;
		margin:56% 0 0 0;
	}
}
@media (orientation: portrait){
	.bt-group{
		width: 100%;
		margin:56% 0 0 0;
	}
}
.f2-box{
	width: 60%;
    position: absolute;
	z-index:2;
	margin:39% 20% 0 20%;
	display: flex;
	justify-content: flex-start
}
.bt-mothuong{
	width:20%;
	margin:8% 0 0 26%;
}
.bt-mothuong a:hover{
	filter: brightness(1.3)
}
@keyframes moveY {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}
.phone{
	width:30%;
	margin:3% 0 0 9%;
}
.phone img{
    display: inline-block;
	animation: moveY 0.3s ease infinite;
}
@media (max-width: 575px){
	.f2-box{
		width: 100%;
		margin:65% 0 0 0;
	}
	.bt-mothuong{
		margin:12% 0 0 15%;
	}
	.phone{
		width:30%;
		margin:3% 0 0 19%;
	}
}
@media (orientation: portrait){
	.f2-box{
		width: 100%;
		margin:65% 0 0 0;
	}
	.bt-mothuong{
		margin:12% 0 0 15%;
	}
	.phone{
		width:30%;
		margin:3% 0 0 19%;
	}
}
.vatpham-group{
    width:60%;
    position: absolute;
	z-index:2;
	margin:65% 20% 0 20%;
}
.vatpham-group ul{
	display: flex;
  	flex-wrap: wrap;
	justify-content: center;
}
.vatpham-group ul li{
    width: 15%;
	margin:0 0 0 0;
}
.vatpham-box{
	width: 100%;
	position: relative;
}
.vatpham-box img{
	position: absolute;
	width:146px;
	height:151px;
	z-index:1;
}
.vatpham-text{
	width: 90%;
	position: absolute;
	color: #ffffff;
	font-size: 20px;
	z-index: 3;
	text-align: center;
	vertical-align: middle;
	text-shadow: 1px 0 0 #db7511, -1px 0 0 #db7511, 0 1px 0 #db7511, 0 -1px 0 #db7511, 1px 1px #db7511, -1px -1px 0 #db7511, 1px -1px 0 #db7511, -1px 1px 0 #db7511;
	margin-top:65%;
}

@media (max-width: 575px){
	.vatpham-group{
		width:100%;
		margin:103% 0 0 0;
	}
	.vatpham-group ul li{
		width: 20%;
		margin:23% 4% 0 4%;
	}
}
@media (orientation: portrait){
	.vatpham-group{
		width:100%;
		margin:103% 0 0 0;
	}
	.vatpham-group ul li{
		width: 20%;
		margin:23% 4% 0 4%;
	}
}
/*----------------------------FOOTER---------------------------------*/
.section--footer{
	height:272px;
	margin-top:0
}
@media (orientation: portrait){
	.section--footer{height:295px;margin-top:0px}
}
@media (max-width: 575px){
	.section--footer{height:295px;margin-top:0px}
}
.footer__inner{
	position:absolute;
	top:0;
	width:1080px;
	left:calc(50% - 1080px / 2)
}
@media (max-width: 575px){
	.footer__inner{
		top:0;
		width:720px;
		left:calc(50% - 720px / 2)
	}
}
@media (orientation: portrait){
	.footer__inner{
		top:0;
		width:720px;
		left:calc(50% - 720px / 2)
	}
}
#footer{
    background: #000000;
}
#footer-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 20px;;
}
.vtc-logo{
    margin: 0 auto;
    margin-bottom: 20px;
    width: 40%;
}
.vtc-logo img{
    display: block;
    margin: 0 auto;
}
.footer-text{
    padding: 15px;
    color: #c6cad9;
	line-height: 22px;
}
.footer-text a{
    color: #c6cad9;
}
@media only screen and (min-width : 1200px) {
	#footer-content {
        display: flex;
        flex-direction: row;
        text-align: left;
        justify-content: center;
        align-items: center;
        width: 73%;
        margin: 0 auto;
    }
}
/*============ top ===============*/
.top{
  width: 40px;
  height: 40px;
  bottom: 10px;
  right: 10px;
  position:fixed;
}
.top:hover{
  filter: brightness(1.2);
}
@media only screen and (min-width : 992px) {
	.top{
	  width:65px;
	  height:65px;
	  bottom:30px;
	  right:30px;
	}
}
/*============ menu right ===============*/
.nav_right {
  display: block;
  position: fixed;
  z-index: 999;
  right: -180px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 210px;
  height: 368px;
  background-image: url(../images/sprite.png);
  background-position: 0 0px;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.nav_right.open {
  right: 0;
}
@media (max-width: 1024px) {
  .nav_right {
    display: none;
  }
}
.nav_right ul.buttai {
  width: 160px;
  height: auto;
  position: relative;
  margin:70px 0 0 25px;
}
.nav_right ul.buttai li {
  float: left;
  margin: 8px 0 0 0;
}
.nav_right ul.buttai .app-info__install--pc > a {
  display: block;
  text-indent: -9999px;
  height: 51px;
  width: 160px;
}
.button-taigame a {
  background-image: url("../images/sprite.png") !important;
  background-position: -210px -51px !important;
}
.button-taigame:hover a {
  background-image: url("../images/sprite.png") !important;
  background-position: -210px 0 !important;
}
.nav_right ul.buttai .app-bt > a {
  display: block;
  text-indent: -9999px;
  height: 39px;
  width: 160px;
}
.button-home a {
  background-image: url("../images/sprite.png") !important;
  background-position: -210px -141px !important;
}
.button-home:hover a {
  background-image: url("../images/sprite.png") !important;
  background-position: -210px -102px !important;
}
.button-fb a {
  background-image: url("../images/sprite.png") !important;
  background-position: -210px -219px !important;
}
.button-fb:hover a {
  background-image: url("../images/sprite.png") !important;
  background-position: -210px -180px !important;
}
.button-group a {
  background-image: url("../images/sprite.png") !important;
  background-position: -210px -297px !important;
}
.button-group:hover a {
  background-image: url("../images/sprite.png") !important;
  background-position: -210px -258px !important;
}
.nav_right .top{
  width: 49px;
  height: 129px;
  top: 220px;
  right: 100px;
  position: relative;
}
.nav_right .top:hover{
  filter: brightness(1.2);
}
.nav_right .i_control {
  width: 28px;
  height: 85px;
  background: url(../images/i_close_nav_right.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
  top:120px;
  left:-10px;
  cursor: pointer;
}
.nav_right .i_control.i_control_active {
  left: -10px;
  background: url(../images/i_open_nav_right.png) no-repeat center center;
}
/*********************/
.star {
  position: absolute;
  top: 50%;
  left: 25%;
  margin: -540px 0 0 -1700px;
  width: 100%;
  height: 1080px;
  z-index: 1;
}
.star-box {
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
}
@media only screen and (min-width : 375px) {
  .star {
    margin: -540px 0 0 -1650px;
  }
}
@media only screen and (min-width : 480px) {
  .star {
    margin: -540px 0 0 -1600px;
  }
}
@media only screen and (min-width : 540px) {
  .star {
    margin: -540px 0 0 -1550px;
  }
}
@media only screen and (min-width : 600px) {
  .star {
    margin: -540px 0 0 -1480px;
  }
}
@media only screen and (min-width : 768px) {
  .star {
    margin: -540px 0 0 -1380px;
  }
}
@media only screen and (min-width : 992px) {
  .star {
    position: absolute;
    top: 50%;
    left: 25%;
    margin: -740px 0 0 -1260px;
    width: 1920px;
    height: 1080px;
    z-index: 1;
  }
}
@media only screen and (min-width : 1200px) {
  .star {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -540px 0 0 -1360px;
    width: 1920px;
    height: 1080px;
    z-index: 1;
  }
}
@media only screen and (min-width : 1920px) {
  .star {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -540px 0 0 -960px;
    width: 1920px;
    height: 1080px;
    z-index: 1;
  }
}
/*==============================POPUP===================================*/
.popup {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.popup .content-popup {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.popup .wrapper-popup {
  width: 320px;
  height: 239px;
  background: url(../images/pop2.png) no-repeat center center;
  background-size: 100% 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popup .wrapper-popup1 {
  width: 320px;
  height: 360px;
  background: url(../images/pop1-m.png) no-repeat center center;
  background-size: 100% 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (min-width: 375px) {
	.popup .wrapper-popup {
	    width: 375px;
	    height: 271px;
	}
	.popup .wrapper-popup1 {
	    width: 375px;
	    height: 410px;
	}
}
@media only screen and (min-width: 480px) {
	.popup .wrapper-popup {
	    width: 480px;
	    height: 311px;
	}
	.popup .wrapper-popup1 {
	    width: 480px;
	    height: 520px;
	}
}
@media only screen and (min-width: 600px) {
	.popup .wrapper-popup {
	    width:580px;
    	height: 360px;
	}
	.popup .wrapper-popup1 {
	    width: 580px;
	    height: 610px;
	}
}

@media only screen and (min-width: 1000px) {
	.popup .wrapper-popup1 {
	    width: 1000px;
	    height:670px;
		background: url(../images/pop1.png) no-repeat center center;
	}
	.popup .wrapper-popup {
		background: url(../images/pop2.png) no-repeat center center;
  		width: 1000px;
		height:478px;
  	}
}

.popup .content-new-detail {
	height: 350px;
	padding:0 30px 0 30px;
	color: #444444;
}
@media only screen and (min-width: 600px) {
	.popup .content-new-detail {
		height: 350px;
		padding:0 60px 0 60px;
	}
}
@media only screen and (min-width: 992px) {
	.popup .content-new-detail {
		height: 350px;
		padding:0 130px 0 130px;
	}
}

.popup .title-detail {
  	width: 100%;
	background: url("../images/title-bg-m.png") bottom center no-repeat;
	background-size: contain;
	margin: 0 auto 0 auto;
	padding: 25px 0 14px 0;
	font-size: 18px;
	color: #e6d7b7;
}
@media only screen and (min-width: 375px) {
	.popup .title-detail {
		padding: 35px 0 14px 0;
		font-size: 18px;
	}
}
@media only screen and (min-width: 480px) {
	.popup .title-detail {
		padding: 35px 0 18px 0;
		font-size: 25px;
	}
}
@media only screen and (min-width: 600px) {
	.popup .title-detail {
		padding: 50px 0 22px 0;
		font-size: 25px;
	}
}
@media only screen and (min-width: 1000px) {
  .popup .title-detail {
	  background: url("../images/title-bg.png") bottom center no-repeat;
	  padding:62px 0 23px 0;
	  font-size: 31px;
	  line-height: 36px
  }
}

.popup .title-detail1 {
  	width: 100%;
	margin: 0 auto 0 auto;
	padding: 10px 0 10px 0;
	font-size: 26px;
	color: #ffdf94;
}
@media only screen and (min-width: 1000px) {
  .popup .title-detail1 {
	  padding:20px 0 15px 0;
	  font-size: 46px;
	  line-height: 36px
  }
}

.popup .content-new-detail1 {
	height:250px;
	margin:10px 20px 60px 20px;
	color: #e8cd93;
}
@media only screen and (min-width: 375px) {
	.popup .content-new-detail1 {
	    height:300px;
		margin:10px 20px 60px 25px;
  	}
}
@media only screen and (min-width: 480px) {
	.popup .content-new-detail1 {
	    height:380px;
		margin:10px 25px 60px 35px;
  	}
}
@media only screen and (min-width: 600px) {
	.popup .content-new-detail1 {
	    height:440px;
		margin:10px 35px 60px 50px;
  	}
}
@media only screen and (min-width: 992px) {
	.popup .content-new-detail1 {
	    height: 450px;
     	margin: 10px 70px 0 90px;
  	}
}
.popup .content-new-detail1 .text,.popup .content-new-detail1 .text1 {
	margin-top: 0;
	line-height: 18px;
	font-weight: 500;
	font-size: 12px;
}
.popup .content-new-detail1 .text p{
	padding: 5px 0 5px 0;
}
.popup .content-new-detail1 .text span{
	font-size: 12px;
	color: #ffffff;
}
.popup .content-new-detail1 .text a{
	color: #ffffff;
	text-decoration: none;
}
.popup .content-new-detail1 .text a:hover{
	color: #ffdf94;
	text-decoration: none;
}
@media only screen and (min-width: 375px) {
	.popup .content-new-detail1 .text,.popup .content-new-detail1 .text1 {
		line-height: 22px;
		font-size: 14px;
	}
	.popup .content-new-detail1 .text span{
		font-size: 14px;
	}
}
@media only screen and (min-width:480px) {
	.popup .content-new-detail1 .text ,.popup .content-new-detail1 .text1{
		line-height: 25px;
		font-size: 16px;
	}
	.popup .content-new-detail1 .text span{
		font-size: 16px;
	}
}
@media only screen and (min-width:600px) {
	.popup .content-new-detail1 .text,.popup .content-new-detail1 .text1 {
		line-height: 25px;
		font-size: 16px;
	}
	.popup .content-new-detail1 .text span{
		font-size: 16px;
	}
}
@media only screen and (min-width: 1024px) {
	.popup .content-new-detail1 .text,.popup .content-new-detail1 .text1 {
    	font-size: 20px;
    }
	.popup .content-new-detail1 .text p{
		padding: 5px 0 5px 0;
	}
	.popup .content-new-detail1 .text span{
		font-size: 18px;
		font-weight: bold;
	}	
}
.popup .content-new-detail2 {
	height:250px;
	margin:10px 10px 60px 10px;
	color: #2ba98c;
}
@media only screen and (min-width: 375px) {
	.popup .content-new-detail2 {
	    height:300px;
		margin:10px 10px 60px 10px;
  	}
}
@media only screen and (min-width: 480px) {
	.popup .content-new-detail2 {
	    height:400px;
		margin:10px 15px 60px 10px;
  	}
}
@media only screen and (min-width: 600px) {
	.popup .content-new-detail2 {
	    height:490px;
		margin:10px 20px 60px 20px;
  	}
}
@media only screen and (min-width: 992px) {
	.popup .content-new-detail2 {
	    height: 550px;
     	margin: 10px 30px 0 30px;
  	}
}
/*---- close----*/
.popup .close-content {
  	position: absolute;
  	background: url(../images/close.png) no-repeat center top;
  	background-size: contain;
  	width:54px;
    height:100px;
    bottom:-80px;
    right:40%;
  	cursor: pointer;
  	z-index: 999;
}
@media only screen and (min-width: 480px) {
  .popup .close-content {
  	width:84px;
    height:120px;
    bottom:-100px;
    right:35%;
  }
}
@media only screen and (min-width: 600px) {
  .popup .close-content {
  	width:84px;
    height:120px;
    bottom:-100px;
    right:38%;
  }
}
@media only screen and (min-width: 992px) {
  .popup .close-content {
  	width:104px;
    height: 159px;
    top:30px;
    right:-40px;
  }
}
/*------------dang ky thong tin-----------*/
.regis-box{
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	margin: 2% 0 0 0;
}
.regis-box .bt-copy {
	display:block;
	width: 252px;
	height: 56px;
	background: url("../images/bt-copy.png") no-repeat left top;
	background-size: contain;
	margin:0 0 0 35%;
}
.regis-box .bt-dnn {
	display:block;
	width: 252px;
	height: 56px;
	background: url("../images/bt-dnn.png") no-repeat left top;
	background-size: contain;
	margin:0 0 0 35%;
}
.regis-box .bt-tl {
	display:block;
	width: 252px;
	height: 56px;
	background: url("../images/bt-tl.png") no-repeat left top;
	background-size: contain;
	margin:0 0 0 35%;
}
.regis-box .bt-copy:hover, .regis-box .bt-dnn:hover, .regis-box .bt-tl:hover {
	filter: brightness(0.8);
	text-decoration: none;
}
.gift{
	width: 100%;
	display: flex;
	text-align: center;
	justify-content: center;
	margin:1% 0 5% 0;
}
.gift img{
	width:20%;
	background:none;
	padding:5px;
	text-align: center;
}
.gift t{
	width:80%;
	background: #1f0b09;
	border: 1px solid #816e5e;
	padding:20px;
	text-align: center;
	color: #ffed8e;
}
@media only screen and (min-width: 320px) {
    .regis-box .bt-copy, .regis-box .bt-tl, .regis-box .bt-dnn {
		width: 102px;
		height: 36px;
		margin:0 0 0 30%;
	}
	.gift t{
		width:80%;
		padding:6px;
	}
}
@media only screen and (min-width: 375px) {
	.regis-box{
		margin: 0 0 0 0;
	}
    .regis-box .bt-copy, .regis-box .bt-tl, .regis-box .bt-dnn {
		width: 132px;
		height: 40px;
		margin:0 0 0 30%;
	}
}
@media only screen and (min-width: 480px) {
    .regis-box .bt-copy, .regis-box .bt-tl, .regis-box .bt-dnn {
		width: 162px;
		height: 43px;
		margin:0 0 0 30%;
	}
}
@media only screen and (min-width: 600px) {
    .regis-box .bt-copy, .regis-box .bt-tl, .regis-box .bt-dnn {
		width: 202px;
		height: 53px;
		margin:0 0 0 30%;
	}
}
@media only screen and (min-width: 992px) {
  .regis-box .bt-copy, .regis-box .bt-tl , .regis-box .bt-dnn{
		width: 252px;
		height: 56px;
		margin:0 0 0 35%;
	}
	.gift t{
		width:80%;
		padding:20px;
	}
}
/*---- lichsu ----*/
.lichsu {
	color: #2ba98c;
}
.lichsu t{
	color: #848484;
}
.table-rank thead tr th{
    background-color: #ffdf94;
    color: #ff2d2d;
    text-align: center;
	text-transform: uppercase;
	font-size: 12px;
	border-top: none;border-left: none;border-right: none; border-bottom: none;
}
.table-rank tbody tr th, .table-rank tbody tr td{
    text-align: center;
	border: none;
	color: #d7c5a8;
}
/*.table-rank tbody tr td a{
	color: #ffdf94;
}
.table-rank tbody tr td a:hover{
	color: #ffdf94;
}
.table-rank tbody tr td span{
	color: #848484;
}*/
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border:none;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: none;
    color: #ffffff;
	border: none;
}
.table-striped>tbody>tr:nth-of-type(even) {
    background-color: none;
    color: #ffffff;
	border: none;
}
@media only screen and (min-width: 992px) {
	.table-rank thead tr th{
		font-size: 18px;
	}
}
.bt-nhan{
	display:block;
	width:108px;
	height:32px;
	background: url("../images/bt-nhan.png") no-repeat left top;
	background-size: contain;
}
.bt-nhan:hover{
	filter: brightness(0.8);
	text-decoration: none;
}

@media only screen and (min-width: 992px) {
	.bt-nhan{
		width:188px;
		height:42px;
	}
}
.bt-dt1{
	display:block;
	width:68px;
	height:22px;
	background: url("../images/bt-doithuong1.png") no-repeat left top;
	background-size: contain;
}
.bt-dt1:hover{
	filter: brightness(0.8);
	text-decoration: none;
}
@media only screen and (min-width: 480px) {
	.bt-dt1{
		width:108px;
		height:32px;
	}
}
@media only screen and (min-width: 992px) {
	.bt-dt1{
		width:188px;
		height:42px;
	}
}
.bt-nhan1{
	width: 100%;
	display:flex;
	justify-content: center;
	height: 40px;
	background-image: linear-gradient(#faf8be, #785d36);
	color: #c43002;
	font-size: 12px;
	text-align: center;
	align-items:center;
	padding: 0 10px 0 10px;
}
.bt-nhan1 span{
	color: #c43002;
}
.bt-nhan1:hover{
	filter: brightness(0.8);
	text-decoration: none;
}
@media only screen and (min-width:600px) {
	.bt-nhan1{
		font-size: 30px;
	}
}
@media only screen and (min-width: 992px) {
	.bt-nhan1{
		height: 45px;
		font-size: 22px;
	}
}