@charset "utf-8";
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
    margin: 0;
    padding: 0
}
body {
    padding: 0;
    margin: 0;
    background: #f0f0f0
}
html, body, fieldset, img, iframe, abbr {
    border: 0
}
img{width:100%;}
li {
    list-style: none
}
textarea {
    overflow: auto;
    resize: none
}
a, button {
    cursor: pointer
}
h1, h2, h3, h4, h5, h6, strong, b {
    font-weight: 700
}
a, a:hover {
    text-decoration: none;
    outline: 0
}
body, textarea, button {
    color: #fff
}
html, body {
    min-width: 1200px;
    margin: 0 auto;
    font-family: Cafeta, arial;
    font-size: 14px
}
.break{flex-basis: 100%; height: 0;
}
.hide {
    display: none
}
.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px)
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.clearfix:after {
    clear: both;
    content: '\0020';
    display: block;
    visibility: hidden;
    height: 0
}
.clearfix {
    zoom: 1
}
.inline-box {
    display: inline-block;
    zoom: 1
}
.wbox {
    width: 1200px;
    margin: 0 auto
}
.wrap {
    margin: 0 auto;
    min-width: 1200px;
    max-width: 1920px;
    position: relative;
    background: #1e2731 url(../img/bg-tuyetdinh-hslk.jpg) top center no-repeat;
    background-size: 100%;
    height: auto;
    overflow: hidden;
}
.left-menu{
    position: fixed;
    top: 26%;
    left: 0%;
    width: 228px;
    height: 230px;
    z-index: 5;
}
@media(max-width: 1600px){.left-menu{transform: scale(0.8);}}

.left-menu a {
    display: block;
    _width: 170px;
    height: 60px;
    margin-bottom: 0px;
}

.wrap_info{
    position: fixed;
    background: url(../img_pc/bg-info.png) no-repeat;
    background-size: 100% 100%;
    top: 25%;
    right: 0;
    width: 309px;
    height: 316px;
    z-index: 1;
}
@media(max-width: 1600px){.wrap_info{transform: scale(0.85);right: -26px;}}
@media (max-width: 1440px){.wrap_info {transform: scale(0.8);right: -31px;}}

.wrap_info .info{
    width: 100%;
    height: 233px;
    padding: 16px 40px 0px 46px;
    color: #000000;
    font-family: "Cafeta";
    font-size: 19px;
}
.wrap_info .info .user{
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    _margin-left: 50px;
}
.wrap_info .info .user span{position: relative;top: 2px;}
.wrap_info .info #server_info{margin-bottom: 30px;margin-top: 10px;}
.wrap_info .info .sv{
    margin: 3px 0 0px;
}
.wrap_info .info .title{
    display: inline-block;
    width: 50%
}
.wrap_info .social{text-align: center;}
.wrap_info .social a{margin-right: 5px;}
.wrap_info .social a:last-child{margin-right: 0}

.wrap .page {
    width: 1200px;
    margin: 0 auto;
    height: 400px;
    position: relative;
}
@media(max-width:1440px){
.wrap .page {height: 670px;}
}
.wrap .page h2 {
    text-align: center;
    margin-bottom: 15px;
}
@media(max-width: 1600px){.wrap .page1 {height: 370px;}}
@media(max-width: 1440px){.wrap .page1 {height: 370px;}}

.wrap .page1 .logo{position: absolute;top: 40px;left: 6%;width: 210px;}
.wrap .page1 .login-user{position: absolute;top: 10px;right: 10%;width: 210px;}
@media(max-width: 1600px){
.wrap .page1 .login-user{right:14%}
}
.wrap .page1 .login-user div{color: #000;font-size: 18px;}

#page1 .btn-menu {
    position: absolute;
    top: 295px;
    width: 100%;
    display: flex;align-items: center;justify-content: center;
}
@media(max-width: 1600px){ #page1 .btn-menu{top: 275px;}}
@media(max-width: 1440px){ #page1 .btn-menu{top: 275px;}}

#page1 .btn-menu a {
    display: inline-block;
    margin: 0 -5px;
    width: 220px;
}
@media(max-width: 1600px){ #page1 .btn-menu a{width: 190px;}}
@media(max-width: 1440px){ #page1 .btn-menu a{width: 170px;}}

#page1 .btn-menu a:hover {
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
}

/* WRAP QUA*/
.wrap_qua {
    width: 100%;
    position: relative;
    float: left;
    margin: 62% auto 52%;
}
@media(max-width: 1600px){.wrap_qua{margin: 65% auto;}}
@media(max-width: 1440px){.wrap_qua{margin: 56% auto;}}

.wrap_qua .loading {
    display: block;
    width: 1177px;
    height: 360px;
    background:url(../img_pc/bg-loading.png) no-repeat top center/100%;
    position: relative;
    _margin: 96px 0 0 29px;
}

.wrap_qua .loading .paren-complete {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.wrap_qua .loading .complete {
    display: block;
    position: absolute;
    height: 100%;
    background:url(../img_pc/bg-loading-complete.png) no-repeat top center/100%;
    width: 1177px;
    top: 0;
    left: 0;
}
.wrap_qua .loading .circle {
    display: block;
    width: 136px;
    height: 143px;
    position: absolute;
    top: 40px;
    padding: 97px 10px 0;
    z-index: 99;
}
.wrap_qua .loading .circle:nth-of-type(1) {left: 2%;}
.wrap_qua .loading .circle:nth-of-type(2) {left: 22%;}
.wrap_qua .loading .circle:nth-of-type(3) {left: 43%;}
.wrap_qua .loading .circle:nth-of-type(4) {left: 63%;}
.wrap_qua .loading .circle:nth-of-type(5) {left: 83.6%;}

.wrap_qua .loading .circle .image {
    width: 116px;
    height: 44px;
    position: absolute;
    filter: grayscale(1);
    cursor: pointer;
}
.wrap_qua .loading .circle.active .image{filter: grayscale(0);}

.wrap_qua .loading .circle.s1 .image {background: url(../img/btn-nhan.png) no-repeat;}
.wrap_qua .loading .circle.s2 .image {background: url(../img/btn-nhan.png) no-repeat;}
.wrap_qua .loading .circle.s3 .image {background: url(../img/btn-nhan.png) no-repeat;}
.wrap_qua .loading .circle.s4 .image {background: url(../img/btn-nhan.png) no-repeat;}
.wrap_qua .loading .circle.s5 .image {background: url(../img/btn-nhan.png) no-repeat;}

.wrap_qua .loading .circle.s1.active .image {background: url(../img/btn-nhan.png) no-repeat;}
.wrap_qua .loading .circle.s2.active .image {background: url(../img/btn-nhan.png) no-repeat;}
.wrap_qua .loading .circle.s3.active .image {background: url(../img/btn-nhan.png) no-repeat;}
.wrap_qua .loading .circle.s4.active .image {background: url(../img/btn-nhan.png) no-repeat;}
.wrap_qua .loading .circle.s5.active .image {background: url(../img/btn-nhan.png) no-repeat;}

.wrap_qua .loading .circle.s1.open .image {background: url(../img/btn-danhan.png) no-repeat;}
.wrap_qua .loading .circle.s2.open .image {background: url(../img/btn-danhan.png) no-repeat;}
.wrap_qua .loading .circle.s3.open .image {background: url(../img/btn-danhan.png) no-repeat;}
.wrap_qua .loading .circle.s4.open .image {background: url(../img/btn-danhan.png) no-repeat;}
.wrap_qua .loading .circle.s5.open .image {background: url(../img/btn-danhan.png) no-repeat;}

.wrap_qua .phanqua div{display:none;position: absolute;z-index: 3;top: -20%;}
.qua_1{left: -4%;}
.qua_2{left: 16%;}
.qua_3{left: 37.8%;}
.qua_4{left: 55.7%;}
.qua_5{left: 77.7%;}
/* END WRAP QUA */

.wrap .page2 {
    width: 900px;
    margin-bottom: 50px;
    height: auto;
}
@media(max-width: 1600px){.wrap .page2 {height: auto;}}
@media(max-width: 1440px){.wrap .page2 {height: auto;}}
.page2 .page2_inner{
    border: 2px solid #a7a5a5;
    border-radius: 15px;
    background: #000000ab;
    padding: 20px 0px 20px 30px;
}
.page2_inner .box_head{display: flex;align-items: center;justify-content: center;margin-top: 100px;}
.page2_inner .box_head a{width: 190px;margin-left: 80px;}

@media(max-width: 1600px){.page2_inner .box_head a{width: 160px}}
@media(max-width: 1440px){.page2_inner .box_head a{width: 130px}}

.page2_inner .box_content{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;overflow: auto;height: 600px;padding-right: 20px;}
.page2_inner .box_content .award{margin: 0 10px;}
.page2_inner .box_content .award .bg_award{width: 210px;}
@media(max-width: 1600px){
.page2_inner .box_content .award .bg_award{width: 185px;}
}
@media(max-width: 1440px){
.page2_inner .box_content .award .bg_award{width: 150px;}
}
.page2_inner .box_content .award a{width: 100px;display: block;margin: 0 auto;position: relative;top: -50px;}

.wrap .page3{}/*Test*/
@media(max-width: 1600px){.wrap .page3{}}
@media(max-width: 1600px) and (max-height: 900px) {.wrap .page3 {}}
@media(max-width: 1440px){.wrap .page3 {}}
@media(max-width: 1440px) and (max-height: 1735px) {.wrap .page3 {}}

.page3 .page3_inner{height: 100%;}
.page3_inner .box_head{display: flex;align-items: center;justify-content: center;margin-top: 50px;}
.page3_inner .box_head a{width: 210px;margin-left: 50px;}
@media(max-width: 1600px){.page3_inner .box_head a{width: 150px;}}
@media(max-width: 1440px){.page3_inner .box_head a{width: 160px;}}

.page3_inner .box_content{padding: 0 100px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;margin: 42px 0 0 38px;}

.page3_inner .box_content .award{margin: 0 10px;}
.page3_inner .box_content .award .bg_award{width: 215px;}
@media(max-width: 1600px){.page3_inner .box_content .award .bg_award{width:  150px;}}
.page3_inner .box_content .award a{width: 100px;display: block;margin: 0 auto;position: relative;top: -30px;}

.wrap .page3 .qua{position: absolute;width: 1250px;top: 99px;left: 33%;}
@media(max-width: 1600px){.wrap .page3 .qua{left:20.5%;}}
@media(max-width: 1440px){.wrap .page3 .qua{left: 6%;}}

.qua .nhan {float: left;width: 230px;height: 460px;margin-bottom: 25px;position:relative;}
.qua .nhan:nth-child(odd) {_margin-right: 42px;}
.qua .nhan:last-of-type{width: 280px}
.qua .nhan .bg_award{width:inherit; text-align: center;}
.qua .nhan .content_award{position:absolute;bottom: 30px;padding: 0 35px 0 40px;width: 100%;font-size: 16px;}
.qua .nhan:last-of-type .content_award{padding: 7px 65px 0 65px;}
.qua .nhan .content_award p{min-height: 180px;padding-top: 0px;}
.qua .nhan .content_award p img{width: 100%;}
.qua .nhan .content_award a {display: block;margin: 0 auto;text-align: center;}
.qua .nhan .content_award a>img{width: 116px;filter: grayscale(1);}
.qua .nhan .content_award a.active>img{filter: grayscale(0);}

.thele_inner ul li{    
    list-style-type: disc;
    list-style-position: inside;
}