/*
CSS RESPONSIVE ON DEVICE
 */

/*=============== START DESKTOP ====================*/

@media only screen 
and (min-width : 1200px) {
  .container {
    max-width: 1190px;
}

}

@media only screen 
and (min-width : 1400px) {
  .container {
    max-width: 1280px;
}    

}

@media only screen 
and (min-width : 1600px) {
  .container {
    max-width: 1300px;
}

}

/*=============== END DESKTOP ====================*/

/*=============== START IPAD ====================*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1023px) {

    .slide-content {
        width: 600px;
    }

    .slide-content-item>h2 {
        font-size: 5rem;
    }

    .slide-content-item>p.slide-content-item__kn {
        font-size: 20px;
        letter-spacing: 4px;
    }

    .slide-content-item.item-logo>img {
        width: 200px;
    }

    .slide-content-item.item-slogan p {
        font-size: 16px;
    }

    .slide-content-item.item-twologo>img {
        width: 120px;
    }

    div#owl-slide-desktop .owl-item img {max-height: 400px;}

    .about-us-top-content>h2 {
        font-size: 2.6rem;
        margin-bottom: 4rem;
    }

    .about-us-top-content p {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .about-us-top-content {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 65%;
        flex: 0 0 65%;
    }

    .about-us-logo {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
    }

    .about-us-top-content p strong {
        font-size: 16px;
    }

    .about-us-logo-link span {
        font-size: 16px;
    }

    .about-us-bottom {
        gap: 30px;
    }

    .about-us-item h3 {
        font-size: 16px;
    }

    .about-us-item p {
        font-size: 16px;
        line-height: 1.3;
    }

    .about-us-item>a {
        font-size: 13px;
    }

    .title-main-content h2 {
        font-size: 2.2rem;
    }

    .title-main-content>h3>strong {
        font-size: 4rem;
        margin-left: 15px;
    }

    .title-main-content>h3 {
        font-size: 2rem;
    }

    .title-main-content p {
        font-size: 18px;
        letter-spacing: 3px;
    }

    .block-main-content {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .block-main-content .main-content-block:nth-of-type(4) {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    }

    .block-main-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .block-main-content .main-content-block:nth-of-type(3) {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
    }

    .piano-left>p {
        font-size: 2.5rem;
        margin-bottom: 0;
    }

    .piano-left>h2 {
        font-size: 4rem;
    }

    .piano-right>span.sub-text {
        font-size: 26px;
        top: -10px;
    }

    .piano-right-right>h2 {
        font-size: 30px;
    }

    .piano-right-right p.made-in {
        font-size: 20px;
    }

    a.more-link {
        font-size: 14px;
    }

    .product-list-main-content {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .main-content-block.block-content>div.subtitle {
        font-size: 2.2rem;
    }

    .main-content-block.block-content>h2 {
        font-size: 3rem;
    }

    .main-content-block.block-content>p {
        font-size: 23px;
    }

    .main-content-block-author>h4 {
        font-size: 23px;
    }

    section.block-camket>h1 {
        font-size: 36px;
    }

    .block-camket-list {
        gap: 20px;
    }

    .block-camket-item-thumb h4 {
        font-size: 15px;
    }

    .block-camket-item-content p {
        font-size: 16px;
        line-height: 1.3;
    }

    h2.title-camket {
        font-size: 36px;
    }

    .header-camket-hoantien {
        padding: 0 3rem;
    }

    .header-camket-hoantien-left>h2 {
        font-size: 32px;
    }

    .header-camket-hoantien-left>h2>span {
        font-size: 4.2rem;
    }

    .header-camket-hoantien-left>p {
        font-size: 26px;
        letter-spacing: 1px;
    }

    section.block-khangdinh {
        padding: 0;
    }

    .block-khangdinh__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .block-khangdinh__content {
        padding: 0;
        margin-top: 3rem;
    }

    h2.service-flagship__title {
        padding: 0;
        font-size: 42px;
    }

    .service-flagship__content {
        padding: 0;
        gap: 30px;
    }

    section.service-flagship-bottom {
        padding: 0;
        margin: 5rem 0;
    }

    section.service-uudai {
        padding: 0;
    }

    section.service-tradeup {
        padding: 0;
    }

    .service-tradeup__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .service-tradeup__content {
        margin-top: 3rem;
    }

    .service-quatang__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: normal;
        -ms-flex-align: normal;
        align-items: normal;
    }

    section.service-quatang {
        margin: 5rem 0;
        padding: 0;
    }

    .service-quatang__content {
        padding: 0;
        margin-top: 3rem;
    }

    .service-quatang__image img {
        width: 100%;
    }

    section.service-policy {
        margin-top: 5rem;
    }

    h2.service-policy__title {
        font-size: 32px;
    }

    .service-policy__list {
        gap: 20px;
    }

    h3.service-policy__heading {
        margin: 10px 0;
    }

    h2.block-haumai__title {
        font-size: 4rem;
    }

    h3.block-haumai__subtitle {
        font-size: 24px;
    }

    .block-haumai__desc {
        gap: 4rem;
    }

    .block-haumai__desc p:before {
        right: -20px;
    }

    .block-haumai__desc p:last-child:before {
        display: none;
    }

    .block-haumai__desc p {
        line-height: 1.3;
        font-size: 18px;
    }

    h2.haumai-packpage__title {
        font-size: 30px;
    }

    .haumai-packpage__grid {
        gap: 20px;
    }

    h2.haumai-packpagevip__title {
        margin-bottom: 5rem;
        font-size: 30px;
    }

    .haumai-packpagevip__grid {
        gap: 20px;
    }

    .haumai-packpagevip__name strong {
        font-size: 28px;
    }

    h2.title-product-header {
        font-size: 4rem;
    }

    .product-bst-header>a {
        bottom: 0;
    }

    section.product-shigeru {
        padding: 0;
    }

    .product-shigeru__container {
    }

    h2.product-shigeru__title {
        font-size: 65px;
    }

    h2.product-shigeru__title small {
        bottom: 12px;
        right: 0;
        font-size: 16px;
    }

    h2.product-shigeru__title small b {
        font-size: 18px;
    }

    .product-shigeru__content {
        padding-right: 3rem;
    }

    .product-SK__grid {
        gap: 30px;
        -ms-grid-columns: 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr;
    }

    section.product-shigeru.product-GX h2.product-shigeru__title small {
        right: 60px;
        top: 10px;
    }

    section.product-SK.product-GL .product-SK__grid {
        padding: 0;
    }

    #section-K h2.product-shigeru__title small {
        right: 15%;
    }

    section#product-K .product-SK__grid {
        gap: 5rem;
        padding: 0 5%;
    } 

.product-intro__content {
    top: 0;
}

.product-intro__content>h2 {
    font-size: 3rem;
}

.product-intro__content>h4 {
    font-size: 16px;
}

.menu-archor-link {
    margin-top: 5rem;
    display: block;
    clear: both;
}

ul.menu-archor-link__list>li {
    display: block;
    width: 33%;
    float: left;
    margin: 0;
    margin-bottom: 20px;
}

.block-product-video {
    clear: both;
}

ul.menu-archor-link__list {
    text-align: left;
    display: inline-block;
}

ul.menu-archor-link__list>li>a {
    font-size: 16px;
}

h2.title-product-block {
    font-size: 28px;
}

.table-specs {
    grid-template-columns: 1fr;
}

.block-single>.row:nth-of-type(even) {
    flex-direction: column-reverse;
}

.footer-block {
    margin-bottom: 3rem;
}

}       
/*=============== END IPAD ====================*/



/*=============== START MOBILE ====================*/

@media only screen 
and (max-width : 767px) {

    .slide-content {
        width: 350px;
    }

    .slide-content-item>h2 {
        font-size: 3rem;
    }

    .slide-content-item.item-logo>img, .slide-content-item.item-twologo>img {
        width: 100px;
    }

    .product-list-main-content {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        padding: 0 30px;
    }
    .product-item-thumb>a>img {
        aspect-ratio: 2 / 1.8;
    }
    .slide-content-item>p.slide-content-item__kn {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .slide-content-item.item-slogan p {
        font-size: 12px;
        text-align: center;
    }

    .about-us-top {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .about-us-logo {
        padding: 0 50px;
    }

    .about-us-top-content>h2 {
        font-size: 3rem;
    }

    .about-us-top-content {
        margin-top: 3rem;
    }

    .about-us-bottom {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .title-main-content h2 {
        font-size: 2.6rem;
    }

    .title-main-content>h3 {
        font-size: 2rem;
    }

    .title-main-content>h3>strong {
        font-size: 4rem;
    }

    .block-main-content {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .main-content-block.block-img {
        padding: 2rem;
    }

    .main-content-block.block-content {padding: 2rem 1rem;2rem:;2rem: 1;2rem: 1r;2rem: 1re;2rem: 1rem;2rem: 1re;2rem: 1r;2rem: 1;}

    .main-content-block.block-content>h2 {
        font-size: 2.6rem;
    }

    .main-content-block.block-content>div.subtitle {
        font-size: 2rem;
    }

    .piano-banner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
    }

    .piano-right {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    .piano-right>span.sub-text {
        font-size: 30px;
        top: 0;
    }

    .piano-right-right>h2 {
        font-size: 25px;
        margin-top: 15px;
    }

    .piano-left>h2 {
        font-size: 4rem;
    }

    .piano-left>p {font-size: 3rem;}

    a.more-link {
        position: static;
        display: block;
        text-align: center;
    }

    .main-content-block.block-content>p {
        font-size: 20px;
    }

    .main-content-block-author>h4 {
        font-size: 20px;
    }

    .main-content-block-author>p {
        font-size: 16px;
    }

    section.block-camket>h1 {
        font-size: 28px;
    }

    .block-camket-list {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .block-camket-item-content p {
        font-size: 16px;
    }

    h2.title-camket {
        font-size: 28px;
        letter-spacing: 0px;
    }

    .header-camket-hoantien {
        padding: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .header-camket-hoantien-left>h2 {
        padding: 0;
        font-size: 3rem;
    }

    .header-camket-hoantien-left>h2>span {
        font-size: 4rem;
        letter-spacing: 0px;
    }

    .header-camket-hoantien-left>p {
        font-size: 26px;
        letter-spacing: 3px;
    }

    section.block-khangdinh {
        padding: 0;
    }

    .block-khangdinh__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .block-khangdinh__content {
        padding-left: 0;
    }

    p.block-khangdinh__subtitle, h2.block-khangdinh__title {
        padding: 0;
    }

    p.block-khangdinh__desc {
        font-size: 18px;
        letter-spacing: 3px;
    }

    p.block-khangdinh__subtitle span {
        font-size: 36px;
    }

    p.block-khangdinh__subtitle {
        font-size: 18px;
    }

    h2.block-khangdinh__title {
        font-size: 26px;
    }

    h2.service-flagship__title {
        padding: 0;
        font-size: 3.2rem;
    }

    .service-flagship__content {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        padding: 0;
    }

    .page-template.page-services {
        padding: 6rem 0;
    }

    section.service-flagship-bottom {
        margin: 6rem 0;
        padding: 0;
    }

    .service-flagship-bottom__content>h3 {
        font-size: 18px;
    }

    section.service-uudai {
        padding: 0;
    }

    h2.service-uudai__title {
        font-size: 26px;
    }

    .service-uudai__content>p {
        font-size: 16px;
    }

    .service-uudai__content>h3 {
        font-size: 18px;
    }

    section.service-tradeup {
        margin: 3rem 0;
        padding: 0;
    }

    h2.service-tradeup__title {
        font-size: 3rem;
    }

    p.service-tradeup__subtitle {
        letter-spacing: 2px;
        font-size: 18px;
    }

    .service-tradeup__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .service-tradeup__image {
        margin-bottom: 3rem;
    }

    section.service-quatang {
        padding: 0;
        margin: 3rem 0;
    }

    .service-quatang__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .service-quatang__content {
        padding: 0;
        margin-top: 3rem;
    }

    h2.service-quatang__title {
        font-size: 2.6rem;
    }

    section.service-policy {
        margin-top: 5rem;
    }

    h2.service-policy__title {
        font-size: 28px;
    }

    .service-policy__list {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .page-template.page-haumai {
        padding: 6rem 0;
    }

    h2.block-haumai__title {
        font-size: 3rem;
    }

    h3.block-haumai__subtitle {
        font-size: 20px;
    }

    .block-haumai__desc {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .block-haumai__desc p:before {
        display: none;
    }

    .block-haumai__desc p {
        font-size: 16px;
    }

    section.haumai-packpage {
        margin: 6rem 0;
    }

    h2.haumai-packpage__title {
        font-size: 28px;
    }

    .haumai-packpage__grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .haumai-packpage__card.haumai-packpage__card--royal {
        height: 350px;
    }

    p.haumai-packpage__support {
        font-size: 20px;
    }

    .haumai-block-01__container img {
        margin-top: 3rem;
        width: 100%;
    }

    .haumai-block-01__container>h3 {
        font-size: 20px;
    }

    section.haumai-block-01 {
        margin-bottom: 6rem;
    }

    h2.haumai-block-02__title {
        font-size: 26px;
    }

    h2.haumai-packpagevip__title {
        font-size: 28px;
        margin-bottom: 4rem;
    }

    .haumai-packpagevip__grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .haumai-packpagevip__card.haumai-packpagevip__card--artist {
        height: 350px;
    }

    section.page-contact {
        padding-top: 5rem;
    }

    h2.page-contact__title {
        font-size: 30px;
    }

    p.page-contact__subtitle {
        font-size: 20px;
    }

    ul.page-contact__list li a {
        font-size: 18px;
    }

    .page-contact__right {
        margin-top: 2rem;
    }

    ul.page-contact__info li strong {
        font-size: 20px;
    }

    h2.page-contact-form__title {
        font-size: 23px;
    }

    p.page-contact-form__subtitle {
        font-size: 14px;
    }

    .form-contact-haft p {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: normal;
        -ms-flex-align: normal;
        align-items: normal;
    }

    .form-contact-haft p span:nth-of-type(1) input.wpcf7-text {
        margin-bottom: -10px;
    }

    .form-contact-haft p span {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    .page-contact-form input.wpcf7-submit {
        width: 100%;
    }

    h2.title-product-header {
        font-size: 3rem;
    }

    .page-template.page-product {
        padding: 5rem 0;
    }

    .product-bst-header>span {
        font-size: 20px;
    }

    .product-bst-header>a {
        position: absolute;
        bottom: -30px;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .product-bst-header {
        margin-bottom: 5rem;
    }

    section.product-shigeru {
        margin: 5rem 0;
        padding: 0;
    }

    h2.product-shigeru__title {
        font-size: 50px;
    }
    h2.product-shigeru__title b {
        font-size: 32px;
        letter-spacing: 0;
    }
    .product-shigeru__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .product-shigeru__content {
        padding: 0;
        margin-top: 3rem;
    }

    h2.product-shigeru__title small {
        font-size: 16px;
        bottom: 6px;
    }

    h2.product-shigeru__title small b {
        font-size: 14px;
    }

    .product-shigeru__content p {
        font-size: 16px;
    }

    .product-SK__grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    h2.product-SK__heading {
        font-size: 30px;
    }

    p.product-SK__sub {
        font-size: 18px;
    }

    h2.product-SK-table__title>span:before {
        right: -30px;
        top: 8px;
        font-size: 16px;
    }

    h2.product-SK-table__title>span:after {
        left: -30px;
        top: 8px;
        font-size: 16px;
    }

    h2.product-SK-table__title {
        font-size: 26px;
    }

    p.product-SK-table__subtitle {
        font-size: 15px;
    }

    .product-SK-table__header {
        margin-bottom: 5rem;
    }

    a.product-SK-table__link {
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    section.product-shigeru.product-GX h2.product-shigeru__title small {
        top: 10px;
        right: 15%;
    }

    section.product-SK.product-GL .product-SK__grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        padding: 0;
    }

    #section-K h2.product-shigeru__title small {
        right: 50px;
    }

    section#product-K .product-SK__grid {
        padding: 0 0;
        gap: 0;
        grid-template-columns: 1fr;
    }

   .product-intro__content {
        top: 0rem;
    }

    .product-intro__content>h2 {
        font-size: 2.6rem;
    }

    .product-intro__content>h4 {
        font-size: 16px;
    }

    ul.menu-archor-link__list {
        text-align: left;
    }

    ul.menu-archor-link__list>li {
        display: block;
        margin-bottom: 10px;
    }

    ul.menu-archor-link__list>li>a {
        font-size: 16px;
    }

    h2.title-product-block {
        font-size: 24px;
    }

    h2.title-product-block:before {
        width: 100px;
    }

    .table-specs {
        grid-template-columns: 1fr;
    }

    .block-single>.row:nth-of-type(even) {
        flex-direction: column-reverse;
    }

    .footer-block>h4 {
        padding: 0;
        font-size: 22px;
    }

    .footer-block ul li h5 {
        font-size: 18px;
    }

    .footer-block ul li p {
        font-size: 13px;
    }

}

/*=============== END MOBILE ====================*/



/*=============== START MOBILE < 320px ====================*/

/* Desktops and laptops ----------- */
@media only screen 
and (max-width : 320px) {



}

/*=============== END MOBILE < 320px====================*/