/*------------------------------------------------------------------------------------------------------------------------
															MAIN
------------------------------------------------------------------------------------------------------------------------*/
body {font-family: 'Roboto', sans-serif; background: #f1f1f1; }
p, a {word-break:break-word; color:#000}
a:focus {outline:0}
a:hover {color:#0353a5}
i.red {color:red !important; font-style:normal}
/*.btn { border-radius:0}*/
ul, ul li { list-style: none; padding: 0 }
.wrap {width:auto}
h1, h2, h3, h4, h5 { font-family: 'Roboto', sans-serif; }
label {font-weight:normal!important;}

.form-control::-webkit-input-placeholder {color:#666;}
.form-control:-moz-placeholder {color:#666}
.form-control::-moz-placeholder {color:#666}
.form-control:-ms-input-placeholder {color:#666}

.btn-nav { background: #f4ae17; border-radius: 20px; padding: 3px 26px 3px !important; margin: 0px 5px 0 0 !important; color: #0d0c51 }
.btn-nav:hover {background:#FCC61B; color:#0d0c51 !important}
.btn-primary { border-radius:3px !important; text-transform: uppercase; font-weight:bold; font-size: 13px; padding:8px 20px 8px; background:#0353a5; color: rgba(255, 255, 255, 0.8); border:none}
.btn-primary a:hover { text-decoration:none}
.btn-danger {background-color: #d9534f; border-color: #d43f3a;}
.btn-sm {font-size: 11px;padding: 10px 14px 8px;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {border-bottom-color: #285e8e; box-shadow: inset 0 -2px rgba(0,0,0,0.3);}
.btn-orange {background:#DB8606; border:none; color:rgba(0,0,0,0.5)}
input[type=radio], input[type=checkbox] {margin: -3px 0 0;vertical-align: middle;}
.transition {-webkit-transition:all .25s; -moz-transition:all .25s; transition:all .25s;}
.transition-fast {-webkit-transition:all .3s ; -moz-transition:all .3s ; transition:all .3s ;}

.main {position:relative}

/*------------------------------------------------------------------------------------------------------------------------
															NAVBAR
------------------------------------------------------------------------------------------------------------------------*/
nav { background: #0353a5; width: auto;}
nav .logo { margin: 8px 50px 0 0; }
nav ul { list-style: none; margin: 6px 0 0; padding: 0; line-height: 1; display: block; zoom: 1; }
nav ul:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }
nav ul li { display: inline-block; padding: 0; margin: 0; }
nav.align-right ul li { float: right; }
nav.align-center ul { text-align: center; }

nav ul li a { color: rgba(255, 255, 255, 0.66); font-size: 24px; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; }
nav .nav-menu li a:hover, .user-setting .dropdown ul li a:hover { color: #B0E742 !important; text-decoration:none}
nav .nav-menu li a:hover:before, .user-setting .dropdown ul li a:hover:before, nav .nav-menu > li.active > a:before {width:100%;}
nav .nav-menu > li > a:after { content: ""; display: block; position: absolute; right: -3px; top: 15px; height: 27px; width: 1px; background: #ffffff; opacity: .3; }
nav ul li a:before { content: ""; display: block; position: absolute; left: 0; bottom: -3px; height:4px; width: 0; background: #B0E742; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s;}
nav ul li.last > a:after, nav ul li:last-child > a:after { display: none; }
nav .nav-menu li a, .nav-user > li > a, .nav-user li .dropdown li a {display:block; padding:15px 15px 18px}
nav .nav-menu > li.active > a { color: #B0E742; }
nav.align-right li.last > a:after, nav.align-right li:last-child > a:after { display: block; }
nav.align-right li:first-child a:after { display: none; }
nav .nav-user {margin-top:7px;background-color: rgba(0,0,0,.3);border-radius: 10px;}
nav .nav-user .dropdown li a {padding:14px 10px 10px 0}
nav .nav-user li a {font-size:14px}
nav .nav-user li a.register {margin-top:6px}
nav .nav-user li a:hover { color: #fff; text-decoration:none}

/*---------------------------------------- SUB MENU ---------------------------------------------------*/
nav .game, nav .last {position:relative;}
nav .sub-menu {position: absolute; background:#0E4B8A; z-index:0; right:0px; padding:0 10px 10px; top:80px; opacity:0}
nav .sub-menu li {width:180px}
nav .sub-menu li a img {border-radius:5px; margin-right:5px}
nav .sub-menu li a {font-size:16px; padding: 8px 15px 8px 0; margin: 10px 0 0 15px; color:#fff}
nav .sub-menu li:nth-child(3) a, nav .sub-menu li:nth-child(6) a, nav .sub-menu li:nth-child(9) a, nav .sub-menu li:nth-child(12) a {border-right:0}
nav .sub-menu li a:before, .user-setting ul li a:before {height:3px; bottom:0}

nav .last .sub-menu li { list-style:square;}
.user-setting .dropdown {background: #0E4B8A; padding:5px 15px 15px; z-index:0; -webkit-transition:all .25s; -moz-transition:all .25s; transition:all .25s;}
.user-setting .dropdown {margin-top:0}
.user-setting ul li {display:block}
.user-setting ul li a {color:#fff;}

.user-mobile {font-size:24px; color:rgba(255, 255, 255, 0.66); padding:15px; margin:6px 0 0; line-height: 24px; cursor:pointer; display:none}
/*------------------------------------------------------------------------------------------------------------------------
															NEWS
------------------------------------------------------------------------------------------------------------------------*/
.news {background:#2a2e31; height:50px; margin-bottom:30px; padding:5px 0; font-size:15px}
.news ul li {margin:0 0 10px 10px;}
.news ul li a { color:#fff; padding:6px 10px 3px; display:inline-block; line-height:30px; text-shadow:0px -1px 0px rgba(0,0,0,0.3);}
.news ul li a:hover {text-decoration:underline}
.news ul li a:before {content:""; width:8px; height:8px; display:inline-block; background:rgba(255,255,255,0.5); margin:0 10px 0 0}

.nav-news {float:right}
.nav-news a {color:#fff; display:inline-block; border:2px solid #fff; opacity:0.5; border-radius:50%; margin-left:5px; margin: 2px; width: 30px; height: 30px; line-height: 30px; text-align: center}
.nav-news a:hover {text-decoration:none; opacity:1}

.news-list ul > li {padding:15px 0; border-top:1px solid #cdcdcd; position:relative}
.news-list ul > li > a {font-size:22px; display:block; position:relative; left:0; line-height:26px}
.news-list ul > li > a > span {display:block; font-size:14px; line-height:20px; padding-top:5px;}
.icon-hot {background: url('../image/hot.gif') no-repeat; width: 35px; height: 12px; display:inline-block}
.icon-new {background: url('../image/new.gif') no-repeat; width: 35px; height: 15px; display:inline-block}
.news-list ul > li:hover a {left:25px; text-decoration:none}

/*------------------------------------------------------------------------------------------------------------------------
															BANNER
------------------------------------------------------------------------------------------------------------------------*/
.banner {background:#091c2d; display:none}
.banner-backdrop {
    width:100%;
    margin:0 auto;
    background: #0353a5; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #0353a5 0%, #0353a5 47%, #091c2d 98%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0353a5), color-stop(47%,#0353a5), color-stop(98%,#091c2d)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #0353a5 0%,#0353a5 47%,#091c2d 98%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #0353a5 0%,#0353a5 47%,#091c2d 98%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #0353a5 0%,#0353a5 47%,#091c2d 98%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #0353a5 0%,#0353a5 47%,#091c2d 98%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0353a5', endColorstr='#091c2d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}
.banner .sb-slider {float:left}
.banner .sb-slider li a img {}
.banner .thumb {width:255px; float:right; margin-right:5px}
.banner .thumb span {display:block; position:relative; cursor:pointer;}
.banner .thumb span img {box-shadow:inset -10px 0 20px #0f2d4d}

/*.shadow{display:block; position:relative;}
.shadow:before {display:block; content:''; position:absolute; width:100%; height:100%; box-shadow:inset -30px 0 30px #1c5290;}
.shadow.nav-dot-current:before {box-shadow:none}*/

.banner .thumb span.nav-dot-current:before {content:""; border:3px solid #b17f35; width:256px; height:83px; position:absolute; top:0; left:0; z-index:100}
.banner .thumb span.nav-dot-current:after {display:inline-block; width:0; height:0; vertical-align:top; border-right: 8px solid #b17f35; border-top: 8px solid transparent; border-bottom: 8px solid transparent; content: ""; position:absolute; top:50%; left:-8px; margin-top:-8px}
/*------------------------------------------------------------------------------------------------------------------------
															ITEM
------------------------------------------------------------------------------------------------------------------------*/
.list-item { overflow:hidden;}
.list-item .game-list {
	display: flex;
	flex-flow: row wrap;
}
.list-item .game-list .game-item {
	width: 320px;
	display: flex;
	flex-flow: row nowrap;
	padding: 0 10px 30px;
}
.logo-item {
	width: 40%;
	position:relative;
	border-radius: 18px;
}
.logo-item img {
	width: 100%;
}
.logo-item a { display: block;}
.logo-item a span { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:rgba(0,0,0,0.85); border-radius:18px; margin:0px; text-align:center; color:#fff; font-size:16px}
.info-item {
	width: 60%;
	padding-left: 5%;
}
.info-item h3 {margin-top:10px; font-size:22px}
.info-item .caret {border-left: 6px solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-right:5px; position:relative; top:-1px}
.info-item h2 {
    height: 36px;
}
.info-item .btn {
	margin-bottom: 4px;
}
.icon-apple { color: #898989; font-size: 24px; margin-right:5px}
.icon-android { color: #a4ca39; font-size: 20px;  margin-right:5px}
.logo-item span {margin: 1em 0 0; padding:5em 0 0; opacity: 0; -webkit-transition: all 0.35s; transition: all 0.35s;}
.logo-item:hover span {padding-top:4em; opacity: 1;}

/*------------------------------------------------------------------------------------------------------------------------
															RATING TABLE & FACEBOOK
------------------------------------------------------------------------------------------------------------------------*/
.nav-tabs,
.nav-pills {
    position: relative;
}

.rating-and-other { padding:40px 0; border-top: 1px solid #c6c6c6;}
.rating-table {width:100%; background:#0353a5}
.rating-table .nav-tabs {border-bottom:none; background:#0461c1}
.rating-table .nav-tabs > li > a {font-family: 'Roboto', sans-serif; font-size:15px; color:rgba(255,255,255,0.5); padding:10px 24px; border-radius:0 ; border:none; margin-right:0}
.rating-table .nav-tabs > li:last-child > a {
    border-radius: 0 5px 5px 0;
}
.rating-table .nav-tabs li .caret {display:none}
.rating-table .nav-tabs li.active:first-child a,, .rating-table .nav-tabs > li:first-child > a:hover{
                                                      border-radius: 5px 0px 0px 5px;
                                                  }
.rating-table .nav-tabs li.active a, .rating-table .nav-tabs > li > a:hover {background:#2993ff; color:#fff;}
.rating-table .nav-tabs li, .rating-table .nav-tabs > li > a:hover, .rating-table .nav-tabs > li > a:focus {border:none; margin-bottom:0;}
.rating-table .nav-tabs li {border-right: 1px solid #0353a5;
    position: relative;
}
.rating-table .nav-tabs li:before {
    position: absolute; display: block; content: '';
    border-left: 1px solid #2993ff;
    height: 100%; width: 100%;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

.rating-table .nav-tabs li:last-child{
    border-right: none;
}
.rating-table .nav-tabs li.active a:hover {color:#fff}
.rating-table .nav-tabs li.active:after {content:"";display: inline-block; height: 0; vertical-align: middle; position:absolute; border-top:8px solid #2993ff; border-left:10px solid transparent; border-right:10px solid transparent; margin:0 auto; left:0; right:0; width:10px}
.rating-table .nav-tabs li.active:before {content:"";display: inline-block; width: 100%; height: 0; vertical-align: middle; position:absolute; top:-8px; border-bottom:8px solid #727272; border-left:15px solid transparent; border-right:15px solid transparent;}

.rating-table .tab-pane {color:#fff; padding:20px;float: left;width: 100%;}
.rating-table .tab-pane .title {font-family: 'Roboto', sans-serif; font-size:18px; color:#fff; background:#2a2e31; padding:2px 10px; border-radius:5px; margin-top:10px}
.rating-table .tab-pane .list-name {list-style: decimal inside; padding:0 10px; margin:10px 0 0; overflow:auto; height:310px;}
.rating-table .tab-pane .list-name li {line-height:30px; border-bottom:1px solid #08364f; font-size:13px}
.rating-table .tab-pane .list-name li a {color:#fff}
.rating-table .tab-pane .list-name li:last-child {border-bottom:0}
.rating-table .tab-pane .list-name li > span:last-child {float: right;}

.rating-table .tab-pane .list-name li.sort-top {color:#fbf3ae; font-size:15px}
.rating-table .tab-pane .list-name li.sort-top a {color:#fbf3ae}
.rating-table .tab-pane .list-name li.sort-top i img { width: 26px; margin-right: 5px;}

.other {width:100%; margin-top:30px}
.other .fl-social {margin-bottom: 17px; background:#C4C4C4 ;padding:12px 15px 5px;}
.fb-like > span {vertical-align:initial !important}


/*------------------------------------------------------------------------------------------------------------------------
															FIX BUTTON LEFT
------------------------------------------------------------------------------------------------------------------------*/
.fixButton {width:60px; position:fixed; right:0; top:90px; z-index:500;/*display:none*/}
.fixButton a {display:block; width:60px; height:91px; margin-bottom:5px}
.fixButton a:hover {box-shadow:0px 0px 20px #FF0000; -moz-box-shadow:0px 0px 20px #FF0000; -webkit-box-shadow:0px 0px 20px #FF0000}
.fixButton .quayso {background: url("../image/btn-quayso.png") no-repeat}
.fixButton .moruong {background: url("../image/hailoc-daunam.gif") no-repeat}
.fixButton .xoso {background: url("../image/thantai.gif") no-repeat}
.fixButton .topcaothu {background: url("../image/btn-topcaothu.png") no-repeat}
.fixButton .giftcode {background: url("../image/btn-nhapma.png") no-repeat}
.fixButton .choithu {background: url("../image/btn-choithu.gif") no-repeat}
.fixButton .giftcodeeveryday {background: url("../image/btn-hangngay.png") no-repeat}
.fixButton .giftcodenoel {background: url("../image/btn-birthday.png") no-repeat}

.fixButton.fixButtonRight {right:0; left:inherit}
.fixButton .fixBtnRt {background:rgba(0,0,0,0.7); position:absolute; right:0; width:70px; height:80px; border-radius:3px 0 0 3px}

/*------------------------------------------------------------------------------------------------------------------------
															FOOTER
------------------------------------------------------------------------------------------------------------------------*/
.footer { background:#2A2A2A url("../image/ft-bg-top.png") repeat-x left top; padding:20px 0}
.footer .wrap {padding:0 20px}
.footer .keyword-ft {margin: 0 60px 0 0; width:100%; -webkit-transition:all .25s; -moz-transition:all .25s; transition:all .25s;}
.footer .link-ct {display:none}
.footer .hotline-ft { margin-right: 0 }
.footer .keyword-ft h4 { color: #d0d0d0 }
.footer .keyword-ft ul li > a { color: #bbb; padding: 5px 0 3px; display: inline-block }
.footer .keyword-ft h4.copyright { margin-top: 40px }

.footer .icon-menu {font-size: 24px; color: #757575; right: 20px; position: absolute; cursor:pointer; display:block}
/*------------------------------------------------------------------------------------------------------------------------
															CONTENT PAGE
------------------------------------------------------------------------------------------------------------------------*/
.page-content {position:relative; padding:10px 0;}
.page-content h2 {margin:20px 0 0px 0; padding-bottom:10px; text-transform:uppercase; position:relative; display:inline-block; border-bottom:5px solid #B0E742}

/*------------------------------------------------------------------------------------------------------------------------
															     FAQ
------------------------------------------------------------------------------------------------------------------------*/
.faq {}
#faq-tab { border-bottom:none;}
#faq-tab > li {float:none; font-size:16px; border-top:1px solid #ddd}
#faq-tab>li>a {margin-right:0; border:none; padding:12px 0px; position:relative; left:0; -webkit-transition:all .25s; -moz-transition:all .25s; transition:all .25s;}
#faq-tab>li.active>a:after, #faq-tab>li>a:before {content:""; border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; display: inline-block; width: 0; height: 0; vertical-align: middle; opacity:0; -webkit-transition:all .25s; -moz-transition:all .25s; transition:all .25s;}
#faq-tab>li.active>a:after {margin-left:10px; opacity:1}
#faq-tab>li>a:before {margin-right:20px; position:absolute; top:17px; left:-20px}
#faq-tab>li:hover>a:before {opacity:1; left:0px}
#faq-tab>li:hover>a { background:none; padding-left:20px;}

#faq-tab>li.active:hover>a {padding-left:0}
#faq-tab>li.active:hover>a:before {display:none}

.faq li.active>a, .faq .nav-tabs>li.active>a:hover, .faq .nav-tabs>li.active>a:focus {background:none; color: #333; border:none; border-radius:0; font-weight:bold; border-bottom: 1px solid #fff; border-right: 1px solid #ddd;}

.faq-body {margin:0 0 30px;}
.faq-body .tab-menu h3 {margin-bottom:15px; display:inline-block}
.faq-body ul {background:none}

.faqContent {margin: 10px 0 0 0;}
.faqContent .tab-pane {background:#fff;}
.faqContent .tab-pane > h3 {background:#fafafa; padding:12px 20px; margin: 0; border-bottom:1px solid #eee}
.faqContent .descript { padding: 25px 20px 15px; background: #E7E7E7;}
.faqContent .descript .logo-item {border-radius:15px; overflow:hidden}
.faqContent .mobile-qrcode .qrcode-detail {width:100px; display:inline-block; margin-left:15px}
.faqContent .mobile-qrcode .qrcode-detail:last-child {margin-left:0}
.faqContent .mobile-qrcode .qrcode-detail span {display:block; text-align:center; margin:10px 0 0; width:100px}
.qrcode-box {width:215px}
.faqContent .mobile-qrcode  p {margin: 0 0 10px; text-align:right}

.gameplayContent img {max-width:100%; height:auto}

.gameplay-tab {border-width:1px 0 1px 0; border-style:solid; border-color:#ddd; }
.gameplay-tab li a {padding:10px 20px; border-right:1px solid #ddd; margin-right:0px;}
.gameplay-tab li.active a:after {content:""; border-top: 4px solid; border-left: 4px solid transparent; border-right: 4px solid transparent; display: inline-block; width: 0; height: 0; margin-left:10px; vertical-align: middle}
.gameplayContent .tab-pane {padding:10px 20px 0}
.gameplayContent .tab-pane p, .gameplayContent .tab-pane li {font-family:Arial, Helvetica, sans-serif}

.ico-mn-faq {display:none}

/*------------------------------------------------------------------------------------------------------------------------
															     REGISTER FORM
------------------------------------------------------------------------------------------------------------------------*/
.register-form {padding:30px 20px;}
.register-form label {font-size:15px}
.red {color:red}
.orange {color:#f4ae17}
/*------------------------------------------------------------------------------------------------------------------------
															          APP
------------------------------------------------------------------------------------------------------------------------*/
.app-backdrop {background:url('../image/bg-app.jpg') no-repeat center top; height:723px}
.app-backdrop .wrap, .app-note .wrap {width:1000px; margin:0 auto}
.app-backdrop .page-content {padding-top:0}
.app-backdrop .page-content h2 {margin:20px 0 0 30px}
.app-backdrop .wrap {background:#eee}
.app-game .app-game {height:660px !important;}
.app-game .app {margin:0 auto; text-align:center}
.guide {margin:20px 30px 0 0}
.guide button i {margin:0 3px 0 0}
.app-note { background:#ddd}
.app-note .alert {margin-bottom:0; border-bottom:none}

/*------------------------------------------------------------------------------------------------------------------------
															     USER INFO
------------------------------------------------------------------------------------------------------------------------*/
#usersetting .media-body ul {font-size:13px;}
#usersetting .dropdown-menu>.active>a, #usersetting .dropdown-menu>.active>a:hover, #usersetting .dropdown-menu>.active>a:focus {color:#fff; background-color:#d37a28;}
#usersetting .nav-tabs {width:92%; margin:auto}
#usersetting .nav-tabs li a {font-weight:bold; font-size:13px; padding: 10px 7px;}
#usersetting .nav-tabs>li.active>a {border-bottom:1px solid #fff}
#usersetting .tab-content {width:92%; margin-top:20px}

.user-info .media {margin-bottom:10px}
.user-info .media .pull-left {position:relative}
.user-info .avatar {border-radius:10px; overflow:hidden; width:140px; height:140px; display:inline-block; background-size:cover; background-position:center center; cursor:default}
.user-info .username {font-size:18px; color:#fbf3ae}

/*------------------------------------------------------------------------------------------------------------------------
																							GROUP
	------------------------------------------------------------------------------------------------------------------------*/
.group .logo-item {}
.group .list-item > .wrap > ul li {width:24%; padding:0 0.5% 25px; margin:0}
.group .list-item .info-item h3 {font-size:17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.group .logo-item > a {display:block; width:110px; height:110px; background-size:contain; background-position:center; background-repeat:no-repeat}
.group .list-item li .logo-item {margin-right:10px}
.group .logo-item a span {font-size:13px}
.group .logo-item:hover span {padding-top:3.5em}
.group .list-item form .form-control {width:200px; height:36px; border: none; background:#333;; color: #eee; margin-bottom:20px; float:right; border-radius:3px}

.group #keySearchGroup input[type="text"]{margin-right:5px}

.group-detail {margin-top:20px}
.group-detail .group-tab-1 > a > i {width:22px; height:22px; display:inline-block; vertical-align:middle; background-size:contain; margin-left:7px;}
.group-detail .list-item .info-item p { margin:0 0 2px; font-size:13px;}
.group-detail .group-setting {padding-bottom:20px}
.group-detail .group-setting > table {margin-top:10px}
.group-detail .group-setting table tr > td {border-top:none; border-bottom:1px solid #A7A7A7; vertical-align:middle; font-size:13px; word-break:break-word;}
.group-detail .group-setting form {margin-top:10px}
.group-detail .group-setting table tr > td a:hover {text-decoration:none}
.group-detail .group-setting .table>thead {background-color:rgba(0,0,0,0.1)}
.group-detail .group-setting .table>thead>tr>th {border:none; font-size:12px}
.group-detail .group-setting .table>tbody>tr:last-child > td {border-bottom:none;}
.group-detail .group-setting textarea {width:100%; margin:0 0 10px; height:400px; padding:15px;}
.group-detail-box {margin-bottom:20px;}
.group-detail-box .logo-item > a {width:150px; height:150px}
.group-detail-box .info-item {width:auto; margin-left:170px}
.group-detail-box .info-item h3 {margin-top:0; font-size:24px !important}
.group-detail-box table>tbody>tr>td {padding:5px 0; border-top:1px solid #A7A7A7}
.group-btn-box .btn-sm {margin-bottom:5px}

.tropy-box {border-radius:5px; padding:15px 30px 5px; margin:20px 0; border:1px solid #9B9B9B}
.tropy-box > ul {margin:0}
.tropy-box > ul > li {width:auto; margin:0 25px 0 0}
.tropy-box > ul > li:last-child {margin-right:0}
.tropy-box .title {font-size:18px; text-transform:uppercase; margin:5px 0 15px}
.tropy-box > ul > li p {text-align:center; margin-top:5px;}

.page-num { text-align:center}
.page-num .pagination {margin-top:5px}
.page-num .pagination li {margin: 0;}
.page-num .pagination>li>a {color:#eee}
.page-num .pagination>li>a, .page-num .pagination>li>a:hover {background:rgba(0, 0, 0, 0.8); border-color:#fff}
.page-num .pagination>li>a:hover {background:rgba(0, 0, 0, 0.9); color:#fff}
.page-num .pagination>li.active>a {background:#B0E742; color:#000}


.backdrop-group {margin:20px 0 8px; padding-bottom:20px; border-bottom:1px solid #ddd}
.backdrop-group ol {padding:0; position:absolute; bottom: 0; right: 10px; z-index:10}
.backdrop-group ol li {display:inline-block; width: 25px; height: 25px; line-height: 25px; text-align:center; color: #BABABA; cursor:pointer; font-size:13px; border-radius:2px; background: rgba(0, 0, 0, 0.71);}
.backdrop-group ol li.active {background:rgba(255, 255, 255, 0.86); color:#000}
.backdrop-group img {max-width:100%}

.list-group-ct h4 {background: #019AD4; color:#fff;padding: 10px;margin: 20px 0 0;}
.list-group-ct > ul > li {width:25%; text-align:center; float:left; margin-top:10px}
.list-group-ct .logo-item {border-radius:0; margin-right:0}
.list-group-ct .logo-item > a {width: 100px; height: 100px; border-radius:5px; margin:0 auto}
.list-group-ct .info-item h3 {font: bold 14px/20px 'Roboto', sans-serif; margin: 5px 0 0;}
.list-group-ct .info-item p {font-size:12px}

.list-group-ct .info-item h3, .list-group-ct .info-item p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.group .col-md-6 {border-right: 1px solid #ddd; border-left: 1px solid #ddd;}
.group .col-md-3 h4 { text-transform:uppercase;text-align: center;}
.group .col-md-3 select.form-control {display:inline; width:auto}

.group .nav-tabs>li.active>a {font-weight:bold;color: #019AD4;}
.group .nav-tabs>li>a {font-size:13px; padding: 10px 7px;font-weight: bold;}

.group .nav-tabs>li .btn-primary {background-color:#3276b1 !important}

.group .col-md-3 .table {margin:20px 0 0}
.group .col-md-3 .table>thead>tr>th {border-bottom: none; background: #019AD4;  color: #fff;padding: 0;}
.group .col-md-3 .table tr.topthree td:first-child > a:before {display:none;}
.group .col-md-3 .table tr.topthree td:first-child img {width:20px; padding-right:5px}
.group .col-md-3 .table tr.topthree td {vertical-align:middle; font-weight:bold}

/*.group .col-md-3 .table {font-size:13px}*/
.group .col-md-3 .table tr td:first-child > a:before {content:""; border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; display: inline-block; width: 0; height: 0; margin-right:8px}

.group .form-inline {margin:20px 10px; text-align:center}
.group .form-inline .form-control {width:405px}
.group .form-inline .search-alphabeta {margin:10px 0; text-align:center; border-bottom:1px solid #ddd}
.group .form-inline .search-alphabeta ul li {display:inline-block; text-transform:uppercase;}

.info-group {font-size:13px}
.info-group tbody tr td:first-child > a { cursor:text}
.info-group tbody tr td:first-child > a:hover { text-decoration:none; color:#000}
.info-group tbody tr td:nth-child(2) {font-weight:bold}
.info-group tbody tr td:nth-child(2) a:before {display:none !important}
.info-group tbody tr td:nth-child(2) a {font-weight:bold; color:#019AD4}

.avatar-member {position:relative; margin:12px 0 5px;}
.avatar-pic {width:220px; height:220px; background-size:cover; background-position:center center; display:block}

.avatar-member .btn-file {position:absolute; right:5px; bottom:5px; background:rgba(0,0,0,.5)}
.avatar-member .btn-file:hover {background:rgba(0,0,0,.8)}

.group-btn-box .controls {text-align:center}

.comments-area {border-top:1px solid #ddd; margin-top:20px; padding-top:20px}
.comments-area h4 {background: #019AD4; padding:10px; margin-bottom:20px; color: #fff; text-transform:uppercase}
.comments-area p, .comments-area span {font-size:13px}

/*------------------------------------------------------------------------------------------------------------------------
															        MODAL
------------------------------------------------------------------------------------------------------------------------*/
.modal-body .form-group {position:relative; width:80%; margin:0 auto 15px}
.modal-body .form-group > i { position:absolute;left:10px; top:8px; color:#333}
.modal-body, .modal-body p {color:#eee}
.modal-body input {border-radius:0; border:none; color:#333; padding-left:35px}
.modal-body a {color:#0AAAFF !important}
.modal-body p.btn-openID {text-align:center}
#login .modal-body .form-group .checkbox {margin:0}

.popup .modal-content {
    background:url('../image/md-bg-top.png'),url('../image/md-bg-ft.jpg'),url('../image/md-bg.jpg');
    background-position:right top,left bottom, right top;
    background-repeat:repeat-x,no-repeat,repeat; overflow:visible; border:none}
.popup.in .modal-content {top:40px}
.popup.in.boxy .modal-dialog {margin:0 auto; width:100%}
.popup.in.boxy .modal-content {top:0px}
.popup.in.boxy .modal-header {height:20px}

.popup.in.boxy .close {top:-46px; width: 50px; height: 50px; background: #eee; opacity: 0.6; font-size: 30px; margin-right: 5px;}
.popup.in.boxy .close:hover, .popup.in.boxy .close:focus {opacity:0.8}
.popup.in.boxy .modal-body {max-height:none; padding:0; top:inherit; overflow-y:inherit}
.popup.in.boxy .modal-body .app-backdrop {height:auto}
.popup.in.boxy .modal-body .app-backdrop .page-content {padding:10px 0 0}

.popup .tab-content {width:80%; margin:auto;}
.popup .modal-header {background:url('../image/md-bg-logo.png') center top no-repeat; padding:0; border-bottom:none; height:154px; position:relative;top: -65px;}
.popup .modal-header h3 {font-family: 'GeoSlab703ExtraRegular'; font-size:24px; text-align:center; color:#fbf3ae; text-transform:uppercase; padding-top: 127px; padding-left: 10px;}
.popup .modal-header .close {margin:72px 10px 0 0;}
.popup .modal-body {position:relative; top: -65px; padding: 15px 15px 0; max-height:482px; overflow-y:auto; line-height:1.42857143em}
.popup .modal-body ul {line-height:1.42857143em}
.popup ul.sort-content {color:#ebebeb; font-size:14px}
.popup ul.sort-content > li:first-child {background:#d37a28; border-radius:4px; color:#1c0121;}
.popup ul.sort-content > li {border-top:none !important}
.popup ul.sort-content ol {list-style:decimal inside; padding:0}
.popup ul.sort-content .sort-top:first-child {border-top:none; margin-top:5px}
.popup ul.sort-content .sort-top {color:#fbf3ae; padding:4px 10px !important;}
.popup ul.sort-content .sort-top i img {width:30px; margin-right:5px}
.popup ul.sort-content li {padding:4px 10px 3px; border-top:1px solid rgba(255,255,255,0.2); list-style: inherit; line-height:23px}
.popup ul.sort-content li > span:last-child  {float:right}

.popup .modal-footer {position: absolute; padding: 10px 0; width: 100%; bottom: 0; text-align: center; background: rgba(255,255,255,0.3); border-top: 0; box-shadow:none; border-radius:0 0 5px 5px}
.popup .modal-footer select {width:210px; margin:0 5px; padding:5px; border:none}
.popup .modal-footer select option {padding:5px; display:block}

.primary-popup .modal-header {background:url('../image/md-parttern.png') center top no-repeat; top:50px; text-align:center}
.primary-popup .modal-header h3 {background:#03386F; display: inline-block; padding:0 5px; margin-left: 25px;}
.primary-popup .modal-header .close {margin-top:0; position:relative; top:-43px}
#signup .modal-body {overflow-y:visible}
#signup .modal-body .role {height: 68px; overflow-y: scroll; padding: 10px; background: rgba(0, 0, 0, 0.61); border-radius: 5px; font-size: 11px;}

#login .modal-footer {background:rgba(14, 150, 241, 1); border-top: 1px solid rgba(255, 255, 255, 0.21); padding:5px 0}
.openID .title-openID {color:#000; display:inline-block; margin-right:5px}
button.btn-openID {margin:0 5px; font-size:15px; padding:8px 12px 4px;}

/*------------------------------------------------------------------------------------------------------------------------
															FILE UPLOAD
------------------------------------------------------------------------------------------------------------------------*/
.hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }
.input-block-level { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.btn-file { overflow: hidden; position: relative; vertical-align: middle; }
.btn-file > input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); font-size: 23px; direction: ltr; cursor: pointer; }
.fileupload .uneditable-input { display: inline-block; margin-bottom: 0px; vertical-align: middle; cursor: text; }
.fileupload .thumbnail { overflow: hidden; display: inline-block; margin-bottom: 5px; vertical-align: middle; text-align: center; position: absolute; top: 0; right: 0; left: 0; border-radius: 15px; overflow: hidden; padding: 0; border: none; }
.fileupload .thumbnail > img { display: inline-block; vertical-align: middle; max-width: 100%; padding-bottom: 100%; }
.fileupload .btn { vertical-align: middle; }
.fileupload-new .fileupload-exists { display: none; }
.fileupload-inline .fileupload-controls { display: inline; }


/*
 *  webkit-scrollbar
 */

.list-name::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius:3px;
    box-shadow:1px -1px 0px rgba(0,0,0,0.3)
}

.list-name::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
    border-radius:3px
}

.list-name::-webkit-scrollbar-thumb
{
    background-color:rgba(42, 131, 223, 0.58);
    border-radius:3px;
    background-image: -webkit-linear-gradient(90deg, rgba(4, 55, 107, 0.97) 25%, transparent 50%, rgba(4, 55, 107, 0.97) 50%, transparent);
}

/*------------------------------------------------------------------------------------------------------------------------
															CALENDER
------------------------------------------------------------------------------------------------------------------------*/
.calender-box {margin-bottom:30px;}

.calender-box .calender-content {position:relative;}
.calender-box .calender-content .calender-banner {position:relative}
.calender-box .calender-content .calender-banner img {max-width:100%}

.calender-list-month {margin:0 20px 30px}
.calender-list-month ul li {display:block; float:left; width:88.333px;position: relative;}
.calender-list-month ul li a {width:auto; display:block; text-transform:uppercase; pointer-events:none; cursor:not-allowed;}
.calender-list-month ul li a:hover, .desktop-device ul li a:hover {text-decoration:none}
.calender-list-month ul li a.unlock { cursor:pointer; pointer-events:auto}
.calender-list-month ul li.active a span {color:#0353a5}
.calender-list-month ul li.active a span.title:before {content:""; position:absolute; width:100%; border-bottom: 5px solid #0353a5; bottom:0; left:0}
.calender-list-month ul li a span.title { font-size: 27px; padding-left: 5px; border-right: 1px dashed #999; padding-bottom: 15px; line-height: 21px; position:relative}
.calender-list-month ul li:last-child a span.title {border-right:none}
.calender-list-month ul li a span {display:block}
.calender-list-month ul li a span.description {font-size:12px; margin-top:7px; line-height:15px}

.calender-list-month ul li a img {opacity:0.5; filter:alpha(opacity=50);}
.calender-list-month ul li a.unlock img {opacity:1; filter:alpha(opacity=100)}

.calender-list-month ul li button.btn-hide {
    border-radius: 50%;
    border: none;
    width: 50px;
    height: 50px;
    font-size: 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.67);
    display:none;
}

.calender-device { position:absolute; bottom:0; padding: 30px 20px 20px; background: rgba(241, 241, 241, 0.5); left: 0; right: 0}

.desktop-device {border-right: 1px dashed #999; margin-right: 20px;}
.desktop-device, .mobile-device {width:353px; display:inline-block}
.desktop-device span i, .mobile-device span i {font-size:40px; margin-right:10px}
.desktop-device ul, .mobile-device ul {margin-bottom:0}
.desktop-device ul li, .mobile-device ul li {display:inline-block; margin:0px 10px; font-size:13px; width:76px}

.title-month {float:right}
.title-month h2 {padding:0; margin:0; font-family:'Roboto', sans-serif; font-weight:bold; font-size:40px}
.calender-content .tab-pane {width:100%; height:480px; background-position:top center; background-repeat:no-repeat}

@media screen and (max-width:640px) {
    .calender-banner, .calender-device, .desktop-device {display:none}
    .desktop-device, .mobile-device {margin-bottom:10px; width:100%; border-right:0}

    .calender-mobile .calender-device {display:block; position:static; background:none}
    .calender-mobile .calender-device .icon-mobile {color:#000}

    .calender-list-month ul li.active button.btn-hide {display:block}
    .calender-list-month {margin-top:30px}
    .calender-list-month ul li {display:block; float:left; width:16.666%; margin-bottom:10px; font-size:11px}
    .calender-list-month ul li a img {max-width:100%}

    .calender-device {padding:0 0 20px}

    .calender-mobile .modal-content {top: 40px;}
    .calender-mobile .mobile-device ul li {margin:5px 10px}
    .calender-mobile .mobile-device ul li a {color:#000 !important}
    .calender-mobile .mobile-device span.pull-left {background: #EDEDED; border-radius: 50%; padding: 10px; float: none !important; display: block; width: 90px; height: 90px; line-height: 90px; text-align: center; margin: 0 auto 20px;}
    .calender-mobile .mobile-device span.pull-left i {margin-right:0}
}
@media screen and (max-width:480px) {
    .calender-list-month ul li {width:25%;}
}

/*------------------------------------------------------------------------------------------------------------------------
															THEME
------------------------------------------------------------------------------------------------------------------------*/
body {background: url('../preview/theme-2019.jpg') no-repeat center top fixed;background-size:cover;}
nav, .banner, .banner-backdrop, .news , .rating-table, .footer, .group, .group .group-tab, .group .tab-content, .app-backdrop, .app-note {background:none}

.wrap {background:#fff;
    border-radius: 5px;
}
nav>.wrap{padding-top:10px; padding-bottom:10px; background-color:transparent;}

nav ul.nav-menu{
    background-color: rgba(0,0,0,.3);
    border-radius: 10px 10px 0 0;
}
nav .nav-menu > li.active > a, nav .nav-menu li a:hover, .user-setting .dropdown ul li a:hover {color:#fdfe00 !important}
nav ul li a:before {background:#fdfe00}

.banner .wrap {background:none; box-shadow: 0px -5px 10px rgba(0,0,0,.4);}
.banner .thumb span.nav-dot-current:before {width:260px}
.banner .thumb span img {width:260px; height:83px}

.news {margin-bottom:0; padding:0; background:#00a7dc; width:1060px; margin:0 auto; height:48px}
.news .wrap {background:none}
.news ul li a {padding-left:30px}

.list-item .wrap{background-color:#eee;}

.rating-and-other {border-top:none; padding:0}
.rating-and-other .wrap{background-color:#eee;}
.rating-table .nav-tabs li.active:before {border:none}
.rating-table .tab-pane .list-name li, .rating-table .tab-pane .list-name li a {color:#000}

.rating-table .tab-pane .list-name li.sort-top { padding-bottom: 5px;}
.rating-table .tab-pane .list-name li.sort-top, .rating-table .tab-pane .list-name li.sort-top a {color:#D37A28;}
.rating-table .tab-pane .list-name li {border-bottom:1px solid #C7C7C7}

.main .list-item ul {margin-bottom:0}

.faq-body .tab-menu {background:rgba(0,0,0,.7);}
.faq-body .tab-content {margin-top:0}
.faq-body .tab-menu h3, .faq-body .tab-menu a {color:rgba(255,255,255,.8)}
#faq-tab > li {border-top:1px solid rgba(255, 255, 255, 0.27)}
#faq-tab>li>a {padding:15px 0}
#faq-tab>li.active>a {color:#fff}

.page-content {padding:0}
.news-list {background:rgba(255,255,255,.85); padding:0 20px; border-radius:3px 3px 0 0}
.news-list ul {margin-bottom:0;}
.news-list .row {padding-top:10px}
.news-other {margin-bottom:20px}
.news-other>h3{
    font-size: 18px;
}
.news-other .media-heading{
    font-size: 18px;
    font-weight: 300;
}
.news-other .media-heading a{
    font-size: 14px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}

.faq-body .tab-content {padding:0}

.appPage .wrap {width:1000px}
.appPage .rating-table {width:590px}

.appPage .rating-table .nav-tabs li:last-child {border-right:none}

.calender-box {background: #F0F0F0; margin-bottom:0}
.calender-list-month, .calender-list-month ul { margin-bottom:0}


.breadcrumbs{
    padding: 15px;
    width: 100%;
    font-size: 13px;
}

.breadcrumbs a{
    text-decoration: none;
}

.breadcrumbs a:hover{
    color: #ff7200;
}

.breadcrumbs span{
    color: #ff7200;
}

.news-list h1{
    display: inline-block;
    font-size: 20px;
    width: auto;
}

.text-hot{
    font-size: 20px;
    color: #ff7200;
    text-transform: uppercase;
    padding-left: 5px;
    font-weight: bold;
}

.news-list time {
    color: #777;
    display: block;
    font-size: 12px;
    margin-bottom: 10px;
}

.news-list time span{
    margin-right: 15px;
}

#news_content p i{
    color: #ed1c24;
    margin-right: 5px;
    font-size: 12px;
}

.news-list .col-xs-12{
    border: none !important;
}



.sharing .ssba{
    display: inline-block;
}

.ssba, .ssba a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #2e2e2e !important;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
}

.ssba img {
    border: 0 none;
    box-shadow: none !important;
    display: inline !important;
    padding: 6px;
    vertical-align: middle;
    width: 35px !important;
    height: auto;
    max-width: 100%;
}

.search-form label {
    font-weight: 400;
    padding-right: 65px;
    width: 100%;
}

.screen-reader-text {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.search-field {
    border-radius: 0;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 13px;
    height: 32px;
    line-height: 1.42857;
    padding: 7px 14px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 90%;
}

.search-form{
    padding-top: 15px;
}

.search-form .search-submit {
    background: #f6753c none repeat scroll 0 0;
    border: 1px solid #f6753c;
    color: #fff;
    position: absolute;
    right: 40px;
    top: 15px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.cr h3{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 0;
    padding-bottom: 10px;
    position: relative;
    margin-top: 20px;
}

.cr h3::after {
    background: #ed1c24 none repeat scroll 0 0;
    bottom: -2px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 70px;
}

.media a{
    font-weight: bold;
    font-size: 13px;
    color: #2e2e2e;
    display: block;
    position: relative;
    text-indent: 15px;
}

.media a::before {
    content: "";
    font-family: FontAwesome;
    left: -15px;
    position: absolute;
    top: 0;
}
.media a:visited{
    color: #808080;
}

.fb{
    width: 100%;
    display: inline-block;
    margin-top: 20px;
}

.footer .wrap {
    border-radius: 0px;
}

.name_boxstats{
    background: #2a2e31 none repeat scroll 0 0;
    border-radius: 5px;
    float: left;
    font-size: 13px;
    font-weight: normal;
    width: 100%;
}
.table > .name_boxstats > tr > th{
    font-weight: normal;
}
.table > .name_boxstats > tr > th:nth-child(1), .table > .name_boxstats > tr > th:nth-child(3), .table > .name_boxstats > tr > th:nth-child(4){
    text-align: center;
}


.table > .name_boxstats > tr > th:last-child{
    text-align: right;

}
.table{
    font-size: 13px;
}

.table > tbody{
    color: #000;
}

.table > tbody > tr > th{
    text-align: center;
    padding: 10px 8px;
}

.table > tbody > tr:nth-child(1) > th, .table > tbody > tr:nth-child(2) > th, .table > tbody > tr:nth-child(3) > th {
    text-align: center;
    padding: 5px 8px;
}

.table > tbody > tr:nth-child(1), .table > tbody > tr:nth-child(2), .table > tbody > tr:nth-child(3){
    color: #ff6700;
}

.table > tbody > tr:nth-child(1) > td:first-child, .table > tbody > tr:nth-child(2) > td:first-child, .table > tbody > tr:nth-child(3) > td:first-child{
    padding: 5px 11px 5px;
}

.table > tbody > tr > td:first-child{
    text-align: left;
}

.table > tbody > tr > td:nth-child(3), .table > tbody > tr > td:nth-child(4){
    text-align: center;
}

.table > tbody > tr > td:nth-child(5){
    text-align: right;
    padding-right: 5px;

}

.bootstrap-select > .dropdown-toggle {
    padding-right: 25px;
    width: 100%;
    z-index: 1;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    display: inline-block;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 220px;
}
.bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="col-"] {
    display: inline-block;
    float: none;
    margin-left: 0;
}

.bootstrap-select > select {
    border: medium none;
    bottom: 0;
    display: block !important;
    height: 100% !important;
    left: 50%;
    opacity: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    width: 0.5px !important;
}

.bootstrap-select.btn-group .dropdown-menu {
    box-sizing: border-box;
    min-width: 100%;
}

.bootstrap-select.btn-group .dropdown-menu.inner {
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    float: none;
    margin: 0;
    padding: 0;
    position: static;
}

.bootstrap-select.btn-group .dropdown-menu li {
    position: relative;
}



.table-fixed {
    width: 100%;
    background-color: #f3f3f3;
}
.table-fixed tbody {
    height: 285px;
    overflow-y: auto;
    width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
    border: none;
}
.table-fixed tbody tr{
    border-bottom: 1px solid #e3e3e3;
    float: left;
    width: 100%;
}
.table-fixed tbody tr td {
    padding: 10px 11px 8px;
    float: left;
    border: none;
}
.table-fixed thead tr th {
    float: left;
    border: none;
}

#topcaothutaixiu .table > tbody > tr > td:nth-child(4), #topplayer .table > tbody > tr > td:nth-child(4),
#topcaothu .table > tbody > tr > td:nth-child(4), #topplayer .table > tbody > tr > td:nth-child(4),
#topdaigia .table > tbody > tr > td:nth-child(4), #topplayer .table > tbody > tr > td:nth-child(4)
{
    text-align: right;
}

.box-ratio {
	position: relative;
}
.box-ratio::before {
	content: "";
	display: block;
}
.box-ratio-inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}
.game-cont > .box-ratio::before {
	padding-top: 66.67%;
}