/*--------------------------------------------------------------
- file này chứa tất cả các CSS responsive
--------------------------------------------------------------*/
/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
  */
  @media (min-width: 1281px) {
    a:hover {
        color: #20C063;
    }
    .collapse.dont-collapse-sm {
        display: block;
        height: auto !important;
        visibility: visible;
    }
    .add-favorites:hover {
        background: #20C063;
        color: #fff;
    }
    .add-favorites:hover span.icon-Heart:before {
        color: #fff;
    }
    .btn-outline-custom:hover {
        background: #fff;
        color: #20C063;
        border-color: #fff;
    }
    .btn-outline-custom:hover span.icons:before {
        color: #20C063;
    }
    .btn-full:hover {
        background: transparent;
        color: #fff;
        border: 2px solid #fff;
        padding: 10px 0;
    }
    .btn-full:hover span.icons:before {
        color: #fff;
    }
}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
  */
  @media (min-width: 1025px) and (max-width: 1280px) {
    .collapse.dont-collapse-sm {
        display: block;
        height: auto !important;
        visibility: visible;
    }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
  */
  @media (min-width: 768px) and (max-width: 1024px) {
    .collapse.dont-collapse-sm {
        display: block;
        height: auto !important;
        visibility: visible;
    }
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
  */
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
     .collapse.dont-collapse-sm {
        display: block;
        height: auto !important;
        visibility: visible;
    }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
  */
  @media (min-width: 481px) and (max-width: 767px) {
    .contact-header, .main-menu {
        display: none;
    }
    .show-menu-mobile, .menu-mobile {
        display: block;
    }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
  */
  @media screen and (min-width: 320px) and (max-width: 480px) {
    .div-margin {
        margin-bottom: 32px;
    }
    /* .contact-header, .main-menu, .title-desktop {
        display: none;
        } */
        .show-menu-mobile, .title-mobile, .btn-on-mobile, .make-appointment, .menu-mobile {
            display: block;
        }
        .show-menu-mobile {
            float: right;
            text-align: center;
        }
        .show-menu-mobile.icon-hamburger-menu:before {
            font-size: 30px;
            line-height: 60px;
        }
        .menu-mobile {
            width: 0;
            top: 0;
            overflow-x: hidden;
            transition: 0.5s;
            position: fixed;
            z-index: 999;
            background: #fff;
            right: 0;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.07);
            height: 100vh;
        }
        .menu-mobile .close-menu span.icon-close {
            margin-top: 20px;
            margin-right: 20px;
        }
        .close-menu {
            text-align: center;
            display: inline-block;
            width: 60px;
            float: right;
        }
        .close-menu span.icon-close:before {
            font-size: 20px;
            color: #1A1A1A;
        }
        .menu-mobile ul.navbar-nav > li > a.active-menu {
            color: #20C063;
        }
        .form-banner h2.title-form {
            display: none;
        }
        .banner img.banner-desktop {
            min-height: 350px;
            width: 100%;
        }
        .banner .form-banner {
            padding: 0 15px;
        }
        #hanoi .btn-group {
            margin-bottom: 16px;
        }
        .home-title {
            font-size: 28px;
            line-height: 36px;
        }
        .list-type .type-office {
            min-height: 300px;
        }
        .title-process h2, .title-process p {
            width: 100%;
        }
        .title-process h2 {
            font-size: 28px;
            line-height: 36px;
        }
        .title-process {
            padding-top: 32px;
        }
        .step-process ul {
            margin-top: 0;
        }
        .consultation_process img {
            min-height: 760px;
        }
        .step-process ul li {
            margin-bottom: 16px;
        }
        .experts {
            padding-top: 32px;
        }
        .experts h2.home-title {
            margin-bottom: 24px;
        }
        .experts-desc {
            display: none;
        }
        .wrap-search {
            width: 100%;
        }
        .carousel-expert .owl-prev {
            margin-left: 5px!important;
        }
        .carousel-expert .owl-next {
            margin-right: 5px!important;
        }
        .form-dang-ky {
            min-height: 800px;
        }
        .wrap-form {
            flex-direction: column;
            max-width: 100%;
            padding: 0;
        }
        .desc-form, .home-form {
            width: 100%;
        }
        .home-form {
            padding: 24px 15px;
        }
        .desc-form {
            padding: 32px 15px;
        }
        .form-dang-ky > img {
            max-height: 250px;
        }
        .post-item {
            border: 1px solid #D8D8D8;
            min-height: 300px;
        }
        .home-blog-title {
            padding: 0 15px;
            margin-bottom: 5px;
        }
        .created .author-img, .created .author-name {
            display: none;
        }
        .created .created_at {
            padding: 0 15px 15px;
        }
        .owl-post.owl-carousel {
            display: block;
        }
        .detail-feedback img {
            margin-right: 16px;
            margin-top: 0;
        }
        .info-guest {
            background: #fff;
            border: 0;
            margin-top: 15px;
            padding: 0;
            min-height: 320px;
        }
        .info-guest .guest-name {
            font-size: 18px;
            line-height: 26px;
        }
        .info-guest .guest-cmt {
            position: absolute;
            top: 120px;
            width: 100%;
            left: 0;
        }
        .feedbacks {
            margin-bottom: 48px;
        }
        .blog-post .desc-blog {
            display: none;
        }
        .blog-post h2.home-title {
            margin-bottom: 28px;
        }
        .contact-menu {
            padding: 0 22px;
        }
        .contact-menu li {
            line-height: 48px;
        }
        .contact-menu li a {
            color: #484848;
        }
        .contact-menu li a span {
            color: #20C063;
            font-weight: bold;
        }
        .contact-menu li:first-child {
            margin-top: 10px;
        }
        .contact-menu li:first-child a span {
            margin-right: 15px;
        }
        .contact-menu li:nth-child(2) a span {
            margin-right: 8px;
        }
        .contact-menu li:nth-child(3) a span {
            margin-right: 19px;
            margin-top: 15px;
        }
        .contact-menu li:nth-child(3) a span:before {
            font-size: 25px;
        }
        .contact-menu li:nth-child(3) a {
            display: flex;
        }
        .copy-right {
            padding-top: 10px;
            margin-top: 0;
            height: 130px;
        }
        .copyright, .rules {
            margin-bottom: 10px;
            line-height: 22px;
        }
        .copy-right .rules {
            text-align: left;
        }
        .btn-addon {
            display: block;
        }
        .btn-addon .btn-group {
            width: 100%;
        }
        .btn-addon .btn-call, .btn-addon .btn-subiz {
            width: 50%;
            line-height: 48px;
            text-align: center;
        }
        .btn-addon .btn-call {
            background: #EB5757;
        }
        .btn-addon .btn-call a {
            color: #fff;
        }
        .btn-addon .btn-subiz {
            border: 1px solid #E5E5E5;
            color: #00ADEE;
        }
        .footer {
            border-top: 1px solid #E5E5E5;
        }
        .page-title {
            font-size: 28px;
            line-height: 36px;
        }
        .office-item img {
            max-width: 120px;
            height: auto;
            margin-right: 16px;
        }
        .search-mobile {
            display: block;
            margin-bottom: 32px;
        }
        .search-mobile .search-condition {
            font-weight: 300;
            font-size: 14px;
            border: 1px solid #D8D8D8;
            padding: 15px;
            background: #FAFAFA;
        }
        .search-mobile .popup-search {
            font-weight: 600;
            text-align: center;
            color: #00ADEE;
            margin-top: 16px;
        }
        .popup-mobile {
            display: none;
            position: fixed;
            top: 30px;
            z-index: 999;
            padding-top: 15px;
            padding-bottom: 15px;
            transition: all 5s ease-in-out;
        }
        .overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 500ms;
            visibility: hidden;
            opacity: 0;
            z-index: 0;
        }
        span.icon-close:before {
            color: #1A1A1A;
        }
        .office-item .detail-building {
            padding: 15px 15px 15px 0;
        }
        .detail-building .building-name {
            flex-direction: column;
        }
        .detail-building .building-name .box-favorites-desktop, .detail-building .desc-project {
            display: none;
        }
        .detail-building .address-building, .detail-building .buildin-type, .detail-building .superficies-n-price .superficies {
            font-size: 14px;
        }
        .detail-building .address-building {
            display: flex;
        }
        .superficies-n-price {
            display: block;
        }
        .superficies-n-price .superficies {
            margin-bottom: 15px;
        }
        .superficies-n-price .price {
            font-size: 20px;
            line-height: 40px;
            display: inline-block;
            float: left;
            line-height: 40px;
        }
        .superficies-n-price .price span {
            display: none;
        }
        .close-popup {
            display: block;
        }
        .favorites-mobile {
            display: block;
            float: right;
            width: 40px;
            height: 40px;
            text-align: center;
            border: 1px solid #20C063;
            line-height: 40px;
            border-radius: 2px;
        }
        .favorites-mobile span.icon-Heart {
            font-size: 20px;
        }
        .favorites-mobile.added {
            background: #20C063;
        }
        .favorites-mobile.added span.icon-Heart:before {
            color: #fff;
        }
        .result-single .office-item {
            margin-bottom: 16px;
        }
        .wrap-project .name-n-price,.properties-menu  {
            display: block;
        }
        .properties-menu ul {
            display: none;
        }
        .properties-menu .box-favorites-desktop {
            position: absolute;
            right: 0;
            bottom: 7%;
            padding-top: 9px;
            padding-bottom: 9px;
        }
        .wrap-position {
            position: relative;
        }
        .list-detail li {
            display: block;
        }
        .floor-area {
            flex-direction: column;
        }
        .floor-area span {
            width: 100%!important;
        }
        .btn-register {
            margin-bottom: 48px;
        }
        .download-mobile {
            display: block;
            margin-bottom: 24px;
        }
        .box-contact {
            display: none;
        }
        .form-custom .modal-dialog {
            max-width: 100%;
        }
        .our-desc-top h2.page-title {
            padding: 0 15px;
            max-width: 320px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 25px;
        }
        .our-desc-top .container .row .col-12.col-md-6:last-child {
            padding: 0;
        }
        .our-desc-top .reasons-to-choose ul li {
            text-align: center;
            border-bottom: 1px solid #D8D8D8;
        }
        .our-desc-top .reasons-to-choose ul li h3.sub-title {
            line-height: 60px;
        }
        .our-desc-top .reasons-to-choose ul li p.detail-desc {
            padding: 0px 15px;
            text-align: left;
        }
        .our-advantages .card .card-block {
            padding: 32px 0;
        }
        .our-advantages .card {
            margin-bottom: 15px;
        }
        .my-employees .employee:nth-last-child(1), .my-employees .employee:nth-last-child(2), .my-employees .employee:nth-last-child(3) {
            display: none;
        }
        .my-employees .expert {
            margin-bottom: 32px;
        }
        .wrap-contact {
            margin-top: 24px;
            margin-bottom: 15px;
        }
        .wrap-contact .page-title.title-mobile {
            margin-bottom: 24px;
        }
        .wrap-box-search {
            background: #fff;
            padding: 15px;
            border-radius: 4px;
        }
        .form-scroll {
            max-height: 90vh;
            overflow-y: scroll;
        }
        .form-appointment p.sub-title {
            display: flex;
            text-align: center;
        }
        .form-appointment p.sub-title span.icon-close {
            margin-top: 5px;
        }
        .wrap-page-search {
            margin-bottom: 48px;
        }
        .wrap-breadcrumb {
            margin-bottom: 32px;
        }
        .find-office img {
            min-height: 280px;
        }
        .find-office .content-box-find, .box-find-register, .box-find-office, .box-find-office a {
            display: block;
        }
        .content-box-find .title-find-box {
            padding: 24px 24px 16px 24px;
            margin-bottom: 0;
        }
        .content-box-find .button-group {
            padding: 0 24px 24px 24px;
        }
        .box-find-register, .box-find-office a {
            text-align: center;
        }
        .blog-detail .blog-sidebar {
            display: none;
        }
        .blog-detail {
            margin-bottom: 32px;
        }
        .related-post {
            margin-bottom: 15px;
        }
        .gallery-project {
            margin-top: -32px;
        }
        .properties-menu {
            padding-bottom: 16px;
        }
        .list-detail {
            margin-bottom: 0;
        }
        .wrap-menu-mobile {
            display: block;
        }
        .footer-item {
            margin-bottom: 24px;
        }
        .footer-item .title-footer {
            margin-top: 0;
        }
        .footer-item .title-footer.accordion_mobile {
            margin-bottom: 0;
        }
        .footer-item .title-footer.accordion_mobile:after {
            font-family: "FontAwesome";
            content: "\f107";
            float: right;
        }
        .footer-item .title-footer.accordion_mobile.active:after {
            font-family: "FontAwesome";
            content: "\f106";
            float: right;
        }
        .footer-item ul {
            margin-bottom: 0;
            padding-top: 10px;
        }
        .project-price span:last-child {
            text-align: left;
        }
        .project-price {
            text-align: left;;
        }
        .info-package {
            display: block;
        }
        .property-package.wrap-project .name-n-price {
            padding-bottom: 16px;
        }
        .favorites_link {
            display: inline;
            margin-left: 140px;
            position: relative;
        }
        .favorites_link span.icon-Heart {
            font-size: 25px;
        }
        .favorites_link span.num-favorites {
            color: #fff;
            background: #EB5757;
            font-size: 14px;
            border-radius: 100%;
            position: absolute;
            line-height: 20px;
            width: 20px;
            text-align: center;
            top: -5px;
            right: -8px;
        }
        #tu-van > li {
            margin-left: 10px;
        }
        .full-width .wp-caption img {
            width: 100%;
            height: auto;
        }
        .office-benefit h2.sub-title {
            font-size: 22px;
            line-height: 30px;
        }
        .wrap-utility .utility-left {
            padding-right: 15px;
        }
        .wrap-utility .utility-right {
            padding-left: 15px;
        }
        .detail-utility > p {
            font-size: 22px;
        }
        .detail-utility {
            padding: 16px 16px 24px 16px;
        }
        ul.list_reason {
            list-style: none;
            padding-left: 0;
        }
        ul.list_reason li {
            border-top: 1px solid #D8D8D8;
            padding: 16px 0;
        }
        ul.list_reason li:last-child {
            border-bottom: 1px solid #D8D8D8;
        }
        ul.list_reason li > p:first-child {
            text-align: center;
            font-size: 18px;
            line-height: 26px;
            margin-bottom: 0;
        }
        ul.list_reason li > p:last-child {
            text-align: justify;
            padding: 0 15px;
        }
        .last-order {
            order: 2;
            padding: 0;
        }
        .last-order h2.sub-title {
            display: none;
        }
        .first-order h2.sub-title {
            display: block;
            text-align: center;
        }
        .block-lien-he {
            padding: 24px 16px;
            background-size: cover;
        }
        .contact .btn-outline-custom, .contact .btn-full {
            width: 100%;
        }
        .wp-block-lazyblock-vnb-block-tin-tuc-van-phong {
            padding: 24px 0;
        }
        .last-order .mo_ta_ngan {
            padding: 0 15px;
            margin-top: 15px;
        }
        .description-page {
            padding-left: 15px;
            padding-right: 15px;
        }
        .sub-title {
            font-weight: bold;
            font-size: 22px;
            line-height: 30px;
        }
        .nav-outside .owl-nav button.owl-prev {
            margin-left: 0px;
        }
        .nav-outside .owl-nav button.owl-next {
            margin-right: 0px;
        }
        .card-custom {
         margin-bottom: 16px;
     }
     .office-item .img-office {
        margin-right: 16px;
        max-width: 120px;
    }
    .featured-image {
        margin-top: -30px;
    }
    .carousel-district .owl-item {
        max-height: 202px;
    }
    .gallery-project .owl-item {
        display: flex;
        justify-content: center;
    }
    .box-advisory .btn-register {
        margin-bottom: 0;
    }
    .author_desc {
        width: 100%;
        display: block;
    }
    .author_info h2.page-title {
        text-align: center;
    }
    .author_desc .avatar_author, .sale-avatar {
        margin-left: auto;
        margin-right: auto;
    }
    .avatar_author, .sale-avatar {
        margin-bottom: 24px;
    }
    .list-district .district {
        margin-bottom: 16px;
    }
    .item-district .name  {
        margin-bottom: 16px;
    }
    .sale-info {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .sale-profile {
        margin-bottom: 32px;
    }
    .home-title {
        font-weight: bold;
        font-size: 28px;
        line-height: 36px;
    }
    .sub-title {
        font-weight: bold;
        font-size: 22px;
        line-height: 30px;
    }
    .page-title {
        font-weight: bold;
        font-size: 28px;
        line-height: 36px;
    }
    .content-blog h2 {
    	font-weight: bold;
    	font-size: 22px;
    	line-height: 30px;
    }
    .content-blog h3 {
    	font-weight: bold;
    	font-size: 18px;
    	line-height: 26px;
    }
    .content-blog h4 {
    	font-weight: bold;
    	font-size: 16px;
    	line-height: 24px;
    }
    .contact-menu .dropdown_language > .btn {
        background: #fff;
        padding-left: 0;
    }
    .contact-menu .dropdown_language .dropdown-menu {
        left: 0!important;
    }

    /* update css menu mobile */
    .menu-mobile ul {
        list-style: none;
    }
    .menu-mobile .menu {
        float: left;
        padding: 0 20px;
        width: 100%;
    }
    .menu-mobile .menu > li > a {
        font-weight: bold;
        color: #484848;
    }
    .menu-mobile ul ul.sub-menu {
        padding-left: 10px;
    }
    .menu-mobile > ul.menu > li > ul.sub-menu {
        overflow: hidden;
        height: 0;
    }
    .menu-mobile > ul.menu > li.menu-item-has-children > a::after {
        content: "\f078";
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        float: right;
        margin-top: 15px;
    }
    .menu-mobile > ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
        color: #484848;
        font-weight: 300;
        font-size: 14px;
        width: 100%;
        display: block;
        line-height: 22px;
        margin-bottom: 18px;
    }
}

@media (max-width: 320px) {
    #popup-resquest .modal-content {
        height: 400px;
        overflow-y: scroll;
    }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    .popup {
        width: 100%;
        height: 504px;
        position: fixed;
        bottom: -198px;
        background: white;
        z-index: 9999;
        border-radius: 24px 24px 0 0;
    }
    .popup h2 {
        margin-bottom: 24px;
    }
    .popup p {
        font-size: 16px;
        line-height: 26px;
        font-weight: 400;
        color: #222222;
        margin-bottom: 8px;
    }
    .popup-header p {
        font-size: 20px;
        line-height: 28px;
        font-weight: 600;
        color: #222222;
    }
    .popup select {
        width: 100%;
        height: 48px;
        border-radius: 8px;
        margin-bottom: 32px !important;
        border-color: #e5e5e5;
        text-indent: 16px;
        color: gray;
    }
    select .gray-text {
        color: #c0c0c0;
    }
    .popup-submit {
        width: 100%;
        height: 48px;
        background: #62d291;
        color: white;
        border-radius: 8px;
        margin-top: 12px;
        border: hidden;
    }
}