/* ============================================================
   _custom.css — Organized sections
   ============================================================ */

/* ---------- TABLE OF CONTENTS ----------
1. Base / Layout
2. Navigation / Offcanvas / Mobile
3. Centered nav / Logo / Contact buttons
4. Typography / Portfolio / Activity
5. Pagination / Cards / Buttons
6. Grids / Utilities
7. Search Dropdown
8. Banners / Hero / Image gradient
9. Carousel / Indicators / Hero controls
10. Responsive breakpoints (media queries)
11. Team strip
12. Booking / Promo / Masonry / Gallery / Process
13. Admire Compare (comparison table)
14. Fit Cards
15. Contact CTA / Forms
16. Success Modal
----------------------------------------- */

/* ============================
   BASE STYLES
   ============================ */

/* ============================
   1) BASE / LAYOUT
   ============================ */

body {
    background: #FAFAFA;
}

.navbar-fixed-bottom {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    float: left;
}

#bloc-0 {
    height: 66px;
}

.fixed-bottom {
    overflow: visible;
    display: block;
    float: left;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.chTSxy {
    height: 0 !important;
}

/* ============================
   2) NAVIGATION
   ============================ */

li .nav-link.a-btn {
    color: #002e6c !important;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 40px;
    height: 50px;
    vertical-align: middle;
    background-image: none;
}

.navbar-toggler-icon svg {
    display: block;
}

/* ============================
   3) OFFCANVAS / MOBILE MENU
   ============================ */

.offcanvas .accordion-button {
    font-size: 18px !important;
    color: #1a1a1a;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.offcanvas .accordion-button:not(.collapsed) {
    background: #f9f9f9;
    color: #007bff;
    box-shadow: none;
}

.offcanvas .list-group-item {
    color: #333 !important;
    font-size: 18px !important;
}

.offcanvas .list-group-item:hover {
    background-color: #f8f9fa;
}

.offcanvas .list-group-item-action {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

#mobileMenu {
    z-index: 999 !important;
    height: calc(100vh - 60px) !important;
    top: 66px !important;
    transform: translateY(-100%);
    transition: transform 0s;
}

#mobileMenu.show {
    transform: translateY(0);
}

#mobileMenu.hiding {
    transform: translateY(-100%);
}

.offcanvas-backdrop {
    z-index: 998 !important;
    top: 60px !important;
    transition: opacity 0s;
}

.mobile-lang-switch a,
.mobile-contact-actions a {
    font-size: 18px !important;
}

/* ============================
   4) NAV CENTER / LOGO / CONTACT BUTTONS
   ============================ */

.nav-center-group {
    max-width: 1600px;
    gap: 1rem;
    padding: 0 12px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.nav-center-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-center-left img {
    max-height: 56px;
    height: auto;
}

.btn-contact-style {
    background-color: #002e6c;
    color: #fff !important;
    border-radius: 20px;
    padding: 10px 40px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

/* ============================
   5) TYPOGRAPHY, PORTFOLIO, ACTIVITY
   ============================ */


.h2-bloc-7-style2 {
    font-size: 60px !important;
    font-family: "FCIconic-Bold" !important;
}

.h2-73-style2 {
    font-size: 35px !important;
    line-height: 55px !important;
    color: black !important;
    font-family: 'FcIconic-Regular' !important;
}

.navbar-nav li a {
    font-size: 20px !important;
}

.portfolio-customer {
    font-size: clamp(32px, 6.5vw, 70px);
    font-weight: 600;
    color: #ffffff;
    font-family: 'FCIconic-Bold';
    line-height: 1.02;
    margin: 20px;
}

.portfolio-location {
    font-size: clamp(14px, 3.2vw, 30px);
    font-weight: bold;
    color: #ffffff;
    font-family: 'FCIconic-Regular';
    border: 2px solid #ffffff;
    border-radius: 30px;
    padding: 8px 18px;
    display: inline-block;
    box-sizing: border-box;
}

.activity-title h1 {
    font-size: 60px;
    font-weight: 400;
    text-align: right;
    color: #ffffff !important;
    font-family: 'FCIconic-Bold';
}

.activity-title p {
    font-size: 20px;
    font-weight: 400;
    text-align: right;
    color: #ffffff !important;
    font-family: 'FCIconic-Regular';
}

/* ============================
   6) PAGINATION / CARDS / BUTTONS
   ============================ */
.custom-pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    color: #1f2933;
}

.custom-pagination a,
.custom-pagination span {
    text-decoration: none;
}

.custom-pagination .pagination-prev {
    font-size: 26px;
    line-height: 1;
    color: #142768;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
}

.custom-pagination .pagination-prev.disabled {
    opacity: 0.3;
    cursor: default;
}

.custom-pagination .pagination-page {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 4px;
    font-size: 20px;
    color: #222222;
}

.custom-pagination .pagination-page:hover {
    text-decoration: none;
    background-color: #e7e7e7;
}

.custom-pagination .pagination-page.active {
    background-color: #16306f;
    color: #ffffff;
    font-weight: 600;
}

.custom-pagination .pagination-ellipsis {
    font-size: 20px;
    color: #555555;
    letter-spacing: 2px;
}

.custom-pagination .pagination-next {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 999px;
    background-color: #16306f;
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    font-size: 16px;
}

.custom-pagination .pagination-next .pagination-next-icon {
    font-size: 22px;
    line-height: 1;
}

.custom-pagination .pagination-next.disabled {
    opacity: 0.4;
    cursor: default;
}

.custom-pagination .pagination-next.disabled:hover,
.custom-pagination .pagination-prev.disabled:hover {
    text-decoration: none;
}


.card9 {
    border-radius: 0px 0px 10px 10px !important;
    border: none !important;
}

.btn-อ่านเพิ่มเติม-style:hover {
    color: var(--swatch-var-307) !important;
}

.btn-อ่านเพิ่มเติม-style {
    color: var(--swatch-var-6079) !important;
}

.img-bloc-2-31105-style {
    min-height: 283px !important;
}



.p-4-style {
    font-size: 24px !important;
}

.p-3-style {
    font-size: 24px !important;
}

.bgc-4716 {
    position: fixed !important;
    z-index: 999 !important;
}

.bloc-1-subtitle * {
    font-size: 32px;
    font-weight: bold;
    color: #292D32 !important;
    font-family: 'FCIconic-Bold';
    line-height: 48px;
}

.bloc-1-detail * {
    font-size: 16px;
    font-weight: 400;
    color: #292D32 !important;
    font-family: 'FCIconic-Regular';
    line-height: auto;
    text-align: center;
}

.btn-promotion {
    border-radius: 30px;
    background: #ffffff;
    color: #002F6C !important;
    padding: 8px 20px 8px 20px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    font-size: 24px;
    min-height: 55px;
}

.btn-promotion:hover {
    background: #002f6c25;
}

.promotion-text a {
    color: #002F6C !important;
    text-decoration: none;
}

.promotion-text a:hover {
    color: #002f6cdf !important;
    text-decoration: underline;
}

.btn-line-style {
    border-radius: 30px;
    background: #002F6C;
    color: #fff !important;
    padding: 8px 20px 8px 20px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    font-size: 24px;
    min-height: 55px;
}

.btn-line-style:hover {
    background-color: #002f6cdf !important;
}

.btn-tel-style {
    border-radius: 30px;
    background: #ffffff;
    color: #002F6C !important;
    padding: 8px 20px 8px 20px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    font-size: 24px;
    min-height: 55px;
}

.btn-tel-style:hover {
    background: #002f6c25;
}

/* ============================
   8) GRID UTILITIES
   ============================ */

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}

.h2-bloc-36-style {
    color: #292D32 !important;
}

.btn-know-admire {
    background-color: #fff;
    color: #292D32 !important;
    border-radius: 30px;
    padding: 10px 40px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    text-decoration: none;
}

.btn-know-admire:hover {
    background-color: #D6E3F0 !important;
}

.sub-title-waranty {
    font-size: 36px !important;
    font-weight: normal !important;
    color: #292D32 !important;
    font-family: 'FCIconic-Regular' !important;
}

.h2-bloc-36-style {
    font-size: 50px;
}

/* ============================
   9) SEARCH DROPDOWN
   ============================ */

.position-relative {
    position: relative;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    margin-top: .25rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.search-dropdown .dropdown-header {
    font-weight: bold;
    padding: .75rem 1rem;
    border-bottom: 1px solid #f1f3f5;
    font-family: "FCIconic-Bold";
    color: #292D32
}

.search-dropdown .dropdown-item {
    display: block;
    padding: .75rem 1rem;
    color: #292D32 !important;
    text-decoration: none;
    font-size: 18px;
}

.search-dropdown .dropdown-item:hover {
    background: #f8f9fa;
}

.search-dropdown .dropdown-divider {
    height: 1px;
    background: #f1f3f5;
    margin: 0;
}

.search-dropdown .dropdown-search {
    padding: .75rem 1rem;
}

/* ============================
   10) ADMIRE BANNER
   ============================ */

.admire-banner {
    background: #F3F3F3;
    padding-left: 15%;
}

.admire-banner .banner-title {
    color: #002F6C;
    font-family: "FCIconic-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    font-size: clamp(24px, 3.2vw, 50px);
    margin-bottom: 1rem;
}

.admire-banner .banner-sub {
    color: #002F6C;
    font-family: "FCIconic-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    font-size: clamp(22px, 2.8vw, 50px);
    margin-bottom: .5rem;
}

.admire-banner .banner-desc {
    color: #404040 !important;
    font-size: clamp(14px, 1.5vw, 16px);
}

.admire-banner .btn-banner {
    color: #fff !important;
    background: #002F6C;
    border-color: #002F6C;
    border-radius: 9999px;
    padding: .1rem 1rem;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
}

.admire-banner .btn-banner:hover {
    filter: brightness(0.95);
}

.admire-banner .manager {
    color: #002F6C;
    font-weight: 700;
    font-family: 'FCIconic-Bold';
    font-size: 24px;
}

.admire-banner .manager-role {
    color: #002F6C;
    font-size: 16px;
    font-family: 'FCIconic-Regular';
}

.admire-banner .banner-portrait {
    width: 100%;
    max-width: 621px;
    aspect-ratio: 1 / 1.15;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* ============================
   11) IMAGE GRADIENT
   ============================ */

/* Image gradient overlay (text sits above gradient) */
.image-gradient {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    overflow: hidden;
}

.image-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.5s ease;
}

.image-gradient:hover .image-gradient-bg {
    transform: scale(1.05);
}

/* gradient from transparent (left/top) to dark (right/bottom) for default */
.image-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

/* content that should appear above the gradient */
.image-gradient .overlay-content {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* NEW: gradient that darkens the right side (useful when text sits at right) */
.image-gradient-right::before {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.9;
}

/* ensure overlay-content aligns right for right-side gradients */
.image-gradient-right .overlay-content {
    text-align: right;
    padding-right: 3rem;
    padding-left: 1rem;
}

/* ============================
   12) CAROUSEL / HERO BANNER
   ============================ */

.btn-readmore-style {
    border-radius: 25px 25px 25px 25px;
    background-color: var(--swatch-var-4716);
    color: #292D32 !important;
    font-family: "FCIconic-Regular";
    font-size: 18px;
}

.btn-readmore-style:hover {
    background: rgb(255 255 255 / 70%) !important;
}



#activityCarouselDemo .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #9BB1C9;
    opacity: 1;
    margin: 0 6px;
}

#activityCarouselDemo .carousel-indicators .active {
    background: #002F6C;
}

#activityCarouselDemo .carousel-control-prev,
#activityCarouselDemo .carousel-control-next {
    z-index: 10;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
}

#activityCarouselDemo .carousel-control-prev {
    left: 15%;
}

#activityCarouselDemo .carousel-control-next {
    right: 15%;
}

/* Tablet & Mobile: ปุ่มติดขอบ */
@media (max-width: 991.98px) {
    #activityCarouselDemo .carousel-control-prev {
        left: 5%;
    }

    #activityCarouselDemo .carousel-control-next {
        right: 5%;
    }
}

/* Mobile only: ปุ่มติดขอบ 0 */
@media (max-width: 767.98px) {
    #activityCarouselDemo .carousel-control-prev {
        left: 0;
    }

    #activityCarouselDemo .carousel-control-next {
        right: 0;
    }

    #activityCarouselDemo .carousel-control-prev,
    #activityCarouselDemo .carousel-control-next {

        width: 36px;
        height: 36px;

    }
}

#activityCarouselDemo .carousel-control-prev:hover,
#activityCarouselDemo .carousel-control-next:hover {
    background-color: #f0f0f0;
}

#activityCarouselDemo .carousel-control-prev-icon,
#activityCarouselDemo .carousel-control-next-icon {
    background-image: none;
    width: 24px;
    height: 24px;
}

#activityCarouselDemo .carousel-control-prev-icon::before,
#activityCarouselDemo .carousel-control-next-icon::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
}

#activityCarouselDemo .carousel-control-prev-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C2635'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}

#activityCarouselDemo .carousel-control-next-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C2635'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}

.topbar-maring {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
}



.img-activity {
    height: 623px;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    overflow: hidden;
}

.img-activity .image-gradient-bg,
.img-activity .image-gradient-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-activity picture.image-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
}

.p-bloc-2-31105-m-style {
    color: var(--swatch-var-1183) !important;
    font-size: 16px !important;
    padding-right: 0px;
    padding-left: 0px;
    text-decoration: none;
    font-family: "FCIconic-Regular";
}

/* ============================
   13) TEAM STRIP
   ============================ */

.team-strip {
    position: relative;
    overflow: visible;
    padding-block: 24px;
    margin-block: -24px;
    isolation: isolate;
}

.team-row {
    display: flex;
    gap: 0;
    position: relative;
    overflow: visible;
    justify-content: flex-start;
    align-items: center;
}

.team-scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* เพิ่ม padding-top/bottom เพื่อให้มีพื้นที่สำหรับรูปที่ขยาย */
    padding-block: 3rem;
    margin-block: -3rem;
}

.team-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.team-card {
    position: relative;
    flex: 0 0 auto;
    width: min(18rem, 45vw);
    height: 22rem;
    overflow: visible;
    scroll-snap-align: start;

}

.team-card:hover {
    z-index: 10;
}

/* TEAM PHOTO - ใช้ absolute positioning เพื่อให้ล้นกรอบได้ */
.team-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter .25s ease, transform .25s ease, box-shadow .25s ease;
    transform-origin: center;
    will-change: transform;
    z-index: 1;
}

/* Hover state - ขยายแบบ absolute ล้นออกกรอบ */
.team-card:hover .team-photo,
.team-card:focus-within .team-photo,
.team-card:hover .team-info {
    filter: none;
    transform: scale(1.15);
    /* box-shadow: 5px 5px 5px rgba(0, 0, 0, .5); */
}

/* Bottom gradient + text (ซ่อนในปกติ) */
.team-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.25rem;
    color: #fff !important;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    background: linear-gradient(0deg, #002F6C 50%, rgba(255, 90, 45, 0) 100%);
    z-index: 2;
    pointer-events: none;
    text-align: right;
}

.team-card:hover .team-info,
.team-card:focus-within .team-info {
    opacity: 1;
    transform: translateY(0);
    bottom: -22px;
    scale: 1.15;
}

.team-name {
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 .15rem;
    font-family: 'FCIconic-Bold';
}

.team-role {
    font-size: 16px;
    opacity: .95;
    margin: 0;
    color: #fff !important;
}

/* Arrows */
.team-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    background: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.team-nav:hover {
    background: #f8f9fa;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    transform: translateY(-50%) scale(1.05);
}

.team-nav svg {
    display: block;
}

.team-prev {
    left: 0.5rem;
}

.team-next {
    right: 0.5rem;
}

/***** Booking Promo (ตามแบบ) *****/
.booking-card {
    font-family: 'FCIconic-Regular';
}

.booking-left {
    margin-right: 80px;
}

.booking-left img {
    display: block;
    width: 100%;
    max-height: none !important;
    border-radius: 10px;
}

.badge-promo {
    display: inline-block;
    color: #002F6C;
    font-size: 16px;
}

.title-main {
    color: #002F6C;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    line-height: 1.1;
    margin: .35rem 0 1rem;
    font-size: clamp(28px, 4.6vw, 44px);
}

.list-promo {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #0B387A;
}

.list-promo li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .25rem 0;
    font-size: clamp(16px, 2.2vw, 20px);
}

.list-promo li .dot {
    margin-top: .45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #002F6C;
    flex: 0 0 8px;
}

.meta {
    color: #002e6c;
    font-size: clamp(18px, 2vw, 20px);
}

.container-div-8663-min-height {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto !important;
}

.container-div-8663-min-height-2 {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto !important;
    padding: 20px 25px 20px 25px;
    border-radius: 22px 22px 22px 22px;
}

.container-div-47141-min-height {
    min-height: 200px !important;
}

.div-blog {
    margin-left: 20%;
    margin-right: 20%;
}

.grid-7350-style {
    gap: 30px;
}

/* ============================
   HERO BANNER CAROUSEL STYLES
   ============================================ */



/* Base banner styles */
.hero-banner {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    max-height: unset !important;
    position: relative;
}

.hero-banner .container {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: var(--hero-title-size) !important;
    line-height: 1.2 !important;
}

.hero-title * {
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    margin-bottom: 0 !important;
    font-weight: inherit !important;
    font-family: inherit !important;
}

.hero-content .hero-text {
    font-size: var(--hero-text-size) !important;
    line-height: 1.4 !important;
}

.hero-text * {
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    margin-bottom: 0 !important;
    font-weight: inherit !important;
    font-family: inherit !important;
}

.hero-title,
.hero-text {
    word-wrap: break-word;
}

.hero-title ul,
.hero-title ol,
.hero-text ul,
.hero-text ol {
    text-align: initial;
    padding-left: 1.5em;
    margin: 0 !important;
}

.hero-title li,
.hero-text li {
    text-align: initial;
}

.hero-content {
    position: absolute;
    z-index: 3;
}

.hero-content-inner {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
}

/* แสดงเมื่อสไลด์ active */
.carousel-item.active .hero-content-inner {
    opacity: 1;
    transform: translateY(0);
}

/* stagger เล็กน้อย สำหรับ title/text/button */
.carousel-item.active .hero-content .hero-title {
    transition-delay: .08s;
}

.carousel-item.active .hero-content .hero-text {
    transition-delay: .18s;
}

.carousel-item.active .hero-content .btn-hero {
    transition-delay: .28s;
}


/* Button hover effects */
.hero-content .btn-hero,
.btn-hero {
    font-size: var(--hero-btn-text-size) !important;
    transition: all 0.3s ease;
}

.hero-content .btn-hero:hover,
.btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

@media (max-width: 1024px) {
    .hero-banner {
        aspect-ratio: 4 / 5 !important;
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: calc(var(--hero-title-size) * 0.6) !important;
    }

    .hero-text {
        font-size: calc(var(--hero-text-size) * 0.75) !important;
    }

    .btn-hero {
        font-size: calc(var(--hero-btn-text-size) * 0.75) !important;
        padding: 6px 12px !important;
    }
}

/* .hero-text p {
    all: unset !important;
} */

/* Carousel controls for hero banner */
#top-banner .carousel-control-prev,
#top-banner .carousel-control-next {
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#top-banner .carousel-control-prev:hover,
#top-banner .carousel-control-next:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
}

#top-banner .carousel-control-prev {
    left: 20px;
}

#top-banner .carousel-control-next {
    right: 20px;
}

/* Carousel indicators for hero banner */
#top-banner .carousel-indicators {
    bottom: -20px;
    margin-bottom: 0;
}

#top-banner .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #D9D9D9;
    opacity: 1;
    margin: 0 6px;
    transition: all 0.3s ease;
}

#top-banner .carousel-indicators .active {
    background: #002F6C;
    width: 12px;
    height: 12px;
}

/* ============================
   Promotion Text styles
   ============================================ */
.promotion-text {
    color: #002F6C !important;
}

.promotion-text div,
.promotion-text p {
    font-family: 'FCIconic-Regular' !important;
    color: #002F6C !important;
}

.promotion-text h1,
.promotion-text h2,
.promotion-text h3,
.promotion-text h4,
.promotion-text h5,
.promotion-text h6 {
    font-family: 'FCIconic-Bold' !important;
    font-weight: bold !important;
}

/* ============================
   YouTube Review Tab styles
   ============================================ */
.youtube-review-section {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    /* เพื่อให้ border-radius ตัดเนื้อหาภายใน */
    border-bottom-left-radius: 10px;
    /* ปรับขนาดตามต้องการ */
    border-bottom-right-radius: 10px;
    background: #ffffff;
    /* ถ้าต้องการเห็นมุมโค้ง ให้มีพื้นหลัง */
}

.youtube-review-section .container {
    overflow: hidden;
}

/* ทำให้แท็บเลื่อนแนวนอน (drag/scroll) */
.youtube-review-section .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #ddd;
    /* ย้ายจาก inline style ถ้าต้องการ */
}

/* ป้องกันแต่ละแท็บยืดตัว */
.youtube-review-section .nav-item {
    flex: 0 0 auto;
}

/* ซ่อน scrollbar บนเบราว์เซอร์ที่รองรับ */
.youtube-review-section .nav-tabs::-webkit-scrollbar {
    display: none;
}

.youtube-review-section .nav-tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* แบบอ่อน: ขณะลากให้เปลี่ยน cursor */
.youtube-review-section .nav-tabs.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/* รูปแบบตัวอักษร / สี */
.youtube-review-section .nav-item,
.youtube-review-section .nav-link {
    font-family: 'FCIconic-Bold';
    font-weight: bold;
    color: rgba(17, 17, 17, 0.5);
}

.youtube-review-section .nav-link.active {
    color: #002F6C !important;
}

/* ============================
   Gallery Masonry styles
   ============================================ */

.gallery-section {
    background: #f8f9fa;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw
}

.masonry-grid {
    column-count: 2;
    column-gap: 0
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 0;
    display: inline-block;
    width: 100%
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: block;
    width: 100%
}

.gallery-img {
    transition: transform .3s ease;
    display: block;
    width: 100%;
    height: auto;
}

.gallery-item:hover .gallery-img {
    transform: scale(1.03)
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease
}

.gallery-item:hover .gallery-overlay {
    opacity: 1
}

/* Lightbox */
.gallery-lightbox .modal-content {
    background: #00000050 !important;
}

/* Thumbnails strip */
.thumbs-wrapper {
    width: 100%;
    overflow: auto
}

.thumbs-row {
    display: flex;
    gap: .5rem;
    padding: .5rem 0
}

.thumbs-row .thumb {
    background: transparent;
    border: 0;
    padding: 0;
    opacity: .6;
    outline: none
}

.thumbs-row .thumb.active,
.thumbs-row .thumb:hover {
    opacity: 1
}

.thumbs-row .thumb img {
    height: 64px;
    width: auto;
    display: block;
    border-radius: 4px
}

.process-cards-section {
    position: relative;
    margin-block: 12px
}

.proc-wrap {
    position: relative
}

.proc-scroller {
    display: flex;
    gap: 24px;
    overflow: auto;
    scroll-behavior: smooth;
    padding: 4px 52px
}

.proc-card {
    width: 373px;
    max-height: 664px;
    background: #fff;
    border: 1px solid #E6E8EE;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .06);
    overflow: hidden
}

/* header with check icon before image */
.proc-head {
    padding: 12px 12px 0 12px
}

.proc-check {
    display: inline-grid;
    place-items: center;
    background: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    margin-bottom: 8px
}

/* image follows header */
.proc-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* modern browsers: enforce 4:3 */
    height: auto;
    overflow: hidden;
    background: #F3F5F9;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
    .proc-media {
        height: 0;
        padding-top: 75%;
        /* 3/4 = 75% to achieve 4:3 ratio */
    }

    .proc-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

.proc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.proc-media:hover img {
    transform: scale(1.05);
    transition: transform .3s ease
}

.proc-body {
    padding: 18px
}

.proc-title {
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    font-size: 20px;
    margin: 0 0 8px;
    color: #0B2343
}

.proc-list {
    margin: 0 0 10px 0;
    padding-left: 18px
}

.proc-list li {
    margin: 6px 0;
    color: #344054;
    font-size: 14px
}

.proc-meta {
    font-size: 14px;
    color: #292D32;
    line-height: 1.5;
    margin-bottom: 12px;
    font-family: 'FCIconic-Bold';
    font-weight: bold
}

.proc-btn {
    margin-top: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 25px;
    border-radius: 999px;
    background: #002F6C;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
}

/* nav & dots hidden by default; shown only when overflow */
.proc-nav {
    position: absolute;
    top: 40%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #E2E6EE;
    background: #fff;
    display: none;
    place-items: center;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
    z-index: 2
}

.proc-prev {
    left: 6px
}

.proc-next {
    right: 6px
}

.proc-dots {
    display: none;
    gap: 8px;
    justify-content: center;
    margin-top: 12px
}

.proc-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: #D9DEE8
}

.proc-dots button.active {
    background: #002F6C
}

.proc-desc * {
    font-size: 14px;
    color: #292D32 !important;
    margin-bottom: 0;
}

/* เปลี่ยนสีไอคอนเช็คเมื่อ hover / focus */
.proc-card .proc-check svg circle,
.proc-card .proc-check svg path {
    transition: stroke .18s ease;
}

/* hover / keyboard focus */
.proc-card:hover .proc-check svg circle,
.proc-card:focus-within .proc-check svg circle {
    fill: #002F6C;
    /* สีน้ำเงินที่ใช้ในโปรเจค */
}

.proc-card:hover .proc-check svg path,
.proc-card:focus-within .proc-check svg path {
    stroke: #fff;
}

/* when overflow detected */
#procWrap.overflow-on .proc-nav {
    display: grid
}

#procWrap.overflow-on~.proc-dots {
    display: flex
}

/* ============================
   Step Modal styles
   ============================================ */
.step-modal .modal-content {
    border-radius: 16px;
    overflow: hidden;
}

.step-modal-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.step-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.step-modal-content * {
    font-size: 15px;
    line-height: 1.7;
}

/* =================================================
    แอ็ดไมรแตกต่างอย่างไร
   =================================================*/

/* SECTION WRAPPER */
.admire-compare {
    padding-top: 24px;
    padding-bottom: 24px;
}

.admire-compare-wrapper {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

/* กล่องรวม 3 column */
.admire-compare-columns {
    display: flex;
    /* ตามที่ขอ: 3 col flex ชิดกัน */
}

/* แต่ละ column */
.ac-col {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E4E7F0;
}

.ac-col:first-child {
    border-left: none;
}

/* ความกว้างแต่ละ column: 280 / 375 / 375 */
.ac-col-label {
    flex: 0 0 280px;
}

.ac-col-brand,
.ac-col-other {
    flex: 0 0 375px;
    background: #ffffff;
}

.ac-col.ac-col-brand {
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.ac-col.ac-col-label {
    box-shadow: 20px 15px 20px -10px rgba(0, 0, 0, 0.12);
}

.ac-col.ac-col-other {
    box-shadow: 0px 15px 20px -10px rgba(0, 0, 0, 0.12);
}

/* HEAD แต่ละ column */
.ac-col-head {
    min-height: 90px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* หัว column แรก ต้องพื้นขาว ตามภาพ */
.ac-col-label .ac-col-head {
    background: none;
    justify-content: flex-start;
    border-bottom: none;
}

/* ตัวอักษรหัว ADMiRE / They */
.ac-brand-text {
    font-size: 22px;
    letter-spacing: 0.08em;
    color: #002F6C;
    font-weight: 700;
}

.ac-other-text {
    font-size: 45px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #111827;
}

/* CELL/ITEM ในแต่ละ column */
.ac-col-item {
    padding: 18px 24px;
    border-bottom: 1px solid #E4E7F0;
    font-size: 15px;
    line-height: 1.7;
    color: #1E2433;
    display: flex;
    align-items: center;
    min-height: 110px;
}

/* column แรกเป็นหัวข้อ */
.ac-col-label .ac-col-item {
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    font-size: 24px;
    color: #101622;
    background: #ffffff;
    min-height: 110px;
}

/* bullet + text */
.ac-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ac-point p {
    margin: 0;
    font-size: 16px;
    color: #000000 !important;
}

/* icon กลมติ๊กถูก */
.ac-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.ac-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23002F6C'/%3E%3Cpath d='M5.5 10.5L8.5 13.5L14.5 7.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: cover;
}

.bgc-5433,
.bgc-2594 {
    background: none !important;
}

/* ============================
    แอ็ดไมร เหมาะกับใครบ้าง – Cards
============================================ */
.admire-fit-section {
    padding-left: 16px;
    padding-right: 16px;
}

.fit-card {
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(15, 24, 54, 0.10);
    display: flex;
    flex-direction: column;
}

.fit-card-media img {
    display: block;
    width: 100%;
    height: 275px;
    object-fit: cover;
}

.fit-card-media:hover img {
    transform: scale(1.05);
    transition: transform .3s ease
}

/* ระยะในตัวการ์ด */
.fit-card-body {
    padding: 24px 28px 24px;
}

.fit-card-title {
    font-size: 24px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    line-height: 1.4;
    color: #292D32 !important;
    margin-bottom: 12px;
}

/* list bullet */
.fit-card-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
    font-family: 'FCIconic-Regular';
}

.fit-card-list li+li {
    margin-top: 4px;
}

/* บรรทัดล่าง */
.fit-card-note {
    font-size: 16px;
    line-height: 1.7;
    color: #111827 !important;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    margin: 0;
}

/* ===== Contact CTA Section ===== */
.contact-cta-panel {
    background: linear-gradient(90deg, #003A9B 0%, #001F6C 100%);
    padding: 80px;
    color: #000000;
}

.contact-cta-title {
    font-size: 50px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    text-align: center;
    color: #ffffff !important;
}

.contact-cta-sub {
    font-size: 24px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    text-align: center;
    letter-spacing: 0.04em;
    opacity: 0.9;
    color: #ffffff !important;
}

/* Form */
.contact-cta-form {
    max-width: 800px;
    margin: 0 auto;
}

.contact-label {
    font-size: 13px;
    font-weight: 500;
    color: #E5E7EB;
    margin-bottom: 4px;
}

.contact-input {
    border: none;
    background-color: #ffffff;
    font-size: 24px;
    padding: 10px 18px;
    height: 46px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05);
    font-family: 'FCIconic-Regular';
    color: #292D32 !important;
    height: 55px;
}

.contact-input::placeholder {
    color: #292D32 !important;
}

.contact-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #FFD54A;
}

/* textarea ให้สูงขึ้นแต่ยังโค้ง */
.contact-textarea {
    height: auto;
    resize: vertical;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ปุ่ม */
.btn-contact-submit {
    background-color: #ffffff;
    color: #292D32 !important;
    border-radius: 30px;
    padding: 10px 30px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    border: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    height: 55px;
}

.btn-contact-submit svg {
    margin-left: 20px;
}

.btn-contact-submit:hover {
    background-color: #F3F4F6;
    color: #001B4A;
}

.bgc-1648 {
    background: none !important;
}

/* ============================
   SUCCESS MODAL STYLES
   ============================================ */
.success-modal {
    border-radius: 22px !important;
    padding: 32px 34px;
    background: #ffffff;
}

.success-icon svg {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.08));
}

.success-title {
    color: #002F6C;
    font-size: 22px;
    letter-spacing: 0.4px;
}

.success-text {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

.success-btn {
    border-radius: 50px;
    background: #002F6C;
    color: white !important;
    border: none;
    font-size: 15px;
    font-weight: 600;
    padding-left: 36px !important;
    padding-right: 36px !important;
    box-shadow: 0 4px 10px rgba(0, 47, 108, 0.25);
    transition: all .25s ease;
}

.success-btn:hover {
    background: #01397c;
    box-shadow: 0 6px 13px rgba(0, 47, 108, 0.35);
}

.bloc-1-detail {
    text-align: center;
    color: #292D32 !important;
    font-size: 16px;
}

/* --- แอ็ดไมรแตกต่างอย่างไร (Mobile) --- */
.admire-compare-mobile {
    padding: 0 16px;
}

.acm-wrapper {
    max-width: 360px;
    margin: 0 auto;
    border-radius: 10px;
    /* โค้งใหญ่แบบในภาพ */
    box-shadow: 0 18px 45px rgba(3, 24, 62, 0.10);
    overflow: hidden;
    /* บังคับให้ทุกอย่างโค้งตามกรอบ */
}

.acm-tabs {
    display: flex;
    padding: 0;
    margin: 0;
    background: #EBEBEB;
}

/* ไม่ต้องใช้ ::after แล้ว */
.acm-tabs::after {
    content: none;
}

.acm-tab {
    flex: 1;
    /* display: flex; */
    align-items: center;
    gap: 8px;
    border: none;
    /* ตัด border ออกจากตัว tab */
    padding: 18px 18px 14px;
    /* ความสูงใกล้ ๆ 74px ใน Figma */
    font-size: 40px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #111827;
    position: relative;
}

.acm-tab-admire {
    justify-content: flex-start;
}

.acm-tab-they {
    justify-content: flex-end;
}

/* active = ขาว, inactive = เทาอ่อน */
.acm-tab.active {
    background: #ffffff;
    color: #000000 !important;
    border-radius: 10px 10px 0 0;
}

.acm-tab:not(.active) {
    background: #EBEBEB;
}

/* โลโก้ ADMIRE */
.acm-logo {
    height: 24px;
    width: auto;
    display: block;
}

/* ข้อความ They */
.acm-tab-text {
    font-weight: 700;
}

/* PANELS ด้านล่างการ์ด */
.acm-panel {
    display: none;
    padding: 14px 18px 18px;
    border-radius: 0 0 24px 24px;
    /* โค้งเฉพาะด้านล่าง */
    background: #ffffff;
}

.acm-panel.active {
    display: block;
}

/* List & items (ใช้ของเดิมได้) */
.acm-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.acm-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.acm-item+.acm-item {
    border-top: 1px solid #E5E7EB;
}

.acm-bullet {
    margin-top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0F67D4;
    box-shadow: 0 0 0 4px rgba(15, 103, 212, 0.12);
    flex-shrink: 0;
}

.acm-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #000000 !important;
}

.acm-label {
    font-size: 20px;
    font-weight: bold;
    font-family: 'FCIconic-Bold', sans-serif;
    color: #111827;
    margin-bottom: 2px;
}

.acm-tab-admire.active::before {
    content: '';
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 0, transparent 20px, white 20px);
    z-index: 1;
}

.acm-tab-they.active::before {
    content: '';
    position: absolute;
    left: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 0 0, transparent 20px, white 20px);
    z-index: 1;
}

.custom-nav-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E2E6EE;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 35%;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
    opacity: 1;
}

.carousel-control-prev.custom-nav-btn {
    left: 10px;
}

.carousel-control-next.custom-nav-btn {
    right: 10px;
}

.custom-arrow {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1;
}

.custom-nav-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Desktop: แสดงแบบ Grid ปกติ */
.admire-fit-section .fit-cards-wrapper {
    position: relative;
}

.admire-fit-section .fit-cards-container {
    overflow: visible;
}

.admire-fit-section .fit-nav {
    display: none;
}

.bloc-md-md {
    padding: 0;
}


.container-div-27348-min-height {
    min-height: 333px;
    width: 256px;
}

.blocs-horizontal-scroll-area {
    justify-content: center;
}

.three-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-subtitle-style {
    font-size: 24px;
    line-height: 34px;
    color: #292D31 !important;
}

.text-admirecare {
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #002F6C;
}

/* --- Styles เฉพาะส่วน Warranty --- */
.warranty-section {
    padding-top: 20px;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
    color: #333;
}

.warranty-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Grid System */
.warranty-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

/* Cards */
.warranty-card {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 278px;
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.05); สามารถเปิดใช้ถ้าต้องการเงา */
}

.warranty-img-wrapper {
    width: 100%;
    height: 278px;
    overflow: hidden;
}

.warranty-img-wrapper img {
    width: 278px;
    height: 278px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.warranty-card:hover .warranty-img-wrapper img {
    transform: scale(1.05);
    /* ลูกเล่นขยายภาพตอนเอาเมาส์ชี้ */
}

.warranty-content {
    background-color: #112e5f;
    color: #fff;
    padding-left: 25px;
    padding-right: 25px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.warranty-content h4 {
    font-size: 24px;
    font-family: 'FCIconic-Bold';
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #ffffff !important;
}

.warranty-content ul {
    list-style-type: disc;
    padding-left: 20px;
    font-family: 'FCIconic-Regular';
    font-size: 16px;
    color: #ffffff;
}

.warranty-content ul li {
    margin-bottom: 6px;
}

/* Footer Area */
.warranty-footer p {
    margin-top: 40px;
    font-size: 24px;
    color: #292D32 !important;
}

.warranty-text-blue {
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #002e6c;
}

/* Button */
.warranty-btn {
    display: inline-block;
    padding: 10px 35px;
    background-color: #002F6C;
    color: #fff !important;
    text-decoration: none;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    font-size: 24px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    max-height: 55px;
}

.img-ceo {
    margin-left: 100px;
    z-index: 2;
}

.bg-ceo {
    position: absolute;
    right: -100px;
    bottom: -7px;
    z-index: 0;
    height: -webkit-fill-available;
}

.relative {
    position: relative;
}

.btn-home-all,
.btn-port-all,
.btn-blog-all,
.btn-activity-all {
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    font-size: 24px;
    color: var(--swatch-var-4716) !important;
    border-radius: 30px;
    padding: 10px 25px;
    max-height: 55px;
    background-color: var(--swatch-var-6079);
}

.btn-port-all:hover,
.btn-blog-all:hover,
.btn-activity-all:hover {
    background-color: #002f6cdf !important;
}

.btn-home-all:hover {
    background-color: #002f6cdf !important;
}



.field-style {
    height: 55px;
    max-height: 55px;
    border-radius: 30px;
    width: 480px;
}


.icon-featured-home-desktop img {
    width: 16px !important;
    height: 16px !important;
}

.feature-title-desktop {
    font-size: 33px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #292D32 !important;
    text-decoration: none;
}

.feature-concept-desktop {
    font-size: 16px !important;
    color: #292D32 !important;
    min-height: 72px;
}

.feature-price-desktop {
    font-size: 70px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #292D32 !important;
}

.feature-label-desktop {
    font-size: 18px !important;
    color: #002e6c !important;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
}

.feature-value-desktop {
    font-size: 24px !important;
    color: #292D32 !important;
}

.home-card-name {
    font-size: 24px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #292D32 !important;
    text-decoration: none;
}

.home-card-concept {
    font-size: 16px;
    color: #292D32 !important;
    min-height: 72px;
}

.home-card-label {
    font-size: 14px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #002e6c !important;
}

.home-card-value {
    font-size: 20px;
    color: #292D32 !important;
}

.home-card-r-value {
    font-size: 14px;
    color: #292D32 !important;
}

.home-card-r-icon {
    width: 18px;
    height: 18px;
}

.home-card-price {
    font-size: 50px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #292D32 !important;
}

.blog-title {
    width: 100%;
    color: var(--swatch-var-4716) !important;
    font-size: 24px;
    line-height: 34px;
    text-decoration: none;
    font-family: "FCIconic-Bold";
}

.blog-desc {
    width: 100%;
    color: var(--swatch-var-4716) !important;
    font-size: 18px;
    font-family: "FCIconic-Regular";
    line-height: 28px;
}

.line-icon {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    max-width: 160px;
    width: auto;
    margin: 0;
    display: inline-block;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.line-icon:hover {
    transform: translateY(-4px);
}

.line-icon img {
    border-radius: 50%;
    border-color: rgba(0, 0, 0, 0);
    line-height: 36px;
    color: rgb(255, 255, 255);
    padding: 0px;
    font-family: inherit;
    font-weight: bold;
    font-size: 0px;
    background-color: rgb(14, 193, 47);
    text-transform: none;
    border-width: 0px;
    max-width: 1840px;
}

.h1-style p {
    font-size: 14px;
    line-height: 20px;
    color: #292D32 !important;
    margin-top: 5px;
}

.line-clamp-1 {
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px;
}

.home-card-concept {
    font-size: 14px !important;
    min-height: 60px !important;
}

.blogs-all {
    margin-top: 65px;
}

.blogs-head-title {
    font-size: 50px;
    font-weight: bold;
    font-family: 'FCIconic-Bold';
    color: #fff !important;
    background: linear-gradient(90deg, #1C457B 0%, #214778 100%);
    height: 130px;
    padding: 0px 290px 0px 290px;
    display: flex;
    align-items: center;
    margin: 0 !important;
}

.btn-type-blogs {
    border: 1px solid #002F6C;
    border-radius: 30px;
    padding: 5px 20px;
    color: #002F6C !important;
    height: 45px;
    text-decoration: none;
}

.btn-type-blogs:hover,
.btn-type-blogs.active {
    background-color: #002F6C;
    color: #fff !important;
}

.list-type-blogs {
    padding: 55px 0px 55px 0px;
}

/* ============================
   RESPONSIVE BREAKPOINTS
   ============================ */

/* ============================
   MEDIA QUERIES
   ============================ */


/* =========================================
   DESKTOP & LARGE SCREENS (min-width ≥ 992px)
   ========================================= */

/* Extra large screens (≥ 1400px) */
@media (min-width:1400px) {
    .masonry-grid {
        column-count: 3;
        column-gap: 10px;
    }

    .masonry-item {
        margin-bottom: 10px;
    }
}

/* Desktop & large screens (≥ 992px) */
@media (min-width:992px) {
    .team-card {
        width: 18rem;
        height: 24rem;
    }

    .booking-card {
        padding: 24px 28px;
    }


}

/* =========================================
   TABLETS & MEDIUM SCREENS (min-width ≥ 768px)
   ========================================= */

/* Masonry & gallery: tablet and up (≥ 768px) */
@media (min-width:768px) {
    .masonry-grid {
        column-count: 3;
        column-gap: 2px;
    }

    .masonry-item {
        margin-bottom: 2px;
    }

    .gallery-item:hover .gallery-img {
        transform: scale(1.05);
    }
}

/* Small tablets and up (≥ 576px) */
@media (min-width:576px) {
    .masonry-item {
        margin-bottom: 1px;
    }
}

/* iPad Landscape (1024px) - Desktop Mode */
@media (min-width: 1024px) and (max-width: 1366px) {
    .navbar-nav li a {
        font-size: 14px !important;
    }

    .topbar-maring {
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }

    .h2-bloc-48-style {
        font-size: 2.2rem !important;
    }

    .bloc-1-subtitle {
        font-size: 1.5rem !important;
    }

    .container-div-27348-min-height {
        width: 30% !important;
    }

    .card66 {
        padding: 0px 20px 0px 20px !important;
    }



    .grid-26211-style {
        grid-template-columns: 1fr 1fr !important;
    }

    .h2-bloc-7-style2 {
        font-size: 35px !important;
        text-align: right !important;
    }

    .h2-73-style2 {
        font-size: 25px !important;
        line-height: 35px !important;
        text-align: right !important;
    }

    .grid-7350-style {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .grid-7350-style {
        min-height: 440px !important;
    }

    .container-div-8663-min-height {
        aspect-ratio: 4 / 5;
        height: auto !important;
    }

    .admire-banner {
        padding-left: 2%;
    }

    .container-div-43841-style {
        width: 38% !important;
    }

    .p-3-style {
        font-size: 20px !important;
    }

    .proc-scroller {
        padding: 4px 28px;
        gap: 18px;
    }

    .proc-dots button {
        width: 13px !important;
        height: 13px !important;
    }

    .modal-fullscreen-md-down {
        height: auto !important;
        width: auto !important;
    }

    .proc-card {
        min-width: 40%;
        max-width: 40%;
    }

    .proc-wrap .proc-nav {
        display: none;
    }

    .proc-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
    }

    .proc-dots button {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #D9DEE8;
        border: 0;
    }

    .proc-dots button.active {
        width: 11px;
        height: 11px;
        background: #002F6C;
    }

    .proc-scroller::-webkit-scrollbar {
        display: none;
    }

    .proc-scroller {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .admire-compare-wrapper {
        padding: 0;
    }

    /* Responsive: fit card body padding */
    .fit-card-body {
        padding: 20px 20px 22px;
    }

    /* Adapted for 1024px (iPad landscape) — show 2 cards per view and nicer spacing */
    .admire-fit-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Use horizontal scroller but size cards to show two per viewport */
    .admire-fit-section .fit-cards-wrapper {
        position: relative;
    }

    .admire-fit-section .fit-cards-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 48px;
        scroll-padding-right: 48px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        display: flex;
        gap: 20px;
        padding: 16px 36px;
        align-items: stretch;
    }

    .admire-fit-section .fit-cards-container::-webkit-scrollbar {
        display: none;
        height: 0;
        width: 0;
    }

    .admire-fit-section .fit-cards-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        margin: 0;
        padding: 0;
        width: 100%;
        justify-content: unset !important;
    }

    /* Two cards visible: each ~48% width to allow gap and some breathing room */
    .admire-fit-section .fit-card-col {
        flex: 0 0 48%;
        max-width: 48%;
        scroll-snap-align: center;
        display: block;
        box-sizing: border-box;
    }

    .admire-fit-section .fit-card {
        width: 100%;
    }

    /* Slightly taller media for better presentation on 1024 */
    .admire-fit-section .fit-card .fit-card-media img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        display: block;
    }

    /* Show navigation controls on larger tablet landscape */
    .admire-fit-section .fit-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        z-index: 30;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    }

    .admire-fit-section .fit-nav-prev {
        left: 12px;
    }

    .admire-fit-section .fit-nav-next {
        right: 12px;
    }

    /* Thinner visible scrollbar for precision if needed on desktop-like tablets */
    .admire-fit-section .fit-cards-container::-webkit-scrollbar {
        height: 6px;
    }

    .admire-fit-section .fit-cards-container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.12);
        border-radius: 8px;
    }

    .container-div-8663-min-height {
        aspect-ratio: 4 / 5;
        height: auto !important;
    }
}

/* iPad portrait and tablets (576px - 820px) */
@media (min-width: 768px) and (max-width: 834px) {

    /* Adapted from 394-440 block, tuned for iPad (768–834) */
    .text22 {
        font-size: 25px !important;
    }

    .h1-style p {
        font-size: 12px !important;
        line-height: 18px !important;
        margin-top: 5px;
        color: var(--swatch-var-2190) !important;
    }

    .h2-bloc-36-style {
        font-size: 36px !important;
        line-height: 46px !important;
    }

    .h2-bloc-7-style2 {
        font-size: 44px !important;
    }

    .h2-bloc-48-style {
        font-size: 2.4rem !important;
    }

    .h2-73-style2 {
        font-size: 22px !important;
        line-height: 32px !important;
    }

    .portfolio-customer {
        /* larger clamp for tablet */
        font-size: clamp(32px, 5.5vw, 70px);
        line-height: 1.05;
    }

    .portfolio-location {
        font-size: clamp(14px, 2.6vw, 28px);
        padding: 6px 14px;
        border-radius: 26px;
    }

    .h1-ล้านบาท-style {
        font-size: 24px !important;
    }

    .admire-banner {
        background: #F7F8FA;
        padding-left: 12px;
        padding-top: 18px;
    }

    .admire-banner .btn-banner {
        font-size: 16px !important;
        padding: 4px 0.85rem !important;
    }

    .admire-banner .manager {
        font-size: 1.15rem !important;
    }

    .img-banner {
        height: auto !important;
        width: 100% !important;
    }

    .container-div-8663-min-height {
        aspect-ratio: 4 / 5;
        height: auto !important;
    }

    .card66 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .activity-title h1 {
        font-size: 36px !important;
    }

    .bloc-1-subtitle {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    .promotion-text div,
    .promotion-text p {
        font-size: 1.05rem !important;
    }

    .promotion-text h1 *,
    .promotion-text h2 *,
    .promotion-text h3 *,
    .promotion-text h4 *,
    .promotion-text h5 *,
    .promotion-text h6 * {
        font-size: calc(100% / 0.85) !important;
        line-height: 1.25 !important;
    }

    .promotion-text ul * {
        font-size: 1.15rem !important;
    }

    .bloc-1-subtitle * {
        font-size: 16px !important;
        line-height: 1.5rem !important;
    }

    .bloc-1-detail * {
        font-size: 14px !important;
        line-height: 1.2rem !important;
    }

    .container-div-27348-min-height {
        width: 31% !important;
    }

    .h2-4-style {
        font-size: 22px !important;
        line-height: 32px !important;
    }

    .masonry-grid {
        column-gap: 8px !important;
    }

    .masonry-item {
        margin-bottom: 8px !important;
    }

    .team-name {
        font-size: 1.0rem !important;
    }

    .team-role {
        font-size: 0.9rem !important;
    }

    .btn-know-admire {
        font-size: 20px !important;
        padding: 10px 34px !important;
    }

    .proc-scroller {
        padding: 4px 28px;
        gap: 18px;
    }

    .proc-dots button {
        width: 13px !important;
        height: 13px !important;
    }

    .modal-fullscreen-md-down {
        height: auto !important;
        width: auto !important;
    }

    .proc-card {
        flex: 0 0 60%;
        min-width: 347px !important;
        max-width: 347px !important;
        border-radius: 12px;
    }

    .proc-wrap .proc-nav {
        display: none;
    }

    .proc-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
    }

    .proc-dots button {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #D9DEE8;
        border: 0;
    }

    .proc-dots button.active {
        width: 11px;
        height: 11px;
        background: #002F6C;
    }

    .proc-scroller::-webkit-scrollbar {
        display: none;
    }

    .proc-scroller {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .fit-card-title {
        font-size: 1.6rem !important;
    }

    .sub-title-waranty {
        font-size: 16px !important;
    }

    .bloc {
        padding: 0 !important;
    }



    .div-blog {
        margin: 0 !important;
    }

    /* Hero banner sizing for iPad */

    .booking-left {
        margin-right: 20px !important;
    }

    .storke2 {
        margin-top: 12px !important;
    }

    .topbar-maring {
        margin: 0 !important;
    }

    .admire-fit-section .fit-card-col {
        max-width: 60% !important;
    }

    .admire-banner .banner-title,
    .admire-banner .banner-sub {
        font-size: 30px !important;
    }

    .grid-7350-style {
        column-gap: 14px;
        grid-template-columns: 1fr 1fr;
    }

    .feature-title-desktop {
        font-size: 24px !important;
    }

    .feature-concept-desktop {
        font-size: 14px !important;
    }

    .feature-label-desktop {
        font-size: 14px !important;
    }

    .feature-value-desktop {
        font-size: 20px !important;
    }

    .icon-featured-home-desktop img {
        width: 18px !important;
        height: 18px !important;
    }

    .p-7-style {
        font-size: 14px !important;
    }

    .section-subtitle-style {
        font-size: 16px !important;
    }

    .card88 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .warranty-wrapper .warranty-section {
        width: 100%;
    }

    .warranty-wrapper .warranty-container .warranty-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    .warranty-wrapper .warranty-container .warranty-card {
        flex: 0 0 80%;
        min-width: 240px;
        scroll-snap-align: start;
    }

    /* hide default scrollbar if desired */
    .warranty-wrapper .warranty-container .warranty-grid::-webkit-scrollbar {
        height: 8px;
    }

    .contact-input,
    .contact-input::placeholder {
        font-size: 20px !important;
    }

    .img-activity {
        width: 100% !important;
    }

    .blogs-head-title {
        font-size: 45px;
        height: 105px;
        padding: 0px 20px 0px 20px;
    }

    .btn-type-blogs {
        height: 50px;
        font-size: 20px;
    }

    .list-type-blogs {
        padding: 20px 0px 20px 0px;
    }

}

/* Desktop: 737px and above */
@media (min-width: 737px) {
    .hero-content .btn-hero {
        padding: 12px 24px !important;
    }
}

/* Tablet range (576px - 736px) */
@media (min-width: 576px) and (max-width: 736px) {
    .hero-content h1 {
        font-size: clamp(28px, 5.5vw, 50px) !important;
    }

    .hero-content .hero-text {
        font-size: clamp(16px, 3.2vw, 26px) !important;
    }

    .hero-content .btn-hero {
        font-size: clamp(14px, 2.8vw, 18px) !important;
        padding: 10px 20px !important;
    }
}


/* =========================================
   TABLET & MOBILE (max-width ≤ 991.98px)
   ========================================= */

/* Tablet & Mobile: up to 991.98px */
@media (max-width: 991.98px) {

    /* Nav & portfolio sizing */
    .nav-center-group {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .portfolio-customer {
        font-size: clamp(28px, 6.8vw, 60px);
    }

    .portfolio-location {
        font-size: clamp(13px, 3.0vw, 26px);
        padding: 6px 14px;
        border-radius: 26px;
    }

    /* Mobile: ให้กว้างเต็มจอเล็กลงและมี padding */
    .youtube-review-section {
        width: 90%;
    }

    /* RESPONSIVE: จอเล็กแถวลงแทน */
    .admire-compare-wrapper {
        padding: 0 12px;
    }

    /* Responsive: fit card body padding */
    .fit-card-body {
        padding: 20px 20px 22px;
    }

    /* Mobile: ระบบเลื่อนซ้าย-ขวา (admire-fit-section slider) */
    .admire-fit-section {
        padding-left: 0;
        padding-right: 0;
    }

    .admire-fit-section .fit-cards-wrapper {
        position: relative;
    }

    .admire-fit-section .fit-cards-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 48px;
        scroll-padding-right: 48px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .admire-fit-section .fit-cards-container::-webkit-scrollbar {
        display: none;
        height: 0;
        width: 0;
    }

    .admire-fit-section .fit-cards-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        margin: 0;
        padding: 0;
    }

    .admire-fit-section .fit-card-col {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        display: block;
    }

    .admire-fit-section .fit-card {
        width: 100%;
    }

    .admire-fit-section .fit-card .fit-card-media img {
        width: 100%;
        height: auto;
        display: block;
    }

    .admire-fit-section .fit-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 35%;
        transform: translateY(-50%);
        width: 35px;
        height: 35px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        z-index: 30;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

    .admire-fit-section .fit-nav-prev {
        left: 8px;
    }

    .admire-fit-section .fit-nav-next {
        right: 8px;
    }

    .admire-fit-section .fit-cards-container::-webkit-scrollbar {
        height: 6px;
    }

    .admire-fit-section .fit-cards-container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.12);
        border-radius: 8px;
    }



    /* Mobile: ให้กว้างเต็มจอเล็กลงและมี padding */
    .youtube-review-section {
        width: 90%;
    }
}


/* =========================================
   SMALL DEVICES (max-width ≤ 767.98px)
   ========================================= */

/* Small devices: up to 767.98px */
@media (max-width: 767.98px) {

    /* Contact CTA: compact padding & text size */
    .contact-cta-panel {
        padding: 24px 18px 22px;
    }


    .contact-cta-title {
        font-size: 22px;
    }

    .contact-cta-sub {
        font-size: 13px;
    }

    /* Admire compare: stack columns on small screens */
    .admire-compare-columns {
        flex-direction: column;
    }

    .ac-col-label,
    .ac-col-brand,
    .ac-col-other {
        flex: 1 1 auto;
    }
}

/* TEAM nav on small screens */
@media (max-width: 768px) {
    .team-nav {
        display: none;
    }

    .team-scroll-wrapper {
        padding-block: 2rem;
        margin-block: -2rem;
    }
}

/* Mobile: ให้ masonry grid 2 column, etc. */
@media (max-width:576px) {
    .proc-scroller {
        gap: 16px;
        padding: 4px 44px;
    }

    .proc-card {
        flex-basis: 260px;
    }
}


/* 394px – 440px (compact phones) */
@media (min-width:394px) and (max-width:440px) {

    /* Custom VMV for Large Mobile */
    .vmv-hero-title {
        font-size: 50px;
        margin-bottom: 0;
    }

    .vmv-hero-subtitle {
        font-size: 22px;
    }

    .vmv-vision-title {
        font-size: 26px;
        line-height: 1.4;
        margin-bottom: 30px;
    }

    .vmv-section-label,
    .vmv-section-label-en {
        font-size: 22px;
    }

    .vmv-blue-box {
        padding: 22px;
    }

    .vmv-blue-header h3 {
        font-size: 24px;
    }

    .vmv-blue-content p {
        font-size: 20px;
        text-indent: 40px;
    }

    .vmv-list li {
        font-size: 16px;
        padding-left: 24px;
    }

    .vmv-list li::before {
        font-size: 22px;
    }

    .p-3-style {
        font-size: 20px !important;
    }

    .brand {
        margin-left: 120px !important;
    }

    .topbar-maring {
        margin: 0 !important;
    }

    .h2-bloc-7-style2 {
        font-size: 34px !important;
    }

    .h2-bloc-48-style {
        font-size: 2.1rem !important;
    }

    .h2-73-style2 {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    .portfolio-customer {
        font-size: clamp(26px, 7.2vw, 56px);
        line-height: 1.05;
    }

    .portfolio-location {
        font-size: clamp(13px, 3.6vw, 20px);
        padding: 6px 12px;
        border-radius: 20px;
    }

    .btn-promotion,
    .btn-line-style,
    .btn-tel-style {
        font-size: 16px !important;
        padding: 4px 18px !important;
        min-height: 38px !important;
    }

    .h1-ล้านบาท-style {
        font-size: 20px !important;
    }

    .admire-banner {
        background: #F7F8FA;
        padding-left: 12px;
        padding-top: 16px;
    }

    .admire-banner .btn-banner {
        font-size: 15px !important;
        padding: 4px 0.85rem !important;
    }

    .admire-banner .manager {
        font-size: 20px !important;
    }

    .img-banner {
        height: 270px !important;
        max-width: fit-content !important;
    }

    .container-div-8663-min-height {
        aspect-ratio: 4 / 5;
        height: auto !important;
    }

    .card66 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .activity-title h1 {
        font-size: 34px !important;
    }

    .bloc-1-subtitle {
        font-size: 15px !important;
        line-height: 23px !important;
    }

    .promotion-text div,
    .promotion-text p {
        font-size: 1rem !important;
        text-align: center !important;
    }

    .promotion-text h1 *,
    .promotion-text h2 *,
    .promotion-text h3 *,
    .promotion-text h4 *,
    .promotion-text h5 *,
    .promotion-text h6 * {
        font-size: calc(100% / 0.8) !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .promotion-text h1 {
        text-align: center !important;
    }

    .promotion-text ul * {
        margin: 0 auto !important;
        text-align: left !important;
        font-size: 1rem !important;
    }

    .bloc-1-subtitle * {
        font-size: 14px !important;
        line-height: 1.5rem !important;
    }

    .bloc-1-detail * {
        font-size: 13px !important;
        line-height: 1.2rem !important;
    }

    .container-div-27348-min-height {
        width: 64% !important;
    }

    .h2-4-style {
        font-size: 14px;
        font-weight: bold;
        font-family: 'FCIconic-Bold';
        line-height: 20px;
    }

    .bloc-1-detail {
        font-size: 13px !important;
    }

    .masonry-grid {
        column-gap: 6px !important;
    }

    .masonry-item {
        margin-bottom: 6px !important;
    }

    .team-card {
        height: 15rem !important;
    }

    .team-name {
        font-size: 0.9rem !important;
    }

    .team-role {
        font-size: 0.8rem !important;
    }

    .btn-know-admire {
        font-size: 18px !important;
        padding: 8px 30px !important;
    }

    .proc-scroller {
        padding: 0px 12px !important;
    }

    .proc-dots button {
        width: 13px !important;
        height: 13px !important;
    }

    .modal-fullscreen-md-down {
        height: auto !important;
        width: auto !important;
    }

    .proc-scroller {
        gap: 16px;
        padding: 4px 20px;
    }

    .proc-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        border-radius: 12px;
    }

    .proc-title {
        font-size: 24px !important;
    }

    .proc-desc * {
        font-size: 16px !important;
    }

    .proc-meta {
        font-size: 16px !important;
    }

    .proc-wrap .proc-nav {
        display: none;
    }

    .proc-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
    }

    .proc-dots button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #D9DEE8;
        border: 0;
    }

    .proc-dots button.active {
        width: 10px;
        height: 10px;
        background: #002F6C;
    }

    .proc-scroller::-webkit-scrollbar {
        display: none;
    }

    .proc-scroller {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .fit-card-title {
        font-size: 1.4rem !important;
    }

    .sub-title-waranty {
        font-size: 16px !important;
    }

    .bloc {
        padding: 0 !important;
    }



    .div-blog {
        margin: 0 !important;
    }



    .hero-content h1 {
        font-size: calc(var(--hero-title-size) / 1.6) !important;
    }

    .hero-content .hero-text {
        font-size: calc(var(--hero-text-size) / 1.6) !important;
        line-height: 1.35 !important;
    }

    .hero-content .btn-hero {
        font-size: calc(var(--hero-btn-text-size) / 1.6) !important;
        padding: 6px 14px !important;
    }

    .booking-left {
        margin-right: 0 !important;
    }

    .storke2 {
        margin-top: 10px !important;
    }

    .blocs-horizontal-scroll-area {
        justify-content: start !important;
    }

    .h2-bloc-36-style {
        font-size: 32px !important;
        line-height: 42px !important;
    }

    .field-style {
        width: 100% !important;
    }

    .feature-title-desktop {
        font-size: 24px !important;
    }

    .feature-concept-desktop {
        font-size: 14px !important;
    }

    .feature-label-desktop {
        font-size: 14px !important;
    }

    .feature-value-desktop {
        font-size: 20px !important;
    }

    .feature-price-desktop {
        font-size: 50px !important;
    }

    .h1-ล้านบาท-style {
        font-size: 24px !important;
    }

    .p-7-style {
        font-size: 14px !important;
    }

    .icon-featured-home-desktop img {
        width: 14px !important;
        height: 14px !important;
    }

    .section-subtitle-style {
        font-size: 14px !important;
        line-height: 24px !important;
    }

    .btn-home-all,
    .btn-port-all,
    .btn-blog-all,
    .btn-activity-all {
        font-size: 16px !important;
    }

    .container-div-bloc-2-min-height {
        margin-bottom: 30px !important;
    }

    .img-ceo {
        margin-left: 0 !important;
        position: absolute;
        bottom: -100px;
    }

    .bg-ceo {
        position: absolute;
        right: -270px;
        bottom: -110px;
        z-index: 0;
        height: auto;
    }

    .right-bloc-ceo {
        height: 200px !important;
    }

    .contact-input,
    .contact-input::placeholder {
        font-size: 16px !important;
    }

    .btn-contact-submit {
        font-size: 16px !important;
    }

    .contact-cta-title {
        font-size: 36px !important;
    }

    .contact-cta-sub {
        font-size: 20px !important;
    }

    .img-activity {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .activity-title h1 {
        font-size: 32px !important;
        text-align: center !important;
    }

    .activity-title p {
        font-size: 12px !important;
        text-align: center !important;
    }

    .warranty-wrapper {
        position: relative;
    }

    .warranty-wrapper .warranty-section {
        width: 100%;
        overflow: hidden;
    }

    .warranty-wrapper .warranty-container .warranty-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 0;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .warranty-wrapper .warranty-container .warranty-grid::-webkit-scrollbar {
        display: none;
    }

    .warranty-wrapper .warranty-container .warranty-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        scroll-snap-align: center;
    }

    .warranty-wrapper .warranty-container .warranty-card .warranty-img-wrapper {
        height: auto;
        height: 430px;
        aspect-ratio: unset;
    }

    .warranty-wrapper .warranty-container .warranty-card .warranty-img-wrapper img {
        width: 100%;
        height: 100%;
    }

    .warranty-nav {
        display: flex;
    }

    .warranty-footer p {
        font-size: 14px !important;
    }

    /* Button */
    .warranty-btn {
        display: inline-block;
        padding: 10px 35px;
        background-color: #002F6C;
        color: #fff !important;
        text-decoration: none;
        border-radius: 30px;
        transition: background-color 0.3s ease;
        font-size: 24px;
        font-weight: bold;
        font-family: 'FCIconic-Bold';
        max-height: 55px;
    }

    /* Warranty Navigation Buttons */
    .warranty-nav {
        position: absolute;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: #fff;
        border: 1px solid #E2E6EE;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        flex-shrink: 0;
        z-index: 10;
        transition: all 0.2s ease;
    }

    .warranty-nav:hover {
        background: #f8f9fa;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .warranty-nav-prev {
        left: 10px;
        top: 30%;
        transform: translateY(-50%);
    }

    .warranty-nav-next {
        right: 10px;
        top: 30%;
        transform: translateY(-50%);
    }

    .blogs-head-title {
        font-size: 32px;
        height: 62px;
        padding: 0px 20px 0px 20px;
    }

    .btn-type-blogs {
        font-size: 16px;
        height: 33px;
        text-align: center;
        width: 100%;
    }

    .list-type-blogs {
        padding: 5px 0px 30px 0px;
    }

    .img-bloc-2-31105-style {
        min-height: 242px !important;
    }
}


/* ----------------------------------------
   Small Mobile (360px - 393px)
   ---------------------------------------- */

@media (min-width: 360px) and (max-width: 393px) {

    /* Custom VMV for Medium Mobile */
    .vmv-hero-title {
        font-size: 45px;
        margin-bottom: 0;
    }

    .vmv-hero-subtitle {
        font-size: 20px;
    }

    .vmv-vision-title {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 25px;
    }

    .vmv-section-label,
    .vmv-section-label-en {
        font-size: 20px;
    }

    .vmv-blue-box {
        padding: 18px;
    }

    .vmv-blue-header h3 {
        font-size: 22px;
    }

    .vmv-blue-content p {
        font-size: 19px;
        text-indent: 35px;
    }

    .vmv-list li {
        font-size: 15px;
        padding-left: 22px;
    }

    .vmv-list li::before {
        font-size: 20px;
    }

    .p-3-style {
        font-size: 18px !important;
    }

    .brand {
        margin-left: 100px !important;
    }

    .topbar-maring {
        margin: 0 !important;
    }

    .h2-bloc-7-style2 {
        font-size: 30px !important;
    }

    .h2-bloc-48-style {
        font-size: 2rem !important;
    }

    .h2-73-style2 {
        font-size: 16px !important;
        line-height: 26px !important;
    }

    .portfolio-customer {
        font-size: clamp(22px, 6.8vw, 50px);
        line-height: 1.05;
    }

    .portfolio-location {
        font-size: clamp(11px, 3.4vw, 18px);
        padding: 5px 10px;
        border-radius: 18px;
    }

    .btn-promotion,
    .btn-line-style,
    .btn-tel-style {
        font-size: 15px !important;
        padding: 4px 16px !important;
        min-height: 36px !important;
    }

    .h1-ล้านบาท-style {
        font-size: 20px !important;
    }

    .admire-banner {
        background: #F7F8FA;
        padding-left: 10px;
        padding-top: 18px;
    }

    .admire-banner .btn-banner {
        font-size: 14px !important;
        padding: 1px 0.85rem !important;
    }

    .admire-banner .manager {
        font-size: 18px !important;
    }

    .img-banner {
        height: 240px !important;
        max-width: fit-content !important;
    }

    .container-div-8663-min-height {
        aspect-ratio: 4 / 5;
        height: auto !important;
    }

    .card66 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .activity-title h1 {
        font-size: 30px !important;
        text-align: center !important;
    }

    .activity-title p {
        font-size: 11px !important;
        text-align: center !important;
    }

    .bloc-1-subtitle {
        font-size: 14px !important;
        line-height: 22px !important;
    }



    .promotion-text div,
    .promotion-text p {
        font-size: 0.95rem !important;
        text-align: center !important;
    }

    .promotion-text h1 *,
    .promotion-text h2 *,
    .promotion-text h3 *,
    .promotion-text h4 *,
    .promotion-text h5 *,
    .promotion-text h6 * {
        font-size: calc(100% / 0.8) !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .promotion-text h1 {
        text-align: center !important;
    }

    .promotion-text ul * {
        margin: 0 auto !important;
        text-align: left !important;
        font-size: 0.95rem !important;
    }

    .bloc-1-subtitle * {
        font-size: 13px !important;
        line-height: 1.4rem !important;
    }

    .bloc-1-detail * {
        font-size: 12px !important;
        line-height: 1.15rem !important;
    }

    .container-div-27348-min-height {
        width: 80% !important;
    }

    .h2-4-style {
        font-size: 13px;
        font-weight: bold;
        font-family: 'FCIconic-Bold';
        line-height: 18px;
    }

    .bloc-1-detail {
        font-size: 12px !important;
    }

    .masonry-grid {
        column-gap: 5px !important;
    }

    .masonry-item {
        margin-bottom: 5px !important;
    }

    .team-card {
        height: 14rem !important;
    }

    .team-name {
        font-size: 0.8rem !important;
    }

    .team-role {
        font-size: 0.7rem !important;
    }

    .btn-know-admire {
        font-size: 16px !important;
        padding: 7px 26px !important;
    }

    .proc-scroller {
        gap: 14px;
        padding: 4px 18px !important;
    }

    .proc-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        border-radius: 12px;
    }

    .proc-title {
        font-size: 22px !important;
    }

    .proc-desc * {
        font-size: 14px !important;
    }

    .proc-meta {
        font-size: 14px !important;
    }

    .proc-wrap .proc-nav {
        display: none;
    }

    .proc-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
    }

    .proc-dots button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #D9DEE8;
        border: 0;
    }

    .proc-dots button.active {
        width: 12px;
        height: 12px;
        background: #002F6C;
    }

    .proc-scroller::-webkit-scrollbar {
        display: none;
    }

    .proc-scroller {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .modal-fullscreen-md-down {
        height: auto !important;
        width: auto !important;
    }

    .fit-card-title {
        font-size: 1.3rem !important;
    }

    .sub-title-waranty {
        font-size: 13px !important;
    }

    .bloc {
        padding: 0 !important;
    }

    .div-blog {
        margin: 0 !important;
    }

    .hero-content h1 {
        font-size: calc(var(--hero-title-size) / 1.8) !important;
    }

    .hero-content .hero-text {
        font-size: calc(var(--hero-text-size) / 1.8) !important;
        line-height: 1.35 !important;
    }

    .hero-content .btn-hero {
        font-size: calc(var(--hero-btn-text-size) / 1.8) !important;
        padding: 6px 14px !important;
    }

    .booking-left {
        margin-right: 0 !important;
    }

    .storke2 {
        margin-top: 10px !important;
    }

    .blocs-horizontal-scroll-area {
        justify-content: start !important;
    }

    .h2-bloc-36-style {
        font-size: 28px !important;
        line-height: 38px !important;
    }

    .field-style {
        width: 100% !important;
    }

    .feature-title-desktop {
        font-size: 22px !important;
    }

    .feature-concept-desktop {
        font-size: 13px !important;
        min-height: 60px !important;
    }

    .feature-label-desktop {
        font-size: 13px !important;
    }

    .feature-value-desktop {
        font-size: 18px !important;
    }

    .feature-price-desktop {
        font-size: 44px !important;
    }

    .p-7-style {
        font-size: 13px !important;
    }

    .icon-featured-home-desktop img {
        width: 12px !important;
        height: 12px !important;
    }

    .section-subtitle-style {
        font-size: 13px !important;
        line-height: 22px !important;
    }

    .btn-home-all,
    .btn-port-all,
    .btn-blog-all,
    .btn-activity-all {
        font-size: 14px !important;
    }

    .container-div-bloc-2-min-height {
        margin-bottom: 18px !important;
    }

    .img-ceo {
        margin-left: 0 !important;
        position: absolute;
        bottom: -90px;
    }

    .bg-ceo {
        position: absolute;
        right: -250px;
        bottom: -97px;
        z-index: 0;
        height: auto;
    }

    .right-bloc-ceo {
        height: 180px !important;
    }

    .contact-input,
    .contact-input::placeholder {
        font-size: 15px !important;
    }

    .btn-contact-submit {
        font-size: 15px !important;
    }

    .contact-cta-title {
        font-size: 32px !important;
    }

    .contact-cta-sub {
        font-size: 18px !important;
    }

    .img-activity {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .home-card-price {
        font-size: 48px !important;
    }

    .warranty-wrapper {
        position: relative;
    }

    .warranty-wrapper .warranty-section {
        width: 100%;
        overflow: hidden;
    }

    .warranty-wrapper .warranty-container .warranty-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 0;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .warranty-wrapper .warranty-container .warranty-grid::-webkit-scrollbar {
        display: none;
    }

    .warranty-wrapper .warranty-container .warranty-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        scroll-snap-align: center;
    }

    .warranty-wrapper .warranty-container .warranty-card .warranty-img-wrapper {
        height: auto;
        height: 430px;
        aspect-ratio: unset;
    }

    .warranty-wrapper .warranty-container .warranty-card .warranty-img-wrapper img {
        width: 100%;
        height: 100%;
    }

    .warranty-nav {
        display: flex;
    }

    .warranty-footer p {
        font-size: 13px !important;
    }

    /* Button */
    .warranty-btn {
        display: inline-block;
        padding: 10px 35px;
        background-color: #002F6C;
        color: #fff !important;
        text-decoration: none;
        border-radius: 30px;
        transition: background-color 0.3s ease;
        font-size: 20px;
        font-weight: bold;
        font-family: 'FCIconic-Bold';
        max-height: 50px;
    }

    /* Warranty Navigation Buttons */
    .warranty-nav {
        position: absolute;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: #fff;
        border: 1px solid #E2E6EE;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        flex-shrink: 0;
        z-index: 10;
        transition: all 0.2s ease;
    }

    .warranty-nav:hover {
        background: #f8f9fa;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .warranty-nav-prev {
        left: 8px;
        top: 30%;
        transform: translateY(-50%);
    }

    .warranty-nav-next {
        right: 8px;
        top: 30%;
        transform: translateY(-50%);
    }

    .blogs-head-title {
        font-size: 32px;
        height: 62px;
        padding: 0px 20px 0px 20px;
    }

    .btn-type-blogs {
        font-size: 16px;
        height: 33px;
        text-align: center;
        width: 100%;
    }

    .list-type-blogs {
        padding: 5px 0px 30px 0px;
    }

    .img-bloc-2-31105-style {
        min-height: 242px !important;
    }
}


/* ----------------------------------------
   Extra Small Mobile (< 359px)
   Older/compact devices
   ---------------------------------------- */

@media (max-width: 359px) {

    /* Custom VMV for Small Mobile */
    .vmv-hero-title {
        font-size: 38px;
        margin-bottom: 0;
    }

    .vmv-hero-subtitle {
        font-size: 18px;
    }

    .vmv-vision-title {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .vmv-section-label,
    .vmv-section-label-en {
        font-size: 16px;
    }

    .vmv-blue-box {
        padding: 15px;
    }

    .vmv-blue-header h3 {
        font-size: 18px;
    }

    .vmv-blue-content p {
        font-size: 17px;
        text-indent: 30px;
    }

    .vmv-list li {
        font-size: 14px;
        padding-left: 20px;
    }

    .vmv-list li::before {
        font-size: 18px;
    }

    .p-3-style {
        font-size: 18px !important;
    }

    .brand {
        margin-left: 80px !important;
    }

    .topbar-maring {
        margin: 0 !important;
    }

    .h2-bloc-7-style2 {
        font-size: 26px !important;
    }

    .h2-bloc-48-style {
        font-size: 1.8rem !important;
    }

    .h2-73-style2 {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    .portfolio-customer {
        font-size: clamp(20px, 6.5vw, 44px);
        line-height: 1.05;
    }

    .portfolio-location {
        font-size: clamp(10px, 3.2vw, 16px);
        padding: 4px 8px !important;
        border-radius: 16px !important;
    }

    .btn-promotion,
    .btn-line-style,
    .btn-tel-style {
        font-size: 13px !important;
        padding: 3px 12px !important;
        min-height: 34px !important;
    }

    .h1-ล้านบาท-style {
        font-size: 18px !important;
    }

    .admire-banner {
        background: #F7F8FA;
        padding-left: 8px;
        padding-top: 12px;
    }

    .admire-banner .btn-banner {
        font-size: 13px !important;
        padding: 0.25rem 0.5rem !important;
    }

    .admire-banner .manager {
        font-size: 16px !important;
    }

    .img-banner {
        height: 200px !important;
        max-width: fit-content !important;
    }

    .container-div-8663-min-height {
        aspect-ratio: 4 / 5;
        height: auto !important;
    }

    .card66 {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .activity-title h1 {
        font-size: 26px !important;
        text-align: center !important;
    }

    .activity-title p {
        font-size: 10px !important;
        text-align: center !important;
    }

    .bloc-1-subtitle {
        font-size: 13px !important;
        line-height: 20px !important;
    }

    .promotion-text div,
    .promotion-text p {
        font-size: 0.9rem !important;
        text-align: center !important;
    }

    .promotion-text h1 *,
    .promotion-text h2 *,
    .promotion-text h3 *,
    .promotion-text h4 *,
    .promotion-text h5 *,
    .promotion-text h6 * {
        font-size: calc(100% / 0.85) !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .promotion-text ul * {
        margin: 0 auto !important;
        text-align: left !important;
        font-size: 0.9rem !important;
    }

    .bloc-1-subtitle * {
        font-size: 12px !important;
        line-height: 1.3rem !important;
    }

    .bloc-1-detail * {
        font-size: 11px !important;
        line-height: 1.1rem !important;
    }

    .container-div-27348-min-height {
        width: 90% !important;
    }

    .h2-4-style {
        font-size: 12px;
        font-weight: bold;
        font-family: 'FCIconic-Bold';
        line-height: 16px;
    }

    .bloc-1-detail {
        font-size: 11px !important;
    }

    .masonry-grid {
        column-gap: 4px !important;
    }

    .masonry-item {
        margin-bottom: 4px !important;
    }

    .team-card {
        height: 12rem !important;
    }

    .team-name {
        font-size: 0.72rem !important;
    }

    .team-role {
        font-size: 0.62rem !important;
    }

    .btn-know-admire {
        font-size: 14px !important;
        padding: 6px 20px !important;
    }

    .proc-scroller {
        gap: 12px;
        padding: 4px 14px !important;
    }

    .proc-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        border-radius: 10px;
    }

    .proc-title {
        font-size: 20px !important;
    }

    .proc-desc * {
        font-size: 13px !important;
    }

    .proc-meta {
        font-size: 13px !important;
    }

    .proc-wrap .proc-nav {
        display: none;
    }

    .proc-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 10px;
    }

    .proc-dots button {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #D9DEE8;
        border: 0;
    }

    .proc-dots button.active {
        width: 9px;
        height: 9px;
        background: #002F6C;
    }

    .proc-scroller::-webkit-scrollbar {
        display: none;
    }

    .proc-scroller {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .modal-fullscreen-md-down {
        height: auto !important;
        width: auto !important;
    }

    .fit-card-title {
        font-size: 1.15rem !important;
    }

    .sub-title-waranty {
        font-size: 12px !important;
    }

    .bloc {
        padding: 0 !important;
    }

    .div-blog {
        margin: 0 !important;
    }

    .hero-content h1 {
        font-size: calc(var(--hero-title-size) / 2.2) !important;
    }

    .hero-content .hero-text {
        font-size: calc(var(--hero-text-size) / 2.2) !important;
        line-height: 1.3 !important;
    }

    .hero-content .btn-hero {
        font-size: calc(var(--hero-btn-text-size) / 2.2) !important;
        padding: 5px 12px !important;
        margin-top: 6px !important;
    }

    .booking-left {
        margin-right: 0 !important;
    }

    .storke2 {
        margin-top: 8px !important;
    }

    .blocs-horizontal-scroll-area {
        justify-content: start !important;
    }

    .h2-bloc-36-style {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    .field-style {
        width: 100% !important;
    }

    .feature-title-desktop {
        font-size: 20px !important;
    }

    .feature-concept-desktop {
        font-size: 12px !important;
    }

    .feature-label-desktop {
        font-size: 12px !important;
    }

    .feature-value-desktop {
        font-size: 16px !important;
    }

    .feature-price-desktop {
        font-size: 40px !important;
    }

    .p-7-style {
        font-size: 12px !important;
    }

    .icon-featured-home-desktop img {
        width: 11px !important;
        height: 11px !important;
    }

    .section-subtitle-style {
        font-size: 12px !important;
        line-height: 20px !important;
    }

    .btn-home-all,
    .btn-port-all,
    .btn-blog-all,
    .btn-activity-all {
        font-size: 13px !important;
    }

    .container-div-bloc-2-min-height {
        margin-bottom: 16px !important;
    }

    .img-ceo {
        margin-left: 0 !important;
        position: absolute;
        bottom: -80px;
    }

    .bg-ceo {
        position: absolute;
        right: -230px;
        bottom: -210px;
        z-index: 0;
        height: auto;
    }

    .right-bloc-ceo {
        height: 160px !important;
    }

    .contact-input,
    .contact-input::placeholder {
        font-size: 14px !important;
    }

    .btn-contact-submit {
        font-size: 14px !important;
    }

    .contact-cta-title {
        font-size: 28px !important;
    }

    .contact-cta-sub {
        font-size: 16px !important;
    }

    .img-activity {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .warranty-wrapper {
        position: relative;
    }

    .warranty-wrapper .warranty-section {
        width: 100%;
        overflow: hidden;
    }

    .warranty-wrapper .warranty-container .warranty-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 0;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .warranty-wrapper .warranty-container .warranty-grid::-webkit-scrollbar {
        display: none;
    }

    .warranty-wrapper .warranty-container .warranty-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        scroll-snap-align: center;
    }

    .warranty-wrapper .warranty-container .warranty-card .warranty-img-wrapper {
        height: auto;
        height: 430px;
        aspect-ratio: unset;
    }

    .warranty-wrapper .warranty-container .warranty-card .warranty-img-wrapper img {
        width: 100%;
        height: 100%;
    }

    .warranty-nav {
        display: flex;
    }

    .warranty-footer p {
        font-size: 12px !important;
    }

    /* Button */
    .warranty-btn {
        display: inline-block;
        padding: 8px 28px;
        background-color: #002F6C;
        color: #fff !important;
        text-decoration: none;
        border-radius: 30px;
        transition: background-color 0.3s ease;
        font-size: 18px;
        font-weight: bold;
        font-family: 'FCIconic-Bold';
        max-height: 45px;
    }

    /* Warranty Navigation Buttons */
    .warranty-nav {
        position: absolute;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: #fff;
        border: 1px solid #E2E6EE;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        flex-shrink: 0;
        z-index: 10;
        transition: all 0.2s ease;
    }

    .warranty-nav:hover {
        background: #f8f9fa;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .warranty-nav-prev {
        left: 6px;
        top: 30%;
        transform: translateY(-50%);
    }

    .warranty-nav-next {
        right: 6px;
        top: 30%;
        transform: translateY(-50%);
    }

    .blogs-head-title {
        font-size: 32px;
        height: 62px;
        padding: 0px 20px 0px 20px;
    }

    .btn-type-blogs {
        font-size: 16px;
        height: 33px;
        text-align: center;
        width: 100%;
    }

    .list-type-blogs {
        padding: 5px 0px 30px 0px;
    }

    .img-bloc-2-31105-style {
        min-height: 242px !important;
    }
}

/* ============================================================
   SHARED SCROLLER NAVIGATION (Mobile Only)
   Standardizing 5 Steps and Warranty sections
   ============================================================ */
@media (max-width: 991.98px) {

    .proc-nav,
    .warranty-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 35% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        background: #fff !important;
        border: 1px solid #E2E6EE !important;
        border-radius: 50% !important;
        z-index: 30 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
    }

    /* 5 Steps section: show only when overflow */
    .proc-nav {
        display: none !important;
    }

    #procWrap.overflow-on .proc-nav {
        display: flex !important;
    }

    .proc-prev,
    .warranty-nav-prev {
        left: 8px !important;
    }

    .proc-next,
    .warranty-nav-next {
        right: 8px !important;
    }

    /* Ensure icons are centered */
    .proc-nav svg,
    .warranty-nav svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (min-width: 992px) {

    .proc-nav,
    .warranty-nav {
        display: none !important;
    }
}

/* Card Type Home Hover Effects */
.type-home-card {
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display: block;
}

.type-home-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    transition: transform 0.3s ease;
}

.type-home-card:hover .type-home-bg {
    transform: scale(1.05);
}

.type-home-content {
    position: relative;
    z-index: 1;
}

/* Featured Home Hover Effects */
.featured-home-card {
    text-decoration: none !important;
    cursor: pointer;
    display: block;
    color: inherit !important;
}

.featured-home-img-wrapper {
    overflow: hidden;
    position: relative;
}

.featured-home-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    transition: transform 0.3s ease;
    z-index: 0;
}

.featured-home-card:hover .featured-home-bg {
    transform: scale(1.05);
}

.featured-home-overlay-content {
    position: relative;
    z-index: 1;
}

/* ============================
   ABOUT US: VISION, MISSION & VALUES SECTION
   ============================ */

.about-vmv-section {
    padding-bottom: 60px;
}

/* Hero Banner */
.vmv-hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 50px;
}

.vmv-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


.vmv-hero-content {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    width: 100%;
}

.vmv-hero-title {
    font-family: 'FCIconic-Bold', sans-serif;
    font-size: 120px;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    line-height: 80px;
}

.vmv-hero-subtitle {
    font-family: 'FCIconic-Regular', sans-serif;
    font-size: 46px;
    color: #fff !important;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Section Labels */
.vmv-section-label {
    font-family: 'FCIconic-Regular', sans-serif;
    font-size: 32px;
    color: #888;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.vmv-section-label-en {
    font-family: 'FCIconic-Bold', sans-serif;
    font-size: 32px;
    color: #002F6C;
    margin-bottom: 0;
    font-weight: bold;
}

/* Vision Section */
.vmv-vision-section {
    padding: 30px 0 50px;
}

.vmv-vision-title {
    font-family: 'FCIconic-Regular', sans-serif;
    font-size: 48px;
    color: #002F6C;
    line-height: 1.6;
    margin-bottom: 50px;
}

/* House Image */
.vmv-house-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0;
    min-height: 570px;
}

.vmv-house-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(100%);
}

/* Blue Box */
.vmv-blue-box {
    background: linear-gradient(135deg, #003366 0%, #004080 100%);
    padding: 35px;
    min-height: 570px;
    display: flex;
    flex-direction: column;
    position: relative;
    color: #fff;
    aspect-ratio: 1 / 1;
}

.vmv-blue-header {
    margin-bottom: 20px;
}

.vmv-blue-header h3 {
    font-family: 'FCIconic-Light', sans-serif;
    font-size: 32px;
    color: #fff !important;
    margin-bottom: 8px;
}

.vmv-blue-header p {
    font-family: 'FCIconic-Regular', sans-serif;
    font-size: 24px;
    color: #fff !important;
    margin: 0;
}

.vmv-blue-header img {
    max-width: 200px;
    height: auto;
    display: block;
}

.vmv-blue-content {
    flex: 1;
}

.vmv-blue-content p {
    font-family: 'FCIconic-Light', sans-serif;
    font-size: 24px;
    line-height: 1.7;
    color: #fff !important;
    margin-bottom: 14px;
    text-align: left;
}

.vmv-blue-content .first {
    text-indent: 50px;
}

.vmv-blue-content b {
    font-weight: bold;
    font-family: 'FCIconic-Bold';
}

.vmv-blue-content p:last-child {
    margin-bottom: 0;
}

.vmv-blue-logo {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20px;

}

.vmv-blue-logo img {
    max-width: 120px;
    height: auto;
}

/* Mission & Values Boxes */
.vmv-mission-box,
.vmv-values-box {
    padding: 35px 25px;
    height: 100%;
}

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

.vmv-list li {
    font-family: 'FCIconic-Regular', sans-serif;
    font-size: 25px;
    color: #002F6C;
    line-height: 1.5;
    padding-left: 35px;
    margin-bottom: 10px;
    position: relative;
}

.vmv-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: #002F6C;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
}

.vmv-list li:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 1400px) {
    .vmv-hero-title {
        font-size: 100px;
    }

    .vmv-hero-subtitle {
        font-size: 38px;
    }

    .vmv-vision-title {
        font-size: 42px;
    }

    .vmv-section-label,
    .vmv-section-label-en {
        font-size: 28px;
    }

    .vmv-list li {
        font-size: 22px;
        padding-left: 32px;
    }

    .vmv-list li::before {
        font-size: 26px;
    }
}

@media (max-width: 1200px) {
    .vmv-hero-title {
        font-size: 80px;
    }

    .vmv-hero-subtitle {
        font-size: 32px;
    }

    .vmv-vision-title {
        font-size: 36px;
    }

    .vmv-section-label,
    .vmv-section-label-en {
        font-size: 24px;
    }

    .vmv-list li {
        font-size: 20px;
        padding-left: 28px;
    }

    .vmv-list li::before {
        font-size: 24px;
    }
}

@media (max-width: 991.98px) {
    .about-vmv-section {
        padding-bottom: 50px;
    }

    .vmv-hero-banner {
        aspect-ratio: 4 / 5;
    }

    .vmv-vision-section {
        padding: 25px 0 40px;
    }

    .vmv-vision-title {
        margin-bottom: 40px;
        font-size: 36px;
    }

    .vmv-section-label,
    .vmv-section-label-en {
        font-size: 32px;
    }

    .vmv-house-image,
    .vmv-blue-box {
        min-height: auto;
        aspect-ratio: 1 / 1;
    }

    .vmv-blue-box {
        padding: 40px 30px 30px 50px;
        margin-top: 20px;
    }

    .vmv-blue-header h3 {
        font-size: 40px;
    }

    .vmv-blue-content p {
        font-size: 25px;
    }

    .vmv-mission-box,
    .vmv-values-box {
        padding: 28px 20px;
        margin-bottom: 20px;
    }

    .vmv-list {
        margin-left: 30%;
    }

    .vmv-list li {
        font-size: 18px;
        padding-left: 26px;
    }

    .vmv-list li::before {
        font-size: 22px;
    }
}

@media (max-width: 767.98px) {
    .about-vmv-section {
        padding-bottom: 40px;
    }

    .vmv-hero-title {
        font-size: 55px;
        margin-bottom: 0;
    }

    .vmv-hero-subtitle {
        font-size: 24px;
    }

    .vmv-vision-section {
        padding: 20px 0 30px;
    }

    .vmv-vision-title {
        margin-bottom: 30px;
        font-size: 18px;
    }

    .vmv-section-label,
    .vmv-section-label-en {
        font-size: 24px;
    }

    .vmv-house-image,
    .vmv-blue-box {
        min-height: auto;
        aspect-ratio: 1 / 1;
    }

    .vmv-blue-box {
        padding: 22px;
    }

    .vmv-blue-header h3 {
        font-size: 20px;
    }

    .vmv-blue-header p {
        font-size: 14px;
    }

    .vmv-blue-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .vmv-mission-box,
    .vmv-values-box {
        padding: 22px 16px;
    }

    .vmv-list {
        margin-left: 0;
    }

    .vmv-list li {
        font-size: 16px;
        padding-left: 24px;
    }

    .vmv-list li::before {
        font-size: 20px;
    }
}