@media (max-width: 1199px){
    .popup-line{
        display: none;
    }
}
@media (max-width: 991px){
    /* 2020-11-28 */
    header .nav-menu{
        display: none;
    }
    .banner .text{
        text-align: center;
    }
    .home-method .banner, .banner .banner-slide{
        width: 85%;
    }
    .benefit-box .bg{
        height: 250px;
    }
    .benefit-box .text p{
        font-size: 16px;
        line-height: 24px;
    }
    footer .inner{
        padding-left: 0px;
        padding-right: 150px;
        padding-bottom: 40px;
    }
    footer .copyright{
        top: auto;
        bottom: 0px;
        left: 18px;
    }

    /* 2022-09-12 */
    .box-half .item {
        height: 385px;
    }
}

@media (max-width: 767px){
    header{
        background: #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(210,210,210,0.50);
    }
    .navbar{
        height: 60px;
    }
    .navbar .navbar-header{
        padding: 3px 20px;
    }
    .navbar .navbar-brand{
        height: 45px;
    }
    .navbar .navbar-toggle{
        margin: 0px;
        border: 0px;
        padding: 15px 0px;
        background: transparent !important;
    }
    .navbar .navbar-toggle .icon-bar{
        background-color: #000;
        border-radius: 0px;
        height: 2px;
    }
    .navbar #menu{
        width: 372px;
        max-width: 80vw;
        height: 100%;
        position: fixed;
        z-index: 2000;
        top: 0px;
        right: -100%;
        padding: 20px 0px;
        text-align: center;
        background: #FFFFFF;
        box-shadow: -5px 0 13px 0 rgba(205,205,205,0.50);
        overflow-y: auto;
    }
    body #menu, body header, body{
        transition: .3s ease 0s;
    } 
    .navbar .nav-menu-brand{
        display: block;
        width: 90px;
        margin: 0 auto;
    }
    .navbar .nav-menu-brand img{
        width: 100%;
    }
    .navbar li a{
        font-weight: 500;
        font-size: 14px;
        color: #555555;
        padding: 18px 15px;
    }
    .navbar #menu ul{
        padding: 30px 0px;
        border-bottom: 1px solid #DADADA;
        margin: 0px auto 10px;
        width: calc(100% - 40px);
    }
    .navbar .navbar-social{
        display: block;
    }
    .navbar .navbar-nav.navbar-right{
        margin: 0px;
    }
    .navbar-user{
        text-align: left;
        border-bottom: 1px solid #DADADA;
        margin: 0px auto;
        padding-bottom: 10px;
        width: calc(100% - 40px);
        padding-top: 0px;
    }
    #wrapper{
        padding: 60px 0px 0px 0px;
    }
    .banner{
        margin: 0px;
        padding: 30px 20px;
    }
    .banner .img{
        padding-left: 0px;
    }
    .banner .bg{
        left: -20px;
        right: -20px;
        width: auto;
        height: 55vw;
    }
    .banner .img span{
        font-size: 16px;
        color: #000000;
        letter-spacing: 2.5px;
        text-align: center;
        left: -34px;
        bottom: 0px;   
        font-weight: 900;
    }
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    .btn-md {
        font-size: 14px;
        line-height: 22px;
        padding: 9px 15px;
    }
    .banner .text{
        margin-top: 15px;
        margin-left: -35px;
        width: calc(100% + 70px);
        max-width: initial;
    }
    .banner .text h1{
        font-size: 24px;
        line-height: 28px;
        letter-spacing: 1.5px;
        margin-bottom: 15px;
        width: 240px;
        margin: 10px auto 18px;
        display: inline-block;
    }
    .banner .text p {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 0px;
    }
    .banner .text .btn{
        margin-top: 20px;
        width: 192px;
    }
    section{
        padding: 30px 0px;
    }
    .title{
        margin: 15px 0px;
    }
    .title h1{
        font-size: 24px;
        line-height: 34px;
    }
    .title.is-line-left{
        padding: 0px;
        padding-top: 15px;
        margin-top: 15px;
        text-align: left;
    }
    .title.is-line-left .line {
        width: 35px;
        top: 0px;
    }
    .title .line {
        width: 35px;
        height: 4px;
    }
    .home-method{
        padding-top: 0px;
    }
    .home-banner{
        padding-bottom: 10px;
    }
    .method .icon {
        width: 42px;
        left: 15px;
        top: 10px;
    }
    .method{
        font-size: 14px;
        line-height: 24px;
        margin: 8px 0px;
    }
    .method h3 {
        font-size: 18px;
        line-height: 29px;
    }
    .method .inner{
        margin-bottom: 35px;
        text-align: left;
    }
    .method .inner:after{
        left: 30px;
    }
    .btn.has-minwidth{
        min-width: 192px;
    }
    .home-method{
        text-align: center;
    }
    .img-home-method{
        display: none;
    }
    .title.is-line-top{
        text-align: center;
        padding-top: 20px;
    }
    .title.is-line-top .line{
        width: 35px;
        top: 0px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .benefit{
        background: #fff;
        padding: 0px;
    }
    .benefit-box{
        width: 100%;
        position: relative;
        background: #fff;
        padding: 18px 0px 18px 60px;
        min-height: 85px;
    }
    .benefit-box::before{
        content: '';
        position: absolute;
        left: -30px;
        top: 0px;
        border-top: 1px solid #E8E8E8;
        width: calc(100% + 60px);
    }
    .benefit-box .icon{
        display: inline-block;
    }
    .benefit-box .bg{
        display: none;
    }
    .benefit-box .text{
        height: auto;
        padding: 0px;
        display: table;
        min-height: 48px;
    }
    .benefit-box .text p{
        font-size: 14px;
        line-height: 24px;
        font-weight: 700;
        text-align: left;
    }
    .home-benefit{
        padding-bottom: 0px;
    }
    .for-desktop{
        display: none;
    }
    .for-mobile{
        display: block;
    }
    .home-client .bg-img{
        height: 98vw;
    }
    .home-client .title.is-line-top{
        padding-top: 0px;
        padding-bottom: 15px;
    }
    .home-client .title.is-line-top .line{
        top: auto;
        bottom: 0px;
    }
    .comment{
        margin-bottom: 15px;
    }
    .comment .text{
        font-size: 14px;
        line-height: 28px;
        padding: 45px 25px 20px;
    }
    .comment .text:after {
        width: 16px;
        height: 14px;
        top: 20px;
        left: 24px;
    }
    .comment .user{
        font-size: 16px;
        line-height: 19px;
        min-height: 60px;
        display: inline-block;
        padding-left: 70px;
        padding-top: 15px;
    }
    .comment .user .bg {
        width: 60px;
        height: 60px;
    }
    .comment .user .name{
        min-height: initial;
    }
    .home-welcome .bg-img{
        margin-left: -20px;
        margin-right: -20px;
        width: auto;
        height: 75vw;
    }
    h1{
        font-size: 24px;
        line-height: 36px;
    }
    .home-welcome{
        padding-bottom: 60px;
    }
    .home-welcome .text h1{
        margin-bottom: 15px;
        margin-top: 20px;
    }
    footer{
        padding: 30px 15px 35px;
    }
    footer .inner{
        padding: 0px 0px 30px;
    }
    footer .copyright{
        position: absolute;
        bottom: 0px;
        left: 0px;
        top: auto;
    }
    footer .menu li {
        float: left;
        display: inline-block;
        width: 50%;
    }
    footer .menu li a {
        padding: 18px 0px;
    }
    footer .social{
        position: relative;
        width: 100%;
        text-align: left;
        margin-top: 15px;
        margin-left: -5px;
        margin-right: -5px;
    }
    footer .social .circle {
        width: 45px;
        height: 45px;
        line-height: 42px;
        margin: 5px;
    }
    footer .social .circle img {
        height: 20px;
        filter: grayscale(1);
    }
    .about-banner .text-box{
        position: relative;
        right: 0px;
        left: 0px;
    }
    .about-page{
        margin-top: 35px;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 0px;
        padding: 0px 20px !important;
        max-width: calc(100% + 40px);
    }
    .about-page section{
        padding: 0px 20px;
    }
    .about-banner .img{
        width: 90vw;
        margin-left: -20vw;
    }
    .about-banner .img img{
        width: 100% !important;
        margin: 0px !important;
    }
    .about-banner .highlight {
        font-size: 80px;
        line-height: 94px;
        top: 61px;
        left: 100%;
        right: auto;
        margin-left: -81px;
    }
    .title h2 {
        font-size: 24px;
        line-height: 36px;
    }
    .text-box{
        font-size: 16px;
        padding: 20px 0px 50px;
    }
    .about-page img{
        width: 100%;
        margin-left: -20px;
        width: calc(100% + 40px);
        max-width: initial;
    }
    .about-page .title{
        padding-bottom: 10px;
        margin-bottom: 25px;
    }
    .tab ul{
        width: 100%;
        display: inline-block;
    }
    .tab ul li, .tab ul li:hover{
        float: left;
        width: 50%;
        margin: 0px;
        min-width: auto !important;
        height: 40px;
        line-height: 40px;
        padding: 0px;
    }
    .tab ul li a{
        padding: 0px 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        overflow: hidden;
    }
    .tab {
        margin: 5px 0px 20px;
    }
    .tab .method{
        margin-top: 0px;
    }
    .payment-step .inner{
        padding-top: 50px;
        margin-bottom: 60px;
        margin-top: 5px;
    }
    .payment-step span{
        font-size: 50px;
        line-height: 60px;
        top: -35px;
    }
    .payment-step h2{
        font-size: 20px;
        line-height: 25px;
    }
    .payment-step .col-sm-6:last-child .inner{
        margin-bottom: 0px;
    }
    .payment-format h3{
        margin-top: 0px;
        margin-bottom: 3px;
    }
    .payment-format .two{
        padding: 30px 15px 0px;
    }
    .payment-format b{
        font-weight: 600;
    }
    .icon-list{
        margin-top: 0px;
    }
    .icon-list img{
        zoom: 0.8;
    }
    .icon-list .box{
        padding-left: 38px;
    }
    .icon-list .box:first-child {
        padding-left: 25px;
    }
    .payment-format{
        margin-top: -22px;
    }
    .payment-format .two .col-sm-6:first-child .icon-list{
        margin-bottom: 30px;
        margin-top: 0px;
    }
    .payment-format .row{
        margin: 0px -10px;
    }
    .payment-format .line{
        display: none;
    }
    .payment-format .col{
        padding: 25px 10px 20px;
        border-bottom: 1px solid #D7D7D7;
        position: relative;
    }
    .payment-format .col .col{
        padding: 0px 10px;
        border: 0px;
    }
    .section-payment{
        text-align: center;
        margin-bottom: 30px;
    }
    .section-payment h2{
        margin-bottom: 30px;
    }
    .payment-package .box{
        margin: 0px auto 60px;
        display: inline-block;
    }
    #styling-page .title{
        margin-top: 0px;
        margin-bottom: 0px;
        margin: 0 auto;
        text-align: center;
    }
    #styling-page .title h1{
        width: 280px;
        max-width: 100%;
        float: initial;
        margin: 0 auto;
    }
    .styling {
        margin: 30px auto 60px;
    }
    .styling .img {
        padding: 16px;
    }
    .styling .img:before, .styling .is-reverse .img:before {
        right: 0px;
        top: 0px;
        left: auto;
        width: 55%;
        height: 70%;
    }
    .styling .text-box{
        padding: 15px 0px 0px;
    }
    .styling .text-box .title h2 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .styling .more {
        font-size: 16px;
        line-height: 26px;
        margin-top: 15px;
    }
    .styling .text-box .title .line{
        width: 62px;
    }
    .cover{
        height: 70vw;
        overflow: hidden;
    }
    .cover .bg{
        background-size: 200% auto;
        background-position: center 10%;
    }
    .styling-detail{
        padding: 5px 0px;
    }
    .styling-detail .title{
        margin-bottom: 20px;
    }
    .styling-detail .title h1 {
        font-size: 22px;
        line-height: 28px;
    }
    .styling-detail .title h2{
        font-size: 26px;
        line-height: 30px;
    }
    .styling-detail {
        font-size: 14px;
        font-weight: 400;
    }
    .styling-detail .text-center{
        text-align: left;
    }
    .styling-detail b{
        margin: 5px 0px;
        display: inline-block;
    }
    .styling-detail .col-sm-8, .styling-detail .col-sm-6{
        padding: 0px;
    }
    section:first-child .container > .title{
        margin-top: 5px;
    }
    .panel-group{
        margin-top: 0px;
    }
    .panel-default>.panel-heading .panel-title, .panel-default > .panel-heading .panel-title.collapsed{
        font-size: 16px;
        line-height: 26px;
        padding: 12px 30px 12px 15px;
    }
    .panel-default>.panel-heading+.panel-collapse>.panel-body {
        font-size: 13px;
        line-height: 24px;
        padding: 0px 15px 15px;
    }
    .panel-default > .panel-heading .panel-title i{
        right: 15px;
        top: 15px;
    }
    .panel{
        border-color: #E9E9E9;
    }
    .find-form{
        margin-top: 10px;
    }
    .hide-find{
        margin-top: 30px;
        margin-bottom: 0px;
    }
    #map {
        margin-top: 20px;
        margin-bottom: 20px;
        height: 400px;
    }
    .contact-detail{
        color: #131313;
        width: 275px;
        margin: -10px auto 0px;
    }
    .contact-detail .inner{
        min-height: auto;
        width: 100%;
        padding: 20px 25px 20px;
        height: auto;
    }
    .contact-detail .inner::before{
        border: 0px;
        border-top: 1px solid #E0E0E0;
        width: 160px;
        max-width: 100%;
        top: 0px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .contact-form h2 {
        font-size: 16px;
        line-height: 26px;
        width: 250px;
        margin-bottom: 20px;
    }
    .contact-form{
        margin-top: 20px;
    }
    .contact-form form label:not(.input-error){
        font-weight: 700;
    }
    .contact-form .btn-save {
        margin-top: 10px;
        font-size: 14px;
        line-height: 20px;
        width: 192px;
    }
    .modal .modal-dialog{
        margin: 30px auto;
    }
    .signin{
        margin-bottom: 20px;
    }
    .signin .title{
        margin: 5px 0px 0px;
    }
    .signin .btn-google{
        background: #fff;
    }
    .signin .btn-google img{
        height: 19px;
    }
    .signin .or{
        font-size: 16px;
        line-height: 26px;
        margin: 25px 0px 10px;
    }
    .signin .btn-submit {
        margin-top: 25px;
    }
    .signin .btn {
        padding: 14px;
        font-size: 16px;
        line-height: 18px;
        font-weight: 600;
    }
    footer:before{
        background-size: cover;
    }
    .status-page, .forget-page{
        width: auto;
        margin-left: -25px;
        margin-right: -25px;
        max-width: initial;
    }
    .status-page h1, .forget-page h1{
        margin-top: 10px;
        font-size: 24px;
        line-height: 34px;
    }
    .forget-page p {
        font-weight: 500;
        font-size: 16px;
        margin-bottom: 25px;
        margin-top: 3px;
    }
    .forget-page .form-group {
        margin-bottom: 25px;
    }
    .status-page .btn, .forget-page .btn {
        margin: 8px 5px;
        min-width: 160px;
    }
    .status-page h1{
        margin-top: 15px;
    }
    .status-page p{
        margin-top: 0px;
    }
    .status-page .icon, .forget-page .icon{
        width: 54px;
    }
    .q-welcome{
        margin-bottom: 30px;
    }
    .q-welcome .title img {
        width: 55px;
        margin-bottom: 20px;
    }
    .q-welcome .title h1 {
        font-size: 21px;
        line-height: 32px;
    }
    .q-welcome .title {
        margin-bottom: 30px;
    }
    .q-welcome .btn-prev-next {
        margin-top: 25px;
    }
    .q-welcome .form-input {
        width: 100%;
    }
    .q-welcome .has-error .input-error{
        margin-top: 5px;
    }
    .why-list{
        margin-top: 0px;
        margin-bottom: 30px;
    }
    .why-list .checkbox {
        border-radius: 25px;
        margin-bottom: 22px;
        min-height: 43px;
        line-height: 36px;
    }
    .why-list .checkbox.active {
        line-height: 32px;
    }
    .q-step{
        position: relative;
        padding: 0px 0px 70px;
        margin-bottom: 30px;
        font-size: 12px;
        line-height: 14px;
        margin-top: -8px;
    }
    .q-step h1{
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        font-size: 28px;
        line-height: 33px;
        top: auto;
    }
    .q-step .step{
        float: initial;
        width: 100%;
        display: inline-block;
        margin-left: -32px;
        width: calc(100% + 62px);
    }
    .q-step .inner {
        width: 25%;
        padding-top: 30px;
    }
    .q-step .circle {
        border: 4px solid #4AC6C1;
        width: 22px;
        height: 22px;
    }
    .q-step .inner:after {
        top: 11px;
        border-width: 1px;
    }
    .q-form label:not(.input-error){
        font-size: 16px;
        line-height: 26px;
        margin: 0px 0px 6px;
        padding-right: 0px;
        margin-right: 8px;
    }
    .form-control, .form-control:focus{
        padding-left: 15px;
        padding-right: 15px;
    }
    .q-form hr, .q-summary hr, .order-list-detail hr{
        border: 4px solid #F5F5F5;
        margin: 15px 0px 15px -20px;
        width: calc(100% + 40px);
    }
    .q-form label:not(.input-error) .btn-info {
        position: relative;
        right: auto;
        left: 6px;
        top: 5px;
    }
    .table-shape{
        width: 100%;
    }
    .q-form .radio label:not(.input-error), .q-form .checkbox label:not(.input-error){
        margin: 0px;
        font-size: 14px;
        line-height: 22px;
    }
    .table-shape th{
        width: 120px;
    }
    .table-shape tr:last-child th, .table-shape tr:last-child td{
        padding-bottom: 0px !important;
    }
    .form-skin label:not(.input-error){
        margin-top: 15px;
    }
    .form-skin .box-select{
        margin-top: -12px;
    }
    .box-select.square .radio, .box-select.square .checkbox {
        margin: 15px 10px 10px;
    }
    .box-select .twin{
        margin: 20px 10px 5px;
    }
    .box-select.square .radio label, .box-select.square .checkbox label {
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .label-size{
        font-size: 17px !important;
        margin-bottom: 30px !important;
    }
    .q-form .mask {
        margin-top: 6px;
    }
    .q-form .select2{
        padding: 0px;
        margin-bottom: 18px;
    }
    .q-form .col-sm-6:last-child .select2{
        margin-bottom: 0px;
    }
    .q-form .btn-prev-next {
        margin-top: 0px;
    }
    .q-form .radio-inline .radio, .q-form .checkbox-inline .checkbox {
        margin-right: 60px;
    }
    .title-style{
        display: inline-block;
        margin: 0px;
    }
    .title-style i{
        display: inline-block;
    }
    .box-like{
        margin-top: 10px;
    }
    .box-like .row {
        margin-left: -8px;
        margin-right: -8px;
    }
    .box-like .col {
        padding: 0px 8px;
        width: 50%;
        float: left;
    }
    .box-like .checkbox label{
        padding: 10px;
    }
    .box-like .checkbox .bg{
        height: 50vw;
    }
    .box-like .checkbox{
        margin: 10px 0px;
    }
    .box-like .checkbox i{
        font-size: 26px;
    }
    .box-color .checkbox span {
        top: -25px;
    }
    .box-color .checkbox {
        margin-top: 45px;
    }
    .no-margin-mobile {
        margin: 0px;
    }
    .sub-label {
        font-size: 14px;
        line-height: 24px;
        margin: 8px 0px 0px;
    }
    .add-social{
        margin: 25px 0px 0px;
    }
    .add-social .form-group {
        margin-bottom: 25px;
    }
    .input-photo .btn{
        padding: 8px 15px;
    }
    .title.has-icon{
        padding: 60px 0px 0px;
        text-align: center;
    }
    .title.has-icon img{
        top: 0px;
        left: 0;
        right: 0;
        margin: 0 auto;
        height: 45px;
        width: auto;
    }
    .q-summary .title.has-icon{
        margin-top: 0px;
    }
    .q-summary .head{
        margin-top: 22px;
    }
    .q-summary .head h2{
        font-size: 22px;
        line-height: 34px;
    }
    .slide-style{
        margin-left: -20px;
        margin-right: -20px;
    }
    .slide-style.owl-carousel .owl-stage{
        padding-left: 20px !important;
    }
    .slide-style .item{
        height: 45vw;
        padding: 10px;
    }
    .q-summary .detail > .inner{
        border-bottom: 0px;
        position: relative;
        display: inline-block;
        width: 100%;
    }
    .q-summary .detail > .inner:not(:last-child):after{
        content: '';
        position: absolute;
        bottom: -5px;
        left: -20px;
        height: 8px;
        background: #F5F5F5;
        width: calc(100% + 40px);
    }
    .q-summary .body .row{
        padding-bottom: 22px;
    }
    .q-summary .btn-prev-next{
        margin-bottom: 30px;
    }
    .box-question .title{
        margin-top: 0px;
        margin-bottom: 25px;
    }
    .box-question .radio{
        width: 100%;
    }
    .box-question .checkbox{
        margin: 8px 0px 4px;
    }
    .box-question .form-group.no-margin-bottom{
        margin-bottom: 15px !important;
    }
    .box-question .radio small, .box-question .checkbox small{
        display: inline-block;
    }
    .slider-box .slider .slider-handle {
        width: 20px;
        height: 20px;
        border: 4px solid #4AC6C1;
        top: -4px;
    }
    .slider-box .slider .slider-selection{
        border-width: 2px;
        top: -1px;
    }
    .slider-box .thumb-end, .slider-box .thumb-start{
        font-size: 16px;
    }
    .slider-box .slider-start, .slider-box .slider-end{
        font-size: 16px;
    }
    .slider-box .slider-title {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 3px;
    }
    .slider-box{
        margin-bottom: 30px;
        margin-top: 20px;
    }
    .slider-result hr{
        margin: 40px -20px 12px;
    }
    .q-package .title h1, .q-package .title h2, .q-package .title h3 {
        font-size: 24px;
        line-height: 37px;
        color: #555;
        margin-bottom: 5px;
    }
    .q-package .title{
        text-align: center;
        color: #4AC6C1;
        margin-top: 0px;
        margin-bottom: 35px;
    }
    .payment-package {
        text-align: center;
    }
    .q-package .input-error {
        font-size: 15px;
        text-align: center;
    }
    .payment-result{
        padding: 0px;
    }
    .payment-result .title{
        margin-top: 0px;
    }
    .q-payment:before{
        display: none;
    }
    .payment-result .price {
        margin-top: -3px;
    }
    .payment-result .price .inner.is-price label{
        font-size: 12px;
        line-height: 16px;
    }
    .payment-result .price .inner{
        width: 100%
    }
    .payment-result .price .inner.is-price {
        text-align: left;
    }
    .payment-result .price .inner.is-pack label{
        width: 100%;
    }
    .payment-result .price .inner.is-pack p{
        font-size: 14px;
        margin: 5px 0px 10px;
    }
    .payment-result .price .inner.is-price p {
        font-size: 28px;
        line-height: 36px;
    }
    .payment-result .list .inner:first-child .btn-edit{
        top: 20px;
        margin-top: 0px;
    }
    .payment-result .list label{
        margin-bottom: 3px;
    }
    .payment-method{
        padding: 0px;
        width: 100%;
    }
    .payment-result .list .inner:after{
        left: -20px;
        width: calc(100% + 40px);
    }
    .payment-result .list .inner:last-child:before{
        content: '';
        bottom: 0px;
        left: -20px;
        border-top: 1px solid #DDDDDD;
        width: calc(100% + 40px);
        position: absolute;
    }
    .payment-tab > .head{
        width: 100%;
        font-size: 12px;
    }
    .payment-tab > .head > .box {
        width: calc(33.33% - 8px);
        margin: 0px 6px;
    }
    .q-payment{
        border-bottom: 0px;
        position: relative;
    }
    .q-payment:after{
        content: '';
        position: absolute;
        bottom: -5px;
        left: -20px;
        height: 8px;
        background: #F5F5F5;
        width: calc(100% + 40px);
    }
    .payment-tab > .body {
        padding-top: 10px;
    }
    .qr-code{
        margin-bottom: 15px;
    }
    .bill .bill-title {
        padding: 0px 10px;
    }
    .bill-tab{
        margin-left: -20px;
        margin-right: -20px;
        width: auto;
        margin-bottom: 0px;
    }
    .bill-tab > .body {
        padding: 20px 20px;
    }
    .pdf-box object {
        width: 100%;
        height: 85vw;
    }
    .sms-box .resend {
        color: #4A90E2;
        text-align: center;
        margin-top: 8px;
        display: inline-block;
        width: 100%;
    }
    .sms-box .form-group {
        margin-top: 15px;
    }
    .q-payment .title {
        margin-top: 20px;
    }
    #thankyou .status-page .icon {
        width: 80px;
    }
    .status-page p, .forget-page p{
        font-size: 16px;
        line-height: 26px;
    }
    #thankyou p{
        margin-top: 10px;
    }
    #thankyou {
        padding: 0px 20px 20px;
    }
    #thankyou p br{
        display: none;
    }
    #thankyou .btn-box{
        margin-top: 15px;
    }
    .status-page .btn-box, .forget-page .btn-box{
        margin-top: 25px;
    }
    #thankyou .status-page .other-link {
        margin-top: 40px;
    }
    .status-page .other-link, .forget-page .other-link {
        font-size: 14px;
        line-height: 24px;
        margin-top: 15px;
    }
    .status-page .other-link a, .forget-page .other-link a {
        padding: 10px;
    }
    .modal .modal-body{
        padding: 30px 20px;
    }
    .modal .img-center img {
        margin-bottom: 30px;
    }    
    .navbar-member li{
        padding: 0px;
        width: 33.33%;
    }
    .navbar-member li a{
        float: left;
        padding: 25px 5px 10px;
        text-align: center;
        width: 100%;
        position: relative;
        display: inline-block;
        font-size: 12px;
        line-height: 19px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 12px;
    }
    .navbar-member li a i{
        top: 0px;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: none;
    }
    .navbar-member .container{
        padding: 0px;
    }
    .navbar-member li.active:before{
        height: 3px;
    }
    .navbar-member{
        top: 60px;
    }
    .order:after{
        display: none;
    }
    .order-list{
        border-left: 0px;
        position: fixed;
        left: -320px;
        top: 135px;
        z-index: 1000;
        transition: .3s ease 0s;
        width: 320px;
        display: none;
    }
    .has-toggle-menu .order-list{
        display: block;
    }
    .order-list.open{
        left: 0px;
    }
    .order-list .toggle{
        display: block;
        position: absolute;
        top: 8px;
        right: 9px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        cursor: pointer;
    }
    .order-list .toggle img{
        width: 100%;
        height: 100%;
    }
    .order-list .head h2{
        display: none;
    }
    .order-list > .head .btn-add {
        position: relative;
        top: 0px;
        right: auto;
    }
    .order-list .list{
        padding: 18px;
        padding-left: 8px;
        border-bottom: 1px solid #DDD;
    }
    .order-list .list.active:after{
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 8px solid #fff;
        border-left: 0px;
    }
    .order-list .list .text {
        font-size: 12px;
        line-height: 19px;
        width: calc(100% - 62px);
    }
    .order-list .list .icon {
        width: 62px;
        padding: 8px;
    }
    .order-list > .head{
        padding: 12px 20px;
        width: calc(100% + 50px);
        padding-right: 50px;
        border-radius: 0px 35px 35px 0px;
        box-shadow: 0 1px 6px 0 rgba(152,152,152,0.50);
        background: #fff;
        position: relative;
        z-index: 2;
        height: 50px;
    }
    .order-list > .body{
        box-shadow: 0 1px 6px 0 rgba(152,152,152,0.50);
        position: relative;
        background: #fff;
        padding-left: 10px;
        max-height: 72vh;
        overflow-y: auto;
    }
    .order-list > .head:before{
        content: '';
        position: absolute;
        bottom: -5px;
        height: 5px;
        width: calc(100% - 50px);
        background: #fff;
        z-index: 5;
        left: 0px;
    }
    .order-list > .head .select2{
        margin: 0px;
        min-height: 35px;
        margin-top: -3px;
        width: 94%;
    }
    .btn-xs{
        padding: 2px 8px;
    }
    .order-status{
        margin-top: 4px;
    }
    .btn-add{
        padding-left: 30px;
    }
    .order-list-detail{
        width: 100%;
        padding: 0px;
        margin-top: 25px;
    }
    .has-toggle-menu .order-list-detail{
        margin-top: 65px;
    }
    .order-detail > .head h1{
        display: block;
        margin: 0px;
        font-size: 20px;
        line-height: 30px;
    }
    .order-detail > .head {
        font-size: 12px;
        line-height: 20px;
    }
    .order-detail > .head .no {
        font-size: 16px;
        line-height: 26px;
    }
    .order-detail > .head .sort{
        bottom: 0px;
        top: auto;
    }
    .order-status .item{
        padding-right: 0px;
        padding-left: 48px;
    }
    .order-status .item .box:before{
        transform: rotate(45deg) skew(-8deg, -8deg);
    }
    .order-status .item .no{
        font-size: 14px;
        line-height: 26px;
        border-width: 2px;
    }
    .btn-back{
        padding-left: 32px;
    }
    .order-payment-detail h3, .order-list-detail h3{
        font-size: 20px;
        line-height: 31px;
        margin-bottom: 3px;
        margin-top: 15px;
    }
    .order-payment-detail .order-logo, .order-payment-detail .order-no{
        margin-top: 20px;
    }
    .order-table{
        margin-left: -20px;
        margin-right: -20px;
        width: auto;
        max-width: initial;
        border: 0px;
        border-top: 1px solid #979797;
        width: calc(100% + 48px);
    }
    .order-table>tbody>tr>td, .order-table>thead>tr>th{
        border-top: 0px;
        border-bottom: 0px;
        font-size: 12px;
        font-weight: 500;
        padding: 8px 10px;
        background: #fff;
    }
    .order-table>thead>tr>th, .order-table>tbody>tr>td:last-child{
        font-weight: 700;
    }
    .order-table>tbody>tr.table-footer>td {
        font-weight: 700;
        background: #F3FFFF;
    }
    .order-table>tbody>tr.table-footer>td:first-child {
        font-size: 14px;
    }
    .order-payment-detail .order-mask {
        margin-top: 20px;
    }
    .order-payment-detail .order-total {
        padding: 20px 20px;
        margin: 25px -20px 0px;
        border-top: 7px solid #F4F4F4;
        border-bottom: 7px solid #F4F4F4;
        width: auto;
    }
    .order-method .radio {
        margin-top: 30px;
    }
    .feedback-page .order-method .radio {
        margin-top: 15px;
    }
    .feedback-page .order-method h5 {
        font-size: 17px;
        line-height: 26px;
    }
    .feedback-page .attach h3{
        font-size: 18px;
        font-weight: 600;
        margin-top: 20px !important;
    }
    .order-payment .payment-method .title{
        margin-top: 0px;
    }
    .order-list-detail .btn-prev-next{
        margin: 0px;
        margin-top: 10px;
    }
    .order-list-detail .btn-prev-next button{
        width: 100%;
        margin: 0px;
    }
    .order-list-detail  .payment-tab > .body{
        padding-bottom: 15px;
    }
    .order-status-detail .order-no {
        padding: 8px 15px;
        background: #F6F6F6;
    }
    .order-status-detail .order-no .col {
        width: 100%;
        padding: 0px 0px;
        text-align: left !important;
        font-size: 12px;
    }
    .order-status-detail .order-graph{
        position: relative;
        padding: 0px;
    }
    .order-status-detail .order-graph .chart-pie{
        position: relative;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
    .order-status-detail .order-graph .chart-status{
        display: inline-block;
        margin-top: 30px;
        padding-left: 20px;
    }
    .order-status-detail .order-graph .chart-status .item, .order-status-detail .order-graph .chart-status .date{
        font-weight: 600;
    }
    .order-result .btn-edit{
        font-weight: 700;
    }
    .order-summary .product {
        position: relative;
        display: inline-flex;
        overflow-x: auto;
        max-width: 100%;
    }
    .order-summary .product.is-list{
        display: inline-block;
    }
    .order-result{
        border-bottom: 7px solid #F5F5F5;
        margin-left: -20px;
        margin-right: -20px;
        padding: 20px;
    }
    .order-result:nth-child(2)
    {
        margin-bottom: 30px;
    }
    .order-result h3{
        margin-top: 0px;
    }
    .order-result .result .col{
        border-bottom: 1px solid #E4E4E4;
        padding-bottom: 10px;
        margin-top: 12px;
        margin-bottom: 0px;
    }
    .order-result .mask {
        margin-top: 20px;
    }
    .order-result .bank .detail p{
        font-size: 12px !important;
    }
    .modal .select2-container{
        padding: 0px;
    }
    #modalBank .modal-title{
        margin-bottom: 0px;
    }
    .popup{
        padding: 0px;
        overflow-y: auto;
    }
    .popup .control{
        padding: 30px 20px 50px;
    }
    .popup .panel{
        width: 93%;
        margin: 30px auto;
        height: auto;
        overflow: hidden;
    }
    #popupFeedback .control form{
        margin: 0px auto;
    }
    .popup-product img{
        max-width: 320px;
        margin-bottom: 18px;
    }
    .popup-product .price {
        line-height: 25px;
    }
    .popup-product .tab-select .radio label {
        height: 40px;
        line-height: 40px;
    }
    .popup-product .tab-select{
        margin-top: 20px;
    }
    .popup-product{
        position: relative;    
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .popup-product:after{
        content: '';
        width: calc(100% + 40px);
        position: absolute;
        border-bottom: 1px solid #E6E6E6;
        bottom: 0px;
        left: -20px;
    }
    .tab-select .radio label {
        min-width: 78px;
        font-size: 12px;
        font-weight: 500;
    }
    .tab-select .radio:not(:first-child) label{
        border-left-width: 1px;
    }
    .popup-product .tab-select .radio label{
        font-size: 14px;
    }
    .popup .btn-close {
        top: 12px;
        right: 15px;
        width: 18px;
        opacity: 1;
    }
    .popup .control-label:not(.input-error) {
        font-weight: 700;
        font-size: 14px;
        line-height: 22px;
    }
    .tab-select .radio{
        margin-top: 2px;
    }
    .popup .for-mask {
        margin-top: 15px;
    }
    .popup .for-mask .btn-prev-next {
        margin-top: 25px;
    }
    .history-page .order-result{
        padding-top: 5px;
        border-bottom: 0px;
        padding-bottom: 8px;
        padding-right: 0px;
    }
    .product.is-list {
        margin-top: -10px;
        max-width: initial;
        width: 100%;
    }
    .order-result .product.is-list .item{
        padding-bottom: 32px;
        padding-left: 125px;
        padding-right: 20px;
    }
    .order-result .product.is-list .item:last-child{
        border-bottom: 1px solid #EEEEEE;
    }
    .btn-slip{
        width: auto;
        padding-top: 30px;
        margin-left: -20px;
        margin-right: -20px;
        padding: 30px 20px 0px;
        border-top: 7px solid #F4F4F4;
    }
    .btn-slip .btn{
        width: 100%;
    }
    .report{
        margin: 0px;
        padding: 0px 5px;
    }
    .report .tab ul li, .report .tab ul li a{
        font-weight: 500;
        font-size: 14px;
        color: #000000;
        text-align: center;
        line-height: 33px;
        height: 33px;
        font-family: 'Roboto';
        padding: 0px;
    }
    .report .tab ul{
        padding: 0px;
        margin-left: 0px;
        width: 100%;
    }
    .report .tab ul li{
        width: calc(33.33% - 20px);
        margin: 5px 10px;
    }
    .profile{
        padding: 0px;
        margin-top: 25px;
    }
    .profile .input-photo{
        position: relative;
        margin: 0 auto;
    }
    .profile-detail {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 30px;
    }
    .profile-detail .item:first-child{
        border-top: 1px solid #DDDDDD;
    }
    .profile-detail .item{
        padding: 20px 20px 9px;
        font-size: 14px;
        line-height: 22px;
    }
    .profile-detail .item .btn-edit{
        top: -4px;
        right: -10px;
    }
    .profile-detail input[type="password"]{
        width: calc(100% - 110px);
        height: 25px;
        line-height: 25px;
        font-size: 38px;
    }
    .profile-detail .item .inner{
        padding-right: 60px;
    }
    .profile-detail a{
        display: block;
    }
    .btn-logout{
        margin: 0px;
        width: calc(100% + 10px);
        margin-right: -10px;
    }
    .modal-profile br:nth-child(2n){
        display: none;
    }
    .modal-profile .modal-body{
        padding: 40px 20px 20px;
        margin-top: 50px;
    }
    .modal-profile .modal-title{
        margin-bottom: 22px;
        font-size: 23px;
    }
    select.form-control.select2{
        padding: 0px 12px;
        color: #C7C7C7;
        position: relative;
        padding-right: 30px;
        background: #fff url(../images/icon-select.svg) no-repeat;
        background-position: right 12px center;
        background-size: 10px 5px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    select.form-control.select2.selected{
        color: #555;
    }
    .title.has-unit h1{
        float: initial;
    }
    .title .unit{
        float: initial;
        margin-top: 0px;
    }
    .q-form.q-package .control-label:not(.input-error){
        margin-bottom: 20px;
        font-size: 18px;
    }
    .payment-package.for-select .box{
        margin-bottom: 60px;
    }   
    #styling-page .tab{
        margin-top: 25px;
    }
    .lang{
        width: 100%;
        text-align: center;
        margin: 0px;
        float: initial;
        margin-top: 20px;
    }
    .lang a{
        float: initial;
    }

    /* 2020-11-28 */
    .home-method .banner, .banner .banner-slide{
        width: 100%;
    }
    .banner .text{
        text-align: center;
    }
    .banner .text h1, body.en .banner .text h1{
        letter-spacing: 0px;
        width: 300px;
        line-height: 30px;
        font-size: 24px;
    }
    .banner .text h3{
        margin-top: 0px;
        font-size: 17px;
        line-height: 22px;
    }
    .banner .img span{
        font-size: 14px;
        color: #FC7434;
        letter-spacing: 2.34px;
        text-align: center;
    }
    .banner button.owl-dot {
        width: 14px;
    }
    .banner button.owl-dot.active {
        width: 22px;
    }
    .banner .owl-dots{
        bottom: 0px;
        position: relative;
    }
    .row.is-reverse > div{
        width: 100%;
        position: relative;
    }
    .home-method .banner{
        padding: 30px 35px 0px 40px;
    }
    .home-method .title{
        text-align: center;
        margin-bottom: 40px;
    }
    .home-method .title .line{
        top: auto;
        right: 0px;
        margin: 0 auto;
        bottom: -15px;
    }
    .home-method .bg{
        display: none;
    }

    /* 2022-09-12 */
    .navbar {
        padding: 4px 0px;
    }
    header .nav-menu {
        display: block;
    }
    .navbar .navbar-social.is-footer {
        bottom: auto;
        position: relative;
        margin: 30px auto;
    }
    .navbar-cart {
        margin: 10px 0px;
        float: initial;
        width: 100%;
    }
    .navbar .navbar-user {
        float: initial;
        max-width: initial;
        padding-top: 0px;
        width: calc(100% - 40px);
        margin-bottom: 15px;
    }
    .navbar .lang {
        position: absolute;
        top: 0px;
        z-index: 100;
        right: 0px;
        margin: 0px;
        float: initial;
        text-align: right;
        display: inline-block;
        width: auto;
        padding: 15px;
    }
    .navbar .lang .dropdown-menu {
        width: 100% !important;
        margin: 5px 0px 0px !important;
        padding: 0px !important;
        position: absolute;
        border: 1px solid #dbdbdb;
    }
    .navbar .lang .dropdown-menu>li>a {
        padding: 8px 11px;
        border-top: 1px solid #dbdbdb;
    }
    .navbar .lang .dropdown-menu>li>a:first-child {
        border: 0px;
    }
    .navbar .lang .dropdown-toggle {
        opacity: 1 !important;
    }
    .navbar .nav-menu-brand {
        margin-top: 40px;
    }
    .navbar #menu ul {
        padding: 20px 0px;
    }
    .navbar .navbar-social {
        margin: 40px 0px;
    }
    .banner-full .inner {
        width: 85%;
        margin: 15vh auto;
        text-align: center;
        min-height: calc(70vh - 60px);
    }
    .banner-full .text, .intro {
        font-size: 16px;
        line-height: 26px;
    }
    .banner-full .text h1 {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 15px;
    }
    .banner-full .btn-box {
        margin-top: 40px;
    }

    .btn.btn-md {
        padding: 11.5px 15px;
    }
    .btn.btn-md .text-icon img {
        width: 18px;
        height: 18px;
    }

    .intro {
        margin: 70px auto;
    }
    .intro h2 {
        font-size: 24px;
        line-height: 36px;
    }
    .box-half .item {
        width: 100%;
        height: 45vh;
    }
    .box-half .item .text-icon {
        font-size: 30px;
    }
    .home-method {
        padding-top: 40px;
    }
    .home-method .banner {
        padding: 30px 10px 0px 30px;
    }
    .home-method .banner .img span {
        left: -25px;
    }
    .home-method .bg {
        display: block;
        width: 100%;
        top: 100px;
        left: 0px;
        right: 0px;
        height: 250px;
    }
    .home-method.is-bg-left .banner {
        padding: 30px 20px 0px;
    }

    .home-welcome {
        padding: 60px 0px;
    }
    .home-welcome .text h2 {
        font-size: 30px;
        line-height: 40px;
    }
    .home-welcome .inner {
        margin: 0px;
    }

    .hidden-desktop {
        display: block;
    }
    .hidden-mobile {
        display: none;
    }
}

@media (max-width: 520px){
    .box-select {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -10px;
    }
    .box-select .radio, .box-select .checkbox{
        width: calc(50% - 22px);
        margin: 20px 10px 5px;
    }
    .box-select .radio .bg, .box-select .checkbox .bg{
        height: 40vw;
    }
    .order-result .btn-done{
        width: 100%;
        font-size: 13px;
        line-height: 33px;
        height: 33px;
        padding: 0px;
        margin-bottom: 15px;
    }
    .modal .modal-btn{
        width: calc(100% + 24px);
        margin-left: -12px;
    }
    .modal .modal-btn button, .modal .modal-content.middle .modal-btn button{
        width: calc(50% - 25px);
        min-width: auto;
    }
    .tab-select .checkbox {
        width: calc(50% - 8px);
        margin: 10px 5px 5px 0px;
        float: left;
    }
    .tab-select .checkbox:nth-child(2n){
        margin-left: 5px;
        margin-right: 0px;
    }
    .tab-select .checkbox label {
        font-weight: 500;
        font-size: 12px;
        height: 36px;
        line-height: 36px;
        width: 100%;
        min-width: initial;
    }
    .chart-box{
        margin-top: 12px;
    }
    .chart-box .box{
        padding: 0px;
        width: 100%;
        margin-bottom: 20px;
    }
    .chart-box .box span:first-child{
        margin-bottom: 10px;
    }
    .chart-box .box .text{
        padding: 22px;
    }
    .popup-product{
        width: 100%;
    }
    .popup-product img{
        width: 100%;
        max-width: 100%;
    }
    .tooltip-inner{
        width: 200px;
        max-width: 35vw;
    }
    .shop-list{
        height: 50vh;
    }
    .modal button.close {
        top: 12px;
        right: 12px;
        width: 18px;
    }
}

@media not all and (min-resolution:.001dpcm)
{ 
    .profile-detail input[type="password"]{
        margin-top: -4px;
        font-size: 22px;
    }
    .modal input[disabled]{
        font-size: 20px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0)
{
    input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control
    {
        line-height: initial;
    }
}