@charset "utf-8";

/* CSS Document */
*,
.box_sizing_border_box,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

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

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

::-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: 0 !important;
	box-shadow: none !important;
}

@font-face {
	font-family: 'sfuinsignia';
	src: url("../fonts/SFUInsigniaRegular.TTF") format("truetype");
	font-weight: normal;
	font-style: normal;
}

.f-sfuinsignia {
	font-family: 'sfuinsignia';
}

@font-face {
	font-family: 'icielcadena';
	src: url("../fonts/iCielCadena.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

.f-icielcadena {
	font-family: 'icielcadena';
}

body {
	width: 100%;
	/* overflow-x: hidden;
	overflow-y: auto; */
	overflow: hidden;
	margin: 0;
	padding: 0;
	background: none;
	font-family: 'sfuinsignia', Arial, Helvetica, sans-serif;
	font-size: 24px;
}

body,
html {
	padding: 0;
	margin: 0 auto;
	background: #fff;
	position: relative;
	height: 100%;
	max-width: 690px;
}

ul {
	list-style: none;
	margin: 0
}

a {
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.wrapper {
	transform-origin: top center;
	position: absolute;
	overflow: hidden;
}

.wrapper {
	margin: 0 auto;
	width: 690px;
	max-width: 690px;
}


.opacity-5 {
	opacity: 0.5;
}

.zoom {
	transition: transform .2s;
	/* Animation */
}

.zoom:hover {
	transform: scale(1.1);
	/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom-50 {
	transition: transform .3s;
	/* Animation */
}

.zoom-50:hover {
	transform: scale(1.05);
	/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.brightness:hover {
	filter: brightness(1.2)
}

.section {
	position: relative;
	display: block;
	max-width: 100%
}

.section-background {
	position: absolute;
	display: block;
	width: 100%;
	margin: 0 auto;
	top: 0;
	left: 0;
}

.section-content {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	height: 100%;

}



@media (max-width: 690px) {
	.wrapper {
		width: 690px;
		transform-origin: top left;
	}
}
@media (max-height: 480px) {
	body {
		overflow: auto;
	}
}

.cursor-pointer {
	cursor: pointer;
}

.text-red {
	color: #fd0303 !important;
}

.text-blue {
	color: #3154c5 !important;
}

.text-purple {
	color: #b903fd !important;
}

.pointer-events-none {
	pointer-events: none;
}
.fs-32 {
	font-size: 32px;
}
.fs-28 {
	font-size: 28px;
}
.fs-26 {
	font-size: 26px;
}
.fs-22 {
	font-size: 22px;
}

.fs-20 {
	font-size: 20px;
}

.fs-18 {
	font-size: 18px;
}
.w-65 {
    width: 65% !important;
}
/*----------------------------Background---------------------------------*/

.bg-login {
	width: 100%;
	height: 100vh;
	min-height: 100%;
	object-fit: cover;
	background: url(../images/bg-login.png) no-repeat 50%/cover;
	background-position: top center;
}

.bg-content {
	width: 100%;
	height: 100vh;
	min-height: 100%;
	object-fit: cover;
	background: url(../images/bg-content.png) no-repeat 50%/cover;
	background-position: top center;
}

.bg-game {
	width: 100%;
	height: 100vh;
	min-height: 100%;
	object-fit: cover;
	background: url(../images/bg-game.png) no-repeat 50%/cover;
	background-position: top center;
}

.map {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #0bb5f1;
}

/*----------------------------Menu Top---------------------------------*/
.menu-top {
	width: 690px;
	height: 117px;
	object-fit: cover;
	background: url(../images/bg-menu-top.png) no-repeat 50%/cover;
	background-position: top center;
	transform-origin: top center;
	margin: 0 auto;
}

.menu-top .menu-top-content {
	height: 71px;
	padding-top: 16px;
}

.menu-top .gold {
	width: 186px;
	height: 50px;
	background: url(../images/bg-name.png) no-repeat;
	background-size: 100% 82%;
	background-position: 0 7px;
	margin-left: 24px;
}

.menu-top .gold .num-gold {
	padding-top: 5px;
	color: #fff;
	font-size: 25px;
	text-align: center;
}

.menu-top .heart {
	width: 186px;
	height: 50px;
	background: url(../images/bg-name.png) no-repeat;
	background-size: 100% 82%;
	background-position: 0 7px;
	margin-left: 24px;
	position: absolute;
	right: 83px;
}

.menu-top .heart .num-heart {
	padding-top: 5px;
	color: #fff;
	font-size: 25px;
	text-align: center;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 6px;
}

.menu-top .heart .number {
	position: absolute;
	left: 12px;
	top: 2px;
	color: #fff;
}

@media (max-width: 690px) {
	.menu-top {
		transform-origin: top left;
	}
}

/*----------------------------Menu Top Game---------------------------------*/
.menu-top .level {
	width: 190px;
	height: 187px;
	background: url(../images/bg-number.png) no-repeat;
	background-size: 100%;
	position: absolute;
	top: -60px;
	left: -34px;
	font-size: 29px;
	color: #b5164d;
	font-family: 'icielcadena', Arial, Helvetica, sans-serif;
	padding: 64px 0 0 4px;
	text-shadow: 1px 2px 3px #fff, -1px -2px 2px #3b0000;
	text-align: center;
}

.menu-top .level .number-lvl {
	font-size: 48px;
	margin-top: -16px;
}

.menu-top .menu-top-game .progress-target {
	width: 250px;
	margin-right: 20px;
	position: relative;

}

.menu-top .menu-top-game .progress-target .progress {
	height: 24px;
	border-radius: 12px;
	font-size: 18px;
	color: #ffde04;
	text-shadow: 2px 0 #5c2b00, -2px 0 #5c2b00, 0 2px #5c2b00, 0 -2px #5c2b00,
		1px 1px #5c2b00, -1px -1px #5c2b00, 1px -1px #5c2b00, -1px 1px #5c2b00;
	border: solid 2px #fffaf3;
}

.menu-top .menu-top-game .progress-target .progress .progress-bar {
	background: #950053;
	background: linear-gradient(to right, #950053 0%, #f9eb2f 100%);
	position: relative;
}

.menu-top .menu-top-game .progress-target .progress .progress-bar .point {
	position: absolute;
	right: 8px;
	top: -4px;
	z-index: 100;
}

.menu-top .menu-top-game .progress-target .mark-point {
	position: absolute;
	top: -12px;
	left: -12px;
}

.menu-top .menu-top-game .progress-target .mark-point .star-1 {
	margin: -14px 0 0 22px;
}

.menu-top .menu-top-game .progress-target .mark-point .star-2 {
	margin: -14px 0 0 22px;
}

.menu-top .menu-top-game .progress-target .mark-point .star-3 {
	margin: -14px 0 0 22px;
}
/*----------------------------Menu Top Nap Xu---------------------------------*/
.menu-top-napxu {
	padding-top: 10px;
}
.rotate-1n {
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}
/*----------------------------Menu Bottom---------------------------------*/
.menu-bottom {
	width: 690px;
	height: 144px;
	object-fit: cover;
	background: url(../images/bg-menu-bottom.png) no-repeat 50%/cover;
	background-position: bottom center;
	transform-origin: bottom center;
	margin: 0 auto;
}

.menu-bottom .menu-bottom-content a img {
	transform: scale(.9);
	transform-origin: top center;
}

.menu-bottom .menu-bottom-content a:active img,
.menu-bottom .menu-bottom-content a:hover img,
.menu-bottom .menu-bottom-content a.active img {
	filter: drop-shadow(0 0 10px rgba(254, 243, 122, 1)) brightness(110%);
	transform: scale(1);
	transform-origin: top center;
}

@media (max-width: 690px) {
	.menu-bottom {
		transform-origin: bottom left;
	}
}

/*----------------------------Menu bottom Game---------------------------------*/
.menu-bottom .number-plays {
	width: 190px;
	height: 187px;
	background: url(../images/bg-number.png) no-repeat;
	background-size: 100%;
	position: absolute;
	bottom: -60px;
	left: -34px;
	font-size: 29px;
	color: #b5164d;
	font-family: 'icielcadena', Arial, Helvetica, sans-serif;
	padding: 30px 0 0 4px;
	text-shadow: 1px 2px 3px #fff, -1px -2px 2px #3b0000;
	text-align: center;
}

.menu-bottom .number-plays .number-lvl {
	font-size: 48px;
	margin-top: -16px;
}

.menu-bottom .points-plays {
	width: 190px;
	height: 187px;
	background: url(../images/bg-number.png) no-repeat;
	background-size: 100%;
	position: absolute;
	bottom: -60px;
	right: -34px;
	font-size: 29px;
	color: #b5164d;
	font-family: 'icielcadena', Arial, Helvetica, sans-serif;
	padding: 30px 4px 0 0;
	text-shadow: 1px 2px 3px #fff, -1px -2px 2px #3b0000;
	text-align: center;
}

.menu-bottom .points-plays .number-lvl {
	font-size: 48px;
	margin-top: -16px;
}

.menu-bottom .func {
	width: 400px;
	height: 80px;
	margin: 56px auto;
}

.menu-bottom .func a {
	text-align: center;
}

.menu-bottom .func .func-item-border-right {
	background: url(../images/border-func-right.png) no-repeat;
	background-size: 2px 100%;
	background-position: top right;
}

.menu-bottom .bottom-lvl {
	margin-top: 58px;
}

.menu-bottom .bottom-lvl .lvl-opt {
	padding: 0 16px;
}

/*----------------------------Main---------------------------------*/

.main {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.main .logo {
	margin: 30% auto 0;
	text-align: center;
	filter: drop-shadow(7px 15px 15px rgba(68, 46, 23, 0.33));
}

.main .btn-login {
	margin: 150px auto 0;
	text-align: center;
}

.main .btn-play {
	margin: 150px auto 0;
	text-align: center;
}

.btn-click:active {
	transform: translateY(6px) scale(.95);
	transform-origin: top bottom;
}

.icon-bvd {
	position: absolute;
	top: 142px;
	right: 42px;
}

/*----------------------------Map---------------------------------*/
.map .header-map {
	position: fixed;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	/* 	-webkit-transform: rotate(180deg);
	transform: rotate(180deg); */
}

.map .header-map .title-map {
	position: absolute;
	z-index: 101;
	bottom: 64px;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto;
}
.map .header-map .header-map-background {
	filter: drop-shadow(0 10px 8px #056eaa);
}
.map .all-map {

	overflow-y: scroll;
	overflow-x: hidden;
	direction: rtl;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	margin: 150px auto 0;
}

.map .all-map div[class^="map-a"] {
	direction: ltr;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	position: relative;
}

.level-normal,
.level-pass {
	position: relative;
	text-align: center;
}

.level-pass .icon-vuongmien-sm {
	position: absolute;
	top: -23px;
	right: -7px;
	z-index: 71;
}

.level-pass .icon-star {
	position: absolute;
	bottom: -6px;
	left: -4px;
	z-index: 72;
}

.level-pass .lv-number {
	position: absolute;
	font-size: 25px;
	color: #008ba6;
	top: 16px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 72;
	font-family: 'icielcadena', Arial, Helvetica, sans-serif;
	text-shadow: 2px 2px #fff;
}

.level-pass .icon-dif {
	position: absolute;
	top: -23px;
	right: 0;
	left: 0;
	text-align: center;
	margin: 0 auto;
	z-index: 71;
}

.level-pass .icon-box {
	position: absolute;
	top: -30px;
	right: 0;
	left: 0;
	text-align: center;
	margin: 0 auto;
	z-index: 71;
}

.level-pass .icon-box-spec {
	position: absolute;
	top: -24px;
	right: 0;
	left: 0;
	text-align: center;
	margin: 0 auto;
	z-index: 71;
}

.lvl.spec .level-pass .icon-star {
	position: absolute;
	bottom: -6px;
	left: 4px;
	z-index: 72;
}

.lvl.spec .level-pass .lv-number {
	color: #008da8;
	top: 15px;
}

.lvl.normal {
	width: 59px;
	height: 63px;
}

.lvl.pass {
	width: 70px;
	height: 76px;
}

.lvl.lock {
	width: 81px;
	height: 88px;
}

.lvl.spec {
	width: 87px;
	height: 94px;
}

.user .avatar {
	width: 46px;
	height: 46px;
	max-width: 51px;
	max-height: 51px;
	border-radius: 8px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 90;
}

.user .avatar img {
	max-height: 100%;
	border-radius: 8px;
}

.user .tag-lvl {
	width: 57px;
	height: 22px;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto;
	top: -16px;
	z-index: 91;
}

.user .num-lvl {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto;
	top: -12px;
	z-index: 91;
	font-size: 16px;
	color: #ffde00;
	text-shadow: 2px 0 #5c2b00, -2px 0 #5c2b00, 0 2px #5c2b00, 0 -2px #5c2b00,
		1px 1px #5c2b00, -1px -1px #5c2b00, 1px -1px #5c2b00, -1px 1px #5c2b00;
}
@media (max-width: 1200px) {
	.map .header-map {
		width: 100%;
		top: -50px;
		text-align: center;
	}
	
	.map .header-map .title-map {
		width: 30%;
	}
	.map .header-map .header-map-background {
		filter: drop-shadow(0 10px 8px #056eaa);
	}
}
@media (max-width: 576px) {
	.map .header-map {
		width: 100%;
		top: -16px;
		text-align: center;
	}
	
	.map .header-map .title-map {
		width: 30%;
		bottom: 48px;
	}
	.map .header-map .header-map-background {
		filter: drop-shadow(0 10px 8px #056eaa);
	}
}
/*----------------------------Map green---------------------------------*/
.map-green .others {
	width: 100%;
	height: 100%;
	position: relative;
}

.map-green .others .cay1-xl {
	position: absolute;
	z-index: 82;
	width: 218px;
	height: 315px;
	bottom: 112px;
	right: 0;
}

.map-green .others .cay1 {
	position: absolute;
	z-index: 82;
	width: 137px;
	height: 219px;
	bottom: 771px;
	right: 0;
}

.map-green .others .cay1-sm {
	position: absolute;
	z-index: 82;
	width: 140px;
	height: 141px;
	bottom: 1048px;
	left: 169px;
}

.map-green .others .ghe-o {
	position: absolute;
	z-index: 82;
	width: 164px;
	height: 203px;
	bottom: 464px;
	left: 0;
}

.map-green .others .cocnuoc {
	position: absolute;
	z-index: 82;
	width: 90px;
	height: 97px;
	bottom: 971px;
	right: 60px;
}

.map-green .level1 {
	position: absolute;
	bottom: 313px;
	left: 387px;
	z-index: 70;
}

.map-green .level2 {
	position: absolute;
	bottom: 433px;
	left: 291px;
	z-index: 70;
}

.map-green .level3 {
	position: absolute;
	bottom: 488px;
	left: 425px;
	z-index: 70;
}

.map-green .level4 {
	position: absolute;
	bottom: 627px;
	left: 338px;
	z-index: 70;
}

.map-green .level5 {
	position: absolute;
	bottom: 668px;
	left: 175px;
	z-index: 70;
}

.map-green .level6 {
	position: absolute;
	bottom: 793px;
	left: 221px;
	z-index: 70;
}

.map-green .level7 {
	position: absolute;
	bottom: 885px;
	left: 415px;
	z-index: 70;
}

.map-green .level8 {
	position: absolute;
	bottom: 957px;
	left: 306px;
	z-index: 70;
}

.map-green .level9 {
	position: absolute;
	bottom: 1066px;
	left: 355px;
	z-index: 70;
}

.map-green .level6.user1 {
	width: 57px;
	height: 57px;
	bottom: 772px;
	left: 160px;
	position: absolute;
}

.map-green .level6.user2 {
	width: 57px;
	height: 57px;
	bottom: 828px;
	left: 310px;
	position: absolute;
}

/*----------------------------Map brown---------------------------------*/
.map-brown .others {
	width: 100%;
	height: 100%;
	position: relative;
}

.map-brown .others .cay3-xl {
	position: absolute;
	z-index: 68;
	width: 207px;
	height: 363px;
	bottom: 410px;
	left: 0;
}

.map-brown .others .cay3 {
	position: absolute;
	z-index: 66;
	width: 184px;
	height: 378px;
	bottom: 406px;
	right: 0;
}

.map-brown .others .cay3-md {
	position: absolute;
	z-index: 82;
	width: 146px;
	height: 191px;
	bottom: 950px;
	right: 0;
}

.map-brown .others .cay3-sm {
	position: absolute;
	z-index: 69;
	width: 135px;
	height: 198px;
	bottom: 930px;
	left: 0;
}

.map-brown .level1 {
	position: absolute;
	bottom: 313px;
	left: 356px;
	z-index: 70;
}

.map-brown .level2 {
	position: absolute;
	bottom: 433px;
	left: 457px;
	z-index: 70;
}

.map-brown .level3 {
	position: absolute;
	bottom: 558px;
	left: 504px;
	z-index: 70;
}

.map-brown .level4 {
	position: absolute;
	bottom: 560px;
	left: 290px;
	z-index: 70;
}

.map-brown .level5 {
	position: absolute;
	bottom: 668px;
	left: 200px;
	z-index: 70;
}

.map-brown .level6 {
	position: absolute;
	bottom: 793px;
	left: 362px;
	z-index: 70;
}

.map-brown .level7 {
	position: absolute;
	bottom: 885px;
	left: 415px;
	z-index: 70;
}

.map-brown .level8 {
	position: absolute;
	bottom: 896px;
	left: 73px;
	z-index: 70;
}

.map-brown .level9 {
	position: absolute;
	bottom: 1066px;
	left: 158px;
	z-index: 70;
}

.map-brown .level6.user1 {
	width: 57px;
	height: 57px;
	bottom: 772px;
	left: 300px;
	position: absolute;
}

.map-brown .level6.user2 {
	width: 57px;
	height: 57px;
	bottom: 862px;
	left: 310px;
	position: absolute;
}

/*----------------------------Map yellow---------------------------------*/
.map-yellow .others {
	width: 100%;
	height: 100%;
	position: relative;
}

.map-yellow .others .cay3-xl {
	position: absolute;
	z-index: 68;
	width: 207px;
	height: 363px;
	bottom: 520px;
	left: 0;
}

.map-yellow .others .cay3 {
	position: absolute;
	z-index: 82;
	width: 184px;
	height: 378px;
	bottom: 406px;
	right: 0;
}

.map-yellow .others .cay3-md {
	position: absolute;
	z-index: 82;
	width: 146px;
	height: 191px;
	bottom: 950px;
	right: 0;
}

.map-yellow .others .cay3-sm {
	position: absolute;
	z-index: 69;
	width: 135px;
	height: 198px;
	bottom: 983px;
	left: 0;
}

.map-yellow .level1 {
	position: absolute;
	bottom: 510px;
	left: 394px;
	z-index: 70;
}

.map-yellow .level2 {
	position: absolute;
	bottom: 650px;
	left: 420px;
	z-index: 70;
}

.map-yellow .level3 {
	position: absolute;
	bottom: 677px;
	left: 303px;
	z-index: 70;
}

.map-yellow .level4 {
	position: absolute;
	bottom: 656px;
	left: 177px;
	z-index: 70;
}

.map-yellow .level5 {
	position: absolute;
	bottom: 758px;
	left: 106px;
	z-index: 70;
}

.map-yellow .level6 {
	position: absolute;
	bottom: 817px;
	left: 292px;
	z-index: 70;
}

.map-yellow .level7 {
	position: absolute;
	bottom: 806px;
	left: 477px;
	z-index: 70;
}

.map-yellow .level8 {
	position: absolute;
	bottom: 955px;
	left: 477px;
	z-index: 70;
}

.map-yellow .level9 {
	position: absolute;
	bottom: 1066px;
	left: 360px;
	z-index: 70;
}

.map-yellow .level6.user1 {
	width: 57px;
	height: 57px;
	bottom: 860px;
	left: 224px;
	position: absolute;
}

.map-yellow .level6.user2 {
	width: 57px;
	height: 57px;
	bottom: 884px;
	left: 376px;
	position: absolute;
}

/*----------------------------Map pink---------------------------------*/
.map-pink .others {
	width: 100%;
	height: 100%;
	position: relative;
}

.map-pink .others .cay2-xl {
	position: absolute;
	z-index: 82;
	width: 227px;
	height: 324px;
	bottom: 400px;
	left: 0;
}

.map-pink .others .cay2 {
	position: absolute;
	z-index: 70;
	width: 211px;
	height: 301px;
	bottom: 771px;
	right: 0;
}

.map-pink .others .cay2-sm {
	position: absolute;
	z-index: 69;
	width: 135px;
	height: 198px;
	bottom: 983px;
	left: 0;
}

.map-pink .level1 {
	position: absolute;
	bottom: 480px;
	left: 350px;
	z-index: 70;
}

.map-pink .level2 {
	position: absolute;
	bottom: 583px;
	left: 442px;
	z-index: 70;
}

.map-pink .level3 {
	position: absolute;
	bottom: 711px;
	left: 440px;
	z-index: 70;
}

.map-pink .level4 {
	position: absolute;
	bottom: 760px;
	left: 286px;
	z-index: 70;
}

.map-pink .level5 {
	position: absolute;
	bottom: 816px;
	left: 158px;
	z-index: 70;
}

.map-pink .level6 {
	position: absolute;
	bottom: 947px;
	left: 124px;
	z-index: 70;
}

.map-pink .level7 {
	position: absolute;
	bottom: 1003px;
	left: 280px;
	z-index: 70;
}

.map-pink .level8 {
	position: absolute;
	bottom: 1015px;
	left: 400px;
	z-index: 70;
}

.map-pink .level9 {
	position: absolute;
	bottom: 1093px;
	left: 486px;
	z-index: 70;
}

.map-pink .level6.user1 {
	width: 57px;
	height: 57px;
	bottom: 955px;
	left: 60px;
	position: absolute;
}

.map-pink .level6.user2 {
	width: 57px;
	height: 57px;
	bottom: 983px;
	left: 216px;
	position: absolute;
}

/*----------------------------Map blue---------------------------------*/
.map-blue .others {
	width: 100%;
	height: 100%;
	position: relative;
}

.map-blue .others .cay4-xl {
	position: absolute;
	z-index: 68;
	width: 203px;
	height: 552px;
	bottom: 220px;
	right: 0;
}

.map-blue .others .cay4 {
	position: absolute;
	z-index: 66;
	width: 118px;
	height: 333px;
	bottom: 406px;
	right: 0;
}

.map-blue .others .cay4-sm {
	position: absolute;
	z-index: 69;
	width: 145px;
	height: 229px;
	bottom: 930px;
	right: 0;
}

.map-blue .others .box-xl {
	position: absolute;
	z-index: 68;
	width: 106px;
	height: 128px;
	bottom: 450px;
	left: -30px;
}

.map-blue .others .box {
	position: absolute;
	z-index: 66;
	width: 122px;
	height: 140px;
	bottom: 677px;
	right: 0;
}

.map-blue .others .bt {
	position: absolute;
	z-index: 66;
	width: 100px;
	height: 98px;
	bottom: 844px;
	right: 120px;
}

.map-blue .level1 {
	position: absolute;
	bottom: 286px;
	left: 280px;
	z-index: 70;
}

.map-blue .level2 {
	position: absolute;
	bottom: 440px;
	left: 470px;
	z-index: 70;
}

.map-blue .level3 {
	position: absolute;
	bottom: 636px;
	left: 420px;
	z-index: 70;
}

.map-blue .level4 {
	position: absolute;
	bottom: 757px;
	left: 265px;
	z-index: 70;
}

.map-blue .level5 {
	position: absolute;
	bottom: 655px;
	left: 144px;
	z-index: 70;
}

.map-blue .level6 {
	position: absolute;
	bottom: 797px;
	left: 116px;
	z-index: 70;
}

.map-blue .level7 {
	position: absolute;
	bottom: 915px;
	left: 230px;
	z-index: 70;
}

.map-blue .level8 {
	position: absolute;
	bottom: 930px;
	left: 400px;
	z-index: 70;
}

.map-blue .level9 {
	position: absolute;
	bottom: 1075px;
	left: 500px;
	z-index: 70;
}

.map-blue .level6.user1 {
	width: 57px;
	height: 57px;
	bottom: 796px;
	left: 52px;
	position: absolute;
}

.map-blue .level6.user2 {
	width: 57px;
	height: 57px;
	bottom: 825px;
	left: 210px;
	position: absolute;
}

/*----------------------------Game---------------------------------*/
.game {
	position: relative;
	animation: bubble1 .5s ease-in-out;
}

.game-main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 618px;
	height: 682px;

}


/*----------------------------Modal---------------------------------*/
.modal-dialog,
.modal-dialog .modal-content {
	position: static;
	border: none;
	animation: bubble1 .5s ease-in-out;
}

.pop__group {
	background-image: url("../images/bg-popup-xxl.png");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 360px;
	height: 545px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pop__group.pop__group-xl {
	-webkit-transform: scale(.8) translate(-50%, -50%);
	transform: scale(.8) translate(-50%, -50%);
	transform-origin: top left;
}

.pop__group.pop__group-shop {
	background-image: url("../images/bg-popup-shop.png");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 360px;
	height: 543px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pop__group.pop__group-caidat {
	background-image: url("../images/bg-popup-caidat.png");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 360px;
	height: 497px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pop__group.pop__group-level {
	background-image: url("../images/bg-popup-level.png");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 360px;
	height: 466px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pop__group.pop__group-md {
	background-image: url("../images/bg-popup-md.png");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 360px;
	height: 373px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.pop__group.pop__group-napxu {
	background-image: url("../images/bg-popup-napthanhcong.png");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 360px;
	height: 459px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



.pop__group .btn__close {
	width: 36px;
	height: 37px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
}

.pop__group.pop__group-shop .btn__close {
	width: 36px;
	height: 37px;
	display: block;
	position: absolute;
	right: 0;
	top: 38px;
	z-index: 10;
}

.pop__group.pop__group-caidat .btn__close {
	width: 36px;
	height: 37px;
	display: block;
	position: absolute;
	right: 0;
	top: 8px;
	z-index: 10;
}

.pop__group.pop__group-level .btn__close {
	width: 36px;
	height: 37px;
	display: block;
	position: absolute;
	right: 12px;
	top: 90px;
	z-index: 10;
}

.pop__group.pop__group-md .btn__close {
	width: 36px;
	height: 37px;
	display: block;
	position: absolute;
	right: 2px;
	top: 112px;
	z-index: 10;
}

.pop__group .pop__title {
	font-size: 22px;
	margin: 0 auto 0 auto;
	height: 72px;
	padding-top: 34px;
	text-align: center;
}

.pop__group.pop__group-caidat .pop__title {
	font-size: 22px;
	margin: -24px auto 0 auto;
	height: 72px;
	padding-top: 0;
	text-align: center;
}

.pop__group.pop__group-level .number-star {
	width: 142px;
	position: absolute;
	top: 30px;
	left: 32px;
}

.pop__group.pop__group-level .number-star .star-1,
.pop__group.pop__group-level .number-star .star-3 {
	width: 42px;
}

.pop__group.pop__group-level .number-star .star-2 {
	width: 72px;
	margin: 8px -7px;
}
.pop__group.pop__group-level .number-star .star-1 img,
.pop__group.pop__group-level .number-star .star-2 img,
.pop__group.pop__group-level .number-star .star-3 img {
	filter: drop-shadow(1px 5px 0 #1ccaeb);
}

.pop__group .pop__inner {
	width: 86%;
	height: 84%;
	font-size: 14px;
	line-height: 1.5;
	margin: 10px auto 0 20px;
}

.pop__group.pop__group-shop .pop__inner {
	width: 86%;
	height: 69%;
	font-size: 18px;
	line-height: 1.5;
	margin: 130px auto 0 24px;
}

.pop__group.pop__group-caidat .pop__inner {
	width: 80%;
	height: 70%;
	font-size: 18px;
	line-height: 1.5;
	margin: 60px auto 0 32px;
}

.pop__group.pop__group-level .pop__inner {
	width: 77%;
	height: 70%;
	font-size: 18px;
	line-height: 1.5;
	margin: 112px auto 0 42px;
}

.pop__group.pop__group-md .pop__inner {
	width: 77%;
	height: 51%;
	font-size: 18px;
	line-height: 1.5;
	margin: 150px auto 0 42px;
}
.pop__group.pop__group-napxu .pop__inner {
	width: 73%;
    height: 45%;
    font-size: 18px;
    line-height: 1.5;
    margin: 170px auto 0 50px;
}
.pop__group.pop__group-shop .pop__inner .shop {
	width: 100%;
	position: relative;
	height: 100%;
	overflow: auto;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-6 {
	width: 140px;
	height: 103px;
	background: url(../images/bg-tuikeo.png) no-repeat;
	background-size: 100% 100%;
	margin: 5px 0;
	color: #751634;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-12 {
	width: 296px;
	height: 134px;
	background: url(../images/bg-tuikeo-xxl.png) no-repeat;
	background-size: 100% 100%;
	margin: 5px 0;
	color: #751634;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-6 h4 {
	font-size: 16px;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-6 .thumb {
	width: 100px;
	height: 40px;
	max-width: 100px;
	max-height: 40px;
	text-align: center;
	margin: 0 auto;
	position: relative;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-6 .thumb img {
	max-height: 100%;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-6 .thumb .sl {
	position: absolute;
	bottom: -5px;
	right: 10px;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-6 .btn-price {
	width: 100px;
	height: 29px;
	background: url(../images/btn-price.png) no-repeat;
	background-size: 100%;
	padding-top: 2px;
	text-align: center;
	color: #751634;
	font-size: 12px;
	text-decoration: none;
	display: block;
	margin: 6px auto 0;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-12 .thumb {
	width: 50px;
	height: 50px;
	max-width: 50px;
	max-height: 40px;
	text-align: center;
	margin: 0 auto;
	position: relative;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-12 .thumb img {
	max-height: 100%;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-12 .thumb .sl {
	position: absolute;
	bottom: -5px;
	right: -10px;
	color: #751634;
}

.pop__group.pop__group-shop .pop__inner .shop .row .col-12 .btn-price {
	width: 140px;
	height: 41px;
	background: url(../images/btn-price.png) no-repeat;
	background-size: 100%;
	padding-top: 5px;
	text-align: center;
	color: #751634;
	font-size: 16px;
	text-decoration: none;
	display: block;
	margin: 16px auto 0;
}

.pop__group.pop__group-caidat .pop__inner .caidat {
	width: 100%;
	position: relative;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 16px;
	color: #fff;
}

.pop__group.pop__group-caidat .pop__inner .caidat .btn-func a {
	width: 180px;
	height: 79px;
	background: url(../images/btn-menu.png) no-repeat;
	background-size: 100%;
	display: block;
	margin: 0 auto;
	text-align: center;
	font-family: 'icielcadena', Arial, Helvetica, sans-serif;
	font-size: 26px;
	color: #fff;
	text-decoration: none;
	padding-top: 12px;
}

.pop__group.pop__group-caidat .pop__inner .caidat .btn-func a:hover,
.pop__group.pop__group-caidat .pop__inner .caidat .btn-func a:active {
	width: 180px;
	height: 79px;
	background: url(../images/btn-menu-hover.png) no-repeat;
	background-size: 100%;
	display: block;
	margin: 0 auto;
	text-align: center;
	font-family: 'icielcadena', Arial, Helvetica, sans-serif;
	font-size: 26px;
	color: #fff;
	text-decoration: none;
	padding-top: 12px;
}

.pop__group.pop__group-caidat .pop__inner .caidat .item-td {
	width: 100%;
	height: 50px;
	background: #F7DFA3;
	background: linear-gradient(to top, #fbdc8d 0%, #f9c449 50%, #fbdc8d 100%);
	border-radius: 8px;
	box-shadow: -1px -3px 3px #f7883c;
	margin-top: 8px;
	margin-left: 1px;
	color: #743105;
	padding: 4px;
}

.pop__group.pop__group-caidat .pop__inner .caidat .item-td h4 {
	font-size: 16px;
}

.pop__group.pop__group-caidat .pop__inner .caidat .item-td .btn-open {
	font-size: 16px;
	text-transform: uppercase;
	width: 50px;
	height: 24px;
	background-color: #fffc00;
	box-shadow: 0 -2px 2px #f7883c;
	margin-top: 2px;
	border-radius: 16px;
	text-align: center;
	padding-top: 0;
	color: #743105;
	text-decoration: none;
}

.pop__group.pop__group-caidat .pop__inner .caidat .item-td .time {
	font-size: 14px;
	text-align: center;
}

.pop__group.pop__group-level .pop__inner .title-level {
	font-size: 42px;
	color: #ffd649;
	text-shadow: 2px 0 #5c2b00, -2px 0 #5c2b00, 0 2px #5c2b00, 0 -2px #5c2b00,
		1px 1px #5c2b00, -1px -1px #5c2b00, 1px -1px #5c2b00, -1px 1px #5c2b00;
}

.pop__group.pop__group-level .pop__inner .title-level span {
	margin-top: -12px;
}

.pop__group.pop__group-level .pop__inner .level .level-content {
	font-size: 24px;
	color: #fff;
	text-shadow: -1px 1px 2px #000;
	padding: 24px 24px 0 48px;
}

.pop__group.pop__group-level .pop__inner .title-level .bg-lvl {
	width: 70px;
	height: 73px;
	position: relative;
	margin-bottom: 16px;
}

.pop__group.pop__group-level .pop__inner .title-level .bg-lvl .number-lvl {
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	text-align: center;
	color: #751634;
	font-size: 24px;
	font-weight: normal;
	margin-top: 0;
	text-shadow: none;
	border: none;
}

.pop__group.pop__group-level .pop__inner .level .number-gold {
	width: 144px;
	height: 50px;
	background: url(../images/bg-number-gold.png) no-repeat;
	background-size: 100%;
	font-size: 32px;
	color: #fff;
	text-shadow: -1px 1px 2px #000;
	margin: 24px auto;
}

.pop__group.pop__group-level .pop__inner .level .number-gold span {
	margin-top: -10px;
}

.pop__group.pop__group-level .number-heart {
	width: 66px;
	height: 58px;
	text-align: center;
	color: #fff;
	font-size: 30px;
	padding-top: 2px;
	background: url(../images/icon-heart-lg.png) no-repeat;
	background-size: 100%;
	position: absolute;
	top: 0;
	right: 16px;
}


/*Chrome*/
.pop__group.pop__group-md .pop__inner .volume input[type='range'] {
	overflow: hidden;
	width: 100%;
	-webkit-appearance: none;
	background: #115e98;
	background: linear-gradient(to bottom, #115e98 0%, #2caccd 100%);
	border-radius: 8px;
	height: 16px;
	border: solid 1px #115e98;
}

.pop__group.pop__group-md .pop__inner .volume input[type='range']::-webkit-slider-runnable-track {
	height: 10px;
	-webkit-appearance: none;
	color: #bb1313;
	margin-top: -1px;
	height: 16px;
}

.pop__group.pop__group-md .pop__inner .volume input[type='range']::-webkit-slider-thumb {
	width: 10px;
	-webkit-appearance: none;
	height: 20px;
	cursor: ew-resize;
	background: url(../images/track-scroll.png) no-repeat;
	background-size: 100% 100%;
	box-shadow: -80px 0 50px 40px #fe0000, -80px 0 0 80px #edfe00;
	
}
/** FF*/
.pop__group.pop__group-md .pop__inner .volume input[type="range"]::-moz-range-progress {
	background: #edfe00;
	background: linear-gradient(to right, #fe0000 0%, #edfe00 100%);
	box-shadow: -80px 0 50px 40px #fe0000, -80px 0 0 80px #edfe00;
	height: 16px;
}

.pop__group.pop__group-md .pop__inner .volume input[type="range"]::-moz-range-track {
	background-color: transparent;
}

/* IE*/
.pop__group.pop__group-md .pop__inner .volume input[type="range"]::-ms-fill-lower {
	background-color: transparent;
}

.pop__group.pop__group-md .pop__inner .volume input[type="range"]::-ms-fill-upper {
	background-color: transparent;
}
.pop__group.pop__group-md .pop__inner .ss {
	color: #056ea6;
	text-shadow: -1px 0 0 #044162;
	font-size: 24px;
}
.pop__group.pop__group-md .pop__inner .ss .target-points {
	font-size: 42px;
	color: #ffd649;
	text-shadow: 2px 0 #5c2b00, -2px 0 #5c2b00, 0 2px #5c2b00, 0 -2px #5c2b00,
		1px 1px #5c2b00, -1px -1px #5c2b00, 1px -1px #5c2b00, -1px 1px #5c2b00;
}
.pop__group.pop__group-md .pop__inner .ss h4{
	font-size: 28px;
}
.pop__group.pop__group-napxu .pop__inner .napthanhcong{
	font-size: 15px;
	text-shadow: 0 1px 2px #000000;
}


.bvd {
	font-size: 18px;
	text-align: center;
}

.bvd .table {
	color: #743105;
}

.bvd .nav-pills .nav-item {
	margin: 0 3px;
}

.bvd .nav-pills .nav-link {
	background: #99424D;
	background: linear-gradient(to bottom, #99424D 0%, #D68F85 15%, #FBBDA7 100%);
	color: #743105;
	white-space: nowrap;
	font-size: 18px;
	padding: 6px;
}

.bvd .nav-pills .nav-link.active {
	filter: saturate(3);
	color: #2b1201;
}

.bvd .tab-content {
	height: 388px;
	overflow-x: hidden;
	overflow-y: auto;
	margin-top: 8px;
}

.bxh {
	color: #743105;
	font-size: 18px;
	text-align: center;
}

.bxh {
	height: 433px;
	overflow-x: hidden;
	overflow-y: auto;
}

.bxh .table tr {

	border-top: solid 3px #ffe9b3;
	border-bottom: solid 3px #ffe9b3;
}

.bxh .table tr td {
	background: #99424D;
	background: linear-gradient(to bottom, #99424D 0%, #D68F85 15%, #FBBDA7 100%);
	color: #743105;
}

.border-first-td {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.border-last-td {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.list-nv {
	width: 310px;
	height: 466px;
	background: url(../images/bg-popup-nv.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 16px;
	margin-top: 46px;
	overflow-y: auto;
	overflow-x: hidden;
}

.list-nv .col-6 {
	padding: 24px 32px;
	position: relative;
}

.list-nv .col-6 .lock {
	position: absolute;
	bottom: 32px;
	right: 28px;
	width: 32px;
}

.list-nv .thumb-nv {
	position: relative;
	text-align: center;
	margin: 0 auto;
}

.list-nv .thumb-nv .lock {
	position: absolute;
	bottom: 0;
	right: 58px;
	width: 42px;
}

.list-nv .list-pt {
	width: 120px;
	padding-left: 16px;
	font-size: 36px;
	text-align: center;
	margin-top: -24px;
}

.list-nv .list-pt .add-luot {
	position: absolute;
	top: 12px;
	left: 0;
	font-size: 22px;
	font-weight: bolder;
	color: #42007c;
	text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
		1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

.list-nv .list-pt .stt {
	width: 16px;
	text-align: center;
}

.list-nv .list-pt .pt {
	width: 40px;
	text-align: center;
}

@media only screen and (max-width: 360px) and (max-height: 640px){
	.modal-dialog,
	.modal-dialog .modal-content {
		transform: scale(.8);
		-webkit-transform: scale(.8);
		-moz-transform: scale(.8);
		transform-origin: bottom center;
		animation: none;
	}

}




/*----------------------------Animation---------------------------------*/
.pulse-reverse:hover,
.pulse-reverse:focus {
	-webkit-animation-name: pulse-reverse;
	animation-name: pulse-reverse;
	transition: all 0.2s ease-in-out;
	-webkit-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	filter: saturate(1);
}

@-webkit-keyframes pulse-reverse {
	from {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes pulse-reverse {
	from {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

.pulse {
	animation-name: pulse;
	-webkit-animation-name: pulse;

	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.99);
		opacity: 1;
		transform-origin: center center;
	}

	50% {
		transform: scale(1.1);
		opacity: 1;
		transform-origin: center center;
	}

	100% {
		transform: scale(0.99);
		opacity: 1;
		transform-origin: center center;
	}
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 1;
	}

	50% {
		-webkit-transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(0.95);
		opacity: 1;
	}
}

.bubble-effect {
	animation: bubble .3s ease-in-out;
}

@keyframes bubble {
	0% {
		transform: scale(0.5);
		opacity: 0;
		transform-origin: center center;
	}

	30% {
		transform: scale(1.1);
		opacity: 1;
		transform-origin: center center;
	}

	60% {
		transform: scale(0.9);
		opacity: 1;
		transform-origin: center center;
	}

	100% {
		transform: scale(1);
		opacity: 1;
		transform-origin: center center;
	}
}

@-webkit-keyframes bubble {
	0% {
		-webkit-transform: scale(0.5);
		opacity: 0;
		transform-origin: center center;
	}

	30% {
		-webkit-transform: scale(1.1);
		opacity: 1;
		transform-origin: center center;
	}

	60% {
		-webkit-transform: scale(0.9);
		opacity: 1;
		transform-origin: center center;
	}

	100% {
		-webkit-transform: scale(1);
		opacity: 1;
		transform-origin: center center;
	}
}

@keyframes bubble1 {
	0% {
		transform: scale(0.5);
		opacity: 0;
		transform-origin: bottom center;
	}

	30% {
		transform: scale(1.01);
		opacity: 1;
		transform-origin: bottom center;
	}

	60% {
		transform: scale(0.95);
		opacity: .95;
		transform-origin: bottom center;
	}

	100% {
		transform: scale(1);
		opacity: 1;
		transform-origin: bottom center;
	}
}

@-webkit-keyframes bubble1 {
	0% {
		-webkit-transform: scale(0.5);
		opacity: 0;
		transform-origin: bottom center;
	}

	30% {
		-webkit-transform: scale(1.01);
		opacity: 1;
		transform-origin: bottom center;
	}

	60% {
		-webkit-transform: scale(0.95);
		opacity: .95;
		transform-origin: bottom center;
	}

	100% {
		-webkit-transform: scale(1);
		opacity: 1;
		transform-origin: bottom center;
	}
}

.fadedown {
	animation: fadedown .3s ease-in-out;
}

@keyframes fadedown {
	0% {
		top: -100px;
		opacity: 0;

	}

	100% {
		top: 0;
		opacity: 1;
	}
}

@-webkit-keyframes fadedown {
	0% {
		top: -100px;
		opacity: 0;

	}

	100% {
		top: 0;
		opacity: 1;
	}
}

.fadeup {
	animation: fadeup .3s ease-in-out;
}

@keyframes fadeup {
	0% {
		bottom: -100px;
		opacity: 0;

	}

	100% {
		bottom: 0;
		opacity: 1;
	}
}

@-webkit-keyframes fadeup {
	0% {
		bottom: -100px;
		opacity: 0;

	}

	100% {
		bottom: 0;
		opacity: 1;
	}
}

/* .main .logo{
    margin: 10% auto 0;
}

.main .btn-play {
    margin: 0px auto 0;
}

.main .btn-login {
    margin: 0px auto 0;
} */