body{background-color: #f5f6f6}
.pn-banner-top{position: relative;overflow: hidden;;text-align: right;background: linear-gradient(to bottom,  rgba(143,130,230,1) 0%,rgba(63,109,211,1) 100%)}
.pn-banner-top picture{display: inline-block;margin-bottom: -50px}
.pn-banner-top .container{position: absolute;top: 0;left: 50%;transform: translateX(-50%);padding: 60px 15px 100px 15px;text-align: left;height: 100%}
.pn-banner-top .pn-content{text-align: left;display: inline-block}
.pn-banner-top .pn-content strong{color: #fff;text-transform: uppercase;font-weight: 900;font-size: 40px;line-height: 50px;display: block;margin-bottom: 15px}
.pn-free-test{background-color: #f5f6f6}
.pn-form-search{background-color: #fff;border-radius: 20px;box-shadow: 0 1px 15px rgba(0,0,0,.15);margin: -70px 0 70px 0;position: relative;z-index: 1;padding: 60px 35px}
.pn-form-search .row [class*='col-']:nth-child(2){display: flex;align-items: center}
.pn-form-search .row [class*='col-']:nth-child(2) label{min-width: 25%;font-weight: normal;margin: 0 10px 0 0;text-align: center}
.pn-form-search .pn-wrapper-input{position: relative}
.pn-form-search .pn-wrapper-input .form-control{padding-left: 30px}
.pn-form-search .form-control{border: 1px solid #aeaeae;height: 40px;box-shadow: inherit}
.pn-form-search .form-control:focus{border-color: #78d6fa}
.pn-form-search .pn-wrapper-input .fa{position: absolute;width: 30px;height: 40px;left: 0;top: 0;display: flex;align-items: center;justify-content: center;font-size: 18px;color: #666;padding-left: 6px;font-size: 18px;transform: rotate(90deg);padding-left: 0}
.pn-form-search .pn-button{padding: 10px 15px 9px 15px;width: 100%}
.pn-free-test .pn-wrapper-item .row{display: flex;flex-wrap: wrap}
.pn-free-test .pn-wrapper-item .row [class*='col-']{margin-bottom: 30px}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item{padding: 0 20px 90px 20px;border-radius: 20px;background-color: #fff;transition: all ease .3s;height: 100%;position: relative}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item:hover{box-shadow: 3px 5px 20px rgba(0,0,0,.25)}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-image{margin: 0 -20px 20px -20px;border-radius: 20px 20px 0 0}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-sub-name{font-size: 14px;line-height: 19px;color: #666}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-name{font-weight: bold;font-size: 20px;line-height: 30px;color: #3a6cd1;text-transform: uppercase;margin-bottom: 15px}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-skill{font-size: 16px;line-height: 21px;color: #29292b}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-skill span{display: block;margin-bottom: 10px}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-skill strong{text-transform: uppercase;display: inline-block;margin: 0 5px 5px 0}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-level{display: flex;flex-wrap: wrap}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-level span{display: inline-block;font-size: 12px;line-height: 17px;padding: 3px 30px;border-radius: 50px;color: #2ad6b5;border: 1px solid #2ad6b5;background-color: #dcfef7;margin: 0 10px 5px 0}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-level .pn-complete{background-color: #f5f5f5;color: #666;border: none}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-button{padding: 10px 15px 9px 15px;width: 100%;text-transform: initial;position: absolute;bottom: 30px;left: 20px;right: 20px;width: auto;background-color: #fff;color: #2ad6b5;border: 1px solid #2ad6b5}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-button:hover{background-color: #3a6cd1;color: #fff;border-color: #3a6cd1}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-button span{display: inline-block;position: relative;padding-right: 25px}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-button span .arrow-right{right: 0;left: inherit;color: #2ad6b5;top: 50%}
.pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-button:hover span .arrow-right{color: #fff}
.pn-wrapper-pagination .pagination li a{border: 1px solid #c2c2c2;border-radius: 5px;color: #29292b;margin: 5px}
.pn-wrapper-pagination .pagination li.active a{color: #fff;background-color: #3c6dd2;border-color: #3c6dd2}
.pn-wrapper-pagination .pagination li:not(.active):hover a{background-color: #ececec}
.pn-wrapper-question ul{list-style: none;padding-left: 0;display: flex;flex-wrap: wrap;background-color: #eee;padding-top: 10px}
.pn-wrapper-question ul li{width: 50%;padding: 0 15px;margin-bottom: 10px}
.pn-wrapper-question ul li label{font-weight: normal;margin-bottom: 0;cursor: pointer}
.pn-wrapper-question ul li label input{margin-right: 5px}
.pn-wrapper-question .pn-question{margin-bottom: 30px}
.pn-wrapper-question .pn-question > h4{font-weight: bold;font-size: 16px;line-height: 21px;margin: 0 0 15px 0}
.pn-wrapper-question .pn-question .pn-wrapper{margin-bottom: 0;font-size: 15px}
.pn-wrapper-question .pn-question > ul{margin-top: 15px}
.pn-wrapper-question + .pn-wrapper-button{margin: 30px 0}
.pn-wrapper-question + .pn-wrapper-button .pn-button{margin-bottom: 10px}
.pn-result{border-radius: 5px;margin-bottom: 30px;background: #1e5799;background: -moz-linear-gradient(top, #1e5799 0%, #9e8ffe 0%, #3c6dd2 100%);background: -webkit-linear-gradient(top, #1e5799 0%,#9e8ffe 0%,#3c6dd2 100%);background: linear-gradient(to bottom, #1e5799 0%,#9e8ffe 0%,#3c6dd2 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#3c6dd2',GradientType=0 )}
.pn-result p{padding: 10px 15px;color: #fff;margin-bottom: 0;border-top: 1px solid rgba(255,255,255,0.2)}
.pn-notify{position: fixed;left: 12px;bottom: 12px;background-color: #BD362F;-webkit-box-shadow: 0 0 12px #999;box-shadow: 0 0 12px #999;border-radius: 3px;padding: 15px 15px 15px 50px;opacity: 0.8;color: #fff;z-index: 1000;transition: all ease .3s}
.pn-notify:before{content: ""; background-image: url(/images/icon.png); background-repeat: no-repeat; background-position: -175px -20px; width: 22px; height: 24px; position: absolute; left: 15px; top: 50%; transform: translateY(-50%)}
.pn-notify:hover{opacity: 1;cursor: pointer}
.pn-notify:not(.active){opacity: 0;visibility: hidden}
.pn-wrapper-question-two .pn-question ul{display: flex;flex-wrap: wrap;text-align: center}
.pn-wrapper-question-two .pn-question ul li{width: 25%}
.pn-wrapper-question-two .pn-question ul li p{margin-bottom: 0}
.pn-wrapper-question-two .pn-group-question{border-bottom: 10px solid #2ad6b5;margin-bottom: 30px}
.pn-group{margin-bottom: 30px}
.pn-group:not(:last-child){border-bottom: 2px solid #ddd}
.pn-group .pn-title{text-align: left;font-size: 18px;line-height: 23px;margin: 0 0 15px 0}
.pn-list-question{border: 1px solid #ddd;border-radius: 5px;margin-bottom: 30px}
.pn-list-question h3{background-color: #ddd;margin: 0;padding: 15px;font-size: 18px;line-height: 23px;border-radius: 5px 5px 0 0}
.pn-list-question h3 span{float: right}
.pn-list-question h3 span strong{display: inline-block;font-weight: normal;font-size: 14px;margin-left: 15px}
.pn-list-question h3 span strong:before{content: "";float: left;width: 14px;height: 14px;margin: 5px;border-radius: 100px}
.pn-list-question h3 span strong:nth-child(1):before{background-color: #2cc8a1}
.pn-list-question h3 span strong:nth-child(2):before{background-color: #c60b1e}
.pn-list-question ul{padding-left: 0}
.pn-wrapper-list-answer{margin-bottom: 30px;list-style: none}
.pn-wrapper-list-answer li{display: flex;padding: 15px 15px 0 15px;flex-wrap: wrap}
.pn-wrapper-list-answer li:not(:last-child){border-bottom: 1px solid #ddd}
.pn-wrapper-list-answer li .pn-item{display: inline-block; margin: 0 30px 15px 0;cursor: pointer}
.pn-wrapper-list-answer li .pn-item.pn-answer-wrong span{background-color: #c60b1e}
.pn-wrapper-list-answer li .pn-item span {display: inline-block;background-color: #2cc8a1;color: #fff;border-radius: 100px;width: 40px;height: 40px;cursor: pointer;font-weight: bold;text-align: center;line-height: 40px}
.pn-popup {background-color: rgba(0,0,0,.6);position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 1000}
.pn-popup:not(.active) {display: none}
.pn-popup .pn-content-popup {background-color: #fff;border-radius: 10px;padding: 20px;width: 50%;margin: 50px auto 0 auto;position: relative}
.pn-popup #pn-close {position: absolute;width: 40px;height: 40px;border-radius: 100px;right: -20px;top: -20px;background-color: #000;transform: rotate(45deg);cursor: pointer}
.pn-popup #pn-close:before, .pn-popup #pn-close:after {content: "";width: 20px;height: 1px;background-color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}
.pn-popup #pn-close:after {width: 1px;height: 20px}
.pn-popup :is(h2,h3){font-size: 16px;line-height: 21px;margin: 0 0 15px 0;padding-bottom: 5px;border-bottom: 1px solid #afdaaf;font-weight: bold}
.pn-popup .pn-item-question > ul{padding-left: 0;list-style: none}
.pn-popup .pn-item-question > ul li{padding: 10px 0;border-bottom: 1px solid #efefef}
.pn-popup .pn-item-question > ul li span {display: inline-block;cursor: pointer;position: relative}
.pn-popup .pn-item-question > ul li span:before {content: "";width: 20px;height: 20px;float: left;border: 1px solid #ddd;margin-right: 10px;border-radius: 100px}
.pn-popup .pn-item-question > ul li span.answer-wrong:before {background-color: #c60b1e;border-color: #c60b1e}
.pn-popup .pn-item-question > ul li span:after {content: "";position: absolute;width: 10px;height: 5px;border-left: 2px solid #fff;border-bottom: 2px solid #fff;left: 5px;transform: rotate(-45deg);top: 6px;display: none}
.pn-popup .pn-item-question > ul li span.answer-wrong:after {display: block;border: none;content: "x";transform: inherit;color: #fff;width: inherit;height: inherit;top: -3px;left: 6px}
.pn-popup .pn-item-question > ul li span.answer-correct:before {background-color: #2cc8a1;border-color: #2cc8a1}
.pn-popup .pn-item-question > ul li span.answer-correct:after {display: block}
.pn-list-character ul{list-style: none;}

@media only screen and (min-width: 992px){
    .pn-sticky{position: sticky;top: 100px}
    .pn-list-character{box-shadow: 0 2px 6px rgba(0,0,0,0.4);background-color: #fff;padding-bottom: 30px;margin-bottom: 30px;border-radius: 10px;overflow: hidden;}
    .pn-list-character .pn-title{font-size: 18px; margin-bottom: 15px; line-height: 21px; background-color: #3a6cd1; color: #fff; padding: 20px;text-align: left;}
    .pn-list-character ul{padding: 0 20px;margin-bottom: 0;}
    .pn-list-character ul li{padding: 5px 0;border-bottom: 1px solid #ccc;}
    .pn-list-character ul a{display: inline-block;vertical-align: top;font-size: 14px;line-height: 19px;}
    .sticky-column{position: sticky;top: 95px;}
}
@media only screen and (max-width: 1199px){
    .pn-banner-top .pn-content strong{font-size: 30px;line-height: 40px}
    .pn-form-search .row [class*='col-']:nth-child(2) label{min-width: 30%}
    .pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-name{font-size: 16px;line-height: 21px}
}
@media only screen and (max-width: 991px){
    .pn-banner-top .container{padding-top: 30px;padding-bottom: 30px;display: flex;align-items: center}
    .pn-form-search{padding: 30px 15px;margin: 0 0 30px 0;border-radius: 10px;box-shadow: none;background-color: #3c6dd2}
    .pn-form-search .row{display: flex;flex-wrap: wrap;align-items: end}
    .pn-form-search .row [class*='col-'] .pn-button:hover{background-color: #2ad6b5}
    .pn-form-search .row [class*='col-']:nth-child(2){display: block}
    .pn-form-search .row [class*='col-']:nth-child(2) label{min-width: initial;width: 100%;margin-bottom: 10px;color: #fff;margin-right: 0;text-align: left}
    .pn-wrapper-list-answer li .pn-item{margin-right: 15px}
    .pn-list-character .pn-title{text-align: left;}
    .pn-list-character ul{padding-left: 0;display: flex;flex-wrap: wrap;margin-bottom: 30px;}
    .pn-list-character ul li{margin: 0 5px 5px 0;}
    .pn-list-character ul li a{display: block;padding: 5px 10px;background-color: #fff;}
    .pn-list-character ul li a:hover{background-color: #3a6cd1; color: #fff;}
}
@media only screen and (max-width: 767px){
    .pn-banner-top .pn-content strong{font-size: 22px;line-height: 27px}
    .pn-popup .pn-content-popup{width: 90%}
}
@media only screen and (max-width: 570px){
    .pn-banner-top .container{padding: 15px;justify-content: center}
    .pn-banner-top .pn-content strong{font-size: 16px;line-height: 21px}
    .pn-form-search .row [class*='col-']{width: 100%;margin-bottom: 15px}
    .pn-free-test .pn-wrapper-item .row [class*='col-']{width: 50%}
    .pn-form-search .row [class*='col-']:nth-child(2) label{text-align: center}
    .pn-wrapper-question ul li{width: 100%}
    .pn-wrapper-question-two .pn-question ul li{width: calc(100% / 3)}
    .pn-wrapper-question .pn-question > h3{font-size: 16px;line-height: 21px}
    .pn-wrapper-question .pn-question > h3 + .pn-wrapper{font-size: 14px;line-height: 24px}
    .pn-popup #pn-close{right: -10px}
}
@media only screen and (max-width: 480px){
    .pn-banner-top .pn-content strong{margin-bottom: 10px}
    .pn-banner-top .pn-content .pn-button{padding: 0;background-color: transparent;color: #2ad6b5;font-size: 14px;border-bottom: 1px solid #2ad6b5;border-radius: 0}
    .pn-free-test .pn-wrapper-item .row [class*='col-']{width: 100%}
    .pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-button{background-color: #2ad6b5;color: #fff}
    .pn-free-test .pn-wrapper-item .row [class*='col-'] .pn-item .pn-button span .arrow-right{color: #fff}
    .pn-wrapper-question .pn-question > p{font-size: 16px}
    .pn-list-question h3{text-align: center}
    .pn-list-question h3 span{float: none;display: block;margin-top: 5px}
    .pn-list-question h3 span strong{margin-left: 0;margin: 0 5px}
}
@media only screen and (max-width: 370px){
    .pn-banner-top .pn-content strong{font-size: 12px;line-height: 17px;margin-bottom: 5px}
    .pn-wrapper-question + .pn-wrapper-button .pn-button{width: 100%;margin-bottom: 5px}
    .pn-wrapper-question-two .pn-question ul li{width: 50%}
    .pn-list-character ul li{width: 100%;}
}