.pn-wrapper-item .row{display: flex;flex-wrap: wrap}
.pn-wrapper-item .row [class*='col-'] .pn-item .pn-image{border-radius: 10px}
.pn-wrapper-item .row [class*='col-'] .pn-item .pn-name{margin-bottom: 5px}
.pn-wrapper-item .row [class*='col-'] .pn-item .pn-update{display: block;margin-bottom: 5px;color: rgba(0,0,0,.8)}
.pn-wrapper-item .row [class*='col-'] .pn-item .pn-update:before{font-family: "FontAwesome";content: "\f133";margin-right: 5px}
.pn-wrapper-item .row [class*='col-'] .pn-item p{margin-bottom: 0;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.pn-wrapper-pagination{margin-top: 30px}
.pn-form{background: linear-gradient(to bottom, rgba(5,4,230,1) 2%,rgba(20,162,252,1) 51%,rgba(0,0,150,1) 100%);box-shadow: 0 0 1px #8ea7de;padding: 25px 20px 30px 20px;border-radius: 10px;position: relative;z-index: 1;margin-bottom: 90px}
.pn-form:before{content: ""; position: absolute; top: -85px; right: 0; background-image: url('../images/328x385.png'); background-repeat: no-repeat; width: 228px; height: 270px; background-size: contain; transform: rotate(15deg); z-index: -1}
.pn-form:after{content: "";position: absolute;left: 0;bottom: -55px;background-image: url('../images/flower.png');background-repeat: no-repeat;width: 118px;height: 95px}
.pn-form .pn-title{color: #fff;font-size: 24px;line-height: 34px;margin-bottom: 20px;text-align: left}
.pn-form .form-control{margin-bottom: 10px}
.pn-form .pn-button{padding-left: 65px;padding-right: 65px;color: #1947ba;background: linear-gradient(to bottom, rgba(12, 146, 253, 1) 0%, rgba(59, 250, 253, 1) 100%);margin-top: 20px}
.pn-outstanding{margin-bottom: 120px}
.pn-outstanding .pn-title{text-align: left;text-transform: initial;font-size: 26px;line-height: 36px;color: var(--color)}
.pn-outstanding .pn-title span{display: inline-block;border-bottom: 2px solid var(--background-main-hover)}
.pn-outstanding .pn-wrapper-item .pn-item{display: flex;flex-wrap: wrap;margin-bottom: 20px;width: 100%}
.pn-outstanding .pn-wrapper-item .pn-item .pn-image{margin-bottom: 0;width: 160px;min-width: 160px;border-radius: 10px}
.pn-outstanding .pn-wrapper-item .pn-item .pn-content{width: calc(100% - 160px);padding-left: 20px}
.pn-outstanding .pn-wrapper-item .pn-item .pn-content .pn-update{display: block;color: rgba(0,0,0,.8)}
.pn-outstanding .pn-wrapper-item .pn-item .pn-content .pn-update:before{font-family: "FontAwesome";content: "\f133";margin-right: 5px}
.pn-detail .pn-name-detail{color: var(--color-hover);font-size: 26px;line-height: 36px;margin: 0 0 10px 0;font-weight: bold}
.pn-detail .pn-description{margin-bottom: 25px;font-size: 16px;line-height: 24px}
.pn-related{position: relative}
.pn-detail .pn-image-full{margin-bottom: 30px;text-align: center}
.pn-detail .pn-image-full img{max-width: 100%}
.table-of-contents{width: 50%}
.table-of-contents h3:after{content: "\f03a";font-family: "FontAwesome";color: var(--color);transform: none;border: none;width: auto;height: auto;font-weight: normal;top: 0}
.table-of-contents h3.open:after{transform: initial}
/**/
.pn-course .pn-title{text-align: left;font-size: 24px; line-height: 34px;padding-right: 80px}
.pn-course .pn-item .pn-image{border-radius: 10px}
.pn-course .pn-item .pn-name{margin-bottom: 5px}
.pn-course .pn-item .pn-update{display: block;margin-bottom: 5px;color: rgba(0,0,0,.8)}
.pn-course .pn-item .pn-update:before{font-family: "FontAwesome";content: "\f133";margin-right: 5px}
.pn-course .pn-item p{margin-bottom: 0;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.pn-course .owl-carousel .owl-nav button{position: initial;transform: none;width: 30px;height: 30px;min-width: 30px;margin-left: 10px;}
.pn-course .owl-carousel .owl-nav{position: absolute;right: 0;top: -62px;display: flex;}
@media only screen and (max-width: 1199px){
    .pn-form:before{display: none;transform: initial;}
    .pn-outstanding{margin-bottom: 30px;}
    .pn-outstanding .pn-wrapper-item .pn-item .pn-image{width: 120px;min-width: 120px}
    .pn-outstanding .pn-wrapper-item .pn-item .pn-content{width: calc(100% - 120px);}
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
    .pn-outstanding .pn-wrapper-item .pn-item .pn-content{padding-left: 15px;}
    .pn-outstanding .pn-wrapper-item .pn-item .pn-content .pn-name{font-size: 14px;line-height: 22px;margin-bottom: 5px;}
}
@media only screen and (max-width: 991px){
    .pn-outstanding{margin-bottom: 0;}
    .pn-outstanding .owl-carousel .pn-item{display: block;}
    .pn-outstanding .owl-carousel .pn-item .pn-image{width: 100%;min-width: 100%;margin-bottom: 10px}
    .pn-outstanding .owl-carousel .pn-item .pn-content{padding-left: 0;width: 100%;min-width: 100%;}
    .pn-outstanding .owl-carousel .pn-item .pn-content .pn-name{margin-bottom: 5px;}
    .pn-outstanding .owl-carousel .owl-nav{position: absolute;right: 0;top: -62px;display: flex;}
    .pn-outstanding .owl-carousel .owl-nav button{position: initial;transform: none;width: 30px;height: 30px;min-width: 30px;margin-left: 10px;}
    .pn-form{margin-top: 0}
}
@media only screen and (max-width: 767px){
    .pn-detail .pn-name-detail{font-size: 22px;line-height: 27px}
    .pn-related .pn-item{margin-bottom: 0}
    .table-of-contents{width: 100%;}
}
@media only screen and (max-width: 680px){
    .pn-course .pn-title{padding-right: 0}
    .pn-course .owl-carousel .owl-dots{margin: 0 0 30px 0}
}
@media only screen and (max-width: 570px){
    .pn-wrapper-item .row{margin: 0 -8px}
    .pn-wrapper-item .row [class*='col-']{width: 50%;padding: 0 8px}
    .pn-form{margin-bottom: 0}
    .pn-form .pn-title{font-size: 20px;line-height: 30px}
    .pn-detail .pn-name-detail{font-size: 20px}
}
@media only screen and (max-width: 480px){
    .pn-form:after{display: none}
    .pn-form .pn-button{width: 100%}
    .pn-detail .pn-description{font-size: 14px}
    .pn-outstanding .pn-title{font-size: 20px;}
    .pn-course .pn-title{font-size: 20px;line-height: 30px}
}
@media only screen and (max-width: 370px){
    .pn-wrapper-item .row [class*='col-']{width: 100%}
    .pn-form .pn-button{padding-left: 10px;padding-right: 10px;}
}