:root {
    --button-bg-color: #E4ED64ff;
    --primary: #E4ED64;
    --button-text-color: #000;
    --primary-color: #E4ED64;
    /* Example, adjust as needed */
    --text-color-light: #FFFFFF99;
    --text-color-dark: #000;
    --star-marked-color: #FB8F4C;
    --background-light-accent: #00000005;
    /* Corresponds to background-color: #00000005; */
    --border-color-translucent: #FFFFFF1A;
    --text-path-color: #333333;
}

.btn_view_services a {
    background-color: white;
    padding: 5px 5px 5px 30px;
    display: inline-grid;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7142857143;
    border-radius: 30px;
    cursor: pointer;
    color: white;
    text-transform: capitalize;
    text-decoration: none;
    text-shadow: none;
    -webkit-appearance: none;
    border: none;
    transition: all ease 0.3s;
    position: relative;
}

.btn_view_services .elementor-button-content-wrapper {
    flex-direction: row-reverse;
}

.btn_view_services a span {
    gap: 10px;
    align-items: center;
    display: flex;
    justify-content: center;

}

.btn_view_services .elementor-button-icon {
    width: 50px;
    height: 50px;
    background-color: var(--button-bg-color);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.btn_view_services .elementor-button-text {
    color: black;
}

.btn_view_services .btn-icon-wrap {
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.btn_view_services .elementor-button .btn-icon-hover {
    position: absolute;
    transform: translate3d(-17px, 17px, 0px) scale3d(0.2, 0.2, 1) rotate(-45deg);
}

.btn_view_services .elementor-button .btn-icon,
.btn_view_services .elementor-button .btn-icon-hover {
    display: flex;
    color: black;
    transition: transform 0.35s linear;
    font-size: 13px;
}

.btn_view_services .elementor-button .btn-icon {
    transform: rotate(-45deg);
}

.btn_view_services .elementor-button:hover .btn-icon {
    transform: translate3d(17px, -17px, 0px) scale3d(0.2, 0.2, 1) rotate(-45deg);
}

.btn_view_services .elementor-button:hover .btn-icon-hover {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(-45deg);
}

.banner_top_why {
    backdrop-filter: blur(30px);
    border-radius: 20px 20px 20px 20px;
}

.banner_top_why .elementor-icon-box-icon {
    margin-bottom: 23px 15px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-bottom: 23px;
}

.banner_top_why .elementor-icon-box-icon:before {
    background-color: #FFFFFF26;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: 0.45s cubic-bezier(0.47, 0.05, 0.5, 0.94);
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    left: -1px;
    bottom: 0;
    height: 1px;
}

.banner_top_why .elementor-icon {
    fill: var(--button-bg-color);
    color: var(--button-bg-color);
    border-color: var(--button-bg-color);
    display: inline-block;
    line-height: 1;
    text-align: center;
    transition: all .3s;
}

.banner_top_why .elementor-icon-box-icon:after {
    background-color: #FFFFFF26;
}

.banner_top_why .elementor-icon-box-icon:after {
    transform: scaleX(1);
    transform-origin: 100% 0;
    transition: 0.45s cubic-bezier(0.47, 0.05, 0.5, 0.94) 0.2s;
}

.banner_top_why .elementor-icon-box-icon:after {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    left: -1px;
    bottom: 0;
    height: 1px;

}

.banner_top_why .elementor-icon-box-title {
    margin-bottom: 20px;
    color: white;
    font-size: 26px;
    line-height: 1.2307692308;
    letter-spacing: 0;
}

.banner_top_why .elementor-icon-box-description {
    color: #FFFFFF99;
}

.banner_top_why:hover .elementor-icon-box-icon:before {
    background-color: var(--button-bg-color);
    transform: scaleX(1);
    transition: 0.45s cubic-bezier(0.47, 0.05, 0.5, 0.94) 0.2s;
}

.banner_top_why:hover .elementor-icon-box-icon:after {
    background-color: var(--button-bg-color);
    transform: scaleX(0);
    transition: 0.45s cubic-bezier(0.47, 0.05, 0.5, 0.94);
}

.banner_top_why .elementor-icon {
    font-size: 48px;
}

.banner_top_why .elementor-icon svg {
    display: block;
    height: 1em;
    position: relative;
    width: 1em;
}

.scrolling-title a {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.167em;
    white-space: nowrap;
}

.elementor-scrolling {
    overflow: hidden;
    max-width: 1320px;
    margin: 0 auto;
}

.elementor-scrolling-wrapper {
    white-space: nowrap;
    display: inline-flex;
}

.elementor-scrolling-wrapper .elementor-scrolling-item {
    padding-left: calc(10px / 2);
    padding-right: calc(10px / 2);
}

.elementor-scrolling-inner {
    animation-duration: 10s;
    align-items: center;
    animation-name: marquee;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: max-content;
    display: inline-flex;
}

.elementor-scrolling-item {
    display: flex;
    transition: all ease 0.3s;
}

.elementor-scrolling-item-inner {
    display: inline-flex;
    gap: 0px;
}

.elementor-scrolling-item .scrolling-title {
    display: block;
}

.scrolling-container {
    padding: 2px 20px 5px 20px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--button-bg-color);
    border-radius: 20px 20px 20px 20px;
    width: 130px;

}

.who-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.who-container ul li {
    align-items: center;
    display: flex;
    font-size: inherit;
    margin: 0 !important;
    padding: 0;
    position: relative;

}

.who-container ul li span.elementor-icon-list-icon {
    padding-right: 3px;
    display: flex;
    position: relative;
    top: 0;
}

.who-container ul li span.elementor-icon-list-icon i {
    color: black;
    transition: color 0.3s;
    font-size: 24px;
    width: 1.25em;

}

.who-container ul li span.elementor-icon-list-text {
    font-size: 26px;
    font-weight: 700;
    transition: color 0.3s;
    color: black;
    align-self: center;
    padding-inline-start: 5px;
}

.who-container p {
    color: #4B4B4B;
    font-size: 18px;
}

.who-info-container {
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
    padding-block-end: 30px;
    padding-block-start: 40px;
    text-align: initial;
    border-radius: 25px;
    height: auto;
    min-height: 350px;
    min-width: 0;
    overflow: visible;
    position: relative;
    justify-content: space-between;
    width: 100%;
    z-index: revert;
    margin-block-end: 0px;
    margin-block-start: 0px;
    margin-inline-end: 0px;
    margin-inline-start: 0px;
    padding-inline-end: 40px;
    padding-inline-start: 40px;
    gap: 20px 20px;
    row-gap: 20px;
    column-gap: 20px;
}

.who-info-container .elementor-widget-container {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 15px 0px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #e0e0e0;
    height: 100%;
}

.who-info-container .elementor-heading-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.167em;
    color: black;
}

.who-info-container .elementor-counter {
    align-items: stretch;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 0px;
}

.who-info-container .elementor-counter-title {
    justify-content: start;
    color: #8a8a8a;
    font-size: 18px;
    line-height: 1.5em;
    text-align: left;
    align-items: center;
    display: flex;
    flex: 1;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.who-info-container .elementor-counter-number-wrapper {
    color: black;
    font-size: 70px;
    font-weight: 700;
    line-height: 1.06em;
    letter-spacing: -2px;
    justify-content: left;
}

.who-info-container .elementor-counter-number-suffix {
    text-align: start;
    white-space: pre-wrap;
    color: #E4ED64;
}

.who-info-container .elementor-counter-number-suffix sup {
    top: -0.5em;
}

.who-img img {
    display: flex;
    min-height: 350px;
    border-radius: 25px 25px 25px 25px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;

}

.what-text {
    width: 720px;
}

.what-services {
    display: flex;
    min-height: 370px;
    border-radius: 30px 0px 30px 30px;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 60px;
    flex-direction: column;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;

}

.what-services:before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 100%;
    z-index: 0;
    position: absolute;
    background: var(--primary);
    top: 0;
    left: calc(100% - 40px);
    transform: scale3d(1, 1, 1);
    transform-style: preserve-3d;
    transition: all 0.8s ease;
}

.what-services .what-icon {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 3;
}

.what-services .what-icon a {
    padding: 0px 0px 0px 0px;
    color: white;
    box-shadow: none;
    text-decoration: none;
    display: inline-grid;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7142857143;
    border-radius: 30px;
    cursor: pointer;
    text-transform: capitalize;
    text-shadow: none;
    border: none;
    background-color: var(--primary);
    transition: all ease 0.3s;
    position: relative;
    fill: #fff;
    text-align: center;
}

.elementor-button-content-wrapper {
    gap: 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.elementor-button-icon {
    display: flex;

    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    transition: all ease 0.3s;
}

.elementor-button .btn-icon-wrap {
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.elementor-button .btn-icon,
.elementor-button .btn-icon-hover {
    display: flex;
    color: black;
    transition: transform 0.35s linear;
    font-size: 13px;
}

.elementor-button .btn-icon {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(-45deg);
    transform-style: preserve-3d;
}

.elementor-button .btn-icon-hover {
    position: absolute;
    transform: translate3d(-17px, 17px, 0px) scale3d(0.2, 0.2, 1) rotate(-45deg);
}

.spaciaz-border-shape.top-left {
    top: 0;
    left: -30px;
    transform: rotate(180deg);
}

.spaciaz-border-shape.bottom-right {
    bottom: -30px;
    transform: rotate(180deg);
    right: 0;
}

.spaciaz-border-shape {
    background-color: #F6F3EC;
    width: 30px;
    height: 30px;
    clip-path: path("M0 0 Q0,30 30,30 L 0 30 Z");

    position: absolute;
}

.elementor-spacer-inner {
    height: 60px
}



.what-services .what-icon-hidden {
    position: absolute;
    right: 0px;
    max-width: 100%;
    width: 60px;
    top: 0px;
}

.what-services .what-icon-hidden .elementor-widget-container {
    background-color: #F6F3EC;
    border-radius: 0px 0px 0px 30px;
}

.what-services .what-image {
    position: absolute;
    left: -30px;
    bottom: -30px;
}

.what-services .what-image img {
    transition: all 0.5s ease;
}

.what-services:hover .what-image img {
    transform: translateY(-10px);
    transition: all 0.5s ease;
}

.what-services .what-text {
    position: relative;
}

.what-services .what-text h5 {
    color: black;
    font-size: 26px;
    line-height: 1;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    clear: both;
    font-weight: 700;

}

.what-services:hover .elementor-button-icon {
    background-color: var(--primary);
}

.what-services .what-icon a:hover .btn-icon {
    transform: translate3d(17px, -17px, 0px) scale3d(0.2, 0.2, 1) rotate(-45deg);
}

.what-services .what-icon a:hover .btn-icon-hover {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(-45deg);
}

.what-services:hover:before {
    transform: scale3d(45, 45, 1);
    will-change: transform;
}

.what-link-view-all a {
    text-transform: none;
    line-height: 1.3em;
    color: black;
    background-color: transparent;
    padding: 0 !important;
    border-radius: 0;
    position: relative;
}

.what-link-view-all a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -1px;
    display: block;
    width: calc(100% + 2px);
    height: 1px;
    background-color: black;
    transform: scaleX(0);
    transform-origin: 0 0;
    -webkit-transition: 0.3s cubic-bezier(0.48, 0.05, 0.5, 0.94);
    -o-transition: 0.3s cubic-bezier(0.47, 0.05, 0.5, 0.94);
    transition: 0.3s cubic-bezier(0.47, 0.05, 0.5, 0.94);
    line-height: 1.3em;
}

.what-link-view-all a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -1px;
    display: block;
    width: calc(100% + 2px);
    height: 1px;
    background-color: black;
    transform: scaleX(1);
    transform-origin: 100% 0;
    transition: 0.3s cubic-bezier(0.47, 0.05, 0.5, 0.94) 0.2s;
}

.what-link-view-all a:hover:before {
    background-color: var(--primary);
    transform: scaleX(1);
    transition: 0.3s cubic-bezier(0.47, 0.05, 0.5, 0.94) 0.2s;
}

.what-link-view-all a:hover:after {
    transform: scaleX(0);
    background-color: var(--primary);
    transition: 0.3s cubic-bezier(0.47, 0.05, 0.5, 0.94);
    transform-origin: 100% 0;
}

.what-hidden-img {
    position: absolute;
    left: -374px;
    bottom: -75px;
    z-index: -1;
}

.what-hidden-img img {
    opacity: 0.9;
    display: inline-block;
    vertical-align: middle;
}

.section-who {
    margin-top: -120px;
    border-radius: 30px 30px 0px 0px;
}






.sticky-container {
    /* Chiều cao này cho phép 3 panel (mỗi panel 100vh) thực hiện hiệu ứng sticky.
       Mỗi panel sẽ "dính" trong 100vh của cuộn chuột tương đối với container này.
       Sau khi cuộn 300vh (tính từ đầu sticky-container), phần .other-content sẽ xuất hiện.
    */
    /* height: 300vh; */
    position: relative;
    /* Quan trọng cho việc quản lý z-index của các sticky children */
}

.sticky-panel {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    display: flex;
    overflow: hidden;
    /* Ngăn nội dung tràn ra ngoài panel */
    color: white;
    z-index: 2;
}

/* Màu nền để dễ phân biệt các panel, có thể xóa đi */


.panel-column-left,
.panel-column-right {
    flex-basis: 50%;
    /* Chia đều 2 cột */
    height: 100vh;
    /* Đảm bảo các cột chiếm toàn bộ chiều cao viewport */
    display: flex;
}

.panel-column-left {
    flex-direction: column;
    padding: 40px;
    overflow-y: auto;
    /* Cho phép cuộn nếu nội dung cột trái dài hơn 100vh */
    background-color: black;
    -ms-overflow-style: none;
    scrollbar-width: none;
    align-items: center;
}

.panel-column-left::-webkit-scrollbar {
    /* Ẩn thanh cuộn cho Chrome, Safari, Opera, Edge (mới) */
    display: none;
}

.text-block-top {
    padding-top: 150px;
    margin-bottom: 20px;
    /* Khoảng cách giữa text-top và text-bottom nếu cần */
    width: 100%;
    max-width: 630px;
    /* Ví dụ: 1260px / 2. Điều chỉnh nếu cần. */
    box-sizing: border-box;
}

.text-block-top h2 {
    margin-top: 0;
    font-size: 2.5em;
    color: #111;
}

.text-block-top p {
    font-size: 1.1em;
}

.text-block-bottom {
    min-height: 290px;
    margin-top: auto;
    margin-bottom: auto;
    /* Đẩy block này xuống dưới cùng của panel-column-left */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Căn nội dung bên trong block này xuống dưới */
    width: 100%;
    max-width: 530px;
    /* Ví dụ: 1260px / 2. Điều chỉnh nếu cần. */
    box-sizing: border-box;

}

.text-block-bottom h3 {
    margin-top: 0;
    font-size: 1.8em;
    color: #222;
}

.text-block-bottom p {
    font-size: 1em;
}


.panel-column-right img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    /* Đảm bảo ảnh che phủ toàn bộ cột mà không bị méo */
    display: block;
    /* Loại bỏ khoảng trống thừa dưới ảnh */
}

.customer-feedback-card {
    display: flex;
    /* Corresponds to e-flex */
    height: 100%;
    flex-direction: column;
    /* background_background: classic; animation: opal-move-right; (animation handled by JS or more specific classes if needed) */
    background-image: url("https://demo2.wpopal.com/spaciaz/wp-content/uploads/2025/03/h1_img-3.jpg");
    /* from elementor-element-a3caffe */
    background-position: center center;
    background-size: cover;
    /* border-radius: 30px; */
    /* from elementor-element-a3caffe */
    position: relative;
    /* Added for positioning of decor shapes if they are absolute */
    /* overflow: hidden; /* If needed, from original e-con */
}

/* Simulating background overlay if it was a pseudo-element */
.customer-feedback-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    /* from elementor-element-a3caffe::before */
    background-image: linear-gradient(214deg, #00000000 65%, #000000 100%);
    /* from elementor-element-a3caffe::before */
    opacity: 0.6;
    /* from --overlay-opacity: 0.6; of elementor-element-a3caffe */
    border-radius: inherit;
    /* To match parent's border-radius if parent has one */
    pointer-events: none;
    /* So it doesn't interfere with content */
}


.spacer-with-decor {
    width: 220px;
    /* from elementor-element-cc2a752 specific styles */
    max-width: 220px;
    /* from elementor-element-cc2a752 specific styles */
    background-color: #FFFFFF;
    /* from elementor-element-cc2a752 > .elementor-widget-container */
    border-radius: 0px 0px 0px 30px;
    align-self: flex-end;
    /* from elementor-element-cc2a752.elementor-element --align-self: flex-end; */
    position: relative;
    /* For decor shapes */
    height: 60px;
    /* Derived from original --spacer-size: 60px for the spacer widget */
    flex-shrink: 0;
    /* Default for Elementor spacers, prevents shrinking */

}

.spacer-inner {
    height: 60px;
    /* was height: 60px, now inherits from parent .spacer-with-decor */
}

.decor-shape {
    background-color: #FFFFFF;
    /* from elementor-element-cc2a752 .spaciaz-border-shape */
    width: 30px;
    height: 30px;
    clip-path: path("M0 0 Q0,30 30,30 L 0 30 Z");
    position: absolute;
}

.decor-shape.top-left {
    top: 0;
    left: -30px;
    transform: rotate(180deg);
    /* from elementor-element-cc2a752 .spaciaz-border-shape.top-left */
}

.decor-shape.bottom-right {
    bottom: -30px;
    right: 0;
    transform: rotate(180deg);
    /* from elementor-element-cc2a752 .spaciaz-border-shape.bottom-right */
}

.feedback-content {
    display: flex;
    /* Corresponds to e-flex */
    flex-direction: column;
    /* Added based on common layout for such cards */
    align-items: center;
    /* To center content like rating score, avatars, stars */
    border: 1px solid var(--border-color-translucent);
    /* from elementor-element-08d9ade */
    border-radius: 20px;
    /* from elementor-element-08d9ade */
    background-color: var(--background-light-accent);
    /* from elementor-element-08d9ade */
    padding: 40px;
    /* from elementor-element-08d9ade */
    margin: auto 30px -23px 30px;
    /* Combines margins from elementor-element-08d9ade and its auto top margin */
    align-self: flex-start;
    /* from elementor-element-08d9ade.e-con */
    text-align: center;
    /* Added for overall text centering */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.rating-score {
    /* color: var( --e-global-color-primary ); from .elementor-widget-heading .elementor-heading-title */
    /* Assuming primary color is desired for the score */
    color: var(--primary-color);
    font-size: 2em;
    /* Example size, adjust as needed */
    margin: 0 0 15px 0;
    /* Adjusted margin */
}

.avatar-group {
    display: flex;
    /* Corresponds to e-flex */
    flex-direction: row;
    justify-content: center;
    /* from elementor-element-bc26923 */
    margin-bottom: 15px;
    /* from elementor-element-bc26923 */
}

.avatar-image {
    width: 60px;
    /* from elementor-element-eb0e988 img */
    height: 60px;
    /* Added for consistency, original was 120x120 but styled to 60px width */
    border-radius: 50%;
    /* from elementor-element-eb0e988 img */
    object-fit: cover;
    /* Good practice for avatars */
}

.avatar-image:not(:first-child) {
    margin-left: -10px;
    /* from elementor-element-a497f97 > .elementor-widget-container */
}

.star-rating {
    /* display: flex; /* Not explicitly flex, but rating-stars-wrapper is */
    justify-content: center;
    /* from --e-rating-justify-content: center; */
    margin-bottom: 5px;
    /* from elementor-element-a2eb9f2 > .elementor-widget-container */
}

.rating-stars-wrapper {
    display: flex;
}

.star-icon {
    font-size: 18px;
    /* from --e-rating-icon-font-size: 18px; */
    color: var(--star-marked-color);
    /* from --e-rating-icon-marked-color: #FB8F4C; */
    /* Each .e-icon-wrapper.e-icon-marked contained an <i> */
}

.star-icon i {
    /* If you use <i> for icons */
    /* Styles for the actual icon, like font-family if using an icon font */
}

/* If you have specific classes for marked/unmarked stars, they would go here */
/* For simplicity, all stars are shown as marked based on the HTML structure */


.satisfied-customers-text {
    font-size: 16px;
    /* from elementor-element-27c459d */
    font-weight: 600;
    /* from elementor-element-27c459d */
    color: #FFFFFF;
    /* from elementor-element-27c459d */
    margin-bottom: 0;
    /* from elementor-element-27c459d p */
}

/* Icon specific class if you are using spaciaz-icon-star */
.icon-star::before {
    content: "★";
    /* Example for a star icon, replace with your actual icon font or SVG */
}

/* Styles for the refactored info card component */
.info-card {
    display: flex;
    align-items: center;
    /* Aligns the two main groups vertically */
    gap: 30px;
    /* Space between icon/title group and description group */
    padding: 35px 0;
    border-top: 1px solid #e0e0e0;
    /* Light border, similar to original --e-global-color-border */
}

.info-card__icon-title-group {
    display: flex;
    align-items: center;
    /* Aligns icon and title within this group */
    flex-basis: 50%;
    /* Each main group takes roughly half the space */
    min-width: 0;
    /* Prevents overflow issues with flex items */
}

.info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #E4ED64;
    /* Using variable from your :root */
    border-radius: 50%;
    width: 70px;
    /* Adjusted for a clear visual, original was ~80px */
    height: 70px;
    margin-right: 20px;
    /* Space between icon and title, original was 30px for icon-box-icon margin */
    flex-shrink: 0;
    /* Prevents icon from shrinking */
}

.info-card__icon i {
    /* Targeting Font Awesome solid icons */
    font-size: 32px;
    /* Adjusted icon size to fit well within the 70px circle */
    color: white;
    /* Icon color */
}

.info-card__title {
    font-size: 1.1em;
    font-weight: 600;
    /* Common for titles */
    color: var(--text-color-dark, #000);
    /* Assuming accent color is a dark text color */
    margin: 0;
    /* Remove default h6 margin */
}

.info-card__description {
    flex-basis: 50%;
    /* Each main group takes roughly half the space */
    min-width: 0;
    /* Prevents overflow issues with flex items */
}

.info-card__description p {
    color: #555;
    /* Standard paragraph color, original was a light color for dark bg */
    font-size: 0.95em;
    margin: 0;
    line-height: 1.6;
    /* For better readability */
}

.col-customer-feedback .col-inner {
    height: 100%
}

/* Styles for project content block */
.project-content {
    /* Add any general styling for the container if needed */
    /* text-align: center; /* This is handled in mobile, ensure for desktop if needed */
}

.project-location {
    display: flex;
    align-items: center;
    /* Vertically aligns the icon and text */
    /* justify-content: center; /* Centering of the block is in mobile styles */
    margin-bottom: 0.75em;
    /* Space before the separator line */
}

.project-location i.fa-location-dot {
    color: #E4ED64;
    /* Yellow color for the icon */
    margin-right: 0.5em;
    /* Space between icon and text */
    font-size: 1.1em;
    /* Adjust icon size if needed */
}

.project-location a {
    color: white;
    text-decoration: none;
}

.project-location a:hover {
    color: white;
    /* Giữ màu trắng khi hover */
    /* opacity: 0.8; /* Bạn có thể thêm hiệu ứng mờ nhẹ nếu muốn */
}

.project-title {
    padding-top: 0.75em;
    /* Space above the title text, after the border */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /* White, slightly transparent line */
}

.project-title a {
    color: white;
    text-decoration: none;
}

.project-title a:hover {
    color: white;
    text-decoration: none;
}

.testimonial-display {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    /* Kích thước dựa trên SVG text path, có thể điều chỉnh */
    height: 250px;
    margin: -96px auto 150px auto;
    /* Giữ lại margin từ elementor-element-e20caab */
}

.testimonial-image {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
    /* elementor-element-5c77bb2 */
}

.testimonial-quote-icon {
    position: absolute;
    top: 10%;
    /* Điều chỉnh vị trí theo thiết kế */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    /* elementor-element-94b8faa */
    text-align: center;
}

.testimonial-quote-icon i {
    font-size: 48px;
    /* Điều chỉnh kích thước icon */
    color: var(--text-color-light);
    /* Màu trắng như gốc */
    /* Cần class spaciaz-icon-quote-1 được định nghĩa ở đâu đó */
}

/* Ví dụ định nghĩa cho spaciaz-icon-quote-1 */
.spaciaz-icon-quote-1::before {
    content: '“';
    /* Hoặc icon tương ứng từ font */
    font-family: serif;
    /* Hoặc font icon của bạn */
}


.testimonial-text-path {
    position: absolute;
    top: 70%;
    left: 50%;
    width: 170px;
    /* Theo --width của elementor-element-6c46554 */
    height: 170px;
    transform: translate(-50%, -50%);
    z-index: 3;
    /* elementor-element-6c46554 */
    pointer-events: none;
    /* Để không cản click nếu có */
    /* padding: 9px 9px 2px 9px; /* Từ container của elementor-element-6c46554, nếu cần */
}

.testimonial-text-path .text-path-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Quan trọng cho textPath */
    animation: spinAround 20s linear infinite;
    /* Hiệu ứng xoay cho SVG */
}

@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.testimonial-text-path text {
    font-family: Arial, sans-serif;
    /* Cần một font-family cụ thể */
    font-size: 20px;
    /* Điều chỉnh để vừa với đường tròn 170px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    word-spacing: 2px;
    fill: var(--text-path-color);
}

.testimonial-bottom-decoration {
    position: absolute;
    bottom: -40px;
    /* Điều chỉnh vị trí, dựa trên margin -20px của container gốc và kích thước mới */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    /* Nằm dưới các element khác */
    line-height: 0;
    /* Tránh khoảng trống thừa */
}

.testimonial-bottom-decoration svg {
    width: 280px;
    /* Có thể điều chỉnh kích thước cho cân đối */
    height: auto;
    /* Giữ tỷ lệ */
    display: block;
}

.brand-carousel-container {
    overflow: hidden;
    max-width: 1320px;
    /* Giữ lại từ .elementor-scrolling nếu muốn giới hạn chiều rộng */
    margin: 0 auto;
    /* Để căn giữa nếu có max-width */
    width: 100%;
}

.brand-carousel-track-wrapper {
    display: flex;
    /* Để hai .brand-carousel-track nằm cạnh nhau */
}

.brand-carousel-track {
    display: flex;
    /* Để các .brand-item nằm cạnh nhau */
    align-items: center;
    /* Căn giữa các item theo chiều dọc */
    flex-shrink: 0;
    /* Ngăn track bị co lại */
    gap: 10px;
    /* Khoảng cách giữa các brand-item (thay cho padding trên item) */
    animation: marquee 20s linear infinite;
    /* Tên animation, thời gian, kiểu lặp */
    /* width: max-content; /* Không cần thiết khi display: flex và flex-shrink: 0 */
}

.brand-item {
    display: flex;
    /* Nếu có cả icon và title và muốn căn chỉnh chúng */
    align-items: center;
    /* padding: 0 5px; /* Bỏ nếu đã dùng gap trên .brand-carousel-track */
}

.brand-item-icon svg {
    display: block;
    /* Loại bỏ khoảng trống thừa dưới SVG */
    width: 111px;
    /* Kích thước gốc từ SVG */
    height: 87px;
    fill: black;
    /* Màu mặc định của SVG, có thể thay đổi */
}

/* Optional: Nếu bạn muốn thêm tiêu đề cho mỗi brand */
/*
.brand-item-title {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    color: #333;
}
*/

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
        /* Di chuyển track về bên trái đúng bằng chiều rộng của nó */
    }
}

/* Tùy chọn: Dừng animation khi hover chuột vào container */
.brand-carousel-container:hover .brand-carousel-track {
    animation-play-state: paused;
}


@media (max-width: 767px) {
    .info-card {
        flex-direction: column;
        /* Stack elements vertically */
        align-items: flex-start;
        /* Align items to the start of the column */
        gap: 15px;
        /* Reduce gap for a more compact look */
        padding: 20px 0;
        /* Adjust padding for mobile */
    }

    .info-card__icon-title-group {
        flex-basis: auto;
        /* Allow this group to take its natural width */
        width: 100%;
        /* Make it full width */
        gap: 15px;
        /* Adjust gap between icon and title */
    }

    .info-card__icon {
        width: 50px;
        /* Smaller icon container */
        height: 50px;
        margin-right: 15px;
        /* Adjust margin */
    }

    .info-card__icon i {
        font-size: 24px;
        /* Smaller icon */
    }

    .info-card__title {
        font-size: 1em;
        /* Adjust title font size for mobile */
    }

    .info-card__description {
        flex-basis: auto;
        /* Allow this group to take its natural width */
        width: 100%;
        /* Make it full width */
    }

    .info-card__description p {
        font-size: 0.9em;
        /* Adjust description font size for mobile */
    }

    /* Mobile specific styles for sticky panels */
    .sticky-container {}

    .sticky-panel {
        position: sticky;
        /* Giữ lại sticky trên mobile */
        height: 100vh;
        /* Mỗi panel vẫn chiếm 100vh để hiệu ứng sticky hoạt động */
        flex-direction: row;
    }

    .panel-column-left,
    .panel-column-right {
        flex-basis: 100%;
        /* Mỗi cột chiếm toàn bộ chiều rộng */
        height: auto;
        /* Chiều cao tự động */
    }

    .panel-column-left {
        padding: 20px;
        /* Giảm padding trên mobile */
        min-height: 50vh;
        /* Đảm bảo có không gian tối thiểu cho cột trái */
        /* overflow-y: visible; /* Hoặc auto nếu vẫn muốn cuộn nội bộ */
    }

    .panel-column-right img {
        height: 100vh;
        /* Giảm chiều cao ảnh hoặc để auto nếu muốn giữ tỷ lệ */
        /* object-fit: contain; /* Hoặc cover tùy theo ý muốn hiển thị ảnh */
    }

    .text-block-top {
        padding-top: 20px;
        /* Giảm padding top */
        max-width: 100%;
        /* Cho phép chiếm toàn bộ chiều rộng */
    }

    /* Ghi đè inline style cho h2 trong text-block-top trên mobile */
    .text-block-top h2 span strong span {
        font-size: 36px !important;
        /* Giảm kích thước chữ cho tiêu đề chính */
        line-height: 1.2em !important;
        /* Điều chỉnh line-height */
        letter-spacing: -1px !important;
        /* Điều chỉnh letter-spacing */
    }

    .text-block-bottom {
        min-height: auto;
        /* Bỏ min-height hoặc giảm */
        padding-top: 20px;
        /* Thêm khoảng cách nếu cần */
        max-width: 100%;
    }

    /* Ghi đè inline style cho h1 trong text-block-bottom trên mobile */
    .text-block-bottom #col-1736895557 h1 {
        font-size: 60px !important;
        /* Giảm kích thước chữ cho số thứ tự */
        text-align: center;
        /* Căn giữa số nếu cần */
        margin-bottom: 10px;
    }

    .text-block-bottom .project-content {
        text-align: center;
        /* Căn giữa nội dung project */
    }

    .text-block-bottom .project-location,
    .text-block-bottom .project-title {
        justify-content: center;
        /* Căn giữa các item con nếu chúng là flex items */
    }

    .text-block-bottom .project-title a {
        font-size: 1.2em;
        /* Điều chỉnh kích thước chữ tiêu đề dự án */
    }
}


@keyframes marquee {
    100% {
        transform: translate(-100%);
    }
}

.contact-row-inner {
    position: relative;
}

.contact-row-outside .col-inner {
    border-radius: 30px;
}

.contact-row-inner .contact-img-left {
    position: absolute;
    left: -521px;
    bottom: -17px;
}

.contact-row-inner .contact-img-right {
    position: absolute;
    right: -338px;
    bottom: -17px;
}

.contact-row-inner input[type="text"],
.contact-row-inner textarea,
.contact-row-inner input[type="email"],
.contact-row-inner input[type="tel"] {
    border-width: 1px;
    border-style: solid;
    border-color: #F2F2F2;
    border-radius: 30px;
    outline: 0;
    font-size: 16px;
}

.contact-row-inner input[type="submit"] {
    background-color: var(--primary);
    color: black;
    border-radius: 30px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    z-index: 6;
}

.btn_view_services.info_news {
    border: 1px solid #0000001c;
}

.post-inner .post-thumbnail img {
    max-height: 100%;
    transform: translate3d(-6.66%, 0px, 0px) scale(1.2);
    transition: opacity 0.35s, transform 0.45s, filter 0.35s;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    border-radius: 30px;
}

/* Blog Post Card Styling */
.blog-post-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Đảm bảo các card có chiều cao bằng nhau nếu trong grid */
}

.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.post-thumbnail-link {
    display: block;
    text-decoration: none;
}

.post-thumbnail {
    position: relative;
    overflow: hidden;
    aspect-ratio: 900 / 599;
    /* Giữ tỷ lệ khung hình của ảnh gốc */
    background-color: #f0f0f0;
    /* Màu nền tạm thời khi ảnh tải */
}

/* Ghi đè hoặc điều chỉnh style hiện tại của bạn cho .post-thumbnail img nếu cần */
/* Đoạn CSS gốc của bạn cho img có position: absolute và transform.
   Nếu muốn giữ hiệu ứng đó, bạn cần đảm bảo .post-thumbnail có position: relative và chiều cao/aspect-ratio.
   CSS dưới đây là một cách tiếp cận phổ biến hơn cho card. */
.post-thumbnail img.wp-post-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
    border-radius: 0;
    /* Không cần bo góc ảnh nếu .blog-post-card đã có overflow:hidden */
    /* Bỏ các thuộc tính position, top, left, transform, max-height từ style cũ nếu dùng style này */
}

.blog-post-card:hover .post-thumbnail img.wp-post-image {
    transform: scale(1.05);
    /* Hiệu ứng zoom nhẹ khi hover */
}

.post-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    /* Khoảng cách giữa các mục meta */
    font-size: 0.8em;
    color: #777;
    margin-bottom: 12px;
    line-height: 1.4;
}

.entry-meta a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.entry-meta a:hover {
    color: var(--primary-color, #E4ED64);
    /* Sử dụng màu primary đã định nghĩa */
}

.categories-link a {
    background-color: rgba(228, 237, 100, 0.15);
    /* Nền nhạt cho category */
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.categories-link a:hover {
    background-color: rgba(228, 237, 100, 0.3);
}

.posted-on {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.entry-meta .updated {
    display: none;
    /* Ẩn thời gian cập nhật */
}

.entry-title {
    font-size: 1.25em;
    /* Kích thước tiêu đề */
    font-weight: 700;
    color: #333;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.35;
    flex-grow: 1;
    /* Giúp tiêu đề chiếm không gian còn lại, đẩy meta xuống nếu cần */
}

.entry-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.entry-title a:hover {
    color: var(--primary-color, #E4ED64);
}

/* Đảm bảo screen-reader-text vẫn bị ẩn trực quan */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.footer-info .col-inner {
    border-radius: 30px;
}

.header {
    position: absolute !important;
}

.header .header-inner {
    background-color: white;
    border-radius: 50px;
}

.header-main .nav>li>a {
    line-height: 0 !important;
}

.header-wrapper.stuck {
    box-shadow: none !important;
}

/* Icon Box Styling */
.icon-box {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  height:100%;
}

.icon-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.icon-box .icon {
  font-size: 24px;
  color: #3498db;
  margin-right: 15px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(52, 152, 219, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.icon-box:hover .icon {
  background-color: #3498db;
  color: white;
}

.icon-box .content h5 {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.icon-box .content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.icon-box.email-support .icon {
  color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
}

.icon-box.email-support:hover .icon {
  background-color: #e74c3c;
  color: white;
}

/* Make it responsive */
@media (max-width: 768px) {
  .icon-box {
    flex-direction: column;
    text-align: center;
  }
  
  .icon-box .icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* Stats Grid Styling */
.stats-grid {
    display: grid;
    /* Using grid for layout, similar to original e-grid */
    grid-template-columns: repeat(2, 250px);
    gap: 20px;
    /* Spacing between items, was 10px in one of the containers */
    padding: 10px;
    /* Outer padding, adjust as needed */
    background-image: url("https://demo2.wpopal.com/spaciaz/wp-content/uploads/2025/03/h2_img1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    /* Căn khối grid về bên trái nếu container cha của nó rộng hơn */
    margin-right: auto;
    margin-left: 0;
    /* Đảm bảo căn trái */
    justify-content: end;
    padding-top: 150px;
    /* border-radius: 30px; */
    /* From the outermost container */
    position: relative;
    /* If spaciaz-border-shape elements were to be kept and positioned absolutely */
}

.stat-item {
    background-color: #F5F5F5;
    /* From original inner containers */
    border-radius: 25px;
    /* From original inner containers */
    padding: 30px;
    /* Adjusted padding, original was 30px 40px */
    display: flex;
    flex-direction: column;
    /* Stack icon and content vertically */
    justify-content: space-between;
    /* Distributes space */
    align-items: flex-start;
    /* Align items to the start */
    min-height: 200px;
    /* Approximate minimum height */
    text-align: left;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.stat-item--featured {
    grid-column: 2 / span 1;
    /* Mục này sẽ chiếm cả 2 cột */
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stat-item__icon {
    margin-bottom: auto;
    /* Pushes icon to the top, content to bottom if space allows */
    padding-bottom: 15px;
    /* Space between icon and title block */
    align-self: flex-end;
    /* Aligns icon to the right, as in original */
}

.stat-item__icon i {
    font-size: 36px;
    /* Original SVG size */
    color: var(--text-color-dark, #000);
    /* Original icon fill */
}

.stat-item__content {
    /* Container for title and number if needed for specific alignment */
}

.stat-item__title {
    color: var(--text-color-light, #757575);
    /* Using a placeholder for text_light */
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5em;
    margin-bottom: 10px;
    /* Space between title and number */
    text-transform: capitalize;
    /* As seen in "projects in development" */
}

.stat-item__number {
    color: var(--text-color-dark, #000);
    /* Assuming accent color is black */
    font-family: "Involve", Sans-serif;
    /* From original */
    font-size: 60px;
    /* Adjusted from 70px for better fit */
    font-weight: 700;
    line-height: 0.8em;
    letter-spacing: -2px;
    display: flex;
    /* To align number and suffix */
    align-items: baseline;
    /* Aligns suffix nicely with the number */
}

.stat-item__suffix sup {
    font-size: 0.4em;
    /* Smaller size for sup */
    font-weight: 700;
    color: var(--primary-color, #E4ED64);
    /* Primary color for the '+' or 'm+' */
    margin-left: 2px;
    position: relative;
    top: -0.5em;
    /* Adjust vertical alignment of sup */
}

/* Custom Spacer Styles */
.custom-spacer-block {
    position: relative;
    /* Essential for positioning .spaciaz-border-shape children */
    /* Width will be 100% of its parent by default as a div.
       If specific width or alignment (e.g., centering) is needed,
       it should be handled by its parent container or additional styling on this block.
       This replaces the .elementor-widget-spacer context.
    */
}

.custom-spacer-inner-height {}

.spaciaz-border-shape.top-right {
    top: 0;
    right: -30px;
    /* Mở rộng ra ngoài về bên phải */
    transform: rotate(180deg);
}

.spaciaz-border-shape.bottom-left {
    bottom: 0;
    left: -30px;
    /* Mở rộng ra ngoài về bên trái */
    transform: rotate(0deg);
}

.spaciaz-corner-top-left {
    top: 0;
    left: 0;
    transform: rotate(0deg);
    /* Định hướng shape cho góc trên bên trái */
    /* z-index: 1; /* Đảm bảo shape nằm trên ảnh nền, nếu cần */
}

.spaciaz-corner-top-right {
    top: 0;
    right: 0;
    transform: rotate(0deg);
    /* Định hướng shape cho góc trên bên trái */
    /* z-index: 1; /* Đảm bảo shape nằm trên ảnh nền, nếu cần */
}

.about-border-shape {
    position: absolute;
    /* Đặt vị trí tuyệt đối để có thể định vị chính xác */

}

.about-with-decor {
    width: 220px;
    background-color: #FFFFFF;
    border-radius: 0px 0px 30px 0px;
    height: 60px;
    top: 0;
    left: 0;

}

.about-shape {
    background-color: #FFFFFF;
    width: 30px;
    height: 30px;
    clip-path: path("M0 0 Q0,30 30,30 L 0 30 Z");
    position: absolute;
}

.about-shape.bottom-left {
    bottom: -30px;
    left: 0;
    transform: rotate(90deg);
}

.about-shape.top-right {
    top: 0;
    right: -30px;
    transform: rotate(90deg);
}

.filmore-title {
    display: flex;
    align-items: flex-start;
    text-transform: uppercase;
    justify-content: center;
}

.filmore-title strong {
    display: block;
    font-weight: 500;
    margin: 0;
    font-size: 39px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, calc(100% - 45px) 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, calc(100% - 45px) 100%, 0% 100%);
    padding-right: 20px;
    text-align: center;
}

.filmore-title span {
    display: block;
    font-size: 38px;
    font-family: 'Belleza', sans-serif;
    font-weight: 400;
    margin-left: -30px;
    padding-top: 30px;
    padding-left: 0;
    position: relative;
}

.filmore-title span:before {
    content: '';
    height: 70px;
    width: 1px;
    position: absolute;
    left: 0;
    top: 0;
    background: #333;
    transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
}

.filmore_info .info .item {
    text-align: center;
    flex-basis: 100%;
}

.filmore_info .info_item .item h5.title {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 15px;
}

.filmore_info .info_item .item .number {
    font-size: 68px;
    font-weight: 700;
    line-height: 36px;
    color: #fff;
}

.filmore_info .info_item .item .number span {
    font-size: 34px;
    font-weight: 300;
}

.filmore_info .info_item .item .number.text {
    font-size: 27px;
    line-height: 30px;
}

.filmore_info .detail_item {
    display: flex;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 60px;
}

.filmore_info .detail_item .item {
    padding: 15px;
    background: #f1f1f1;
    margin: 0 5px;
    height: 100%;
}

.section_filmore_coming .inner {
    height: 100%;
    padding: 65px;
}

.section_filmore_coming .inner {
    background: #f1f1f1;
    color: inherit
}

.section_filmore_coming .inner .info {
    background: #0f5d69;
    padding: 25px;
    color: #fff;
    margin-bottom: 30px
}

.section_filmore_coming .inner .info .title {
    font-size: 27px;
    font-weight: 300;
    color: #fff
}

.section_filmore_coming .inner .detail .item {
    text-align: center
}

.section_filmore_coming .inner .detail .item .icon {
    margin-bottom: 15px;
    height: 54px;
    display: flex;
    justify-content: center
}

.section_filmore_coming .inner .detail .item .icon img {
    max-height: 100%
}

.section_filmore_coming .inner .detail .item .number {
    font-size: 46px;
    font-weight: 500
}

.section_filmore_coming .inner .detail .item .sub-title {
    font-size: 14px
}

.section_filmore_coming .inner .detail .item .title {
    margin-top: 15px;
    padding-top: 15px;
    border-top: solid 1px #0f5d69;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 14px
}

.section_filmore_coming .section-content-bottom {
    position: relative
}

.section_filmore_coming .section-content-bottom object {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.facility .category .item {
    display: block;
    width: 100%;
    white-space: nowrap;
    padding: 10px 5px;
    border: solid 1px #B2B2B2;
    text-align: center;
    color: #B2B2B2;
    font-size: 20px;
    font-family: 'Belleza', sans-serif;
    margin-bottom: 5px;
}

.facility .category .item.active,
.facility .category .item:hover {
    background: #0f5d69;
    border-color: #0f5d69;
    color: #fff
}

.facility .inner {
    padding: 15px 30px
}

.facility .svgmap {
    height: 0;
    position: relative;
    padding-top: 50%
}

.facility .svgmap object {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%
}

.facility .panzoom-parent {
    background: #f1f1f1
}

.panzoom .svg-wrapper {
    position: relative
}

.panzoom .svg-wrapper .facility-maker {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.panzoom .svg-wrapper .facility-maker .item-maker text {
    fill: #fff;
    font-weight: 300;
    font-size: 6px
}

.panzoom .svg-wrapper .facility-maker .item-maker[data-group="gia-thong"] rect {
    fill: #a77b48
}

.panzoom .svg-wrapper .facility-maker .item-maker[data-group="hanh-chinh-van-hoa"] rect {
    fill: #084f61
}

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

.facility .inner li {
    position: relative;
    color: #fff;
    padding-left: 35px;
    margin-bottom: 15px;
    min-height: 24px;
    cursor: pointer
}

.facility .inner li span {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-weight: 300;
    color: #0f5d69;
    font-size: 14px
}

.facility .inner li.active span {
    background-color: #afb5ae
}

.d-none {
    display: none !important;
}

#button-contact-vr {
    position: fixed;
    bottom: 0;
    z-index: 99999;
}
/*phone*/
#button-contact-vr .button-contact {
    position: relative;
}
#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}
.phone-vr-circle-fill {
width: 55px;
height: 55px;
top: 17px;
left: 17px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: rgb(0 178 255 / 70%);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}
.phone-vr-img-circle {
    background-color: #00B2FF
;
    width: 40px;
    height: 40px;line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
.phone-vr-img-circle a {
    display: block;
    line-height: 37px;
}
.phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
@-webkit-keyframes phone-vr-circle-fill {
  0% {-webkit-transform: rotate(0) scale(1) skew(1deg);  }
  10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}
  20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}
  30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}
  40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}
  50% {-webkit-transform: rotate(0) scale(1) skew(1deg);}
  100% {-webkit-transform: rotate(0) scale(1) skew(1deg);}
}
@-webkit-keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}
.phone-bar a {
    position: fixed;
    bottom: 25px;
    left: 30px;
    z-index: -1;
    color: #fff;
    font-size: 16px;
    padding: 8px 15px 7px 50px;
    border-radius: 100px;
    white-space: nowrap;
}
.phone-bar a:hover {
    opacity: 0.8;color: #fff;
}
.phone-bar a, #phone-vr .phone-vr-circle-fill, #phone-vr .phone-vr-img-circle, #phone-vr .phone-bar a {
    background-color: #81d742;
}
@media(max-width: 736px){
    .phone-bar{display: none;}
}

#zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196F3;
    background-color: rgba(33, 150, 243, 0.7);
}
#zalo-vr .phone-vr-img-circle {
    background-color: #2196F3;
}
#viber-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #714497;
    background-color: rgba(113, 68, 151, 0.8);
}
#viber-vr .phone-vr-img-circle {
    background-color: #714497;
}
#contact-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196F3;
    background-color: rgba(33, 150, 243, 0.7);
}
#contact-vr .phone-vr-img-circle {
    background-color: #2196F3;
}


/*css all in one*/
#gom-all-in-one #phone-vr {
    transition: 0.7s all;
    -moz-transition: 0.7s all;
  -webkit-transition: 0.7s all;
}
#gom-all-in-one #zalo-vr {
    transition: 1s all;
    -moz-transition: 1s all;
  -webkit-transition: 1s all;
}
#gom-all-in-one #viber-vr {
    transition: 1.3s all;
    -moz-transition: 1.3s all;
  -webkit-transition: 1.3s all;
}
#gom-all-in-one #contact-vr {
    transition: 1.6s all;
    -moz-transition: 1.6s all;
  -webkit-transition: 1.6s all;
}
#button-contact-vr.active #gom-all-in-one .button-contact {
    margin-left: -100%;
}
#all-in-one-vr .phone-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 100%;
    color: #fff;
    padding: 5px 15px 5px 48px;
    border-radius: 50px;
    margin-left: -64px;
    width: max-content;
    cursor: pointer;
}
.header-main .nav>li>a{
    color: #194073;
}
.sec-capital-square-accordion .accordion{
    color:white;
}
.sec-capital-square-accordion .accordion a:hover{
    color:white;
}
.sec-capital-square-accordion .accordion a.active{
    color:white;
}