.pn-structure{margin-bottom: 30px}
/**/
.pn-category{background-color: #f5f6f8;border-radius: 30px;overflow: hidden;margin-bottom: 30px}
.pn-category .pn-title{background-color: var(--primary-color);color: #fff;margin-bottom: 0;font-size: 20px;line-height: 30px;padding: 15px 30px;position: relative;overflow: hidden;text-transform: initial}
.pn-category .pn-title:after{content: "";position: absolute;background-image: url('../images/bg-service-fast.jpg');height: 100%;width: 50%;background-position: left center;background-repeat: no-repeat;bottom: 0;right: 0;background-position: 0px -265px}
.pn-category .pn-title span{display: flex;align-items: center;position: relative;z-index: 1;justify-content: center}
.pn-category .pn-title span:before{content: "";float: left;background-image: url('../images/icon.png');background-repeat: no-repeat;background-position: -310px -58px;width: 40px;height: 42px;margin-right: 20px;min-width: 40px}
.pn-category ul{list-style: none;padding: 20px;margin-bottom:0}
.pn-category ul li:not(:last-child){margin-bottom: 10px}
.pn-category ul li a{background-color: #fff;border-radius: 10px;display: block;text-transform: uppercase;line-height: 21px;padding: 19px 15px 20px 15px;text-align: center}
.pn-category ul li.active a{font-weight: bold;color: var(--primary-color)}
/**/
.pn-tabs{list-style: none;padding-left: 0;display: flex;justify-content: space-between;border-radius: 10px;margin: 0 -1px 30px -1px}
.pn-tabs li{width: 50%;padding: 0 1px}
.pn-tabs li:first-child a{border-radius: 10px 0 0 10px;box-shadow: 2px 0 1px #f2f2f3}
.pn-tabs li:last-child a{border-radius: 0 10px 10px 0;box-shadow: -2px 0 1px #f1f1f1}
.pn-tabs li a{display: block;border: 1px solid #ececee;padding: 20px;height: 100%;background-color: #f5f6f8;position: relative;overflow: hidden}
.pn-tabs li a:before{content: "";position: absolute;left: 1px;right: 1px;bottom: 0;height: 1px;background-color: var(--primary-color)}
.pn-tabs li a span{display: flex;font-size: 20px;line-height: 26px;align-items: center;justify-content: center;height: 100%}
.pn-tabs li a span:before{content: "";float: left;background-image: url('../images/icon.png');background-repeat: no-repeat;margin-right: 10px}
.pn-tabs li.pn-tab-post a span:before{width: 26px;height: 26px;background-position: -324px -174px}
.pn-tabs li.pn-tab-list a span:before{width: 29px;height: 29px;background-position: -265px -106px}
.pn-tabs li:not(.active) a span:before{filter: brightness(0); -webkit-filter: brightness(0)}
.pn-tabs li:hover a span:before{filter: initial; -webkit-filter: initial}
.pn-tabs li:not(.active) a:before{display: none}
.pn-tabs li.active a{font-weight: bold;color: var(--primary-color)}
.pn-wrapper-tabs .pn-tab:not(.active){display: none}
/**/
.pn-wrapper-item .pn-item{display: flex;margin-bottom: 30px;align-items: flex-start}
.pn-wrapper-item .pn-item .pn-image{min-width: 180px;width: 180px;border: 1px solid #e1cc90;margin-bottom: 0}
.pn-wrapper-item .pn-item .pn-image img{width: 100%}
.pn-wrapper-item .pn-item .pn-content{padding-left: 30px}
.pn-wrapper-item .pn-item .pn-content .pn-name{display: inline-block;font-weight: bold;margin-bottom: 10px;line-height: 24px;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.pn-wrapper-item .pn-item .pn-content .pn-name + p{margin-bottom: 0;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.pn-wrapper-pagination{text-align: left}
.pn-wrapper-pagination .pagination li{margin: 0 10px 0 0}
/**/
.pn-detail .pn-name-detail{font-size: 24px;line-height: 34px;font-weight: bold;margin: 0 0 10px 0}
.pn-detail .pn-description{margin-bottom: 20px}
.pn-detail .pn-related{padding-top: 20px;border-top: 1px solid #eee}
.pn-detail .pn-related .pn-title{text-align: left;margin-bottom: 10px;font-size: 20px;line-height: 30px;color: var(--primary-color);}
.pn-detail .pn-related .pn-item{margin-bottom: 30px}
.pn-detail .pn-related .pn-item .pn-image{margin-bottom: 10px;border: 1px solid #e1cc90}
.pn-detail .pn-related .pn-item .pn-name{font-weight: bold;display: inline-block;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;line-height: 24px}
.pn-detail .owl-nav{display: flex;justify-content: center;position: absolute;right: 0;top: -30px}
.pn-detail .owl-nav [class*='owl-']{width: 30px;height: 30px;line-height: 30px;border-radius: 100px;background-color: #ddd;font-size: 20px;position: initial;opacity: 1;visibility: visible;margin-left: 10px;color: var(--text-color)}
.pn-detail .owl-nav [class*='owl-']:hover{background-color: var(--primary-color);color: #fff}
.pn-detail .owl-nav .owl-prev{left: -15px}
.pn-detail .owl-nav .owl-next{right: -15px}

@media only screen and (max-width: 1499px){
    .pn-tabs li a{padding: 15px 20px}
    .pn-tabs li a span{font-size: 18px;line-height: 23px}
}
@media only screen and (min-width: 992px){
    .pn-structure .row [class*="col-"]{position: sticky;top: 100px}
}
@media only screen and (max-width: 991px){
    .pn-structure{margin-bottom: 15px}
}
@media only screen and (max-width: 767px){
    .pn-wrapper-item .pn-item .pn-content{padding-left: 20px}
    .pn-tabs li a span{font-size: 16px}
}
@media only screen and (min-width: 681px){
    .pn-detail .table-of-contents{max-width: 60%}
}
@media only screen and (max-width: 480px){
    .pn-tabs{display: block}
    .pn-tabs li{width: 100%;margin-bottom: 10px}
    .pn-tabs li a{box-shadow: none !important;border-radius: 10px !important;font-size: 14px;padding: 10px}
    .pn-wrapper-item .pn-item{margin-bottom: 15px}
    .pn-wrapper-item .pn-item .pn-image{width: 140px;min-width: 140px}
    .pn-wrapper-item .pn-item .pn-content .pn-name{margin-bottom: 5px;font-size: 14px;line-height: 22px}
    .pn-wrapper-pagination{margin-top: 30px}
    .pn-wrapper-item .pn-item .pn-content .pn-name + p{font-size: 13px}
    /**/
    .pn-detail .pn-name-detail{font-size: 18px;line-height: 25px}
    .pn-detail .pn-related .pn-item .pn-name{font-size: 14px;line-height: 22px}
}
@media only screen and (max-width: 370px){
    .pn-wrapper-item .pn-item .pn-image{width: 100px;min-width: 100px}
    .pn-wrapper-item .pn-item .pn-content{padding-left: 15px}
    .pn-wrapper-item .pn-item .pn-content .pn-name{margin-bottom: 0;-webkit-line-clamp: 3;font-size: 13px;line-height: 18px}
    .pn-wrapper-item .pn-item .pn-content .pn-name + p{display: none}
    .pn-tabs li a span:before{transform: scale(0.8)}
}