@media (max-width: 991px){
    header #menu{
        width: calc(100% - 255px);
        padding: 0px;
    }
    header #menu > ul{
        margin-right: 0px;
    }
    header #menu > ul > li > a{
        padding: 10px 5px;
    }
    header .user .text{
        display: none;
    }
    header .navbar-search{
        margin: 24px 8px 0px;
    }
    header .navbar-brand{
        height: 50px;
        margin: 13px 0px;
    }
    .search-page .filter-list .filter{
        display: none;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        z-index: 2000;
        border-radius: 0px;
        box-shadow: none;
        padding-right: 60px;
        background: transparent;
        padding: 0px;
    }
    .search-page .filter-list .filter form{
        background: #fff;
        position: relative;
        width: 360px;
        max-width: 90%;
        padding: 20px;
        overflow-y: auto;
        height: 100%;
        position: relative;
        z-index: 3;
        padding-bottom: 60px;
        margin-left: -100%;
        transition: .3s ease 0s;
    }
    .search-page .filter-list .filter.open form{
        margin-left: 0px;
    }
    .search-page .filter-list .filter .action-top{
        display: inline-block;
        width: 100%;
        margin-top: -20px;
        margin-left: -20px;
        width: calc(100% + 40px);
        padding: 20px;
        background: #fff;
        position: sticky;
        top: -20px;
        left: 0px;
        z-index: 5;
    }
    .search-page .filter-list .filter.open{
        display: block;
    }
    .search-from h2 {
        margin: 0px;
        font-size: 24px;
        line-height: 35px;
        margin-top: -5px;
    }
    .search-page > .head{
        padding-bottom: 0px;
        padding-top: 25px;
        padding-bottom: 10px;
    }
    .search-page > .body{
        margin-top: 0px;
    }
    .search-page > .body .result{
        width: 100%;
        padding: 10px 0px;
    }
    .search-page > .search-action{
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    .search-page > .search-action .btn-toolbar{
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        padding: 10px 10px;
        z-index: 200;
        background: #fff;
        border: 0px;
        box-shadow: 0px -3px 6px rgba(0,0,0,0.16);
        margin: 0px;
        border-radius: 0px;
    }
    .search-page > .search-action .btn-toolbar .btn-group{
        border: 1px solid #2170B8;
        border-radius: 5px;
        margin: 0px 8px 8px 8px;
        min-width: calc(50% - 16px);
        float: left;
    }
    .search-page > .search-action .btn-toolbar .btn-group.active{
        display: none;
    }
    .post.style-3, .post.style-2{
        box-shadow: 0px 3px 6px rgba(0,0,0,0.16) !important;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    .post.style-3 .body .info{
        margin-top: 20px;
        margin-bottom: 0px;
        min-height: auto;
    }
    .post.style-3 .body .btn-box .btn{
        min-width: 50%;
        width: 50%;
    }
    .post.style-3 h3{
        height: auto;
    }
    .post.style-3 .body .info{
        margin-top: 10px;
        margin-bottom: 0px;
    }
    .post.style-3 .head p{
        margin-bottom: 0px;
    }
    .post.style-3 .head{
        min-height: initial;
    }
    .post.style-2 .head, .post.style-3 .head, .post.style-3 .body .info{
        padding-left: 110px;
    }
    .post.style-3 .body .info .col-xs-6{
        padding-right: 0px;
    }
    .search-action .select.border-under{
        float: right !important;
    }
    .search-page .total{
        display: inline-block;
        float: left;
    }

    .search-page.for-map .search-map img{
        width: 100%;
        height: auto;
    }
    .search-page.for-map .post.style-2 .bg, .search-page.for-map .post.style-3 .bg{
        left: 0px;
        top: 0px;
        border-radius: 0px;
        height: 140px;
    }
    .search-filter big{
        font-size: 14px;
    }
    .post .body .info{
        font-size: 12px;
        line-height: 18px;
    }
    .post-cover{
        margin: 0px;
        width: 100%;
    }
    .post-page{
        padding: 20px 0px;
    }
    .post-page .post-title{
        margin-top: 20px;
    }
    .btn .text-icon, .btn .text-icon span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    .btn .text-icon i{
        background-size: contain;
    }
    .post-page .post-title .btn-box .btn .text-icon{
        padding-left: 32px;
        padding: 2px 0px 0px 32px;
        min-height: 25px;
    }
    .post-page .post-title .btn-box{
        margin-top: 40px;
    }
    .post-page .post-title .btn-box .btn{
        margin-top: 7px;
    }
    .tab.style-2 .nav-tabs{
        width: 100%;
        overflow-x: auto;
        display: flex;
        white-space: nowrap;
        overflow-y: hidden;
        padding-bottom: 10px;
    }
    .tab.style-2 .tab-content {
        padding: 5px 0px;
    }
    .panel .panel-heading, .panel .panel-body, .member .panel .panel-body{
        padding-left: 15px;
        padding-right: 15px;
    }
    .panel .panel-heading .logo{
        right: 15px;
    }
    .owl-carousel .item{
        width: 100%;
    }
    .mobile-slide.owl-carousel .owl-stage-outer{
        padding-bottom: 10px;
        padding-top: 5px;
    }
    .news-detail-page{
        padding-top: 20px;
    }
    .news-detail > .text {
        padding: 20px 90px 20px 0px;
    }
    .news-detail .share.is-vertical{
        right: 0px;
    }
    .other-card > .text {
        height: 90px;
        overflow: hidden;
    }
    .cards.col-5 .card{
        width: calc(33.33% - 20px);
    }
    .faq-page .tab{
        position: relative;
        padding-left: 220px;
    }
    .faq-page .tab .nav-tabs{
        width: 200px;
        position: absolute;
        left: 0px;
        top: 0px;
        margin-top: 20px;
        border: 0px;
        white-space: normal;
        overflow-x: hidden;
        display: inline-block;
    }
    .faq-page .tab .nav-tabs li{
        width: 100%;
        padding: 0px;
    }
    .faq-page .tab .tab-content .panel:first-child{
        margin-top: 0px;
    }
    .faq-page .tab .nav-tabs li.active a{
        border: 0px !important;
    }
    .panel-group .panel-heading a{
        padding: 0px 30px 0px 0px;
    }
    .panel-group .panel-heading span{
        top: 22px;
    }
    .partner-box .inner{
        width: 120px;
    }
    .content-page section{
        padding: 20px 0px;
    }
    .content-page{
        padding-bottom: 40px;
    }
    .regis-box .btn .text-icon{
        max-width: 100%;
    }
    #wrapper{
        min-height: calc(100vh - 245px);
    }
    .member .member-menu:not(.for-business){
        display: none;
    }
    .member .member-body{
        padding: 30px 15px;
    }
    .member .member-menu-page .member-menu{
        display: block;
    }
    .quotation-list h3{
        font-size: 17px;
        line-height: 20px;
        font-weight: 600;
    }
    .chat-list{
        width: 300px;
    }
    .chat-dialog{
        width: calc(100% - 320px);
    }
    .chat-dialog .head .btn{
        zoom: 0.8;
    }
    .font-16{
        font-size: 16px;
        line-height: 20px;
    }
    .chat.is-vdocall .chat-dialog .head{
        width: 100%;
    }
    .chat.is-vdocall .chat-dialog .head .user{
        width: calc(100% - 130px);
    }
    .chat-vdo .cv-action .inner:first-child{
        display: none;
    }
    .chat-vdo .cv-action .inner:nth-child(2){
        width: 66.66%;
        text-align: right;
    }
    .step-footer{
        padding: 15px 20px;
    }

    .member .member-menu.for-business{
        position: relative;
        width: 100%;
        overflow: initial;
        height: auto;
        background: transparent;
        padding: 0px 15px;
    }
    .member .member-menu.for-business > .head{
        background: #fff;
        padding: 18px 15px;
        text-align: left;
        display: table;
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    .member .member-menu.for-business .upload-photo{
        display: inline-block;
        vertical-align: middle;
    }
    .member .member-menu.for-business .name{
        width: calc(100% - 110px);
        text-align: left;
        font-size: 20px;
        line-height: 30px;
        display: table-cell;
        vertical-align: middle;
        padding-left: 20px;
    }
    .member .member-menu.for-business .dropdown-toggle{
        text-align: left;
        padding-right: 40px;
        position: relative;
        padding: 13.5px 15px;
        display: block;
    }
    .member .member-menu.for-business .dropdown-toggle .glyphicon{
        position: absolute;
        right: 15px;
        font-size: 16px;
        top: 50%;
        margin-top: -8px;
    }
    .member .member-menu.for-business .body{
        width: 100%;
        margin: 20px 0px 0px;
        position: relative;
    }
    .member .member-menu.for-business .dropdown-menu{
        height: auto;
        border: 1px solid #ccc;
        border: 1px solid rgba(0,0,0,.15);
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
        background: #fff;
        position: absolute;
        float: left;
        display: none;
    }
    .member .member-menu.for-business .to-back{
        margin: 20px 0px;
    }
    .member .member-menu.for-business .open .dropdown-menu{
        display: block;
        z-index: 1000;
    }
    .hidden-mobile{
        display: none !important;
    }
    .show-ipad{
        display: block !important;
    }
    .member .panel.b-detail-other{
        margin-top: 10px;
    }
    .btn-add-option .text-icon {
        overflow: initial;
    }
    .step-heart.for-score{
        margin: 40px -20px;
        width: calc(100% + 40px);
    }
    .step-heart.for-score .progress{
        margin-left: calc(17.5% - 20px);
    }
    .member .member-menu ul li a{
        padding: 12.5px 25px 12.5px 65px;
    }
    .member .member-menu ul li.dropdown-item a{
        padding-left: 15px;
    }
    .score-detail .text{
        padding: 0px 30px;
    }
    .score-detail .text .topic{
        text-align: center;
    }
    .score-detail .text .topic p{
        display: inline-block;
    }
    .score-detail .img{
        margin: 0 auto 20px;
        display: block;
        width: 280px;
        max-width: 100%;
    }
    .score-detail .btn-redeem{
        margin: 0 auto;
        display: block;
    }
    .tab-filter .head{
        overflow-x: auto;
        display: flex;
        white-space: nowrap;
        overflow-y: hidden;
        padding-bottom: 10px;
        margin-left: -15px;
        width: calc(100% + 30px);
        padding: 0px 10px 5px;
    }
    #modal-redeem .status-box{
        padding: 60px 10px 50px;
        font-size: 16px;
        line-height: 24px;
    }
    #modal-redeem .status-box h2{
        font-size: 24px;
        line-height: 35px;
        margin: 25px 0px 15px;
    }
    .share-social .text-icon{
        min-height: 24px;
    }
    .my-freind .img{
        margin-bottom: 25px;
    }
    .member .top-white {
        display: none;
    }
    .member .bottom .tab{
        margin-top: -10px;
    }
    .member .bottom .tab .nav-tabs{
        background: #fff;
        margin-left: -15px;
        width: calc(100% + 30px);
        max-width: initial;
        padding: 5px 20px 0px;
    }
    .b-chat .btn-toolbar{
        margin: 0px;
    }
    .chat-list .user .text {
        padding-right: 50px;
    }
    .chat-list{
        width: 250px;
    }
    .chat-dialog {
        width: calc(100% - 270px);
    }
    .member .btn-minwidth{
        min-width: initial;
    }
    .schedule-option{
        width: 100%;
        display: inline-block;
    }
    .schedule-option .form-group{
        float: left;
        margin-bottom: 0px;
    }
    .schedule-option .form-group:nth-child(odd){
        width: 40%;
    }
    .schedule-option .form-group:nth-child(even){
        width: 60%;
        text-align: right;
    }
    .schedule-option .checkbox.is-inline{
        margin-right: 0px !important;
    }
    .member .member-body.no-menu{
        padding: 40px 30px;
    }
    .b-quotation .btn-box:not(.no-half){
        display: flex !important;
        flex-flow: row-reverse;
    }
    .b-quotation .btn-box:not(.no-half) .btn{
        width: 50%;
    }
    .b-quotation-detail-panel{
        margin-top: -35px !important;
    }
    .ipad-text-left{
        text-align: left;
    }
    .b-card .card .img img{
        height: 302px;
        overflow: hidden;
    }
    .b-card .card .desc{
        height: 82px;
    }
    .b-card .row{
        margin-left: -15px;
        margin-right: -15px;
    }
    .b-card .row .col{
        padding: 0px 15px;
    }
    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after{
        position: absolute !important;
        top: 12px !important;
        right: 15px !important;
        display: block !important;
    }
    #menu li.active:after{
        display: none;
    }
    header #menu .dropdown-menu{
        width: 520px;
        left: 0px;
        transform: none;
        padding: 15px 30px;
    }
    header #menu .dropdown-menu .bg{
        display: none;
    }
    header .no-user a{
        display: none;
    }
    header .no-user a:first-child{
        display: block;
        margin-top: -8px;
    }
    .banner .banner-box{
        height: 45vw;
    }
    .banner.owl-carousel .owl-nav button.owl-prev{
        left: 25px;
        color: #fff;
    }
    .banner.owl-carousel .owl-nav button.owl-next{
        right: 25px;
        color: #fff;
    }

    .form-profile{
        position: relative;
        padding-bottom: 50px !important;
    }
    .form-profile .btn-send{
        position: absolute;
        bottom: 10px;
        left: 15px;
        padding: 4.5px 13px;
    }
    .to-top{
        margin-bottom: 60px;
    }

    /* addition */
    .banner-addition .owl-nav button.owl-prev{
        left: 15px;
        margin-left: 0px;
        color: #fff;
    }
    .banner-addition .owl-nav button.owl-next{
        right: 15px;
        margin-right: 0px;
        color: #fff;
    }

    /* 2021-04-19 */
    .article .img{
        height: 120px;
    }
    .search-result .post:not(.style-2):not(.style-3) .head h3{
        width: 100%;
    }
    .room-card.is-hotel .row:first-child .col-sm-6:first-child .form-group{
        height: 210px;
    }
    .introjs-tooltip.introjs-top-left-aligned{
        top: -190px !important;
        left: 0px !important;
        right: 0px !important;
        margin: 0 auto !important;
        min-height: 100px;
    }

    /* 2021-06-12 */
    .promotion-box2{
        font-size: 12px;
        line-height: 18px;
        padding: 20px 0px;
    }
    .promotion-box2 .img{
        width: 180px;
    }
    .promotion-box2 .text{
        width: calc(100% - 180px);
        padding: 0px 15px;
    }
    .promotion-box2 .date {
        margin: 10px 0px 0px;
    }
    .post-gallery .item,
    .body-list-images .item{
        height: 350px;
    }
    .post-gallery .owl-dot,
    .body-list-images .owl-dot{
        height: 50px;
    }
    .section.business-search{
        height: 100%;
        max-height: 100%;
        background-size: cover;
    }
    .join-us-title-text{
        font-size: 30px;
        line-height: 45px;
        font-weight: 400;
        letter-spacing: 2px;
        word-spacing: 3px;
        padding: 1px;
        text-align: center;
    }
    .join-us-btn-container{
        text-align: center;
    }
    .join-us-btn{
        width: 324px;
    }
    h3.join-us-header-text{
        font-weight: 500;
        font-size: 21px;
    }
    .join-us-text-L {
        font-size: 18px;
        font-weight: 600;
        margin-left: 10px;
    }
    .footer-detail{
        text-align: center;
        margin-bottom: 20px;
    }
    #rec_business button.owl-next {
        right: -15px;
    }
    #rec_business button.owl-prev {
        left: -15px;
    }
    .gallery.owl-carousel .owl-nav button.owl-prev {
        left: -20px;
    }
    .gallery.owl-carousel .owl-nav button.owl-next {
        right: -20px;
    }
    header #menu .dropdown-menu.promotion-campaign{
        left: 0px;
    }
    .search-filter.filter-map-style{
        width: 100%;
    }
    .control-filter{
        top: 6rem;
    }
    .search-page.for-map .filter{
        float: left;
        width: 255px;
        max-width: 100%;
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        display: block;
        position: unset;
        top:  unset;
        left:  unset;
        height: 100%;
        z-index:  unset;;
    }
}

@media (max-width: 767px){
    .hidden-desktop{
        display: block !important;
    }
    .hidden-mobile, th.hidden-mobile, td.hidden-mobile{
        display: none !important;
    }
    
    header #menu{
        position: fixed;
        width: 100%;
        padding-right: 60px;
        z-index: 2000;
        height: 100vh;
        top: 0px;
        left: 0px;
        margin: 0px;
        border: 0px;
        padding-left: 0px;
        display: none;
    }
    header #menu.in{
        margin-left: 0px;
        display: block !important;
    }
    /* header #menu.in .menu-bg, .bg-filter {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1;
    } */
    header #menu ul{
        background: #fff;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 20px 30px 20px 20px;
        position: relative;
        z-index: 3;
        margin-left: -100%;
        transition: .3s ease 0s;
    }
    header #menu.in ul{
        margin-left: 0px;
    }
    header #menu ul li{
        width: 100%;
        position: relative;
    }
    header #menu ul li > a{
        padding: 15px;
        border-bottom: 1px solid #E3E3E3;
        padding-left: 0px;
        padding-right: 0px;
    }
    header #menu .dropdown-menu{
        position: relative;
        box-shadow: none;
        padding: 0px !important;
        border: 0px;
        border-radius: 0px;
    }
    header #menu.in ul.lang{
        padding: 0px;
        display: inline-block;
        width: auto;
        background: #004686;
        margin: 0px;
        padding: 3px;
        position: absolute;
        right: -12px;
        top: -6px;
    }
    header #menu.in ul.lang li{
        width: auto;
        color: #fff;
        border: 0px;
        background: #004686;
    }
    header #menu .action-top{
        display: block;
        margin-bottom: 20px;
    }
    header #menu.in ul.lang li a{
        color: #fff;
        border: 0px;
    }
    header #menu .dropdown-menu li > a{
        padding: 10px 10px 10px 20px;
    }
    header .navbar-default .navbar-toggle .icon-bar {
        background-color: #333737;
    }
    header .navbar-toggle .icon-bar{
        border-radius: 2px;
    }
    header .navbar-top ul li, header .navbar-top ul.lang{
        display: none;
    }
    header .navbar-top ul li:first-child{
        display: block;
        text-align: center;
        width: 100%;
    }
    header .navbar-default .navbar-toggle{
        float: left;
        margin: 0px;
        border: 0px;
        position: absolute;
        left: 5px;
        top: 55px;
        z-index: 1;
        background: transparent !important;
    }
    header .navbar-search{
        position: absolute;
        left: 35px;
        top: 35px;
        z-index: 1;
    }
    header .no-user a{
        display: none;
    }
    header .no-user a:first-child{
        display: block;
        margin-top: 0px;
    }
    header .navbar-user {
        margin-top: 20px;
        position: absolute;
        right: 5px;
        margin: 0px;
        top: 50px;
        z-index: 1;
    }
    header .navbar-user .no-user{
        margin-right: 10px;
    }
    header .navbar-search {
        margin: 24px 15px 0px;
    }
    .navbar-default .navbar-brand{
        width: 100%;
        position: relative;
        text-align: center;
        z-index: 0;
    }
    header .navbar-brand img{
        margin: 0 auto;
    }
    section{
        padding: 30px 0px;
    }
    .slide-mice{
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    .slide-mice .owl-stage-outer{
        padding-left: 15px;
    }
    .how-box{
        padding-left: 115px;
        position: relative;
        width: 100%;
        text-align: left;
        padding-top: 0px;
        min-height: 100px;
    }
    .how-box img{
        top: 0px;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0px;
    }
    .method .vdo{
        margin: 0px;
        margin-left: -15px;
        width: calc(100% + 30px);
        max-width: calc(100% + 30px);
    }
    .select.border-under{
        float: left !important;
        margin-bottom: 15px;
    }
    .slide-location .inner{
        height: 120px;
    }
    .mobile-slide.owl-carousel .owl-stage-outer{
        padding-bottom: 25px;
    }
    .btn-all{
        padding: 8px 20px;
    }
    .tab .nav-tabs{
        text-align: center;
    }
    .tab .nav-tabs li{
        float: initial;
        display: inline-block;
    }
    .tab .nav-tabs a{
        font-size: 16px;
        line-height: 24px;
    }
    .article{
        margin-bottom: 20px;
    }
    .datepicker-inline{
        width: 100%;
    }
    .calendar-detail{
        max-height: initial;
    }
    .subscribe{
        text-align: center;
        font-size: 14px;
        line-height: 21px;
    }
    .subscribe form{
        margin-top: 20px;
    }
    .subscribe h2{
        font-size: 22px;
    }
    .subscribe .input-group{
        display: inline-block;
        box-shadow: none !important;
    }
    .subscribe .form-control{
        box-shadow: 0px 3px 6px rgba(0,0,0,0.16) !important;
    }
    .subscribe .input-group-addon{
        background: transparent;
        border: 0px;
    }
    .subscribe .input-group-addon .btn{
        width: 100%;
        margin-top: 15px;
        border-radius: 5px;
    }
    footer .footer-menu > li{
        width: 100% !important;
    }
    footer .dropdown-toggle{
        width: 100%;
        padding: 15px 0px;
        display: inline-block;
        border-bottom: 1px solid rgba(255,255,255,0.19);
    }
    footer .dropdown-menu {
        display: none;
        width: 100%;
    }
    footer .dropdown-toggle span{
        display: block;
        top: 18px;
    }
    footer .copyright{
        line-height: 22px;
    }
    footer .footer-menu{
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .home-calendar{
        margin-bottom: 60px;
    }
    .post-cover .post-slide {
        position: relative;
        height: 390px;
        margin-left: -15px;
        width: calc(100% + 30px);
        height: auto;
    }
    .post-cover .post-slide .item{
        width: 100% !important;
        height: 220px !important;
    }
    .post-cover .post-slide.owl-carousel .owl-dots{
        margin-top: -30px;
    }
    .post-cover .post-slide.owl-carousel .owl-nav button.owl-prev{
        left: 10px;
        top: 28%;
        filter: brightness(0) invert(1);
    }
    .post-cover .post-slide.owl-carousel .owl-nav button.owl-next{
        right: 10px;
        top: 28%;
        filter: brightness(0) invert(1);
    }
    .post-cover .post-like{
        z-index: 2;
        left: -5px;
    }
    .post-cover .post-logo{
        z-index: 2;
        right: 0px;
        width: 100px;
        height: 100px;
        bottom: -50px;
    }
    .breadcrumb{
        margin-bottom: 10px;
    }
    .post-page .post-title {
        margin-top: 10px;
    }
    .post-page .post-title .star{
        width: 100%;
        margin-bottom: 10px;
    }
    .post-page .btn-chat{
        float: initial !important;
        padding-bottom: 0px;
        margin-bottom: 10px;
    }
    .post-page .btn-post-option{
        margin: 0px;
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100vw !important;
        background: #fff;
        z-index: 1000;
        padding: 10px 15px 20px;
        box-shadow: 0px -3px 6px rgba(0,0,0,0.16);
    }
    .post-page .btn-post-option .btn{
        padding: 11px 12px 7px;
    }
    .post-page .btn-post-option .btn:not(:first-child){
        width: 50px;
    }
    .post-page .btn-post-option .btn:not(:first-child) span{
        display: none;
    }
    .post-page .btn-post-option .btn:first-child{
        width: calc(100% - 108px);
    }
    .panel-heading.has-option{
        padding-right: 100px;
        position: relative;
    }
    .panel-heading.has-option .pull-right{
        position: absolute;
        right: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .room-card{
        padding: 12px;
    }
    .room-card .img, .room-card .text{
        width: 100%;
    }
    .room-card .text{
        padding: 15px 0px;
    }
    .room-card hr{
        border-color: #fff;
        margin-top: 0px;
    }
    .room-table .tr{
        width: 33.33%;
        margin-top: -1px;
    }
    .room-table{
        display: inline-block;
        margin-top: 5px;
    }
    .mobile-list br{
        display: none;
    }
    .post-action .tags{
        margin-bottom: 30px;
    }
    .review-list{
        padding: 25px 20px;
    }
    .btn-review{
        position: relative;
        right: auto;
        top: 0px;
        transform: none;
        margin-top: 15px;
    }
    .review-list p{
        margin-top: 8px;
    }
    .post .guarantee{
        margin: 5px 0px 0px;
    }
    .post-related-slide{
        margin-bottom: 25px;
    }
    .post-related-slide .post{
        margin-bottom: 5px;
    }
    .modal .modal-body.pd-40 {
        padding: 25px 25px;
    }
    .modal .modal-body.pd-40 .close {
        margin-top: 0px;
        margin-right: 0px;
    }
    .modal .modal-body.pd-40 h2{
        padding-right: 30px;
    }
    .status-box img{
        width: 120px;
    }
    .status-box h2{
        font-size: 20px;
        line-height: 30px;
    }
    .status-box .btn-box{
        font-size: 14px !important;
    }
    .datepicker.is-appointment{
        padding: 0px;
    }
    .date-status{
        margin-top: -20px;
    }
    .date-status > div{
        margin-right: 10px;
    }
    .date-status > div:last-child{
        margin-right: 0px;
    }
    .radio-select .radio > label{
        min-width: 92px;
    }
    .form-select .select{
        margin: 15px 0px 0px;
        min-width: 100%;
        width: 100%;
    }
    .form-select h2{
        font-size: 22px;
        line-height: 33px;
        margin: 0px;
        width: 100%;
        margin-top: 5px;
    }
    .promotion-box.is-medium{
        padding: 20px 15px;
        margin-bottom: 15px;
    }
    .news-detail > .img{
        margin-left: -15px;
        width: calc(100% + 30px);
        max-width: initial;
    }
    .news-detail > .text{
        padding-top: 10px;
        padding-right: 0px;
    }
    .news-detail .head h2{
        font-size: 22px;
        line-height: 30px;
        margin-top: 10px !important;
    }
    .news-detail .head .date{
        font-size: 14px;
    }
    hr {
        border-color: #D9D9D9;
        margin: 18px 0px;
    }
    .news-detail .share.is-vertical{
        display: none;
    }
    .news-detail .footer{
        margin-top: 0px;
    }
    .news-detail .footer .share{
        margin-bottom: 30px;
    }
    .news-detail .other{
        margin-top: 30px;
    }
    .news-detail .other .col:nth-child(even){
        text-align: left;
    }
    .news-detail .other .col:nth-child(even) .other-card .img{
        float: left;
        margin-left: 0px;
        margin-right: 15px;
    }
    .other-card > .text p.font-light{
        color: #282828;
        font-weight: 400 !important;
    }
    .tab .tab-content .pull-right:not(.dropdown) {
        /* width: 100%; */
    }
    .tab .tab-content .pull-right .select{
        width: calc(50% - 2px);
        min-width: initial;
    }
    .cards.col-5 .card{
        max-width: 100%;
        width: 315px;
        margin: 40px auto 0px;
        text-align: center;
        display: block;
        float: initial;
    }
    .card .desc{
        height: auto;
        margin-bottom: 10px;
    }
    .card .img{
        max-width: 100%;
        width: 260px;
        margin: 0 auto 15px;
    }
    .calendar-page .body .img{
        top: 0px;
        position: relative;
        margin-top: -100px;
        margin-bottom: 30px;
        border-radius: 5px;
        overflow: hidden;
    }
    .calendar-page .head{
        padding: 15px 0px 85px;
    }
    .calendar-page .head h2{
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 5px;
    }
    .faq-page .tab{
        padding-left: 0px;
        margin-bottom: 50px;
    }
    .faq-page .tab .nav-tabs{
        position: relative;
        width: 100%;
        margin-top: 0px;
    }
    .faq-page .tab .tab-content{
        display: none;
    }
    .faq-page .tab .nav-tabs li a, .faq-page .tab .nav-tabs li.active a{
        text-align: left;
        font-weight: 400;
        border-bottom: 1px solid #DBDBDB !important;
        padding: 18px 30px 18px 10px;
        position: relative;
    }
    .faq-page .tab .nav-tabs li a:after{
        content: '\e258';
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        position: absolute;
        right: 0px;
        top: 50%;
        margin-top: -6px;
    }
    .cover {
        padding: 35px 15px;
    }
    .cover .text h2 {
        font-size: 22px;
        line-height: 33px;
    }
    .content-page h2 {
        font-size: 20px;
        line-height: 30px;
        font-weight: 700;
        color: #2170B8;
        margin: 10px 0px 40px;
    }
    .content-page h3 br, .content-page h2 br{
        display: none;
    }
    .content-page img{
        margin-bottom: 20px;
    }
    .content-page .is-reverse > div{
        width: 100% !important;
    }
    .partner-box .inner {
        display: inline-block;
        padding: 15px 20px 0px;
        width: 100px;
    }
    .contact-list .text-icon{
        margin: 30px 0px;
    }
    .contact-list .text-icon > *{
        width: calc(100% - 80px);
    }
    .contact-list .text-icon img{
        width: 60px;
        margin-right: 20px;
        margin-bottom: 0px;
    }
    .contact-list .text-icon br{
        display: none;
    }
    .regis-box .img{
        width: 220px;
        margin: 0 auto 30px;
        display: block;
    }
    .regis-box br{
        display: none;
    }
    .regis-box:before{
        top: 0px;
        width: 100%;
        height: 160px;
        background: #F7F9FC;
    }
    .regis-box form{
        padding: 0px 15px;
    }
    .regis-box form h2{
        margin-bottom: 20px;
    }
    .regis-box form .btn{
        margin-top: 25px;
        width: 100%;
    }
    .regis-social{
        padding: 0px 50px;
        margin-bottom: 40px;
    }
    .regis-social .btn{
        margin-top: 15px;
        padding: 10px 12px 6px;
    }
    .regis-box .btn .text-icon{
        width: 100%;
        min-height: 22px;
    }
    .regis-box.is-forget .img{
        margin-top: 40px;
    }
    .regis-box.is-forget .form-group{
        margin-top: 20px;
        margin-bottom: 0px;
    }
    .regis-box.is-forget form .btn{
        margin-top: 20px;
    }
    .regis-box.is-forget{
        padding-bottom: 80px;
    }
    .regis-box .to-back{
        position: absolute;
        left: 15px;
        top: 0px;
    }
    .regis-box.is-forget .to-back{
        top: -30px;
    }
    .popup-search{
        background: #fff;
        padding: 0px;
        margin-top: 40px;
    }
    .popup-search .form-search{
        padding: 10px 20px 20px;
        border-radius: 5px;
        background: linear-gradient(145deg, rgba(33,112,184,1) 0%, rgba(0,55,160,1) 100%);
    }
    .form-search .btn-close{
        right: 50px;
        top: 25px;
    }
    .form-search .btn-search{
        right: 20px;
        top: 25px;
    }
    .form-search .form-control{
        padding-right: 60px;
    }
    .autocomplete{
        font-size: 15px;
        margin-top: 0px;
        position: relative;
        width: 100%;
        padding: 12px;
        line-height: 21px;
        height: calc(100vh - 190px);
        overflow-y: auto;
    }
    .autocomplete .auto-text{
        padding: 0px 10px;
    }
    .history-search{
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: #2170B8;
        text-decoration: underline;
        margin-top: 10px;
    }
    header .user .img{
        margin-top: 2px;
    }
    .member h2{
        font-size: 22px;
        line-height: 33px;
    }
    .member .btn-toolbar {
        width: 100%;
        margin: 0px;
    }
    .member .btn-toolbar .btn-group {
        width: 50%;
        font-size: 15px;
        padding: 15px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .member .select.border-under {
        float: right !important;
        margin-top: 12px;
        margin-bottom: 5px;
    }
    .select.border-under select{
        min-width: 100px;
    }
    .panel-list > .head{
        display: none;
    }
    .post .mode .inner, .type{
        font-size: 11px;
        line-height: 17px;
    }
    .select-sorting{
        display: inline-block;
        width: 100%;
    }
    .select-sorting label{
        float: left;
        margin-top: 18px;
        display: block;
        height: 100%;
    }
    .panel-list label.hidden-desktop{
        width: 120px;
        display: inline-block;
        float: left;
    }
    .panel-list label.mobile-full{
        width: 100%;
        float: initial;
        margin-bottom: 3px;
    }
    .panel-list .text-desc{
        width: calc(100% - 120px);
        display: inline-block;
        padding-left: 10px;
    }
    .panel-list .list > .row > .col{
        margin-bottom: 2px;
    }
    .panel-list .col-sm-3{
        width: 100%;
        display: inline-block;
    }
    .mobile-text-left{
        text-align: left;
    }
    .mobile-text-right{
        text-align: right !important;
    }
    .mobile-text-center{
        text-align: center;
    }
    .mobile-font-bold {
        font-weight: 700 !important;
    }
    .mobile-font-semibold {
        font-weight: 600 !important;
    }
    .mobile-font-medium {
        font-weight: 500 !important;
    }
    .mobile-font-regular {
        font-weight: 400 !important;
    }
    .mobile-font-light {
        font-weight: 300 !important;
    }
    .quotation-list .col:not(:first-child){
        padding-left: 105px;
    }
    .quotation-list .col .btn-box{
        margin-left: -95px;
        width: calc(100% + 100px);
    }
    .quotation-list label.hidden-desktop, .quotation-list .text-desc{
        width: 100%;
        padding-left: 0px;
        margin: 0px;
    }
    .quotation-list .btn-box .btn{
        width: calc(100% - 12px);
        margin: 5px;
    }
    .mobile-btn-half{
        width: calc(50% - 12px) !important;
        display: inline-block;
    }
    .modal .modal-header.pd-40, .modal .modal-body.pd-40{
        padding: 20px;
    }
    .modal .modal-header.pd-40 .close {
        /* margin-top: 8px; */
        margin-right: 0px;
    }
    .table:not(.table-bordered) > tbody > tr > td, .table > thead > tr > th {
        padding: 17px 0px;
    }
    .table > thead > tr > th {
        padding-left: 15px;
        padding-right: 15px;
    }
    .mobile-font-12 {
        font-size: 12px !important;
        line-height: 18px !important;
    }
    .mobile-font-14 {
        font-size: 14px !important;
        line-height: 21px !important;
    }
    .mobile-font-16 {
        font-size: 16px !important;
        line-height: 24px !important;
    }
    .mobile-font-18 {
        font-size: 18px !important;
        line-height: 27px !important;
    }
    .mobile-font-22 {
        font-size: 22px;
        line-height: 33px;
    }
    .btn-edit-profile{
        float: left !important;
        display: inline-block;
        border-color: #2170B8 !important;
        color: #2170B8 !important;
        margin-bottom: 20px;
    }
    .btn-edit-profile .m-icon{
        filter: grayscale(0%);
    }
    .mobile-no-padding {
        padding: 0px !important;
    }
    .mobile-no-padding-top {
        padding-top: 0px !important;
    }
    .mobile-no-padding-bottom {
        padding-bottom: 0px !important;
    }
    .mobile-no-padding-left {
        padding-left: 0px;
    }
    .mobile-no-padding-right {
        padding-right: 0px;
    }
    .mobile-no-border{
        border: 0px !important;
    }
    .plan-type .box {
        margin-bottom: 20px;
    }
    .plan-type .col:nth-child(odd){
        border: 0px;
        border-bottom: 1px solid #2170B8;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    .plan-type .row{
        margin: 0px;
    }
    .mobile-col-2{
        column-count: 2;
    }
    .member .panel .panel-body {
        padding: 25px 20px;
    }
    .select-service{
        height: 675px;
    }
    .select-service .service-type{
        padding: 20px 20px 30px !important;
        width: 100%;
        height: auto;
    }
    .select-service .service-list{
        width: 100%;
        margin-top: -10px;
    }
    .select-service .service-list .post{
        border-radius: 0px;
        box-shadow: none !important;
    }
    .select-service .service-list .post:last-child{
        border: 0px;
    }
    .provider-select{
        position: fixed;
        top: 75vh;
        left: 0px;
        width: 100%;
        background: #fff;
        z-index: 2000;
        box-shadow: 0px 0px 15px rgba(166,188,209,0.42) !important;
        transition: .3s ease 0s;
        height: calc(100vh + 160px);
        display: inline-block;
    }
    .provider-select-head{
        padding: 30px 20px;
        text-align: center;
    }
    .provider-select.open{
        top: -160px;
    }
    .selected-service{
        padding: 0px;
        height: 55%;
        margin-bottom: 30px;
    }
    .selected-service .panel-body{
        padding: 0px !important;
    }
    .btn-request{
        width: auto;
        min-width: 220px;
        margin: 0 auto;
        padding: 11px 20px !important;
    }
    .chat, .chat-list, .chat-dialog {
        margin: 0px;
        width: 100%;
    }
    .chat-dialog{
        /*display: none;*/
    }
    .title-highlight{
        padding: 15px;
        margin-top: -10px;
        margin-bottom: 10px;
    }
    .chat-dialog .footer, .chat.is-vdocall .chat-dialog .footer{
        padding: 10px 15px 60px 15px;
    }
    .chat-dialog .head .user .img{
        width: 50px;
        height: 50px;
    }
    .chat-dialog .head{
        padding: 20px 15px 10px 15px;
    }
    .chat-dialog .msg .text{
        max-width: 250px;
    }
    .chat-dialog .chat-msg{
        width: 100%;
        padding: 0px;
    }
    .chat-dialog .chat-msg .btn{
        top: calc(100% + 8px);
        height: 39px;
    }
    .chat-dialog .chat-upload, .chat.is-vdocall .chat-dialog .chat-upload{
        top: auto;
        bottom: 8px;
        left: 13px;
    }
    .title-yelloow{
        font-size: 16px;
        font-weight: 500;
    }
    .modal .status-box{
        padding: 0px;
    }

    .chat.is-vdocall .chat-vdo, .chat.is-vdocall .chat-dialog{
        width: 100%;
    }
    .chat.is-vdocall .chat-dialog{
        display: none;
    }
    .chat-vdo .cv-call{
        margin-top: 15px;
        height: 120vw;
    }
    .chat-vdo .cv-action{
        padding: 15px 12px;
    }
    .chat-vdo .cv-action .inner:first-child{
        display: block;
        width: 20.33%;
    }
    .chat-vdo .cv-action .to-chat{
        width: auto;
        display: inline-block;
    }
    .chat-vdo .cv-action .inner:nth-child(2){
        width: 46.33%;
    }
    .chat-vdo .cv-action .inner:nth-child(3){
        text-align: right;
    }
    .chat.is-vdocall{
        height: auto;
    }
    .chat-vdo .cv-call .you{
        width: 200px;
        height: 115px;
    }
    .title-vdo{
        display: block;
    }
    .mobile-block{
        width: 100%;
    }
    .member .promotion-box {
        margin-top: 12px;
        margin-bottom: 0px;
    }
    .add-box{
        width: 100%;
        min-height: 135px;
        margin: 30px 0px !important;
        height: auto;
        padding: 30px 20px;
    }
    .add-box .transform-middle{
        top: 0px;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    .mobile-no-margin {
        margin: 0px !important;
    }
    .mobile-no-margin-top {
        margin-top: 0px !important;
    }
    .mobile-no-margin-bottom {
        margin-bottom: 0px;
    }
    .mobile-no-margin-left {
        margin-left: 0px;
    }
    .mobile-no-margin-right {
        margin-right: 0px;
    }
    .step-footer .text{
        width: 100%;
        padding: 15px 115px 15px 30px;
        margin-top: -8px;
    }
    .step-footer .btn-save{
        width: 100%;
        margin-top: 3px;
    }
    .panel-heading h3{
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
    }
    .text-icon.mobile-has-info {
        padding-right: 30px;
    }
    .text-icon.mobile-has-info i{
        top: auto;
        bottom: 0px;
        transform: none;
        width: 20px;
        height: 20px;
    }
    hr.in-panel{
        margin: 25px 0px;
        width: 100%;
    }
    hr.mobile-in-panel{
        margin-left: -15px !important;
        width: calc(100% + 30px);
    }
    .form-tax{
        padding-right: 120px;
        position: relative;
    }
    .form-tax .form-group:nth-child(2){
        position: absolute;
        right: 0px;
        top: 0px;
    }
    .form-tax .form-group:nth-child(2) .btn{
        width: 112px;
        min-width: initial;
        padding: 9.5px 15px !important;
    }
    .same-name{
        float: left !important;
        margin: 8px 0px;
    }
    .same-name label {
        font-weight: 400;
    }
    .upload-file .input{
        width: 100%;
    }
    .upload-file .text{
        padding: 10px 0px 0px 0px;
    }
    .select-map .map-box{
        width: 100%;
        padding: 0px;
        margin-top: 15px;
    }
    .bootstrap-tagsinput{
        padding: 9px 10px;
    }
    .member-title .btn.pull-right{
        float: left !important;
    }
    .list-business .list .icon{
        width: 165px;
    }
    .list-business .list .text{
        width: 100%;
        display: inline-block;
        padding: 0px;
        margin: 12px 0px;
    }
    .member .panel .panel-body{
        padding: 20px 15px;
    }
    .radio-box .radio label .name, .radio-box .checkbox label .name, .list-business .icon .name{
        font-weight: 400;
        margin-bottom: 5px;
    }
    .radio-box .checkbox input:checked ~ label:before {
        width: 22px;
        height: 22px;
        right: -7px;
        top: -8px;
    }
    .radio-box .radio .btn-info i, .radio-box .checkbox .btn-info i, .list-business .icon .btn-info i{
        width: 18px;
        height: 18px;
    }
    .row.is-border-right{
        display: block;
    }
    .row.is-border-right .col:not(:last-child) {
        border: 0px;
        border-bottom: 1px solid #E3E3E3;
    }
    .row.is-border-right .pull-right{
        width: auto;
    }
    .row.is-border-right .col{
        padding: 20px 15px;
        overflow: hidden;
    }
    .row.is-border-right p{
        margin-bottom: 5px;
    }
    .b-manage .tab .nav-tabs{
        margin-left: -23px !important;
        width: calc(100% + 28px) !important;
    }
    .step-footer{
        min-height: initial;
    }
    .b-manage .tab.style-2 .nav-tabs li a{
        padding: 12px 20px;
    }
    .text-icon.is-middle.mobile-no-middle i{
        top: initial;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    .b-manage .btn-add-option{
        font-size: 14px;
    }
    .b-manage .btn-add-option .text-icon i {
        width: 32px;
        height: 32px;
    }
    .b-manage .btn-add-option .text-icon{
        padding-left: 38px;
    }
    .business-days > .checkbox, .business-hrs > .checkbox{
        margin: 5px 0px 12px !important;
    }
    .business-days  .radio-select .radio > label{
        min-width: calc(33.33vw - 28px) !important
    }
    .radio-select.is-blue .radio > label{
        border-color: #D6D5D5;
    }
    .modal .btn-box{
        margin: 20px 0px;
    }
    .mobile-width-200, .member .mobile-width-200{
        min-width: 200px;
    }
    .btn-minwidth{
        min-width: 200px;
    }
    .room-plan .inner{
        width: calc(50% - 10px);
        margin-top: 10px;
    }
    .upload-right-detail{
        font-size: 16px;
        line-height: 24px;
    }
    .upload-right-detail .upload-photo{
        width: 100%;
        margin: 0px 0px 20px;
    }
    .modal.modal-checkbox .form-group > label{
        font-size: 16px;
        line-height: 24px;
    }
    .modal.modal-checkbox .checkbox{
        margin: 8px 0px;
    }
    .radio-select.is-round .radio > label{
        min-width: 70px !important;
    }
    .modal .limit-char .char{
        font-size: 12px;
        line-height: 18px;
    }
    .radio-select .radio input:checked ~ label, .b-schedule .radio-select .radio input:checked ~ label{
        border-color: transparent !important;
    }
    .b-manage .room-card hr{
        border-color: #E3E3E3;
        margin: 20px 0px 12px;
    }
    .b-manage .room-card .btn-edit {
        position: relative;
        top: auto;
        right: auto;
        margin: 0px 0px 10px;
    }
    .border-box{
        padding: 10px 15px;
    }
    .alert-custom{
        padding: 10px;
        font-size: 14px;
        line-height: 18px;
    }
    .step-heart.mobile-verticle .progress{
        left: 43px;
        top: 2px;
        width: calc(100% - 18px);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        transform-origin: left top;
    }
    .step-heart.mobile-verticle .step .icon{
        width: 100%;
        text-align: left;
        padding: 0px;
        padding-left: 95px;
        margin: 20px 0px;
        height: 46px;
        overflow: hidden;
    }
    .step-heart.mobile-verticle .step .icon:first-child{
        margin-top: 0px;
    }
    .step-heart.mobile-verticle .step i{
        margin: 0px;
        top: 50%;
        left: 25px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .table.mobile-full tbody > tr > td{
        display: block;
        width: 100%;
        padding: 15px 15px 5px;
    }
    .table.mobile-full tbody > tr{
        border-bottom: 1px solid #E3E3E3;
    }
    .table.mobile-full tbody > tr > td{
        border: 0px !important;
    }
    .table .m-icon-heart{
        margin-top: 5px;
    }
    .panel{
        border-radius: 10px;
    }
    .card-score{
        position: relative;
        padding-left: 180px;
        margin-bottom: 20px;
    }
    .card-score > img{
        width: 160px;
        position: absolute;
        left: 10px;
        top: 10px;
    }
    .card-score h3{
        font-weight: 600;
        margin: 0px;
    }
    .card-score .text{
        height: auto;
        margin: 5px 0px;
    }
    .card-score .score .btn{
        margin: 22px 0px 8px;
        font-size: 14px;
    }
    .btn:disabled, .btn[disabled]{
        background: #9B9B9B !important;
        border-color: #9B9B9B !important;
    }
    .score-detail{
        margin-bottom: 30px;
    }
    .score-detail .img{
        width: 100%;
        margin-bottom: 30px;
    }
    .score-detail .text{
        padding: 0px 20px;
    }
    .score-detail .desc{
        margin-top: 10px;
    }
    .score-detail .text-score{
        font-size: 24px;
        line-height: 35px;
        margin-top: 15px;
    }
    .score-me h2{
        font-weight: 700;
        font-size: 30px;
        line-height: 35px;
    }
    .tab-filter > .head > .inner{
        margin: 5px;
    }
    .f-how .inner{
        width: 100%;
        position: relative;
        text-align: left;
    }
    .f-how .text{
        width: 100%;
        padding-left: 85px;
        text-align: left;
    }
    .f-how .img{
        position: absolute;
        left: 15px;
        top: 0px;
        z-index: 2;
        height: 50px;
        max-width: 58px;
    }
    .f-how p{
        font-size: 16px !important;
        line-height: 24px !important;
        text-align: left;
        margin-bottom: 5px !important;
    }
    .f-how .no{
        font-size: 90px;
        bottom: auto;
        top: 12px;
        color: #E1ECF7;
    }
    .mt25 {
        margin-top: 15px !important;
    }
    .btn-invite{
        width: 150px;
        margin: 10px auto 5px;
        display: block;
    }
    .copylink .form-control{
        padding-right: 15px;
    }
    .copylink .btn{
        position: relative;
        margin: 5px auto 0px;
        display: block;
    }
    .my-friend h2{
        font-weight: 600;
        font-size: 40px;
        line-height: 60px;
    }
    .table-friend tbody tr{
        position: relative;
        width: 100%;
        display: block;
        padding: 10px 0px 10px 35px;
    }
    .table-friend tbody td:first-child{
        position: absolute;
        top: 8px;
        left: 5px;
        font-size: 16px;
        padding: 0px !important;
        width: 30px !important;
    }
    .table-friend tbody td{
        padding: 0px 0px 0px !important;
    }
    .paging{
        margin-top: 35px;
        margin-bottom: 20px;
    }
    .b-chat .btn-toolbar .btn-group, .b-quotation .btn-toolbar .btn-group{
        width: 100%;
        padding: 20px 15px;
        font-size: 14px;
        line-height: 21px;
        position: relative;
        border: 0px;
    }
    .b-chat .btn-toolbar .btn-group:not(:last-child), .b-quotation .btn-toolbar .btn-group:not(:last-child){
        border-bottom: 1px solid #C3C3C3;
    }
    .chat-type{
        position: relative;
        padding-left: 50px;
        text-align: left;
        padding-right: 80px;
    }
    .chat-type h2{
        position: absolute;
        left: 0px;
        top: 50%;
        font-size: 28px;
        line-height: 42px;
        margin-top: -22px !important;
    }
    .b-chat .btn-toolbar .text-icon, .b-quotation .btn-toolbar .text-icon{
        text-decoration: underline;
        padding-left: 22px;
        position: absolute;
        top: 20px;
        right: 15px;
    }
    .b-chat .btn-toolbar .text-icon i, .b-quotation .btn-toolbar .text-icon i{
        width: 16px;
        height: 16px;
    }
    .b-chat .btn-toolbar .btn-group.active .text-icon, .b-quotation .btn-toolbar .btn-group.active .text-icon{
        color: #fff;
    }
    .chat-list .user .name b, .chat-list .user .name{
       font-weight: 600;
       color: #2145B5;
    }
    .b-chat .chat-dialog{
        margin-top: -20px;
    }
    .b-chat .title-dialog .btn{
        width: auto;
    }
    .status-box.mobile-custom{
        padding: 0px 30px;
    }
    .mobile-no-float{
        float: initial !important;
    }
    .btn-schedule-toggle{
        float: initial !important;
        margin-top: 25px;
    }
    .panel-list .list.pd25 .user, .b-quotation .user{
        min-height: initial;
        margin: 20px 0px 35px;
    }
    .panel-list .list.pd25 .user p{
        margin-bottom: 0px !important;
    }
    .chat-appointment .list p{
        margin-bottom: 20px !important;
    }
    .chat-appointment .btn-box:not(.no-half), .b-quotation .btn-box:not(.no-half){
        display: flex !important;
        flex-flow: row-reverse;
    }
    .chat-appointment .btn-box:not(.no-half) .btn, .b-quotation .btn-box:not(.no-half) .btn{
        width: 50%;
    }
    .chat-appointment .list .user br, .b-quotation .user br{
        display: none;
    }
    #modal-cancel .checkbox{
        margin-bottom: 18px;
    }
    .schedule-option .form-group{
        text-align: left !important;
        width: 100% !important;
    }
    .schedule-option .form-group label{
        width: 100%;
        display: inline-block;
    }
    .schedule-option .checkbox, .schedule-option .checkbox.is-inline{
        margin-top: -15px;
        margin-right: 30px !important;
    }
    .form-type .table .checkbox{
        padding-left: 0px;
        margin-bottom: 10px;
    }
    .form-type .table.mobile-full tbody > tr{
        border: 0px;
    }
    .form-type .table.mobile-full tbody > tr > td{
        border-bottom: 1px solid #E3E3E3 !important;
    }
    .form-type .table, .form-type .table.mobile-full tbody > tr:last-child > td:last-child{
        border-bottom: 0px !important;
    }
    .form-type .radio-select .radio{
        width: calc(50% - 10px);
    }
    .form-type .radio-select .radio > label{
        width: 100%;
        font-size: 14px;
        padding: 12px 5px;
    }
    .form-type .btn-box{
        padding: 0px 15px;
        text-align: center;
        margin-bottom: 20px !important;
    }
    .form-type .btn-box .btn{
        width: 280px;
        max-width: 100%;
    }
    .member .member-body.no-menu {
        padding: 30px 15px;
    }
    .member .tab-content .setting.text-right{
        margin-top: 20px;
        text-align: left;
    }
    .member .tab-content .setting.text-right .input-icon{
        width: 100%;
    }
    .member .tab-content .setting .form-control:not(select){
        border-color: #534B49 !important;
        background: transparent;
    }
    .b-quotation .form-group {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 24px;
    }
    .b-quotation .border-box{
        margin-bottom: 10px;
        padding: 20px;
    }
    .b-quotation .border-box label{
        margin: 0px;
    }
    .b-quotation .border-box p{
        margin-bottom: 15px !important;
    }
    .b-quotation-detail-panel {
        margin-top: -35px !important;
        border-radius: 5px;
    }
    .b-quotation-detail .user{
        padding-left: 0px;
        margin-bottom: 0px;
    }
    .b-quotation-detail .user .bg{
        top: -8px;
    }
    .b-quotation-detail .text h2{
        padding-left: 60px;
        margin-bottom: 40px;
    }
    .b-quotation-detail .user p{
        margin-bottom: 20px;
    }
    .b-quotation-detail .btn-box:not(.no-half){
        display: inline-block !important;
        flex-flow: initial;
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }
    .b-quotation-detail .btn-box:not(.no-half) .btn{
        width: 225px;
        max-width: 100%;
    }
    .upload-file .input{
        font-size: 13px;
        font-weight: 500 !important;
    }
    .b-card .add-box{
        width: 100%;
        height: auto;
    }
    .card-manage{
        font-size: 16px;
        line-height: 24px;
    }
    .card-manage .desc {
        margin-bottom: 20px;
        height: 72px;
        overflow: hidden;
        font-weight: 500;
    }
    .card-manage .action{
        font-size: 16px;
        line-height: 24px;
        margin-top: 18px;
    }
    .card-manage .date{
        font-size: 14px;
        line-height: 21px;
    }
    .b-card .card .img img {
        height: 98vw;
    }
    .b-card .card{
        font-size: 16px;
        line-height: 24px;
        width: 100%;
        margin: 20px 0px 50px;
        display: inline-block;
    }
    .b-card .card .action{
        font-size: 14px;
        line-height: 21px;
        margin-top: 15px;
    }
    .b-card .card .desc {
        height: auto;
        margin-bottom: 5px;
    }
    .table-title{
        width: auto;
        display: inline-block;
        float: left;
        width: calc(100% - 120px);
    }
    .table-all{
        width: auto;
        display: inline-block;
        float: right;
        margin: 0px;
    }
    .b-dashboard .table{
        font-size: 16px;
        line-height: 20px !important;
        border-top: 1px solid #E3E3E3;
        margin-top: 20px;
        height: 500px;
        overflow-y: auto;
        display: inline-block;
        width: 100%;
        padding-right: 15px;
        margin-bottom: 0px;
    }
    .b-dashboard .table thead{
        display: none;
    }
    .b-dashboard .table tbody > tr > td{
        padding: 10px 0px 5px;
        font-size: 16px;
        line-height: 18px !important;
    }
    .b-dashboard .table tbody > tr > td span{
        display: inline-block !important;
    }
    .b-dashboard .table tbody > tr{
        padding: 8px 0px 15px;
        display: inline-block;
        width: 100%;
    }
    .b-dashboard .table tbody > tr > td:nth-child(n + 3){
        width: 65%;
        display: inline-block;
        float: left;
    }
    .b-dashboard .table tbody > tr > td:nth-child(n + 4){
        width: 35%;
        display: inline-block;
        float: left;
    }
    .b-dashboard .panel .panel-body {
        padding: 25px 20px;
    }
    .b-dashboard .table::-webkit-scrollbar {
        width: 5px;
    }
    .b-dashboard .table::-webkit-scrollbar-track {
        background: #E3E3E3;
        border-radius: 3px;
    }
    .b-dashboard .table::-webkit-scrollbar-thumb { 
        background: #2170B8;
        border-radius: 3px;
    }
    .b-dashboard .form-inline .form-group{
        margin-left: 0px;
    }
    .b-dashboard .input-group.is-calendar input {
        width: 100%;
    }
    .b-dashboard .btn-toolbar .btn-group{
        font-size: 14px;
        line-height: 20px;
    }
    .b-dashboard .btn-toolbar{
        margin-bottom: 15px;
    }
    .upload-photos.is-vertical .for-upload{
        width: 100%;
        height: 100px;
        font-size: 14px;
        margin: 30px 0px;
    }
    .upload-photos.is-mobile-half{
        width: calc(100% + 10px);
    }
    .upload-photos.is-mobile-half .inner{
        width: calc(50% - 10px);
    }
    .upload-photos.style-2 .inner{
        height: 29vw;
    }
    .upload-photos.style-2 .inner.for-upload{
        width: 203px;
        height: 134px;
    }
    .modal .content{
        margin: 30px 0px 20px;
    }
    header #menu .dropdown-menu{
        column-count: 1;
        margin-left: 0px;
        margin: 0px;
        width: 100%;
    }
    header #menu .dropdown .dropdown-backdrop{
        display: none !important;
    }
    .banner{
        margin: 20px 0px;
    }
    .under-banner{
        display: block;
        position: relative;
        padding: 35px 0px;
    }
    .room-card.is-hotel .row:first-child .col-sm-6:nth-child(2) {
        padding-left: 15px;
    }
    .room-card.is-hotel .row:first-child .col-sm-6:nth-child(2) .form-group:first-child {
        padding-right: 0px;
    }
    .home-news{
        text-align: center;
        padding: 60px 40px 50px;
        font-size: 16px;
        line-height: 24px;
        margin-top: -20px;
    }
    .home-news h2{
        margin-bottom: 8px !important;
    }
    .home-news .btn{
        margin-top: 20px;
    }
    .panel .panel-heading .logo img{
        height: 25px;
        margin-left: 5px;
    }
    .banner .banner-box{
        height: 70vw;
    }
    .to-top{
        margin-bottom: 100px;
    }

    /* addition */
    .section-banner-addition{
        padding-top: 0px;
    }
    .banner-addition .owl-nav button.owl-prev{
        left: 10px;
        font-size: 12px;
    }
    .banner-addition .owl-nav button.owl-next{
        right: 10px;
        font-size: 12px;
    }
    .regis-box .to-back{
        display: none;
    }
    .otp-box .form-control{
        width: 100%;
    }
    .otp-box .box span{
        width: 42px;
        height: 52px;
        margin-right: 6px;
    }
    .otp-box .box span:last-child{
        margin-right: 0px;
    }
    .otp-box .form-control{
        letter-spacing: 36px;
        overflow: hidden !important;
        width: 310px;
    }

    /* 2021-04-19 */
    .article .img{
        height: 50vw;
    }
    .room-card.is-hotel .row:first-child .col-sm-6:first-child .form-group{
        height: 50vw;
    }
    .introjs-tooltip:not(.introjs-bottom-left-aligned){
        top: -190px !important;
        left: 0px !important;
        right: 0px !important;
        margin: 0 auto !important;
        min-height: 100px;
    }
    .introjs-tooltiptext{
        min-height: 100px;    
    }

    /* 2021-06-12 */
    .promotion-box2{
        padding: 25px 0px 20px;
    }
    .promotion-box2 .img{
        width: 100%;
    }
    .promotion-box2 .text{
        width: 100%;
        padding: 15px 0px 0px;
    }
    /* .post-page .post-slide .overlay, #modal-gallery{
        display: block !important;
    } */
    .post-cover .post-slide.owl-carousel .owl-nav button.owl-next, .post-cover .post-slide.owl-carousel .owl-nav button.owl-prev{
        top: 48%;
    }
    .b-manage .room-card .btn-box{
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .b-manage .room-card .btn-box .btn{
        float: initial;
        margin: 0px 5px 5px;
        min-width: 130px;
        padding: 7px 20px;
    }
    .b-manage .room-card .btn-box .btn-delete{
        font-weight: 400;
        border: 1px solid #aaa !important;
    }
    .b-manage .room-card.is-hotel .btn-box {
        margin-top: 20px;
    }
    .admin-box .btn{
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }
    .admin-box .btn span{
        display: none;
    }
    .btn-box-admin .btn{
        margin: 10px 0px;
        width: 100%;
    }

    /* 2021-09-16 */
    .chat{
        height: auto;
    }
    .chat-list{
        height: auto;
        overflow-y: auto;
    }
    .chat-dialog{
        margin-top: 1rem;
        /* display: none; */
        height: calc(100vh - 100px);
    }

    /* 2021-10-25 */
    .tag-box .img{
        width: 150px;
        height: 100px;
        margin-right: 20px;
    }
    .tag-box .text{
        padding: 0px;
        width: calc(100% - 170px);
    }
    .tag-box .text h4{
        white-space: initial;
        font-size: 16px;
        line-height: 20px;
    }
    .tag-box .text p{
        display: none;
    }

    /* 2021-12-06 */
    .step-heart.mobile-verticle .progress{
        left: 36px;
        width: calc(100% - 52px);
    }

    li.tab-business-right,li.tab-business-left{
        min-width: 300px
    }

    .join-us-text-container{
        width: 415px;
        max-width: 100%;
        margin: 0 auto;
    }

    .join-us-cover {
        height: 500px;
    }

    .campaign-box .desc {
        min-height: 42px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0rem 0rem 1rem 0rem;
    }

    footer .dropdown-toggle.dropdown-link {
        margin-bottom: 0px;
    }

    .gallery.owl-carousel .owl-nav button.owl-prev {
        left: 0px;
        color: white;
        font-size: 30px;
    }
    .gallery.owl-carousel .owl-nav button.owl-next {
        right: 0px;
        color: white;
        font-size: 30px;
    }
    .gallery .owl-stage-outer {
        height: 300px; /* ตั้งค่าความสูงที่ต้องการ */
     }
    
     .list-package_route .step-line {
        left: -50px;
    }

    .list-package_route button.slick-prev.slick-arrow {
        right: -10px;
     }
     
     .list-package_route button.slick-next.slick-arrow {
        right: -10px;
     }

    .select.border-under.select-package-order select{
        min-width: 150px;
    }
    .tab .tab-content .pull-right .select-package-order{
        width:unset;
    }
    .search-page #load-more-btn{
        opacity: 0;
    }
}
@media (max-width: 600px){
    .search-result{
        position: absolute;
        left: 0;
    }
    .search-page.for-map .filter{
        width: 305px;
    }
}
@media (max-width: 520px){
    #modal-food.modal.modal-checkbox .radio-select .radio{
        margin-bottom: 0px;
    }
    #modal-food.modal.modal-checkbox .radio-select .radio > label {
        min-width: initial;
        width: calc(50vw - 36px);
        padding: 12px 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-color: #C3C3C3;
    }

    .radio-select.mobile-half .radio > label {
        min-width: initial;
        width: calc(50vw - 36px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-color: #C3C3C3;
    }
    .radio-select.mobile-half .radio > label .text-icon{
        width: auto;
        display: inline-block;
    }

    .mobile-btn-block{
        width: 100% !important;
    }
    .mobile-btn-block .text-icon{
        width: auto;
        display: inline;
    }
    .b-chat .note, .b-schedule .note, .b-quotation .note, .b-news .note, .b-dashboard .note{
        text-align: right;
    }
    .b-chat .note p, .b-schedule .note p, .b-quotation .note p, .b-news .note p, .b-dashboard .note p{
        width: 280px;
        max-width: 100%;
        display: inline-block;
    }
    .b-chat .note br, .b-schedule .note br, .b-quotation .note br, .b-news .note br, .b-dashboard .note br{
        display: none;
    }

    /* 2021-12-06 */
    .input-time .select{
        width: 100%;
    }

    li.tab-business-right,li.tab-business-left{
        min-width: 150px
    }

    .modal-landing-page h1 {
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
        color: #3379b7;
    }

    .campaign-box .desc {
        -webkit-line-clamp: 5;
    }

}

@media (min-width: 992px) {
    .modal .modal-lg {
        width: 1080px;
    }
    .campaign-box .desc {
        min-height: 42px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /* margin: 0rem 1rem 1rem 1rem; */
        margin: 0rem 0rem 1rem 0rem;
    }
}

@media (max-width: 1340px){
    header #menu .dropdown-menu li a{
        white-space: normal;
    }
}