/**
 * Version: 1.0.0
 */
/* CSS responsive for device Tablet */
@media (min-width: 992px) and (max-width: 1024px) {
    .container{max-width:100%}
    .header-logo .line-border{margin-left:-12px}
}
/* CSS responsive for device Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .container{max-width:100%}
    .header-logo .line-border{margin-left:-12px}
    .menu-top .navbar .nav-item{padding-right:12px}
    .menu-top .navbar .nav-item .nav-link{font-size: 12px}

    /* Banner slider */
    .swiper-slide{height: 450px;}
    .swiper-container{height: 450px;}
    .swiper-slide .img{min-height: 450px}
    .swiper-slide .caption{width: 70%; left:15%}

    /* Block intro */
    .block-intro{min-height: 400px;}
    .block-intro .col-img{height: 400px;}
    .block-intro .col-info{padding-top:50px}
    .block-intro .col-info .sapo{overflow: hidden; max-height: 100px}
    /* Block special */
    .block-special{padding-bottom:0px}
    .block-special .item-department{padding:0px}
    .block-special .card .card-title{height: auto;}

    /* Block price calendar */
    .block-price-calendar{padding:15px 0px}

    /* Block news event */
    .block-news-event .col-left{padding-right:15px!important; margin-bottom:30px}
    .block-news-event .news-main{margin-bottom:30px}
    .block-news-event .news-other .box-cover{height: 220px;}
    
    /* Block communication */
    .block-communication .swiper-communication-button-next{right:15px}
    .block-communication .swiper-communication-button-prev{left:15px}

    /* Block department health */
    .block-department-health .feature .media{display: block}
    .block-department-health .feature .media .box-cover{width: 100%; margin-bottom:10px}
    .block-department-health .col-new .feature .cate{margin:10px 0px}
    .block-department-health .col-new .new-other .media-title{overflow: hidden; max-height: 100px}
    .block-department-health .col-new .new-other .box-cover{width: 150px; height: 115px;}

    /* Block feedback */
    .block-feedback{margin-top:30px}
    .block-feedback .container{height: 550px;}

    /* menu footer */
    .footer .footer-nav{padding-top:20px}
    .footer .footer-nav .nav-item{width: 30%}
    .footer .footer-nav .nav-link{line-height: 40px}
    .footer .footer-bottom{height: auto; padding-bottom:20px}

    /* page intro */
    .block-intro-other .nav-pills .nav-item{width: 45%; margin-right:0px; margin-left:4%; margin-bottom:10px}
    .page-intro.block-intro-other .tab-content .cover{width: 100%}
    .page-intro.block-intro .box-cover .cover{min-height: auto}

    /* Page chart */
    .block-organizational-chart{padding:20px 0px}
    .block-organizational-chart .block-body img{width: 100%; height: auto;}
    .block-staffing .header-sapo{padding:0px}
    .block-staffing .nav-pills .nav-item{width: 45%; margin-bottom:10px; margin-left:2%; margin-right:2%}
    .block-staffing .card-staffing .box-cover{height: 160px;}
    .block-staffing .card-staffing .card-title{height: 55px; overflow: hidden; line-height: 27px}

    /* Page department */
    .block-department{padding:0px}

    /* Page content */
    .page-content{padding:20px 0px}
    .page-content .content img{width: 100%; margin-left:0px!important}

    /* Page gallery */
    .content-slider .detailImageGallery{height: 270px!important;}
    .content-slider .detailImageGallery .item-image{line-height: 270px}
    .content-slider .lSPager li{height: 85px;}
    .content-slider .detailImageGallery .cover{max-height: 300px}
}

 /* CSS responsive for all device mobile */
@media (min-width: 300px) and (max-width: 767px) {
    /* header top */
    .header-top .hotline-text{font-size: 13px}
    /*.header-top .xs-display{width: 250px; overflow-y: scroll; height: 40px;}*/
    .header-top .btn-group .btn{padding-left:0px; box-shadow: none}
    .header-top .btn-group .btn i{font-size: 28px}
    /* header logo */
    .header-logo{overflow: inherit}
    .header-logo .logo-text .logo-title{font-size: 20px}
    /* global */
    .block-title{font-size:22px}
    /* slider */
    .swiper-slide{height: 220px;}
    .swiper-container{height: 220px;}
    .swiper-slide .img{min-height: 220px}
    .swiper-button-next, .swiper-button-prev{width: 50px; height: 50px; background: transparent!important; outline: none}
    .swiper-button-next i, .swiper-button-prev i{line-height: 50px; color: #00aeef; font-size: 50px}
    .swiper-slide .caption{width: 90%; left:5%; top:9%; bottom:9%; background: rgba(255,255,255,0.6)}
    .swiper-slide .caption .title{font-size: 18px; height: 55px; overflow: hidden;}
    .swiper-slide .caption .sapo{height: 40px; overflow: hidden;}
    /* Block intro */
    .block-intro .col-img{height: 300px;}
    .block-intro .col-img img{left:0; width: 100%}
    .block-intro .col-info{padding-top:20px; padding-left:15px!important}
    .block-intro .col-info .title{text-align: center; font-size:22px}
    .block-intro .col-info .slogan{text-align: center; margin-top:10px}
    .block-intro .col-info .sapo{font-size: 18px; line-height: 25px}
    .block-intro .col-info .btn-detail{margin-bottom:20px}
    .block-intro .col-info .nav .nav-link{width: 50%}
    /* Block special */
    .block-special .item-department{padding:0px}
    .block-special .card .card-title{max-height: inherit;}
    .block-special .card .card-text{font-size: 18px; max-height: 85px}
    .block-special .card .card-title-small{font-size: 11px; font-weight: 500; margin-top:-7px}
    /* Block price calendar */
    .block-price-calendar{padding:15px 0px}
    .block-price-calendar .block-title{font-size: 28px}
    .block-price-calendar .sapo{font-size: 18px}
    /* Block news event */
    .block-news-event .col-left{padding-right:15px!important; margin-bottom: 15px}
    .block-news-event .col-left .box-cover{height: 350px;}
    .block-news-event .col-left .box-cover .cover{min-height: 350px}
    .block-news-event .col-left .box-cover .caption{background-color: rgba(47,166,254,0.8);}
    .block-news-event .col-left .box-cover .caption .title{max-height: 55px; margin-bottom:5px}
    .block-news-event .col-left .box-cover .caption .sapo{max-height: 75px}
    .block-news-event .news-main{padding-left:0px}
    .block-news-event .news-main .box-cover{width: 100%; margin-bottom: 10px}
    .block-news-event .news-other{padding-left:0px}
    /* Block gallery */
    .block-gallery .box-cover{margin-bottom:15px}
    /* Block communication */
    .block-communication .swiper-communication-slide{height: 270px;}
    .block-communication .swiper-communication-button-next, 
    .block-communication .swiper-communication-button-prev{height: 40px; width:40px; top:38%}
    .block-communication .swiper-communication-button-next i, 
    .block-communication .swiper-communication-button-prev i{line-height: 40px}
    .block-communication .swiper-communication-button-next{right:0px}
    .block-communication .swiper-communication-button-next{right:20px}
    .block-communication .swiper-communication-button-prev{left:20px}
    .block-communication .card .box-cover{height: 120px;}
    /* Block department health */
    .block-department-health .col-new .new-header{margin-top:25px}
    .block-department-health .col-new .feature .media{display: block}
    .block-department-health .col-new .feature .cate{margin:10px 0px}
    .block-department-health .col-new .new-other .box-cover{width:145px; height: 112px;}
    .block-department-health .col-new .new-other .media-title{overflow: hidden; height: 100px;}
    .block-department-health .col-new .feature .box-cover{width: 100%}
    /* Block feedback */
    .block-feedback{margin-top:30px}
    .block-feedback .container{height: 550px;}
    /* menu footer */
    .footer .footer-nav{padding-top:20px}
    .footer .footer-nav .nav-item{width: 50%}
    .footer .footer-nav .nav-link{line-height: 40px}
    .footer .footer-bottom{height: auto; padding-bottom:20px}

    /* page intro */
    .page-intro{padding:30px 0px}
    .page-intro.block-intro .box-cover{height: 236px; width: 100%; margin-bottom:15px}
    .page-intro.block-intro .box-cover .cover{min-height: auto}
    .page-intro.block-intro .box-info .content p{font-size: 18px; line-height: 25px}
    .page-intro.block-intro-other{padding:20px 0px}
    .page-intro.block-intro-other .nav-pills .nav-item{width: 100%; margin-bottom:7px; margin-right:0px}
    .page-intro.block-intro-other .tab-content .cover{width: 100%}

    /* Page chart */
    .block-organizational-chart{padding:20px 0px}
    .block-organizational-chart .block-body img{width: 100%; height: auto;}
    .block-staffing .header-sapo{padding:0px}
    .block-staffing .nav-pills .nav-item{width: 100%; margin-bottom:7px; margin-right:0px}
    .block-staffing .card-staffing .box-cover{height: 160px;}
    .block-staffing .card-staffing .card-title{height: 55px; overflow: hidden; line-height: 27px}

    /* Page department */
    .block-department{padding:0px}
    .block-department .col-left{padding-right:15px!important}
    .block-department .col-left .btn-menu-department{width: 100%; border-radius:0px; background: #0084da; line-height: 40px; box-shadow: none!important; margin-bottom:5px}
    .block-department .col-left .btn-menu-department .fa{font-size: 30px; line-height: 38px; display: none}
    .block-department .col-left .btn-menu-department[aria-expanded="false"] .fa-angle-down{display: block}
    .block-department .col-left .btn-menu-department[aria-expanded="true"] .fa-angle-up{display: block}
    .block-department #menuDepartment .card-body{height: 350px; overflow-y: scroll; border-radius:0px}
    .block-department .col-left .list-group .list-group-item{border-radius:0px!important}
    .block-department .col-right{padding-left:15px}
    .block-department .col-right .header-title{margin-top:20px}

    /* Page price  */
    .block-price{padding:20px 0px}
    .block-price .block-slogan{margin:10px 0px 0px 0px}
    .block-price .item-price{height: auto; padding:20px; margin-bottom:15px}
    .block-price .item-price .title{font-size: 18px; padding:0px; overflow: hidden; max-height: 110px}
    .block-price-detail{padding-top:10px}
    .block-price-detail .col-left{padding-right:15px}
    .block-price-detail .price-title{font-size: 30px; line-height: 40px}
    .block-price-detail .control-social{width: 100%; margin-top:10px}
    .block-price-detail .col-right{padding-left:15px}
    .block-price-detail .col-right .card-header{margin-top:20px}

    /* Page content */
    .page-content{padding:20px 0px}
    .page-content .content img{width: 100%; margin-left:0px!important}

    /* Page calendar */
    .block-calendar{padding:0px}
    .card-calendar .date{bottom:2px}
    .card-news-new .media-title{font-size: 18px}

    /* Page news */
    .block-list-news{padding:0px}
    .block-list-news .card-news .card-title{font-size: 18px; line-height: 28px; height: auto;}
    .block-list-news .card-news .box-cover{height: calc(100vw / 1.8);}
    .block-list-news .card-news .card-text{font-size: 18px; height: auto;}
    .card-tags{margin-bottom:20px}
    .block-news-detail{padding:0px}

    /* Page gallery */
    .content-slider .detailImageGallery{height: 230px!important;}
    .content-slider .detailImageGallery .item-image{line-height: 230px}
    .content-slider .lSPager li{height: 85px;}
    .content-slider .detailImageGallery .cover{max-height: 300px}

    /* Page contact */
    .block-contact{padding:0px}
    .block-contact .iframe-maps iframe{height: 250px;}
    .block-contact .info{padding-top:40px; padding-bottom:40px}
    .block-contact .info .col-phone-email{padding:15px!important}
    .block-contact .contact-form form{margin-top:20px}

    /* Page survey */
    .block-survey{padding:20px 0px}
    .block-survey .card-columns{column-count: 1}
    .block-survey .card-columns .card{margin-bottom:15px}
    .contact-form .contact-form-header{font-size: 28px}
    .contact-form .contact-form-note{margin-bottom:20px}
    .contact-form .contact-form-rating i{font-size: 32px}

    /* Page detail chart */
    .block-employee-detail{padding:0px}
    .block-employee-detail .box-cover{margin-bottom:20px}
    .block-employee-detail .list-info{font-size:18px}
    .block-employee-detail .employee-title{margin-top:30px}

    /* Control button right */
    .control-button-right.w-20{width: 95px}
    .control-button-right.w-20 .btn-group-vertical{width: 100%}
    .control-button-right.wm{width: 25px}
    .control-button-right.wm .btn-group-vertical{width: 0px; overflow: hidden;}
    .control-button-right .dropdown-menu{width: 270px}
    .control-button-right .dropdown-menu .text-please-call{padding:0px 15px}
    .control-button-right .dropdown-menu .number-115{font-size:50px}
    .control-button-right .dropdown-menu .call-other{padding:20px}
    .control-button-right .dropdown-menu .phone-number{font-size: 22px}
    .control-button-right .dropdown-menu .text-address {padding: 0px 20px 10px 20px;}
    .control-button-right .dropdown-menu .iframe-maps{height: 250px;}
    .control-button-right .btn-toggle{width: 25px; height: 25px; padding:0px; margin:0px}  

    /* poup covid */
    .poup-covid{width: 200px; height: 200px;}
}

/* CSS responsive other device mobile */
@media (min-width: 300px) and (max-width: 359px) {
    /* Header top */
    .header-top .hotline-icon{padding: 5px 12px}
    .header-top .hotline-text{font-size: 11px}
    /* Header logo */
    .header-logo{height: 100px;}
    .header-logo .logo-img{width: 90px}
    .header-logo .logo-img img{width: 100%}
    .header-logo .logo-text{margin-left:100px}
    .header-logo .logo-text .logo-title{font-size: 18px}
    .header-logo .logo-text .slogan{font-size: 10px}
    /* Block intro */
    .block-intro .col-img{height: 270px;}
    .block-intro .col-info .sapo{font-size: 16px}
    .block-intro .col-info .nav .nav-link{font-size: 11px}
    /* Block special */
    .block-special{padding-bottom:0px}
    .block-special .card .img{height: 90px;}
    .block-special .card .card-title{font-size: 15px}
    .block-special .card .card-text{font-size: 16px; max-height: 75px}
    /* Block price calendar */
    .block-price-calendar .col-price,.block-price-calendar .col-procedure,.block-price-calendar .col-calendar{padding:20px}
    .block-price-calendar .block-title{font-size: 25px}
    /* Block gallery */
    .block-gallery .box-cover{height: 200px;}
    .block-gallery .box-cover .cover{min-height: 200px}
    .block-gallery .item-gallery .group-img-hover .box-cover{height: 80px; width: 80px}
    /* Block department health */
    .block-department-health .col-new .new-other .box-cover{width: 120px; height: 93px;}
    .block-department-health .col-new .new-other .media-title{height: 75px;}
    /* menu footer */
    .footer .footer-nav{padding-top:20px}
    .footer .footer-nav .nav-item{width: 50%}
    .footer .footer-nav .nav-link{line-height: 30px; font-size: 12px; padding:0px}
    .footer .footer-bottom{height: auto; padding-bottom:20px; font-size: 13px}

    /* Page news detail */
    .block-news-detail .news-title{font-size: 25px}
    /* Page chart */
    .block-staffing .card-staffing .box-cover{height: 138px;}
    .block-staffing .card-staffing .card-title{font-size: 18px}
    /* Page price detail */
    .block-price-detail .price-title{font-size: 25px}
    /* Page news */
    .block-list-news .card-news .card-title{font-size: 14px; line-height: 20px; height: auto;}
    .block-list-news .card-news .box-cover{height: 100px;}
    .block-list-news .card-news .card-text{font-size: 14px}
    .card-news-new .media-title{font-size: 16px}

    /* poup covid */
    .poup-covid{width: 200px; height: 200px;}
}