@media (max-width: 991.98px) {
    .site-header {
        position: fixed;
        height: 64px
    }
}

@media (max-width: 991.98px) {
    .site-header .navbar {
        height: 64px
    }
}

@media (max-width: 991.98px) {
    .navbar-brand img {
        width: 155px
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        padding: 18px 24px 24px;
        background: #fff;
        box-shadow: 0 12px 25px rgba(0, 0, 0, .12)
    }
}

@media (max-width: 991.98px) {
    .nav-link {
        padding: 10px 0 !important
    }
}

@media (max-width: 991.98px) {
    .header-cta {
        margin-top: 10px
    }
}

@media (max-width: 991.98px) {
    .hero {
        min-height: 780px
    }
}

@media (max-width: 991.98px) {
    .hero-inner {
        padding-top: 150px
    }
}

@media (max-width: 991.98px) {
    .hero-facts {
        grid-template-columns: none; /* ← ghi đè để loại bỏ */
        grid-auto-flow: column;
        grid-auto-columns: minmax(50%, 1fr);
        grid-auto-rows: min-content;
        align-items: start;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        margin-top: 90px
    }
}

/*@media (max-width: 991.98px) {*/
/*    .hero-facts div {*/
/*        display: block;*/
/*        text-align: center*/
/*    }*/
/*}*/

@media (max-width: 991.98px) {
    .hero-facts div:not(:last-child):after {
        right: -6px
    }
    .hero-facts span{
        font-size: 18px;
        line-height: 1.25;
    }
}

@media (max-width: 991.98px) {
    .route-section {
        grid-template-columns:1fr;
        min-height: 0;
        height: auto;
    }
}

@media (max-width: 991.98px) {
    .route-copy {
        padding: 60px max(24px, calc((100vw - 720px) / 2))
    }
}

@media (max-width: 991.98px) {
    .route-photo {
        height: 620px
    }
}

/*@media (max-width: 991.98px) {*/
/*    .included-section {*/
/*        grid-template-columns:1fr 1fr*/
/*    }*/
/*}*/

/*@media (max-width: 991.98px) {*/
/*    .included-center {*/
/*        grid-column: 1/-1;*/
/*        grid-row: 1*/
/*    }*/
/*}*/

@media (max-width: 991.98px) {
    .room-card {
        height: 600px
    }
}

@media (max-width: 991.98px) {
    .safety-links {
        flex-wrap: wrap
    }
}

@media (max-width: 991.98px) {
    .contact {
        justify-content: flex-start;
        flex-wrap: wrap
    }
}

@media (max-width: 991.98px) {
    .availability-actions {
        justify-content: flex-start
    }

}

@media (max-width: 991.98px) {
    .story-track {
        grid-template-columns:repeat(2, 1fr);
        row-gap: 28px
    }
    .tour-overlay h3{
        font-size: 28px;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 14px
    }
}

@media (max-width: 575.98px) {
    .section-space {
        padding: 55px 0
    }
}

@media (max-width: 575.98px) {
    .hero {
        min-height: 720px
    }
}

@media (max-width: 575.98px) {
    .hero .kicker {
        font-size: 11px
    }
}

@media (max-width: 575.98px) {
    .hero-inner {
        padding-top: 135px
    }
}

@media (max-width: 575.98px) {
    .hero h1 {
        font-size: 52px;
        line-height: .9
    }
}

@media (max-width: 575.98px) {
    .hero-lead {
        max-width: 330px;
        font-size: 13px;
        margin: 0 auto 30px;
    }
}

@media (max-width: 575.98px) {
    .hero-btn {
        min-width: 240px;
        min-height: 50px;
        font-size: 14px
    }
}

@media (max-width: 575.98px) {
    .hero-facts {
        margin-top: 75px;
    }
}

@media (max-width: 575.98px) {
    .hero-facts strong {
        font-size: 24px
    }
}

@media (max-width: 575.98px) {
    .hero-facts span {
        font-size: 18px
    }
}

@media (max-width: 575.98px) {
    .intro-title, .route-copy h2, .section-heading h2, .safety-content h2, .faq-section h2, .alive-section h2 {
        font-size: 31px
    }
}

@media (max-width: 575.98px) {
    .value-nav {
        justify-content: flex-start;
        overflow-x: auto
    }
}

@media (max-width: 575.98px) {
    .value-nav button {
        flex: 0 0 auto
    }
}

@media (max-width: 575.98px) {
    .route-copy {
        padding: 50px 24px
    }
}

@media (max-width: 575.98px) {
    .route-tab {
        font-size: 17px
    }
}

@media (max-width: 575.98px) {
    .route-photo {
        height: 510px
    }
}

@media (max-width: 575.98px) {
    .route-card {
        left: 16px;
        right: 16px;
        bottom: 20px;
        border-radius: 0 0 38px 0
    }
}



@media (max-width: 575.98px) {
    .tour-overlay {
        inset: 22px
    }
}

@media (max-width: 575.98px) {
    .tour-overlay h3 {
        font-size: 28px
    }
}

@media (max-width: 575.98px) {
    .tour-price strong {
        font-size: 22px
    }
}

/*@media (max-width: 575.98px) {*/
/*    .included-section {*/
/*        grid-auto-flow: row;*/
/*    }*/
/*}*/

@media (max-width: 575.98px) {
    .included-center {
        padding: 48px 24px
    }
}

@media (max-width: 575.98px) {
    .included-center h2 {
        font-size: 36px
    }
    .included-card h3, .included-center h3{
        font-size: 18px;
    }
    .room-card-one > div p, .room-card-two > div p, .room-card-three > div p{
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .room-card, .room-card-two {
        height: 480px
    }
}

@media (max-width: 575.98px) {
    .safety-section {
        min-height: 570px
    }
}

@media (max-width: 575.98px) {
    .safety-content {
        padding-top: 60px
    }
}

@media (max-width: 575.98px) {
    .safety-content > p:not(.kicker) {
        margin-top: 45px
    }
}

@media (max-width: 575.98px) {
    .safety-links {
        gap: 15px;
        margin-top: 30px;
    }

    .safety-links a {
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    .price-section h2 {
        font-size: 36px
    }
}

@media (max-width: 575.98px) {
    .check-grid {
        grid-template-columns:1fr
    }
}

@media (max-width: 575.98px) {
    .alive-actions {
        align-items: flex-start;
        margin-top: 20px
    }
}

@media (max-width: 575.98px) {
    .connection-gallery img {
        height: 180px
    }
}

@media (max-width: 575.98px) {
    .portrait-wrap {
        margin: 20px auto 0
    }
}

@media (max-width: 575.98px) {
    .story-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory
    }
}

@media (max-width: 575.98px) {
    .story {
        min-width: 82%;
        scroll-snap-align: start
    }
}

@media (max-width: 575.98px) {
    .stories-slider > .round-arrow {
        display: none
    }
}

@media (max-width: 575.98px) {
    .availability-actions {
        flex-wrap: wrap
    }

    .alive-actions .grt-btn {
        font-size: 18px;
    }
}

@media (max-width: 575.98px) {
    .contact {
        display: grid;
        gap: 8px
    }
}

@media (max-width: 575.98px) {
    .footer-links .col-md {
        flex: 0 0 50%
    }
}

@media (max-width: 991.98px) {
    .site-header {
        position: fixed;
        height: 64px
    }

    .site-header .navbar {
        height: 64px
    }

    .navbar-brand img {
        width: 155px
    }

    .navbar-collapse {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        padding: 18px 24px 24px;
        background: #fff;
        box-shadow: 0 12px 25px rgba(0, 0, 0, .12)
    }

    .nav-link {
        padding: 10px 0 !important
    }

    .header-cta {
        margin-top: 10px
    }

    .hero {
        min-height: 780px
    }

    .hero-inner {
        padding-top: 150px
    }

    .hero-facts {
        /*grid-template-columns:repeat(4, 1fr);*/
        gap: 12px;
        margin-top: 90px
    }

    /*.hero-facts div {*/
    /*    display: block;*/
    /*    text-align: center*/
    /*}*/

    /*.hero-facts div:not(:last-child):after {*/
    /*    right: -6px*/
    /*}*/
    .route-section {
        grid-template-columns:1fr;
        min-height: 0
    }

    .route-copy {
        padding: 60px max(24px, calc((100vw - 720px) / 2))
    }

    .route-photo {
        height: 620px
    }

    .included-section {
        grid-auto-flow: column;
        grid-auto-columns: minmax(90%, 1fr);
        /* KHÔNG dùng grid-template-columns */
        grid-template-columns: none;
        grid-auto-rows: min-content;
        align-items: end;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    /*.included-center {*/
    /*    grid-column: 1/-1;*/
    /*    grid-row: 1*/
    /*}*/
    .room-card {
        height: 600px
    }

    .safety-links {
        flex-wrap: wrap
    }

    .contact {
        justify-content: flex-start;
        flex-wrap: wrap
    }

    .availability-actions {
        justify-content: flex-start
    }

    .story-track {
        grid-template-columns:repeat(2, 1fr);
        row-gap: 28px
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 14px
    }

    .section-space {
        padding: 55px 0
    }

    .hero {
        min-height: 720px
    }

    .hero .kicker {
        font-size: 11px
    }

    .hero-inner {
        padding-top: 135px
    }

    .hero h1 {
        font-size: 36px;
        line-height: 1
    }

    .hero-lead {
        max-width: 330px;
        font-size: 13px
    }

    .hero-btn {
        min-width: 240px;
        min-height: 50px;
        font-size: 14px
    }

    .hero-facts {
        margin-top: 35px;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-auto-rows: min-content;
        align-items: start;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .hero-facts strong {
        font-size: 24px;
        margin-bottom: 10px;
        display: block;
    }

    .hero-facts span {
        font-size: 16px;
        line-height: 1.25;
    }

    .intro-title, .route-copy h2, .section-heading h2, .safety-content h2, .faq-section h2, .alive-section h2 {
        font-size: 31px
    }

    .value-nav {
        justify-content: flex-start;
        overflow-x: auto
    }

    .value-nav button {
        flex: 0 0 auto
    }

    .route-copy {
        padding: 50px 24px
    }

    .route-tab {
        font-size: 17px
    }

    .route-photo {
        height: 510px
    }

    .route-card {
        left: 16px;
        right: 16px;
        bottom: 20px;
        border-radius: 0 0 38px 0
    }


    .tour-overlay {
        inset: 22px
    }

    .tour-overlay h3 {
        font-size: 27px
    }

    .tour-price strong {
        font-size: 22px
    }

    .included-section {
        /*grid-auto-flow: row;*/
    }

    .included-center {
        padding: 20px 0 0 0
    }

    .included-center h2 {
        font-size: 36px
    }

    .room-card, .room-card-two {
        height: 480px
    }

    .safety-section {
        min-height: 570px;
        padding-bottom: 20px;
    }

    .safety-content {
        padding-top: 60px
    }

    .safety-content > p:not(.kicker) {
        margin-top: 25px
    }

    .safety-links {
        gap: 15px
    }

    .price-section h2, .connection-section h2 {
        font-size: 36px
    }

    .check-grid {
        grid-template-columns:1fr
    }

    .alive-actions {
        align-items: flex-start;
        margin-top: 20px
    }

    .connection-gallery img {
        height: 180px
    }

    .portrait-wrap {
        margin: 20px auto 0
    }

    .story-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory
    }

    .story {
        flex: 0 0 100%;
        min-width: 100%;
        scroll-snap-align: none;
    }

    .story-viewport {
        overflow: hidden;
    }

    .story-track {
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        touch-action: pan-y;
    }

    .stories-slider > .round-arrow {
        display: none
    }

    .grt-container .kicker {
        font-size: 18px;
    }

    .availability-actions {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .availability-actions .grt-btn {
        font-size: 18px;
    }

    .section-heading p {
        font-size: 18px;
    }

    .contact {
        display: grid;
        gap: 8px
    }

    .footer-links .col-md {
        flex: 0 0 50%
    }
}

/*PLAN*/
@media screen and (max-width: 767px) {
    .travel-options article {
        padding: 20px 0;
    }
    .condition-grid article{
        padding: 16px 18px;
    }
    .booking-form button, .plan-cta .grt-btn{
        font-size: 16px;
    }
}

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

    .plan-hero h1{
        font-size: 48px;
    }
    .plan-hero-copy > p:nth-of-type(2){
        margin: 10px 0 30px;
    }
    .travel-options article + article {
        border-left: none;
    }
    .booking-total strong{
        font-size: 28px
    }
    .booking-form button, .plan-cta .grt-btn, .plan-hero .grt-btn{
        font-size: 18px;
    }
    .plan-hero .grt-btn{
        padding: 18px 20px;
    }
    .hanoi-banner h3, .split-section > div > h2, .getting-there header h2, .conditions h2, .faq-grid > div:first-child h2, .plan-cta h2{
        font-size: 36px;
    }
    .condition-grid article{
        padding: 16px 24px;
    }
}

@media screen and (max-width: 767px) {
    .split-section li.provided.provided-green {
        grid-template-columns: 1fr;
        gap: 0px;
    }
}

@media (max-width: 991.98px) {
    .plan-page .site-header {
        position: fixed
    }

    .plan-hero-copy{
        padding-top: 65px;
    }
    .plan-hero {
        padding-top: 64px;
        height: auto;
        min-height: 650px;
    }

    .plan-hero aside {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 20px 0;
        padding: 16px 24px;
    }
    .plan-hero aside a {
        padding: 8px 0;
    }

    .booking-grid, .split-section, .faq-grid {
        grid-template-columns:1fr
    }

    .builder-intro {
        padding: 0
    }

    .travel-options {
        grid-template-columns:1fr
    }

    .night-zero {
        grid-template-columns:1fr;
        gap: 14px
    }

    .condition-grid {
        grid-template-columns:1fr
    }

    .grt-container {
        padding-left: 24px;
        padding-right: 24px
    }
}

@media (max-width: 991.98px) {
    .builder-intro > p:first-child, .getting-there header > p, .split-section > div > p:first-child, .conditions > div > p:first-child, .faq-grid > div:first-child > p:first-child {
        font-size: 19px
    }
}

@media (max-width: 575.98px) {
    .builder-intro h2, .getting-there header h2, .split-section > div > h2, .conditions h2, .faq-grid > div:first-child h2, .plan-cta h2 {
        font-size: 32px
    }

    .hanoi-banner h3 {
        font-size: 24px
    }
}

@media (max-width: 575.98px) {
    .plan-hero {
        height: auto;
        /*height: 720px*/
    }

    .plan-hero .container {
        padding-bottom: 30px;
    }

    .plan-hero-copy {
        padding-top: 95px;
        margin-bottom: 20px;
    }

    .plan-hero h1 {
        font-size: 45px
    }

    .plan-hero .grt-btn {
        min-width: 0;
        width: 100%;
        padding: 20px;
    }

    .plan-hero aside {
        left: auto;
        right: auto;
        bottom: auto;
        width: auto;
        position: relative;
        padding: 20px;
        border-radius: 0 0 30px 0;
        padding-bottom: 0;
    }

    .builder-intro h2, .getting-there header h2, .split-section > div > h2, .conditions h2, .faq-grid > div:first-child h2, .plan-cta h2 {
        font-size: 32px
    }

    .booking-form {
        padding: 25px 18px
    }

    .input-grid {
        grid-template-columns:1fr
    }

    .tour-choice {
        grid-template-columns:22px 1fr
    }

    .tour-choice strong {
        /*grid-column: 2*/
    }

    .hanoi-banner {
        padding: 22px
    }

    .hanoi-banner h3 {
        font-size: 28px
    }

    .booking-total {
        grid-template-columns:1fr
    }

    .booking-total small {
        grid-column: 1;
        grid-row: auto
    }

    .night-zero a {
        text-align: center
    }

    .condition-grid {
        gap: 0px
    }

    .condition-grid article {
        padding: 16px;
    }

    .plan-cta .grt-btn {
        width: 100%;
        margin: 7px 0
    }
}

@media (max-width: 991.98px) {
    .booking-form {
        padding: 28px 14px
    }

    .booking-total {
        grid-template-columns:1fr 180px
    }

    .night-zero {
        grid-template-columns:1fr;
        gap: 16px;
        padding: 16px;
    }

    .night-zero a {
        justify-self: start
    }
}

@media (max-width: 575.98px) {
    .form-progress span {
        font-size: 12px
    }

    .form-progress:after {
        right: 32px;
        left: 32px
    }

    .tour-choice {
        grid-template-columns:1fr;
        padding: 11px 20px;
    }

    .tour-choice strong {
        text-align: left;
        margin-top: 10px;
    }

    .booking-total {
        grid-template-columns:1fr;
        gap: 5px;
        padding: 18px;
    }

    .booking-total ul {
        grid-column: 1;
        grid-row: auto;
        margin-top: 12px
    }

    .payment-choice {
        grid-template-columns:1fr
    }

    .payment-choice em {
        margin-top: 8px
    }

    .card-total {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px
    }

    .booking-form button {
        font-size: 14px
    }
}

/*COMPANY*/
@media (max-width: 991.98px) {
    .company-page .site-header {
        position: fixed
    }

    .company-hero {
        padding-top: 64px;
        height: 590px
    }

    .company-hero-copy {
        padding-top: 85px
    }

    .company-hero aside {
        right: auto;
        top: auto;
        bottom: 30px
    }

    .who-grid, .responsible-grid, .credentials-grid, .contact-grid {
        grid-template-columns:1fr
    }

    .company-container {
        padding-left: 24px;
        padding-right: 24px
    }

    .credentials-card, .contact-card {
        padding: 20px
    }

    .company-page .navbar-collapse {
        background: #fff
    }
}

@media (max-width: 575.98px) {
    .section-label {
        font-size: 18px
    }

    .company-hero {
        height: 640px
    }

    .company-hero h1, .who-section h2, .responsible-section h2, .credentials-section h2, .company-contact h2 {
        font-size: 32px
    }

    .company-hero-copy > p:last-child {
        font-size: 14px
    }

    .company-hero aside {
        left: 24px;
        right: 24px;
        width: auto
    }

    .grt-way {
        font-size: 14px
    }

    .body-copy {
        font-size: 14px;
        padding: 0;
    }

    .responsible-list {
        border-left: 0
    }

    .responsible-list li {
        grid-template-columns:45px 1fr;
        padding-left: 0
    }

    .responsible-list > li > b {
        font-size: 31px
    }

    .credentials-card h3 {
        font-size: 23px
    }

    .credentials-card dl > div {
        grid-template-columns:1fr
    }

    .contact-card div:first-child dd {
        font-size: 18px;
    }

    .contact-card dd {
        font-size: 15px;
        overflow-wrap: anywhere
    }

    .contact-actions {
        align-items: stretch;
        flex-direction: column
    }

    .company-btn {
        width: 100%
    }
}

/*EXPLORE*/
@media (max-width: 991.98px) {
    .explore-page .site-header {
        position: fixed
    }

    .explore-hero {
        padding-top: 64px
    }

    .emotion-layout {
        grid-template-columns:250px 1fr
    }

    .highland-intro h2{
        font-size: 36px;
    }
    .human-story {
        grid-template-columns:1fr
    }

    .human-photo {
        height: 560px
    }

    .human-story-copy {
        padding: 45px 30px
    }

    .emotion-tabs button {
        padding: 0 35px;
    }
    .season-content {
        grid-template-columns:1fr;
        gap: 25px
    }

    .certainty-grid {
        grid-template-columns:1fr 1fr
    }

    .landscape-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .season-heading {
        text-align: left;
    }
    .season-content article {
        padding: 45px 35px;
    }
    .certainty-grid article{
        grid-template-columns: none;
        gap: 0;
    }
    .grt-container {
        padding-left: 24px;
        padding-right: 24px
    }
    .explore-cta .grt-btn{
        margin-right: 30px;
    }
}

@media (max-width: 575.98px) {
    .explore-hero {
        height: 640px
    }

    .explore-hero .container {
        padding-top: 50px
    }

    .explore-hero h1 {
        font-size: 37px
    }

    .explore-hero .grt-btn {
        width: 100%;
        margin: 8px 0;
        padding: 12px 20px;
    }

    .highland-intro h2, .emotion-journey h2, .human-story-copy h2, .landscape-stories h2, .season-heading h2, .geology h2, .certainty h2, .explore-cta h2, .season-content article h3 {
        font-size: 32px
    }

    .emotion-layout {
        grid-template-columns:1fr;
        min-height: auto;
    }

    .emotion-tabs {
        grid-auto-flow: column;
        grid-auto-columns: minmax(240px, 1fr);
        gap: 0px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        grid-template-rows:auto
    }

    .emotion-tabs button {
        /*min-height: 70px;*/
        padding: 16px;
        white-space: nowrap;
        scroll-snap-align: start;
        border-right: 1px solid rgba(255, 255, 255, 1);
        font-size: 18px;
    }

    .emotion-tabs button:last-child {

        border-right: none;
    }

    .emotion-image {
        height: 510px;

    }

    .emotion-image > div {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }
    .emotion-image h3 {
        font-size: 29px
    }

    .human-story-copy > p:not(:first-child){
        font-size: 16px;
    }
    .human-photo {
        height: 480px
    }

    .landscape-grid {
        grid-template-columns:1fr
    }

    .story-tags span {
        margin: 0;
    }

    .season-heading {
        text-align: left
    }

    .season-content article {
        padding: 28px 22px
    }

    .certainty-grid {
        grid-template-columns:1fr
    }

    .geology {
        height: 620px;
        padding: 75px 0
    }

    .certainty-grid article {
        grid-template-columns: auto;
        gap: 0;
    }

    .explore-cta {
        height: auto;
        min-height: 420px
    }

    .explore-cta .grt-btn {
        width: 100%;
        margin: 7px 0
    }
    .contact-actions a{
        font-size: 18px;
    }
}
/*grt diff*/
@media (max-width: 991.98px) {
    .difference-page .site-header {
        position: fixed;
    }
    .difference-hero {
        height: auto;
        padding-top: 0!important;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        padding: 0;
        margin-left: 0!important;
    }
    .difference-hero-copy {
        padding: 50px 24px;
    }
    .difference-hero-photo {
        height: 500px;
        border-radius: 0 0 0 45px;
    }
    .promise-strip {
        height: auto;
    }
    .promise-strip .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        padding: 24px;
    }
    .brand-values {
        /*grid-template-columns: 1fr 1fr;*/
        grid-template-columns: none;        /* ← ghi đè để loại bỏ */
        grid-auto-flow: column;
        grid-auto-columns: minmax(50%, 1fr);
        grid-auto-rows: min-content;
        align-items: start;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .difference-cards {
        grid-template-columns: 1fr 1fr;
    }
    .care-card,
    .care-card.care-wide {
        grid-column: auto;
        height: 340px;
    }
    .care-card:last-child {
        grid-column: 1/-1;
    }
    .human-difference {
        grid-template-columns: none;        /* ← ghi đè để loại bỏ */
        grid-auto-flow: column;
        grid-auto-columns: minmax(50%, 1fr);
        grid-auto-rows: min-content;
        align-items: start;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .hospitality {
        grid-template-columns: 1fr;
    }
    .hospitality-photo {
        height: 650px;
    }
    .hospitality-copy {
        padding: 55px;
    }
    .local-spirit .container {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .thoughtful-links {
        flex-wrap: wrap;
    }
    .grt-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .human-copy blockquote{
        padding-inline: 20px;
    }
    .point-view h2, .point-view h3, .journey-difference h2, .warm-care h2, .human-copy h2,
    .hospitality-copy h2, .truth-section h2, .thoughtful-road h2, .local-title, .choose-loop h2{
        font-size: 36px;
    }
    .human-copy blockquote{
        margin: 90px auto 50px;
    }
    .human-copy h2{
        line-height: 1.25;
    }
    .human-copy a, .thoughtful-links a {
        font-size: 18px;
    }
    .care-card p{
        font-size: 14px;
    }
    .truth-grid h3{
        margin-bottom: 18px;
    }
    .truth-grid article{
        padding: 20px 30px;
    }
    .choose-loop .grt-btn{
        font-size: 18px;
    }
}
@media (max-width: 575.98px) {
    .difference-hero-copy{
        padding: 35px 0;
    }
    .tour-card {
        height: auto;
    }
    .tour-overlay > p {
        font: 600 20px Montserrat;
    }
    .difference-hero-copy h1 {
        font-size: 39px;
    }
    .difference-hero-copy h2 {
        font-size: 32px;
    }
    .difference-hero-photo {
        height: 390px;
    }
    .promise-strip .container{
        grid-template-columns: none;        /* ← ghi đè để loại bỏ */
        grid-auto-flow: column;
        grid-auto-columns: minmax(60%, 1fr);
        grid-auto-rows: min-content;
        align-items: start;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .hero-quote {
        left: 16px;
        bottom: 22px;
        padding: 16px 18px;
    }
    .hero-quote strong {
        font-size: 14px;
    }
    .point-view h2,
    .point-view h3,
    .journey-difference h2,
    .warm-care h2,
    .human-copy h2,
    .hospitality-copy h2,
    .truth-section h2,
    .thoughtful-road h2,
    .choose-loop h2 {
        font-size: 30px;
        line-height: 1.25;
    }
    .brand-values {
        grid-template-columns: none;
        grid-auto-columns: minmax(70%, 1fr);
    }
    .brand-values div {
        border-bottom: 1px solid #bbb;
        padding: 12px 0px;
    }
    .difference-cards {
        grid-template-columns: 1fr;
    }
    .care-card:last-child {
        grid-column: auto;
    }
    .care-timeline li {
        grid-template-columns: 1fr;
        padding: 12px 0 12px 34px;
        gap: 4px;
    }
    .human-difference {
        grid-auto-columns: minmax(80%, 1fr);
        padding-bottom: 30px;
    }
    .human-copy {
        padding: 55px 0px;
    }
    .human-copy blockquote {
        margin: 45px auto 30px;
    }
    .hospitality-photo {
        height: 340px;
    }
    .hospitality-photo span {
        width: 90%;
        bottom: 30px;
        padding: 15px 24px;
    }
    .landscape-stories {
        padding-top: 0;
    }
    .human-story-copy > a {
        font-size: 19px;
    }
    .hospitality-copy {
        padding: 25px 15px;
    }
    .truth-grid {
        grid-template-columns: 1fr;
    }
    .truth-section {
        padding: 50px 0;
    }
    .truth-grid article {
        padding: 25px 22px;
    }
    .thoughtful-road{
        padding: 50px 0 30px 0;
    }
    .thoughtful-links {
        gap: 20px;
    }
    .local-title {
        font-size: 32px;
    }
    .local-panel {
        padding: 24px 20px;
    }
    .local-panel dl div {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    .choose-loop {
        padding: 45px 0;
    }
    .choose-loop .grt-btn {
        width: 100%;
        margin-right: 0;
    }
    .choose-loop .grt-btn.grt-btn-yellow{
        padding: 16px;
    }
    .warm-care header p {
        font-size: 18px;
    }
}
/*GRT detail*/
@media (max-width: 991.98px) {
    .difference-detail-page .site-header {
        position: fixed;
    }
    .sd-hero {
        height: auto;
        padding-top: 64px;
    }
    .sd-hero-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .sd-hero-copy {
        padding: 25px 24px;
    }
    .sd-hero-image {
        height: 500px;
    }
    .sd-hero-quote{
        bottom: 28px;
        left: 28px;
    }
    .sd-hero-quote strong{
        font-size: 64px;
        line-height: 1;
    }
    .sd-hero-quote span{
        font-size: 18px;
    }
    .why-matters h2, .principles h2, .operating-proof h2,
    .practice h2, .means h2, .next-commitment h2, .detail-cta h2{
        font-size: 36px;
    }
    .practice-grid,
    .means .container {
        grid-template-columns: 1fr;
    }
    .practice-grid > div:first-child {
        padding: 20px 0;
    }
    .practice-list {
        margin-top: 20px;
    }
    .grt-container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .next-commitment .grt-btn, .detail-cta .grt-btn,
    .detail-cta .grt-btn.grt-btn-yellow{
        font-size: 18px;
        padding: 15px 50px 15px 20px;
        background-position: calc(100% - 24px) center;
    }
    .means li::before {
        top: -5px;
    }
    .means li:not(:last-child){
        margin-bottom: 0px;
    }
    .proof-grid p, .proof-grid footer a, .proof-grid footer span{
        font-size: 14px;
        line-height: 1.25;
    }
    .proof-grid article > div{
        left: 18px;
        right: 18px;
        bottom: 18px;
    }
}
@media (max-width: 575.98px) {
    .sd-hero h1 {
        font-size: 45px;
    }
    .sd-hero-image {
        height: 370px;
    }
    .why-matters h2,
    .principles h2,
    .operating-proof h2,
    .practice h2,
    .means h2,
    .detail-cta h2 {
        font-size: 32px;
    }
    .principle-grid {
        grid-template-columns: 1fr;
    }
    .principle-grid article {
        border-right: 0;
        border-bottom: 1px solid #bbb;
    }
    .proof-grid {
        grid-template-columns: 1fr;
    }
    .proof-grid article:nth-child(3) {
        grid-column: auto;
    }
    .means ul {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }
    .honest-note .container {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .next-commitment h2 {
        font-size: 28px;
        line-height: 1.25;
    }
    .detail-cta{
        padding: 24px 0;
    }
    .detail-cta p {
        font-size: 20px;
    }
    .detail-cta .grt-btn {
        width: 100%;
        margin: 8px 0;
    }
}
@media (max-width: 991.98px) {
    .sd-hero h1{
        font-size: 36px;
    }
    .means .container {
        grid-template-columns: 42% 58%;
    }
    .proof-grid h3 {
        margin-top: 24px;
    }
    .principle-grid article{
        padding: 5px 15px;
    }
}
@media (max-width: 575.98px) {
    .proof-grid footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .proof-grid footer span {
        max-width: none;
        text-align: left;
    }
    .means {
        min-height: 0;
        padding: 40px 0;
    }
    .means .container {
        grid-template-columns: 1fr;
    }
    .means h2 {
        font-size: 32px;
    }
    .means ul {
        margin-top: 28px;
    }
    .honest-note {
        min-height: 125px;
    }
    .principle-grid article{
        padding: 5px 0;
        margin: 5px 0;
    }
    .principle-grid h3{
        font-size: 20px;
    }
    .practice {
        padding: 0;
    }
    .practice-list{
        margin: 0;
    }
    .practice-list b{
        font-size: 36px;
        line-height: 1;
    }
    .practice-list article{
        padding: 10px 0;
        grid-template-columns: 60px 1fr;
    }
    .practice-list h3{
        font-size: 18px;
    }

    .practice-list p{
        font-size: 14px;
    }
    .operating-proof {
        padding: 25px 0 20px;
    }
    .next-commitment p {
        margin: 0;
        font-size: 18px;
    }
    .sd-eyebrow {
        font-size: 20px;
    }
}