@media screen and (max-width:576px){
    /* Modal map */
    .modal-frame .frame{
        max-width: calc(100% - 15px);
    }
    /* End Modal map */
}
@media screen and (max-width:768px){
    *{
        font-size: 12px;
    }
    .container{padding:0px 15px !important;}
    /* Modal search */
    #modal-search .content{
        width: 100%;
    }
    /* End Modal Search */

    /* Modal map */
    .modal-frame .frame{
        max-width: 600px;
    }
    /* End Modal map */

    /* Header*/
    .chaychu>.top{font-size:18px}
    /* End Header */

    /* Article*/
    .article{flex-direction: column;gap: 10px;}
    .article .thumb,.article .content{width:100%;}
    /* End Article */

    /* Index */
    
    .slider{margin-top:0;}
    .area-about,.area-news,.area-booking,section.area-product,.area-quytrinh,.area-service
    {padding:20px 0px;}
    .area-news .left,.area-news .right{padding:20px 15px;}
    .area-news .right{padding-bottom:0px;}

    .aboutic span.count,.aboutic .content>p:nth-child(1){font-size: 16px;}
    .aboutic>.content>h3{font-size:13px;}
    .aboutic>.content>p:nth-child(1)::after{width: 30px;left:50%;transform: translateX(-50%);}
    .aboutic{flex-wrap: wrap}
    .aboutic .content{width:100%;text-align: center;}
    .aboutic .thumb{margin-left: auto;margin-right: auto;}

    .area-category{padding-bottom: 20px;}
    .category h3{font-size:16px}
    .category .right{display:none;}
    .category .left{padding:5px 10px;}
    .owl-carousel.in-number .numb-dot{
        font-size:13px;
        width: 16px;
        height: 16px;
    }
    .area-partner {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom:0;
    }
    
    .box-booking::before{
        top: 10px;
    }
    .borleft{border-left: 0px;}
    .box-footer{
        margin-top:-60px;
        padding: 20px;
    }
    .booking-form a.submit_form {
        height: 40px;
        padding: 0 10px;
        font-size: 11px;
    }
    .booking-form input{height: 40px;}
    a.view.more{font-size:12px;padding:10px 20px;}
    .sup-title {font-size: 12px;}
    
    .box-booking{padding:40px 20px 20px 20px;}

    .news .thumb,.news .content{width:100%;}
    .news {
        flex-direction: column;
        align-items: center;
    }
    .news .label {
        font-size: 14px !important;
        height: calc(14px * 3);
    }
    .news .calendar>p{font-size: 14px !important;}
    .news .calendar{padding:10px;}
   
    /* End Index */

    /* Product */
    .pro .price{
        /* flex-direction: column; */
        gap: 20px;
        /* justify-content: center; */
        /* align-items:flex-start; */
    }
    .pro .label{font-size:14px;height:calc(14px * 3)}
    .pro .price p.new,.pro .price p.old{font-size:13px;}
    /* Product */


    /*Mucluc*/
    .toc-wrapper {
        max-width:100%;
    }
    /*End Mucluc*/

    /* Tool PC */
    .tool-pc{display:none}
    /* End Tool PC */

    /* Tool mobi */
    .menu-bottom {
        display: flex;
    }
    /* End Tool mobi */


    /* title*/
    .title h1,.title h2,.title h3,.title h4,.title h5,.title h6{font-size:16px !important;}
    .title.line-through{display:flex;justify-content: center;text-align:center;}
    .title.upline h2{padding-top: 15px;}
    /* End title */

    /* Liên hệ */
   .lienhe .left,.lienhe .right{padding:15px;}
    /* End liên hệ */

    /* Copy */
    .area-copy {
        padding: 10px 0px 80px 0px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .box-copy{
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    /* End Copy */

    /* Box */
    .box.line-white{padding-bottom: 20px;}
    /* End box */

    /*footer*/
    .area-footer{padding-top: 20px;margin-top: 60px;}
    a.logo-footer { justify-content: center;}
    ul.list.list-footer li a{font-size: 12px;}
    .title-footer span{font-size:14px;font-weight: 600;}
    ul.info li .icon{font-size:18px;}
    ul.info li{flex-wrap: wrap;text-align: center;}
    ul.info li .icon,ul.info li .content{width:100%;}
    ul.info li .content p{font-size:10px;}
    ul.info li .icon i {
        font-size: 18px;
    }
    /*End footer*/

    /* Content */
    .descript table{
        width: 100% !important;
    }
    /* Content */

    /* Contact*/
    .contact-row{
        grid-column:span 12;
        grid-row: auto;
    }
    /* End contact*/
}
@media screen and (max-width:1024px){
    /* Modal map */
    .modal-frame .frame{
        max-width: 800px;
    }
    /* End Modal map */
}

@media screen and (max-width:1200px){
    
}

@media screen and (max-width:1399px){
  
}

@media screen and (min-width:1440px){

}