:root{
    --color: #000;
    --color-title: #1947ba;
    --color-white: #000;
    --color-hover: #1947ba;
    --background-main: #fff;
    --background-main-hover: #1947ba;
    --background-main-hover-color: #fff;
    --background-footer: #1947ba;
    --color-footer: #fff;
    --color-footer-hover: #fff
}
a{color: var(--color);transition: all ease .3s}
a:hover,a:focus{text-decoration:none;color:var(--color-hover)}
body{color: var(--color);background:#fff;line-height:1.5;font-family: "Open Sans", sans-serif;font-size:14px}
body{background-image: url(../images/bg2.png), url(../images/bg.png); background-repeat: no-repeat; background-position: center top, center bottom; background-size: 100% auto; background-attachment: initial;}
strong{font-weight: 700}.pn-wrapper img{max-width:100%;height: auto !important}
.pn-wrapper{margin-bottom: 30px;opacity: 0.8}
.pn-wrapper ul,.pn-wrapper ol{list-style-position: inside}
.pn-wrapper iframe{max-width:100%;margin:15px auto}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{line-height:1.3}
header{background-color: #fff;box-shadow: 0 6px 25px rgba(0,0,0,.2);-moz-box-shadow: 0 6px 25px rgba(0,0,0,.2);-webkit-box-shadow: 0 6px 25px rgba(0,0,0,.2);z-index: 100}
header .header-content{background-color: #fff;z-index: 1000;position: relative}
header .pn-logo{height: 100px; float: left; display: flex; align-items: center; padding: 10px 0}
header .pn-logo img{max-width: 100%;max-height: 100%}
header.fixed .pn-logo{height: 80px}
header .pn-menu ul li a{font-size: 16px;line-height: 21px;display: block}
header .pn-account-desktop{float: right;border-left: 1px solid #f4f4f4;margin: 29.5px 0}
header .pn-account-desktop span{display: inline-block;font-size: 40px;color: var(--color-hover);line-height: 40px;cursor: pointer}
header .pn-account-desktop ul{margin-bottom: 0;list-style: none;padding-left: 0;display: flex;align-items: center}
header .pn-account-desktop ul li .pn-button{font-weight: normal;vertical-align: inherit}
header .pn-account-desktop ul li{margin-left: 20px;position: relative}
header .pn-account-desktop ul li:first-child:not(.pn-logged) .pn-button{background: transparent !important;color: var(--color-hover);padding: 0}
header .pn-account-desktop ul li:first-child:not(.pn-logged) .pn-button:hover,header .pn-account-desktop ul li:first-child:not(.pn-logged) .pn-button:focus{box-shadow: none}
header .pn-account-desktop ul li.pn-logged .fa{margin-left: 5px}
header .pn-account-desktop ul li ul{position: absolute;width: 150px;background-color: #fff;border-radius: 10px;top: calc(100% + 20px);right: 0;display: block;z-index: 10;box-shadow: 0 0 5px rgba(0, 0, 0, .2);padding: 10px}
header .pn-account-desktop ul li:not(.active) ul{display: none}
header .pn-account-desktop ul li ul:after{content: ""; position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #eee; top: -10px; right: 20px}
header .pn-account-desktop ul li ul li{display: block;margin: 0 0 10px 0}
header .pn-account-desktop ul li ul li:not(:last-child){margin-bottom: 10px}
header .pn-wrapper-search{margin: 30px 20px 30px 0;float: right;position: relative}
header .pn-wrapper-search > span{display: flex ; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer;font-size: 15px;background-color: #f4f4f4;border-radius: 100px;transform: rotate(90deg);color: #6c6c6c}
header .pn-wrapper-search .pn-search{position: fixed;width: 100%;z-index: 100;height: 100%;background-color: rgba(0, 0, 0, .8);left: 0;top: 0;text-align: center}
header .pn-wrapper-search .pn-search > div{position: absolute; border: 1px solid #aeaeae; border-radius: 100px; height: 45px; width: 400px; padding-left: 40px; padding-right: 15px;background-color: #fff;left: 50%;top: 50%;z-index: 1;transform: translate(-50%,-50%)}
header .pn-wrapper-search:not(.active) .pn-search{display: none}
header .pn-wrapper-search .pn-search span{color: #fff; position: absolute; left: calc(50% + 240px); top: 50%; transform: translate(-50%, -50%); font-size: 40px; cursor: pointer;display: block}
header .pn-wrapper-search .pn-search > div input{width: 100%; border: none; box-shadow: none; outline: none; background-color: transparent; padding: 0; height: 43px}
header .pn-wrapper-search .pn-search > div input::placeholder{font-style: italic}
header .pn-wrapper-search .pn-search > div button{position: absolute; left: 0; top: 0; background-color: transparent; border: none; padding: 0; font-size: 15px; color: #666; width: 40px; height: 43px; border-radius: 100px;padding-left: 5px}
header .pn-wrapper-search .pn-search > div button .fa{transform: rotate(90deg)}
header.fixed{position:fixed;top:0;width:100%;left:0;z-index:999}
.pn-address:before,.pn-phone:before,.pn-email:before{font-family: 'FontAwesome';margin-right: 5px}
.pn-address:before{content: "\f041"}.pn-phone:before{content: "\f095"}.pn-email:before{content: "\f0e0"}
.pn-image{display: block;text-align: center;overflow: hidden;margin-bottom: 10px;position: relative}
.pn-image img{width: 100%;transition: .3s;-moz-transition: .3s;-webkit-transition: .3s}
.pn-image:hover img{transform: scale(1.2);-moz-transform: scale(1.2);-webkit-transform: scale(1.2)}
.pn-item{margin-bottom: 30px}
.pn-item .pn-name{font-weight: bold;font-size: 16px;line-height: 24px;margin-bottom: 10px;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.pn-button{display: inline-block;vertical-align: top;background: linear-gradient(to bottom, rgba(25,71,186,1) 0%,rgba(1,127,254,1) 100%);color: #fff;font-size: 16px;line-height: 21px;padding: 10px 30px 9px 30px;border-radius: 100px;border: none;text-align: center;max-width: 100%;transition: .3s;font-weight: bold}
.pn-button:hover,.pn-button:focus{box-shadow: 5px 5px 1px rgba(0,0,0,.1);color: var(--background-main-hover-color)}
.pn-title{font-weight:bold;margin:0 0 30px 0;font-size:42px;line-height:52px;color: var(--color-title);position: relative;text-transform: capitalize;text-align: center}
.form-control:focus{box-shadow: none;outline: none}
.form-control{height: 40px;border: none}
textarea.form-control{resize: none}
select.form-control,.form-control::placeholder{color: rgba(0, 0, 0, .8)}
footer{padding: 300px 0 30px 0;color: var(--color-footer);position: relative}
footer:before{background: url('../images/bg.png') no-repeat top;background-size: cover;position: absolute;bottom: 0;left: 0;width: 100%;height: 1558px;z-index: -1}
footer .row [class*='col-']{margin-bottom: 30px}
footer .row [class*='col-'] .pn-title{color: var(--color-footer);text-align: left;font-size: 16px;line-height: 24px;margin-bottom: 15px}
footer .pn-logo-footer{margin-bottom: 30px}
footer ul{list-style: none;padding-left: 0;list-style: none}
footer .pn-info-website li{position: relative;padding-left: 25px}
footer .pn-info-website li .fa{position: absolute;left: 0;top: 2px;width: 20px;text-align: center}
footer .pn-info-website li:is(:nth-child(2),:nth-child(3)) .fa{font-size: 20px}
footer .pn-info-website li strong{display: inline-block;margin-right: 3px}
footer ul li{margin-bottom: 5px}
footer ul li a{color: var(--color-footer)}
footer ul li a:hover{color: var(--color-footer-hover)}
footer .pn-fanpage{margin-bottom: 10px;}
footer .pn-social ul{display: flex;margin-bottom: 0}
footer .pn-social ul li:not(:last-child){margin-right: 15px}
footer .pn-social ul li a{display: inline-block;vertical-align: top;background-image: url('../images/social.png');background-repeat: no-repeat;width: 30px;height: 30px;border-radius: 100px;overflow: hidden;}
footer .pn-social ul li a span{display: none}
footer .pn-social ul li.pn-x a{background-position:  0 0}
footer .pn-social ul li.pn-youtube a{background-position:  0 -30px}
footer .pn-social ul li.pn-google a{background-position:  0 -60px}
footer .pn-social ul li.pn-facebook a{background-color: #0865fe;background-image: initial;display: flex;font-size: 20px;justify-content: center;align-items: center;position: relative;padding-left: 30px}
footer .pn-social ul li.pn-facebook a:before{font-family: "FontAwesome";content: "\f09a";position: absolute; left: 9px; top: 1px}
footer .pn-social ul li.pn-instagram a{background-image: initial;background: linear-gradient(45deg, rgba(255,144,2,1) 0%,rgba(253,1,133,1) 64%,rgba(252,1,204,1) 100%);font-size: 20px; color: #fff;position: relative }
footer .pn-social ul li.pn-instagram a:before{font-family: "FontAwesome";content: "\f16d";color: #fff;position: absolute;position: absolute; left: 6px; top: 1px}
footer .pn-social ul li.pn-pinterest a{background-image: initial;background-color: #e40119;position: relative}
footer .pn-social ul li.pn-pinterest a:before{content: "\f231"; font-family: "FontAwesome"; font-size: 20px; color: #fff;  position: absolute; left: 8px; top: 1px}
@keyframes coccoc-alo-circle-img-anim {
    0% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}
    10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);transform: rotate(-25deg) scale(1) skew(1deg)}
    20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);transform: rotate(25deg) scale(1) skew(1deg)}
    30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);transform: rotate(-25deg) scale(1) skew(1deg)}
    40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);transform: rotate(25deg) scale(1) skew(1deg)}
    50% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}
    100% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}
}
.pn-help{list-style: none;padding-left: 0;position: fixed;z-index: 100;right: 15px;bottom: 0;margin-bottom: 0}
.pn-help li{margin-bottom: 15px}
.pn-help li a{background-image: url('../images/icon.png');background-repeat: no-repeat;width: 50px;height: 50px;min-width: 50px;justify-content: center;align-items: center;animation: coccoc-alo-circle-img-anim 1s infinite;display: block}
.pn-help li.pn-zalo a{background-position: 0 -50px}
.pn-help li.pn-hotline a{background-image: none;background-color: #3eba2e;border-radius: 100px;color: #fff;font-size: 40px;display: flex;align-items: center;justify-content: center;padding-top: 3px}
.pn-help li.pn-hotline a:before{font-family: "FontAwesome";content: "\f095"}
.pn-help li.pn-gotop span{width: 50px; height: 50px; background-color: var(--background-main); display: flex; align-items: center; justify-content: center; border-radius: 100px; font-size: 25px; box-shadow: 0 0 10px rgba(0, 0, 0, .2); cursor: pointer; z-index: 100;display: flex}
.pn-help li.pn-gotop span:hover{background-color: var(--background-main-hover);color: var(--background-main-hover-color)}
.owl-carousel .owl-nav .owl-prev,.owl-carousel .owl-nav .owl-next{border: none;background-color: #fff;width: 40px;height: 40px;display: flex;min-width: 40px;border-radius: 100px;justify-content: center;align-items: center;font-size: 20px;position: absolute;top: 50%;transform: translateY(-50%);box-shadow: 0 0 10px rgba(0,0,0,.15);background-color: #fff;padding: 0;box-shadow: 0 0 5px rgba(0,0,0,.5)}
.owl-carousel .owl-nav button span{background-image: url('../images/control.png');background-repeat: no-repeat;display: flex;align-items: center;justify-content: center;text-indent: -9999px;width: 15px;height: 11px;overflow: hidden}
.owl-carousel .owl-nav .owl-next span{transform: rotate(-180deg)}
.owl-carousel .owl-nav .owl-prev:hover,.owl-carousel .owl-nav .owl-next:hover{background-color: var(--background-main-hover);color: var(--background-main-hover-color)}
.owl-carousel .owl-nav .owl-prev:hover span,.owl-carousel .owl-nav .owl-next:hover span{filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1)}
.owl-carousel .owl-nav .owl-prev{left: 15px}
.owl-carousel .owl-nav .owl-next{right: 15px}
.owl-carousel .owl-dots{text-align: center;margin-top: 20px}
.owl-carousel .owl-dots .owl-dot{width: 12px;height: 12px;min-width: 12px;display: inline-block;border-radius: 50%;background-color: #c2c2c2;transition: width .3s;border: none;margin: 0 10px;padding:0}
.owl-carousel .owl-dots .owl-dot.active{background-color: var(--background-main-hover)}
.owl-carousel .owl-item .owl-lazy{transition: .3s !important}
.pn-banner{position: relative;margin: 0px}
.pn-banner .owl-carousel .owl-dots{padding-top:20px;margin-bottom:70px;margin-top:0;}
.pn-banner .pn-image{margin-bottom: 0}
.pn-banner .pn-image:hover img{transform: initial}
.pn-breacrumb{margin-bottom: 40px}
.pn-breacrumb a .fa{margin-right: 9px}
.pn-breacrumb span{font-weight: bold}
.pn-breacrumb span,.pn-breacrumb a{float: left;font-size: 16px;line-height: 21px}
.pn-breacrumb span:before,.pn-breacrumb a:not(:first-child):before{content: "\f101";font-family: "FontAwesome";float: left;margin: 0 9px 0 5px;font-weight: normal}
.pn-wrapper-pagination{text-align: center} 
.pagination{margin: 0;vertical-align: top}
.pagination li a{color: var(--color);margin: 0 3px}
.pagination>li>a, .pagination>li>span{padding: 0; text-align: center; font-size: 15px; border: 1px solid #676c6f; margin: 0 2px; width: 40px; height: 40px;min-width: 40px; border-radius: 100px !important; display: flex ; align-items: center; justify-content: center}
.pagination>li>a, .pagination>li>span,.pagination>li:hover>a, .pagination>li:hover>span{background-color: #fff}
.pagination li.active a,.pagination li:hover a,.pagination li.active:hover a{background-color: var(--background-main-hover);color: var(--background-main-hover-color);border-color: inherit;border-color: var(--background-main-hover)}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{background-color: transparent;color: var(--color)}
.pn-sticky{position: sticky;top: 100px}
#captcha-field{text-align: center;display: flex;justify-content: center}
#captcha-field .g-recaptcha{display: inline-block;transform: scale(0.8)}
/**/
.pn-thank{text-align: center}.pn-thank .pn-title{margin-bottom: 15px}
.pn-thank .pn-title + p{margin-bottom: 30px}
.pn-thank img{max-width: 100%}
/**/
.pn-policy .pn-title{text-transform: initial}
.pn-policy .pn-wrapper{margin-bottom: 0}
/**/
.table-of-contents{width:100%;background:#e3fafc;border-radius:10px;margin-bottom:30px;font-size:14px;display: none;padding: 15px 30px}
.table-of-contents h3{margin: 0 0 10px 0; font-size: 17px; color: var(--color-hover); text-transform: uppercase; position: relative; line-height: 22px; font-weight: bold}
.table-of-contents h3:hover{cursor:pointer}.table-of-contents h3:after{content: ""; width: 10px; height: 10px; border-top: 2px solid #000; border-right: 2px solid #000; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(135deg); transition: .2s}
.table-of-contents h3.open:after{transform:translateY(-50%) rotate(-45deg)}
.table-of-contents-item ol{margin:0;padding-bottom: 0;padding-left: 15px}.table-of-contents-item ol ol{margin-left:0!important;list-style:n}
.table-of-contents-item ol li{padding:3px 0}.table-of-contents-item ol li a{color:#333;text-decoration:none}
.table-of-contents-item ol li a:hover{text-decoration:underline}
/**/
.pn-cart-global{position: fixed; right: 0; top: 130px; z-index: 100; background: linear-gradient(to bottom, rgba(25, 71, 186, 1) 0%, rgba(1, 127, 254, 1) 100%); border-radius: 5px 0 0 5px; box-shadow: 0 0 5px rgba(0, 0, 0, .2); transition: right .3s;}
.pn-cart-global a{width: 50px; height: 50px;display: flex ; align-items: center; justify-content: center;color: #fff;}
.pn-cart-global a .fa{font-size: 20px;}
.pn-cart-global a span{position: absolute; width: 15px; height: 15px; display: flex ; align-items: center; justify-content: center; top: 7px; background-color: red; color: #fff; border-radius: 100px; right: 4px; font-size: 10px;}
@media only screen and (min-width: 1500px){
    body{font-size: 15px}
    .container{width:1440px}
    header .pn-menu  > ul > li{margin-right: 30px}
    header .pn-menu  > ul > li > a{font-size: 16px;line-height: 23px}
    header .pn-account-desktop > span{display: none}
    .pn-item .pn-name + span{font-size: 15px;line-height: 25px}
}
@media only screen and (max-width: 1499px){
    body{background-size: auto !important;}
    header .pn-menu > ul > li:first-child{display: none}
    header .pn-account-desktop{position: relative;border-left: 0}
    header .pn-account-desktop > ul{position: absolute;background-color: #fff;top: calc(100% + 10px);right: -15px;border: 1px solid #eee;border-radius: 5px;z-index: 2;display: block;width: 150px}
    header .pn-account-desktop > ul:after{content: ""; position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #eee; top: -10px; right: 25px}
    header .pn-account-desktop > ul > li{margin-left: 0;padding: 5px 10px}
    header .pn-account-desktop ul li:first-child:not(.pn-logged) .pn-button:not(:hover){color: var(--color)}
    header .pn-account-desktop > ul > li > a{background: transparent;padding: 0;color: var(--color)}
    header .pn-account-desktop > ul > li > a:hover{background-color: transparent;color: var(--color-hover);box-shadow: none}
    header .pn-account-desktop > ul > li > a .fa{display: none}
    header .pn-account-desktop > ul > li.pn-logged{padding: 0}
    header .pn-account-desktop > ul > li.pn-logged > a{display: block;padding: 5px 10px;border-radius: 0;text-align: left;margin-bottom: 5px;background-color: var(--background-main-hover);color: var(--background-main-hover-color);border-radius: 5px 5px 0 0;}
    header .pn-account-desktop > ul > li.pn-logged ul{display: block;position: initial;padding: 0;margin-bottom: 0;border-radius: 0;right: initial;width: 100%;box-shadow: none}
    header .pn-account-desktop > ul > li.pn-logged ul li{margin-bottom: 0;padding: 5px 10px}
    header .pn-account-desktop:not(.active) > ul{display: none}
    header .pn-account-desktop ul li{display: block}
    header .pn-account-desktop ul li:not(:last-child){padding-bottom: 5px;border-bottom: 1px solid #eee}
    header .pn-account-desktop ul li .pn-button{white-space: nowrap}
    .pn-item .pn-name + span{font-size: 14px;line-height: 24px}
}
@media only screen and (max-width: 1199px){
    .pn-title{font-size: 30px;line-height: 40px}
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    header .pn-menu  > ul > li{margin-right: 25px}
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
    header .pn-menu ul li a{font-size: 14px}
    header .pn-menu  > ul > li{margin-right: 20px}
}
@media only screen and (min-width: 992px){
    #close-menu{display: none}
    header{top: -70px;transition: all ease .5s}
    header .pn-menu{float: right}
    header.fixed .pn-wrapper-search{margin-top: 20px;margin-bottom: 20px}
    header.fixed .pn-account-desktop{margin: 20px 0}
    header .pn-menu > p{display: none}
    header .pn-menu ul{list-style: none;padding-left: 0;margin-bottom: 0}
    header .pn-menu ul li{position: relative}
    header .pn-menu > ul > li{float: left;padding: 39.5px 0}
    header .pn-menu > ul > li.pn-logged{display: none}
    header.fixed .pn-menu > ul > li{padding: 30px 0}
    header .pn-menu > ul > li > .fa{float: left; padding-left: 8px;font-size: 16px;line-height: 21px}
    header .pn-menu > ul > li:hover > a,header .pn-menu > ul > li.active > a,header .pn-menu > ul > li.active > .fa,header .pn-menu > ul > li:hover > .fa{color: var(--color-hover)}
    header .pn-menu > ul > li.active > a{font-weight: bold}
    header .pn-menu > ul > li > a{float: left;text-transform: capitalize}
    header .pn-menu ul li ul{position: absolute;width: 280px;z-index: 10;top: calc(100% + 10px);left: -30px;display: none;box-shadow: 1px 4px 15px rgba(0,0,0,.2);background-color: #fff;padding: 15px;border-radius: 10px;box-shadow: 0 1px 3px -1px rgba(0,0,0,.3),0 2px 5px -1px rgba(50,50,93,.25)}
    header .pn-menu > ul > li:not(:nth-child(6)) ul li{border-bottom: 1px solid #dfdfdf}
    header .pn-menu > ul > li:not(:nth-child(6)) ul li:hover > a{background-color: transparent;color: var(--color-hover)}
    header .pn-menu ul li ul:before{content: "";position: absolute;height: 20px;left: 0;width: 100%;top: -20px}
    header .pn-menu ul li ul:after{content: ""; position: absolute; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #fff; top: -10px; left: 30px}
    header .pn-menu ul li ul li ul:after{display: none;}
    header .pn-menu ul li:hover > ul{display: block}
    header .pn-menu ul li ul li a{padding: 10px 0;border-radius: 10px;font-size: 15px}
    header .pn-menu ul li ul li > span{position: absolute; left: 5px; top: 50%; transform: translateY(-50%);width: 25px;height: 25px}
    header .pn-menu ul li ul li > span img{max-width: 100%;max-height: 100%}
    header .pn-menu ul li ul li > span + a{padding-left: 35px}
    header .pn-menu ul li ul li.pn-parent > .fa{display: block;position: absolute;right: 10px;top: 50%;transform: translateY(-50%)}
    header .pn-menu ul li ul li.pn-parent > a{padding-right: 20px}
    header .pn-menu ul li ul li.pn-parent > .fa:before{content: "\f0da"}
    header .pn-menu > ul > li > ul > li > .fa{display: none}
    header .pn-menu ul li ul li:hover > a,header .pn-menu ul li ul li.active > a{background-color: var(--background-main-hover);color: var(--background-main-hover-color)}
    header .pn-menu ul li ul li:hover > span img{filter: brightness(0) invert(1);-webkit-filter: brightness(0) invert(1)}
    header .pn-menu ul li ul li:hover > .fa{color:var(--background-main-hover-color)}
    header .pn-menu ul li ul li ul{top: 0;left: calc(100% + 15px);border-top-left-radius: 0;border-bottom-left-radius: 0;}
    header .pn-menu ul li ul li:after{content: "";position: absolute;width: 15px;left: 100%;height: 100%;top: 0}
    header .pn-icon-menu{display: none}
    .pn-banner-category{margin-bottom: 60px}
    .show-md{display: none;}
}
@media only screen and (max-width: 991px){
    body{position: relative;}
    .container{width:100%}
    header{position: relative;z-index: 10}
    header .pn-logo{height: 80px}
    body header:before { content: ""; position: fixed; z-index: 1000; left: 0; top: 0; bottom: 0; width: 0; background-color: rgba(0,0,0,.6); }
    body.visible_menu header:before { width: 100%; }
    header .pn-account-desktop{display: none}
    header .pn-wrapper-search{margin-top: 20px;margin-bottom: 20px}
    header .pn-menu{position: fixed;left: -320px;top: 0;bottom: 0;width: 320px;background-color: #f4f4f4;z-index: 1001;transition: all ease .3s;overflow-y: auto;padding-top: 40px}
    header .pn-menu.active{left: 0}
    header .pn-menu > p{margin-bottom: 20px;text-align: center}
    header .pn-menu ul{list-style: none;padding-left: 0;margin-bottom: 0}
    header .pn-menu ul li:not(.active) > ul{display: none}
    header .pn-menu ul li a:before{font-family: "FontAwesome";content: "\f105";float: left;margin-right: 5px}
    header .pn-menu ul li ul li{padding-left: 15px;position: relative;}
    header .pn-menu ul li ul li a:before{content: "-"}
    header .pn-menu ul li{border-top: 1px solid #ddd}
    header .pn-menu ul li > a{padding: 10px 15px}
    header .pn-menu ul li.pn-parent > a{padding-right: 40px}
    header .pn-menu ul li.pn-parent{position: relative}
    header .pn-menu ul li.pn-parent .fa{height: 40px;width: 100%;position: absolute;right: 0;top: 0;cursor: pointer;display: flex;align-items: center;text-align: center;justify-content: right;padding-right: 15px}
    header .pn-menu ul li.active > .fa:before{content: "\f0d8"}
    header .pn-menu ul li ul li > span{display: none}
    header .pn-icon-menu{background-color: transparent;padding: 0; width: auto;height: 45px;width:35px;border: none;border-radius: 5px;float: right;margin: 17.5px 0 17.5px 0}
    header .pn-icon-menu span{display: block;width: 35px;background-color: var(--background-main-hover);height: 2px;margin: 6px 0}
    #close-menu {height: 40px; line-height: 40px; cursor: pointer; font-size: 20px; width: 40px; display: block;position: absolute;text-align: center;top: 0;right: 0}
    .pn-title,.pn-breacrumb{margin-bottom: 30px}
    footer{padding-top: 200px;padding-bottom: 0}
    footer .pn-fanpage{display: none}
    footer .row [class*='col-']:last-child{margin-top: 0 !important;}
    .pn-wrapper :is(h1,h2,h3,h4,h5,h6){font-size: 20px;}
    .owl-carousel .owl-dots .owl-dot{margin:0 5px;}
    .pn-banner .owl-carousel .owl-dots{margin-bottom:30px}
}
@media only screen and (min-width: 768px){
    footer .row [class*='col-']:not(:first-child){margin-top: 80px}
}
@media only screen and (max-width: 767px){
    .pn-title{font-size: 25px;line-height: 35px}
    .pagination{padding: 0;box-shadow: none}
    body{background-image: url(../images/bg2.png);}
    footer{padding: 200px 0 0 0;margin-top: 30px;background: url('../images/bg-footer-mobile.jpg') repeat-x center top #0000a4;}
    footer:before{display: none;}
    footer .row{display: flex;flex-wrap: wrap}
    .pagination>li>a, .pagination>li>span{width: 35px;height: 35px;min-width: 35px;}
}
@media only screen and (max-width: 570px){
    .pn-breacrumb span, .pn-breacrumb a{font-size: 14px}
    header .pn-wrapper-search .pn-search > div{width: 90%}
    header .pn-wrapper-search .pn-search span{top: 10px; transform: initial; left: initial; right: 10px; font-size: 30px}
    footer .row [class*='col-']{width: 100%}
}
@media only screen and (max-width: 480px){
    .pn-title{font-size: 24px;line-height: 34px}
    header.fixed .pn-header .pn-logo{margin: 0;height: 70px}
    header .pn-icon-menu span{width: 30px}
    .pn-wrapper-pagination{margin-top: 15px}
    .pn-training .pn-course{padding-bottom: 15px}
}
@media only screen and (max-width: 370px){
    header .pn-menu{width: 100%;left: -100%}
}