.pn-video .row{display: flex;flex-wrap: wrap}
.pn-video .pn-item{cursor: pointer;text-align: center;margin-bottom: 30px;position: relative}
.pn-video .pn-item:after{content: "";position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.4)}
.pn-video .pn-item img{max-width: 100%}
.pn-video .pn-item:before{content: "\f04b"; font-family: "FontAwesome"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80px; aspect-ratio: 1; border: 5px solid #fff; border-radius: 100%; z-index: 1; color: #fff; font-size: 40px; display: flex; align-items: center; justify-content: center; padding-left: 10px;transition: all ease .3s;overflow: hidden}
.pn-video .pn-item:hover:before{background-color: #e4002b;color: #fff}
.modal-body{display: flex}
.modal-dialog{width: 80%}
.modal-header{padding: 0;border-bottom: none;min-height: inherit}
.modal-header button{width: 40px;aspect-ratio: 1;position: absolute;right: -20px;top: -20px;background-color: #e4002b;opacity: 1;border-radius: 100%;color: #fff;font-size: 35px;padding-bottom: 2px;z-index: 1}
.modal-header button:hover{opacity: 1;color: #fff}
.modal-dialog .modal-body > *{width: 100% !important;aspect-ratio: 16/9 !important;height: auto !important}
/**/
body.bodyLang_vi .pn-video .pn-item:before{font-size: 37px;}
body.bodyLang_vi .modal-header button{font-size: 32px}
@media only screen and (max-width: 991px){
    .pn-video .pn-item:before{width: 70px;font-size: 30px}
}
@media only screen and (max-width: 767px){
    .modal.in .modal-dialog{margin: 50px auto}
    .pn-video .pn-item:before{width: 60px;font-size: 25px}
}
@media only screen and (max-width: 570px){
    .pn-video .pn-item{margin-bottom: 15px}
}