/* Responsive */

@media (max-width: 1024px){
    .bgswiper .swiper-button-prev{left: -12px;}
    .bgswiper .swiper-button-next{right: -12px;} 

    .grid-news,.grid-product,.album-destop{ gap: 10px; }  

    .menu ul li a { padding: 12px 14px 8px;}

    .banner-header { width: 500px;}
    .btn-header a {font-size: 20px;}
    .btn-header-icon {height: 50px;width: 50px !important;} 

    /* giới thiệu */  
    .aboutus-left {width: 50%;} 
    .aboutus-right {width:calc(50% - 10px);} 
    .title-aboutus {padding-left: 10px;}
    .title-aboutus h2{font-size: 28px;}
    .image2-aboutus { width: 50%;margin: -30% 0 0 -15%; padding: 5px;}
    .decor-aboutus{font-size: 75px;}
    .title-aboutus::before {width: 1px;}
    
    /* tiêu chí */
    .wrap-criteria .title-main .slogan {width: 100%;}
    
    /* News Detail */ 
    .item-news:hover {}  
    .info-news { width: 100%;padding: 15px;} 
    .info-news h3 {font: 700 14px / 1.25 var(--fontmain);} 
    .info-news p {font: 400 13px / 1.5 var(--fontmain); } 

    .top-info-news{margin: -18% 0px 20px;}
    .slogan-news{color:var(--main);font: 600 13px / 1.25 var(--fontmain);}
    .view-news{position: relative;padding-left: 5px;} 
    .view-news::after{top: calc(50% - 3px / 2);border-radius: 50%;width: 3px;height: 3px;}  
    .view-news span{font: 400 12px / 1.25 var(--fontmain);margin-bottom: 5px;}
    .news-time{width: 52px;height: 62px;margin-right: -10px;border-radius: 3px;}
    .news-time span:first-child{font-size: 30px; margin-bottom: 0px;}
    .news-time span{font: 400 14px / 1.25 var(--fontmain);} 

    /* footer  */
    .footer1-news{width: 100%;margin-bottom: 1rem;} 
    .footer2-news{width: calc(50% - 12px);margin-bottom: 1rem;}
    .footer3-news{width: calc(25% - 12px);margin-bottom: 1rem;} 
    .footer4-news{width: calc(25% - 12px);margin-bottom: 1rem;} 
    .logo-footer{}
    .title-footer {font-size: 16px}
}
@media (max-width: 1001px){
    .menu-res{display:block !important;}
    #hamburger { display: block; } 
    .mb-none { display: none !important; } 
    .mb-block { display: block !important; } 
 
    .scrollToTop { bottom: 80px; right: 10px; } 
    footer { margin-bottom: 50px; } 

    .header-top .wrap-content{flex-wrap: wrap;}
}
@media (max-width: 850px){ 
    .mgb-res{ margin-bottom: 30px; }
    .title-main h1,.title-main h2,.title-main span {}
    .title-main .slogan-text{}
    .title-detail h1,.title-detail h2,.title-detail span {} 
    
    /* header */ 
    .banner-header {width: 400px;}

    /* giới thiệu */  
    .aboutus-left {width: 100%;margin-bottom: 1rem;} 
    .aboutus-right {width: 80%;margin: auto;}   
    .decor-aboutus {right: 10%;bottom: 5%;}
    .title-aboutus h2 {font-size: 32px;}

    /* đăng ký */
    .wr-newsletter {width: 60%; }

    /* Dịch vụ */    
    .img-service rect{stroke-width:2px;}
    .item-service:hover .img-service rect{stroke-width:2px;} 
    .ds-service {padding: 20px 15px;}
    .name-service{display: flex;align-items: center;gap: 7px;margin-bottom: 10px;}
    .name-service span{width: 45px !important;height: 45px;border: 1px solid var(--main2);font: 900 25px / 1.25 var(--fontmain);} 
    .ds-service h3 {width: calc(100% - 30px - 7px);font: 700 20px / 1.25 var(--fontmain);}
    .ds-service p {font: 400 14px / 1.75 var(--fontmain);color: white;margin-bottom: 1rem;}  
    .btn-service{padding: 8px 16px 6px;border: 1px solid var(--bg2);}   

    /* News Detail */ 
    .item-news {margin: 2px;border-radius: 10px;}  
    .img-news .scale-img{border-radius: 10px 10px 0 0;} 
    .top-info-news{margin: -18% 0px 10px;}
    .slogan-news{color:var(--main);font: 600 12px / 1.25 var(--fontmain);}
    .view-news{display: none;} 
    .view-news::after{display: none;}  
    .view-news span{font: 400 10px / 1.25 var(--fontmain);}
    .news-time{width: 45px;height: 50px;}
    .news-time span:first-child{font-size: 23px; margin-bottom: 2px;}
    .news-time span{font: 400 12px / 1.25 var(--fontmain);} 

    .name-fanpage {font: 700 clamp(20px, 3.5vw, 22px) / 1.25 var(--fontmain); }

    /* footer */
}
@media (max-width: 768px) {   
    .grid-news,.grid-product  {display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }  
    .header-top .wrap-content {justify-content: center;}
    .btn-header{display: none;}
    /* sản phẩm */   

    /* tin tức */
     
    /* giới thiệu */   
    
    
    .name-prolist a {
    font: 700 16px / 1.5 var(--fontmain);}

    /* Video */
    .video-left{width: 100%;margin-bottom: 1rem;}
    .video-right{width: 68%;margin: auto;}

    /* tiêu chí */
    .criteria{gap: 10px;}

    /* đăng ký */
    .wrap-form::before { 
    background: linear-gradient(0deg, transparent 0%, var(--main3) 100%);}
    .wr-newsletter {width: 70%;margin: auto; }

    /* footer  */
    .footer1-news, .footer2-news{width: 100%;}  
    .footer3-news,.footer4-news{width: calc(50% - 12px);}  
} 
@media (max-width: 700px){
 
    .slideshow .bgswiper .swiper-button-prev, .quangcao .bgswiper .swiper-button-prev,
    .slideshow .bgswiper .swiper-button-next, .quangcao .bgswiper .swiper-button-next,
    .slideshow .bgswiper .swiper-pagination, .quangcao .bgswiper .swiper-pagination{display: none;}

    .tabs-pro-detail .nav-tabs .nav-link{border-top-width: 2px;padding: .25rem 0.5rem;}  
    .grid-product, .grid-news { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; } 

    /* giới thiệu */
    .aboutus-left {width: 100%;margin-bottom: 1rem;} 
    .aboutus-right {width:100%;}
    .image2-aboutus { margin: -30% 0 0 -15px;padding: 2px;}
    .decor-aboutus {right: 15px;bottom: 20px;font-size: 40px;}
    .title-aboutus h2 {font-size: 25px;letter-spacing: -0.5px;}

    .criteria::before,.criteria::after{display: none;}   

    .criteria{padding: 0;}

    /* Video */ 
    .video-right{width: 100%;}

    .wr-newsletter {width: 100%; }

    .top-info-news {margin: -15% 0px 10px;}

    .name-service {margin-bottom: 0px;}
    .ds-service {padding: 15px 10px;}
    .name-service span {display: none;}
    .ds-service h3 {width: 100%;font: 900 16px / 1.5 var(--fontmain);}
    .ds-service p {font: 400 13px / 1.5 var(--fontmain); margin-bottom: 10px;}
    .btn-service {padding: 6px 14px 4px; }
    
    /* footer  */
    .footer1-news,.footer2-news{width: 100%;} 
    .footer3-news{width: 60%;}
    .footer4-news{width: 40%;}    
    .logo-footer{margin-left: 0;}
}
@media (max-width: 369px) { }