:root{
    --main-cl: #162531;
    --sub-cl: #F27325;
    --container-w: 72.917rem;
    --font-google-sans: "Google Sans Flex", sans-serif;
    --font-zalando: "Zalando Sans Expanded", sans-serif;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
body::-webkit-scrollbar {
    width: 0.5rem;
    background-color: #cedbff;
}
body::-webkit-scrollbar-thumb {
    background-color: var(--main-cl);
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    font-family: var(--font-zalando);
}
input, optgroup, select, textarea{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
    outline: none !important;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
body{
    overflow-x: clip;
    font-family: var(--font-google-sans);
    font-size: 0.8rem;
    color: var(--1_162531, #162531);
    font-weight: 300;
    line-height: 1.5;
}
section#home12:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .2;
}
.home12{
    position: relative;
}
@media (min-width: 1200px) {
    html {
        font-size: 1vw;
    }
}
.grid-container{
    max-width: var(--container-w);
    margin-left: auto;
    margin-right: auto;
}
#search-lightbox {
    width: 37.5rem;
    max-width: 100%;
}
#search-lightbox .search-lightbox-title{
    margin-bottom: 1.667rem;
    font-size: 1.979rem;
    line-height: 1.2;
    font-weight: 700;
}
#search-lightbox .search-keywords{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.083rem;
    gap: 0.521rem;
}
#search-lightbox .search-keywords > a{
    -webkit-border-radius: 2.604rem;
    -moz-border-radius: 2.604rem;
    border-radius: 2.604rem;
    font-size: 0.833rem;
    line-height: 1.042rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 0.3125rem 0.833rem;
    display: flex;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
#search-lightbox .search-keywords > a:hover{
    background-color: #fff;
    color: #000
}
#search-lightbox .flex-row > div{
    display: flex;
}
#search-lightbox .flex-row{
    align-items: unset;
    display: flex;
    -webkit-border-radius: 2.604rem;
    -moz-border-radius: 2.604rem;
    border-radius: 2.604rem;
    overflow: hidden;
}
#search-lightbox input{
    height: 100%;
    border: none;
}
#search-lightbox .button.icon{
    line-height: normal;
    min-height: unset;
    height: 100%;
    border: none;
    min-width: unset;
    background-color: #FFF;
    display: flex;
    align-items: center;
}
#search-lightbox .button.icon i{
    font-size: 0.9375rem;
    line-height: 1.25rem;
    color: #000
}
#search-lightbox input{
    font-size: 1.042rem;
    line-height: 1.25rem;
    padding-left: 1.5625rem;
    box-shadow: unset;
    height: 2.604rem;
}
.mfp-bg.mfp-ready{
    opacity: 0.8;
}
.mfp-content #search-lightbox{
    transform: translateY(-70%);
}
.load_home_page svg {
    width: 20.833rem;
    max-width: 95%;
    height: auto;
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.load_home_page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999999999;
    transition: 1s all;
    opacity: 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.load_home_page .mask {
    /*background-color: #00BDFFFF;*/
    transition: 1s all ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
}

div.load_home_page.complete .mask {
    background-color: transparent;
}

div.load_home_page .mask span {
    display: block;
    width: 100%;
    height: 20%;
    position: absolute;
    left: 0;
    transition: 1s all ease-in-out;
    background-color: var(--main-cl);
    /*backdrop-filter: blur(40px);*/
}

div.load_home_page .mask span:nth-child(even) {
    left: unset;
    right: 0;
}

div.load_home_page .mask span:nth-child(1) {
    top: 0;
}

div.load_home_page .mask span:nth-child(2) {
    top: 20%;
}

div.load_home_page .mask span:nth-child(3) {
    top: 40%;
}

div.load_home_page .mask span:nth-child(4) {
    top: 60%;
}

div.load_home_page .mask span:nth-child(5) {
    top: 80%;
}

.load_home_page.complete {
    pointer-events: none;
}

div.load_home_page.complete .mask span {
    width: 0;
    opacity: 0;
    transition-delay: .8s;
}
#respond input#wp-comment-cookies-consent{
    height: auto !important;
    margin: 0 10px 0 0  !important;
}
.load_home_page.complete svg{
    transition-delay: 0.8s;
    opacity: 0;
}
.load_home_page rect,
.load_home_page path{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.path-1 {
    animation-name: Signature2;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(2, .25, .43, .96);
    stroke: #FFF;
    stroke-width: 1px;
    stroke-dasharray: 2108;
    stroke-dashoffset: 2108;
    fill: transparent;
}

.path-2{
    animation-name: Signature1;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(2,.25,.43,.96);
    stroke: var(--sub-cl);
    stroke-width: 1px;
    stroke-dasharray: 2108;
    stroke-dashoffset: 2108;
    fill: transparent;
}
.load_home_page.complete .path-2{
    fill: var(--sub-cl);
}
.load_home_page.complete .path-1{
    fill: #FFF
}
@keyframes Signature1 {
    to {
        stroke: var(--sub-cl);
        stroke-dashoffset: 0;
    }
}
@keyframes Signature2 {
    to {
        stroke: #FFF;
        stroke-dashoffset: 0;
    }
}
.tile-reveal {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: row wrap;
    align-self: flex-start;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 99;
    background: #fff;
}
.tile-reveal-square {
    flex: 1 1 auto;
    width: 3.90625rem;
    height: 3.90625rem;
    background-color: var(--main-cl);
    opacity: 1;
}
.wrap-enter-site {
    position: fixed;
    width: 100%;
    height: auto;
    bottom: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
}
.search-page{
    padding: 5.208rem 0;
}
.search-page h1{
    margin-bottom: 2.604rem;
}
.search-tabs .search-tabs-title{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    gap: 0.833rem;
}
.search-tabs .search-tabs-title .search-tab-title{
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--fs-color-primary);
    font-size: 0.833rem;
    line-height: 1.042rem;
    color: var(--fs-color-primary);
    -webkit-border-radius: 0.521rem;
    -moz-border-radius: 0.521rem;
    border-radius: 0.521rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s;
}
.search-tabs .search-tab-title:hover,
.search-tabs .search-tab-title.active{
    background-color: var(--fs-color-primary);
    color: #FFF;
}
.search-tabs .search-tab-content{
    display: none;
}
.search-tabs .search-tab-content.active{
    display: block;
}
.search-tabs .search-empty{
    color: #333;
    font-size: 1.25rem;
    line-height: 2.083rem;
    padding: 0.521rem;
}
.search-tabs .search-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1.667rem;
    margin-bottom: 1.5625rem;
}
.search-tabs .search-item h3{
    margin: 0.521rem 0 0 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}
.container-width, .full-width .ubermenu-nav, .container, .row {max-width: 72rem !important;}

.col, .columns, .gallery-item {
    padding: 0 10px;
}
.compensate-for-scrollbar {
    margin: 0 !important;
}
.tf-modal__close {
    margin: 0;
    padding: 0;
    min-height: revert-layer;
}
.home6_wrap h2.heading_title {
    width: 100%;
    font-size: 3rem;
}

.home6_wrap {
    justify-content: center;
}


@media only screen and (max-width: 1199px) {
    :root{
        --container-w: 950px
    }
    .load_home_page svg {
        width: 320px;
    }
}
@media only screen and (max-width: 991px) {
    :root{
        --container-w: 720px
    }
    .load_home_page svg {
        width: 320px;
    }
    .search-tabs .search-grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ===== Slider banner / home5 slider (Swiper - 1 item, dots) ===== */
.slider_banner.swiper{
    width: calc(100% + 15rem);
    overflow: hidden;
}
.home5_slider.swiper{
    width: calc(100% + 15rem);
    overflow: hidden;
    float: right;
}
.slider_banner .swiper-slide.img img,
.home5_slider .swiper-slide.img img{
    display: block;
    width: 100%;
    height: auto;
}
.slider_banner .swiper-pagination,
.home5_slider .swiper-pagination{
    position: absolute;
    bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.417rem;
    left: 4rem;
}
.slider_banner .swiper-pagination-bullet,
.home5_slider .swiper-pagination-bullet{
    width: 0.521rem;
    height: 0.521rem;
    margin: 0 !important;
    background: #fff;
    opacity: .5;
    transition: all 0.3s ease;
}
.slider_banner .swiper-pagination-bullet-active,
.home5_slider .swiper-pagination-bullet-active{
    border-radius: 0.521rem;
    background: #fff;
    opacity: 1;
}

/* ===== Home2 box (marquee - hover pause, drag) ===== */
.home2_box.swiper{
    width: calc(100% + 15rem);
    overflow: hidden;
}
.home2_box .home2_inner.swiper-wrapper{
    /* marquee chạy đều, không giật */
    transition-timing-function: linear !important;
    -webkit-transition-timing-function: linear !important;
    align-items: stretch;
}
.home2_box .home2_item.swiper-slide{
    width: auto !important;
    max-width: 80%;
    height: auto;
    cursor: grab;
}
.home2_box .home2_item.swiper-slide:active{
    cursor: grabbing;
}

/* ===== Home10 slider (marquee - show 3 items) ===== */
.home10_slider.swiper{
    width: calc(100% + 15rem);
    overflow: hidden;
    padding-right: 9rem;
    margin-top: 5rem;
}
.home10_slider .swiper-wrapper{
    /* marquee chạy đều, không giật */
    transition-timing-function: linear !important;
    -webkit-transition-timing-function: linear !important;
    align-items: stretch;
}
.home10_slider .home10_item_slide.swiper-slide{
    height: auto;
    cursor: grab;
}
.home10_slider .home10_item_slide.swiper-slide:active{
    cursor: grabbing;
}

/* ===== Home14 slider (marquee - show 3 items) ===== */
.home14_slider.swiper{
    width: 100%;
    overflow: hidden;
}
.home14_slider .swiper-wrapper{
    /* marquee chạy đều, không giật */
    /* desktop: 3 item tĩnh; mobile: Swiper 1 item + autoplay */
    display: flex;
    align-items: stretch;
}
.home14_slider .home14_item.swiper-slide{ height: auto; }
/* Desktop: hiển thị tĩnh 3 item trên 1 hàng, không chạy slider */
@media (min-width: 769px){
    .home14_slider .swiper-wrapper{
        flex-wrap: wrap;
        justify-content: center;
        transform: none !important;
    }
    .home14_slider .home14_item.swiper-slide{
        width: 33.3333%;
        flex: 0 0 33.3333%;
        cursor: default;
    }
}

/* ===== Home8 slider (active nở rộng: 30% -> 60%) ===== */
.home8_slider.swiper{
    width: calc(100% + 15rem);
    overflow: hidden;
    margin-top: 5rem;
}
.home8_slider .home8_item.swiper-slide{
    width: 30%;
    height: auto;
    cursor: grab;
    overflow: hidden; /* che phần tràn khi slide đang nở/thu */
    transition: width 0.6s ease; /* khớp speed:600 của Swiper để nở/thu và trượt dừng cùng lúc, không bị giật ở cuối */
}
.home8_slider .home8_item.swiper-slide-active{
    width: 60%;
    z-index: 2; /* nổi trên các slide bên cạnh khi đang nở */
}
.home8_slider .home8_item.swiper-slide:active{
    cursor: grabbing;
}
.home8_slider .swiper-pagination{
    position: static;
    margin-top: 1.042rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.417rem;
}
.home8_slider .swiper-pagination-bullet{
    width: 0.521rem;
    height: 0.521rem;
    margin: 0 !important;
    background: #c9d6e5;
    opacity: 1;
    transition: all 0.3s ease;
}
.home8_slider .swiper-pagination-bullet-active{
    width: 1.5625rem;
    border-radius: 0.521rem;
    background: var(--main-cl);
}
section.home1 {
    background: #EAF4FF;
    overflow: hidden;
}
.home1_header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 6rem 1.75rem 2.5rem 0;
}
.home1_content {
    max-width: 42rem;
}
.home1_cta {
    padding-top: 0.6rem;
}
.home1_banner {
    width: 100%;
    padding-left: 7rem;
}
.home1_banner .slider_banner.swiper {
    width: 100%;
}
.home1_banner .slider_banner .swiper-slide.img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.heading_title {
    font-size: 5rem;
    line-height: 1;
    color: var(--1_162531, #162531);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.home1_content h1.heading_title {
    font-size: 3rem;
}

.home1_content .content {
    font-size: 1.6rem;
}

a.button_link {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--Gray_1, #393939);
    font-weight: 600;
    padding: .6rem 0;
    position: relative;
    line-height: normal;
    text-transform: uppercase;
    position: relative;
}

a.button_link:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #52B5AF 50%, #393939 50%);
    background-size: 200% 100%;
    background-position: 100% 0;   /* mặc định hiện nửa phải = màu gốc */
    transition: background-position .5s ease;
}
a.button_link:hover:before {
    background-position: 0 0;       /* hover: quét sang #52B5AF trái -> phải */
}
section.home2 {
    background: rgba(227, 240, 255, 0.75);
    padding: 7rem 0 14rem;
}
.home2_item .box_content {
    width: 10rem;
    flex: 0 0 auto;
    margin-right: 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home2_content {
    display: flex;
    margin-bottom: 5rem;
    gap: 5rem;
}

.home2_item .box_img {
    height: 31rem;
    width: auto;
    display: inline-flex;
}

.home2_item .box_img img {
    height: 100%;
    width: auto;
}

.home2_item h3 {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
}

.home2_inner .swiper-slide {
    width: auto !important;
}

.home2_item {
    margin-left: 5rem;
}
.home2_content_right h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: .2rem;
}

.home2_content_right {
    max-width: 21rem;
}

.home2_content h2.heading_title {
    width: max-content;
}
section.home3 .row {
    position: absolute;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
    top: 12rem;
    justify-content: flex-end;
}


section.home3 img {
    width: 100%;
    height: auto;
    display: block;
}

section.home3 {
    position: relative;
    margin-top: -8rem;
}

.home3_item {
    display: flex;
    padding: 1rem 0;
}

.home3_item h3 {
    margin-bottom: 0;
    width: 16rem;
    margin-right: 1rem;
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.9rem;
}

.home3_item+.home3_item {
    border-top: 1px solid rgba(19, 38, 51, 0.15);
}

ul.four_col {
    list-style: none;
    margin: 0 -0.5rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
}

ul.four_col li {
    width: 50%;
    padding: 0 .5rem;
}

li {}

.home3_content li {
    display: flex;
    flex-direction: column;
}

.home3_content li b {
    color: var(--1_162531, #162531);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
}

.home3_item ul {
    list-style: none;
}

section.home7 {
    background: rgba(227, 240, 255, 0.75);
    position: relative;
}

.home5_content {
    display: flex;
    flex-wrap: wrap;
}

.home5_content .content_left {
    width: 66%;
    padding-top: 6rem;
}

.home5_content .content_right {
    width: 33%;
    padding-top: 6rem;
    padding-left: 5rem;
    border-left: 1px solid rgba(19, 38, 51, 0.15);
    position: relative;
    padding-bottom: 2rem;
}

.home5_slider {
    width: calc(100% + 15rem);
}

.content_r {}

.content_right {}

.home5_content .content_left {
    padding-top: 0;
}

.home5_content .content_right {
    /*padding-top: 0;*/
    border: none;
}

.home5_slider.swiper {
    height: 100%;
}

.home5_slider.swiper .img.swiper-slide {
    height: auto;
}

.home5_slider.swiper .img.swiper-slide>* {
    height: 100%;
    object-fit: cover;
}

/* home5_content giờ chỉ còn 2 cột: content_left (slider) | content_right (heading + content + home5_items) */
.home5_content .content_right .inner > .content {
    color: var(--1_162531, #162531);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
}

.home5_item {
    padding: 1rem 0;
}

.home5_item+.home5_item {
    border-top: 1px solid rgba(19, 38, 51, 0.15);
}

.home5_item .number {
    color: var(--1_162531, #162531);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    font-family: var(--font-zalando);
    line-height: 1;
}

span {}

.home5_item span {
    color: var(--1_162531, #162531);
    font-size: .8rem;
    opacity: 0.5;
    margin-bottom: .5rem;
    display: block;
}

.home5_items_hint {
    color: var(--1_162531, #162531);
    opacity: 0.45;
    font-size: .75rem;
    font-style: italic;
    margin: 1rem 0 0;
}

ul.test_fit {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .6rem;
    flex-wrap: wrap;
}

ul.test_fit a {
    padding: 0.6rem 1.2rem;
    font-size: 0.7rem;
    color: var(--1_162531, #162531);
    font-weight: 500;
    background: var(--3_A8DFDC, #A8DFDC);
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: .6rem;
    transition: .6s all;
}

ul.test_fit li {
    margin: 0;
}
.home6_wrap {
    display: flex;
    justify-content: center;
}


.home6_wrap .inner_content {
    gap: 2rem;
    max-width: 13rem;
    display: flex;
    flex-direction: column;
}

a.view_360 svg {
    width: 4.5rem;
    height: auto;
    display: block;
}

section.home8 {
    padding: 7rem 0;
}
ul.test_fit a:hover {
    background: var(--1_162531, #162531);
    color: #fff;
}
.home9  h2.heading_title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
}

section.home9 .col {height: 92vh;display: flex;flex-direction: column;justify-content: space-between;padding-top: 3rem;padding-bottom: 2rem;}

.home7_content {
    /*max-width: 26rem;*/
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    text-align: center;
}
/* ẩn nhẹ nhàng khi xem các tab floor (không phải OVERVIEW) */
.home7_content.is-hidden {
    opacity: 0;
    transform: translateY(12px);
    visibility: hidden;
    pointer-events: none;
}

.home7_content h2.heading_title {
    margin-bottom: .5rem;
}

section.home9 {background-size: cover;background-repeat: no-repeat;background-position: center;position: relative;}

section.home9:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 69.28%, rgba(0, 0, 0, 0.50) 100%);
    height: 100%;
}

.home7_nav {
    list-style: none;
    margin: 0;
    gap: 1rem;
}

.home7_nav a {
    padding: 0 1.2rem;
    line-height: normal;
    color: #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.50);
    line-height: 1.5;
    display: inline-flex;
    height: 2rem;
    align-items: center;
    transition: .5s all;
}

.home7_nav a:hover {
    background: #fff;
    color: rgba(0, 0, 0, 0.50);
}
section.home10 {
    background: rgba(227, 240, 255, 0.75);
    padding: 5.5rem 0 3.5rem;
}

.home8_wrap {
    display: flex;
    justify-content: space-between;
}

.home8_wrap h2.heading_title svg {
    display: block;
    height: 12rem;
    width: auto;
}
.home8_single_img {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.home8_wrap .content {
    width: 26.25rem;
    flex: 0 0 auto;
}
.home12 .content {
    color: #fff;
    width: 33.25rem;
}

section.home12 {
    padding: 4.3rem 0 3.3rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

ul.home9_nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 15rem;
    margin-left: auto;
    text-align: left;
    gap: .8rem;
    margin-top: 3rem;
}

ul.home9_nav a {
    color: var(--2_E3F0FF, #E3F0FF);
    font-family: var(--font-zalando);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem; /* 140% */
    opacity: 0.75;
    transition: .5s all;
    display: inline-flex;
    padding-bottom: .5rem;
    position: relative;
}

ul.home9_nav a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: .5s all;
}

ul.home9_nav a:hover:before,ul.home9_nav a.active:before {
    width: 100%;
}

ul.home9_nav a.active {
    opacity: 1;
}

ul.home9_nav li {
    margin: 0;
}

.home12_mobile_slider{ display: none; }

section.home12 h2.heading_title svg {
    height: 11rem;
    width: auto;
}
.home8_item .box_img {
    height: 25rem;
}

.home8_item .box_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.home8_slider {
    width: calc(100% + 15rem);
}

.home8_single_img{ width: 100%; }
.home8_single_img .box_img{ height: 25rem; }
.home8_single_img .box_img img{ height: 100%; width: 100%; object-fit: cover; }
.home8_single_img .box_img {
    height: auto;
    margin-top: 1rem;
}

.home8_slider  h3 {
    font-size: 1.25rem;
    color: var(--1_162531, #162531);
    padding: 1.2rem 0 2rem;
    border-top: 1px solid rgba(19, 38, 51, 0.15);
    margin: 0;
}

section.home13 {
    padding: 6.25rem 0 4rem;
    position: relative;
}
.home10_item_slide {
    width: 16.75rem;
}

.home10_item_slide .box_img {
    height: 16.75rem;
    width: 100%;
}

.home10_item_slide .box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home10_item_slide h3 {
    color: var(--1_162531, #162531);
    /* Body */
    font-size: 0.8rem;
    font-family: var(--font-google-sans);
    margin-top: 1rem;
}

.home10_list .icon {
    height: 3.9rem;
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
}

.home10_list .icon img {
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

.home10_list  .content {
    font-size: 1rem;
}

/* Desktop/tablet (>=768px): giữ nguyên layout tĩnh 3 cột như cũ, Swiper KHÔNG init (xem home10ListMobile() trong frontend.js) */
@media (min-width: 768px){
    .home10_list.swiper{
        overflow: visible;
    }
    .home10_list .swiper-wrapper{
        display: flex;
        flex-wrap: wrap;
        row-gap: 2.5rem;
        margin: 4rem -5rem 0;
        transform: none !important;
    }
    .home10_item.swiper-slide{
        width: calc(calc(100% / 3) - 10rem);
        margin: 0 5rem;
        padding-bottom: 1.2rem;
        border-bottom: 1px solid rgba(19, 38, 51, 0.15);
        height: auto;
    }
}

.home10_item {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(19, 38, 51, 0.15);
}

section.home14 {
    background: linear-gradient(180deg, rgba(227, 240, 255, 0.75) 0%, rgba(227, 240, 255, 0.17) 19.36%, rgba(227, 240, 255, 0.00) 100%);
    padding: 8rem 0 10rem;
    position: relative;
}

.home14 h2.heading_title {
    margin-bottom: 5rem;
}

.home11_img iomg {}

.home11_img img {
    display: block;
    width: 100%;
    height: auto;
}

.home11_specs {
    width: 100%;
    padding-left: 6rem;
}
.home11_spec {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(19, 38, 51, 0.15);
}
.home11_spec .label {
    flex: 0 0 40%;
    color: #162531;
    line-height: 1.4;
    font-weight: 300;
    opacity: 0.5;
}
.home11_spec .value {
    flex: 1;
    text-align: right;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--1_162531, #162531);
    font-family: var(--font-google-sans);
}
/* các dòng phụ (không có label) của cùng một mục */
.home11_spec.sub {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.8rem;
}
.home11_spec.dotted {
    border-bottom-style: dotted;
}

section.home15 {
    height: 45rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 11rem;
}

.home12_items {
    display: flex;
    margin: 5rem -2rem 0;
}

.home12_item {
    width: 20rem;
    padding: 0 2rem;
}

.home12_item .icon {
    display: flex;
    height: 6.2rem;
    margin-bottom: 2.2rem;
}

.home12_item .icon img {max-height: 100%;width: auto;display: block;}

.home12_item h3 {
    color: var(--1_162531, #162531);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    font-family: var(--font-google-sans);
    margin-bottom: .4rem;
}

.home12_item:not(:last-child) {
    border-right: 1px solid rgb(22 37 49 / 10%);
}

section.home16 {
    background: rgba(227, 240, 255, 0.75);
}
.home16_box {
    background: #fff;
    width: calc(100% + 23rem);
    margin-left: -8rem;
    padding-left: 8rem;
    padding-top: 7rem;
    padding-bottom: 6rem;
    position: relative;
}

.home16_wrap {
    display: flex;
    padding-right: 15rem;
    justify-content: space-between;
}

.home16_wrap .content {
    width: 14.95rem;
}

.home16_wrap .wrap_form {
    width: 40rem;
}

.home16_box h2.heading_title {
    margin-bottom: 4rem;
}

.cf7_row.cf7_row--2col {
    display: flex;
    gap: .8rem;
}

.wrap_form input:not([type="checkbox"]):not([type="submit"]), .wrap_form select {
    width: 100%;
    height: 2.5rem;
    box-shadow: none;
    padding: 0 1.2rem;
    font-size: 0.8rem;
    color: #162531;
    margin-bottom: 1rem;
}

.cf7_row.cf7_row--2col .cf7_col {
    width: 50%;
}

.cf7_row.cf7_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.wpcf7-spinner {
    position: absolute;
}

.wpcf7-submit {
    margin: 0;
}

label.cf7_accept {
    margin: 0;
}

.wrap_form input[type="checkbox"] {
    margin: 0 .4rem 0 0;
}

.wrap_form span.wpcf7-list-item label {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 400;
}

.wrap_form span.wpcf7-list-item label a {
    font-weight: 700;
    text-decoration: underline;
    color: #162531;
}

.wpcf7-submit {
    margin: 0 !important;
    min-height: unset !important;
    color: #162531;
    font-family: "Zalando Sans Expanded";
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 600;
    background: transparent !important;
    color: #162531 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #162531 !important;
}

section.home17 {
    background: rgba(227, 240, 255, 0.75);
}

section.home17 h2.heading_title {
    margin-bottom: .6rem;
}

section.home17 h2.heading_title+.content {
    color: var(--1_162531, #162531);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    max-width: 36rem;
}

section.home17_1 {
    background: rgba(227, 240, 255, 0.5);
}

.home17_1_box {
    justify-content: space-between;
    padding: 2rem 0;
}

.home17_1_box .title {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.2rem;
    font-family: var(--font-zalando);
}

.home17_1_box img {
    max-width: 16rem;
    margin-bottom: 1rem;
}

.home17_1_box .right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home17_box {width: calc(100% + 23rem);margin-left: -9rem;}

.home14_content {
    padding-left: 8rem;
    padding-top: 5rem;
    padding-bottom: 9rem;
    padding-right: 5rem;
    border-bottom: 1px solid rgba(19, 38, 51, 0.15);
}

.home14_wrap {
    display: flex;
}

.home14_wrap .home14_img {
    width: 55%;
    flex: 0 0 auto;
    margin-top: -5rem;
}

.home14_img img {
    width: calc(100% + 6rem);
    float: right;
    max-width: unset;
}

.home14_wrap_content {
    padding-right: calc(calc(100vw - 72rem)/2);
    padding-left: 4rem;
    width: 100%;
    border-left: 1px solid rgba(19, 38, 51, 0.15);
    padding-top: 3rem;
}

.home14_wrap_content .content {
    margin-bottom: 1.15rem;
}
.home14_slider_box {width: calc(100% + 23rem);margin-left: -8rem;padding-left: 8rem;padding-right: calc(calc(100vw - 72rem)/2);border-bottom: 1px solid rgba(19, 38, 51, 0.15);padding-top: 4rem;padding-bottom: 4rem;}

.home14_item {
    text-align: center;
}

.home14_item .logo {
    height: 4.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #DCDEE0;
    max-width: 16rem;
    margin: 0 auto .7rem;
}

.home14_item h3 {
    padding: 0 2rem;
    color: var(--1_162531, #162531);
    text-align: center;
    font-family: "Google Sans Flex";
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 300;
}
section.home19 {
    padding: 6rem 0;
}

.home15_wrap {
    display: flex;
    margin-top: 2.8rem;
}

.home15_right {
    width: 58%;
    flex: 0 0 auto;
}

.home15_left {
    width: 42%;
    padding-right: 4.5rem;
}

.post_item .box_img {
    width: 11rem;
    height: 6.2rem;
    position: relative;
    flex: 0 0 auto;
    margin-right: 1.5rem;
    overflow: hidden;
}

.post_item .box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1;
    transition: 1s all;
}

.post_item {
    display: flex;
    align-items: center;
}

.post_item .date_post {
    color: var(--1_162531, #162531);
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 300;
}

.post_item h3 {
    margin: 0;
    color: var(--1_162531, #162531);
    text-overflow: ellipsis;
    font-family: "Google Sans Flex";
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 500;
}


.home15_right .post_item .box_img {
    width: 100%;
    height: 22.6rem;
}

.list_posts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.home15_right .post_item .box_content {
    position: absolute;
    bottom: 0;
    left: 0;
    filter: brightness(0) invert(1);
    z-index: 2;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
}

.home15_right .post_item:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50.11%, rgba(0, 0, 0, 0.80) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    content: '';
}

.home15_right .post_item h3 {
    font-size: 1.1rem;
}

a.link_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.post_item:hover .box_img img {
    scale: 1.1;
}
.home11_spec.sub .value {
    font-size: .8rem;
    font-weight: 400;
}

.home11_spec:first-child {
    padding-top: 0;
}

.home11_img {
    position: sticky;
    top: 8rem;
}

/* ===== Footer ===== */
.site-footer{
    padding: 0 0 1rem;
    background: #fff;
}
.site-footer .footer-top{
    display: flex;
    align-items: flex-end;
    gap: 5.5rem;
    padding-bottom: 2.5rem;
    position: relative;
    padding-top: 2.7rem;
}
.site-footer .footer-logo img{
    display: block;
    width: auto;
    height: 4.5rem;
}
.site-footer .footer-logo-text{
    font-family: var(--font-zalando);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: var(--1_162531, #162531);
}
.site-footer .footer-col{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.site-footer .footer-address{
    flex: 1.5;
}
.site-footer .footer-social{
    flex: 1;
}
.site-footer .footer-label{
    color: rgba(19, 38, 51, 0.5);
    font-weight: 300;
}
.site-footer .footer-address p{
    margin: 0;
    color: var(--1_162531, #162531);
}
.site-footer .footer-social-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.417rem;
}
.site-footer .footer-social-list li{
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.417rem;
}
.site-footer .footer-social-list li:not(:last-child)::after{
    content: "\00B7";
    color: rgba(19, 38, 51, 0.5);
}
.site-footer .footer-social-list a{
    color: var(--1_162531, #162531);
    transition: color 0.3s ease;
}
.site-footer .footer-social-list a:hover{
    color: var(--main-cl);
}
.site-footer .footer-cta{
    margin-left: auto;
}
.site-footer .brochure-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--2_E3F0FF, #E3F0FF);
    color: var(--1_162531, #162531);
    padding: .9rem 1.667rem;
    border-radius: 0;
    font-size: 0.938rem;
    transition: background 0.3s ease;
}
.site-footer .brochure-btn:hover{
    background: #cfe4ff;
}
.site-footer .brochure-btn svg{
    flex-shrink: 0;
}
.site-footer .footer-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.5rem;
}
.site-footer .footer-copyright{
    color: rgba(19, 38, 51, 0.5);
    font-size: 0.65rem;
}
.site-footer .footer-links{
    display: flex;
    align-items: center;
    gap: 2rem;
}
.site-footer .footer-links a{
    color: var(--1_162531, #162531);
    font-size: .7rem;
    transition: color 0.3s ease;
    opacity: .5;
}
.site-footer .footer-links a:hover{
    color: var(--main-cl);
}
.site-footer .footer-top:before {
    height: 1px;
    content: '';
    position: absolute;
    top: 0;
    width: calc(100% + 23rem);
    left: -8rem;
    background: rgba(19, 38, 51, 0.15);
    top: 0;
}
section.home10 h2.heading_title,section.home12 h2.heading_title {
    font-family: var(--font-google-sans);
}

section.home12 h2.heading_title {
    color: #fff;
    font-weight: 300;
}
#home9,section#home12 {
    background-size: cover;
    background-position: center;
    transition: background-image 0.6s ease-in-out; /* hỗ trợ hạn chế, xem cách 2 */
    animation: fadeBg 0.6s ease-in-out;
}

@keyframes fadeBg {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}
.load_home_page.complete img.logo_center {
    opacity: 0;
}
@media only screen and (max-width: 991px){
    .site-footer .footer-top{
        flex-wrap: wrap;
        gap: 2rem;
    }
    .site-footer .footer-cta{
        margin-left: 0;
        width: 100%;
    }
}
@media only screen and (max-width: 767px){
    .site-footer .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}
/* ===== Side nav (menu dọc cố định) ===== */
:root{
    --bar-w: 5.2rem;
    --panel-w: 20rem;
}
.side-nav-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: var(--bar-w);
    height: 100vh;
    background: #fff;
    border-right: 1px solid rgba(19, 38, 51, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0.7rem;
    z-index: 1002;
    width: 7rem;
    box-sizing: border-box;
}
.side-nav-logo img{
    display: block;
    width: 6rem;
    height: auto;
}
/* Hamburger */
.side-nav-toggle{
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    width: 2.5rem;
    margin: 0;
}
.side-nav-toggle span{
    display: block;
    width: 1.3rem;
    height: 2px;
    background: var(--1_162531, #162531);
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.25s ease, width 0.35s ease;
}
.side-nav-toggle span:nth-child(2){
    width: 1.9rem;
}
.side-nav.open .side-nav-toggle span:nth-child(1){
    transform: translateY(0.45rem) rotate(45deg);
}
.side-nav.open .side-nav-toggle span:nth-child(2){
    opacity: 0;
}
.side-nav.open .side-nav-toggle span:nth-child(3){
    transform: translateY(-0.45rem) rotate(-45deg);
}
/* Language */
.side-nav-lang{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}
.side-nav-lang a{
    color: rgba(19, 38, 51, 0.5);
    transition: color 0.3s ease;
    font-family: "Zalando Sans Expanded";
}
.side-nav-lang a.active{
    color: var(--1_162531, #162531);
    font-weight: 500;
}
.side-nav-lang a:hover{
    color: var(--main-cl);
}
.side-nav-lang span{
    color: rgba(19, 38, 51, 0.3);
}
/* Backdrop */
.side-nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(19, 38, 51, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1000;
}
.side-nav.open .side-nav-backdrop{
    opacity: 1;
    visibility: visible;
}
/* Panel */
.side-nav-panel{
    position: fixed;
    top: 0;
    left: 7rem;
    width: var(--panel-w);
    max-width: calc(100vw - var(--bar-w));
    height: 100vh;
    background: #fff;
    box-shadow: 0.5rem 0 2.5rem rgba(19, 38, 51, 0.12);
    padding: 6rem 2.5rem 2.5rem;
    overflow-y: auto;
    transform: translateX(-115%);
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
    z-index: 1001;
    min-width: 29rem;
    padding-left: 4rem;
}
.side-nav.open .side-nav-panel{
    transform: translateX(0);
    visibility: visible;
}
.side-nav-menu{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.side-nav-menu li{
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.side-nav.open .side-nav-menu li{
    opacity: 1;
    transform: translateX(0);
    /* xuất hiện lần lượt từng dòng */
    transition-delay: calc(var(--i) * 0.035s + 0.15s);
    margin: 0;
}
.side-nav-menu a{
    display: inline-block;
    font-size: 0.85rem;
    color: var(--1_162531, #162531);
    text-transform: uppercase;
    background-image: linear-gradient(to right, #52B5AF 50%, currentColor 50%);
    background-size: 200% 100%;
    background-position: 100% 0;   /* mặc định hiện màu gốc */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.5s ease, transform 0.3s ease;
    font-family: "Zalando Sans Expanded";
    font-weight: 500;
}
.side-nav-menu a:hover{
    background-position: 0 0;       /* hover: quét sang #52B5AF trái -> phải */
    transform: translateX(4px);
}
.side-nav-menu li.active a{
    color: var(--1_162531, #162531);
    font-weight: 600;
}

div#side-nav {
    background: linear-gradient(134deg, #E3F0FF 50%, #FFF 100%);
}
.side-nav-panel::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.side-nav-panel::-webkit-scrollbar {
    width: 0.217rem;
    background-color: #cedbff;
}
.side-nav-panel::-webkit-scrollbar-thumb {
    background-color: var(--main-cl);
}
@media only screen and (max-width: 767px){
    :root{
        --bar-w: 4rem;
        --panel-w: 16rem;
    }
    .side-nav-logo img{ width: 2.4rem; }
    .side-nav-menu a{ font-size: 0.8rem; }
    section.home8 {
        padding: 3rem 0 2rem !important;
    }
}

/* ===== Home6 - Concept tabs (3 styles) ===== */
.home6{
    position: relative;
}
.home4_items{
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 40rem;
    overflow: hidden;
}
.home4_item{
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
.home4_item.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.home4_bg{
    position: absolute;
    inset: 0;
    z-index: 0;
}
.home4_bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home4_item.style_1 .home4_bg::after,
.home4_item.style_2 .home4_bg::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.45) 100%);
}
.home4_inner{
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 4.5rem 4rem 7rem;
}
.home4_item .heading{
    font-family: var(--font-zalando);
    font-weight: 400;
    font-size: 5rem;
    line-height: 1;
    letter-spacing: 0.01em;
    margin: 0;
    color: #fff;
}
.home4_item h3{
    font-family: var(--font-zalando);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: #fff;
}
.home4_item .content{
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}
.home4_item.style_1 .home4_inner{
    justify-content: space-between;
}
.home4_item.style_1 .home4_bottom{
    display: flex;
    justify-content: flex-end;
}
.home4_item.style_1 .home4_bottom .box{
    max-width: 28rem;
    margin: 0 0 2.5rem;
}
.home4_item.style_2 .home4_top{
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}
.home4_item.style_2 .home4_top .left{
    max-width: 32rem;
}
.home4_item.style_2 .home4_top .left .heading{
    margin-bottom: 1.25rem;
}
.home4_item.style_2 .home4_top .right{
    max-width: 17rem;
}
.home4_item.style_3{
    background: linear-gradient(180deg, #dfecf7 0%, #eef4fa 100%);
}
.home4_item.style_3 .home4_bg{
    left: 0;
    right: 0;
    width: 100%;
    position: absolute;
}
.home4_item.style_3 .home4_bg::after{
    display: none;
}
.home4_item .home4_inner{
    width: 100%;
    justify-content: flex-start;
    padding: 6rem calc(calc(100vw - 72rem) / 2) 0;
    filter: brightness(0) invert(1);
}
.home4_item.style_3 .heading{
    color: var(--1_162531, #162531);
    margin-bottom: 3rem;
}
.home4_item.style_3 h3{
    color: var(--1_162531, #162531);
}
.home4_item.style_3 .content{
}
.home4_item.style_3 .home4_cols{
    display: flex;
    gap: 6rem;
}
.home4_item.style_3 .home4_cols .left{
    max-width: 17rem;
}
.home4_item.style_3 .home4_cols .right{
    max-width: 9rem;
}
.home4_nav_tabs{
    position: absolute;
    left: calc(calc(100vw - 72rem)/2);
    bottom: 2.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    filter: brightness(0) invert(1);
}
.home4_nav_tabs li{
    position: relative;
    cursor: pointer;
    font-size: 1.5rem;
    padding-bottom: 0.35rem;
    transition: color 0.3s ease;
    margin: 0;
    font-family: "Zalando Sans Expanded";
}
.home4_nav_tabs li::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.home4_nav_tabs li.active::after{
    transform: scaleX(1);
}
.home4_items.nav-dark .home4_nav_tabs li{ color: rgba(255,255,255,0.55); }
.home4_items.nav-dark .home4_nav_tabs li.active,
.home4_items.nav-dark .home4_nav_tabs li:hover{ color: #fff; }
.home4_items.nav-light .home4_nav_tabs li{ color: rgba(19,38,51,0.45); }
.home4_items.nav-light .home4_nav_tabs li.active,
.home4_items.nav-light .home4_nav_tabs li:hover{ color: var(--1_162531, #162531); }
.home4_item.style_3 .right .content {
    font-weight: 600;
}

.home4_item.style_2 .left .content {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--2_E3F0FF, #E3F0FF);
}

.home4_item.style_2 .right .content {
    font-weight: 400;
    color: var(--2_E3F0FF, #E3F0FF);
}
@media only screen and (max-width: 991px){
    .home4_item .heading{ font-size: 3.2rem; }
    .home4_inner{ padding: 3rem 2rem 6rem; }
    .home4_nav_tabs{ left: 2rem; gap: 1.5rem; }
    .home4_item.style_2 .home4_top{ flex-direction: column; gap: 1.5rem; }
    .home4_item.style_2 .home4_top .right{ text-align: left; }
    .home4_item.style_3 .home4_inner{ width: 100%; }
    .home4_item.style_3 .home4_bg{ width: 100%; opacity: 0.15; }
    .home4_item.style_3 .home4_cols{ flex-direction: column; gap: 1.5rem; }
}

/* ===== Home4 - Surrounded by the City's Icons ===== */
.home4{
    padding: 2rem 0 5rem;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    position: relative;
}
.home4_title{
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    max-width: 18rem;
    text-transform: uppercase;
    margin-top: 3rem;
}
/* ---- Left list ---- */
.point_group{padding: 1.5rem 0;}
.point_group .group_title{
    font-family: var(--font-google-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    margin: 0 0 1rem;
    padding-bottom: 0;
}
.point_items{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.8rem;
}
.point_item{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.25s ease;
}
.point_badge{
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 500;
    overflow: hidden;
    line-height: normal;
}
.point_badge img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.point_name{
    font-size: 0.8rem;
    color: rgba(255,255,255,0.75);
    transition: color 0.25s ease;
}
/* màu badge theo loại */
.type_flag .point_badge{background: #d9463e;color: #E3F0FF;}
.type_number_dark .point_badge{background: rgba(255,255,255,0.08);color: #A8DFDC;border: 1px dashed;}
.type_number_teal .point_badge{ background: #7fd6d0; color: #12313a; }
/* hover / active list */
.point_item:hover .point_name,
.point_item.active .point_name{ color: #fff; }
.point_item.active .point_badge{ box-shadow: 0 0 0 3px rgba(127,214,208,0.35); }

/* ---- Right map ---- */
.home4_map{
    position: relative;
    width: calc(100% + 14rem);
    margin-left: 1rem;
}
.home4_map_img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}
.map_points{
    position: absolute;
    inset: 0;
}
.map_point{
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.map_point.active,
.map_point:hover{
    z-index: 20;
}
.mp_dot{
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform 0.25s ease;
    line-height: normal;
}
.mp_dot img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.map_point.type_flag .mp_dot{ background: #d9463e; }
.map_point.type_number_dark .mp_dot{background: #1c3a4a;border: 1px solid rgba(255,255,255,0.5);border-style: dashed;}
.map_point.type_number_teal .mp_dot{ background: #7fd6d0; color: #12313a; }
/* pulse nhấp nháy */
.mp_dot::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    z-index: -1;
    animation: mpPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes mpPulse{
    0%{ transform: scale(1); opacity: 0.6; }
    100%{ transform: scale(2.6); opacity: 0; }
}
.map_point.active .mp_dot,
.map_point:hover .mp_dot{ transform: scale(1.25); }
/* ---- Tooltip ---- */
.mp_tooltip{
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.9rem);
    transform: translateX(-50%) translateY(6px);
    width: 8rem;
    background: #eef4fa;
    border-radius: 0;
    padding: 0.35rem 0.35rem 0.35rem;
    text-align: center;
    box-shadow: 0 0.75rem 1.75rem rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.map_point.active .mp_tooltip,
.map_point:hover .mp_tooltip{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.mp_tt_badge{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0;
    background: #7fd6d0;
    color: #12313a;
    font-weight: 600;
    font-size: 0.75rem;
    margin: -1.5rem auto 0.5rem;
    border: 3px solid #eef4fa;
    display: none;
}
.mp_tt_img{
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.mp_tt_img img{ display: block; width: 100%; height: auto; }
.mp_tt_name{
    display: block;
    color: var(--1_162531, #162531);
    font-size: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.mp_tooltip::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #eef4fa;
}
.point_group+.point_group {
    border-top: 1px solid rgba(168, 223, 220, 0.20);
}

section#home4 .heading_title {
    font-size: 3rem;
}

/* Redesign Figma node 19050:7906 - legend #home4 chỉ còn 1 nhóm (Transportation), 1 cột */
.point_group.single_group .group_title{
    font-family: var(--font-google-sans);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5625rem;
}
.point_group.single_group .point_items{
    grid-template-columns: 1fr;
    gap: 0.9375rem;
}
.point_group.single_group .point_item{
    gap: 1.375rem;
}
.point_group.single_group .point_badge{
    width: 1.375rem;
    height: 1.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--3_A8DFDC, #A8DFDC);
    color: #172431;
}
.point_group.single_group .point_name{
    font-family: var(--font-google-sans);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.285;
    opacity: 1;
    color: var(--2_E3F0FF, #E3F0FF);
    margin-bottom: 0;
}
section.home5 {
    background: #172431;
    padding-top: 6rem;
    padding-bottom: 4.2rem;
    position: relative;
}

.home5_wrap {
    display: flex;
}

.home52_wrap {
    display: flex;
    justify-content: space-between;
}

.home5 h2.heading_title {
    color: #fff;
    margin-bottom: 2rem;
}

.home52_content .content {
    color: #fff;
}



.home52_content {
    width: 28.8rem;
}

.home52_content_img img {width: 100%;height: auto;display: block;}

.home52_content_img  svg {
    position: absolute;
    top: .6rem;
    right: -11rem;
    width: 32.7rem;
    height: auto;
}

.home52_content_img {
    position: relative;
    margin-right: 8rem;
    width: 25.2rem;
    margin-top: -5rem;
}

ul.home5_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.home5_list li {
    display: flex;
    align-items: center;
    color: #fff;
    margin: 0;
    gap: 1rem;
}

ul.home5_list li .img {
    width: 2.75rem;
    height: 1rem;
    display: flex;
}

ul.home5_list li  img {width: 100%;height: 100%;object-fit: cover;}

ul.home5_list li+li {
    margin-top: 1rem;
}

.home52_item>b {
    color: #fff;
    display: block;
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: .6rem;
}
@media only screen and (max-width: 767px){
    .point_items{ grid-template-columns: 1fr; }
    .home4_map{ margin-top: 2rem; }
}

/* ===== Floors SVG - ẩn từng tầng, hover hiện ra ===== */
.floors-svg .floor{
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.5s ease;
}
.floors-svg .floor.show,
.floors-svg .floor:hover{
    opacity: 1;
}
/* trang tiếng Việt: ẩn tên tầng tiếng Anh (path), hiện tên tiếng Việt (text) đúng chỗ đó */
.floors-svg--vi .floor > path{
    display: none;
}
.floors-svg .floor-name{
    font-family: var(--font-google-sans);
    font-size: 12px;
    fill: #E3F0FF;
    pointer-events: none;
}

/* ===== Đổi background section khi click nav (cross-fade nhẹ) ===== */
.home9,
.home12{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-fade-layer{
    position: absolute;
    inset: 0;
    z-index: -1; /* trên nền section, dưới nội dung */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
    pointer-events: none;
}
.bg-fade-layer.show{ opacity: 1; }
/* trạng thái active của nav */
.home7_nav li a,
.home9_nav li a{
    transition: opacity 0.3s ease;
}
.home7_nav li:not(.active) a,
.home9_nav li:not(.active) a{
    opacity: 0.55;
}
.home9_nav li.active a{
    opacity: 1;
    text-underline-offset: 0.35rem;
}

.home7_nav li.active a {
    color: rgba(0, 0, 0, 0.50);
    background: #fff;
}

.home9_nav li.active a:before {
    width: 100%;
}
/* ===== Inner hero (Thank you / 404) - layout giống home1 ===== */
.inner-hero{
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 82vh;
}
.inner-hero--404{
    background: rgba(227, 240, 255, 0.75);
    padding-top: 5rem;
}
.inner-hero--light{
    background: #fff;
}
.inner-hero-content{
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    padding: 6rem 3rem 6rem 11rem;
}
.inner-hero-box{
    max-width: 34rem;
}
.inner-hero .heading_title{
    text-transform: none;
    font-size: 3.5rem;
    line-height: 1.05;
    margin-bottom: 1.25rem;
}
.inner-hero .content{
    font-size: 1rem;
    line-height: 1.5;
    color: #162531;
    max-width: 20rem;
}
.inner-hero-action{
    margin-top: 10.5rem;
    text-align: right;
}
.inner-hero-media{
    flex: 0 0 50%;
    max-width: 50%;
    overflow: hidden;
}
.inner-hero-media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-template-thank-you .inner-hero-content {
    align-items: flex-start;
    padding: 9rem 3rem 6rem 11rem;
}

.page-template-thank-you  section.inner-hero.inner-hero--light {
    border-bottom: 1px solid rgba(19, 38, 51, 0.15);
}
@media only screen and (max-width: 991px){
    .inner-hero{ flex-direction: column-reverse; min-height: 0; }
    .inner-hero-content,
    .inner-hero-media{ flex: 0 0 100%; max-width: 100%; }
    .inner-hero-content{ padding: 3rem 1.5rem 3rem 6rem; }
    .inner-hero-media img{ height: 60vw; }
    .inner-hero .heading_title{ font-size: 2.4rem; }
}

/* ===== News popup (ajax chi tiết tin tức) ===== */
body.np-lock{ overflow: hidden; }
.post_item[data-post]{ cursor: pointer; }
.news-popup{
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.news-popup.open{ opacity: 1; visibility: visible; }
.news-popup-overlay{
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 33, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.news-popup-dialog{
    position: relative;
    width: 100%;
    max-width: 82rem;
    max-height: 89vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #eef4fb 0%, #ffffff 30%);
    border-radius: 0.6rem;
    box-shadow: 0 2rem 4rem rgba(0,0,0,0.35);
    transform: translateY(18px) scale(0.97);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.45s ease;
    min-height: 22rem;
}
.news-popup.open .news-popup-dialog{ transform: none; opacity: 1; }
.news-popup-close{
    position: sticky;
    top: 1rem;
    float: right;
    margin: 1rem 1rem 0 0;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(19,38,51,0.06);
    color: var(--1_162531, #162531);
    cursor: pointer;
    z-index: 3;
    transition: background 0.25s ease, transform 0.25s ease;
    padding: 0;
}
.news-popup-close:hover{ background: rgba(19,38,51,0.14); transform: rotate(90deg); }

/* ----- Loading logo ----- */
.news-popup-loading{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.news-popup.loading .news-popup-loading{ opacity: 1; visibility: visible; }
.np-logo{
    width: 3.2rem;
    height: auto;
    animation: npPulse 1.3s ease-in-out infinite;
    z-index: 2;
}
.np-spinner{
    position: absolute;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    border: 2px solid rgba(16,114,186,0.15);
    border-top-color: var(--main-cl, #1072BA);
    animation: npSpin 0.9s linear infinite;
}
@keyframes npSpin{ to{ transform: rotate(360deg); } }
@keyframes npPulse{
    0%,100%{ transform: scale(0.9); opacity: 0.55; }
    50%{ transform: scale(1.06); opacity: 1; }
}

/* ----- Body xuất hiện mượt ----- */
.news-popup-body{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.news-popup.loaded .news-popup-body{ opacity: 1; transform: none; }
.news-popup.loading .news-popup-body{ min-height: 18rem; }

/* ----- Nội dung chi tiết ----- */
.post-detail{padding: 5rem 8.5rem 2.5rem;background: linear-gradient(180deg, rgba(227, 240, 255, 0.75) 0%, rgba(227, 240, 255, 0.15) 50%, rgba(227, 240, 255, 0.00) 100%);}
.post-detail .pd-head{
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}
.post-detail .pd-head-left{ flex: 1 1 58%; }
.post-detail .pd-head-right{ flex: 1 1 42%; }
.post-detail .pd-title{
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--1_162531, #162531);
}
.post-detail .pd-meta{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #162531;
    margin-bottom: 0.9rem;
}
.post-detail .pd-share{ display: flex; gap: 0.5rem; }
.post-detail .pd-share a{
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #A8DFDC;
    color: var(--main-cl, #1072BA);
    transition: background 0.25s ease, color 0.25s ease;
}
.post-detail .pd-share a:hover{ background: var(--main-cl, #1072BA); color: #fff; }
.post-detail .pd-excerpt{
    font-size: 0.9rem;
    line-height: 1.6;
    color: #162531;
    padding-top: 0.3rem;
}
.post-detail .pd-thumb{
    margin-bottom: 1.75rem;
    border-radius: 0.4rem;
    overflow: hidden;
}
.post-detail .pd-thumb img{ display: block; width: 100%; height: auto; }
.post-detail .pd-content{font-size: .8rem;line-height: 1.7;color: var(--1_162531, #162531);}
.post-detail .pd-content img{ max-width: 100%; height: auto; border-radius: 0.4rem; }

@media only screen and (max-width: 767px){
    .post-detail{ padding: 0.5rem 1.25rem 1.75rem; }
    .post-detail .pd-head{ flex-direction: column; gap: 1rem; }
    .post-detail .pd-title{ font-size: 1.6rem; }
}

/* Nền phía sau popup khi vào thẳng permalink bài viết */
.single-news-bg{
    min-height: 60vh;
    background: linear-gradient(180deg, #e3f0ff 0%, #eef5fc 60%, #ffffff 100%);
}

/* ===== Test Fit popup (Fancybox) ===== */
.tf-link{ cursor: pointer; }
/* ép căn giữa nội dung inline (tránh bị dồn xuống đáy) */
.fancybox-slide--html{
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 3vh 2rem;
}
.fancybox-slide--html::before{ display: none !important; }
.fancybox-slide--html .fancybox-content{
    margin: 0 !important;
    padding: 0 !important;
    max-height: 94vh;
    overflow: auto;
}
.fancybox-slide .tf-popup{
    display: block !important;
    max-width: 70rem;
    width: 100%;
    margin: 0 auto;
    background: #efeee9;
    border-radius: 0.4rem;
    padding: 3rem;
    overflow: visible;
    padding: 5rem !important;
}
.tf-popup-inner{
    display: flex;
    gap: 6rem;
    align-items: flex-start;
}
.tf-left{width: 27rem;}
.tf-right{ flex: 1; }
.tf-right img{ display: block; width: 100%; height: auto; }
.floor-popup-inner{ display: block; }
.floor-popup-inner .tf-right{ width: 100%; }
.floor-gallery{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.floor-gallery img{ border-radius: 0.4rem; }
@media only screen and (max-width: 767px){
    .floor-gallery{ grid-template-columns: 1fr; }
}
.floor-gallery {
    display: block;
}
.tf-title{
    font-family: var(--font-zalando);
    font-size: 1.75rem;
    line-height: 1.15;
    margin: 1rem 0 1.2rem;
    color: var(--1_162531, #162531);
}
.tf-block{margin-bottom: 0;padding: 1.5rem 0;border-top: 1px solid rgba(19, 38, 51, 0.15);}
.tf-block h4{
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 0.7rem;
    padding-bottom: 0;
    color: var(--1_162531, #162531);
    font-family: "Google Sans Flex";
}
.tf-legend ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
}
.tf-legend li{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--1_162531, #162531);
}
.tf-swatch{
    flex-shrink: 0;
    width: 2.75rem;
    height: 1rem;
    border-radius: 0;
    border: 1px solid rgba(19,38,51,0.15);
}
.tf-disclaimer p{
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(19,38,51,0.6);
}
/* ===== Popup test-fit tự viết bằng JS thuần (thay Fancybox) ===== */
html.tf-modal-open{ overflow: hidden; }
.tf-modal{ position: fixed; inset: 0; z-index: 9999; display: none; }
.tf-modal[aria-hidden="false"]{ display: block; }
.tf-modal__backdrop{ position: absolute; inset: 0; background: rgba(19,38,51,0.6); }
.tf-modal__dialog{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 3vh 2rem;
}
.tf-modal__content{ position: relative; max-height: 94vh; overflow: auto; }
/* khung nền popup (thay cho .fancybox-slide .tf-popup) */
.tf-modal .tf-popup{
    display: block;
    max-width: 70rem; width: 100%;
    margin: 0 auto;
    background: #efeee9;
    border-radius: 0.4rem;
    padding: 5rem;
}
.tf-modal .tf-popup {
    padding: 1rem;
}
.tf-modal__close{
    position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2;
    width: 2.6rem; height: 2.6rem;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.9); color: #162531;
    font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.tf-modal__nav{
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 3rem; height: 3rem;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.9); color: #162531;
    font-size: 1.1rem; cursor: pointer;
}
.tf-modal__prev{ left: 1.5rem; }
.tf-modal__next{ right: 1.5rem; }
.tf-modal--single .tf-modal__nav{ display: none; }
@media (max-width: 849px){
    .tf-modal__dialog{ padding: 2vh 1rem; }
    .tf-modal .tf-popup{ padding: 2rem; }
    .tf-modal__close{ width: 2.2rem; height: 2.2rem; top: 0.6rem; right: 0.6rem; }
    .tf-modal__nav{ width: 2.4rem; height: 2.4rem; }
    .tf-modal__prev{ left: 0.4rem; }
    .tf-modal__next{ right: 0.4rem; }
}
.news-popup-dialog::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.news-popup-dialog::-webkit-scrollbar {
    width: 0.417rem;
    background-color: #cedbff;
}
.news-popup-dialog::-webkit-scrollbar-thumb {
    background-color: var(--main-cl);
}

.pd-share a svg {
    width: 57%;
    height: auto;
}
.home1_header:before, section.home5:before, .home13:before, .home14:before, .home16_box:before, .home7:before,.home4:before{
    content: "";
    background-image: url(../images/ht1.png);
    position: absolute;
    width: 26rem;
    height: 18rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
section.home5:before, .home13:before, .home14:before, .home16_box:before, .home7:before,.home4:before{
    background-image: url(../images/ht_2.png);
    top: 0;
    right: 0;
    left: unset;
    bottom: unset;
    width: 35rem;
    height: 50rem;
    z-index: 2;
}
.home13:before, .home16_box:before{
    background-image: url(../images/ht3.png);
    width: 34rem;
    height: 31rem;
    right: 4rem;
}
section.home13 .heading_title+.content {
    color: var(--1_162531, #162531);
    font-size: 1.5rem;
    font-weight: 500;
}
section.home1 {
    position: relative;
}
.home4:before {
    right: unset;
    left: 0;
    width: 28rem;
    height: 22rem;
}
@media only screen and (max-width: 767px){
    .fancybox-slide .tf-popup{ padding: 1.5rem; }
    .tf-popup-inner{ flex-direction: column; gap: 1.5rem; }
    .tf-left, .tf-right{ flex: 0 0 100%; max-width: 100%; }
}

/* =====================================================================
   RESPONSIVE TOÀN TRANG  (1199px / 850px / 767px)
   ===================================================================== */

/* ---------- ≤ 1199px (tablet ngang) ---------- */
@media only screen and (max-width: 1199px){
    html{font-size: 1vw;}

    /* chừa chỗ cho thanh menu dọc cố định (tránh che nội dung bên trái) */
    #main{ padding-left: calc(var(--bar-w) + 2rem); }
    .site-footer .grid-container{ padding-left: calc(var(--bar-w) + 2rem); }

    .heading_title{ font-size: 3rem; }
    .home1_content h1.heading_title{ font-size: 2.6rem; }
    .home1_header{ padding: 5rem 1.5rem 2rem 0; }
    .home1_banner{ padding-left: 4.6rem; }
    .inner-hero-content{ padding: 5rem 2.5rem 5rem 2.5rem; }

    /* Concept tabs */
    .home4_item .heading{ font-size: 3.4rem; }
    .home4_items{ height: 80vh; min-height: 34rem; }
    .home4_inner{ padding: 3.5rem 3rem 6rem; }

    /* Inner hero (thank you / 404) */
    .inner-hero{ min-height: 70vh; }
    .inner-hero .heading_title{ font-size: 2.8rem; }

    /* Side nav */
    :root{ --bar-w: 4.6rem; --panel-w: 18rem; }

    /* Popup test fit */
    .fancybox-slide .tf-popup{ padding: 2.25rem; }
    .tf-title{ font-size: 1.5rem; }

    /* News popup */
    .news-popup-dialog{ max-width: 46rem; }
    .post-detail{ padding: 1rem 1.75rem 2rem; }
}

/* ---------- ≤ 850px (tablet dọc) ---------- */
@media only screen and (max-width: 850px){
    html{font-size: 1.1vw;}

    .heading_title{ font-size: 2.4rem; }
    .home1_header{ padding: 4rem 1rem 1.5rem 1rem; }
    .home1_banner{ padding-left: 4.6rem; }
    .home1_content h1.heading_title{ font-size: 2.2rem; }
    .home1_content .content{ font-size: 1.15rem; }

    /* stack các layout tuỳ biến */
    .home2_content{ flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
    .home2_content h2.heading_title{ width: auto; }
    section.home2{ padding: 4rem 0 5rem; }

    /* Concept tabs */
    .home4_item .heading{ font-size: 2.6rem; }
    .home4_item.style_2 .home4_top{ flex-direction: column; gap: 1.5rem; }
    .home4_item.style_2 .home4_top .right{ text-align: left; max-width: 100%; }
    .home4_item.style_3 .home4_inner{ width: 100%; }
    .home4_item.style_3 .home4_bg{width: 100%;opacity: 0.18;}
    .home4_item.style_3 .home4_cols{ flex-direction: column; gap: 1.25rem; }
    .home4_items{ height: 70vh; min-height: 30rem; }
    .home4_inner{ padding: 3rem 1.5rem 5.5rem; }
    .home4_nav_tabs{ left: 1.5rem; gap: 1.25rem; flex-wrap: wrap; }

    /* Section 4 - map + list */
    .home4_map{ margin-top: 1.5rem; }
    .point_items{ grid-template-columns: 1fr 1fr; }

    /* home11 specs (General Specification) */
    .home11_spec{ gap: 1rem; }
    .home11_spec .label{ flex-basis: 45%; }
    .home11_img{ position: static; margin-bottom: 1.5rem; }

    /* Test fit popup -> 1 cá»™t */
    .tf-popup-inner{ flex-direction: column; gap: 1.5rem; }
    .tf-left, .tf-right{ flex: 0 0 100%; max-width: 100%; }

    /* News popup */
    .post-detail .pd-head{ flex-direction: column; gap: 1rem; }

    /* Footer */
    .site-footer .footer-top{ flex-wrap: wrap; gap: 1.75rem; }
    .site-footer .footer-cta{ margin-left: 0; width: 100%; }
}

/* ---------- ≤ 767px (mobile) ---------- */
@media only screen and (max-width: 767px){
    html{font-size: 4vw;}

    :root{ --bar-w: 3.6rem; --panel-w: 15rem; }

    .heading_title{ font-size: 2rem; }
    .home1_header{ padding: 1.5rem 1rem 1rem 1rem; flex-direction: column; }
    .home1_banner{ padding-left: 1rem; }
    .home1_content h1.heading_title{ font-size: 2rem; }
    .home1_content .content{ font-size: 1rem; }

    /* Concept tabs */
    .home4_item .heading{ font-size: 2.1rem; }
    .home4_items{ height: auto; min-height: 0; }
    .home4_item{
        position: relative;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
    }
    .home4_item.active{ display: block; }
    .home4_inner{ position: relative; padding: 2.5rem 1.25rem 5rem; min-height: 26rem; }
    .home4_nav_tabs{ left: 1.25rem; bottom: 1.25rem; }

    /* Section 4 - list 1 cá»™t */
    .point_items{}
    .home4_title{ font-size: 1.6rem; }

    /* Inner hero */
    .inner-hero{ flex-direction: column-reverse; min-height: 0; }
    .inner-hero-content,
    .inner-hero-media{ flex: 0 0 100%; max-width: 100%; }
    .inner-hero-content{ padding: 2.5rem 1.25rem 2.5rem 1.25rem; }
    .inner-hero-media img{ height: 60vw; }
    .inner-hero .heading_title{ font-size: 2rem; }

    /* home11 specs */
    .home11_spec{ flex-direction: column; gap: 0.35rem; }
    .home11_spec .value{ text-align: left; }

    /* Test fit popup */
    .fancybox-slide .tf-popup{ padding: 1.25rem; }
    .tf-legend ul{ grid-template-columns: 1fr; }

    /* News popup */
    .news-popup{ padding: 1.5rem 0.75rem; }
    .post-detail{ padding: 0.5rem 1rem 1.5rem; }
    .post-detail .pd-title{ font-size: 1.5rem; }

    /* Footer */
    .site-footer .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 1rem; }
    .site-footer .footer-links{ gap: 1.25rem; }
}

/* ============ MOBILE: side-nav dọc -> thanh ngang trên top ============ */
@media only screen and (max-width: 767px){
    :root{ --topbar-h: 3.4rem; }

    /* bỏ chừa rail trái, chừa chỗ cho top bar */
    #main{ padding-left: 0 !important; padding-top: var(--topbar-h); }
    .site-footer .grid-container{ padding-left: 1rem; }

    /* thanh bar nằm ngang trên cùng */
    .side-nav-bar{
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: var(--topbar-h);
        padding: 0 1rem;
        border-right: none;
        border-bottom: 1px solid rgba(19, 38, 51, 0.1);
        background: #fff;
    }
    .side-nav-logo{ order: 1; display: flex; align-items: center; }
    .side-nav-logo img{ width: auto; height: 1.9rem; }
    .side-nav-lang{ order: 2; margin-left: auto; margin-right: 1.1rem; }
    .side-nav-toggle{ order: 3; width: auto; padding: 0.35rem; }

    /* panel menu trượt xuống từ trên, full width */
    .side-nav-panel{
        top: var(--topbar-h);
        left: 0;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - var(--topbar-h));
        padding: 1.75rem 1.5rem 2.5rem;
        transform: translateY(-115%);
        box-shadow: 0 1rem 2rem rgba(19, 38, 51, 0.15);
    }
    .side-nav.open .side-nav-panel{ transform: translateY(0); }
    .side-nav-menu li{ transform: translateY(-10px); }
    .side-nav.open .side-nav-menu li{ transform: translateY(0); }

    /* reset padding trái (không còn rail) */
    .home1_header{ padding: 1.5rem 1rem 1rem 1rem; flex-direction: column; }
    .home1_banner{ padding-left: 1rem; }
    .inner-hero-content{ padding: 2.5rem 1.25rem; }
    .home4_nav_tabs{ left: 1.25rem; }
}

/* ============ FIX MOBILE: bỏ khoảng trống & tràn ngang ============ */
@media only screen and (max-width: 850px){
    /* neutralize các breakout gây tràn ngang */
    .home5_slider,
    .home14_slider_box,
    .home17_box{
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* home5 / home7 : 2 cá»™t -> 1 cá»™t */
    .home5_content{ flex-direction: column; }
    .home5_content .content_left,
    .home5_content .content_right{
        width: 100% !important;
        padding-left: 0 !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        border-left: none !important;
    }

    /* home8 (360°) : stack + thu nhỏ SVG heading */
    .home8_wrap{ flex-direction: column; gap: 1.25rem; }
    .home8_wrap .content{ width: 100% !important; }
    .home8_wrap h2.heading_title svg{ height: auto !important; width: auto; max-width: 100%; }
    section.home8{ padding: 3.5rem 0; }

    /* home9 (FEEL THE CITY PULSE) : bỏ 92vh */
    section.home9 .col{ height: auto !important; gap: 2.5rem; padding: 4.5rem 0 3rem; }
    .home9 h2.heading_title,
    .home7_content h2.heading_title{ font-size: 1.5rem; }
    .home7_content{ max-width: 100%; }

    /* home12 (Komune) : content full + SVG heading scale */
    .home12 .content{ width: 100% !important; }
    section.home12 h2.heading_title svg{ height: auto !important; width: auto; max-width: 100%; }

    /* các slider marquee/tràn -> chừa trong màn hình */
    .home10_slider.swiper,
    .home2_box.swiper{ width: 100% !important; padding-right: 0 !important; }
}

@media only screen and (max-width: 767px){
    /* chống tràn ngang toàn cục */
    #wrapper{ overflow-x: hidden; }

    /* giảm padding dọc lớn của các section */
    section.home8{ padding: 3rem 0; }
    section.home10{ padding: 3rem 0; }
    section.home12{ padding: 3rem 0; }

    /* home12 (Komune Business Center) mobile: bỏ ảnh nền đổi theo click (dễ bị chìm chữ),
       dùng màu nền đặc + slider ảnh riêng bên dưới nav thay thế */
    section#home12{
        background-image: none !important;
        background-color: #172431;
    }
    section#home12:before{
        display: none;
    }
    #home12 .bg-fade-layer{
        display: none;
    }
    .home12_mobile_slider{
        display: block;
        width: 100%;
        overflow: hidden;
        margin-top: 1.5rem;
    }
    .home12_mobile_item{
        border-radius: 0.4rem;
        overflow: hidden;
        position: relative;
    }
    .home12_mobile_item img{
        display: block;
        width: 100%;
        height: 14rem;
        object-fit: cover;
    }
    .home12_mobile_item span{
        position: absolute;
        left: 0; right: 0; bottom: 0;
        padding: 0.8rem 1rem;
        background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
        color: #fff;
        font-size: 0.9rem;
    }
    .home12_mobile_slider .swiper-pagination{
        position: static;
        margin-top: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.417rem;
    }
    .home12_mobile_slider .swiper-pagination-bullet{
        width: 0.521rem;
        height: 0.521rem;
        margin: 0 !important;
        background: rgba(255,255,255,0.35);
        opacity: 1;
        transition: all 0.3s ease;
    }
    .home12_mobile_slider .swiper-pagination-bullet-active{
        width: 1.5625rem;
        border-radius: 0.521rem;
        background: var(--3_A8DFDC, #A8DFDC);
    }
    section.home13{ padding: 3rem 0; }
    section.home14{ padding: 3rem 0 3.5rem; }
    section.home7{padding: 3rem 0 1rem;}
    section.home5{ padding-top: 3rem; }

    /* heading không tràn */
    .heading_title{font-size: 1.7rem !important;overflow-wrap: anywhere;line-height: 1.2;}
    .home9 h2.heading_title,
    .home7_content h2.heading_title{ font-size: 1.4rem; }
    .home8_wrap h2.heading_title svg{ max-width: 78vw; }
    section.home12 h2.heading_title svg{ max-width: 82vw; }
}

@media only screen and (max-width: 767px){
    /* mọi heading dạng SVG co lại vừa màn hình (chống tràn ngang) */
    .heading_title svg{ max-width: 84vw !important; height: auto !important; }
    section.home10 h2.heading_title svg,
    section.home17 h2.heading_title svg{ max-width: 84vw !important; height: auto !important; }
}

/* ===== Page loader (logo) ===== */
.page-loader{
    position: fixed;
    inset: 0;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.page-loader.loaded{ transform: translateY(-100%); }
.page-loader .pl-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    transition: opacity 0.35s ease;
}
.page-loader.loaded .pl-inner{ opacity: 0; }
.pl-logo{
    width: 4.5rem;
    height: auto;
    opacity: 0;
    animation: plLogoIn 0.8s ease forwards, plFloat 2.6s ease-in-out 0.8s infinite;
}
@keyframes plLogoIn{
    from{ opacity: 0; transform: translateY(10px) scale(0.9); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes plFloat{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-6px); }
}
.pl-bar{
    width: 7rem;
    height: 2px;
    background: rgba(19, 38, 51, 0.12);
    border-radius: 2px;
    overflow: hidden;
}
.pl-bar i{
    display: block;
    height: 100%;
    width: 0;
    background: var(--main-cl, #1072BA);
    border-radius: 2px;
    animation: plBar 2.8s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
@keyframes plBar{
    0%{ width: 0; }
    55%{ width: 65%; }
    100%{ width: 100%; }
}
section.home8 {
    padding: 7rem 0 2rem;
}
@media only screen and (max-width: 767px) {
    .grid-container{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .load_home_page svg {
        width: 240px;
    }
    #search-lightbox{
        margin-left: -20px;
        margin-right: -20px;
        max-width: calc(100%  + 40px);
    }
    #search-lightbox .search-lightbox-title{
        margin-bottom: 20px;
        font-size: 20px;
    }
    #search-lightbox .search-keywords{
        margin-top: 20px;
    }
    #search-lightbox .search-keywords > a{
        font-size: 14px;
    }
    .search-tabs .search-grid{
        grid-template-columns: 1fr 1fr;
        grid-gap: 1.5rem 1rem
    }
    .search-page{
        padding: 3rem 0;
    }
    .search-page h1{
        margin-bottom: 2rem;
    }
    .search-tabs .search-tabs-title .search-tab-title{
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
    .slider_banner.swiper {
        width: 100%;
    }

    /* Home8 slider mobile: lưới 2 cột x 2 hàng (JS), bỏ hiệu ứng nở 30%->60% chỉ dành cho desktop */
    .home8_slider.swiper{
        width: 100%;
        margin-top: 2rem;
    }
    .home8_slider .home8_item.swiper-slide,
    .home8_slider .home8_item.swiper-slide-active{
        width: auto;
        transition: none;
    }
    .home8_item .box_img{
        height: 10rem;
    }

    .home2_content_right h3 {
        font-size: 1rem;
    }

    .heading_title {
        font-size: 1rem;
    }

    .home2_item .box_img {
        height: 13rem;
    }

    section.home3 {
        margin-top: 3rem;
    }

    section.home3 .row {
        top: 3rem;
        position: unset;
        transform: unset;
    }

    .home3_item {
        flex-direction: column;
    }

    section.home3 img {
        width: calc(100% + 18rem);
        max-width: unset;
    }

    .home4_map {
        width: 100%;
        margin-left: 0;
    }

    .home4 {
        padding-bottom: 2rem;
    }

    /* Mobile: dời home4_map lên giữa home4_title và home4_list */
    .home4 .row {
        flex-direction: column;
    }

    .home4 .row > .col {
        display: contents;
    }

    .home4_title {
        order: 1;
        padding: 0 10px;
    }

    .home4_map {
        order: 2;
        padding: 0 10px;
    }

    .home4_list {
        order: 3;
        padding: 0 10px;
    }

    .home52_wrap {
        flex-direction: column;
    }

    .home52_content {
        width: 100%;
    }

    .home5 h2.heading_title {
        line-height: 1.2;
    }

    .home52_content_img {
        margin-top: 3rem;
        width: 13.2rem;
        margin-left: 2rem;
        order: -1;
        margin-bottom: 2rem;
    }

    .home52_content_img svg {
        width: 17.25rem;
        top: .2rem;
        right: -8rem;
    }

    section#home6 {
        background: #172431;
    }

    .home4_item .home4_inner {
        padding: 0 15px;
    }

    .home4_nav_tabs {}

    .home4_item {
        height: 39rem;
        padding-top: 2rem;
    }

    .home4_nav_tabs li {
        font-size: 1rem;
    }

    .home4_item.style_2 .left .content {
        font-size: 1.2rem;
    }

    .home4_item h3 {
        font-size: 1.2rem;
    }

    .home4_item.style_1 .home4_bottom .box {
        margin: 0 0 7.5rem;
    }

    .home4_item.style_3 .home4_bg {
        opacity: 1;
    }

    .home5_content .content_right .inner > .content {
        font-size: 1.2rem;
    }

    .home5_content .content_right {
        padding-top: 0 !important;
    }

    .fancybox-slide .tf-popup {
        padding-bottom: 2rem !important;
        padding-right: 2rem !important;
        padding-left: 2rem !important;
        padding-top: 3rem !important;
    }

    .tf-title {
        font-size: 1.2rem;
    }

    .home6_wrap .inner_content {
        width: 100%;
        max-width: unset;
        display: flex;
        flex-direction: unset;
    }

    .home6_wrap {
        flex-direction: column;
    }

    .home6_wrap h2.heading_title {
        width: 100%;
        line-height: 1.2;
        order: -1;
    }

    section.home9 {
    }

    section.home9 .col {
        padding: 3rem 15px 0;
        height: 38rem !important;
    }

    .home7_content h2.heading_title {
        font-size: 1.2rem !important;
    }

    .home7_nav {
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .home7_nav a:hover {}

    .home7_nav li a {
        opacity: 1 !important;
    }

    section.home10 h2.heading_title svg, section.home17 h2.heading_title svg {
        max-width: 64vw !important;
        height: auto !important;
    }

    .home8_slider.swiper {
        margin-top: 2rem;
    }
    ul.home9_nav a {
        font-size: 1remn;
    }

    ul.home9_nav {
        width: 100%;
    }

    .home1_header:before, section.home5:before, .home13:before, .home14:before, .home16_box:before, .home7:before, .home4:before {
        display: none;
    }

    .home10_item_slide {
        /* width: 25.75rem; */
    }

    .home10_slider.swiper {
        margin-top: 2rem;
    }

    /* Mobile: home10_list thành slider lưới 2 cột x 2 hàng, tự chạy (xem home10ListMobile() trong frontend.js) */
    .home10_list.swiper{
        width: 100%;
        overflow: hidden;
        margin: 2rem 0 0;
    }
    .home10_item.swiper-slide{
        width: auto;
        margin: 0;
    }
    .home10_list .swiper-pagination{
        position: static;
        margin-top: 1.042rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.417rem;
    }
    .home10_list .swiper-pagination-bullet{
        width: 0.521rem;
        height: 0.521rem;
        margin: 0 !important;
        background: #c9d6e5;
        opacity: 1;
        transition: all 0.3s ease;
    }
    .home10_list .swiper-pagination-bullet-active{
        width: 1.5625rem;
        border-radius: 0.521rem;
        background: var(--main-cl);
    }

    .home10_list .content {
        font-size: .8rem;
    }

    .home14 h2.heading_title {
        margin-bottom: 1.5rem;
    }

    .home11_specs {
        padding: 0;
    }

    section.home15 {
        height: auto;
        background-position: bottom left;
        padding-top: 2rem;
        background: #eaf4ff !important;
    }

    .home16_wrap {
        flex-direction: column;
    }

    .home16_box {
        width: 100%;
        margin: 3rem 0 0 0;
        padding: 2rem;
    }

    .home16_wrap {
        padding: 0;
    }

    .home16_box h2.heading_title {
        margin-bottom: 1rem;
    }

    .home16_wrap .content {
        width: 100%;
    }

    .home16_content {
        margin-bottom: 1rem;
    }

    .home16_wrap .wrap_form {
        width: 100%;
    }

    .wrap_form {}

    .home12_item .icon {
        height: 4.2rem;
        margin-bottom: 1rem;
    }

    .home12_items {
        margin: 2rem -2rem 0;
    }

    .home14_content {
        padding: 1rem 0;
        margin-top: 2rem;
    }

    .home14_wrap {
        flex-direction: column;
    }

    .home14_wrap .home14_img {
        order: 2;
        width: 100%;
        margin-top: 2rem;
    }

    .home14_wrap_content {
        border: none;
        padding: 2rem 0 0;
    }

    section.home17 h2.heading_title+.content {
        font-size: 1rem;
    }

    .home14_img img {
        width: calc(100% + 1rem);
    }
    .home10_item_slide {
        width: 100%;
    }

    .home10_item_slide .box_img {
        height: 9.75rem;
    }

    section.home13 .heading_title+.content {
        font-size: 1.2rem;
    }

    .list_posts {}

    .home15_wrap {
        flex-direction: column;
        margin-top: 1rem;
    }

    .home15_right {
        width: 100%;
        order: -1;
        margin-bottom: 2rem;
    }

    .home15_left {
        width: 100%;
        padding: 0;
    }

    .home15_right .post_item .box_img {
        height: 16.6rem;
    }

    .home15_right .post_item .box_content {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
    }

    section.home19 {
        padding: 3rem 0;
    }
}

/* ===== Heading zoom-out theo từng chữ cái khi cuộn tới ===== */
.heading_title .hz-wordwrap{
    display: inline-block;   /* giữ nguyên từ, không ngắt dòng giữa chừng */
    white-space: nowrap;
}
.heading_title .hz-word{
    display: inline-block;
    opacity: 0;
    transform: scale(1.6);
    transform-origin: 50% 50%;
    transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
    transition-delay: calc(var(--hz-i) * .08s);
    will-change: opacity, transform;
}
.heading_title.hz-in .hz-word{
    opacity: 1;
    transform: scale(1);
}
@media (prefers-reduced-motion: reduce){
    .heading_title .hz-word{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Hover button_link: quét màu chữ trái -> phải sang #52B5AF (chỉ chữ, không nền) ===== */
a.button_link{
    background-image: linear-gradient(to right, #52B5AF 50%, currentColor 50%);
    background-size: 200% 100%;
    background-position: 100% 0;   /* mặc định hiện nửa phải = màu gốc */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position .5s ease;
}
a.button_link:hover{
    background-position: 0 0;       /* hover: trượt sang nửa trái = #52B5AF, quét trái -> phải */
}

/* ===== Con trỏ tùy chỉnh: vòng tròn + mũi tên (lên/xuống theo nửa màn hình) ===== */
.cursor-ring{
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border: 1.5px solid #52B5AF;
    border-radius: 50%;
    background-color: #52B5AF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 100060;
    opacity: 0;
    transition: opacity .3s ease, width .25s ease, height .25s ease,
    border-color .25s ease, background-color .25s ease;
    will-change: transform;
}
.cursor-ring.show{ opacity: 1; }
.cursor-ring.hover{
    width: 38px;
    height: 38px;
    border-color: #52B5AF;
    background-color: #52B5AF;
    color: #fff;
}
.cursor-ring .cursor-arrow,
.cursor-ring .cursor-zoom,
.cursor-ring .cursor-hand{
    position: absolute;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
/* mũi tên: mặc định lên, xoay theo ngữ cảnh */
.cursor-ring.down .cursor-arrow{ transform: rotate(180deg); }
.cursor-ring.arrow-left .cursor-arrow{ transform: rotate(-90deg); }
.cursor-ring.arrow-right .cursor-arrow{ transform: rotate(90deg); }
/* icon zoom ẩn sẵn, hiện khi rê lên ảnh mở được popup */
.cursor-ring .cursor-zoom{ opacity: 0; transform: scale(.4); }
.cursor-ring.zoom .cursor-arrow{ opacity: 0; transform: scale(.4); }
.cursor-ring.zoom .cursor-zoom{ opacity: 1; transform: scale(1); }
/* icon bàn tay ẩn sẵn, hiện khi rê vào .map_point / .point_item */
.cursor-ring .cursor-hand{ opacity: 0; transform: scale(.4); }
.cursor-ring.hand{
    width: 32px;
    height: 32px;
    border-color: #52B5AF;
    background-color: #52B5AF;
    color: #fff;
}
.cursor-ring.hand .cursor-arrow,
.cursor-ring.hand .cursor-zoom{ opacity: 0; transform: scale(.4); }
.cursor-ring.hand .cursor-hand{ opacity: 1; transform: scale(1); }

/* chữ Prev/Next khi rê vào slider (thay cho mũi tên) */
.cursor-ring .cursor-text{
    position: absolute;
    opacity: 0;
    transform: scale(.6);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.cursor-ring.nav{
    width: 78px;
    height: 78px;
    border-color: transparent;
    background-color: transparent;
    color: #fff;
}
.cursor-ring.nav .cursor-arrow,
.cursor-ring.nav .cursor-zoom,
.cursor-ring.nav .cursor-hand{ opacity: 0; transform: scale(.4); }
.cursor-ring.nav .cursor-text{ opacity: 1; transform: scale(1); }

/* ẩn con trỏ mặc định khi dùng con trỏ tùy chỉnh (giữ caret cho ô nhập liệu) */
.has-custom-cursor, .has-custom-cursor *{ cursor: none !important; }
.has-custom-cursor input:not([type="submit"]):not([type="button"]),
.has-custom-cursor textarea,
.has-custom-cursor select{ cursor: auto !important; }

@media (pointer: coarse){
    .cursor-ring{ display: none !important; }
}

/* ===== Popup xem ảnh (ảnh không gắn link) ===== */
.img-lightbox{
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.img-lightbox.open{ opacity: 1; visibility: visible; }
.img-lightbox-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(8, 18, 18, 0.82);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.img-lightbox-inner{
    position: relative;
    margin: 0;
    max-width: 92vw;
    max-height: 88vh;
    transform: scale(.9);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.img-lightbox.open .img-lightbox-inner{ transform: scale(1); }
.img-lightbox-inner img{
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.img-lightbox-close{
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #222;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
section.home7 .swiper-pagination {
    justify-content: center;
}
.home4_item.style_3 .right .content svg {
    margin-top: 1rem;
}
.site-popup__close {
    min-height: unset;
    width: 2rem;
    height: 2rem;
    right: 0;
}

.site-popup__close:hover {
    color: #fff;
}
img.logo_center {
    position: relative;
    z-index: 999;
    filter: brightness(0) invert(1);
    width: 12rem;
    max-width: 95vw;
    transition: .5s all;
}
@media (max-width: 767px){
    .img-lightbox-close{ top: 8px; right: 8px; }
}

/* ===== Popup banner (Theme Options) ===== */
.site-popup{
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.site-popup.open{ opacity: 1; visibility: visible; }
.site-popup__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    cursor: pointer;
}
.site-popup__box{
    position: relative;
    max-width: 90vw;
    max-height: 88vh;
    transform: scale(.92);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.site-popup.open .site-popup__box{ transform: scale(1); }
.site-popup__box img{
    display: block;
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: .3rem;
}
.site-popup__link{ display: block; }
.site-popup__close{
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(22, 37, 49, .85);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

/* ===== Slider cursor Prev / Next ===== */
.slider-nav-active,
.slider-nav-active * { cursor: none !important; }

.slider-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100070;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 0 28px rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .18s ease;
    will-change: transform;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}
.slider-cursor.show { opacity: 1; }

@media (pointer: coarse){ .slider-cursor { display: none !important; } }
.site-popup__close:hover{ background: #52B5AF; }

.home1_header:before {
    right: -11rem;
    left: unset;
    width: 44rem;
    height: 27rem;
    filter: brightness(0) invert(1);
}

a.button_link {
    font-family: var(--font-zalando);
}

.slider_banner  span.swiper-pagination-bullet {
    background: #E3F0FF;
}

.home1_header {
    padding-bottom: 4rem;
}

@media only screen and (max-width: 767px){
    .slider_banner .swiper-pagination {
        bottom: 1rem;
        left: 1rem;
    }

    .home1_banner {
        padding: 0;
    }

    .home8_slider h3 {
        font-size: 1rem;
    }

    .home17_1_box {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .home1_header {
        padding-bottom: 2rem;
    }
}

/* ===== Logo đối tác (home18): hover hiện "Click to view" ===== */
.home18 .home14_item{ position: relative; }
.home18 .home14_item .logo{
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.home18 .home14_item .logo img{ transition: transform .3s ease; }
.home18 .home14_item:has(a.link_box) .logo::after{
    content: "Click to view";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 37, 49, .82);
    color: #fff;
    font-family: "Google Sans Flex";
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.home18 .home14_item:has(a.link_box):hover .logo{
    border-color: #162531;
    box-shadow: 0 .4rem 1.2rem rgba(22, 37, 49, .15);
}
.home18 .home14_item:has(a.link_box):hover .logo::after{ opacity: 1; }
.home18 .home14_item:has(a.link_box):hover .logo img{ transform: scale(1.05); }
@media (pointer: coarse){
    .home18 .home14_item .logo::after{ display: none; }
}

/* ===== Register Your Interest: khối QR ===== */
.home16_qr{
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.6rem;
    padding: .8rem;
    background: rgba(227, 240, 255, .75);
    width: 14.95rem;
    box-sizing: border-box;
}
.home16_qr img{
    width: 4.4rem;
    height: 4.4rem;
    flex: none;
    display: block;
}
.home16_qr_text{ display: flex; flex-direction: column; gap: .2rem; color: #162531; }
.home16_qr_text strong{ font-size: .7rem; letter-spacing: .06em; font-weight: 600; }
.home16_qr_text span{ font-size: .65rem; line-height: 1.4; font-weight: 300; }
@media (max-width: 849px){
    .home16_qr{ width: 100%; max-width: 20rem; }
}

/* ===== Footer: khối UOA Vietnam (nền xanh) ===== */
.site-footer{ padding-bottom: 0; }
.footer-uoa{
    position: relative;
    background: var(--main-cl, #162531);
    color: #fff;
    padding: 3.2rem 0 1.2rem;
    width: 100%;
    box-sizing: border-box;
}
.footer-uoa__grid{
    display: grid;
    grid-template-columns: 1.3fr .8fr 1.6fr auto;
    gap: 3rem;
}
.footer-uoa p,
.footer-uoa a,
.footer-uoa span,
.footer-uoa li{
    color: #fff;
    font-family: var(--font-google-sans);
    font-size: .8rem;
    font-weight: 300;
    line-height: 1.55;
}
.footer-uoa p{ margin: 0 0 1rem; }
.footer-uoa__title{ font-weight: 600 !important; text-transform: uppercase; letter-spacing: .02em; }
.footer-uoa p .info{ display: inline-block; width: 3.4rem; }
.footer-uoa__menu{ list-style: none; margin: 0; padding: 0; }
.footer-uoa__menu li{ margin: 0; }
.footer-uoa__menu a{ display: inline-block; padding: .1rem 0; transition: padding-left .3s ease, opacity .3s ease; }
.footer-uoa__menu a:hover{ padding-left: .2rem; opacity: .8; }
.footer-uoa__form{ position: relative; margin-bottom: 1.4rem; max-width: 18rem; }
.footer-uoa__form p{ margin: 0; }
.footer-uoa__form form{ position: relative; }
.footer-uoa__form input[type=email]{
    display: block;
    width: 100%;
    background: none !important;
    border: 0;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    font-family: var(--font-google-sans);
    font-size: .75rem;
    font-weight: 600;
    padding: .4rem 4.6rem .4rem 0;
    margin: 0;
    outline: 0;
}
.footer-uoa__form input[type=email]::placeholder{ color: #fff; opacity: .85; }
.footer-uoa__form input[type=submit]{
    position: absolute;
    top: .25rem;
    right: 0;
    background: #fff;
    color: var(--main-cl, #162531);
    border: 0;
    border-radius: 0;
    padding: .2rem .7rem;
    font-family: var(--font-google-sans);
    font-size: .6rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    cursor: pointer;
    transition: opacity .3s ease;
}
.footer-uoa__form input[type=submit]:hover{ opacity: .8; }
.footer-uoa__form .wpcf7-response-output{ color: #fff; font-size: .65rem; margin: .6rem 0 0 !important; }
.footer-uoa__form .wpcf7-not-valid-tip{ color: #ffb4b4; font-size: .65rem; }
.footer-uoa__logo{ display: block; width: 8.5rem; height: auto; margin-bottom: 1rem; }
.footer-uoa__social{ display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.footer-uoa__social ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; }
.footer-uoa__social li{ margin: 0; }
.footer-uoa__social img{ display: block; width: 1rem; height: 1rem; }
.footer-uoa__social a{ transition: opacity .3s ease; display: block; }
.footer-uoa__social a:hover{ opacity: .7; }
.footer-uoa__leaflet{ display: flex; justify-content: flex-end; align-items: flex-start; }
.footer-uoa .footer-uoa__leaflet .brochure-btn{ display: inline-flex; width: auto; color: #162531; }
.footer-uoa .footer-uoa__leaflet .brochure-btn span{ color: inherit; }
.footer-uoa p.footer-uoa__copy{ font-size: .6rem; opacity: .8; margin: 0; }
@media only screen and (max-width: 991px){
    .footer-uoa__grid{ grid-template-columns: 1fr 1fr; }
    .footer-uoa__news{ grid-column: 1 / -1; }
    .footer-uoa__leaflet{ grid-column: 1 / -1; justify-content: flex-start; }
}
@media only screen and (max-width: 767px){
    .footer-uoa{ padding-left: 1rem; padding-right: 1rem; }
    .footer-uoa__grid{ grid-template-columns: 1fr; gap: 1.6rem; }
}

/* Footer UOA: ép style nút Subscribe / ô email của CF7 (thắng CSS form chung của theme) */
.footer-uoa .footer-uoa__form .wpcf7-form{ position: relative; margin: 0; }
.footer-uoa .footer-uoa__form .wpcf7-form-control-wrap{ display: block; }
.footer-uoa .footer-uoa__form input[type=submit],
.footer-uoa .footer-uoa__form .wpcf7-submit{
    position: absolute !important;
    top: .25rem !important;
    right: 0 !important;
    width: auto !important;
    height: auto !important;
    background: #fff !important;
    color: var(--main-cl, #162531) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: .2rem .7rem !important;
    margin: 0 !important;
    font-family: var(--font-google-sans) !important;
    font-size: .6rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}
.footer-uoa .footer-uoa__form input[type=email]{
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    height: auto !important;
    padding: .4rem 4.6rem .4rem 0 !important;
    margin: 0 !important;
}
.footer-uoa .footer-uoa__form .wpcf7-spinner{ position: absolute; right: 5rem; top: .4rem; margin: 0; }

/* Ẩn thanh footer-top (logo/địa chỉ/follow/brochure) - chỉ giữ khối UOA Vietnam */
.site-footer .footer-top{ display: none !important; }

/* Slide 6: ẩn tiêu đề nhóm "Transportation" trong legend section Surrounded by the City's Icons */
.home4_list .point_group.single_group .group_title{ display: none; }

/* Tiếng Việt: dấu thanh cần line-height lớn hơn, tránh tiêu đề bị sát/cắt dấu */
html[lang^="vi"] .heading_title,
html[lang^="vi"] h1.heading_title,
html[lang^="vi"] h2.heading_title{ line-height: 1.25 !important; }
html[lang^="vi"] .heading_title .hz-wordwrap,
html[lang^="vi"] .heading_title .hz-word{ line-height: inherit; }
html[lang^="vi"] .box_content h3,
html[lang^="vi"] .home5_item .number,
html[lang^="vi"] .tf-title{ line-height: 1.4 !important; }