@media all and (max-width: 1300px) {

   .box-wp{
    padding: 0 16px ;
   }
   .text-sl:after{
    left: 16px;
   }
   
}

@media all and (max-width: 1024px) {
    .box-wp {
        padding: 0 16px;
    }

}

@media all and (max-width: 960px) {
    .slider,
    .main {
        margin-top: 59px;
    }
    .lang-switcher {
        position: absolute;
        right: 16px;
    }
    .header .header-right {
        display: none;
    }
    .header .header-left {
        width: 100%;
        text-align: center;
    }
    .header-left .logo {
        padding-right: 0;
        float: none;
    }
    .slider img {
        height: auto;
    }
    .slider .text-welc {
        font-size: 18px;
    }
    .text-1 {
        font-size: 22px;
    }
    .text-2 {
        font-size: 14px;
    }
    .text-sl {
        width: 70%;
        right: auto;
        padding-right: 0;
    }
    .slider:before {
        width: 50%;
        bottom: 13px;
    }
    .studio-logo {
        left: 35vw;
    }
    .ab-p1-title h2 {
        font-size: 55px;
    }
    .ab-p1-title p {
        margin-top: 30px;
    }
    .ab-p1-r {
        margin-top: 0;
    }
    .ab-p1-cont {
        margin-top: 30px;
    }
    .page-wtm {
        padding: 52px 0;
    }
    .commpant-pos h2 {
        font-size: 55px;
    }
    .commpant-pos {
        bottom: -40px;
    }
    .bb-bst,
    .page-wtm .abp4,
    .gall-h,
    .bb-reg {
        padding: 52px 0;
    }
    .bb-service-h-list {
        gap: 12px;
    }
    .abp5 {
        margin-top: 52px;
    }
    .reg-l {
        width: 75%;
        padding: 50px 20px 50px 20px;
    }
    .reg-r {
        width: 25%;
        padding-right: 0;
    }
    .reg-b {
        padding: 0 40px;
    }
    .reg-b h4 {
        font-size: 22px;
        margin-bottom: 20px;
    }
    .ft-bottom-item.bb-company {
        width: 100%;
        float: none;
        margin-bottom: 32px;
        text-align: center;
    }
    .comment-ft p {
        margin: 12px auto 20px;
        text-align: center;
    }
    .ft-bottom-item.vchungtoi {
        width: 30%;
    }
    .ft-bottom-item {
        width: 30%;
    }
    .ft-bottom-item.bb-company.bb-contact-f {
        width: 40%;
        margin-bottom: 0;
        float: left;
        text-align: left;
    }
    .title-ab {
        font-size: 35px;
    }
    .sidebar {
        display: none;
    }
    .content-product {
        width: 100%;
    }
    .pd-filter-sort li {
        margin-right: 15px;
    }
    .pd-filter-sort li:last-child {
        margin-right: 0;
    }
    .bb-p-photo {
        width: 70%;
        padding-right: 0;
        float: none;
        margin: 0 auto 32px;
    }
    .bb-p-text {
        width: 100%;
    }
    label.b-pn {
        margin-bottom: 32px;
    }
    .bb-show-c {
        display: block;
    }
    .bb-p-show {
        width: 100%;
        margin-right: 0;
        margin-bottom: 32px;
    }
    .content-pro-v {
        display: none;
    }
    .bb-product-item .text h4 a {
        font-size: 14px;
    }
    .gio-hang .bb-order-cart {
        margin-top: 0;
    }
    .bb-order-cart {
        width: 100%;
        margin-bottom: 32px;
    }
    .bb-order-bill {
        width: 100%;
        margin-left: 0;
    }
    .menu-service ul {
        width: 100%;
    }
    .text-service h2 {
        font-size: 22px;
    }
    .bb-service-item {
        margin-top: 60px;
    }
    .breadcrumb .title {
        font-size: 25px;
    }
    .loadMoreGallery {
        margin-top: 32px;
    }
    .bb-post .bb-post-list {
        grid-template-columns: 1fr 1fr;
    }
    .content-post-l {
        padding-right: 0;
        width: 100%;
        margin-bottom: 32px;
    }
    .content-post-r {
        width: 100%;
    }
    .content-r-i:first-child {
        display: none;
    }
    .bb-post-others .bb-post-item:nth-child(3) {
        display: none;
    }
    .title-con {
        font-size: 22px;
    }
    .form .form-item.box-rbtn {
        margin-top: 20px;
    }
    .form-co {
        display: flex;
        align-items: center;
    }
    .content-product .tragop1-right {
        display: block;
        width: 50%;
        float: right;
        margin-bottom: 20px;
    }
    .pd-filter-sort {
        clear: both;
    }
    .img-par img {
        width: 100%;
        object-fit: cover;
        height: 100%;
    }
    .img-par {
        padding: 0 40px;
    }
    .bb-post-others {
        margin-top: 25px;
    }
    .bb-gallery-item:first-child h3,
    .bb-gallery-item:first-child,
    .bb-gallery-item:nth-child(8) h3,
    .bb-gallery-item:first-child,
    .bb-gallery-item:nth-child(11) h3 {
        font-size: 20px;
    }
    .bb-gallery-item h3,
    .bb-gallery-big:nth-child(even) .bb-gallery-item:first-child h3 {
        font-size: 16px;
    }
    .ab-p2-list {
        grid-template-columns: 1fr 1fr;
    }
    .title-p {
        font-size: 25px;
    }
    .title-p img {
        width: 200px;
    }
    .link-xt {
        margin-top: 32px;
    }
    .bb-bst,
    .page-wtm .abp4,
    .gall-h,
    .bb-reg {
        padding: 32px 0;
    }
    .p-title-p{
        font-size: 32px;
    }
}
@media all and (max-width: 768px) {
    .bb-post-list {
        gap: 16px;
    }
    .abp4,
    .bb-news,
    .bb-service-h,
    .abp5,
    .bb-reg,
    .abp3 {
        padding: 20px 0;
    }
    body,
    .breadcrumb a {
        font-size: 14px;
    }
    .reg-b {
        padding: 0 16px;
    }
    .reg-l {
        padding-right: 0;
    }
    .breadcrumb {
        padding: 50px 0;
    }
    .bb-about {
        padding: 50px 0 40px;
    }
    .bb-product-others {
        margin-top: 32px;
    }
    .ft-bottom {
        padding: 50px 0 37px;
    }
}
@media all and (max-width: 680px) {
    .box-wp {
        padding: 0 12px;
    }
    body {
        font-size: 14px;
    }
    .text-sl {
        display: none;
    }
    .slider .img:after {
        content: none;
    }
    .slider img {
        height: 30vh;
    }
    .flickity-page-dots {
        display: none;
    }
    .slider:before {
        width: 100%;
        bottom: 0;
    }
    .studio-logo {
        left: 18vw;
    }
    .ab-p1-title h2 {
        font-size: 40px;
        width: 100%;
    }
    .ab-p1-title p {
        width: 100%;
        margin-top: 0;
    }
    .ab-p1-cont {
        flex-direction: column;
    }
    .ab-p1-l {
        width: 100%;
        margin-bottom: 30px;
    }
    .ab-p1-r {
        width: 100%;
        margin-top: 0;
        padding: 0;
    }
    .title-p {
        font-size: 22px;
        margin-bottom: 20px;
    }
    .title-p img {
        width: 50%;
    }
    .bb-bst-list {
        grid-template-columns: 1fr;
    }
    .bb-product-list {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        clear: both;
    }
    .link-xt {
        margin-top: 30px;
    }
    .ab-p4-list {
        padding: 20px 0 0;
    }

    .bb-service-h-list {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bb-post-list {
        grid-template-columns: 1fr;
    }
    .bb-gallery-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .reg-b {
        flex-direction: column;
        padding: 20px;
        background: transparent;
    }
    .reg-b h4 {
        font-size: 20px;
    }
    .reg-l {
        width: 100%;
        padding: 0;
    }
    .reg-r {
        width: 100%;
        position: relative;
        margin-top: 30px;
    }
    /* .bb-reg .box-wp:before {
        width: 150px;
        height: 150px;
        left: -32px;
        top: 30%;
        background-size: contain;
    } */
    .bb-reg .box-wp:after {
        left: 82%;
    }
    .bb-reg {
        padding-bottom: 0;
    }
    .ft-bottom {
        padding: 52px 0;
    }
    .comment-ft p {
        width: 100%;
    }
    .ft-bottom-item.vchungtoi,
    .ft-bottom-item {
        width: 50%;
    }
    .ft-bottom-item.bb-company.bb-contact-f {
        width: 100%;
        padding-left: 0;
    }
    .title-ft {
        font-size: 16px;
    }
    .ft-copyright .box-wp {
        flex-direction: column;
        text-align: center;
    }
    .ft-cpr-item.danaweb,
    .ft-cpr-item {
        text-align: center;
        width: 100%;
    }
    .ft-cpr-item.danaweb {
        margin-top: 10px;
    }
    .ft-bottom-item ul li a,
    .ft-bottom-item.bb-company.bb-contact-f ul li p {
        font-size: 13px;
    }
    .ft-bottom-item.bb-company.bb-contact-f ul li {
        margin-bottom: 10px;
    }
    .bb-about,
    .bb-service {
        padding: 32px 0;
    }
    .title-ab {
        font-size: 24px;
    }
    .comment-ab {
        width: 100%;
    }
    .abp2 {
        margin-top: 0;
    }
    .ab-p2-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ab-p3-content,
    .ab-p3-content:nth-child(even) {
        flex-direction: column;
    }
    .ab-p3-l {
        width: 100%;
        margin-bottom: 16px;
    }
    .ab-p3-r {
        width: 100%;
        padding-left: 0;
    }
    .ab-p3-content:nth-child(even) .ab-p3-r {
        padding-right: 0;
    }
    .ab-p3-content {
        margin-bottom: 30px;
    }
    .content-product .tragop1-right {
        width: 100%;
    }
    .content-product .bb-product-list {
        grid-template-columns: 1fr 1fr;
    }
    .bb-product-item .text p {
        opacity: 1;
        transform: translate(0, 0);
    }
    .pd-filter-sort li:first-child {
        padding-left: 0;
        margin-right: 0;
    }
    .pd-filter-sort li {
        margin-right: 0;
        font-size: 13px;
        padding: 0;
        margin-bottom: 15px;
        float: left;
        width: 33.33%;
    }
    .pd-filter-sort li.active,
    .pd-filter-sort li:hover {
        border-bottom: none;
        color: #2484c6;
    }
    .pd-filter-sort {
        border: none;
    }
    .bb-p-photo {
        width: 100%;
    }

    .p-title-p {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .list-info-product {
        grid-template-columns: 1fr;
    }
    .list-info-product p.price_p {
        font-size: 20px;
    }
    .pd-s-order {
        margin-top: 15px;
    }
    .btn--bb-p {
        padding: 12px 15px;
    }
    .bb-p-show-l .pd-tab-nav > ul > li > a {
        font-size: 14px;
    }
    .form .form-item.form-sm {
        width: 100%;
    }
    .pd-tab-panel .pd--s-panel .form .form-item input,
    #_ratings.form .form-item textarea {
        margin: 0;
    }
    .content-pro-v {
        display: block;
        width: 100%;
    }
    .pri-view p {
        width: 65%;
    }
    .bb-cart-r > td .image img {
        height: 50px;
    }
    .bb-cart-r > td .image > h3 a {
        font-size: 12px;
    }
    .bb-cart-r .color-p {
        width: 20px;
        height: 20px;
    }
    .table tr > td {
        font-size: 12px;
        padding: 3px;
    }
    .bb-cart-r .b-pn .input-group {
        width: 55px;
    }
    .breadcrumb {
        padding: 50px 0;
        text-align: center;
    }
    .breadcrumb a {
        font-size: 14px;
    }
    .breadcrumb .title {
        font-size: 20px;
    }
    .gio-hang .table-cart > tbody > tr > td:nth-child(2) {
        display: none;
    }
    .input-group > .form-control {
        font-size: 12px;
    }
    .gio-hang .bb-order-cart {
        margin-bottom: 0;
    }
    .titl-car {
        font-size: 20px;
    }
    .form-s {
        width: 100%;
        float: none;
        margin-bottom: 16px;
    }
    .form-s:nth-child(2) {
        margin: 0 0 16px;
    }
    .form-s:last-child {
        margin: 0;
    }
    .httt {
        grid-template-columns: 1fr 1fr;
    }
    .form-item.form-lg.box-httt label.error {
        position: absolute;
        bottom: 100%;
        top: auto;
    }
    .form .form-item .show-error,
    .form .form-item label.error {
        font-size: 12px;
        padding-left: 0;
    }
    .form-radio label.error {
        left: 0;
        top: 100%;
    }
    .menu-service ul li {
        padding: 10px;
        font-size: 13px;
        border-bottom: 1px solid transparent;
    }
    .menu-service ul {
        white-space: nowrap;
        border: none;
        overflow: scroll;
    }
    .service-content {
        clear: both;
    }
    .menu-service ul li.active,
    .menu-service ul li:hover {
        border-bottom: 1px solid #000000;
    }
    .menu-service ul li.active a,
    .menu-service ul li:hover a {
        color: #2484c6;
    }
    .menu-service ul li:first-child {
        display: none;
    }
    .comment-service,
    .bb-service-item:nth-child(even) {
        flex-direction: column;
    }
    .comment-service-l {
        width: 100%;
        margin-bottom: 16px;
    }
    .comment-service-r {
        width: 100%;
        padding-left: 0;
    }
    .bb-service-item {
        flex-direction: column;
        margin-top: 32px;
    }
    .text-service {
        width: 100%;
        padding-right: 0;
    }
    .img-service {
        width: 100%;
    }
    .bb-service-item:nth-child(even) .text-service {
        padding-left: 0;
    }
    .text-service h2 {
        font-size: 18px;
    }
    .link-item.active,
    .link-item:hover {
        border: none;
    }
    .menu-article {
        flex-wrap: nowrap;
        overflow: scroll;
    }
    .link-item {
        flex: 0 0 auto;
    }

    .link-item.active a,
    .link-item:hover a {
        color: #2484c6;
    }
    .bb-post .bb-post-list {
        grid-template-columns: 1fr;
    }
    .wrap-detail .title-detail {
        font-size: 22px;
    }
    .content-r-i:first-child {
        display: block;
    }
    .bb-post-others .bb-post-item:nth-child(3) {
        display: block;
    }
    .ct-right,
    .form-co-l {
        margin-bottom: 32px;
        padding-right: 0;
        width: 100%;
    }
    .ct-left,
    .form-co-r {
        width: 100%;
    }
    .form-co {
        flex-direction: column;
        margin-bottom: 32px;
    }
    /* .abp2 .box-wp:after,
    .bb-service-item:first-child:after,
    .bb-bst .box-wp:after,
    .gall-h .box-wp:before,
    .bb-news .box-wp:after,
    .bb-reg .box-wp:before {
        right: auto;
        left: -50px;
    } */
    .bb-service-h .box-wp:after,
    .gall-h .box-wp:after {
        width: 100px;
    }
    .gall-h .box-wp:after {
        width: 100px;
        right: 50%;
    }
    .abp3 .box-wp:after,
    .bb-service-item:nth-child(2):after,
    .bb-bst .box-wp:before,
    .bb-news .box-wp:before {
        left: 0;
    }
    .ab-p3-content:nth-child(even):after,
    .bb-service-item:nth-child(3):after {
        width: 100px;
        left: auto;
        right: -40px;
        background-size: contain;
    }
    /* .abp4 .box-wp:after {
        left: -29px;
        background-size: contain;
        top: -54px;
        width: 100px;
        height: 100px;
        right: auto;
    } */
    .abp4 .box-wp:before,
    .bb-reg .box-wp:after {
        left: auto;
        right: -30px;
    }
    /* .bb-gallery .box-wp:after,
    .bb-post .box-wp:after,
    .bb-post .box-wp:before,
    .bb-contact .box-wp:after,
    .bb-product .box-wp:after {
        right: auto;
        left: -30px;
        width: 100px;
        height: 100px;
        background-size: contain;
    } */
    .grid-gal {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .modal a.close-modal {
        right: 0;
    }
    .bb-post-others {
        margin-top: 0;
    }
    .lang-switcher {
        right: 12px;
    }
    .header {
        padding: 17px 0;
    }
    .page-wtm,
    .bb-post,
    .bb-contact,
    .bb-product,
    .gio-hang,
    .thanhtoan-p,
    .searproduct,
    .bb-post,
    .bb-contact,
    .bb-product,
    .gio-hang,
    .thanhtoan-p,
    .searproduct {
        padding: 32px 0;
    }
    .bb-product-h {
        padding: 16px 0;
    }
}
@media all and (max-width: 480px) {

}


@media all and (width: 414px) {

}
@media (min-width: 1400px) and (max-width: 1600px){

}


@media (min-width: 1600px) {

}