/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
/* SKODA NEXT FONTS */
@font-face { 
    font-family: "SKODA Next"; 
    src: url("./assets/fonts/SKODANext-Light.woff2") format("woff2"), 
         url("./assets/fonts/SKODANext-Light.woff") format("woff"), 
         url("./assets/fonts/SKODANext-Light.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 300; 
    font-display: swap;
}

@font-face { 
    font-family: "SKODA Next"; 
    src: url("./assets/fonts/SKODANext-Regular.woff2") format("woff2"), 
         url("./assets/fonts/SKODANext-Regular.woff") format("woff"), 
         url("./assets/fonts/SKODANext-Regular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 400; 
    font-display: swap;
}

@font-face { 
    font-family: "SKODA Next"; 
    src: url("./assets/fonts/SKODANext-Bold.woff2") format("woff2"), 
         url("./assets/fonts/SKODANext-Bold.woff") format("woff"), 
         url("./assets/fonts/SKODANext-Bold.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 700; 
    font-display: swap;
}

@font-face { 
    font-family: "SKODA Next"; 
    src: url("./assets/fonts/SKODANext-Black.woff2") format("woff2"), 
         url("./assets/fonts/SKODANext-Black.woff") format("woff"), 
         url("./assets/fonts/SKODANext-Black.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 900; 
    font-display: swap;
}

:root {
    /* Skoda Design System Colors */
    --skoda-primary-green: #419468;
    --skoda-dark-green: #0e3a2f;
    --skoda-deepest-green: #00271d;
    
    --skoda-black: #161718;
    --skoda-mid-gray: #373737;
    --skoda-light-gray: #f3f3f3;
    --skoda-off-white: #f8f8f8;
    --skoda-border-color: #e4e4e4;
    --skoda-white: #ffffff;

    /* Skoda Fonts */
    --skoda-font-primary: 'SKODA Next', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --skoda-font-secondary: 'Klement', 'SKODA Next', sans-serif;
    --skoda-font-icons: 'SKODA Next Icons Regular', 'skoda-icons-font';
}

/*************** ADD CUSTOM CSS HERE.   ***************/

body {
    font-family: var(--skoda-font-primary);
    color: var(--skoda-black);
    background-color: var(--skoda-white);
}

h1, h2, h3, h4, h5, h6, 
.is-large, .nav-top-link, .nav > li > a {
    font-family: var(--skoda-font-primary);
    color: var(--skoda-black);
}

/* Primary Buttons Override */
.button.primary, .btn-primary, button[type="submit"], .is-form .button {
    background-color: var(--skoda-primary-green) !important;
    color: var(--skoda-white) !important;
    border-radius: 2px;
}

.button.primary:hover, .btn-primary:hover, button[type="submit"]:hover, .is-form .button:hover {
    background-color: var(--skoda-dark-green) !important;
}

/* Base utility classes for rapid builds */
.bg-skoda-light { background-color: var(--skoda-light-gray); }
.bg-skoda-dark { background-color: var(--skoda-black); color: var(--skoda-white); }
.text-skoda-green { color: var(--skoda-primary-green); }


/*==============================================
 * SKODA HEADER OVERRIDES
 *==============================================*/
/* Header Height */
#header .header-main {
    height: 64px;
}
@media (min-width: 992px) {
    #header .header-main { height: 54px; }
}
@media (min-width: 1200px) {
    #header .header-main { height: 60px; }
}

/* Navigation Links */
.header-nav > li > a {
    font-size: 16px !important;
    font-weight: 300 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
    color: var(--skoda-black) !important;
    padding: 0 10px !important;
    margin-right: 15px; /* Spacing between links */
    position: relative;
    /* Prevent layout shift on bold hover by reserving space */
    text-shadow: 0 0 0 rgba(0,0,0,0); 
    transition: all 0.15s;
}

.header-nav > li > a:hover {
    font-weight: 700 !important; /* Bold on hover like Skoda */
}

/* Green Highlight Underline */
.header-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10px;
    width: calc(100% - 20px);
    height: 2px;
    background-color: var(--skoda-primary-green);
    opacity: 0;
    transition: opacity 0.15s;
}

.header-nav > li > a:hover::after {
    opacity: 1;
}

/*==============================================
 * SKODA LANGUAGE SELECTOR
 *==============================================*/
.skoda-lang-selector {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 15px;
    height: 100%;
}
@media (min-width: 992px) {
    .skoda-lang-selector { margin-right: 25px; margin-left: 20px; }
}
.skoda-lang-selector .selected-language {
    color: var(--skoda-black);
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.11;
    font-size: 16px;
    display: flex;
    flex-direction: column;
}
@media (min-width: 992px) {
    .skoda-lang-selector .selected-language {
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 1.18;
    }
}
@media (min-width: 1200px) {
    .skoda-lang-selector .selected-language {
        font-size: 12px;
        line-height: 1.17;
    }
}
.skoda-lang-selector .language-text {
    display: block;
    margin-bottom: 4px;
}
.skoda-lang-selector .underscore {
    background-color: var(--skoda-black);
    height: 2px;
    width: 25px;
}
@media (min-width: 576px) { .skoda-lang-selector .underscore { width: 23px; } }
@media (min-width: 992px) { .skoda-lang-selector .underscore { width: 17px; } }

/*==============================================
 * SKODA HOME SLIDER & BANNER (FLATSOME OVERRIDES)
 * Source: skoda-vietnam.vn exact CSS values
 *==============================================*/

/* Remove padding added by Flatsome section */
.xc-hero {
    padding: 0 !important;
}

/* Hide default Flatsome dots immediately to prevent FOUC - they only show once JS wraps them */
.xc-hero .slider > .flickity-page-dots {
    display: none !important;
}

/* Expand banner-layers container to match Skoda's 1600px grid (original: max-width:1600px at >=1200px) */
.xc-hero .banner-layers.container {
    max-width: 1600px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ===== 1. PAGINATION WRAPPER ===== */
/* Original: inset-inline-start:50%; width:50%; bottom:20px; gap:16px; padding-inline:20px */
.autoplay-pagination-navigation-wrapper {
    position: absolute;
    bottom: 20px;
    left: auto;
    right: 0;
    inset-inline-start: 50%;
    width: 50%;
    max-width: 800px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-inline: 20px;
    pointer-events: none;
    z-index: 52;
}

/* Dots group: Original has gap:8px, padding:16px, flex-grow:0 on >=720px */
.autoplay-pagination-navigation-wrapper .flickity-page-dots {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    gap: 8px;
    padding: 16px;
    pointer-events: auto;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* Inactive dot: Original = height:4px, border-radius:2px, width:56px on >=720px, bg: rgba(255,255,255,0.2) */
.autoplay-pagination-navigation-wrapper .flickity-page-dots .dot {
    width: 56px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 2px !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transition: height 0.3s ease, border-radius 0.3s ease;
}

/* Active dot: Original = height:8px, border-radius:4px */
.autoplay-pagination-navigation-wrapper .flickity-page-dots .dot.is-selected {
    height: 8px !important;
    border-radius: 4px !important;
}

/* Visited dot (đã chạy qua): giữ nguyên kích thước to, fill đầy trắng */
.autoplay-pagination-navigation-wrapper .flickity-page-dots .dot.is-visited {
    height: 8px !important;
    border-radius: 4px !important;
}
.autoplay-pagination-navigation-wrapper .flickity-page-dots .dot.is-visited::after {
    width: 100% !important;
    animation: none !important;
}

/* Progress fill bar (green neon) */
.autoplay-pagination-navigation-wrapper .flickity-page-dots .dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background-color: #ffffff;
}

/* Active dot progress animation (6s matches Flatsome autoPlay:6000) */
.autoplay-pagination-navigation-wrapper .flickity-page-dots .dot.is-selected::after {
    animation: skodaProgress 6s linear forwards;
}

/* Pause state */
.xc-hero .slider.is-paused .flickity-page-dots .dot.is-selected::after {
    animation-play-state: paused;
}

@keyframes skodaProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Hide Flatsome default arrows */
.xc-hero .slider .flickity-prev-next-button {
    display: none !important;
}

/* Play/Pause button: Original = 48x48, border-radius:50px, bg:rgba(255,255,255,0.1) */
.autoplay-pagination-navigation-wrapper .autoplay-control {
    position: relative;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff;
    padding: 0;
    padding-top: 2px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: none !important;
    z-index: 3;
    transition: background-color 0.3s;
}
.autoplay-pagination-navigation-wrapper .autoplay-control:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}
.autoplay-pagination-navigation-wrapper .autoplay-control svg {
    fill: currentColor;
    width: 24px;
    height: 24px;
}

/* ===== 2. BANNER SIZE ===== */
/* Original: .img-wrapper { padding-bottom: 36.5% } → responsive height proportional to width */
.xc-hero .banner {
    height: 0 !important;
    padding-top: 36.5% !important; /* Tỷ lệ gốc: 36.5% viewport width */
    min-height: auto !important;
    overflow: hidden;
}
@media (max-width: 575px) {
    /* Mobile: full viewport minus header */
    .xc-hero .banner {
        height: calc(100vh - 70px) !important;
        padding-top: 0 !important;
    }
}

/* ===== 3. TEXT BOX ===== */
/* Original structure: .container(1600px, pad 15px) > .row(pad 45px) > .col-md-5(pad 15px, width 41.667%)
   Total left offset from container edge = 15px + 45px + 15px = 75px
   Text aligned to bottom via flex justify-content:flex-end */
.xc-hero .text-box {
    width: auto !important;
    max-width: 600px !important; /* col-md-5 ~41.667% of 1600px container */
    text-align: left !important;
    /* Bottom-left positioning matching original */
    top: auto !important;
    bottom: 32px !important; /* Original: .text-wrapper bottom:32px at >=768px */
    left: 75px !important; /* Original: container(15) + row(45) + col(15) = 75px */
    transform: none !important;
    margin: 0 !important;
}
.xc-hero .text-box .text-inner {
    text-align: left !important;
}

@media (max-width: 1199px) {
    /* Original at 992-1199: row padding 25px, col padding 15px => 15+25+15=55px */
    .xc-hero .text-box {
        left: 55px !important;
        max-width: 50% !important;
    }
}
@media (max-width: 991px) {
    .xc-hero .text-box {
        left: 40px !important;
        max-width: 50% !important;
    }
}
@media (max-width: 575px) {
    /* Original: col-12 full width, padding 10px+10px, bottom padding-bottom:72px */
    .xc-hero .text-box {
        max-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
        bottom: 72px !important;
        padding: 0 20px !important;
    }
}

/* Headline: Original at >=992px: font-size:42px, font-weight:700, line-height:119%, letter-spacing:normal */
.xc-hero .text-box h1,
.xc-hero .text-box h2,
.xc-hero .text-box h3 {
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    text-transform: none !important;
}
@media (max-width: 991px) and (min-width: 768px) {
    .xc-hero .text-box h1,
    .xc-hero .text-box h2,
    .xc-hero .text-box h3 { font-size: 38px !important; line-height: 126% !important; }
}
@media (max-width: 767px) and (min-width: 576px) {
    .xc-hero .text-box h1,
    .xc-hero .text-box h2,
    .xc-hero .text-box h3 { font-size: 32px !important; line-height: 119% !important; }
}
@media (max-width: 575px) {
    .xc-hero .text-box h1,
    .xc-hero .text-box h2,
    .xc-hero .text-box h3 { font-size: 28px !important; line-height: 129% !important; letter-spacing: 0.02em !important; }
}

/* Description text: Original: font-size:18px, font-weight:300, line-height:150%, margin-top:24px */
.xc-hero .text-box p {
    font-family: var(--skoda-font-primary) !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    color: #ffffff !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}
@media (max-width: 767px) {
    .xc-hero .text-box p { font-size: 16px !important; margin-top: 16px !important; }
}

/* ===== 4. CTA BUTTON ===== */
/* Original: border-radius:1000px, bg:#78faae, color:#161718, padding:14px 24px */
.xc-hero .text-box .button,
.xc-hero .text-box .button.primary {
    border-radius: 1000px !important;
    letter-spacing: 0.75px !important;
    text-transform: none !important;
    text-decoration: none !important;
    font-family: var(--skoda-font-primary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 16px !important;
    background-color: #78faae !important;
    background-clip: padding-box !important;
    border: none !important;
    color: #161718 !important;
    padding: 14px 24px !important;
    min-height: auto !important;
    min-width: 44px !important;
    margin-top: 32px !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    box-shadow: none !important;
}
.xc-hero .text-box .button:hover,
.xc-hero .text-box .button.primary:hover {
    background-color: #72E3A1 !important;
    color: #161718 !important;
    box-shadow: none !important;
}

/*==============================================
 * LATEST NEWS (BLOG SECTION) HOÀN TOÀN GIỐNG SKODA OIRIGNAL
 *==============================================*/
/* Section padding and background */
.xc-blog {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

/* Section Title */
.xc-blog .xc-section-title {
    font-family: var(--skoda-font-primary) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #161718 !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}
@media (max-width: 767px) {
    .xc-blog .xc-section-title {
        font-size: 28px !important;
        margin-bottom: 24px !important;
    }
}

/* Reset .box-text from Flatsome text-center */
.xc-blog .box-text {
    text-align: left !important;
    padding: 0 !important;
}

/* Post Container Wrapper (Cụm blog list có background trắng) */
.xc-blog .row.large-columns-1 {
    background-color: #ffffff !important;
    padding: 48px !important;
}
@media (max-width: 767px) {
    .xc-blog .row.large-columns-1 {
        padding: 24px 16px !important;
    }
}

.xc-blog .post-item {
    padding: 0 !important; /* Disable grid gutter */
}
.xc-blog .post-item .box-blog-post {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 24px !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.xc-blog .post-item:last-child .box-blog-post {
    border-bottom: none;
    margin-bottom: 0 !important;
}

/* Flex layout for Date + Excerpt inline */
.xc-blog .blog-post-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Post Title */
.xc-blog .post-title {
    width: 100%; /* Force its own line */
    font-family: var(--skoda-font-primary) !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}
.xc-blog .post-title a {
    color: #161718 !important;
    transition: color 0.3s ease !important;
}
.xc-blog .post-title a:hover {
    color: #161718 !important; /* Không đổi màu */
    text-decoration: none !important; /* Không gạch chân */
}
@media (max-width: 767px) {
    .xc-blog .post-title {
        font-size: 23px !important;
    }
}

/* Date */
.xc-blog .post-meta {
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #161718 !important;
    margin: 0 !important;
    opacity: 1 !important;
    padding-top: 2px;
}

/* Vertical Divider (replacing Flatsome's horizontal line) */
.xc-blog .is-divider {
    height: 16px !important;
    width: 1px !important;
    background-color: #161718 !important;
    margin: 6px 16px 0 16px !important; /* Space between Date and Excerpt */
    opacity: 0.2; 
    max-width: none !important;
}

/* Excerpt Text (Mô tả ngắn 2 dòng) */
.xc-blog .from_the_blog_excerpt {
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #161718 !important;
    margin: 0 !important;
    flex: 1; /* Take remaining inline space */
    min-width: 250px; /* Force wrap if container gets too small */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Mobile wrap handle for Date + Excerpt + Xem thêm */
@media (max-width: 575px) {
    .xc-blog .is-divider { display: none !important; }
    .xc-blog .post-meta { width: 100%; margin-bottom: 8px !important; }
    .xc-blog .from_the_blog_excerpt { width: 100%; flex: auto; }
}

/* Nút "Xem thêm" bên trong bài viết (Biến thành link text + icon) */
.xc-blog .box-text-inner .button.is-outline {
    background: transparent !important;
    border: none !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 0 0 24px !important; /* Khoảng cách với văn bản mô tả */
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    align-self: flex-end; /* Nằm ép dưới hoặc căn giữa chữ */
}
.xc-blog .box-text-inner .button.is-outline:hover {
    background: transparent !important;
    color: #161718 !important;
    text-decoration: none !important;
}
/* Thêm mũi tên Chevron vào nút Xem thêm */
.xc-blog .box-text-inner .button.is-outline::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M17.22 11.96L9.86 19.32L8.38 17.84L14.26 11.96L8.38 6.08L9.86 4.6L17.22 11.96Z' fill='%23161718'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media (max-width: 575px) {
    .xc-blog .box-text-inner .button.is-outline {
        margin: 12px 0 0 0 !important;
        width: 100%;
        justify-content: flex-start;
    }
}

/* 5. Ghost Button "Tất cả tin tức" (Pill shape) */
.xc-blog .button.primary {
    border-radius: 1000px !important;
    background-color: transparent !important;
    border: 2px solid #161718 !important;
    color: #161718 !important;
    padding: 12px 22px !important;
    font-family: var(--skoda-font-primary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: 0.75px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    margin: 32px auto 0 auto !important; /* Canh giữa */
}
.xc-blog .button.primary:hover {
    background-color: rgba(26,27,28,0.12) !important;
    color: #161718 !important;
    border-color: #161718 !important;
}

/* Ensure button parent allows centering */
.xc-blog .col-inner:has(.button) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*==============================================
 * SOCIAL TILES (XC-SOCIAL) SKODA STYLE
 *==============================================*/
/* 1. Desktop - Các ảnh có chiều cao bằng nhau */
.xc-social .col-inner {
    width: 100% !important;
    height: 100% !important;
}
.xc-social .box {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important; /* Góc cạnh vuông vức */
    overflow: hidden;
    position: relative;
    background-color: transparent !important;
}

/* Ép ảnh cover full chiều cao 100% */
.xc-social .box-image {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}
.xc-social .box-image a,
.xc-social .box-image div {
    display: block !important;
    height: 100% !important;
    width: 100% !important;
}
.xc-social .box-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; /* Đảm bảo không bị méo */
    transition: transform 0.3s ease !important;
}

/* Hiệu ứng hover cho ảnh (zoom nhẹ giống Skoda) */
.xc-social .box:hover .box-image img {
    transform: scale(1.05) !important;
}

/* 2. Style lớp Gradient 180deg che ảnh giống hệt hệ thống mẹ Skoda */
.xc-social .box-overlay .overlay {
    background: linear-gradient(180deg, rgba(55,55,55,0) 50%, #373737) !important;
    background-color: transparent !important; /* Xóa đè background color inline của Flatsome */
    opacity: 1 !important;
    z-index: 1 !important;
}

/* 3. Text căn trái đè lên nền mờ */
.xc-social .box-text {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 20px 20px !important;
    text-align: left !important;
    z-index: 2 !important;
    background: transparent !important;
}
@media (min-width: 1200px) {
    .xc-social .box-text {
        padding: 30px !important;
    }
}
.xc-social .box-text-inner h4 {
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-shadow: none !important; /* Bỏ text-shadow mặc định của theme */
}
@media (min-width: 1200px) {
    .xc-social .box-text-inner h4 {
        font-size: 30px !important;
    }
}

/* 4. Mobile Layout - 2 hàng, trượt ngang (Scrollable Grid) */
@media (max-width: 767px) {
    .xc-social {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .xc-social .row {
        display: grid !important;
        grid-template-rows: repeat(2, 1fr) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 80vw !important; /* Mỗi item tốn 80% màn hình */
        gap: 15px !important; /* Khoảng cách giữa các ô */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        padding: 0 15px 15px 15px !important; /* Lề viền cho thanh trượt */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    /* Gắn chiều cao cố định để nó không bị sập (collapse) */
    .xc-social .col-inner {
        height: 220px !important;
    }
    .xc-social .col {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important; /* Gỡ bỏ lề cũ */
        scroll-snap-align: center;
        flex: none !important;
    }
    /* Xóa thanh scrollbar hiển thị ở UI để nhìn sạch sẽ như Mobile App */
    .xc-social .row::-webkit-scrollbar {
        display: none;
    }

    /* Custom Mobile Scrollbar (Skoda Style) */
    .carousel-pagination {
        margin-top: 15px;
        padding-bottom: 5px;
    }
    .slider-component .slider-root {
        position: relative;
        height: 4px; /* Độ dày thanh trượt */
        width: 50%;  /* Chiều dài thanh trượt chiếm 50% màn hình */
        margin: 0 auto; /* Căn giữa */
        border-radius: 4px;
        overflow: hidden; 
    }
    .slider-component .slider-rail {
        background-color: #d9d9d9;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .slider-component .slider-handle {
        background-color: #419468; /* Skoda Green */
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 4px;
        /* Giúp animation vuốt trở nên mượt hơn thay vì giật cục */
        transition: left 0.1s ease-out;
    }
}

/*==============================================
 * DISCOVER SKODA TILES (.xc-discover)
 *==============================================*/
.xc-discover .col {
    padding-bottom: 30px;
}
.xc-discover .col-inner > .box + .box {
    margin-top: 30px;
}
.xc-discover .box-image {
    overflow: hidden;
    position: relative;
}
.xc-discover .box-image img {
    transition: transform 0.6s ease;
}
.xc-discover .box.has-hover:hover .box-image img {
    transform: scale(1.05); /* zoom in effect */
}

/* GEOMETRIC MASONRY EXACT HEIGHTS */
@media (min-width: 550px) {
    .xc-discover .box-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* 1. Default to 1:1 square for Small Tiles */
    .xc-discover .box-image {
        height: 0 !important;
        padding-top: 100% !important; /* ratio 1:1 */
    }
    
    /* 2. Landscape Tiles: 2x1 cell */
    .xc-discover .section-content > .row:nth-of-type(2) > .col:nth-child(1) > .col-inner > .row:first-child .box-image,
    .xc-discover .section-content > .row:nth-of-type(2) > .col:nth-child(3) .box-image {
        padding-top: calc(50% - 15px) !important;
    }

    /* 3. Portrait Tiles: 1x2 cell (Kodiaq and Octavia) */
    .xc-discover .section-content > .row:nth-of-type(2) > .col:nth-child(1) > .col-inner > .row:last-child > .col:nth-child(2) .box-image,
    .xc-discover .section-content > .row:nth-of-type(2) > .col:nth-child(2) > .col-inner > .box:first-child .box-image {
        padding-top: calc(200% + 30px) !important;
    }
}

/*==============================================
 * DISCOVER SKODA MOBILE: HORIZONTAL SCROLL
 *==============================================*/
@media (max-width: 549px) { /* Mobile only */
    .xc-discover .section-content > .row:nth-of-type(2) {
        display: grid !important;
        grid-template-rows: 1fr !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 80vw !important;
        gap: 15px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 !important;
        width: 100vw !important;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .xc-discover .section-content > .row:nth-of-type(2)::-webkit-scrollbar {
        display: none;
    }
    
    /* Gỡ bỏ cấu trúc lồng nhau phức tạp của Flatsome */
    .xc-discover .section-content > .row:nth-of-type(2) .col,
    .xc-discover .section-content > .row:nth-of-type(2) .col-inner,
    .xc-discover .section-content > .row:nth-of-type(2) .row {
        display: contents !important;
    }
    
    /* Box trở thành Grid item tĩnh */
    .xc-discover .box {
        scroll-snap-align: center;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Ép đồng bộ chiều cao và tỷ lệ ảnh */
    .xc-discover .box-image {
        height: 0 !important;
        padding-top: 110% !important; /* vertical rectangle */
        position: relative !important;
    }
    .xc-discover .box-image img {
        position: absolute !important;
        top: 0; left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}
.xc-discover .box-overlay .overlay {
    background-color: transparent !important;
}
.xc-discover .box-text {
    text-align: left !important;
    padding: 24px !important;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
}
.xc-discover .box-text-inner {
    width: 100%;
    text-align: left !important;
}
.xc-discover .box-text h4,
.xc-discover .box-text p {
    text-align: left !important;
}
.xc-discover .box:hover .box-text {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%) !important;
}
.xc-discover .box-text-inner h4 {
    font-family: var(--skoda-font-primary) !important;
    color: #fff !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    margin-bottom: 4px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}
.xc-discover .box-text-inner p {
    font-family: var(--skoda-font-primary) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.02em !important;
}
.xc-discover .xc-section-title {
    font-family: var(--skoda-font-primary) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 36px !important;
    color: #161718 !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

@media (min-width: 720px) {
    .xc-discover .box-text-inner h4 {
        font-size: 27px !important;
        line-height: 32px !important;
    }
    .xc-discover .xc-section-title {
        font-size: 32px !important;
        line-height: 38px !important;
    }
}
@media (min-width: 1440px) {
    .xc-discover .box-text-inner h4 {
        font-size: 30px !important;
        line-height: 36px !important;
    }
    .xc-discover .box-text-inner p {
        font-size: 18px !important;
        line-height: 28px !important;
    }
    .xc-discover .xc-section-title {
        font-size: 36px !important;
        line-height: 44px !important;
    }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/*==============================================
 * NÚT BACK TO TOP (.xc-back-to-top)
 *==============================================*/
html {
    scroll-behavior: smooth;
}

.xc-back-to-top .icon {
    align-items: center;
    background-color: #464748;
    border-radius: 50%;
    bottom: 75px;
    color: #fff;
    display: flex;
    height: 44px;
    justify-content: center;
    left: 20px;
    position: fixed;
    width: 44px;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s, transform 0.3s;
}

.xc-back-to-top .icon:hover {
    background-color: #212121;
}

.xc-back-to-top .k-two-ng-1gwu46y {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    fill: currentColor;
    font-size: 20px;
    overflow: visible;
}

/* Chỉ hiện khi add class is-visible (điều khiển bởi JS) */
.xc-back-to-top {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.xc-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/*==============================================
 * GLOBAL OVERRIDES
 *==============================================*/
.entry-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.absolute-footer {
    display: none !important;
}

/* ==============================================
 * Hero 2-layer + sticky price bar
 * ============================================== */
.skoda-model-hero {
    position: relative;
    height: 90vh;
    min-height: 700px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #f3f3f3;
}
.skoda-hero-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
.skoda-hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.skoda-hero-car-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
}
.skoda-hero-car-image {
    display: block;
    width: 100%;
    margin: 34% auto 0 auto;
}
@media (min-width: 576px) {
    .skoda-hero-car-image { width: 92%; margin-top: 18%; }
}
@media (min-width: 992px) {
    .skoda-hero-car-image { width: 67%; margin-left: 16%; margin-top: 5%; }
}
@media (min-width: 1200px) {
    .skoda-hero-car-image { width: 59%; margin-left: 15%; margin-top: 4.5%; }
}
.skoda-hero-overlay { z-index: 4; }
.skoda-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.78) 100%);
}
.skoda-hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    padding-bottom: 80px;
}
.skoda-hero-text-wrapper {
    color: #fff;
    padding: 0 15px;
}
.skoda-model-title {
    color: #fff !important;
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 8px 0;
    letter-spacing: .02em;
}
.skoda-tagline {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}
.skoda-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
}
@media (min-width: 1024px) {
    .skoda-hero-actions { justify-content: flex-start; }
    .skoda-hero-text-wrapper { text-align: left; }
}

/* Hero / sticky buttons - closer to original */
.skoda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 14px 24px;
    border-radius: 1000px;
    border: 2px solid transparent;
    font-family: "SKODA Next", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .75px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease;
}
.skoda-btn:hover {
    text-decoration: none !important;
}
.skoda-btn-primary {
    background-color: #78faae;
    color: #161718 !important;
    border-color: #78faae;
}
.skoda-btn-primary:hover {
    background-color: #72e3a1;
    border-color: #72e3a1;
    color: #161718 !important;
}
.skoda-btn-primary:active {
    background-color: #63d492;
    border-color: #63d492;
}
.skoda-btn-outline {
    background-color: transparent;
    color: #fff !important;
    border-color: #fff;
}
.skoda-btn-outline:hover {
    background-color: rgba(255, 255, 255, .12);
    color: #fff !important;
    border-color: #fff;
}
.skoda-btn-outline.dark {
    color: #161718 !important;
    border-color: #464748;
}
.skoda-btn-outline.dark:hover {
    background-color: rgba(22, 23, 24, .08);
    color: #161718 !important;
    border-color: #161718;
}

.skoda-price-bar--sticky {
    position: sticky;
    top: 80px;
    z-index: 120;
    background: #fff;
}
/* Trang mẫu xe: header chính fixed (không “sticky” co giật Flatsome); cuộn qua hero → ẩn header, hiệu thanh phụ */
body.skoda-model-single #header.header .header-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none !important;
    z-index: 200;
    transform: translateY(0);
    transition: transform 0.28s ease, opacity 0.2s ease;
}
body.admin-bar.skoda-model-single #header.header .header-wrapper {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar.skoda-model-single #header.header .header-wrapper {
        top: 46px;
    }
}
body.skoda-model-single.skoda-past-hero #header.header .header-wrapper {
    transform: translateY(-100%);
    pointer-events: none;
}
/* Giữ thanh header cố định một kiểu khi Flatsome thêm .stuck */
body.skoda-model-single #header.header .header-wrapper.stuck {
    position: fixed !important;
    top: 0 !important;
}
body.admin-bar.skoda-model-single #header.header .header-wrapper.stuck {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar.skoda-model-single #header.header .header-wrapper.stuck {
        top: 46px !important;
    }
}

/* Secondary navigation — Skoda ImporterHeaderModule [data-component=secondary-navigation] */
.skoda-secondary-navigation.come-into-view-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    background-color: #0e3a2f;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.12);
    min-height: 70px;
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
    pointer-events: none;
}
@media (min-width: 576px) {
    .skoda-secondary-navigation.come-into-view-animation {
        min-height: 65px;
    }
}
@media (min-width: 992px) {
    .skoda-secondary-navigation.come-into-view-animation {
        min-height: 55px;
    }
}
@media (min-width: 1200px) {
    .skoda-secondary-navigation.come-into-view-animation {
        min-height: 60px;
    }
}
body.admin-bar.skoda-model-single .skoda-secondary-navigation {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar.skoda-model-single .skoda-secondary-navigation {
        top: 46px;
    }
}
.skoda-secondary-navigation.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.skoda-secondary-navigation .container {
    width: 100%;
    max-width: 1600px;
    flex: 1 1 auto;
}
.skoda-secondary-menu__inner {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    min-height: 0;
    padding: 0;
    margin: 0;
}
.secondary-menu-breadcrumb {
    display: none;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    margin: 6px 0;
    margin-inline-start: 0;
    color: #161718;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.098em;
    line-height: 1.17;
    font-family: var(--skoda-font-primary);
}
@media (min-width: 576px) {
    .secondary-menu-breadcrumb {
        display: flex;
        margin-inline-start: 30px;
    }
}
@media (min-width: 992px) {
    .secondary-menu-breadcrumb {
        font-size: 11px;
        letter-spacing: 0.09em;
        line-height: 1.18;
    }
}
@media (min-width: 1200px) {
    .secondary-menu-breadcrumb {
        font-size: 12px;
        letter-spacing: 0.098em;
        line-height: 1.17;
    }
}
.skoda-secondary-navigation .parent-item-part {
    display: none;
    align-items: center;
}
@media (min-width: 768px) {
    .skoda-secondary-navigation .parent-item-part {
        display: inline-block;
    }
}
.secondary-menu-breadcrumb .breadcrumb-text.with-icon {
    position: relative;
    display: block;
    padding-inline-end: 20px;
    white-space: nowrap;
    color: #fff;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: inherit;
    line-height: inherit;
    font-family: var(--skoda-font-primary);
}
.secondary-menu-breadcrumb .breadcrumb-icon {
    position: absolute;
    inset-inline-end: 0;
    top: 54%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    color: #fff;
}
.secondary-menu-breadcrumb .current-item-part {
    display: inline-block;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.09em;
    font-weight: 700;
    font-size: inherit;
    line-height: inherit;
    font-family: var(--skoda-font-primary);
    margin-inline-start: 0;
}
@media (min-width: 992px) {
    .secondary-menu-breadcrumb .current-item-part {
        margin-inline-start: 10px;
    }
}
.secondary-menu-button-wrapper {
    display: flex;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    margin: 15px 5px 15px 12px;
}
@media (min-width: 992px) {
    .secondary-menu-button-wrapper {
        margin: 10px 5px 10px 12px;
    }
}
@media (min-width: 1200px) {
    .secondary-menu-button-wrapper {
        margin: 12px 5px 12px 12px;
    }
}
.skoda-secondary-menu__stack {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.more-items-button {
    position: relative;
}
.tooltip-inline-wrapper.skoda-secondary-more {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.skoda-secondary-more-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 2px solid #fff;
    border-radius: 1000px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
}
.skoda-secondary-more-trigger:hover {
    background-color: rgba(243, 243, 243, 0.12);
    color: #fff;
}
.skoda-secondary-more-trigger:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}
.skoda-secondary-more-icon {
    display: block;
    width: 20px;
    height: 20px;
}
.skoda-secondary-more-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 220;
    min-width: 220px;
    max-width: min(320px, 92vw);
    padding: 8px 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.skoda-secondary-more-panel__link,
.skoda-secondary-more-panel__copy {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    font-family: var(--skoda-font-primary);
    font-size: 14px;
    font-weight: 600;
    color: #161718;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1.3;
}
.skoda-secondary-more-panel__link:hover,
.skoda-secondary-more-panel__copy:hover {
    background: rgba(22, 23, 24, 0.06);
    color: #161718;
}
.skoda-secondary-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    flex-shrink: 0;
    font-family: var(--skoda-font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.75px;
    text-transform: none;
    text-decoration: none !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 1000px;
    padding: 12px 24px;
    border: 2px solid transparent;
    transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    box-shadow: none;
    text-rendering: geometricPrecision;
}
.skoda-secondary-nav-btn:hover {
    text-decoration: none !important;
}
.skoda-secondary-nav-btn--primary {
    background-color: #78faae;
    color: #161718 !important;
    border-color: #78faae;
}
.skoda-secondary-nav-btn--primary:hover {
    background-color: #72e3a1;
    border-color: #72e3a1;
    color: #161718 !important;
    box-shadow: none;
}
.skoda-secondary-nav-btn--primary:active {
    background-color: #78faae;
    border-color: #78faae;
    color: #161718 !important;
    box-shadow: none;
}
.skoda-secondary-nav-btn--outlined {
    padding: 10px 22px;
    background-color: transparent;
    color: #fff !important;
    border: 2px solid #fff;
}
.skoda-secondary-nav-btn--outlined:hover {
    background-color: rgba(26, 27, 28, 0.12);
    color: #fff !important;
    border-color: #fff;
}
.skoda-secondary-nav-btn--outlined:active {
    background-color: transparent;
    color: #fff !important;
    border-color: #fff;
}
@media (max-width: 849px) {
    .skoda-price-bar--sticky {
        top: 0;
    }
    .skoda-model-hero {
        min-height: 520px;
        height: 78vh;
    }
    .skoda-hero-content {
        padding-bottom: 36px;
    }
    .skoda-secondary-menu__inner {
        flex-wrap: wrap;
        min-height: 56px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .secondary-menu-button-wrapper {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        justify-content: flex-end;
    }
    .skoda-secondary-menu__stack {
        justify-content: flex-end;
        width: 100%;
    }
}

/* Derivative introduction (price under hero) — parity with Skoda CPV3 */
.skoda-model-page [data-component="derivative-introduction-data"] {
    background: #fff;
}
.skoda-model-page [data-component="derivative-introduction-data"] .skoda-attributes-container {
    padding: 24px 0 0;
}
@media (min-width: 576px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-attributes-container {
        padding: 48px 0 0;
    }
}
@media (min-width: 1200px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-attributes-container {
        padding: 64px 0 0;
    }
}
.skoda-model-page [data-component="derivative-introduction-data"] .skoda-attributes-container--padding-bottom {
    padding-bottom: 16px;
}
@media (min-width: 576px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-attributes-container--padding-bottom {
        padding-bottom: 48px;
    }
}
@media (min-width: 992px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-attributes-container--padding-bottom {
        padding-bottom: 64px;
    }
}
.skoda-model-page [data-component="derivative-introduction-data"] .skoda-item-area {
    overflow: hidden;
}
@media (min-width: 992px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-item-area {
        clear: both;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }
}
.skoda-model-page [data-component="derivative-introduction-data"] .skoda-prices-attributes-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
@media (min-width: 576px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-prices-attributes-wrapper {
        gap: 40px;
    }
}
@media (min-width: 992px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-prices-attributes-wrapper {
        flex-direction: row;
        gap: 30px;
    }
}
.skoda-model-page [data-component="derivative-introduction-data"] .skoda-prices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 992px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-prices {
        width: 280px;
    }
}
.skoda-model-page [data-component="full-price"] {
    align-items: baseline;
    display: inline-flex;
}
.skoda-model-page [data-component="full-price"] .item {
    display: flex;
    flex-direction: column;
}
.skoda-model-page [data-component="full-price"] .value-part {
    align-items: baseline;
    display: inline-flex;
}
.skoda-model-page [data-component="full-price"] .label-part {
    display: inline-flex;
}
.skoda-model-page [data-component="full-price"] .label-part .value-from {
    color: #161718;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 150%;
    margin-inline-end: 4px;
    font-family: var(--skoda-font-primary), sans-serif;
}
@media (min-width: 576px) {
    .skoda-model-page [data-component="full-price"] .label-part .value-from {
        font-size: 18px;
        line-height: 1.56;
    }
}
/* Inner [data-component=price]: sizes from full-price context (overrides generic price widget) */
.skoda-model-page [data-component="full-price"] [data-component="price"] {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: start;
    white-space: nowrap;
}
.skoda-model-page [data-component="full-price"] [data-component="price"] .currency-symbol,
.skoda-model-page [data-component="full-price"] [data-component="price"] .price-value {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.17;
    color: #161718;
    font-family: var(--skoda-font-primary), sans-serif;
}
@media (min-width: 576px) {
    .skoda-model-page [data-component="full-price"] [data-component="price"] .currency-symbol,
    .skoda-model-page [data-component="full-price"] [data-component="price"] .price-value {
        font-size: 24px;
    }
}
@media (min-width: 1200px) {
    .skoda-model-page [data-component="full-price"] [data-component="price"] .currency-symbol,
    .skoda-model-page [data-component="full-price"] [data-component="price"] .price-value {
        font-size: 30px;
    }
}
.skoda-model-page [data-component="full-price"] [data-component="price"] .blank-space {
    display: inline-block;
    position: relative;
    width: 4px;
}

/* Engine categories block (right of price, only when filled) */
.skoda-model-page [data-component="derivative-introduction-data"] .skoda-engine-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.skoda-model-page .skoda-engine-category {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skoda-model-page .skoda-engine-category__name {
    font-family: var(--skoda-font-primary), sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.43;
    color: #161718;
    letter-spacing: 0.02em;
}
.skoda-model-page .skoda-engine-attributes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.skoda-model-page .skoda-engine-attribute {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    font-family: var(--skoda-font-primary), sans-serif;
    font-size: 12px;
    line-height: 1.33;
    color: #4b4f54;
}
.skoda-model-page .skoda-engine-attribute .title {
    color: #4b4f54;
    font-weight: 400;
}
.skoda-model-page .skoda-engine-attribute .value-part {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #161718;
    font-weight: 600;
}
.skoda-model-page .skoda-engine-attribute .unit {
    color: #4b4f54;
    font-weight: 400;
}
@media (min-width: 992px) {
    .skoda-model-page [data-component="derivative-introduction-data"] .skoda-engine-categories {
        padding-inline-start: 24px;
        border-inline-start: 1px solid #e4e4e4;
    }
}

/* ==============================================
 * SKODA MODEL SINGLE - mobile polish (max-width 767px / 575px)
 * Scoped to body.skoda-model-single: type, spacing, touch targets
 * ============================================== */
@media (max-width: 767px) {
    body.skoda-model-single .skoda-model-page--flexible .skoda-trims-module {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    body.skoda-model-single .xc-single-gallery.skoda-section {
        padding-top: 36px;
        padding-bottom: 36px;
    }
    body.skoda-model-single .skoda-section.skoda-gallery-tab-tb {
        padding: 36px 0 44px;
    }
    body.skoda-model-single .skoda-features-tabs {
        padding: 40px 0;
    }
    body.skoda-model-single [data-module="vizualizer2-module"].skoda-visualizer3d {
        padding: 36px 0;
    }
    body.skoda-model-single [data-module="vizualizer2-module"] .module-headline h2 {
        margin-bottom: 22px;
        padding-left: 8px;
        padding-right: 8px;
    }
    body.skoda-model-single .skoda-trims-module--tb .skoda-trims-content-col {
        padding: 24px 15px 32px;
    }
    body.skoda-model-single .skoda-engine-slideshow__item.item {
        padding: 24px 14px 30px;
    }
}
@media (max-width: 575px) {
    body.skoda-model-single .skoda-model-hero {
        min-height: 460px;
        height: 70vh;
    }
    body.skoda-model-single .skoda-hero-content {
        padding-bottom: 24px;
    }
    body.skoda-model-single .skoda-model-title {
        font-size: clamp(1.625rem, 7.2vw, 2.25rem);
        line-height: 1.12;
        letter-spacing: 0.01em;
    }
    body.skoda-model-single .skoda-tagline {
        font-size: 1rem;
        line-height: 1.45;
    }
    body.skoda-model-single .skoda-hero-text-wrapper {
        padding-left: max(15px, env(safe-area-inset-left, 0px));
        padding-right: max(15px, env(safe-area-inset-right, 0px));
    }
    body.skoda-model-single .skoda-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 18px;
    }
    body.skoda-model-single .skoda-hero-actions .skoda-btn {
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        padding: 12px 20px;
        font-size: 15px;
        letter-spacing: 0.06em;
    }
    body.skoda-model-single .skoda-secondary-nav-btn {
        font-size: 14px;
        padding: 10px 16px;
        letter-spacing: 0.05em;
    }
    body.skoda-model-single .skoda-secondary-nav-btn--outlined {
        padding: 8px 14px;
    }
    body.skoda-model-single .skoda-secondary-more-trigger {
        width: 38px;
        height: 38px;
    }
    body.skoda-model-single .secondary-menu-button-wrapper {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    body.skoda-model-single .skoda-model-page--flexible h2.section-title span.section-title-main,
    body.skoda-model-single .skoda-model-page--flexible h2.skoda-section-title,
    body.skoda-model-single .skoda-features-tabs__headline h2,
    body.skoda-model-single .skoda-gallery-tab-tb__headline h2 {
        font-size: 26px !important;
        line-height: 1.18 !important;
    }
    body.skoda-model-single .skoda-trims-module-headline .section-title-main,
    body.skoda-model-single .skoda-model-tools-global .section-title-main {
        font-size: 26px !important;
        line-height: 1.18 !important;
    }
    body.skoda-model-single .skoda-model-page .icon-box {
        padding: 0 14px;
        min-height: 100px;
    }
    body.skoda-model-single .skoda-model-page .icon-box .icon-box-text h3,
    body.skoda-model-single .skoda-model-page .icon-box .icon-box-title {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
        line-height: 1.2 !important;
    }
    body.skoda-model-single .skoda-model-page .icon-box .icon-box-img,
    body.skoda-model-single .skoda-model-page .icon-box .icon-box-img img {
        width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
    }
    body.skoda-model-single .skoda-model-tools-global .section .section-content {
        padding-left: max(15px, env(safe-area-inset-left, 0px));
        padding-right: max(15px, env(safe-area-inset-right, 0px));
    }
    body.skoda-model-single .skoda-model-page [data-component="full-price"] [data-component="price"] {
        white-space: normal;
    }
    body.skoda-model-single .skoda-model-page [data-component="derivative-introduction-data"] .skoda-attributes-container {
        padding-top: 20px;
    }
    body.skoda-model-single .skoda-model-page [data-component="derivative-introduction-data"] .skoda-attributes-container--padding-bottom {
        padding-bottom: 12px;
    }
    body.skoda-model-single .skoda-model-page [data-component="derivative-introduction-data"] .skoda-prices-attributes-wrapper {
        gap: 20px;
    }
    body.skoda-model-single .skoda-trims-tab-btn {
        padding: 6px 6px !important;
        min-height: 44px !important;
        margin: 2px 2px 8px !important;
    }
    body.skoda-model-single .skoda-trims-tabs-nav .skoda-tabs-scroll,
    body.skoda-model-single .skoda-gallery-tab-tb__nav {
        gap: 10px;
        padding: 4px;
        justify-content: flex-start;
    }
    body.skoda-model-single .skoda-gallery-tab-tb__carousel {
        padding-left: 15px;
        padding-right: 15px;
        --skoda-gtt-pad: 15px;
        --skoda-gtt-gap: 12px;
    }
    body.skoda-model-single .skoda-gallery-tab-tb__nav .skoda-trims-tab-btn {
        max-width: none;
    }
    body.skoda-model-single .xc-single-gallery .xc-gallery-tabs-scroll {
        padding-left: max(15px, env(safe-area-inset-left, 0px));
    }
    body.skoda-model-single .xc-single-gallery .xc-gallery-title-wrap {
        padding-left: max(15px, env(safe-area-inset-left, 0px));
    }
}

/*==============================================
 * SKODA FOOTER OVERRIDES (.xc-footer-1, .xc-footer-2)
 *==============================================*/
/* --- Top Container (.xc-footer-1) --- */
.xc-footer-1 {
    background-color: var(--skoda-dark-green) !important; /* #0e3a2f */
    color: var(--skoda-white) !important;
    padding: 30px 0 0 0 !important;
}
@media (min-width: 576px) { .xc-footer-1 { padding-top: 35px !important; } }
@media (min-width: 992px)  { .xc-footer-1 { padding-top: 30px !important; } }
@media (min-width: 1200px) { .xc-footer-1 { padding-top: 40px !important; } }

/* Fix Flatsome P tag margin in footer */
.xc-footer-1 p, .xc-footer-2 p {
    color: var(--skoda-white) !important;
    font-size: 14px;
    font-weight: 300;
    line-height: 114%;
}

/* Support Menu BEM (.xc-footer-1__support ul li) */
.xc-footer-1__support {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
@media (min-width: 576px) {
    .xc-footer-1__support {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
    }
}
@media (min-width: 1200px) {
    .xc-footer-1__support { gap: 40px; }
}
.xc-footer-1__support li {
    display: flex;
    flex-direction: column;
    color: var(--skoda-white);
    margin: 0;
    gap: 6px;
    align-items: flex-start;
}
.xc-footer-1__support .support-name {
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px;
    font-weight: 300;
    line-height: 117%;
    color: var(--skoda-white);
    min-height: 14px;
}
.xc-footer-1__support .support-link {
    display: flex;
    align-items: center;
    gap: 5px;
}
.xc-footer-1__support .support-link i {
    font-size: 22px;
    color: var(--skoda-white);
}
@media (min-width: 1200px) {
    .xc-footer-1__support .support-link i { font-size: 24px; }
}
.xc-footer-1__support .support-link a {
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 114%;
    color: var(--skoda-white) !important;
}

/* Contacts Row (1st row) */
.xc-footer-1 .section-content > .row:nth-child(1) {
    margin-bottom: 30px;
}

/* Social Icons */
.xc-footer-1 .social-icons {
    display: flex;
    align-items: center;
    width: 100%;
}
@media (min-width: 576px) {
    .xc-footer-1 .social-icons { width: auto; justify-content: flex-end; }
}
.xc-footer-1 .social-icons .button.icon {
    flex: auto;
    max-width: 48px;
    text-align: left;
    background: transparent !important;
    border: none !important;
    color: var(--skoda-white) !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (min-width: 576px) {
    .xc-footer-1 .social-icons .button.icon {
        flex: none;
        max-width: none;
        text-align: center;
        margin-inline-end: 25px !important;
    }
}
@media (min-width: 992px) {
    .xc-footer-1 .social-icons .button.icon { margin-inline-end: 14px !important; justify-content: flex-end; }
    .xc-footer-1 .section-content > .row:nth-child(1) .col:last-child {
        display: flex;
        justify-content: flex-end;
    }
}
.xc-footer-1 .social-icons .button.icon:last-child {
    margin-inline-end: 0 !important;
}
.xc-footer-1 .social-icons .button.icon i {
    font-size: 20px;
}

/* Tools Section (2nd row) */
.xc-footer-1 .section-content > .row:nth-child(2) {
    position: relative;
    padding: 30px 0;
}
/* Separator lines for Tools */
.xc-footer-1 .section-content > .row:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    height: 1px;
    background-color: var(--skoda-white);
    opacity: 0.3;
}
.xc-footer-1 .section-content > .row:nth-child(2)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: 1px;
    background-color: var(--skoda-white);
    opacity: 0.3;
}
@media (min-width: 992px) {
    .xc-footer-1 .section-content > .row:nth-child(2) { padding: 14px 0; }
}

.xc-footer-1__menu-horizonal {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px; /* Add gap between items for mobile */
}
@media (min-width: 576px) {
    .xc-footer-1__menu-horizonal { gap: 20px; }
}
.xc-footer-1__menu-horizonal .ux-menu-link__link {
    border: none !important;
    color: var(--skoda-white) !important;
}
.xc-footer-1__menu-horizonal .ux-menu-link {
    margin: 0 !important; /* Reset Flatsome default margins */
}
.xc-footer-1__menu-horizonal .ux-menu-link__text {
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px;
    font-weight: 300;
    line-height: 114%;
    white-space: nowrap;
}
@media (min-width: 576px) {
    .xc-footer-1__menu-horizonal .ux-menu-link__text { font-size: 11px; line-height: 118%; }
}

/* Make "Xem thêm" stand out like section title */
.xc-footer-1__menu-horizonal .ux-menu-link:first-child .ux-menu-link__text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 118%;
    display: block;
}
@media (min-width: 576px) {
    .xc-footer-1__menu-horizonal .ux-menu-link:first-child { flex-basis: 100%; margin-bottom: 12px; margin-right: 0; }
}
@media (min-width: 992px) {
    .xc-footer-1__menu-horizonal .ux-menu-link:first-child { flex-basis: auto; margin-right: 25px; margin-bottom: 0; }
}

/* Links Section (3rd row) */
.xc-footer-1 .section-content > .row:nth-child(3) {
    margin-top: 35px;
    margin-bottom: 35px;
}
.xc-footer-1__menu-title {
    font-family: var(--skoda-font-primary) !important;
    color: var(--skoda-white) !important;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.xc-footer-1 a.xc-footer-1__menu-title,
.xc-footer-1 a.xc-footer-1__menu-title:hover,
.xc-footer-1 a.xc-footer-1__menu-title:focus,
.xc-footer-1 a.xc-footer-1__menu-title:visited {
    color: var(--skoda-white) !important;
    text-decoration: none !important;
}
/* Fake icon for mobile accordion look if wanted */
.xc-footer-1__menu-title::after {
    content: '\e911'; /* angle down */
    font-family: 'fl-icons';
    font-size: 16px;
    transition: transform 0.3s;
}
@media (min-width: 992px) {
    .xc-footer-1__menu-title::after { display: none; }
    .xc-footer-1__menu-title { cursor: default; margin-bottom: 35px; }
}

.xc-footer-1__menu-2 .ux-menu-link__link {
    border: none !important;
    padding: 0 !important;
    padding-bottom: 16px !important;
    color: var(--skoda-white) !important;
}
.xc-footer-1__menu-2 .ux-menu-link__text {
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;
}

/* --- Disclaimer & Bottom Container (.xc-footer-2) --- */
.xc-footer-2 {
    background-color: var(--skoda-deepest-green) !important; /* #00271d */
    padding: 0 0 32px 0 !important;
}

/* Disclaimer Accordion */
.xc-footer-2 .accordion {
    margin-bottom: 0 !important;
}
.xc-footer-2 .accordion-item {
    background: var(--skoda-deepest-green) !important; /* Original dark footer uses #00271d */
}

.xc-footer-2 .accordion-title {
    background: transparent !important;
    border: none !important;
    color: var(--skoda-white) !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 109%;
    padding: 30px 0; /* Remove 15px horizontal padding to align with other text */
    text-transform: none;
    display: flex;
    align-items: center;
    flex-direction: row-reverse; /* Icon to right */
    justify-content: flex-end;
}
@media (min-width: 1200px) {
    .xc-footer-2 .accordion-title { font-size: 12px; line-height: 117%; }
}
.xc-footer-2 .accordion .toggle {
    position: relative !important;
    left: auto !important;
    margin-right: 0 !important;
    margin-left: 5px !important;
    top: 0 !important;
    color: var(--skoda-white) !important;
}
.xc-footer-2 .accordion-inner {
    border: none !important;
    padding: 0 !important; /* Move padding to inner child to prevent jQuery slide toggle jumping */
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.33;
    color: var(--skoda-white) !important;
    background: transparent !important;
}
.xc-footer-2 .accordion-inner p {
    padding-bottom: 30px !important; /* Apply the spacing here instead */
    margin-bottom: 0 !important;
}
@media (min-width: 1200px) {
    .xc-footer-2 .accordion-inner { font-size: 14px; line-height: 1.29; }
}

/* Bottom Container Section */
.xc-footer-2 .section-content > .row:nth-child(2) {
    padding-top: 32px;
}
@media (min-width: 576px) {
    .xc-footer-2 .section-content > .row:nth-child(2) { padding-top: 17px; align-items: baseline; }
}
/* Clean up Desktop Layout for row 2 (Let Flatsome grid handle 3 columns natively) */

.xc-footer-2__copyright-text {
    font-family: var(--skoda-font-primary) !important;
    font-size: 11px;
    font-weight: 300;
    line-height: 1.27;
    margin-bottom: 0 !important;
    margin-top: 25px; /* On mobile it's at top usually */
}
@media (min-width: 576px) {
    .xc-footer-2__copyright-text { margin-top: 0; }
}

.xc-footer-2__menu {
    flex-direction: column !important;
    align-items: flex-start;
    margin-bottom: 0;
}
@media (min-width: 576px) {
    .xc-footer-2__menu { flex-direction: row !important; }
}
.xc-footer-2__menu .ux-menu-link {
    margin-top: 25px;
}
@media (min-width: 576px) {
    .xc-footer-2__menu .ux-menu-link { margin: 0 25px 0 0 !important; }
}
.xc-footer-2__menu .ux-menu-link__link {
    border: none !important;
    padding: 0 !important;
    color: var(--skoda-white) !important;
}
.xc-footer-2__menu .ux-menu-link__text {
    font-family: var(--skoda-font-primary) !important;
    font-size: 11px;
    font-weight: 300;
    line-height: 1.27;
}

.xc-footer-2__menu-languages {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline;
    justify-content: flex-start;
}
@media (min-width: 768px) {
    .xc-footer-2__menu-languages {
        justify-content: flex-end; /* Push EN/VI to the right side of its column */
    }
}
.xc-footer-2__menu-languages .ux-menu-link {
    margin: 0 20px 0 0 !important; /* Reset Flatsome stack margin-top, set margin-right */
}
.xc-footer-2__menu-languages .ux-menu-link:last-child {
    margin: 0 !important; /* Reset all margins for the last element */
}
.xc-footer-2__menu-languages .ux-menu-link__link {
    border: none !important;
    padding: 0 !important;
    color: var(--skoda-white) !important;
}
.xc-footer-2__menu-languages .ux-menu-link__text {
    font-family: var(--skoda-font-primary) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.11;
    position: relative;
    display: inline-block;
}
@media (min-width: 576px) {
    .xc-footer-2__menu-languages .ux-menu-link__text { font-size: 12px; letter-spacing: 1px; line-height: 1.17; }
}
/* Divider between languages (Attached directly to text for perfect vertical centering) */
.xc-footer-2__menu-languages .ux-menu-link:first-child .ux-menu-link__text::before {
    content: '';
    position: absolute;
    right: -11px; /* Perfectly centered horizontally in the 20px gap */
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 2px;
    background-color: var(--skoda-white);
    margin: 0;
}
@media (min-width: 576px) {
    .xc-footer-2__menu-languages .ux-menu-link:first-child .ux-menu-link__text::before { height: 11px; }
}
/* Separator underline for active language */
.xc-footer-2__menu-languages .ux-menu-link.active .ux-menu-link__text::after {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--skoda-white);
    position: absolute;
    bottom: -5px;
}

/*==============================================
 * HIGHLIGHTS / IMPORTANT FEATURES CAROUSEL
 *==============================================*/
.xc-single-important {
    padding: 60px 15px;
    background-color: var(--skoda-white);
    max-width: 1600px;
    margin: 0 auto;
}
.xc-single-important__header {
    text-align: left;
    margin-bottom: 40px;
}
.xc-single-important__title {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--skoda-black);
}
.xc-single-important__outer {
    position: relative;
}
/* Kéo dài navigation arrows ra ngoài container giống thiết kế */
.xc-single-important.has-arrows .xc-single-important__swiper {
    margin: 0 50px;
}
.xc-single-important__tile {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.xc-single-important__tile-image {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 ratio */
    overflow: hidden;
}
.xc-single-important__tile-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xc-single-important__tile-body {
    background-color: var(--skoda-light-gray);
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.xc-single-important__tile-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
}
.xc-single-important__tile-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--skoda-mid-gray);
    margin-bottom: 25px;
    flex-grow: 1;
}
.xc-single-important__tile-link {
    display: inline-flex;
    align-items: center;
    color: var(--skoda-black);
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
    margin-top: auto;
}
.xc-single-important__tile-link:hover {
    color: var(--skoda-primary-green);
}
.xc-single-important__tile-link-icon {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    transition: transform 0.3s ease;
}
.xc-single-important__tile-link:hover .xc-single-important__tile-link-icon {
    transform: translateX(4px);
}

/* Nav arrows */
.xc-single-important__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--skoda-light-gray);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--skoda-black);
    transition: background-color 0.3s, opacity 0.3s;
}
@media (max-width: 991px) {
    .xc-single-important__nav { display: none; }
}
.xc-single-important__nav:hover {
    background: #e4e4e4;
}
.xc-single-important__nav--disabled {
    opacity: 0.3;
    pointer-events: none;
}
.xc-single-important__nav svg {
    width: 24px;
    height: 24px;
}
.xc-single-important__nav--prev {
    left: 0;
}
.xc-single-important__nav--next {
    right: 0;
}

/* Pagination rail */
.xc-single-important__pagination {
    margin-top: 30px;
}
.xc-single-important__pagination-rail {
    height: 4px;
    background: #e4e4e4;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.xc-single-important__pagination-handle {
    height: 100%;
    background: var(--skoda-primary-green);
    position: absolute;
    top: 0;
    left: 0;
    transition: left 0.3s ease;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .xc-single-important__swiper.swiper {
        overflow: visible; /* Show part of next slide */
    }
    .xc-single-important .swiper-slide {
        width: 80%; /* Show partial next slide */
        padding-right: 20px;
    }
}
@media (min-width: 1200px) {
    .xc-single-important .swiper-slide {
        width: 60%;
    }
}

/*==============================================
 * SKODA SECTION TITLES
 *==============================================*/
/* Match Skoda CPV3 module-headline: sentence case, 30 / 36 / 42 px scale */
h2.skoda-section-title,
.skoda-section-title,
h2.section-title,
.section-title-main,
.section-title span.section-title-main {
    font-family: var(--skoda-font-primary), sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: rgb(22, 23, 24) !important;
    text-transform: none !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
}
/* Hide Flatsome default horizontal lines before/after section titles */
h2.section-title b,
.section-title-container b {
    display: none !important;
}
/* Ensure titles are perfectly centered after hiding b tags */
.section-title-center {
    justify-content: center !important;
}
.section-title-center .section-title-main {
    text-align: center !important;
    width: 100% !important;
}
h2.section-title span {
    text-transform: none !important;
}

@media (min-width: 576px) {
    h2.skoda-section-title,
    .skoda-section-title,
    h2.section-title,
    .section-title-main,
    .section-title span.section-title-main {
        font-size: 36px !important;
        line-height: 1.19 !important;
    }
}
@media (min-width: 1200px) {
    h2.skoda-section-title,
    .skoda-section-title,
    h2.section-title,
    .section-title-main,
    .section-title span.section-title-main {
        font-size: 42px !important;
        line-height: 1.19 !important;
    }
}

/*==============================================
 * ICON BOX (SKODA BLOCK CÔNG CỤ)
 *==============================================*/
/* Endpoints-style tile: ~110px block, 30px horizontal inset, centered stack */
.skoda-model-page .icon-box {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 0 30px;
    border-radius: 4px;
    height: 100%;
    margin-bottom: 0 !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
}
@media (min-width: 550px) and (max-width: 849px) {
    .skoda-model-page .icon-box {
        min-height: 97px;
    }
}
.skoda-model-page .icon-box .icon-box-img {
    width: 50px !important;
    max-width: 50px !important;
    margin-bottom: 10px !important;
    flex-shrink: 0;
}
.skoda-model-page .icon-box .icon-box-img img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    object-fit: contain;
    padding-top: 0 !important;
}
.skoda-model-page .icon-box .icon-box-title,
.skoda-model-page .icon-box .icon-box-text h3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1.17 !important;
    color: #161718 !important;
}
.icon-box .icon-box-title,
.icon-box .icon-box-text h3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
.icon-box .icon-box-title::after,
.icon-box .icon-box-text h3::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M17.22 11.96L9.86 19.32L8.38 17.84L14.26 11.96L8.38 6.08L9.86 4.6L17.22 11.96Z' fill='%23161718'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}
.icon-box:hover .icon-box-title::after,
.icon-box:hover .icon-box-text h3::after {
    transform: translateX(4px);
}

/* UX block cong cu (cuoi single model): luoi 1600px + padding 15px nhu cac .container Skoda */
.skoda-model-tools-global {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.skoda-model-tools-global .section .section-content {
    max-width: 1600px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.skoda-model-tools-global .section .section-content > .row {
    max-width: none !important;
    width: 100%;
}

/* Headline spacing aligned with Skoda Endpoints module-headline */
.xc-single-section-tool .section-title-container {
    margin-bottom: 25px !important;
}
@media (min-width: 576px) {
    .xc-single-section-tool .section-title-container {
        margin-bottom: 30px !important;
    }
}
@media (min-width: 1200px) {
    .xc-single-section-tool .section-title-container {
        margin-bottom: 40px !important;
    }
}

/*==============================================
 * SKODA UTILITIES BOX (Flatsome Image Box Style)
 *==============================================*/
.xc-util-row {
    max-width: 1200px;
    justify-content: center;
}
.skoda-util-box {
    background-color: #ffffff;
    height: 100%;
}
.skoda-util-box .box-text {
    padding: 20px 30px;
}
.skoda-util-box .skoda-util-title {
    font-family: var(--skoda-font-primary), sans-serif;
    font-weight: 300;
    font-size: 18px;
    margin: 0 0 20px 0;
    line-height: 1.5;
    color: #161718;
    text-transform: none;
    min-height: calc(18px * 1.5 * 2);
}
.skoda-util-box .skoda-util-title span {
    font-family: var(--skoda-font-primary), sans-serif !important;
}
.skoda-util-box .skoda-util-btn {
    color: #161718;
    font-family: var(--skoda-font-primary), sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.skoda-util-box .skoda-util-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
    margin-left: 8px;
    transition: transform 0.2s ease-out;
}
.skoda-util-box:hover .skoda-util-btn svg,
.skoda-util-btn:hover svg {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .skoda-util-box .box-text { padding: 15px 20px; }
    .skoda-util-box .skoda-util-title { font-size: 16px; min-height: calc(16px * 1.5 * 2); }
}
@media (max-width: 575px) {
    .skoda-util-box .box-text { padding: 15px; }
    .skoda-util-box .skoda-util-title { font-size: 14px; min-height: calc(14px * 1.5 * 2); margin-bottom: 15px; }
}

/*==============================================
 * SINGLE GALLERY (Model Character Gallery style)
 *==============================================*/
.xc-single-gallery.skoda-section {
    background-color: #f3f3f3;
    padding-top: 48px;
    padding-bottom: 48px;
    overflow: hidden;
}
.xc-single-gallery .xc-gallery-title-wrap {
    text-align: left;
    padding-left: 15px;
}
.xc-single-gallery .xc-gallery-tabs-nav {
    margin-bottom: 24px;
}
@media (min-width: 576px) {
    .xc-single-gallery .xc-gallery-tabs-nav {
        margin-bottom: 32px;
    }
}
@media (min-width: 992px) {
    .xc-single-gallery .xc-gallery-tabs-nav {
        margin-bottom: 40px;
    }
}
.xc-single-gallery .xc-gallery-tabs-scroll {
    padding-left: 15px;
    justify-content: flex-start;
}
.xc-single-gallery.single-tab .xc-gallery-tabs-nav {
    display: none;
}
.xc-single-gallery .gallery-tab-content {
    width: 100%;
}
.xc-single-gallery .gallery-tab-content.active {
    display: block !important;
}
.xc-single-gallery .carousel-wrapper-container,
.xc-single-gallery .carousel-wrapper-row {
    padding: 0;
}
.xc-single-gallery .carousel-wrapper-col {
    padding-left: 15px;
    padding-right: 15px;
}
.xc-single-gallery .container {
    max-width: 1600px;
}
.xc-single-gallery .slider {
    overflow: visible;
    padding-left: 20px;
    padding-right: 20px;
}
@media (min-width: 576px) {
    .xc-single-gallery .slider {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (min-width: 992px) {
    .xc-single-gallery .slider {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media (min-width: 1200px) {
    .xc-single-gallery .slider {
        padding-left: 60px;
        padding-right: 60px;
    }
}
.xc-single-gallery .gallery-slide-item {
    width: 92% !important;
    padding-right: 30px !important;
    transition: opacity 0.3s ease;
}
.xc-single-gallery .flickity-slider > .gallery-slide-item {
    width: 92% !important; /* override Flatsome's width:100%!important */
}
.xc-single-gallery .gallery-media {
    position: relative;
    width: 100%;
    padding-top: 50%; /* 2:1 ratio like original module */
    overflow: hidden;
}
.xc-single-gallery .gallery-slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.xc-single-gallery .gallery-slide-title {
    margin-top: 20px;
    margin-bottom: 0;
    text-align: center;
    color: #161718;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.71;
}
@media (min-width: 576px) {
    .xc-single-gallery .gallery-slide-title {
        font-size: 16px;
        line-height: 1.5;
    }
}
@media (min-width: 1200px) {
    .xc-single-gallery .gallery-slide-title {
        font-size: 18px;
    }
}
.xc-single-gallery .flickity-prev-next-button {
    box-shadow: none !important;
    background: #f1f1f1 !important;
    color: #161718 !important;
    border: 1px solid #d8d8d8;
    width: 32px;
    height: 32px;
    opacity: 1 !important;
    top: 25%;
    margin: 0 !important;
    transform: none !important;
    z-index: 20;
}
.xc-single-gallery .flickity-prev-next-button.previous {
    left: 16px !important;
}
.xc-single-gallery .flickity-prev-next-button.next {
    right: 16px !important;
}
.xc-single-gallery .flickity-prev-next-button:hover {
    background: #e4e4e4 !important;
}
@media (min-width: 720px) {
    .xc-single-gallery .flickity-prev-next-button {
        width: 40px;
        height: 40px;
    }
    .xc-single-gallery .flickity-prev-next-button {
        top: 25%;
    }
}
@media (min-width: 1440px) {
    .xc-single-gallery .flickity-prev-next-button {
        width: 44px;
        height: 44px;
    }
}
@media (max-width: 849px) {
    .xc-single-gallery .gallery-slide-item {
        width: 94% !important;
        padding-right: 15px !important;
    }
    .xc-single-gallery .flickity-slider > .gallery-slide-item {
        width: 94% !important;
    }
    .xc-single-gallery .flickity-prev-next-button {
        top: 22%;
    }
}

/* Gallery slides: Flatsome image-box (stack vs split) — overrides .skoda-model-page tool icon-box */
.xc-single-gallery .skoda-gallery-imagebox.icon-box {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    height: auto !important;
}
.xc-single-gallery .skoda-gallery-imagebox .icon-box-img {
    margin-bottom: 0 !important;
}
.xc-single-gallery .skoda-gallery-imagebox .icon-box-img img {
    width: 100% !important;
    max-width: none !important;
    padding-top: 0 !important;
}
.xc-single-gallery.xc-gallery-layout--stack .skoda-gallery-stack-img {
    width: 100% !important;
    max-width: none !important;
}
.xc-single-gallery.xc-gallery-layout--stack .skoda-gallery-stack-inner {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 50%;
    overflow: hidden;
}
.xc-single-gallery.xc-gallery-layout--stack .skoda-gallery-img--stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xc-single-gallery.xc-gallery-layout--stack .skoda-gallery-text {
    margin-top: 20px;
    padding: 0 8px;
}
.xc-single-gallery.xc-gallery-layout--split .skoda-gallery-imagebox.icon-box-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}
@media (min-width: 850px) {
    .xc-single-gallery.xc-gallery-layout--split .skoda-gallery-imagebox.icon-box-left {
        flex-wrap: nowrap;
        gap: 40px;
    }
}
.xc-single-gallery.xc-gallery-layout--split .skoda-gallery-split-img {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none !important;
}
@media (min-width: 850px) {
    .xc-single-gallery.xc-gallery-layout--split .skoda-gallery-split-img {
        flex: 0 0 48%;
        max-width: 48% !important;
    }
}
.xc-single-gallery.xc-gallery-layout--split .skoda-gallery-split-img .icon-inner {
    display: block;
    width: 100%;
}
.xc-single-gallery.xc-gallery-layout--split .skoda-gallery-split-img .skoda-gallery-img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.xc-single-gallery.xc-gallery-layout--split .skoda-gallery-text {
    flex: 1 1 100%;
    text-align: left !important;
}
@media (min-width: 850px) {
    .xc-single-gallery.xc-gallery-layout--split .skoda-gallery-text {
        flex: 1 1 0;
        min-width: 0;
    }
}
.xc-single-gallery .skoda-gallery-heading {
    margin: 0 0 12px 0;
    color: #161718;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
}
.xc-single-gallery .skoda-gallery-sub {
    margin: 0 0 10px 0;
    color: #161718;
    font-weight: 600;
    font-size: 14px;
}
.xc-single-gallery .skoda-gallery-body {
    color: #161718;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.65;
}
.xc-single-gallery .skoda-gallery-body p {
    margin: 0 0 0.75em;
}
.xc-single-gallery .skoda-gallery-body p:last-child {
    margin-bottom: 0;
}
.xc-single-gallery.xc-gallery-layout--split .flickity-prev-next-button {
    top: 50%;
    transform: translateY(-50%);
}
@media (min-width: 850px) {
    .xc-single-gallery.xc-gallery-layout--split .flickity-prev-next-button.previous {
        left: 8px !important;
    }
    .xc-single-gallery.xc-gallery-layout--split .flickity-prev-next-button.next {
        right: 8px !important;
    }
}

/*==============================================
 * MEGA MENU MÀU XE (SHORTCUTS & CAR TABS)
 *==============================================*/
/* Section base */
.mega-menu-mau-xe {
    padding: 48px 64px !important;
}
@media (max-width: 991px) {
    .mega-menu-mau-xe { padding: 48px 32px !important; }
}
@media (max-width: 575px) {
    .mega-menu-mau-xe { padding: 32px 16px !important; }
}

/* Col Left - Phím tắt */
.mega-menu-mau-xe .phim-tat {
    margin-bottom: 48px;
}
.mega-menu-mau-xe .ux-menu-title {
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    margin-bottom: 8px !important;
    color: var(--skoda-black) !important;
}
@media (min-width: 1440px) {
    .mega-menu-mau-xe .ux-menu-title { font-size: 16px !important; }
}

.mega-menu-mau-xe .ux-menu-link {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.mega-menu-mau-xe .ux-menu-link__link {
    border-bottom: none !important; /* Xóa underline mặc định của Flatsome */
    display: inline-flex !important;
    align-items: center;
}
.mega-menu-mau-xe .ux-menu-link__text {
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: var(--skoda-black) !important;
    margin: 0 8px !important;
    border-bottom: 1px solid transparent;
    transition: 0.15s ease-in-out;
}
.mega-menu-mau-xe .ux-menu-link:hover .ux-menu-link__text {
    border-bottom: 1px solid var(--skoda-black);
}
@media (min-width: 1440px) {
    .mega-menu-mau-xe .ux-menu-link__text { font-size: 16px !important; }
}

.mega-menu-mau-xe .button.primary.lowercase {
    text-transform: none !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.75px !important;
    background-color: #78faae !important;
    color: #161718 !important;
    border-radius: 1000px !important;
    padding: 14px 24px !important;
    box-shadow: none !important;
}
.mega-menu-mau-xe .button.primary.lowercase:hover {
    background-color: #72E3A1 !important;
}

/* Col Right - Tabs */
.mega-menu-mau-xe .tabbed-content .nav {
    border: none !important;
    background-color: transparent !important;
    gap: 8px; /* khoảng cách giữa các tab */
    padding-bottom: 24px;
    justify-content: center !important;
    border-bottom: 2px solid #31694B !important; /* Line xanh dưới header tab */
    position: relative;
}
.mega-menu-mau-xe .tabbed-content .nav > li {
    margin: 0 !important;
}
.mega-menu-mau-xe .tabbed-content .nav > li > a {
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--skoda-black) !important;
    border: none !important;
    border-radius: 555px !important;
    padding: 6px 16px !important;
    transition: 0.3s ease-out !important;
    letter-spacing: 0.02em !important;
    background: transparent !important;
}
@media (min-width: 1440px) {
    .mega-menu-mau-xe .tabbed-content .nav > li > a { font-size: 18px !important; }
}

.mega-menu-mau-xe .tabbed-content .nav > li > a:hover {
    background-color: rgb(241, 241, 241) !important;
}
.mega-menu-mau-xe .tabbed-content .nav > li.active > a {
    font-weight: 700 !important;
    color: #161718 !important;
}
.mega-menu-mau-xe .tabbed-content .nav > li.active > a:hover {
    background-color: transparent !important;
}

/* Đảm bảo tab line active chìm xuống đè lên green divider nếu cần, theo React layout thì có green divider dính dưới tab */
/* Ở MaterialUI HTML: span.MuiTabs-indicator có màu xanh #31694b */
.mega-menu-mau-xe .tabbed-content .nav::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #31694B;
    z-index: 1;
}

/* Grid xe trong tab-panel */
.mega-menu-mau-xe .tab-panels {
    padding-top: 24px !important;
    padding-inline: 2px 8px !important;
}
.mega-menu-mau-xe .tab-panels .col {
    padding-bottom: 24px !important;
}

/* Kiểu dáng Box hình xe */
.mega-menu-mau-xe .box {
    background-color: rgb(241, 241, 241) !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    height: 100%;
}
/* Hiệu ứng hover nổi bật giống CardActionArea của MUI */
.mega-menu-mau-xe .box:hover {
    border-color: rgb(216, 216, 216) !important;
    border-width: 3px !important;
    transform: scale(1.02);
}

.mega-menu-mau-xe .box-image {
    padding: 16px 16px 0 16px !important;
}
.mega-menu-mau-xe .box-image img {
    border-radius: 4px;
}
.mega-menu-mau-xe .box-text {
    padding: 0 16px 16px 16px !important;
    text-align: left !important;
}
.mega-menu-mau-xe .box-text p {
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--skoda-black) !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
}
@media (min-width: 1440px) {
    .mega-menu-mau-xe .box-text p { font-size: 16px !important; }
}

/* CSS cho Nhãn "Mới" (nếu có thêm class `badge-moi` trước box-text) */
.mega-menu-mau-xe .badge-moi {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 11px;
    line-height: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 900;
    color: #fff;
    background-color: rgb(14, 58, 47);
    padding: 5px 7px 5px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/*==============================================
 * TRIMS TABS (Skoda TrimsModule-style)
 *==============================================*/
body.skoda-trims-modal-open {
    overflow: hidden;
}

.skoda-model-page--flexible .skoda-tabs-container > .skoda-tab-content:not(.active) {
    display: none;
}
.skoda-model-page--flexible .skoda-tabs-container > .skoda-tab-content.active.row {
    display: flex;
}
.skoda-model-page--flexible .skoda-tabs-container > .skoda-tab-content.active:not(.row) {
    display: block;
}

.skoda-trims-module {
    background-color: #f3f3f3;
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Tab layout: image top, content bottom (stack) — align TechnologyModule: fixed image heights, no LR flex bleed */
.skoda-trims-module--tb .skoda-trims-panel--tb {
    flex-direction: column;
}
@media (min-width: 992px) {
    .skoda-trims-module--tb .skoda-trims-panel--tb {
        display: block;
    }
}
.skoda-trims-module--tb .skoda-trims-image-col,
.skoda-trims-module--tb .skoda-trims-content-col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
@media (min-width: 992px) {
    .skoda-trims-module--tb .skoda-trims-image-col,
    .skoda-trims-module--tb .skoda-trims-content-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* Technology-style image strip (avoids empty band when LR rules set img to position:relative) */
.skoda-trims-module--tb .skoda-trims-image-wrap {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    height: 190px;
    min-height: 0;
    margin: 0 0 15px;
}
@media (min-width: 576px) {
    .skoda-trims-module--tb .skoda-trims-image-wrap {
        height: 360px;
    }
}
@media (min-width: 992px) {
    .skoda-trims-module--tb .skoda-trims-image-wrap {
        height: 400px;
        margin-bottom: 15px;
    }
}
@media (min-width: 1200px) {
    .skoda-trims-module--tb .skoda-trims-image-wrap {
        height: 500px;
        margin-bottom: 20px;
    }
}
.skoda-trims-module--tb .skoda-trims-image-wrap::after {
    display: none;
}
.skoda-trims-module--tb .skoda-trims-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
}
.skoda-trims-module--tb .skoda-trims-content-col {
    padding: 28px 18px 36px;
    text-align: center;
}
@media (min-width: 576px) {
    .skoda-trims-module--tb .skoda-trims-content-col {
        padding-top: 36px;
        padding-bottom: 44px;
    }
}
.skoda-trims-module--tb .skoda-trims-content-inner {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 640px;
}
.skoda-trims-module--tb .skoda-trims-headline {
    margin-top: 0;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
.skoda-trims-module--tb .skoda-trims-subline {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.skoda-trims-module--tb .skoda-trims-price-area {
    align-items: center;
    justify-content: center;
}
.skoda-trims-module--tb .skoda-trims-teaser {
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.skoda-trims-module--tb .skoda-trims-bullets {
    max-width: 480px;
    max-height: none;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.skoda-trims-module--tb .skoda-trims-readmore-wrap {
    position: static;
    padding-bottom: 0;
    margin-top: 20px;
}
@media (min-width: 576px) {
    .skoda-trims-module--tb .skoda-trims-readmore-wrap {
        margin-top: 15px;
    }
}
@media (min-width: 1200px) {
    .skoda-trims-module--tb .skoda-trims-readmore-wrap {
        margin-top: 20px;
    }
}
.skoda-trims-module--tb .skoda-trims-readmore {
    justify-content: center;
}

.skoda-trims-module .container {
    max-width: 1600px;
}
.skoda-trims-module-headline {
    text-align: center;
    margin-bottom: 8px;
}
/* h2.section-title is flex (Flatsome); force full-width row + centered main title */
.skoda-trims-module-headline h2.section-title.section-title-center,
.skoda-trims-module-headline h2.skoda-trims-h2.section-title-center {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
}
.skoda-trims-module-headline .section-title-main {
    margin-bottom: 0;
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
/* Flatsome .col default padding-bottom:30px leaves a pale band under the headline */
.skoda-trims-module .row .col:has(.skoda-trims-module-headline) {
    padding-bottom: 12px;
}
.skoda-trims-tabs-nav {
    margin-bottom: 24px;
}
@media (min-width: 576px) {
    .skoda-trims-tabs-nav { margin-bottom: 32px; }
}
@media (min-width: 992px) {
    .skoda-trims-tabs-nav { margin-bottom: 40px; }
}

.skoda-trims-panel {
    background-color: #fff;
    display: block;
}
@media (min-width: 992px) {
    .skoda-trims-panel {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
}

.skoda-trims-image-col {
    width: 100%;
    flex: 0 0 100%;
}
@media (min-width: 992px) {
    .skoda-trims-image-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.skoda-trims-image-wrap {
    position: relative;
    overflow: hidden;
    padding-top: 67.86%;
}
@media (min-width: 576px) {
    .skoda-trims-image-wrap { padding-top: 51.34%; }
}
@media (min-width: 992px) {
    .skoda-trims-image-wrap {
        padding-top: 0;
        min-height: 480px;
        height: 100%;
    }
}

.skoda-trims-image-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(55, 55, 55, 0) 66%, #373737);
}
@media (min-width: 992px) {
    .skoda-trims-image-wrap::after {
        background: linear-gradient(180deg, rgba(55, 55, 55, 0) 77%, #373737);
    }
}

.skoda-trims-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
@media (min-width: 992px) {
    .skoda-trims-image {
        position: relative;
        min-height: 480px;
    }
}
.skoda-trims-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.skoda-trims-content-col {
    padding: 30px 18px 30px 30px;
    width: 100%;
    position: relative;
}
@media (min-width: 576px) {
    .skoda-trims-content-col {
        padding: 40px 18px 0;
    }
}
@media (min-width: 992px) {
    .skoda-trims-content-col {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 5.5% 0 5.5%;
        display: flex;
        align-items: stretch;
    }
}
@media (min-width: 1200px) {
    .skoda-trims-content-col {
        padding-inline: 6.5%;
    }
}

.skoda-trims-content-inner {
    width: 100%;
    position: relative;
    padding-bottom: 30px;
}
@media (min-width: 576px) {
    .skoda-trims-content-inner { padding-bottom: 40px; }
}
@media (min-width: 992px) {
    .skoda-trims-content-inner {
        padding-bottom: 0;
        min-height: 100%;
    }
}

.skoda-trims-headline {
    color: #161718;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.21;
    margin: 0 0 10px;
}
@media (min-width: 576px) {
    .skoda-trims-headline {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 5px;
    }
}
@media (min-width: 992px) {
    .skoda-trims-headline {
        margin-top: 50px;
    }
}
@media (min-width: 1200px) {
    .skoda-trims-headline {
        font-size: 36px;
        line-height: 1.19;
        margin-top: 55px;
        margin-bottom: 10px;
    }
}

.skoda-trims-subline {
    color: #161718;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.skoda-trims-price-block {
    margin-bottom: 24px;
}
@media (min-width: 576px) {
    .skoda-trims-price-block {
        margin-bottom: 30px;
    }
}
@media (min-width: 1200px) {
    .skoda-trims-price-block {
        margin-bottom: 40px;
    }
}

.skoda-trims-price-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
@media (min-width: 576px) {
    .skoda-trims-price-area {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
}

.skoda-trims-price-value-wrap {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    padding-inline-start: 0;
    max-width: 100%;
    min-width: 0;
}

.skoda-trims-price-value,
.skoda-trims-currency {
    color: #161718;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.13;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (min-width: 1200px) {
    .skoda-trims-price-value,
    .skoda-trims-currency {
        font-size: 18px;
        line-height: 1.11;
    }
}

.skoda-trims-price-space {
    display: inline-block;
    width: 4px;
}

.skoda-trims-teaser {
    color: #161718;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 16px;
}
.skoda-trims-teaser p {
    margin: 0 0 0.75rem;
}
.skoda-trims-teaser p:last-child {
    margin-bottom: 0;
}

.skoda-trims-bullets {
    margin-bottom: 30px;
}
@media (min-width: 992px) {
    .skoda-trims-bullets {
        margin-bottom: 0;
        max-height: 180px;
        overflow: hidden;
        max-width: 342px;
    }
}
@media (min-width: 1200px) {
    .skoda-trims-bullets {
        max-height: 210px;
        max-width: 384px;
    }
}

.skoda-trims-bullet {
    color: #161718;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.88;
    margin: 0;
    padding-inline-start: 15px;
    position: relative;
}
@media (min-width: 1200px) {
    .skoda-trims-bullet {
        font-size: 18px;
        line-height: 1.89;
    }
}
.skoda-trims-bullet::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 15px;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background-color: #373737;
}

/* Chỉ tab trims layout LR — không áp vào gallery (cũng dùng class skoda-trims-readmore-wrap) */
.skoda-trims-module--lr .skoda-trims-readmore-wrap {
    padding-bottom: 30px;
}
@media (min-width: 576px) {
    .skoda-trims-module--lr .skoda-trims-readmore-wrap {
        padding-bottom: 40px;
    }
}
@media (min-width: 992px) {
    .skoda-trims-module--lr .skoda-trims-readmore-wrap {
        position: absolute;
        left: 0;
        bottom: 40px;
        padding-bottom: 0;
    }
}

.skoda-trims-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: none;
    border:0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    text-transform: none !important;
}
a.skoda-trims-readmore--external {
    text-decoration: none;
    color: inherit;
}
a.skoda-trims-readmore--external:hover {
    text-decoration: none;
}

.skoda-trims-readmore-text {
    display: inline-block;
    position: relative;
    color: #161718;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.17;
    padding-right: 28px;
    text-transform: none !important;
}
@media (min-width: 576px) and (max-width: 1199px) {
    .skoda-trims-readmore-text {
        font-size: 11px;
        line-height: 1.09;
    }
}

.skoda-trims-readmore-icon {
    display: inline-flex;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(200%, -50%);
    transition: transform 0.15s ease-out;
}
.skoda-trims-readmore:hover .skoda-trims-readmore-icon {
    transform: translate(160%, -50%);
}

/* Trims tabs: override Flatsome button styles to match original module */
.skoda-trims-tabs-nav .skoda-tabs-scroll,
.skoda-gallery-tab-tb__nav {
    gap: 16px;
    padding: 6px;
}
.skoda-trims-tabs-nav .skoda-tabs-scroll {
    margin: 0;
}
@media (min-width: 720px) {
    .skoda-trims-tabs-nav .skoda-tabs-scroll,
    .skoda-gallery-tab-tb__nav {
        gap: 28px;
    }
}
.skoda-trims-tab-btn {
    margin: 2px 2px 10px !important;
    padding: 8px 8px !important;
    min-height: 48px !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #464748 !important;
    font-family: "SKODA Next", var(--skoda-font-primary), sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    letter-spacing: .02em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
    white-space: normal !important;
    text-align: center !important;
}
.skoda-trims-tab-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #7c7d7e;
    transition: height 0.2s ease, left 0.2s ease, right 0.2s ease, background-color 0.2s ease;
}
.skoda-trims-tab-btn:hover::after {
    height: 2px;
}
.skoda-trims-tab-btn.active {
    font-weight: 700 !important;
    color: #161718 !important;
    background-color: rgba(22, 23, 24, 0.06) !important;
}
.skoda-trims-tab-btn.active::after {
    left: 8px;
    right: 8px;
    height: 3px;
    background-color: #31694b;
}
.skoda-trims-tab-btn.active:hover::after {
    height: 3px;
}
.skoda-trims-tab-btn:focus {
    outline: none !important;
}
@media (max-width: 719.95px) {
    .skoda-trims-tab-btn {
        font-size: 16px !important;
    }
}

/* Teaser: plain paragraphs by default, optional <ul><li> keeps native bullets */
.skoda-trims-teaser {
    margin-bottom: 30px;
}
@media (min-width: 992px) {
    .skoda-trims-teaser {
        margin-bottom: 0;
    }
}
.skoda-trims-teaser p {
    color: #161718;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 0.75rem;
    padding: 0;
}
.skoda-trims-teaser p:last-child {
    margin-bottom: 0;
}
@media (min-width: 1200px) {
    .skoda-trims-teaser p {
        font-size: 18px;
        line-height: 1.67;
    }
}
.skoda-trims-teaser ul,
.skoda-trims-teaser ol {
    list-style-position: outside;
    margin: 0 0 0.75rem;
    padding-inline-start: 1.25em;
}
.skoda-trims-teaser ul { list-style-type: disc; }
.skoda-trims-teaser ol { list-style-type: decimal; }
.skoda-trims-teaser li {
    color: #161718;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 4px;
    padding: 0;
    display: list-item;
}
.skoda-trims-teaser li:last-child { margin-bottom: 0; }
@media (min-width: 1200px) {
    .skoda-trims-teaser li {
        font-size: 18px;
        line-height: 1.67;
    }
}

.skoda-trims-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.skoda-trims-modal[hidden] {
    display: none !important;
}

.skoda-trims-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 23, 24, 0.55);
    cursor: pointer;
}

.skoda-trims-modal__dialog {
    position: relative;
    z-index: 1;
    background: #fff;
    color: #161718;
    max-width: 645px;
    width: 100%;
    max-height: min(85vh, 720px);
    overflow: auto;
    padding: 30px;
    border-radius: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
@media (min-width: 576px) {
    .skoda-trims-modal__dialog {
        padding: 40px;
    }
}

.skoda-trims-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #161718;
    padding: 0;
    margin: 0;
    min-height: 0;
    min-width: 0;
    text-transform: none;
}
.skoda-trims-modal__close:hover {
    background: transparent;
    opacity: .75;
}

.skoda-trims-modal__title {
    margin: 0 40px 20px 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #161718;
}
@media (min-width: 1200px) {
    .skoda-trims-modal__title {
        font-size: 36px;
        line-height: 1.19;
    }
}

.skoda-trims-modal__body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.88;
}
.skoda-trims-modal__body p {
    margin: 0 0 1rem;
}
.skoda-trims-modal__body p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Section gallery image box top-bottom (gallery_tab_tb) hoặc left-right (gallery_tab_lr).
   Tab nav chỉ hiện khi có ≥2 tab và có ít nhất 1 tab được đặt tên.
   Slideshow Động cơ (engine_slideshow) dùng lại cùng carousel: data-skoda-gallery + markup skoda-gallery-tab-tb__*.
   ========================================================================== */
.skoda-section.skoda-gallery-tab-tb {
    background-color: #f3f3f3;
    padding: 48px 0 56px;
    overflow: hidden;
}
@media (min-width: 992px) {
    .skoda-section.skoda-gallery-tab-tb {
        padding: 64px 0 72px;
    }
}
.skoda-gallery-tab-tb > .container {
    max-width: 1600px;
    padding-left: 15px;
    padding-right: 15px;
}

.skoda-gallery-tab-tb__headline {
    text-align: center;
    margin-bottom: 24px;
}
.skoda-gallery-tab-tb__headline h2 {
    color: #161718;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    margin: 0;
    text-transform: none !important;
    font-family: var(--skoda-font-primary, inherit);
}
@media (min-width: 576px) {
    .skoda-gallery-tab-tb__headline h2 { font-size: 36px; line-height: 1.19; }
    .skoda-gallery-tab-tb__headline { margin-bottom: 30px; }
}
@media (min-width: 1200px) {
    .skoda-gallery-tab-tb__headline h2 { font-size: 42px; }
    .skoda-gallery-tab-tb__headline { margin-bottom: 40px; }
}

/* Tab navigation — gap/padding dùng chung với .skoda-trims-tabs-nav .skoda-tabs-scroll; nút dùng .skoda-trims-tab-btn */
.skoda-gallery-tab-tb__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 24px;
    background: transparent;
    border: 0;
}
@media (min-width: 720px) {
    .skoda-gallery-tab-tb__nav {
        margin-bottom: 32px;
    }
}
@media (min-width: 992px) {
    .skoda-gallery-tab-tb__nav {
        margin-bottom: 40px;
    }
}
.skoda-gallery-tab-tb__nav .skoda-trims-tab-btn {
    max-width: 360px;
}

/* Panels */
.skoda-gallery-tab-tb__panels { position: relative; }
.skoda-gallery-tab-tb__panel { display: none; }
.skoda-gallery-tab-tb__panel.active { display: block; }

/* Carousel */
.skoda-gallery-tab-tb__carousel {
    position: relative;
    overflow: hidden;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    --skoda-gtt-pad: 20px;
    --skoda-gtt-gap: 16px;
}
@media (min-width: 576px) {
    .skoda-gallery-tab-tb__carousel {
        padding-left: 30px;
        padding-right: 30px;
        --skoda-gtt-pad: 30px;
        --skoda-gtt-gap: 20px;
    }
}
@media (min-width: 992px) {
    .skoda-gallery-tab-tb__carousel {
        padding-left: 40px;
        padding-right: 40px;
        --skoda-gtt-pad: 40px;
        --skoda-gtt-gap: 24px;
    }
}
@media (min-width: 1200px) {
    .skoda-gallery-tab-tb__carousel {
        padding-left: 60px;
        padding-right: 60px;
        --skoda-gtt-pad: 60px;
        --skoda-gtt-gap: 30px;
    }
}

.skoda-gallery-tab-tb__viewport {
    position: relative;
    overflow: visible;
}
.skoda-gallery-tab-tb__track {
    display: flex;
    align-items: stretch;
    gap: var(--skoda-gtt-gap);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    touch-action: pan-y;
    cursor: grab;
    will-change: transform;
}
.skoda-gallery-tab-tb__track:active { cursor: grabbing; }
.skoda-gallery-tab-tb__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    user-select: none;
}
.skoda-gallery-tab-tb__image {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    background: #e5e5e5;
    overflow: hidden;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05), 0 5px 15px 0 rgba(0, 0, 0, .10);
}
.skoda-gallery-tab-tb__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}
.skoda-gallery-tab-tb__slide:not(.is-active) .skoda-gallery-tab-tb__image {
    opacity: .8;
    transition: opacity .3s ease;
}
@media (min-width: 1200px) {
    .skoda-gallery-tab-tb__slide:not(.is-active) .skoda-gallery-tab-tb__image { opacity: 1; }
}
.skoda-gallery-tab-tb__caption {
    text-align: left;
    margin-top: 16px;
    color: #161718;
    font-size: 14px;
    line-height: 1.71;
    font-weight: 300;
}
.skoda-gallery-tab-tb__caption p { margin: 0; }
@media (min-width: 576px) {
    .skoda-gallery-tab-tb__caption { font-size: 16px; line-height: 1.5; margin-top: 18px; }
}
@media (min-width: 1200px) {
    .skoda-gallery-tab-tb__caption { font-size: 18px; margin-top: 20px; }
}

/* gallery_tab_lr — tile ảnh | khối chữ nền trắng, căn trái, CTA + icon */
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    background: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05), 0 5px 20px 0 rgba(0, 0, 0, .05);
    overflow: hidden;
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__image {
    box-shadow: none;
}
@media (min-width: 768px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__image {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
        align-self: stretch;
        aspect-ratio: auto;
        min-height: 280px;
    }
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__image img {
        min-height: 280px;
        object-fit: cover;
    }
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption {
        flex: 1 1 50%;
        max-width: 50%;
        width: 50%;
        min-width: 0;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
    }
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption {
    background: #fff;
    text-align: left;
    padding: 30px 20px 36px;
    margin-top: 0;
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption--legacy {
    text-align: left;
    max-width: 335px;
    margin-left: 0;
    margin-right: auto;
}
@media (min-width: 576px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption {
        padding: 36px 24px 40px;
    }
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption--legacy {
        max-width: 466px;
    }
}
@media (min-width: 992px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption {
        padding: 40px 8% 44px;
    }
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption--legacy {
        max-width: 544px;
    }
}
@media (min-width: 1200px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption {
        padding: 48px 9% 52px;
    }
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide--lr .skoda-gallery-tab-tb__caption--legacy {
        max-width: 645px;
    }
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide-title {
    margin: 0 0 30px;
    max-width: 335px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.21;
    letter-spacing: normal;
    color: #161718;
    text-align: left;
}
@media (min-width: 576px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide-title {
        max-width: 466px;
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 20px;
    }
}
@media (min-width: 992px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide-title {
        max-width: 544px;
    }
}
@media (min-width: 1200px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__slide-title {
        max-width: 645px;
        font-size: 36px;
        line-height: 1.19;
    }
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__excerpt {
    max-width: 335px;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: #161718;
}
@media (min-width: 576px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__excerpt {
        max-width: 466px;
    }
}
@media (min-width: 992px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__excerpt {
        max-width: 544px;
    }
}
@media (min-width: 1200px) {
    .skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__excerpt {
        max-width: 645px;
        font-size: 18px;
    }
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__cta-wrap {
    margin-top: 0;
    padding-bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__cta-wrap .skoda-trims-readmore,
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__cta-wrap a.skoda-trims-readmore--external {
    justify-content: flex-start;
    text-align: left;
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__cta-wrap .skoda-trims-readmore-icon {
    display: inline-flex;
}
.skoda-gallery-tab-tb--lr .skoda-gallery-tab-tb__cta-wrap .skoda-trims-readmore-text {
    padding-right: 28px;
}
.skoda-gallery-tab-tb__legacy-headline {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #161718;
}
.skoda-gallery-tab-tb__legacy-price { margin-bottom: 12px; }
.skoda-gallery-tab-tb__legacy-text { margin-bottom: 12px; }
.skoda-gallery-tab-tb__legacy-cta { margin: 12px 0 0; }
.skoda-gallery-tab-tb__legacy-detail { margin-top: 16px; }

.skoda-gallery-tab-tb__slide-title {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 300;
    color: #161718;
    line-height: 1.3;
    text-align: center;
}
.skoda-gallery-tab-tb__excerpt {
    font-size: 14px;
    line-height: 1.71;
    font-weight: 300;
    color: #161718;
}
.skoda-gallery-tab-tb__excerpt p { margin: 0 0 10px; }
.skoda-gallery-tab-tb__excerpt p:last-child { margin-bottom: 0; }
.skoda-gallery-tab-tb__cta-wrap {
    margin-top: 18px;
}
.skoda-gallery-tab-tb__caption--legacy {
    text-align: inherit;
    font-size: 14px;
    line-height: 1.71;
    font-weight: 300;
    color: #161718;
}

/* Prev / Next — nằm hoàn toàn bên trong slide active (JS căn giữa theo ảnh) */
.skoda-section.skoda-gallery-tab-tb .skoda-gallery-tab-tb__nav-btn {
    position: absolute;
    top: calc(50% - 32px);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    min-height: 0;
    min-width: 0;
    border: 1px solid #d8d8d8;
    border-radius: 1000px;
    background-color: #f1f1f1;
    color: #161718;
    cursor: pointer;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
@media (min-width: 720px) {
    .skoda-section.skoda-gallery-tab-tb .skoda-gallery-tab-tb__nav-btn { width: 40px; height: 40px; }
}
@media (min-width: 1440px) {
    .skoda-section.skoda-gallery-tab-tb .skoda-gallery-tab-tb__nav-btn { width: 44px; height: 44px; }
}
.skoda-gallery-tab-tb__nav-btn.prev { left: calc(var(--skoda-gtt-pad) + 12px); }
.skoda-gallery-tab-tb__nav-btn.next { right: calc(var(--skoda-gtt-pad) + 12px); }
@media (min-width: 992px) {
    .skoda-gallery-tab-tb__nav-btn.prev { left: calc(var(--skoda-gtt-pad) + 16px); }
    .skoda-gallery-tab-tb__nav-btn.next { right: calc(var(--skoda-gtt-pad) + 16px); }
}
.skoda-section.skoda-gallery-tab-tb .skoda-gallery-tab-tb__nav-btn:hover {
    background-color: #e4e4e4;
    color: #161718;
    border-color: #d8d8d8;
}
.skoda-section.skoda-gallery-tab-tb .skoda-gallery-tab-tb__nav-btn:disabled {
    background-color: #e4e4e4;
    color: #c4c6c7;
    border-color: #e4e4e4;
    cursor: default;
    pointer-events: auto;
}
.skoda-gallery-tab-tb__nav-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    display: block;
}
@media (min-width: 1440px) {
    .skoda-gallery-tab-tb__nav-btn svg { width: 20px; height: 20px; }
}

/* Progress bar */
.skoda-gallery-tab-tb__progress {
    margin: 20px auto 0;
    padding: 0 15px;
    display: flex;
    justify-content: center;
}
@media (min-width: 576px) { .skoda-gallery-tab-tb__progress { margin-top: 25px; } }
@media (min-width: 1200px) { .skoda-gallery-tab-tb__progress { margin-top: 30px; } }

.skoda-gallery-tab-tb__progress-track {
    position: relative;
    width: 50%;
    max-width: 520px;
    height: 10px;
}
@media (min-width: 576px) { .skoda-gallery-tab-tb__progress-track { width: 33.333%; height: 8px; } }
@media (min-width: 1200px) { .skoda-gallery-tab-tb__progress-track { height: 10px; } }

.skoda-gallery-tab-tb__progress-rail,
.skoda-gallery-tab-tb__progress-handle {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 100px;
}
.skoda-gallery-tab-tb__progress-rail {
    left: 0;
    width: 100%;
    background-color: #161718;
    opacity: .12;
}
.skoda-gallery-tab-tb__progress-handle {
    inset-inline-start: 0;
    background-color: #161718;
    transition: inset-inline-start .3s ease-out, width .3s ease-out;
    z-index: 2;
}

/* Section Màu sắc - Mâm xe - Nội thất */
[data-module="vizualizer2-module"].skoda-visualizer3d {
    position: relative;
    background: #f2f2f2;
    padding: 48px 0;
}
/* Cùng lưới content 1600px như gallery / trims / features-tabs (tránh container ~1080px “lọt thỏm”) */
[data-module="vizualizer2-module"].skoda-visualizer3d > .container,
.skoda-model-page--flexible [data-module="vizualizer2-module"] > .container {
    max-width: 1600px !important;
    width: 100%;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
/*
 * Customizer / CSS nhúng hay gộp .container,.row { max-width: 1270px }.
 * Container visualizer 1600px nhưng .row vẫn bị cap → hàng hẹp, căn trái, phải trống.
 */
[data-module="vizualizer2-module"].skoda-visualizer3d > .container > .row,
.skoda-model-page--flexible [data-module="vizualizer2-module"] > .container > .row {
    max-width: none !important;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__block {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__preload {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
[data-module="vizualizer2-module"] .module-headline h2 {
    margin: 0 auto 30px;
    max-width: 650px;
    text-align: center;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__main {
    background: #fff;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__stage-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, #fff 0%, #f8f8f8 50%, #dfdfdf 82%, #bfbfbf 100%);
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__stage {
    cursor: grab;
    touch-action: none;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__stage.is-viz-dragging {
    cursor: none;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__stage:active {
    cursor: grabbing;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__stage:active.is-viz-dragging {
    cursor: none;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__drag-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__drag-marker {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__stage.is-viz-dragging .skoda-visualizer3d__drag-marker {
    opacity: 1;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__drag-pill {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 72px;
    height: 40px;
    padding: 8px;
    border-radius: 50px;
    background-color: #f8f8f8;
    color: #161718;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
       transform: translate(-50%, -50%) scaleX(1);
    transform-origin: center center;
    transition: transform .25s ease-out, box-shadow .2s ease;
    outline: 0 solid transparent;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__drag-pill.is-flipped {
    transform: translate(-50%, -50%) scaleX(-1);
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__drag-arrow {
    flex-shrink: 0;
    display: block;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__hero-wrap {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    width: 124%;
    height: 100%;
    max-width: none;
    transform: translateX(-50%);
    transform-origin: center center;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__canvas-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__hero {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    transform-origin: center center;
    transition: opacity .2s ease;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__hero.is-loading {
    opacity: .6;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__panel {
    background: #e6e6e6;
    padding: 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__selected {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    min-height: 28px;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__modes {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__swatches {
    flex: 1 1 auto;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__mode-btn {
    border: 2px solid transparent;
    background: #f7f7f7;
    border-radius: 22px;
    min-height: 44px;
    width: 44px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__mode-btn img {
    width: 24px;
    height: 24px;
    display: block;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__mode-btn span {
    display: none;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__mode-btn.is-active {
    background: #cdcdcd;
    border-color: #9e9fa0;
    width: auto;
    padding: 0 12px;
    gap: 8px;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__mode-btn.is-active span {
    display: inline;
    font-size: 14px;
    line-height: 20px;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__items {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__items.is-active {
    display: flex;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__item {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: 2px solid transparent;
    background: transparent;
    padding: 2px;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__item.is-active {
    border-color: #9e9fa0;
}
[data-module="vizualizer2-module"] .skoda-visualizer3d__thumb,
[data-module="vizualizer2-module"] .skoda-visualizer3d__thumb img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    display: block;
    object-fit: cover;
}
@media (min-width: 576px) {
    [data-module="vizualizer2-module"] .skoda-visualizer3d__panel {
        gap: 12px;
        padding: 14px 24px;
        min-height: 108px;
    }
    [data-module="vizualizer2-module"] .skoda-visualizer3d__selected {
        text-align: left;
        font-size: 20px;
    }
    [data-module="vizualizer2-module"] .skoda-visualizer3d__controls {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }
    [data-module="vizualizer2-module"] .skoda-visualizer3d__items {
        justify-content: flex-start;
    }
}
@media (max-width: 575px) {
    [data-module="vizualizer2-module"] .skoda-visualizer3d__modes {
        justify-content: center;
    }
    [data-module="vizualizer2-module"] .skoda-visualizer3d__selected {
        font-size: 20px;
    }
}

/* Features tabs grid — mirror Skoda [data-module=FeaturesModule] */
.skoda-features-tabs {
    padding: 56px 0;
    background-color: #f3f3f3;
}
.skoda-features-tabs > .container {
    max-width: 1600px;
    padding-left: 15px;
    padding-right: 15px;
}
.skoda-features-tabs .row .col:has(.skoda-features-tabs__headline) {
    padding-bottom: 12px;
}
/* Same centering pattern as .skoda-trims-module-headline + global .section-title-main scale */
.skoda-features-tabs__headline {
    text-align: center !important;
    margin-bottom: 24px;
}
.skoda-features-tabs__headline h2.section-title.section-title-center,
.skoda-features-tabs__headline h2.skoda-features-tabs__h2.section-title-center {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0;
    color: #161718;
    letter-spacing: 0.02em;
}
.skoda-features-tabs__headline .section-title-main {
    margin-bottom: 0;
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
@media (min-width: 576px) {
    .skoda-features-tabs__headline {
        margin-bottom: 30px;
    }
}
@media (min-width: 1200px) {
    .skoda-features-tabs__headline {
        margin-bottom: 40px;
    }
}

/* Style 2 — DerivativeOverviewModule (CPV3): headline hẹp + thẻ bo góc */
.skoda-features-tabs--derivative .skoda-features-tabs__headline,
body.skoda-model-single .skoda-features-tabs--derivative .skoda-features-tabs__headline {
    max-width: 645px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
.skoda-features-tabs--derivative .skoda-features-tabs__headline h2.section-title.section-title-center,
.skoda-features-tabs--derivative .skoda-features-tabs__headline h2.skoda-features-tabs__h2.section-title-center,
body.skoda-model-single .skoda-features-tabs--derivative .skoda-features-tabs__headline h2.section-title.section-title-center,
body.skoda-model-single .skoda-features-tabs--derivative .skoda-features-tabs__headline h2.skoda-features-tabs__h2.section-title-center {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}
.skoda-features-tabs--derivative .skoda-features-tabs__headline .section-title-main,
body.skoda-model-single .skoda-features-tabs--derivative .skoda-features-tabs__headline .section-title-main {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
.skoda-features-tabs--derivative .row .col:has(.skoda-features-tabs__headline),
body.skoda-model-single .skoda-features-tabs--derivative .row .col:has(.skoda-features-tabs__headline) {
    text-align: center !important;
}
/* Khối ô Style 2 ~50% chiều ngang so với lưới Style 1 / section full-width (bản CPV3 gọn hơn) */
@media (min-width: 768px) {
    .skoda-features-tabs--derivative .skoda-features-tabs__nav {
        width: 50%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    .skoda-features-tabs--derivative .skoda-features-tabs__panels {
        width: 50%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}
.skoda-features-tabs--derivative .skoda-features-tabs__tile--derivative {
    height: auto;
}
.skoda-features-tabs--derivative .skoda-derivative-tile,
.skoda-features-tabs--derivative a.skoda-derivative-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 16px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.skoda-features-tabs--derivative a.skoda-derivative-tile:hover {
    color: inherit;
    text-decoration: none;
    border-color: #b8b8b8;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.skoda-features-tabs--derivative .skoda-derivative-tile--static {
    cursor: default;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__media {
    width: 100%;
    margin: 0 0 12px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
/* Hai ảnh (CPV3): lớp dưới = ảnh hover, lớp trên = ảnh mặc định */
.skoda-features-tabs--derivative .skoda-derivative-tile__duo {
    position: relative;
    width: 100%;
    padding-bottom: 48.18%;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transition: opacity 0.35s ease;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__layer img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__layer--under {
    z-index: 1;
    opacity: 0;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__layer--over {
    z-index: 2;
    opacity: 1;
}
.skoda-features-tabs--derivative .skoda-derivative-tile:hover .skoda-derivative-tile__layer--under {
    opacity: 1;
}
.skoda-features-tabs--derivative .skoda-derivative-tile:hover .skoda-derivative-tile__layer--over {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .skoda-features-tabs--derivative .skoda-derivative-tile__layer,
    .skoda-features-tabs__photo-layer {
        transition: none;
    }
}
.skoda-features-tabs--derivative .skoda-derivative-tile__figure {
    position: relative;
    width: 100%;
    padding-bottom: 48.18%;
    overflow: hidden;
    background: #f3f3f3;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    text-align: start;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__title {
    margin: 0;
    font-family: var(--skoda-font-primary, inherit);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #161718;
}
@media (min-width: 720px) {
    .skoda-features-tabs--derivative .skoda-derivative-tile__title {
        font-size: 23px;
        line-height: 1.22;
    }
}
@media (min-width: 1440px) {
    .skoda-features-tabs--derivative .skoda-derivative-tile__title {
        font-size: 24px;
        line-height: 1.17;
    }
}
.skoda-features-tabs--derivative .skoda-derivative-tile__desc {
    margin: 0;
    font-family: var(--skoda-font-primary, inherit);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.43;
    letter-spacing: 0.02em;
    color: #161718;
    flex-grow: 0;
}
@media (min-width: 1440px) {
    .skoda-features-tabs--derivative .skoda-derivative-tile__desc {
        font-size: 16px;
        line-height: 1.5;
    }
}
.skoda-features-tabs--derivative .skoda-derivative-tile__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #31694b;
}
.skoda-features-tabs--derivative .skoda-derivative-tile__hint-icon svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}
.skoda-features-tabs__tile-teaser {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #161718;
}

/* Tab bar: reuse .skoda-trims-tabs-nav + .skoda-trims-tab-btn on buttons */
.skoda-features-tabs__panels {
    margin-top: 0;
}
.skoda-features-tabs__panel {
    display: none;
}
.skoda-features-tabs__panel.active {
    display: block;
}
/* Lưới theo số ô / tab: <768 luôn 1 cột; từ 768px — 1 / 50% / 33.33% / 25% */
.skoda-features-tabs__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) {
    .skoda-features-tabs__grid {
        gap: 24px 16px;
    }
}
@media (min-width: 768px) {
    .skoda-features-tabs__grid--cols-1 {
        grid-template-columns: minmax(0, 1fr);
    }
    .skoda-features-tabs__grid--cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .skoda-features-tabs__grid--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
    .skoda-features-tabs__grid--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}
/* 1 ô / tab: ảnh full width — chiều cao gần với Skoda TechnologyModule */
.skoda-features-tabs__grid--cols-1 .skoda-features-tabs__photo-wrapper {
    padding-bottom: 0;
    height: 190px;
}
@media (min-width: 576px) {
    .skoda-features-tabs__grid--cols-1 .skoda-features-tabs__photo-wrapper {
        height: 360px;
    }
}
@media (min-width: 992px) {
    .skoda-features-tabs__grid--cols-1 .skoda-features-tabs__photo-wrapper {
        height: 400px;
    }
}
@media (min-width: 1200px) {
    .skoda-features-tabs__grid--cols-1 .skoda-features-tabs__photo-wrapper {
        height: 500px;
    }
    .skoda-features-tabs__grid--cols-1 .skoda-features-tabs__photo-container {
        margin-bottom: 20px;
    }
}
.skoda-features-tabs__grid--cols-1 .skoda-features-tabs__text-information {
    text-align: center;
    padding-bottom: 16px;
}
@media (min-width: 576px) {
    .skoda-features-tabs__grid--cols-1 .skoda-features-tabs__text-information {
        padding-bottom: 20px;
    }
}
.skoda-features-tabs__grid--cols-1 .skoda-features-tabs__link-wrap {
    position: static;
    inset-inline-start: auto;
    display: block;
    text-align: center;
    padding: 0 20px 24px;
}
@media (min-width: 576px) {
    .skoda-features-tabs__grid--cols-1 .skoda-features-tabs__link-wrap {
        padding: 0 30px 28px;
    }
}
@media (min-width: 1200px) {
    .skoda-features-tabs__grid--cols-1 .skoda-features-tabs__link-wrap {
        padding: 0 40px 32px;
    }
}
.skoda-features-tabs__grid--cols-1 .skoda-features-tabs__link {
    display: inline-block;
}
/* Slider khi >4 ô: luôn hiển thị 4 ô trong viewport (như lưới 4 cột), không phải slider 1 ảnh */
.skoda-features-tabs__carousel {
    position: relative;
    --skoda-ftg-pad: 12px;
}
@media (min-width: 992px) {
    .skoda-features-tabs__carousel {
        --skoda-ftg-pad: 16px;
    }
}
.skoda-features-tabs__carousel-viewport {
    overflow: hidden;
    width: 100%;
}
.skoda-features-tabs__carousel-track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    transition: transform 0.45s ease;
    will-change: transform;
    touch-action: pan-x pinch-zoom;
}
@media (min-width: 768px) {
    .skoda-features-tabs__carousel-track {
        gap: 24px;
    }
}
.skoda-features-tabs__carousel .skoda-features-tabs__tile {
    flex-shrink: 0;
    box-sizing: border-box;
}
.skoda-features-tabs__nav-btn {
    position: absolute;
    z-index: 3;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    min-height: 0;
    min-width: 0;
    border: 1px solid #d8d8d8;
    border-radius: 1000px;
    background-color: #f1f1f1;
    color: #161718;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
@media (min-width: 720px) {
    .skoda-features-tabs__nav-btn {
        width: 40px;
        height: 40px;
    }
}
@media (min-width: 1440px) {
    .skoda-features-tabs__nav-btn {
        width: 44px;
        height: 44px;
    }
}
.skoda-features-tabs__nav-btn.prev {
    left: var(--skoda-ftg-pad);
}
.skoda-features-tabs__nav-btn.next {
    right: var(--skoda-ftg-pad);
}
.skoda-features-tabs__nav-btn:hover {
    background-color: #e4e4e4;
    color: #161718;
    border-color: #d8d8d8;
}
.skoda-features-tabs__nav-btn:disabled {
    background-color: #e4e4e4;
    color: #c4c6c7;
    border-color: #e4e4e4;
    cursor: default;
}
.skoda-features-tabs__nav-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    display: block;
}
@media (min-width: 1440px) {
    .skoda-features-tabs__nav-btn svg {
        width: 20px;
        height: 20px;
    }
}
.skoda-features-tabs__tile {
    display: block;
    height: 100%;
    position: relative;
}
.skoda-features-tabs__tile-inner {
    background-color: #fff;
    height: 100%;
    position: relative;
    display: block;
}
.skoda-features-tabs__photo-container {
    display: block;
    position: relative;
}
.skoda-features-tabs__photo-wrapper {
    padding-bottom: 100%;
    position: relative;
}
.skoda-features-tabs__photo-wrapper .skoda-features-tabs__photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f3f3f3;
}
.skoda-features-tabs__photo-wrapper--dual .skoda-features-tabs__photo-duo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f3f3f3;
}
.skoda-features-tabs__photo-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transition: opacity 0.35s ease;
}
.skoda-features-tabs__photo-layer--under {
    z-index: 1;
    opacity: 0;
}
.skoda-features-tabs__photo-layer--over {
    z-index: 2;
    opacity: 1;
}
.skoda-features-tabs__tile--dual-photo:hover .skoda-features-tabs__photo-layer--under {
    opacity: 1;
}
.skoda-features-tabs__tile--dual-photo:hover .skoda-features-tabs__photo-layer--over {
    opacity: 0;
}
.skoda-features-tabs__photo-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.skoda-features-tabs__tile--dual-photo:hover .skoda-features-tabs__photo-layer img {
    transform: none;
}
.skoda-features-tabs__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.skoda-features-tabs__tile:hover .skoda-features-tabs__photo img {
    transform: scale(1.04);
}
.skoda-features-tabs__text-information {
    display: block;
    height: auto;
    padding: 15px 20px 55px;
    position: relative;
}
@media (min-width: 576px) {
    .skoda-features-tabs__text-information {
        padding: 20px 30px 55px;
    }
}
@media (min-width: 992px) {
    .skoda-features-tabs__text-information {
        padding: 20px 30px 70px;
    }
}
@media (min-width: 1200px) {
    .skoda-features-tabs__text-information {
        padding: 25px 40px 75px;
    }
}
.skoda-features-tabs__paragraph.paragraph,
.skoda-features-tabs__text-information .skoda-features-tabs__paragraph {
    color: #161718;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 1.5;
    margin: 0;
    max-height: 64px;
    overflow: hidden;
    padding: 0;
}
@media (min-width: 576px) {
    .skoda-features-tabs__paragraph.paragraph,
    .skoda-features-tabs__text-information .skoda-features-tabs__paragraph {
        font-size: 16px;
        max-height: 72px;
    }
}
@media (min-width: 1200px) {
    .skoda-features-tabs__paragraph.paragraph,
    .skoda-features-tabs__text-information .skoda-features-tabs__paragraph {
        font-size: 18px;
        max-height: 80px;
    }
}
.skoda-features-tabs__link-wrap {
    bottom: 20px;
    inset-inline-start: 15px;
    padding-inline-end: 26px;
    position: absolute;
}
@media (min-width: 576px) {
    .skoda-features-tabs__link-wrap {
        inset-inline-start: 30px;
    }
}
@media (min-width: 992px) {
    .skoda-features-tabs__link-wrap {
        bottom: 25px;
    }
}
@media (min-width: 1200px) {
    .skoda-features-tabs__link-wrap {
        bottom: 30px;
        inset-inline-start: 40px;
    }
}
.skoda-features-tabs__link.link-element {
    cursor: pointer;
    display: inline-block;
    line-height: 1;
}
.skoda-features-tabs__link.link-element:hover {
    text-decoration: none !important;
}
.skoda-features-tabs__link .skoda-features-tabs__link-text,
.skoda-features-tabs__link.link-element.light .skoda-features-tabs__link-text {
    color: #161718;
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.17;
    position: relative;
    vertical-align: middle;
}
@media (min-width: 576px) and (max-width: 1199px) {
    .skoda-features-tabs__link .skoda-features-tabs__link-text,
    .skoda-features-tabs__link.link-element.light .skoda-features-tabs__link-text {
        font-size: 11px;
        line-height: 1.09;
    }
}
.skoda-features-tabs__link .skoda-features-tabs__link-text:hover {
    text-decoration: none;
}
.skoda-features-tabs__link .link-icon-wrapper.skoda-features-tabs__link-icon-wrap {
    display: inline-flex;
    inset-inline-end: 22px;
    position: absolute;
    text-decoration: none;
    top: 50%;
    transform: translate(200%, -50%);
    transition: all 0.15s ease-out;
}
.skoda-features-tabs__link:hover .link-icon-wrapper.skoda-features-tabs__link-icon-wrap {
    inset-inline-end: 16.5px;
}
.skoda-features-tabs__link-icon {
    width: 1em;
    height: 1em;
    font-size: 22px;
    flex-shrink: 0;
    transition: all 0.15s ease-out;
    vertical-align: middle;
}

/* ==============================================
 * SECTION: THÔNG SỐ KỸ THUẬT (Dimensions-like)
 * ============================================== */
.skoda-specs-popup {
    background-color: #f3f3f3;
    color: #161718;
    padding: 0 0 12px;
    text-align: center !important;
}
[data-module="dimensions-specs"].skoda-specs-popup {
    text-align: center !important;
}
.skoda-specs-popup .row,
.skoda-specs-popup .row .col {
    text-align: center !important;
}
.skoda-specs-popup__headline {
    margin-bottom: 30px;
    text-align: center;
}
.skoda-specs-popup__headline h2.section-title.section-title-center,
.skoda-specs-popup__headline h2.skoda-specs-popup__h2.section-title-center {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}
.skoda-specs-popup__headline .section-title-main {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
@media (min-width: 1200px) {
    .skoda-specs-popup__headline {
        margin-bottom: 40px;
    }
}
.skoda-specs-popup__image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 42.99%;
}
@media (min-width: 576px) {
    .skoda-specs-popup__image-wrap {
        padding-top: 43.38%;
    }
}
@media (min-width: 992px) {
    .skoda-specs-popup__image-wrap {
        padding-top: 42.8%;
    }
}
@media (min-width: 1200px) {
    .skoda-specs-popup__image-wrap {
        padding-top: 42.89%;
    }
}
.skoda-specs-popup__image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.skoda-specs-popup__desc {
    margin: 20px auto;
    max-width: 645px;
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
    color: #161718;
}
@media (min-width: 1200px) {
    .skoda-specs-popup__desc {
        font-size: 18px;
    }
}
.skoda-specs-popup__desc p {
    margin: 0 0 1rem;
}
.skoda-specs-popup__desc p:last-child {
    margin-bottom: 0;
}
.skoda-specs-popup__actions {
    display: flex;
    justify-content: center;
}
.skoda-specs-popup__btn {
    border: 0 !important;
    border-radius: 1000px !important;
    background-color: #78faae !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary), sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    padding: 14px 24px !important;
    min-height: 44px !important;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.skoda-specs-popup__btn:hover {
    background-color: #72e3a1 !important;
}
.skoda-specs-popup__btn:active {
    transform: translateY(1px);
}
.skoda-specs-popup .skoda-trims-modal__dialog {
    max-height: 80vh;
    overflow: auto;
}

/* ==============================================
 * SECTION: TẢI VỀ TÀI LIỆU (CTA Module-like)
 * ============================================== */
.skoda-download-cta {
    background-color: #f3f3f3;
    text-align: center;
}
[data-module="download-cta"].skoda-download-cta {
    text-align: center !important;
}
.skoda-download-cta .row,
.skoda-download-cta .row .col {
    text-align: center !important;
}
.skoda-download-cta__bg {
    background-clip: content-box;
    background-color: #fff;
}
.skoda-download-cta__content {
    padding: 30px 5px;
}
@media (min-width: 576px) {
    .skoda-download-cta__content {
        padding: 30px 0;
    }
}
.skoda-download-cta__headline {
    text-align: center;
}
.skoda-download-cta__headline .section-title {
    margin: 0;
}
.skoda-download-cta__headline h2.section-title.section-title-center,
.skoda-download-cta__headline h2.skoda-download-cta__h2.section-title-center {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}
.skoda-download-cta__headline .section-title-main {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
.skoda-download-cta__desc {
    box-sizing: border-box;
    color: #161718;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 auto 8px;
    max-width: 645px;
}
@media (min-width: 1200px) {
    .skoda-download-cta__desc {
        font-size: 18px;
    }
}
.skoda-download-cta__desc p {
    margin: 0 0 1rem;
}
.skoda-download-cta__desc p:last-child {
    margin-bottom: 0;
}
.skoda-download-cta__link-wrap {
    line-height: 1;
}
.skoda-download-cta__link {
    display: inline-block;
    text-decoration: none;
}
.skoda-download-cta__link:hover {
    text-decoration: none;
}
.skoda-download-cta__link-text {
    display: block;
    position: relative;
    color: #161718;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.17;
    padding-inline-end: 18px;
}
@media (min-width: 576px) and (max-width: 1199px) {
    .skoda-download-cta__link-text {
        font-size: 11px;
        line-height: 1.09;
    }
}
.skoda-download-cta__link-icon-wrap {
    display: inline-flex;
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: inset-inline-end 0.15s ease-out;
}
.skoda-download-cta__link:hover .skoda-download-cta__link-icon-wrap {
    inset-inline-end: -6px;
}
.skoda-download-cta__link-icon {
    width: 1em;
    height: 1em;
    font-size: 22px;
    flex-shrink: 0;
}

/* Force center alignment in model page (override inherited text-align:start/left) */
body.skoda-model-single .skoda-model-page--flexible .skoda-specs-popup,
body.skoda-model-single .skoda-model-page--flexible .skoda-specs-popup .skoda-specs-popup__headline,
body.skoda-model-single .skoda-model-page--flexible .skoda-specs-popup .skoda-specs-popup__headline h2,
body.skoda-model-single .skoda-model-page--flexible .skoda-specs-popup .skoda-specs-popup__headline .section-title-main,
body.skoda-model-single .skoda-model-page--flexible .skoda-specs-popup .skoda-specs-popup__desc,
body.skoda-model-single .skoda-model-page--flexible .skoda-specs-popup .skoda-specs-popup__desc p,
body.skoda-model-single .skoda-model-page--flexible .skoda-specs-popup .skoda-specs-popup__actions {
    text-align: center !important;
}
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__content,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__headline,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__headline h2,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__headline .section-title-main,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__desc,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__desc p,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__link-wrap,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__link,
body.skoda-model-single .skoda-model-page--flexible .skoda-download-cta .skoda-download-cta__link-text {
    text-align: center !important;
}

/* Động cơ — ảnh vuông trong thẻ .item (TechnologySlideshow): không box-shadow trên khung ảnh; shadow chỉ trên .item như [data-module=technology-slideshow] .item */
.skoda-engine-slideshow .skoda-gallery-tab-tb__image {
    box-shadow: none;
    background: #fff;
    aspect-ratio: 1 / 1;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.skoda-engine-slideshow .skoda-gallery-tab-tb__image img {
    object-fit: contain;
}

.skoda-gallery-tab-tb__carousel--single .skoda-gallery-tab-tb__track {
    cursor: default;
    touch-action: auto;
}

.skoda-engine-slideshow__layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
@media (min-width: 992px) {
    .skoda-engine-slideshow__layout {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        text-align: start;
    }
}

.skoda-engine-slideshow__media {
    width: 100%;
    max-width: 320px;
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .skoda-engine-slideshow__media {
        width: 280px;
        max-width: 280px;
        margin: 0;
    }
    .skoda-engine-slideshow .skoda-gallery-tab-tb__image {
        max-width: none;
        width: 100%;
        box-shadow: none;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__media {
        width: 320px;
        max-width: 320px;
    }
}

.skoda-engine-slideshow__item.item {
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
    padding: 30px 16px 35px;
    text-align: center;
}
@media (min-width: 576px) {
    .skoda-engine-slideshow__item.item {
        padding-bottom: 50px;
    }
}
@media (min-width: 992px) {
    .skoda-engine-slideshow__item.item {
        padding: 50px 10.5%;
        text-align: start;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__item.item {
        padding: 60px 11.8%;
    }
}

.skoda-engine-slideshow__content-wrapper {
    width: 100%;
    min-width: 0;
}
@media (min-width: 992px) {
    .skoda-engine-slideshow__content-wrapper {
        flex: 1;
        margin-inline-start: 11.2%;
        max-width: none;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__content-wrapper {
        margin-inline-start: 10.1%;
    }
}

.skoda-engine-slideshow__paragraph-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 335px;
}
@media (min-width: 576px) {
    .skoda-engine-slideshow__paragraph-wrapper {
        max-width: 466px;
    }
}
@media (min-width: 992px) {
    .skoda-engine-slideshow__paragraph-wrapper {
        margin-inline-end: 0;
        margin-inline-start: 0;
        max-width: 361px;
        width: 361px;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__paragraph-wrapper {
        max-width: 420px;
        width: 420px;
    }
}

.skoda-engine-slideshow__title {
    color: #161718;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.21;
    margin: 0 0 8px;
    text-transform: none !important;
}
@media (min-width: 576px) {
    .skoda-engine-slideshow__title {
        font-size: 26px;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__title {
        font-size: 30px;
    }
}

.skoda-engine-slideshow__desc {
    color: #161718;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 8px;
    display: none;
}
.skoda-engine-slideshow__desc p {
    margin: 0 0 .5em;
}
.skoda-engine-slideshow__desc p:last-child {
    margin-bottom: 0;
}
@media (min-width: 576px) {
    .skoda-engine-slideshow__desc {
        display: block;
        margin-bottom: 5px;
        margin-top: 10px;
    }
}
@media (min-width: 992px) {
    .skoda-engine-slideshow__desc {
        margin-bottom: 10px;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__desc {
        font-size: 14px;
        max-width: 340px;
    }
}

.skoda-engine-slideshow__equipment {
    color: #161718;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin: 12px 0 0;
    text-transform: none !important;
}
@media (min-width: 576px) {
    .skoda-engine-slideshow__equipment {
        font-size: 18px;
    }
}

/* Thuộc tính — flex wrap giống TechnologySlideshowModule */
.skoda-engine-slideshow__properties {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    margin-top: 5px;
    margin-inline: auto;
    width: 180px;
}
@media (min-width: 576px) {
    .skoda-engine-slideshow__properties {
        margin-top: 0;
        width: 410px;
    }
}
@media (min-width: 992px) {
    .skoda-engine-slideshow__properties {
        margin-inline-start: 0;
        margin-top: -4px;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__properties {
        width: 550px;
    }
}

.skoda-engine-slideshow__property {
    align-items: flex-end;
    display: flex;
    padding-top: 20px;
    width: 180px;
}
@media (min-width: 576px) {
    .skoda-engine-slideshow__property {
        margin-inline-end: -22px;
        padding-top: 25px;
    }
    .skoda-engine-slideshow__property:nth-child(2n) {
        margin-inline-start: 50px;
    }
}
@media (min-width: 992px) {
    .skoda-engine-slideshow__property {
        margin-inline-end: -16px;
        margin-inline-start: 0;
        padding-top: 20px;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__property {
        margin-inline-end: -6px;
        padding-top: 24px;
        width: 250px;
    }
}

.skoda-engine-slideshow__property .icon {
    display: inline-block;
    flex: 0 0 24px;
    font-size: 24px;
    height: 24px;
    line-height: 24px;
    margin-inline-end: 10px;
    position: relative;
    width: 24px;
    color: #161718;
}
.skoda-engine-slideshow__property .icon .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inset-inline-start: 0;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}
.skoda-engine-slideshow__property .icon-wrapper svg {
    width: 22px;
    height: 22px;
    display: block;
}
.skoda-engine-slideshow__property .icon-wrapper img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.skoda-engine-slideshow__property .text {
    line-height: 1;
    min-width: 0;
    text-align: start;
}
.skoda-engine-slideshow__property .text .title {
    color: #161718;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.17;
    margin-bottom: 4px;
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__property .text .title {
        font-size: 14px;
        line-height: 1.14;
    }
}
.skoda-engine-slideshow__property .value {
    color: #161718;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14;
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__property .value {
        font-size: 16px;
        line-height: 1.13;
    }
}
.skoda-engine-slideshow__property .value .unit {
    color: #161718;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.17;
    padding-inline-start: 4px;
}
@media (min-width: 576px) {
    .skoda-engine-slideshow__property .value .unit {
        font-size: 11px;
        line-height: 1.18;
    }
}
@media (min-width: 1200px) {
    .skoda-engine-slideshow__property .value .unit {
        font-size: 12px;
        line-height: 1.17;
    }
}

/* Gallery no tab — image left/right layout */
.skoda-gallery-no-tab-lr {
    padding: 48px 0;
    background-color: #fff;
}
.skoda-gallery-no-tab-lr .container {
    max-width: 1600px;
}
.skoda-gallery-no-tab-lr__headline h2 {
    color: #161718;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 25px;
    text-align: center;
    text-transform: none !important;
}
.skoda-gallery-no-tab-lr__list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.skoda-gallery-no-tab-lr__item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
}
.skoda-gallery-no-tab-lr__media {
    flex: 1 1 50%;
    min-width: 0;
}
.skoda-gallery-no-tab-lr__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.skoda-gallery-no-tab-lr__content {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.skoda-gallery-no-tab-lr__title {
    color: #161718;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
    text-transform: none !important;
}
.skoda-gallery-no-tab-lr__text {
    color: #161718;
    font-size: 16px;
    line-height: 1.6;
}
.skoda-gallery-no-tab-lr__text p {
    margin: 0 0 12px;
}
.skoda-gallery-no-tab-lr__text p:last-child {
    margin-bottom: 0;
}
.skoda-gallery-no-tab-lr__text ul,
.skoda-gallery-no-tab-lr__text ol {
    margin: 0 0 12px;
    padding-left: 1.25em;
}
.skoda-gallery-no-tab-lr__text ul:last-child,
.skoda-gallery-no-tab-lr__text ol:last-child {
    margin-bottom: 0;
}
.skoda-gallery-no-tab-lr__text li {
    margin: 0 0 6px;
    line-height: 1.6;
}
@media (min-width: 768px) {
    .skoda-gallery-no-tab-lr__item {
        flex-direction: row;
        gap: 40px;
        align-items: center;
    }
    .skoda-gallery-no-tab-lr__item--right {
        flex-direction: row-reverse;
    }
}
@media (min-width: 1200px) {
    .skoda-gallery-no-tab-lr__item {
        gap: 64px;
    }
    .skoda-gallery-no-tab-lr__title {
        font-size: 30px;
    }
}

/*==============================================
 * HOME RANGE OVERVIEW (.xc-home-car-list)
 * Clone Skoda RangeOverviewModule tabs + car row
 *==============================================*/
.xc-home-car-list {
    background-color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    overflow: hidden;
}

.xc-home-car-list .section-content > .row {
    max-width: 1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Category tabs: override Flatsome stacked UX menu into one Skoda-like row */
.xc-home-car-list .ux-menu,
.xc-home-car-list .ux-menu.stack,
.xc-home-car-list .ux-menu.stack-col {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 6px 15px 0 !important;
    border-bottom: 1px solid #7c7d7e !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-inline: 15px;
}
.xc-home-car-list .ux-menu::-webkit-scrollbar {
    display: none;
}
@media (min-width: 720px) {
    .xc-home-car-list .ux-menu,
    .xc-home-car-list .ux-menu.stack,
    .xc-home-car-list .ux-menu.stack-col {
        justify-content: center !important;
        gap: 28px !important;
        width: fit-content !important;
        max-width: calc(100% - 30px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 24px !important;
        scroll-padding-inline: 0;
    }
}

.xc-home-car-list .ux-menu-link {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xc-home-car-list .ux-menu--divider-solid .ux-menu-link + .ux-menu-link,
.xc-home-car-list .ux-menu-link__link {
    border: 0 !important;
}

.xc-home-car-list .ux-menu-link__link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 2px 2px 0 !important;
    padding: 8px 8px 10px !important;
    border-radius: 4px 4px 0 0 !important;
    background-color: transparent !important;
    color: #464748 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color .2s ease, background-color .2s ease !important;
}

.xc-home-car-list .ux-menu-link__link::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    z-index: 2;
    height: 0;
    background-color: transparent;
    transition: height .2s ease, background-color .2s ease;
}

.xc-home-car-list .ux-menu-link__text {
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    color: inherit !important;
    text-transform: none !important;
}

.xc-home-car-list .ux-menu-link.active .ux-menu-link__link,
.xc-home-car-list .ux-menu-link.current-menu-item .ux-menu-link__link,
.xc-home-car-list .ux-menu-link:first-child .ux-menu-link__link {
    background-color: rgba(22, 23, 24, .06) !important;
    color: #161718 !important;
}

.xc-home-car-list .ux-menu-link.active .ux-menu-link__text,
.xc-home-car-list .ux-menu-link.current-menu-item .ux-menu-link__text,
.xc-home-car-list .ux-menu-link:first-child .ux-menu-link__text {
    font-weight: 700 !important;
}

.xc-home-car-list .ux-menu-link.active .ux-menu-link__link::after,
.xc-home-car-list .ux-menu-link.current-menu-item .ux-menu-link__link::after,
.xc-home-car-list .ux-menu-link:first-child .ux-menu-link__link::after {
    height: 3px;
    background-color: #31694b;
}

@media (min-width: 720px) {
    .xc-home-car-list .ux-menu-link__link {
        padding: 12px 24px !important;
    }
    .xc-home-car-list .ux-menu-link__text {
        font-size: 18px !important;
    }
}

/* Car list: one horizontal row like RangeOverview carousel */
.xc-home-car-list .row-list-cars {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    max-width: 1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 20px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.xc-home-car-list .row-list-cars::-webkit-scrollbar {
    display: none;
}

.xc-home-car-list .row-list-cars > .col {
    flex: 0 0 301px !important;
    max-width: 301px !important;
    width: 301px !important;
    padding: 0 4px 24px !important;
    scroll-snap-align: center;
}

.xc-home-car-list .row-list-cars .col-inner,
.xc-home-car-list .row-list-cars .box {
    width: 100% !important;
}

.xc-home-car-list .row-list-cars .box {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

.xc-home-car-list .row-list-cars .box-image {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 171 / 54;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background-color: transparent !important;
    margin: 0 auto !important;
}

.xc-home-car-list .row-list-cars .box-image a,
.xc-home-car-list .row-list-cars .box-image > div,
.xc-home-car-list .row-list-cars .box-image a > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.xc-home-car-list .row-list-cars .box-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: none !important;
}

.xc-home-car-list .row-list-cars .box-text {
    padding: 6px 0 0 !important;
    text-align: center !important;
    background-color: transparent !important;
}

.xc-home-car-list .row-list-cars .box-text-inner,
.xc-home-car-list .row-list-cars .box-text h4 {
    text-align: center !important;
}

.xc-home-car-list .row-list-cars .box-text h4 {
    margin: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
}

/* Original RangeOverview label: <span data-testid="Label-general">Mới</span> sits above the first tile image. */
.xc-home-car-list .row-list-cars > .col:first-child .box::before {
    content: "Mới";
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    min-height: 12px;
    margin: 0 0 4px 0;
    padding: 0;
    color: #5a5b5c;
    font-family: var(--skoda-font-primary) !important;
    font-size: 9px;
    font-weight: 900;
    line-height: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 576px) {
    .xc-home-car-list .row-list-cars {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}

@media (min-width: 992px) {
    .xc-home-car-list .row-list-cars {
        justify-content: center !important;
        padding-left: 65px !important;
        padding-right: 65px !important;
    }
    .xc-home-car-list .row-list-cars > .col {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        width: 20% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .xc-home-car-list .row-list-cars .box {
        width: 81% !important;
    }
}

@media (min-width: 1200px) {
    .xc-home-car-list .row-list-cars > .col {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .xc-home-car-list .row-list-cars .box {
        width: 76% !important;
    }
}

@media (max-width: 575.98px) {
    .xc-home-car-list .row-list-cars {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .xc-home-car-list .row-list-cars > .col {
        flex-basis: 72vw !important;
        max-width: 72vw !important;
        width: 72vw !important;
    }
}

/* RangeOverview CTA: "Xem tất cả xe" outlined pill */
.xc-home-car-list .btn-xem-tat-ca-xe,
.xc-home-car-list .button.btn-xem-tat-ca-xe,
.xc-home-car-list .button.primary.btn-xem-tat-ca-xe {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 18px auto 0 !important;
    padding: 12px 22px !important;
    border: 2px solid #161718 !important;
    border-radius: 1000px !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out !important;
}

.xc-home-car-list .btn-xem-tat-ca-xe span,
.xc-home-car-list .button.btn-xem-tat-ca-xe span {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    text-transform: none !important;
}

.xc-home-car-list .btn-xem-tat-ca-xe:hover,
.xc-home-car-list .button.btn-xem-tat-ca-xe:hover,
.xc-home-car-list .button.primary.btn-xem-tat-ca-xe:hover {
    background-color: rgba(26, 27, 28, .12) !important;
    border-color: #161718 !important;
    color: #161718 !important;
    box-shadow: none !important;
}

.xc-home-car-list .btn-xem-tat-ca-xe:active,
.xc-home-car-list .button.btn-xem-tat-ca-xe:active,
.xc-home-car-list .button.primary.btn-xem-tat-ca-xe:active {
    background-color: rgba(26, 27, 28, .18) !important;
    color: #161718 !important;
}

.xc-home-car-list .btn-xem-tat-ca-xe:focus,
.xc-home-car-list .button.btn-xem-tat-ca-xe:focus,
.xc-home-car-list .button.primary.btn-xem-tat-ca-xe:focus {
    outline: 2px solid rgba(22, 23, 24, .35) !important;
    outline-offset: 3px !important;
}

.xc-home-car-list .section-content > .row:last-child .col-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (min-width: 576px) {
    .xc-home-car-list .btn-xem-tat-ca-xe,
    .xc-home-car-list .button.btn-xem-tat-ca-xe,
    .xc-home-car-list .button.primary.btn-xem-tat-ca-xe {
        margin-top: 24px !important;
    }
}

/*==============================================
 * CONTACT PAGE HERO (.xc-page-contact-hero)
 * Flatsome banner rebuilt to match Skoda HeroBannerModule.
 * Scope strictly follows parent class to avoid leaking to other banners.
 *==============================================*/
.xc-page-contact-hero {
    --xc-contact-hero-container: 1600px;
    --xc-contact-hero-row-pad: 45px;
    --xc-contact-hero-col-pad: 15px;
    --xc-contact-hero-title-width: min(50%, 690px);
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin-left: auto;
    margin-right: auto;
    background-color: #373737;
}

.xc-page-contact-hero .section-bg,
.xc-page-contact-hero .section-content,
.xc-page-contact-hero .row,
.xc-page-contact-hero .col,
.xc-page-contact-hero .col-inner {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.xc-page-contact-hero .section-content,
.xc-page-contact-hero .row.row-full-width,
.xc-page-contact-hero .banner,
.xc-page-contact-hero .banner-inner,
.xc-page-contact-hero .banner-bg,
.xc-page-contact-hero .banner-layers {
    width: 100% !important;
}

.xc-page-contact-hero .banner {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 36.5% !important;
    overflow: hidden;
    background-color: #373737 !important;
}

.xc-page-contact-hero .banner-inner,
.xc-page-contact-hero .banner-bg,
.xc-page-contact-hero .banner-layers {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
}

.xc-page-contact-hero .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: radial-gradient(185.5% 108.19% at 43.8% 19.51%, rgba(0, 0, 0, 0) 0, rgba(15, 15, 15, .22) 54.5%, rgba(28, 28, 28, .56) 96.71%);
}

.xc-page-contact-hero .banner-bg img.bg,
.xc-page-contact-hero .banner-bg picture,
.xc-page-contact-hero .banner-bg video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

.xc-page-contact-hero .banner-layers.container {
    max-width: var(--xc-contact-hero-container) !important;
    height: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.xc-page-contact-hero .banner-link {
    display: none !important;
}

.xc-page-contact-hero .text-box {
    position: absolute !important;
    left: calc(15px + var(--xc-contact-hero-row-pad) + var(--xc-contact-hero-col-pad)) !important;
    right: auto !important;
    top: auto !important;
    bottom: 32px !important;
    width: var(--xc-contact-hero-title-width) !important;
    max-width: var(--xc-contact-hero-title-width) !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5;
}

.xc-page-contact-hero .text-box-content,
.xc-page-contact-hero .text-inner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 100% !important;
}

.xc-page-contact-hero h1,
.xc-page-contact-hero h2,
.xc-page-contact-hero h3,
.xc-page-contact-hero .headline {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.xc-page-contact-hero .image-box,
.xc-page-contact-hero .box-image {
    overflow: hidden;
}

@media (max-width: 1199.98px) {
    .xc-page-contact-hero {
        --xc-contact-hero-row-pad: 25px;
        --xc-contact-hero-title-width: 50%;
    }
}

@media (max-width: 991.98px) {
    .xc-page-contact-hero {
        --xc-contact-hero-row-pad: 20px;
        --xc-contact-hero-title-width: 66.666667%;
    }

    .xc-page-contact-hero .banner {
        padding-top: 36.5% !important;
    }

    .xc-page-contact-hero .text-box {
        bottom: 32px !important;
    }

    .xc-page-contact-hero h1,
    .xc-page-contact-hero h2,
    .xc-page-contact-hero h3,
    .xc-page-contact-hero .headline {
        font-size: 38px !important;
        line-height: 126% !important;
        letter-spacing: .02em !important;
    }
}

@media (max-width: 767.98px) {
    .xc-page-contact-hero .text-box {
        bottom: 20px !important;
    }

    .xc-page-contact-hero h1,
    .xc-page-contact-hero h2,
    .xc-page-contact-hero h3,
    .xc-page-contact-hero .headline {
        font-size: 32px !important;
        line-height: 119% !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-contact-hero {
        --xc-contact-hero-row-pad: 10px;
        --xc-contact-hero-col-pad: 10px;
        --xc-contact-hero-title-width: 100%;
    }

    .xc-page-contact-hero .banner {
        height: calc(100vh - 70px) !important;
        min-height: 420px !important;
        padding-top: 0 !important;
    }

    .xc-page-contact-hero .banner-bg::after {
        background: linear-gradient(180deg, rgba(19, 19, 19, .14), rgba(0, 0, 0, 0) 35.18%, rgba(4, 4, 4, .08) 47.23%, rgba(28, 28, 28, .42) 87.43%);
    }

    .xc-page-contact-hero .banner-layers.container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .xc-page-contact-hero .text-box {
        left: 20px !important;
        right: 20px !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: none !important;
    }

    .xc-page-contact-hero h1,
    .xc-page-contact-hero h2,
    .xc-page-contact-hero h3,
    .xc-page-contact-hero .headline {
        font-size: 28px !important;
        line-height: 129% !important;
        letter-spacing: .02em !important;
    }
}

/*==============================================
 * CONTACT PAGE FORM (.xc-page-contact-form)
 * Contact Form 7 markup styled to match Skoda Forms2Module.
 *==============================================*/
.xc-page-contact-form {
    --xc-contact-form-container: 1600px;
    --xc-contact-form-width: 645px;
    --xc-contact-form-gap: 24px;
    background-color: #ffffff;
    padding: 48px 0 64px !important;
}

.xc-page-contact-form .section-content,
.xc-page-contact-form > .container,
.xc-page-contact-form .container {
    width: 100%;
    max-width: var(--xc-contact-form-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.xc-page-contact-form__headline,
.xc-page-contact-form .section-title,
.xc-page-contact-form h2 {
    width: 100%;
    max-width: 645px;
    margin: 0 auto 40px !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-transform: none !important;
}

.xc-page-contact-form__form,
.xc-page-contact-form .wpcf7 form {
    width: 100%;
    max-width: var(--xc-contact-form-width);
    margin: 0 auto !important;
    color: #5a5b5c;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: .02em;
}

.xc-page-contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--xc-contact-form-gap);
}

.xc-page-contact-form__field {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 0 24px;
    color: #5a5b5c;
    transition: color .2s cubic-bezier(0, 0, .2, 1);
}

.xc-page-contact-form__field:hover,
.xc-page-contact-form__field:focus-within {
    color: #161718;
}

.xc-page-contact-form__field--full {
    grid-column: 1 / -1;
}

.xc-page-contact-form__label {
    display: block;
    margin: 0 0 8px;
    color: inherit;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: .02em;
    text-transform: none;
}

.xc-page-contact-form__required {
    color: inherit;
}

.xc-page-contact-form__control,
.xc-page-contact-form__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):not(.wpcf7-checkbox) {
    display: block;
    width: 100% !important;
    min-height: 56px;
    margin: 0 !important;
    padding: 24px 12px 8px !important;
    border: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    border-bottom: 1px solid currentColor !important;
    background-color: rgba(22, 23, 24, .06) !important;
    box-shadow: none !important;
    color: #161718 !important;
    caret-color: #31694b;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: .02em !important;
    outline: 0 !important;
    transition: background-color .2s cubic-bezier(0, 0, .2, 1), border-color .2s cubic-bezier(0, 0, .2, 1);
}

.xc-page-contact-form__control:hover,
.xc-page-contact-form__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):not(.wpcf7-checkbox):hover {
    background-color: rgba(22, 23, 24, .09) !important;
}

.xc-page-contact-form__control:focus,
.xc-page-contact-form__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):not(.wpcf7-checkbox):focus {
    border-bottom-width: 2px !important;
    border-bottom-color: #31694b !important;
    background-color: rgba(22, 23, 24, .06) !important;
}

.xc-page-contact-form__control::placeholder,
.xc-page-contact-form__form .wpcf7-form-control::placeholder {
    color: rgba(22, 23, 24, .48);
    opacity: 1;
}

.xc-page-contact-form__textarea,
.xc-page-contact-form__form textarea.wpcf7-form-control {
    min-height: 80px;
    resize: vertical;
}

.xc-page-contact-form__hint,
.xc-page-contact-form__form .wpcf7-not-valid-tip {
    display: block;
    width: 100%;
    min-height: 16px;
    margin: 4px 0 0;
    padding: 0 12px;
    overflow: hidden;
    color: #5a5b5c !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-page-contact-form__form .wpcf7-not-valid-tip {
    color: #b00020 !important;
    font-weight: 700;
}

.xc-page-contact-form__actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0;
}

.xc-page-contact-form__submit,
.xc-page-contact-form__form .wpcf7-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 14px 24px !important;
    border: 0 !important;
    border-radius: 1000px !important;
    background-color: #78faae !important;
    background-image: none !important;
    background-clip: padding-box;
    box-shadow: none !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-rendering: geometricPrecision;
    cursor: pointer;
    transition: background-color .3s ease-out, color .3s ease-out, opacity .3s ease-out !important;
}

.xc-page-contact-form__submit:hover,
.xc-page-contact-form__form .wpcf7-submit:hover {
    background-color: #72e3a1 !important;
    color: #161718 !important;
}

.xc-page-contact-form__submit:active,
.xc-page-contact-form__form .wpcf7-submit:active {
    background-color: #78faae !important;
}

.xc-page-contact-form__form .wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
}

.xc-page-contact-form__form .wpcf7-response-output {
    margin: 24px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 4px;
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px;
    line-height: 20px;
}

.xc-page-contact-form__form .wpcf7 form.invalid .wpcf7-response-output,
.xc-page-contact-form__form .wpcf7 form.unaccepted .wpcf7-response-output,
.xc-page-contact-form__form .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #b00020 !important;
}

.xc-page-contact-form__form .wpcf7 form.sent .wpcf7-response-output {
    border-color: #31694b !important;
}

@media (min-width: 1710px) {
    .xc-page-contact-form__submit,
    .xc-page-contact-form__form .wpcf7-submit {
        width: auto !important;
        min-width: 300px !important;
    }
}

@media (max-width: 1199.98px) {
    .xc-page-contact-form__headline,
    .xc-page-contact-form .section-title,
    .xc-page-contact-form h2 {
        font-size: 36px !important;
        margin-bottom: 30px !important;
    }
}

@media (max-width: 719.98px) {
    .xc-page-contact-form {
        padding: 40px 0 48px !important;
    }

    .xc-page-contact-form__headline,
    .xc-page-contact-form .section-title,
    .xc-page-contact-form h2 {
        max-width: 335px;
        font-size: 30px !important;
        line-height: 120% !important;
        margin-bottom: 25px !important;
    }

    .xc-page-contact-form__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .xc-page-contact-form__form,
    .xc-page-contact-form .wpcf7 form {
        max-width: 100%;
    }
}

/*==============================================
 * PARTNER PAGE HERO (.xc-page-partner-hero)
 * Flatsome banner rebuilt to match Skoda HeroBannerModule with text + CTA.
 * Scope strictly follows parent class to avoid leaking to other banners.
 *==============================================*/
.xc-page-partner-hero {
    --xc-partner-hero-container: 1600px;
    --xc-partner-hero-row-pad: 45px;
    --xc-partner-hero-col-pad: 15px;
    --xc-partner-hero-content-width: min(50%, 690px);
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin-left: auto;
    margin-right: auto;
    background-color: #373737;
}

.xc-page-partner-hero .section-bg,
.xc-page-partner-hero .section-content,
.xc-page-partner-hero .row,
.xc-page-partner-hero .col,
.xc-page-partner-hero .col-inner {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.xc-page-partner-hero .section-content,
.xc-page-partner-hero .row.row-full-width,
.xc-page-partner-hero .banner,
.xc-page-partner-hero .banner-inner,
.xc-page-partner-hero .banner-bg,
.xc-page-partner-hero .banner-layers {
    width: 100% !important;
}

.xc-page-partner-hero .banner {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 36.5% !important;
    overflow: hidden;
    background-color: #373737 !important;
}

.xc-page-partner-hero .banner-inner,
.xc-page-partner-hero .banner-bg,
.xc-page-partner-hero .banner-layers {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
}

.xc-page-partner-hero .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: radial-gradient(185.5% 108.19% at 43.8% 19.51%, rgba(0, 0, 0, 0) 0, rgba(15, 15, 15, .22) 54.5%, rgba(28, 28, 28, .56) 96.71%);
}

.xc-page-partner-hero .banner-bg img.bg,
.xc-page-partner-hero .banner-bg picture,
.xc-page-partner-hero .banner-bg video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

.xc-page-partner-hero .banner-layers.container {
    max-width: var(--xc-partner-hero-container) !important;
    height: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.xc-page-partner-hero .banner-link {
    display: none !important;
}

.xc-page-partner-hero .text-box {
    position: absolute !important;
    left: calc(15px + var(--xc-partner-hero-row-pad) + var(--xc-partner-hero-col-pad)) !important;
    right: auto !important;
    top: auto !important;
    bottom: 32px !important;
    width: var(--xc-partner-hero-content-width) !important;
    max-width: var(--xc-partner-hero-content-width) !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5;
}

.xc-page-partner-hero .text-box-content,
.xc-page-partner-hero .text-inner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 100% !important;
}

.xc-page-partner-hero h1,
.xc-page-partner-hero h2,
.xc-page-partner-hero h3,
.xc-page-partner-hero .headline {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.xc-page-partner-hero p,
.xc-page-partner-hero .text {
    display: block;
    max-width: 610px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
}

.xc-page-partner-hero .button.primary,
.xc-page-partner-hero a.button.primary.lowercase {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 32px 0 0 !important;
    padding: 14px 24px !important;
    border: 0 !important;
    border-radius: 1000px !important;
    background-color: #78faae !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-rendering: geometricPrecision;
    cursor: pointer;
    transition: background-color .3s ease-out, color .3s ease-out, opacity .3s ease-out !important;
}

.xc-page-partner-hero .button.primary span,
.xc-page-partner-hero a.button.primary.lowercase span {
    display: block;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

.xc-page-partner-hero .button.primary:hover,
.xc-page-partner-hero a.button.primary.lowercase:hover {
    background-color: #72e3a1 !important;
    color: #161718 !important;
}

.xc-page-partner-hero .button.primary:active,
.xc-page-partner-hero a.button.primary.lowercase:active {
    background-color: #78faae !important;
}

@media (max-width: 1199.98px) {
    .xc-page-partner-hero {
        --xc-partner-hero-row-pad: 25px;
        --xc-partner-hero-content-width: 50%;
    }
}

@media (max-width: 991.98px) {
    .xc-page-partner-hero {
        --xc-partner-hero-row-pad: 20px;
        --xc-partner-hero-content-width: 66.666667%;
    }

    .xc-page-partner-hero h1,
    .xc-page-partner-hero h2,
    .xc-page-partner-hero h3,
    .xc-page-partner-hero .headline {
        font-size: 38px !important;
        line-height: 126% !important;
    }

    .xc-page-partner-hero p,
    .xc-page-partner-hero .text {
        font-size: 17px !important;
    }
}

@media (max-width: 767.98px) {
    .xc-page-partner-hero h1,
    .xc-page-partner-hero h2,
    .xc-page-partner-hero h3,
    .xc-page-partner-hero .headline {
        font-size: 32px !important;
        line-height: 129% !important;
    }

    .xc-page-partner-hero p,
    .xc-page-partner-hero .text {
        margin-top: 18px !important;
        font-size: 16px !important;
        line-height: 150% !important;
    }

    .xc-page-partner-hero .button.primary,
    .xc-page-partner-hero a.button.primary.lowercase {
        margin-top: 28px !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-partner-hero {
        --xc-partner-hero-content-width: 100%;
        min-height: calc(100vh - 70px);
    }

    .xc-page-partner-hero .banner {
        height: calc(100vh - 70px) !important;
        min-height: 420px !important;
        padding-top: 0 !important;
    }

    .xc-page-partner-hero .banner-bg::after {
        mix-blend-mode: multiply;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 17.44%, rgba(0, 0, 0, .48) 52.88%, rgba(0, 0, 0, .78) 88.08%);
    }

    .xc-page-partner-hero .banner-bg img.bg,
    .xc-page-partner-hero .banner-bg picture,
    .xc-page-partner-hero .banner-bg video {
        object-position: 50% 50% !important;
    }

    .xc-page-partner-hero .banner-layers.container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .xc-page-partner-hero .text-box {
        left: 30px !important;
        right: 30px !important;
        bottom: 32px !important;
        width: auto !important;
        max-width: none !important;
    }

    .xc-page-partner-hero h1,
    .xc-page-partner-hero h2,
    .xc-page-partner-hero h3,
    .xc-page-partner-hero .headline {
        font-size: 28px !important;
        line-height: 129% !important;
    }

    .xc-page-partner-hero p,
    .xc-page-partner-hero .text {
        max-width: none;
        margin-top: 16px !important;
        font-size: 16px !important;
    }

    .xc-page-partner-hero .button.primary,
    .xc-page-partner-hero a.button.primary.lowercase {
        width: 100% !important;
        margin-top: 24px !important;
    }
}

/*==============================================
 * PARTNER PAGE INFO (.xc-page-partner-info)
 * Flatsome boxes rebuilt to match Skoda HighlightsModule.
 *==============================================*/
.xc-page-partner-info {
    --xc-partner-info-container: 1600px;
    --xc-partner-info-row-pad: 45px;
    --xc-partner-info-col-pad: 15px;
    --xc-partner-info-card-shadow: 0 0 5px 0 rgba(0, 0, 0, .05), 0 5px 20px 0 rgba(0, 0, 0, .05);
    overflow: hidden;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
    background-color: #f3f3f3;
}

.xc-page-partner-info .row,
.xc-page-partner-info .col,
.xc-page-partner-info .col-inner {
    margin-bottom: 0 !important;
}

.xc-page-partner-info .section-content {
    width: 100%;
    max-width: var(--xc-partner-info-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.xc-page-partner-info .row {
    width: 100%;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--xc-partner-info-row-pad) !important;
    padding-right: var(--xc-partner-info-row-pad) !important;
}

.xc-page-partner-info .row + .row {
    margin-top: 70px !important;
}

.xc-page-partner-info .col {
    padding-left: var(--xc-partner-info-col-pad) !important;
    padding-right: var(--xc-partner-info-col-pad) !important;
}

.xc-page-partner-info .box {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 475px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: var(--xc-partner-info-card-shadow);
}

.xc-page-partner-info .box-img-left {
    flex-direction: row;
}

.xc-page-partner-info .box-img-right,
.xc-page-partner-info .box.x-reverse {
    flex-direction: row-reverse;
}

.xc-page-partner-info .box-image,
.xc-page-partner-info .box-text {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50%;
}

.xc-page-partner-info .box-image {
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

.xc-page-partner-info .box-image > div,
.xc-page-partner-info .box-image img {
    width: 100% !important;
    height: 100% !important;
}

.xc-page-partner-info .box-image img {
    display: block;
    max-width: none !important;
    min-height: 475px;
    object-fit: cover;
    object-position: 50% 50%;
}

.xc-page-partner-info .box-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 475px;
    padding: 30px 0 !important;
    background-color: #ffffff;
    color: #161718;
    text-align: left !important;
}

.xc-page-partner-info .box-text-inner {
    width: 100%;
    max-width: 645px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18.4%;
    padding-right: 18.4%;
    text-align: left !important;
}

.xc-page-partner-info .box-img-left .box-text-inner {
    position: relative;
    inset-inline-start: -15px;
}

.xc-page-partner-info .box-img-right .box-text-inner,
.xc-page-partner-info .box.x-reverse .box-text-inner {
    position: relative;
    inset-inline-start: 20px;
    padding-left: 18.5%;
    padding-right: 18.5%;
}

.xc-page-partner-info h1,
.xc-page-partner-info h2,
.xc-page-partner-info h3,
.xc-page-partner-info h4,
.xc-page-partner-info .item-headline {
    margin: 0 0 20px !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 36px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
}

.xc-page-partner-info p,
.xc-page-partner-info .text {
    margin: 0 0 30px !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
}

.xc-page-partner-info p:last-child,
.xc-page-partner-info .text:last-child {
    margin-bottom: 0 !important;
}

.xc-page-partner-info .button.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 14px 48px 14px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 117% !important;
    letter-spacing: 1px !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    position: relative;
}

.xc-page-partner-info .button.primary::after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-52%);
    color: #161718;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    transition: right .15s ease-out;
}

.xc-page-partner-info .button.primary:hover {
    color: #161718 !important;
    text-decoration: none !important;
}

.xc-page-partner-info .button.primary:hover::after {
    right: 12px;
}

.xc-page-partner-info .button.primary span {
    color: inherit !important;
    font: inherit !important;
}

/*==============================================
 * PARTNER PAGE FORM (.xc-page-partner-form)
 * Contact Form 7 partner registration form using BEM classes.
 *==============================================*/
.xc-page-partner-form {
    --xc-partner-form-container: 1600px;
    --xc-partner-form-width: 645px;
    --xc-partner-form-gap: 24px;
    background-color: #f3f3f3;
    padding: 48px 0 64px !important;
}

.xc-page-partner-form .section-content,
.xc-page-partner-form > .container,
.xc-page-partner-form .container {
    width: 100%;
    max-width: var(--xc-partner-form-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.xc-page-partner-form .row,
.xc-page-partner-form .col,
.xc-page-partner-form .col-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.xc-page-partner-form .row-form {
    max-width: var(--xc-partner-form-container) !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px 0 64px !important;
    background-color: #ffffff;
}

.xc-page-partner-form .row-form > .col,
.xc-page-partner-form .row-form > .col > .col-inner {
    background-color: #ffffff;
}

.xc-page-partner-form h2,
.xc-page-partner-form__headline {
    width: 100%;
    max-width: 645px;
    margin: 0 auto 40px !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-transform: none !important;
}

.xc-page-partner-form__form,
.xc-page-partner-form_form,
.xc-page-partner-form .wpcf7 form {
    width: 100%;
    max-width: var(--xc-partner-form-width);
    margin: 0 auto !important;
    color: #5a5b5c;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: .02em;
}

.xc-page-partner-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--xc-partner-form-gap);
}

.xc-page-partner-form__field {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 0 24px;
    color: #5a5b5c;
    transition: color .2s cubic-bezier(0, 0, .2, 1);
}

.xc-page-partner-form__field:hover,
.xc-page-partner-form__field:focus-within {
    color: #161718;
}

.xc-page-partner-form__field--full {
    grid-column: 1 / -1;
}

.xc-page-partner-form__label {
    display: block;
    margin: 0 0 8px;
    color: inherit;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: .02em;
    text-transform: none;
}

.xc-page-partner-form__required {
    color: inherit;
}

.xc-page-partner-form__form p,
.xc-page-partner-form_form p {
    margin: 0 !important;
    padding: 0 !important;
}

.xc-page-partner-form__form br,
.xc-page-partner-form_form br {
    display: none !important;
}

.xc-page-partner-form__form .wpcf7-form-control-wrap,
.xc-page-partner-form_form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.xc-page-partner-form__control,
.xc-page-partner-form__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox),
.xc-page-partner-form_form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox),
.xc-page-partner-form__form select,
.xc-page-partner-form_form select {
    display: block !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 24px 12px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid currentColor !important;
    border-radius: 4px 4px 0 0 !important;
    background-color: rgba(22, 23, 24, .06) !important;
    box-shadow: none !important;
    color: #161718 !important;
    caret-color: #31694b;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: .02em !important;
    outline: 0 !important;
    transition: background-color .2s cubic-bezier(0, 0, .2, 1), border-color .2s cubic-bezier(0, 0, .2, 1) !important;
}

.xc-page-partner-form__form select,
.xc-page-partner-form_form select {
    appearance: auto;
    cursor: pointer;
}

.xc-page-partner-form__control:hover,
.xc-page-partner-form__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox):hover,
.xc-page-partner-form_form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox):hover,
.xc-page-partner-form__form select:hover,
.xc-page-partner-form_form select:hover {
    background-color: rgba(22, 23, 24, .09) !important;
}

.xc-page-partner-form__control:focus,
.xc-page-partner-form__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox):focus,
.xc-page-partner-form_form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox):focus,
.xc-page-partner-form__form select:focus,
.xc-page-partner-form_form select:focus {
    border-bottom-width: 2px !important;
    border-bottom-color: #31694b !important;
    background-color: rgba(22, 23, 24, .06) !important;
}

.xc-page-partner-form__textarea,
.xc-page-partner-form__form textarea,
.xc-page-partner-form_form textarea {
    min-height: 96px !important;
    resize: vertical;
}

.xc-page-partner-form__hint,
.xc-page-partner-form__form .wpcf7-not-valid-tip,
.xc-page-partner-form_form .wpcf7-not-valid-tip {
    display: block;
    width: 100%;
    min-height: 16px;
    margin: 4px 0 0 !important;
    padding-left: 12px;
    padding-right: 12px;
    color: #5a5b5c;
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    text-align: left;
}

.xc-page-partner-form__form .wpcf7-not-valid-tip,
.xc-page-partner-form_form .wpcf7-not-valid-tip {
    color: #b00020 !important;
}

.xc-page-partner-form__actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
}

.xc-page-partner-form__submit,
.xc-page-partner-form__form .wpcf7-submit,
.xc-page-partner-form_form .wpcf7-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 14px 24px !important;
    border: 0 !important;
    border-radius: 1000px !important;
    background-color: #78faae !important;
    background-image: none !important;
    background-clip: padding-box;
    box-shadow: none !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-rendering: geometricPrecision;
    cursor: pointer;
    transition: background-color .3s ease-out, color .3s ease-out, opacity .3s ease-out !important;
}

.xc-page-partner-form__submit:hover,
.xc-page-partner-form__form .wpcf7-submit:hover,
.xc-page-partner-form_form .wpcf7-submit:hover {
    background-color: #72e3a1 !important;
    color: #161718 !important;
}

.xc-page-partner-form__submit:active,
.xc-page-partner-form__form .wpcf7-submit:active,
.xc-page-partner-form_form .wpcf7-submit:active {
    background-color: #78faae !important;
}

.xc-page-partner-form__form .wpcf7-spinner,
.xc-page-partner-form_form .wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
}

.xc-page-partner-form__form .wpcf7-response-output,
.xc-page-partner-form_form .wpcf7-response-output,
.xc-page-partner-form .wpcf7-response-output {
    margin: 24px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 4px;
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px;
    line-height: 20px;
}

.xc-page-partner-form__form .wpcf7 form.invalid .wpcf7-response-output,
.xc-page-partner-form__form .wpcf7 form.unaccepted .wpcf7-response-output,
.xc-page-partner-form__form .wpcf7 form.payment-required .wpcf7-response-output,
.xc-page-partner-form .wpcf7 form.invalid .wpcf7-response-output,
.xc-page-partner-form .wpcf7 form.unaccepted .wpcf7-response-output,
.xc-page-partner-form .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #b00020 !important;
}

.xc-page-partner-form__form .wpcf7 form.sent .wpcf7-response-output,
.xc-page-partner-form .wpcf7 form.sent .wpcf7-response-output {
    border-color: #31694b !important;
}

@media (min-width: 1710px) {
    .xc-page-partner-form__submit,
    .xc-page-partner-form__form .wpcf7-submit,
    .xc-page-partner-form_form .wpcf7-submit {
        width: auto !important;
        min-width: 300px !important;
    }
}

@media (max-width: 1199.98px) {
    .xc-page-partner-info {
        --xc-partner-info-row-pad: 25px;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .xc-page-partner-info .row + .row {
        margin-top: 60px !important;
    }

    .xc-page-partner-info h1,
    .xc-page-partner-info h2,
    .xc-page-partner-info h3,
    .xc-page-partner-info h4,
    .xc-page-partner-info .item-headline {
        font-size: 36px !important;
    }

    .xc-page-partner-form h2,
    .xc-page-partner-form__headline {
        font-size: 36px !important;
        margin-bottom: 30px !important;
    }
}

@media (max-width: 991.98px) {
    .xc-page-partner-info {
        --xc-partner-info-row-pad: 20px;
        --xc-partner-info-col-pad: 10px;
    }

    .xc-page-partner-info .box-text-inner,
    .xc-page-partner-info .box-img-left .box-text-inner,
    .xc-page-partner-info .box-img-right .box-text-inner,
    .xc-page-partner-info .box.x-reverse .box-text-inner {
        inset-inline-start: 0;
        padding-left: 12%;
        padding-right: 12%;
    }

    .xc-page-partner-info h1,
    .xc-page-partner-info h2,
    .xc-page-partner-info h3,
    .xc-page-partner-info h4,
    .xc-page-partner-info .item-headline {
        font-size: 30px !important;
        line-height: 120% !important;
    }

    .xc-page-partner-info p,
    .xc-page-partner-info .text {
        font-size: 16px !important;
    }
}

@media (max-width: 719.98px) {
    .xc-page-partner-form {
        padding: 40px 0 48px !important;
    }

    .xc-page-partner-form .row-form {
        padding: 30px 0 48px !important;
    }

    .xc-page-partner-form h2,
    .xc-page-partner-form__headline {
        max-width: 335px;
        font-size: 30px !important;
        line-height: 120% !important;
        margin-bottom: 25px !important;
    }

    .xc-page-partner-form__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .xc-page-partner-form__form,
    .xc-page-partner-form_form,
    .xc-page-partner-form .wpcf7 form {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .xc-page-partner-info {
        --xc-partner-info-row-pad: 10px;
        --xc-partner-info-col-pad: 10px;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .xc-page-partner-info .section-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .xc-page-partner-info .row + .row {
        margin-top: 40px !important;
    }

    .xc-page-partner-info .box,
    .xc-page-partner-info .box-img-left,
    .xc-page-partner-info .box-img-right,
    .xc-page-partner-info .box.x-reverse {
        flex-direction: column !important;
        align-items: stretch;
        min-height: 0;
    }

    .xc-page-partner-info .box-image,
    .xc-page-partner-info .box-text {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto;
    }

    .xc-page-partner-info .box-image img {
        height: auto !important;
        min-height: 0;
        aspect-ratio: 335 / 215;
    }

    .xc-page-partner-info .box-text {
        min-height: 0;
        padding: 30px 0 !important;
    }

    .xc-page-partner-info .box-text-inner,
    .xc-page-partner-info .box-img-left .box-text-inner,
    .xc-page-partner-info .box-img-right .box-text-inner,
    .xc-page-partner-info .box.x-reverse .box-text-inner {
        inset-inline-start: 0;
        max-width: 335px;
        padding-left: 10.7%;
        padding-right: 10.7%;
    }

    .xc-page-partner-info h1,
    .xc-page-partner-info h2,
    .xc-page-partner-info h3,
    .xc-page-partner-info h4,
    .xc-page-partner-info .item-headline {
        margin-bottom: 30px !important;
        font-size: 24px !important;
        line-height: 121% !important;
    }

    .xc-page-partner-info p,
    .xc-page-partner-info .text {
        display: block !important;
        margin-bottom: 30px !important;
        font-size: 16px !important;
    }
}

/*==============================================
 * SHOWROOM PAGE HERO (.xc-page-showroom-hero)
 * Flatsome banner rebuilt to match Skoda HeroBannerModule.
 *==============================================*/
.xc-page-showroom-hero {
    --xc-showroom-hero-container: 1600px;
    --xc-showroom-hero-row-pad: 45px;
    --xc-showroom-hero-col-pad: 15px;
    --xc-showroom-hero-content-width: min(50%, 690px);
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin-left: auto;
    margin-right: auto;
    background-color: #373737;
}

.xc-page-showroom-hero .section-bg,
.xc-page-showroom-hero .section-content,
.xc-page-showroom-hero .row,
.xc-page-showroom-hero .col,
.xc-page-showroom-hero .col-inner {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.xc-page-showroom-hero .section-content,
.xc-page-showroom-hero .row.row-full-width,
.xc-page-showroom-hero .banner,
.xc-page-showroom-hero .banner-inner,
.xc-page-showroom-hero .banner-bg,
.xc-page-showroom-hero .banner-layers {
    width: 100% !important;
}

.xc-page-showroom-hero .banner {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 36.5% !important;
    overflow: hidden;
    background-color: #373737 !important;
}

.xc-page-showroom-hero .banner-inner,
.xc-page-showroom-hero .banner-bg,
.xc-page-showroom-hero .banner-layers {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
}

.xc-page-showroom-hero .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: radial-gradient(185.5% 108.19% at 43.8% 19.51%, rgba(0, 0, 0, 0) 0, rgba(15, 15, 15, .22) 54.5%, rgba(28, 28, 28, .56) 96.71%);
}

.xc-page-showroom-hero .banner-bg img.bg,
.xc-page-showroom-hero .banner-bg picture,
.xc-page-showroom-hero .banner-bg video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

.xc-page-showroom-hero .banner-layers.container {
    max-width: var(--xc-showroom-hero-container) !important;
    height: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.xc-page-showroom-hero .banner-link {
    display: none !important;
}

.xc-page-showroom-hero .text-box {
    position: absolute !important;
    left: calc(15px + var(--xc-showroom-hero-row-pad) + var(--xc-showroom-hero-col-pad)) !important;
    right: auto !important;
    top: auto !important;
    bottom: 32px !important;
    width: var(--xc-showroom-hero-content-width) !important;
    max-width: var(--xc-showroom-hero-content-width) !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5;
}

.xc-page-showroom-hero .text-box-content,
.xc-page-showroom-hero .text-inner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 100% !important;
}

.xc-page-showroom-hero h1,
.xc-page-showroom-hero h2,
.xc-page-showroom-hero h3,
.xc-page-showroom-hero .headline {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.xc-page-showroom-hero p,
.xc-page-showroom-hero .text {
    display: block;
    max-width: 610px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
}

@media (max-width: 1199.98px) {
    .xc-page-showroom-hero {
        --xc-showroom-hero-row-pad: 25px;
        --xc-showroom-hero-content-width: 50%;
    }
}

@media (max-width: 991.98px) {
    .xc-page-showroom-hero {
        --xc-showroom-hero-row-pad: 20px;
        --xc-showroom-hero-content-width: 66.666667%;
    }

    .xc-page-showroom-hero h1,
    .xc-page-showroom-hero h2,
    .xc-page-showroom-hero h3,
    .xc-page-showroom-hero .headline {
        font-size: 38px !important;
        line-height: 126% !important;
    }

    .xc-page-showroom-hero p,
    .xc-page-showroom-hero .text {
        font-size: 17px !important;
    }
}

@media (max-width: 767.98px) {
    .xc-page-showroom-hero h1,
    .xc-page-showroom-hero h2,
    .xc-page-showroom-hero h3,
    .xc-page-showroom-hero .headline {
        font-size: 32px !important;
        line-height: 129% !important;
    }

    .xc-page-showroom-hero p,
    .xc-page-showroom-hero .text {
        margin-top: 18px !important;
        font-size: 16px !important;
        line-height: 150% !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-showroom-hero {
        --xc-showroom-hero-content-width: 100%;
        min-height: calc(100vh - 70px);
    }

    .xc-page-showroom-hero .banner {
        height: calc(100vh - 70px) !important;
        min-height: 420px !important;
        padding-top: 0 !important;
    }

    .xc-page-showroom-hero .banner-bg::after {
        mix-blend-mode: multiply;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 17.44%, rgba(0, 0, 0, .48) 52.88%, rgba(0, 0, 0, .78) 88.08%);
    }

    .xc-page-showroom-hero .banner-bg img.bg,
    .xc-page-showroom-hero .banner-bg picture,
    .xc-page-showroom-hero .banner-bg video {
        object-position: 50% 50% !important;
    }

    .xc-page-showroom-hero .banner-layers.container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .xc-page-showroom-hero .text-box {
        left: 30px !important;
        right: 30px !important;
        bottom: 32px !important;
        width: auto !important;
        max-width: none !important;
    }

    .xc-page-showroom-hero h1,
    .xc-page-showroom-hero h2,
    .xc-page-showroom-hero h3,
    .xc-page-showroom-hero .headline {
        font-size: 28px !important;
        line-height: 129% !important;
    }

    .xc-page-showroom-hero p,
    .xc-page-showroom-hero .text {
        max-width: none;
        margin-top: 16px !important;
        font-size: 16px !important;
    }
}

/*==============================================
 * BUY PAGE HERO (.xc-page-buy-hero)
 * Flatsome banner rebuilt to match Skoda HeroBannerModule.
 *==============================================*/
.xc-page-buy-hero {
    --xc-buy-hero-container: 1600px;
    --xc-buy-hero-row-pad: 45px;
    --xc-buy-hero-col-pad: 15px;
    --xc-buy-hero-content-width: min(50%, 690px);
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin-left: auto;
    margin-right: auto;
    background-color: #373737;
}

.xc-page-buy-hero .section-bg,
.xc-page-buy-hero .section-content,
.xc-page-buy-hero .row,
.xc-page-buy-hero .col,
.xc-page-buy-hero .col-inner {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.xc-page-buy-hero .section-content,
.xc-page-buy-hero .row.row-full-width,
.xc-page-buy-hero .banner,
.xc-page-buy-hero .banner-inner,
.xc-page-buy-hero .banner-bg,
.xc-page-buy-hero .banner-layers {
    width: 100% !important;
}

.xc-page-buy-hero .banner {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 36.5% !important;
    overflow: hidden;
    background-color: #373737 !important;
}

.xc-page-buy-hero .banner-inner,
.xc-page-buy-hero .banner-bg,
.xc-page-buy-hero .banner-layers {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
}

.xc-page-buy-hero .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: radial-gradient(185.5% 108.19% at 43.8% 19.51%, rgba(0, 0, 0, 0) 0, rgba(15, 15, 15, .22) 54.5%, rgba(28, 28, 28, .56) 96.71%);
}

.xc-page-buy-hero .banner-bg img.bg,
.xc-page-buy-hero .banner-bg picture,
.xc-page-buy-hero .banner-bg video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

.xc-page-buy-hero .banner-layers.container {
    max-width: var(--xc-buy-hero-container) !important;
    height: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.xc-page-buy-hero .banner-link {
    display: none !important;
}

.xc-page-buy-hero .text-box {
    position: absolute !important;
    left: calc(15px + var(--xc-buy-hero-row-pad) + var(--xc-buy-hero-col-pad)) !important;
    right: auto !important;
    top: auto !important;
    bottom: 32px !important;
    width: var(--xc-buy-hero-content-width) !important;
    max-width: var(--xc-buy-hero-content-width) !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5;
}

.xc-page-buy-hero .text-box-content,
.xc-page-buy-hero .text-inner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 100% !important;
}

.xc-page-buy-hero h1,
.xc-page-buy-hero h2,
.xc-page-buy-hero h3,
.xc-page-buy-hero .headline {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.xc-page-buy-hero p,
.xc-page-buy-hero .text {
    display: block;
    max-width: 610px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
}

@media (max-width: 1199.98px) {
    .xc-page-buy-hero {
        --xc-buy-hero-row-pad: 25px;
        --xc-buy-hero-content-width: 50%;
    }
}

@media (max-width: 991.98px) {
    .xc-page-buy-hero {
        --xc-buy-hero-row-pad: 20px;
        --xc-buy-hero-content-width: 66.666667%;
    }

    .xc-page-buy-hero h1,
    .xc-page-buy-hero h2,
    .xc-page-buy-hero h3,
    .xc-page-buy-hero .headline {
        font-size: 38px !important;
        line-height: 126% !important;
    }

    .xc-page-buy-hero p,
    .xc-page-buy-hero .text {
        font-size: 17px !important;
    }
}

@media (max-width: 767.98px) {
    .xc-page-buy-hero h1,
    .xc-page-buy-hero h2,
    .xc-page-buy-hero h3,
    .xc-page-buy-hero .headline {
        font-size: 32px !important;
        line-height: 129% !important;
    }

    .xc-page-buy-hero p,
    .xc-page-buy-hero .text {
        margin-top: 18px !important;
        font-size: 16px !important;
        line-height: 150% !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-buy-hero {
        --xc-buy-hero-content-width: 100%;
        min-height: calc(100vh - 70px);
    }

    .xc-page-buy-hero .banner {
        height: calc(100vh - 70px) !important;
        min-height: 420px !important;
        padding-top: 0 !important;
    }

    .xc-page-buy-hero .banner-bg::after {
        mix-blend-mode: multiply;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 17.44%, rgba(0, 0, 0, .48) 52.88%, rgba(0, 0, 0, .78) 88.08%);
    }

    .xc-page-buy-hero .banner-bg img.bg,
    .xc-page-buy-hero .banner-bg picture,
    .xc-page-buy-hero .banner-bg video {
        object-position: 50% 50% !important;
    }

    .xc-page-buy-hero .banner-layers.container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .xc-page-buy-hero .text-box {
        left: 30px !important;
        right: 30px !important;
        bottom: 32px !important;
        width: auto !important;
        max-width: none !important;
    }

    .xc-page-buy-hero h1,
    .xc-page-buy-hero h2,
    .xc-page-buy-hero h3,
    .xc-page-buy-hero .headline {
        font-size: 28px !important;
        line-height: 129% !important;
    }

    .xc-page-buy-hero p,
    .xc-page-buy-hero .text {
        max-width: none;
        margin-top: 16px !important;
        font-size: 16px !important;
    }
}

/*==============================================
 * PAGE SHOWROOM - HIGHLIGHTS IMAGE BOX
 * Match Skoda HighlightsModule: image left, text right, shadow card
 *==============================================*/
.xc-page-showroom-showroom {
    background-color: #f3f3f3 !important;
    padding-top: 48px !important;
    padding-bottom: 56px !important;
    overflow: hidden;
}

.xc-page-showroom-showroom .section-content {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

.xc-page-showroom-showroom .section-content > .row {
    max-width: none !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

.xc-page-showroom-showroom .section-content > .row:first-child {
    margin-bottom: 25px !important;
}

.xc-page-showroom-showroom #text-2917666027,
.xc-page-showroom-showroom .text {
    text-align: center !important;
}

.xc-page-showroom-showroom h2 {
    max-width: 645px;
    margin: 0 auto !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-transform: none !important;
}

.xc-page-showroom-showroom .box {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
    background-color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05), 0 5px 20px 0 rgba(0, 0, 0, .05) !important;
}

.xc-page-showroom-showroom .box-image,
.xc-page-showroom-showroom .box-text {
    width: 100% !important;
}

.xc-page-showroom-showroom .box-image {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    background-color: #f3f3f3;
}

.xc-page-showroom-showroom .box-image > div {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.xc-page-showroom-showroom .box-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 240px;
    object-fit: cover !important;
    object-position: center center;
}

.xc-page-showroom-showroom .box-text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 30px 10.7% !important;
    background-color: #ffffff !important;
    text-align: left !important;
}

.xc-page-showroom-showroom .box-text-inner {
    width: 100%;
    max-width: 645px;
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
}

.xc-page-showroom-showroom .box-text h4 {
    margin: 0 0 30px !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 121% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
}

.xc-page-showroom-showroom .box-text p {
    margin: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    text-align: left !important;
}

@media (min-width: 576px) {
    .xc-page-showroom-showroom {
        padding-top: 56px !important;
        padding-bottom: 64px !important;
    }

    .xc-page-showroom-showroom .section-content > .row:first-child {
        margin-bottom: 30px !important;
    }

    .xc-page-showroom-showroom h2 {
        font-size: 36px !important;
        line-height: 119% !important;
    }

    .xc-page-showroom-showroom .box-text {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .xc-page-showroom-showroom .box-text h4 {
        margin-bottom: 20px !important;
        font-size: 30px !important;
        line-height: 120% !important;
    }
}

@media (min-width: 992px) {
    .xc-page-showroom-showroom {
        padding-top: 64px !important;
        padding-bottom: 72px !important;
    }

    .xc-page-showroom-showroom .section-content > .row:first-child {
        margin-bottom: 30px !important;
    }

    .xc-page-showroom-showroom .box {
        flex-direction: row;
        align-items: stretch;
    }

    .xc-page-showroom-showroom .box-image,
    .xc-page-showroom-showroom .box-text {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .xc-page-showroom-showroom .box-image img {
        min-height: 475px;
    }

    .xc-page-showroom-showroom .box-text {
        padding: 0 8.875% !important;
    }
}

@media (min-width: 1200px) {
    .xc-page-showroom-showroom .section-content > .row:first-child {
        margin-bottom: 40px !important;
    }

    .xc-page-showroom-showroom h2 {
        font-size: 42px !important;
        line-height: 119% !important;
    }

    .xc-page-showroom-showroom .box-text h4 {
        font-size: 36px !important;
        line-height: 119% !important;
    }

    .xc-page-showroom-showroom .box-text p {
        font-size: 18px !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-showroom-showroom {
        padding-top: 40px !important;
        padding-bottom: 48px !important;
    }

    .xc-page-showroom-showroom .section-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .xc-page-showroom-showroom .box-text {
        padding: 30px 24px !important;
    }
}

/*==============================================
 * BUY PAGE - CALCULATE CTA
 * Match Skoda CtaModule: gray section, white row card, centered headline/button
 *==============================================*/
.xc-page-buy-calculate {
    background-color: #f3f3f3 !important;
    padding-top: 48px !important;
    padding-bottom: 56px !important;
    text-align: center;
    overflow: hidden;
}

.xc-page-buy-calculate .section-content {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

.xc-page-buy-calculate .section-content > .row {
    max-width: none !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: #ffffff !important;
}

.xc-page-buy-calculate .col {
    padding-bottom: 0 !important;
}

.xc-page-buy-calculate .col-inner {
    max-width: 645px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 30px 5px 55px !important;
    text-align: center !important;
}

.xc-page-buy-calculate h2 {
    max-width: 645px;
    margin: 0 auto 25px !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-transform: none !important;
}

.xc-page-buy-calculate .btn-calculate,
.xc-page-buy-calculate .button.primary.btn-calculate {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    max-width: 100%;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 14px 24px !important;
    border: 0 !important;
    border-radius: 1000px !important;
    background-color: #78faae !important;
    background-clip: padding-box;
    box-shadow: none !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out, opacity .3s ease-out, transform .3s ease-out;
}

.xc-page-buy-calculate .btn-calculate span,
.xc-page-buy-calculate .button.primary.btn-calculate span {
    display: inline-block;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

.xc-page-buy-calculate .btn-calculate:hover,
.xc-page-buy-calculate .button.primary.btn-calculate:hover {
    background-color: #72e3a1 !important;
    color: #161718 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.xc-page-buy-calculate .btn-calculate:active,
.xc-page-buy-calculate .button.primary.btn-calculate:active {
    background-color: #78faae !important;
    color: #161718 !important;
}

@media (min-width: 576px) {
    .xc-page-buy-calculate {
        padding-top: 56px !important;
        padding-bottom: 64px !important;
    }

    .xc-page-buy-calculate .col-inner {
        padding: 30px 0 50px !important;
    }

    .xc-page-buy-calculate h2 {
        margin-bottom: 30px !important;
        font-size: 36px !important;
        line-height: 119% !important;
    }
}

@media (min-width: 992px) {
    .xc-page-buy-calculate {
        padding-top: 60px !important;
        padding-bottom: 70px !important;
    }

    .xc-page-buy-calculate .section-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .xc-page-buy-calculate .col-inner {
        padding-top: 30px !important;
        padding-bottom: 50px !important;
    }
}

@media (min-width: 1200px) {
    .xc-page-buy-calculate .col-inner {
        padding-top: 30px !important;
        padding-bottom: 55px !important;
    }

    .xc-page-buy-calculate h2 {
        margin-bottom: 40px !important;
        font-size: 42px !important;
        line-height: 119% !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-buy-calculate {
        padding-top: 40px !important;
        padding-bottom: 48px !important;
    }

    .xc-page-buy-calculate .section-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .xc-page-buy-calculate .col-inner {
        padding: 30px 20px 55px !important;
    }

    .xc-page-buy-calculate .btn-calculate,
    .xc-page-buy-calculate .button.primary.btn-calculate {
        width: 100%;
        white-space: normal;
        line-height: 20px !important;
    }
}

/*==============================================
 * ALL OFFERS PAGE HERO (.xc-page-all-offers-hero)
 * Match Skoda HeroBannerModule: image hero with lower-left white text
 *==============================================*/
.xc-page-all-offers-hero {
    --xc-all-offers-hero-container: 1600px;
    --xc-all-offers-hero-row-pad: 45px;
    --xc-all-offers-hero-col-pad: 15px;
    --xc-all-offers-hero-content-width: min(50%, 690px);
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden;
    padding: 0 !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    background-color: #373737;
}

.xc-page-all-offers-hero .section-bg,
.xc-page-all-offers-hero .section-content {
    position: relative;
    z-index: auto;
}

.xc-page-all-offers-hero .section-content,
.xc-page-all-offers-hero .row,
.xc-page-all-offers-hero .col,
.xc-page-all-offers-hero .col-inner,
.xc-page-all-offers-hero .banner,
.xc-page-all-offers-hero .banner-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xc-page-all-offers-hero .section-bg,
.xc-page-all-offers-hero .section-content,
.xc-page-all-offers-hero .row.row-full-width,
.xc-page-all-offers-hero .banner,
.xc-page-all-offers-hero .banner-inner,
.xc-page-all-offers-hero .banner-bg,
.xc-page-all-offers-hero .banner-bg img.bg {
    width: 100vw !important;
    max-width: 100vw !important;
}

.xc-page-all-offers-hero .col {
    padding-bottom: 0 !important;
}

.xc-page-all-offers-hero .banner {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 36.5% !important;
    overflow: hidden;
    background-color: #373737 !important;
}

.xc-page-all-offers-hero .banner-inner,
.xc-page-all-offers-hero .banner-bg,
.xc-page-all-offers-hero .banner-layers {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.xc-page-all-offers-hero .banner-bg {
    overflow: hidden;
    background-color: #373737 !important;
}

.xc-page-all-offers-hero .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: radial-gradient(185.5% 108.19% at 43.8% 19.51%, rgba(0, 0, 0, 0) 0, rgba(15, 15, 15, .22) 54.5%, rgba(28, 28, 28, .56) 96.71%);
}

.xc-page-all-offers-hero .banner-bg img.bg,
.xc-page-all-offers-hero .banner-bg picture,
.xc-page-all-offers-hero .banner-bg video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

.xc-page-all-offers-hero .banner-layers.container {
    max-width: var(--xc-all-offers-hero-container) !important;
    height: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.xc-page-all-offers-hero .banner-link {
    display: none !important;
}

.xc-page-all-offers-hero .text-box {
    position: absolute !important;
    left: calc(15px + var(--xc-all-offers-hero-row-pad) + var(--xc-all-offers-hero-col-pad)) !important;
    right: auto !important;
    top: auto !important;
    bottom: 32px !important;
    width: var(--xc-all-offers-hero-content-width) !important;
    max-width: var(--xc-all-offers-hero-content-width) !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5;
}

.xc-page-all-offers-hero .text-box-content,
.xc-page-all-offers-hero .text-inner {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 100% !important;
}

.xc-page-all-offers-hero h1,
.xc-page-all-offers-hero h2,
.xc-page-all-offers-hero h3,
.xc-page-all-offers-hero .headline {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.xc-page-all-offers-hero p,
.xc-page-all-offers-hero .text {
    display: block;
    max-width: 610px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
}

@media (max-width: 1199.98px) {
    .xc-page-all-offers-hero {
        --xc-all-offers-hero-row-pad: 25px;
        --xc-all-offers-hero-content-width: 50%;
    }
}

@media (max-width: 991.98px) {
    .xc-page-all-offers-hero {
        --xc-all-offers-hero-row-pad: 20px;
        --xc-all-offers-hero-content-width: 66.666667%;
    }

    .xc-page-all-offers-hero h1,
    .xc-page-all-offers-hero h2,
    .xc-page-all-offers-hero h3,
    .xc-page-all-offers-hero .headline {
        font-size: 38px !important;
        line-height: 126% !important;
    }

    .xc-page-all-offers-hero p,
    .xc-page-all-offers-hero .text {
        font-size: 17px !important;
    }
}

@media (max-width: 767.98px) {
    .xc-page-all-offers-hero h1,
    .xc-page-all-offers-hero h2,
    .xc-page-all-offers-hero h3,
    .xc-page-all-offers-hero .headline {
        font-size: 32px !important;
        line-height: 129% !important;
    }

    .xc-page-all-offers-hero p,
    .xc-page-all-offers-hero .text {
        margin-top: 18px !important;
        font-size: 16px !important;
        line-height: 150% !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-all-offers-hero {
        --xc-all-offers-hero-content-width: 100%;
        min-height: calc(100vh - 70px);
    }

    .xc-page-all-offers-hero .banner {
        height: calc(100vh - 70px) !important;
        min-height: 420px !important;
        padding-top: 0 !important;
    }

    .xc-page-all-offers-hero .banner-bg::after {
        mix-blend-mode: multiply;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 17.44%, rgba(0, 0, 0, .48) 52.88%, rgba(0, 0, 0, .78) 88.08%);
    }

    .xc-page-all-offers-hero .banner-bg img.bg,
    .xc-page-all-offers-hero .banner-bg picture,
    .xc-page-all-offers-hero .banner-bg video {
        object-position: 50% 50% !important;
    }

    .xc-page-all-offers-hero .banner-layers.container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .xc-page-all-offers-hero .text-box {
        left: 30px !important;
        right: 30px !important;
        bottom: 32px !important;
        width: auto !important;
        max-width: none !important;
    }

    .xc-page-all-offers-hero h1,
    .xc-page-all-offers-hero h2,
    .xc-page-all-offers-hero h3,
    .xc-page-all-offers-hero .headline {
        font-size: 28px !important;
        line-height: 129% !important;
    }

    .xc-page-all-offers-hero p,
    .xc-page-all-offers-hero .text {
        max-width: none;
        margin-top: 16px !important;
        font-size: 16px !important;
    }
}

/*==============================================
 * ALL OFFERS PAGE - LATEST OFFERS (.xc-page-all-offers-last-offers)
 * Match Skoda LatestPromotionsModule: gray section, centered title, promotion cards
 *==============================================*/
.xc-page-all-offers-last-offers {
    background-color: #f3f3f3 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    overflow: hidden;
}

.xc-page-all-offers-last-offers .section-bg {
    background-color: #f3f3f3 !important;
}

.xc-page-all-offers-last-offers .section-content {
    max-width: 1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

.xc-page-all-offers-last-offers .section-content > .row {
    max-width: none !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

.xc-page-all-offers-last-offers .section-content > .row:first-child {
    margin-bottom: 16px !important;
}

.xc-page-all-offers-last-offers h2 {
    margin: 0 auto !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 36px !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
}

.xc-page-all-offers-last-offers .section-content > .row:nth-child(2) > .col,
.xc-page-all-offers-last-offers .section-content > .row:nth-child(2) > .col > .col-inner {
    padding-bottom: 0 !important;
    text-align: left !important;
}

.xc-page-all-offers-last-offers .row.large-columns-3 {
    justify-content: center;
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: auto !important;
    max-width: none !important;
}

.xc-page-all-offers-last-offers .post-item {
    display: flex;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 20px !important;
}

.xc-page-all-offers-last-offers .post-item > .col-inner {
    display: flex;
    height: 100%;
}

.xc-page-all-offers-last-offers .box-blog-post {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    text-align: left !important;
}

.xc-page-all-offers-last-offers .box-image {
    width: 100% !important;
    height: 255px !important;
    margin: 0 !important;
    overflow: hidden;
    background-color: #d8d8d8;
}

.xc-page-all-offers-last-offers .box-image .image-cover {
    height: 100% !important;
    padding-top: 0 !important;
}

.xc-page-all-offers-last-offers .box-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

.xc-page-all-offers-last-offers .box-text {
    display: flex;
    flex: 1 1 auto;
    width: 100% !important;
    padding: 24px !important;
    background-color: #ffffff !important;
    text-align: left !important;
}

.xc-page-all-offers-last-offers .box-text-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    margin: 0 !important;
    text-align: left !important;
}

.xc-page-all-offers-last-offers .post-title,
.xc-page-all-offers-last-offers .post-title a {
    margin: 0 !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 23px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    letter-spacing: .02em !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
}

.xc-page-all-offers-last-offers .post-title a:hover {
    color: #161718 !important;
    text-decoration: none !important;
}

.xc-page-all-offers-last-offers .is-divider {
    display: none !important;
}

.xc-page-all-offers-last-offers .from_the_blog_excerpt {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    letter-spacing: .02em !important;
    text-align: left !important;
}

.xc-page-all-offers-last-offers .xc-promotion-card-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px !important;
}

.xc-page-all-offers-last-offers .xc-promotion-card-readmore {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 44px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 13px !important;
    border: 1px solid #161718 !important;
    border-radius: 1000px !important;
    background-color: transparent !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xc-page-all-offers-last-offers .xc-promotion-card-readmore:hover {
    border-color: #161718 !important;
    background-color: rgba(26, 27, 28, .12) !important;
    color: #161718 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.xc-page-all-offers-last-offers .xc-promotion-card-validity {
    margin-top: 16px !important;
    color: #7c7d7e !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 16px !important;
    letter-spacing: .02em !important;
    text-align: left !important;
}

.xc-promotion-single-validity {
    margin-top: 12px;
    color: #7c7d7e;
    font-family: var(--skoda-font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: .02em;
    text-align: inherit;
}

.xc-page-all-offers-last-offers .badge.post-date {
    top: 16px !important;
    left: 16px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}

.xc-page-all-offers-last-offers .badge.post-date .badge-inner {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 7px 5px 10px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background-color: #0e3a2f !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.xc-page-all-offers-last-offers .badge.post-date .badge-inner::before {
    content: "MỚI";
    color: #ffffff !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 12px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.xc-page-all-offers-last-offers .section-content > .row:last-child {
    justify-content: center;
    margin-top: 0 !important;
}

.xc-page-all-offers-last-offers .section-content > .row:last-child .col,
.xc-page-all-offers-last-offers .section-content > .row:last-child .col-inner {
    padding-bottom: 0 !important;
    text-align: center !important;
}

.xc-page-all-offers-last-offers .button.primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 12px 22px !important;
    border: 2px solid #161718 !important;
    border-radius: 1000px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xc-page-all-offers-last-offers .button.primary:hover {
    border-color: #161718 !important;
    background-color: rgba(26, 27, 28, .12) !important;
    color: #161718 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.xc-page-all-offers-last-offers .button.primary span {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

@media (min-width: 576px) {
    .xc-page-all-offers-last-offers {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    .xc-page-all-offers-last-offers h2 {
        font-size: 32px !important;
        line-height: 38px !important;
    }
}

@media (min-width: 768px) {
    .xc-page-all-offers-last-offers .section-content > .row:first-child {
        margin-bottom: 24px !important;
    }

    .xc-page-all-offers-last-offers .post-item {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }
}

@media (min-width: 992px) {
    .xc-page-all-offers-last-offers {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .xc-page-all-offers-last-offers .post-item {
        flex-basis: 33.333333% !important;
        max-width: 33.333333% !important;
        padding-bottom: 30px !important;
    }
}

@media (min-width: 1200px) {
    .xc-page-all-offers-last-offers .section-content {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 1440px) {
    .xc-page-all-offers-last-offers h2 {
        font-size: 36px !important;
        line-height: 44px !important;
    }

    .xc-page-all-offers-last-offers .post-title,
    .xc-page-all-offers-last-offers .post-title a {
        font-size: 30px !important;
        line-height: 36px !important;
    }

    .xc-page-all-offers-last-offers .from_the_blog_excerpt {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    .xc-page-all-offers-last-offers .xc-promotion-card-validity {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

@media (max-width: 767.98px) {
    .xc-page-all-offers-last-offers .post-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-all-offers-last-offers {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .xc-page-all-offers-last-offers .section-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .xc-page-all-offers-last-offers .box-image {
        height: 255px !important;
    }

    .xc-page-all-offers-last-offers .box-text {
        padding: 24px !important;
    }

    .xc-page-all-offers-last-offers .button.primary {
        width: 100%;
        white-space: normal;
        line-height: 20px !important;
    }
}

/*==============================================
 * SPECIAL OFFERS CATEGORY TEMPLATE
 * Flatsome section / row / col / post-item / imagebox list layout
 *==============================================*/
.xc-special-offers-archive {
    background-color: #f3f3f3;
}

.xc-special-offers-archive__section {
    background-color: #f3f3f3 !important;
    padding-top: 40px !important;
    padding-bottom: 56px !important;
}

.xc-special-offers-archive__section .section-content {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

.xc-special-offers-archive__section .row {
    max-width: none !important;
}

.xc-special-offers-archive__title-row {
    margin-bottom: 24px !important;
}

.xc-special-offers-archive__title-row .col,
.xc-special-offers-archive__loop-row .col {
    padding-bottom: 0 !important;
}

.xc-special-offers-archive__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 36px !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    text-transform: none !important;
}

.xc-special-offers-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.xc-special-offers-item {
    width: 100% !important;
    max-width: none !important;
    flex-basis: 100% !important;
    padding: 0 !important;
}

.xc-special-offers-card {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    text-align: left !important;
}

.xc-special-offers-card__image {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    background-color: #d8d8d8;
}

.xc-special-offers-card__image .image-cover {
    height: 100% !important;
    padding-top: 56.25% !important;
}

.xc-special-offers-card__image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.xc-special-offers-card__text {
    display: flex;
    flex: 1 1 auto;
    width: 100% !important;
    padding: 24px !important;
    background-color: #ffffff !important;
    text-align: left !important;
}

.xc-special-offers-card__text .box-text-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0 !important;
    text-align: left !important;
}

.xc-special-offers-card__title,
.xc-special-offers-card__title a {
    margin: 0 !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 23px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    letter-spacing: .02em !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
}

.xc-special-offers-card__title a:hover {
    color: #161718 !important;
    text-decoration: none !important;
}

.xc-special-offers-card__excerpt {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    letter-spacing: .02em !important;
    text-align: left !important;
}

.xc-special-offers-card__actions {
    display: flex;
    width: 100%;
    margin-top: 24px !important;
}

.xc-special-offers-card__button,
.xc-special-offers-card__button.button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 13px !important;
    border: 1px solid #161718 !important;
    border-radius: 1000px !important;
    background-color: transparent !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xc-special-offers-card__button:hover,
.xc-special-offers-card__button.button:hover {
    border-color: #161718 !important;
    background-color: rgba(26, 27, 28, .12) !important;
    color: #161718 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.xc-special-offers-card__button span {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

.xc-special-offers-card__validity {
    margin-top: 16px !important;
    color: #7c7d7e !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 16px !important;
    letter-spacing: .02em !important;
    text-align: left !important;
}

@media (min-width: 576px) {
    .xc-special-offers-archive__section {
        padding-top: 54px !important;
        padding-bottom: 64px !important;
    }

    .xc-special-offers-archive__title {
        font-size: 32px !important;
        line-height: 38px !important;
    }
}

@media (min-width: 850px) {
    .xc-special-offers-card {
        flex-direction: row;
        align-items: stretch;
    }

    .xc-special-offers-card__image {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    .xc-special-offers-card__image .image-cover {
        min-height: 255px;
        padding-top: 0 !important;
    }

    .xc-special-offers-card__text {
        flex: 1 1 60%;
        min-height: 255px;
        padding: 24px !important;
    }
}

@media (min-width: 992px) {
    .xc-special-offers-archive__section {
        padding-top: 60px !important;
        padding-bottom: 70px !important;
    }

    .xc-special-offers-list {
        gap: 30px;
    }
}

@media (min-width: 1440px) {
    .xc-special-offers-archive__title {
        font-size: 36px !important;
        line-height: 44px !important;
    }

    .xc-special-offers-card__title,
    .xc-special-offers-card__title a {
        font-size: 30px !important;
        line-height: 36px !important;
    }

    .xc-special-offers-card__excerpt {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    .xc-special-offers-card__validity {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

@media (max-width: 849.98px) {
    .xc-special-offers-card__button,
    .xc-special-offers-card__button.button {
        width: 100%;
        white-space: normal;
        line-height: 20px !important;
    }
}

/*==============================================
 * PROMOTION SINGLE TEMPLATE (category khuyen-mai)
 * Flatsome blog single structure rebuilt for Skoda special-offers details
 *==============================================*/
.xc-promotion-single {
    background-color: #f3f3f3;
}

.xc-promotion-single__hero-section,
.xc-promotion-single__content-section {
    background-color: #f3f3f3 !important;
    overflow: hidden;
}

.xc-promotion-single__hero-section {
    padding-top: 40px !important;
    padding-bottom: 0 !important;
}

.xc-promotion-single__content-section {
    padding-top: 0 !important;
    padding-bottom: 56px !important;
}

.xc-promotion-single__hero-section .section-content,
.xc-promotion-single__content-section .section-content {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

.xc-promotion-single__hero-section .row,
.xc-promotion-single__content-section .row {
    max-width: none !important;
}

.xc-promotion-single__hero-row .col,
.xc-promotion-single__content-row .col,
.xc-promotion-single__back-row .col {
    padding-bottom: 0 !important;
}

.xc-promotion-single__hero-box {
    width: 100%;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px 8px 0 0 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

.xc-promotion-single__hero-image {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    background-color: #d8d8d8;
}

.xc-promotion-single__hero-image .image-cover {
    height: 100% !important;
    padding-top: 36.5% !important;
}

.xc-promotion-single__hero-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.xc-promotion-single__hero-text {
    padding: 32px 24px !important;
    background-color: #ffffff !important;
    text-align: left !important;
}

.xc-promotion-single__hero-text .box-text-inner {
    max-width: 960px;
    margin: 0 auto !important;
    text-align: left !important;
}

.xc-promotion-single__breadcrumb {
    margin-bottom: 16px !important;
}

.xc-promotion-single__breadcrumb a {
    color: #419468 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: .02em !important;
    text-decoration: none !important;
}

.xc-promotion-single__breadcrumb a:hover {
    color: #0e3a2f !important;
    text-decoration: none !important;
}

.xc-promotion-single__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: .02em !important;
    text-align: left !important;
    text-transform: none !important;
}

.xc-promotion-single__validity {
    margin-top: 16px !important;
    color: #7c7d7e !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 20px !important;
    letter-spacing: .02em !important;
    text-align: left !important;
}

.xc-promotion-single__content-row {
    background-color: #ffffff;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
    border-radius: 0 0 8px 8px;
}

.xc-promotion-single__content {
    max-width: 960px;
    margin: 0 auto !important;
    padding: 0 24px 40px !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    letter-spacing: .02em !important;
}

.xc-promotion-single__content h2,
.xc-promotion-single__content h3,
.xc-promotion-single__content h4 {
    margin: 32px 0 16px !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
}

.xc-promotion-single__content p,
.xc-promotion-single__content li {
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: inherit !important;
    font-weight: 300 !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.xc-promotion-single__content a {
    color: #419468 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.xc-promotion-single__content img {
    height: auto;
    border-radius: 8px;
}

.xc-promotion-single__back-row {
    margin-top: 30px !important;
}

.xc-promotion-single__back-button,
.xc-promotion-single__back-button.button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 12px 22px !important;
    border: 2px solid #161718 !important;
    border-radius: 1000px !important;
    background-color: transparent !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xc-promotion-single__back-button:hover,
.xc-promotion-single__back-button.button:hover {
    border-color: #161718 !important;
    background-color: rgba(26, 27, 28, .12) !important;
    color: #161718 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.xc-promotion-single__back-button span {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

@media (min-width: 576px) {
    .xc-promotion-single__hero-section {
        padding-top: 54px !important;
    }

    .xc-promotion-single__content-section {
        padding-bottom: 64px !important;
    }

    .xc-promotion-single__hero-text {
        padding: 40px 32px !important;
    }

    .xc-promotion-single__content {
        padding: 0 32px 50px !important;
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .xc-promotion-single__title {
        font-size: 36px !important;
        line-height: 119% !important;
    }
}

@media (min-width: 992px) {
    .xc-promotion-single__hero-section {
        padding-top: 60px !important;
    }

    .xc-promotion-single__content-section {
        padding-bottom: 70px !important;
    }

    .xc-promotion-single__hero-text {
        padding: 48px 45px 36px !important;
    }

    .xc-promotion-single__content {
        padding: 0 45px 56px !important;
    }
}

@media (min-width: 1440px) {
    .xc-promotion-single__title {
        font-size: 42px !important;
        line-height: 119% !important;
    }

    .xc-promotion-single__content {
        font-size: 18px !important;
        line-height: 28px !important;
    }
}

@media (max-width: 575.98px) {
    .xc-promotion-single__hero-section {
        padding-top: 40px !important;
    }

    .xc-promotion-single__hero-image .image-cover {
        padding-top: 62.5% !important;
    }

    .xc-promotion-single__title {
        font-size: 28px !important;
        line-height: 129% !important;
    }

    .xc-promotion-single__back-button,
    .xc-promotion-single__back-button.button {
        width: 100%;
        white-space: normal;
        line-height: 20px !important;
    }
}

/*==============================================
 * ALL NEWS PAGE HERO (.xc-page-all-news-hero)
 * Flatsome banner styled to match Skoda HeroBannerModule
 *==============================================*/
.xc-page-all-news-hero,
#section_403069901.xc-page-all-news-hero {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #373737 !important;
}

.xc-page-all-news-hero > .section-bg {
    display: none !important;
}

.xc-page-all-news-hero > .section-content,
.xc-page-all-news-hero .row,
.xc-page-all-news-hero .col,
.xc-page-all-news-hero .col-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xc-page-all-news-hero .banner,
#banner-283630698 {
    position: relative !important;
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 36.5% !important;
    overflow: hidden !important;
    background: #373737 !important;
}

.xc-page-all-news-hero .banner-inner,
.xc-page-all-news-hero .banner-bg,
.xc-page-all-news-hero .banner-bg img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.xc-page-all-news-hero .banner-bg img {
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.xc-page-all-news-hero .banner-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: radial-gradient(185.5% 108.19% at 43.8% 19.51%, rgba(0, 0, 0, 0) 0, rgba(15, 15, 15, .22) 54.5%, rgba(28, 28, 28, .56) 96.71%);
}

.xc-page-all-news-hero .banner-layers.container {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    height: 100% !important;
    max-width: 1600px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow: visible !important;
}

.xc-page-all-news-hero .text-box {
    width: auto !important;
    max-width: 50% !important;
    top: auto !important;
    left: 60px !important;
    right: auto !important;
    bottom: 32px !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xc-page-all-news-hero .text-box .text-box-content,
.xc-page-all-news-hero .text-box .text-inner {
    text-align: left !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0 !important;
}

.xc-page-all-news-hero .text-box h1,
.xc-page-all-news-hero .text-box h2,
.xc-page-all-news-hero .text-box h3 {
    font-family: var(--skoda-font-primary) !important;
    color: #fff !important;
    font-size: 42px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 119% !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
}

@media (max-width: 1199.98px) {
    .xc-page-all-news-hero .text-box {
        left: 55px !important;
        max-width: 50% !important;
    }
}

@media (max-width: 991.98px) {
    .xc-page-all-news-hero .banner,
    #banner-283630698 {
        padding-top: 36.5% !important;
    }

    .xc-page-all-news-hero .banner-bg::after {
        background: linear-gradient(180deg, rgba(19, 19, 19, .14), rgba(0, 0, 0, 0) 35.18%, rgba(4, 4, 4, .08) 47.23%, rgba(28, 28, 28, .42) 87.43%);
    }

    .xc-page-all-news-hero .text-box {
        left: 40px !important;
        bottom: 32px !important;
        max-width: 66.666667% !important;
    }

    .xc-page-all-news-hero .text-box h1,
    .xc-page-all-news-hero .text-box h2,
    .xc-page-all-news-hero .text-box h3 {
        font-size: 38px !important;
        line-height: 126% !important;
    }
}

@media (max-width: 767.98px) {
    .xc-page-all-news-hero .text-box {
        bottom: 20px !important;
    }

    .xc-page-all-news-hero .text-box h1,
    .xc-page-all-news-hero .text-box h2,
    .xc-page-all-news-hero .text-box h3 {
        font-size: 32px !important;
        line-height: 119% !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-all-news-hero .banner,
    #banner-283630698 {
        height: calc(100vh - 70px) !important;
        min-height: 460px !important;
        padding-top: 0 !important;
    }

    .xc-page-all-news-hero .banner-bg::after {
        background: linear-gradient(180deg, rgba(19, 19, 19, .14), rgba(0, 0, 0, 0) 35.18%, rgba(4, 4, 4, .08) 47.23%, rgba(28, 28, 28, .42) 87.43%);
    }

    .xc-page-all-news-hero .banner-layers.container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .xc-page-all-news-hero .text-box {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        bottom: 72px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .xc-page-all-news-hero .text-box h1,
    .xc-page-all-news-hero .text-box h2,
    .xc-page-all-news-hero .text-box h3 {
        font-size: 28px !important;
        line-height: 129% !important;
        letter-spacing: .02em !important;
    }
}

/*==============================================
 * ALL NEWS PAGE LATEST NEWS (.xc-page-all-news-last-news)
 * Mirrors Skoda LatestNewsModule structure with Flatsome blog markup
 *==============================================*/
.xc-page-all-news-last-news,
#section_1171965948.xc-page-all-news-last-news {
    display: block !important;
    padding: 40px 0 !important;
    background-color: #f3f3f3 !important;
}

.xc-page-all-news-last-news > .section-bg {
    display: none !important;
}

.xc-page-all-news-last-news > .section-content {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

.xc-page-all-news-last-news > .section-content > .row {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.xc-page-all-news-last-news > .section-content > .row > .col {
    padding: 0 10px !important;
}

.xc-page-all-news-last-news h2 {
    max-width: 335px !important;
    margin: 0 auto 25px !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-transform: none !important;
}

.xc-page-all-news-last-news .large-columns-1 {
    max-width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
}

.xc-page-all-news-last-news .post-item,
.xc-page-all-news-last-news .post-item > .col-inner {
    padding: 0 !important;
    margin: 0 !important;
}

.xc-page-all-news-last-news .box-blog-post {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 30px 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.xc-page-all-news-last-news .box-image {
    display: none !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.xc-page-all-news-last-news .box-image .image-cover {
    padding-top: 57% !important;
    background: #f3f3f3 !important;
}

.xc-page-all-news-last-news .box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.xc-page-all-news-last-news .box-text {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
}

.xc-page-all-news-last-news .blog-post-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 0 0 30px !important;
    border-bottom: 1px solid rgba(151, 151, 151, .3) !important;
}

.xc-page-all-news-last-news .post-item:last-child .blog-post-inner {
    border-bottom: 0 !important;
}

.xc-page-all-news-last-news .post-title,
.xc-page-all-news-last-news .post-title.is-large {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 121% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    overflow: hidden !important;
}

.xc-page-all-news-last-news .post-title a {
    display: inline !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-decoration: none !important;
}

.xc-page-all-news-last-news .post-title a:hover {
    color: #161718 !important;
    text-decoration: none !important;
}

.xc-page-all-news-last-news .post-meta,
.xc-page-all-news-last-news .xc-promotion-card-validity {
    order: 2 !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #161718 !important;
    opacity: 1 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.xc-page-all-news-last-news .is-divider {
    order: 3 !important;
    display: none !important;
    width: 29px !important;
    max-width: 29px !important;
    height: 20px !important;
    margin: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    position: relative !important;
}

.xc-page-all-news-last-news .is-divider::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 14px;
    width: 1px;
    height: 12px;
    border-right: 1px solid rgba(74, 74, 74, .3);
}

.xc-page-all-news-last-news .from_the_blog_excerpt {
    order: 4 !important;
    flex: 0 0 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    text-align: left !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

.xc-page-all-news-last-news .xc-promotion-card-actions {
    order: 5 !important;
    flex: 0 0 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
}

.xc-page-all-news-last-news .xc-promotion-card-readmore {
    position: relative !important;
    display: inline-block !important;
    padding-right: 30px !important;
    color: #161718 !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 117% !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    text-transform: none !important;
}

.xc-page-all-news-last-news .xc-promotion-card-readmore::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    transition: right .15s ease-out;
    background: center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M17.22 11.96L9.86 19.32L8.38 17.84L14.26 11.96L8.38 6.08L9.86 4.6L17.22 11.96Z' fill='%23161718'/%3E%3C/svg%3E");
}

.xc-page-all-news-last-news .xc-promotion-card-readmore:hover::after {
    right: -5px;
}

.xc-page-all-news-last-news .badge.post-date {
    display: none !important;
}

.xc-page-all-news-last-news > .section-content > .row:last-child {
    justify-content: center !important;
    margin-top: 16px !important;
}

.xc-page-all-news-last-news > .section-content > .row:last-child .col-inner {
    display: flex !important;
    justify-content: center !important;
}

.xc-page-all-news-last-news .button.primary,
.xc-page-all-news-last-news .button.primary.lowercase {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 22px !important;
    border: 2px solid #161718 !important;
    border-radius: 1000px !important;
    background: transparent !important;
    color: #161718 !important;
    box-shadow: none !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: .75px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.xc-page-all-news-last-news .button.primary:hover,
.xc-page-all-news-last-news .button.primary.lowercase:hover {
    border-color: #161718 !important;
    background: rgba(26, 27, 28, .12) !important;
    color: #161718 !important;
    box-shadow: none !important;
}

.xc-page-all-news-last-news .button.primary span {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

@media (min-width: 576px) {
    .xc-page-all-news-last-news,
    #section_1171965948.xc-page-all-news-last-news {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    .xc-page-all-news-last-news > .section-content > .row {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .xc-page-all-news-last-news h2 {
        max-width: 466px !important;
        margin-bottom: 30px !important;
        font-size: 36px !important;
        line-height: 119% !important;
    }

    .xc-page-all-news-last-news .box-blog-post {
        padding: 30px 45px 0 43px !important;
    }

    .xc-page-all-news-last-news .post-item:first-child .box-image {
        display: block !important;
        width: 37% !important;
        flex: 0 0 37% !important;
        margin-right: 20px !important;
    }

    .xc-page-all-news-last-news .post-item:first-child .box-blog-post {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding-top: 28px !important;
    }

    .xc-page-all-news-last-news .post-item:first-child .box-text {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .xc-page-all-news-last-news .post-title,
    .xc-page-all-news-last-news .post-title.is-large {
        font-size: 27px !important;
        line-height: 120% !important;
    }

    .xc-page-all-news-last-news .post-item:not(:first-child) .post-title,
    .xc-page-all-news-last-news .post-item:not(:first-child) .post-title.is-large {
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .xc-page-all-news-last-news .post-meta,
    .xc-page-all-news-last-news .xc-promotion-card-validity {
        flex: 0 0 auto !important;
        display: inline-block !important;
        padding-top: 1px !important;
    }

    .xc-page-all-news-last-news .is-divider {
        flex: 0 0 29px !important;
        display: block !important;
    }

    .xc-page-all-news-last-news .from_the_blog_excerpt {
        flex: 1 1 250px !important;
        min-width: 0 !important;
        height: 24px !important;
        margin-top: 0 !important;
        -webkit-line-clamp: 1 !important;
        line-clamp: 1 !important;
    }

    .xc-page-all-news-last-news .xc-promotion-card-actions {
        flex: 0 0 100% !important;
    }

    .xc-page-all-news-last-news > .section-content > .row:last-child {
        margin-top: 24px !important;
    }
}

@media (min-width: 992px) {
    .xc-page-all-news-last-news,
    #section_1171965948.xc-page-all-news-last-news {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .xc-page-all-news-last-news > .section-content > .row {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .xc-page-all-news-last-news > .section-content > .row > .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .xc-page-all-news-last-news h2 {
        max-width: 544px !important;
        margin-bottom: 30px !important;
    }

    .xc-page-all-news-last-news .box-blog-post {
        padding: 30px 40px 0 !important;
    }

    .xc-page-all-news-last-news .post-item:first-child .box-blog-post {
        padding-top: 40px !important;
    }

    .xc-page-all-news-last-news .post-item:first-child .box-image {
        flex: 0 0 289px !important;
        width: 289px !important;
        max-width: 289px !important;
        margin-right: 32px !important;
    }

    .xc-page-all-news-last-news .post-item:first-child .box-text {
        flex: 1 1 0 !important;
    }

    .xc-page-all-news-last-news .post-item:first-child .post-title,
    .xc-page-all-news-last-news .post-item:first-child .post-title.is-large {
        max-width: 519px !important;
        margin-bottom: 10px !important;
        font-size: 30px !important;
        line-height: 36px !important;
        max-height: 72px !important;
    }

    .xc-page-all-news-last-news .post-title,
    .xc-page-all-news-last-news .post-title.is-large {
        max-height: 29px !important;
        margin-bottom: 15px !important;
        font-size: 24px !important;
        line-height: 29px !important;
    }

    .xc-page-all-news-last-news .blog-post-inner {
        display: grid !important;
        grid-template-columns: auto 29px minmax(0, 1fr) 236px !important;
        align-items: end !important;
        column-gap: 0 !important;
    }

    .xc-page-all-news-last-news .post-title {
        grid-column: 1 / -1 !important;
    }

    .xc-page-all-news-last-news .post-meta,
    .xc-page-all-news-last-news .xc-promotion-card-validity {
        grid-column: 1 !important;
        grid-row: 2 !important;
        white-space: nowrap !important;
    }

    .xc-page-all-news-last-news .is-divider {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .xc-page-all-news-last-news .from_the_blog_excerpt {
        grid-column: 3 !important;
        grid-row: 2 !important;
        display: -webkit-box !important;
        max-width: 544px !important;
    }

    .xc-page-all-news-last-news .xc-promotion-card-actions {
        grid-column: 4 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        align-self: end !important;
        width: auto !important;
        margin: 0 !important;
        padding-right: 22px !important;
    }
}

@media (min-width: 1200px) {
    .xc-page-all-news-last-news,
    #section_1171965948.xc-page-all-news-last-news {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .xc-page-all-news-last-news > .section-content > .row {
        padding-left: 45px !important;
        padding-right: 45px !important;
    }

    .xc-page-all-news-last-news h2 {
        max-width: 645px !important;
        margin-bottom: 40px !important;
        font-size: 42px !important;
        line-height: 119% !important;
    }

    .xc-page-all-news-last-news .box-blog-post {
        padding: 35px 50px 0 !important;
    }

    .xc-page-all-news-last-news .post-item:first-child .post-title,
    .xc-page-all-news-last-news .post-item:first-child .post-title.is-large {
        max-width: 616px !important;
        margin-bottom: 11px !important;
        font-size: 36px !important;
        line-height: 43px !important;
        max-height: 84px !important;
    }

    .xc-page-all-news-last-news .post-title,
    .xc-page-all-news-last-news .post-title.is-large {
        font-size: 30px !important;
        line-height: 119% !important;
        max-height: 36px !important;
    }

    .xc-page-all-news-last-news .blog-post-inner {
        grid-template-columns: auto 29px minmax(0, 1fr) 311px !important;
    }

    .xc-page-all-news-last-news .post-meta,
    .xc-page-all-news-last-news .xc-promotion-card-validity {
        font-size: 16px !important;
    }

    .xc-page-all-news-last-news .is-divider::after {
        height: 14px !important;
    }

    .xc-page-all-news-last-news .from_the_blog_excerpt {
        max-width: 645px !important;
        height: 27px !important;
        font-size: 18px !important;
        line-height: 150% !important;
    }

    .xc-page-all-news-last-news > .section-content > .row:last-child {
        margin-top: 32px !important;
    }
}

@media (max-width: 575.98px) {
    .xc-page-all-news-last-news .button.primary,
    .xc-page-all-news-last-news .button.primary.lowercase {
        width: 100% !important;
        max-width: 335px !important;
        white-space: normal !important;
        line-height: 20px !important;
    }
}

/*==============================================
 * SKODA FORM — ĐĂNG KÝ LÁI THỬ (CF7)
 * Clone giao diện MUI Filled Input + Chip Radio
 * từ forms.skoda-auto.com
 *==============================================*/

/* --- Page section --- */
.xc-page-lai-thu .xc-section-title {
    font-family: "SKODA Next", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 119%;
    letter-spacing: 0.02em;
    color: #161718;
    text-align: center;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 645px;
}
@media (max-width: 575px) {
    .xc-page-lai-thu .xc-section-title {
        font-size: 30px;
        line-height: 120%;
        margin-bottom: 25px;
        max-width: 335px;
    }
}
@media (min-width: 1200px) {
    .xc-page-lai-thu .xc-section-title {
        font-size: 42px;
        margin-bottom: 40px;
    }
}

/* Row chứa form — background trắng */
.xc-page-lai-thu .wpcf7 {
    background: #fff;
    padding: 20px 16px 40px;
}
@media (min-width: 710px) {
    .xc-page-lai-thu .wpcf7 {
        padding: 20px 48px 40px;
    }
}
@media (min-width: 1430px) {
    .xc-page-lai-thu .wpcf7 {
        padding: 20px 96px 40px;
    }
}

/* --- Form container --- */
.skoda-form-test-drive {
    max-width: 700px;
    margin: 0 auto;
    font-family: "SKODA Next", sans-serif;
}

/* --- Remove CF7/Flatsome defaults --- */
.skoda-form-test-drive p {
    margin: 0 !important;
    padding: 0 !important;
}
.skoda-form-test-drive .wpcf7-form-control-wrap {
    display: block;
}
.skoda-form-test-drive br {
    display: none !important;
}

/* --- Labels --- */
.skoda-form__label {
    display: block !important;
    font-family: "SKODA Next", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    letter-spacing: 0.02em !important;
    color: #161718 !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
}
.skoda-form__asterisk {
    color: inherit;
}

/* --- Helper text --- */
.skoda-form__helper {
    display: block;
    font-family: "SKODA Next", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #5a5b5c;
    margin-top: 4px;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Field wrapper --- */
.skoda-form__field {
    margin-bottom: 24px;
}
.skoda-form__field--model {
    margin-bottom: 20px;
}

/* --- MUI Filled Input style --- */
.skoda-form-test-drive input[type="text"],
.skoda-form-test-drive input[type="tel"],
.skoda-form-test-drive input[type="email"],
.skoda-form-test-drive textarea {
    display: block !important;
    width: 100% !important;
    font-family: "SKODA Next", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.02em !important;
    color: #161718 !important;
    background-color: rgba(22, 23, 24, 0.06) !important;
    border: none !important;
    border-bottom: 1px solid currentColor !important;
    border-radius: 4px 4px 0 0 !important;
    padding: 24px 12px 8px !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: background-color 200ms cubic-bezier(0,0,0.2,1), color 200ms cubic-bezier(0,0,0.2,1) !important;
    caret-color: #31694B;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.skoda-form-test-drive input[type="text"]:hover,
.skoda-form-test-drive input[type="tel"]:hover,
.skoda-form-test-drive input[type="email"]:hover,
.skoda-form-test-drive textarea:hover {
    background-color: rgba(0, 0, 0, 0.09) !important;
    box-shadow: none !important;
}
.skoda-form-test-drive input[type="text"]:focus,
.skoda-form-test-drive input[type="tel"]:focus,
.skoda-form-test-drive input[type="email"]:focus,
.skoda-form-test-drive textarea:focus {
    background-color: rgba(22, 23, 24, 0.06) !important;
    border-bottom: 2px solid #31694B !important;
    padding-bottom: 7px !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
}

/* --- Textarea --- */
.skoda-form-test-drive textarea {
    resize: none !important;
    min-height: 80px !important;
    padding-top: 24px !important;
}

/* --- Floating label effect using placeholder-shown --- */
.skoda-form__field--name,
.skoda-form__field--city,
.skoda-form__field--phone,
.skoda-form__field--email,
.skoda-form__field--note {
    position: relative;
}
.skoda-form__field--name .skoda-form__label,
.skoda-form__field--city .skoda-form__label,
.skoda-form__field--phone .skoda-form__label,
.skoda-form__field--email .skoda-form__label,
.skoda-form__field--note .skoda-form__label {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    font-weight: 400 !important;
    color: #5a5b5c !important;
    transform: translate(12px, 18px) scale(1) !important;
    transform-origin: left top !important;
    transition: transform 200ms cubic-bezier(0,0,0.2,1), color 200ms cubic-bezier(0,0,0.2,1) !important;
    padding-bottom: 0 !important;
    max-width: calc(100% - 24px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Label up khi focus hoặc có giá trị */
.skoda-form__field--name:focus-within .skoda-form__label,
.skoda-form__field--city:focus-within .skoda-form__label,
.skoda-form__field--phone:focus-within .skoda-form__label,
.skoda-form__field--email:focus-within .skoda-form__label,
.skoda-form__field--note:focus-within .skoda-form__label {
    transform: translate(12px, 7px) scale(0.75) !important;
    color: #161718 !important;
    font-weight: 700 !important;
}
/* Label up khi input đã có giá trị (JS fallback: class "has-value" sẽ bổ sung nếu cần) */
.skoda-form__field.has-value .skoda-form__label {
    transform: translate(12px, 7px) scale(0.75) !important;
    color: #161718 !important;
    font-weight: 700 !important;
}

/* --- 2-column row --- */
.skoda-form__row--2col {
    display: flex;
    gap: 24px;
}
.skoda-form__row--2col > .skoda-form__field {
    flex: 1;
    min-width: 0;
}
@media (max-width: 600px) {
    .skoda-form__row--2col {
        flex-direction: column;
        gap: 0;
    }
}

/* --- Submit Button (Skoda pill) --- */
.skoda-form__submit {
    text-align: center;
    margin-top: 24px;
}
.skoda-form-test-drive input[type="submit"],
.skoda-form__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 44px !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 1000px !important;
    background-color: #78faae !important;
    background-clip: padding-box !important;
    color: #161718 !important;
    font-family: "SKODA Next", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: 0.75px !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-rendering: geometricprecision !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease-out, transform 0.3s ease-out !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.skoda-form-test-drive input[type="submit"]:hover,
.skoda-form__btn:hover {
    background-color: #72E3A1 !important;
    box-shadow: none !important;
}
.skoda-form-test-drive input[type="submit"]:active,
.skoda-form__btn:active {
    background-color: #78faae !important;
    box-shadow: none !important;
}
@media (min-width: 1070px) {
    .skoda-form-test-drive input[type="submit"],
    .skoda-form__btn {
        width: auto !important;
        min-width: 300px !important;
    }
}

/* ============================================
   MODEL CHIPS — RADIO SELECTOR (MUI Chip)
   ============================================ */
.skoda-model-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 16px;
}

/* Label wrap = chip container */
.skoda-model-chip {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #7c7d7e;
    background-color: #f1f1f1;
    padding: 5px 16px;
    transition: transform 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    text-align: center;
    max-width: 100%;
    width: auto !important; /* Override Flatsome .wpcf7 label { width:100% } */
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-rendering: geometricprecision;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    text-transform: none;
    letter-spacing: 0;
    outline: none;
}
.skoda-model-chip:hover {
    border-color: #161718;
}

/* Hide actual radio input */
.skoda-model-chip__input {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

/* Selected state — green border + light green bg */
.skoda-model-chip.is-selected,
.skoda-model-chip:has(.skoda-model-chip__input:checked) {
    border: 2px solid #31694B;
    background-color: #E8FFF1;
    padding: 4px 15px; /* compensate 2px border */
    color: #31694B;
}

/* Chip body layout */
.skoda-model-chip__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 120px;
    width: 114px;
}

/* Car thumbnail */
.skoda-model-chip__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

/* Car name */
.skoda-model-chip__name {
    display: block;
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: "SKODA Next", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    color: #161718;
    text-rendering: geometricprecision;
}

/* --- CF7 validation error messages --- */
.skoda-form-test-drive .wpcf7-not-valid-tip {
    font-family: "SKODA Next", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: #d32f2f;
    padding-left: 12px;
    margin-top: 4px;
}
.skoda-form-test-drive .wpcf7-not-valid {
    border-bottom-color: #d32f2f !important;
}

/* --- CF7 response message --- */
.skoda-form-test-drive + .wpcf7-response-output,
.skoda-form-test-drive ~ .wpcf7-response-output {
    font-family: "SKODA Next", sans-serif !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    text-align: center !important;
}

/* --- CF7 spinner --- */
.skoda-form-test-drive .wpcf7-spinner {
    display: none;
}

/* --- Progress bar (Skoda form loading) --- */
.skoda-form-test-drive .wpcf7-form.submitting .skoda-form__submit::before {
    content: '';
    display: block;
    height: 4px;
    background: #31694B;
    border-radius: 2px;
    margin-bottom: 16px;
    animation: skoda-form-progress 1.5s ease-in-out infinite;
}
@keyframes skoda-form-progress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/*==============================================
 * XC-RETAILERS — Trang đại lý Škoda
 * [xc-retailers] shortcode
 *==============================================*/

.xc-retailers {
    display: flex;
    gap: 0;
    width: 100%;
    min-height: 600px;
    font-family: var(--skoda-font-primary);
    color: var(--skoda-black);
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}

/* --- Sidebar: Search + List (3/12 = 25%) --- */
.xc-retailers__sidebar {
    flex: 0 0 25%;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    background: #f3f3f3;
    border-right: 1px solid #e0e0e0;
}

/* --- Search --- */
.xc-retailers__search {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    flex-shrink: 0;
}
.xc-retailers__search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.xc-retailers__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #7c7d7e;
    pointer-events: none;
    flex-shrink: 0;
}
.xc-retailers__search-input {
    width: 100% !important;
    height: auto !important;
    padding: 12px 12px 12px 40px !important;
    font-family: var(--skoda-font-primary) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #161718 !important;
    background: #f3f3f3 !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 4px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
    box-sizing: border-box !important;
}
.xc-retailers__search-input:focus {
    border-color: #31694B !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(49, 105, 75, 0.15) !important;
}
.xc-retailers__search-input::placeholder {
    color: #9e9e9e;
}

/* --- Dealer List --- */
.xc-retailers__list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Custom scrollbar */
.xc-retailers__list::-webkit-scrollbar {
    width: 4px;
}
.xc-retailers__list::-webkit-scrollbar-track {
    background: transparent;
}
.xc-retailers__list::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 2px;
}

/* --- Dealer Item --- */
.xc-retailers__item {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background: #fff;
}
.xc-retailers__item:hover {
    background: #f7f7f7;
}
.xc-retailers__item.is-active {
    background: #E8FFF1;
    border-left: 3px solid #31694B;
    padding-left: 13px;
}

.xc-retailers__item-name {
    font-family: var(--skoda-font-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    color: #161718;
    margin-bottom: 4px;
}
.xc-retailers__item.is-active .xc-retailers__item-name {
    color: #31694B;
}

.xc-retailers__item-address {
    font-family: var(--skoda-font-primary);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #5a5b5c;
    margin-bottom: 8px;
}

.xc-retailers__item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.xc-retailers__item-phone,
.xc-retailers__item-email {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--skoda-font-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #31694B;
    text-decoration: none;
    transition: color 0.2s ease;
}
.xc-retailers__item-phone:hover,
.xc-retailers__item-email:hover {
    color: #255236;
    text-decoration: underline;
}
.xc-retailers__item-phone svg,
.xc-retailers__item-email svg {
    flex-shrink: 0;
    color: inherit;
}

/* --- Map Panel (9/12 = 75%) --- */
.xc-retailers__map {
    flex: 1;
    min-height: 600px;
    background: #e9e9e9;
    position: relative;
}
.xc-retailers__map iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 600px;
    border: 0 !important;
    display: block;
}
.xc-retailers__map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 600px;
    font-family: var(--skoda-font-primary);
    font-size: 16px;
    color: #9e9e9e;
    text-align: center;
    padding: 40px;
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .xc-retailers {
        flex-direction: column;
        min-height: auto;
    }
    .xc-retailers__sidebar {
        flex: 0 0 auto;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
    .xc-retailers__list {
        max-height: 300px;
    }
    .xc-retailers__map {
        min-height: 400px;
    }
    .xc-retailers__map iframe {
        min-height: 400px;
    }
    .xc-retailers__map-placeholder {
        min-height: 400px;
    }
}

/*==============================================
 * PAGE ABOUT US & BRAND HERO BANNER
 * Ghi đè Flatsome Banner thành chuẩn Skoda
 *==============================================*/

/* 1. Darkening Gradient Overlay */
.page-aboutus-hero .banner-bg::after,
.xc-page-brand-hero .banner-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(185.5% 108.19% at 43.8% 19.51%, rgba(0,0,0,0) 0%, rgba(15,15,15,0.22) 54.5%, rgba(28,28,28,0.56) 96.71%);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 991px) {
    .xc-page-brand-hero .banner-bg::after {
        background: linear-gradient(180deg, rgba(19,19,19,0.14) 0%, transparent 35.18%, rgba(4,4,4,0.08) 47.23%, rgba(28,28,28,0.42) 87.43%);
    }
}

/* 2. Container Positioning (Bottom Left) */
.page-aboutus-hero .text-box,
.xc-page-brand-hero .text-box,
.xc-page-company-hero .text-box {
    left: 0 !important;
    top: auto !important;
    bottom: 32px !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

.page-aboutus-hero .text-box-content,
.xc-page-brand-hero .text-box-content,
.xc-page-company-hero .text-box-content {
    max-width: 1199px !important; /* Desktop Container Width */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.page-aboutus-hero .text-inner,
.xc-page-brand-hero .text-inner,
.xc-page-company-hero .text-inner {
    text-align: left !important;
    max-width: 58.333333%; /* 7/12 columns layout on desktop */
}

/* 3. Typography: Headline */
.page-aboutus-hero .text-inner h3,
.xc-page-brand-hero .text-inner h3,
.xc-page-company-hero .text-inner h3 {
    font-family: var(--skoda-font-primary) !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.19 !important;
    letter-spacing: normal !important;
    color: #fff !important;
    text-transform: none !important; /* Xóa uppercase của Flatsome */
    margin-bottom: 24px !important;
}

.page-aboutus-hero .text-inner h3 strong,
.xc-page-brand-hero .text-inner h3 strong,
.xc-page-company-hero .text-inner h3 strong {
    font-weight: 700 !important;
}

/* 4. Typography: Text */
.page-aboutus-hero .text-inner p,
.xc-page-brand-hero .text-inner p,
.xc-page-company-hero .text-inner p {
    font-family: var(--skoda-font-primary) !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #fff !important;
    margin-bottom: 32px !important;
}

/* 5. Button (Skoda Pill Shape) */
.page-aboutus-hero .text-inner .button,
.xc-page-brand-hero .text-inner .button,
.xc-page-company-hero .text-inner .button {
    font-family: var(--skoda-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    background-color: #78faae !important;
    color: #161718 !important;
    border: none !important;
    border-radius: 1000px !important;
    padding: 14px 24px !important;
    letter-spacing: 0.75px !important;
    text-transform: none !important;
    min-height: 44px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease-out, color 0.3s ease-out !important;
    margin: 0 !important;
}

.page-aboutus-hero .text-inner .button:hover,
.xc-page-brand-hero .text-inner .button:hover,
.xc-page-company-hero .text-inner .button:hover {
    background-color: #72E3A1 !important;
}

.page-aboutus-hero .text-inner .button:active,
.xc-page-brand-hero .text-inner .button:active,
.xc-page-company-hero .text-inner .button:active {
    background-color: #78faae !important;
}

/* 6. Responsive Breakpoints */
@media (min-width: 1200px) {
    .page-aboutus-hero .text-box-content,
    .xc-page-brand-hero .text-box-content,
    .xc-page-company-hero .text-box-content {
        max-width: 1600px !important;
        padding-left: 45px;
        padding-right: 45px;
    }
    .page-aboutus-hero .text-box,
    .xc-page-brand-hero .text-box,
    .xc-page-company-hero .text-box {
        bottom: 65px !important;
    }
}

@media (max-width: 991px) {
    .page-aboutus-hero .text-inner h3,
    .xc-page-brand-hero .text-inner h3,
    .xc-page-company-hero .text-inner h3 {
        font-size: 38px !important;
        line-height: 1.26 !important;
    }
}

@media (max-width: 767px) {
    .page-aboutus-hero .text-box,
    .xc-page-brand-hero .text-box,
    .xc-page-company-hero .text-box {
        bottom: 20px !important;
    }
    .page-aboutus-hero .text-inner,
    .xc-page-brand-hero .text-inner,
    .xc-page-company-hero .text-inner {
        max-width: 80%; /* Takes up more space on mobile */
    }
    .page-aboutus-hero .text-inner h3,
    .xc-page-brand-hero .text-inner h3,
    .xc-page-company-hero .text-inner h3 {
        font-size: 32px !important;
        line-height: 1.19 !important;
        margin-bottom: 16px !important;
    }
    .page-aboutus-hero .text-inner p,
    .xc-page-brand-hero .text-inner p,
    .xc-page-company-hero .text-inner p {
        font-size: 16px !important;
        margin-bottom: 24px !important;
    }
}

@media (max-width: 575px) {
    .page-aboutus-hero .text-box,
    .xc-page-brand-hero .text-box,
    .xc-page-company-hero .text-box {
        bottom: 12px !important;
    }
    .page-aboutus-hero .text-box-content,
    .xc-page-brand-hero .text-box-content,
    .xc-page-company-hero .text-box-content {
        padding-left: 10px;
        padding-right: 10px;
    }
    .page-aboutus-hero .text-inner,
    .xc-page-brand-hero .text-inner,
    .xc-page-company-hero .text-inner {
        max-width: 100%;
    }
    .page-aboutus-hero .text-inner h3,
    .xc-page-brand-hero .text-inner h3,
    .xc-page-company-hero .text-inner h3 {
        font-size: 28px !important;
        line-height: 1.29 !important;
    }
}

/*==============================================
 * CUSTOM ROWS
 *==============================================*/
.row.row-background-white {
    background-color: #ffffff !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    border-radius: 4px; /* Soften the edges a bit if needed */
}

@media (min-width: 992px) {
    .row.row-background-white {
        padding: 50px 60px !important;
    }
}

/*==============================================
 * IMAGE BOX: .box-xe
 * Ghi đè Flatsome Image Box thành chuẩn Skoda ImageTextAndGrid
 *==============================================*/
.box-xe {
    background-color: #fff !important;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.05), 0 5px 20px 0 rgba(0,0,0,0.05) !important;
    height: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.box-xe .box-image {
    position: relative;
    width: 100%;
}

.box-xe .box-text {
    padding: 30px 12% !important; /* Mobile padding */
    text-align: left !important;
}

.box-xe .box-text-inner {
    text-align: left !important;
}

.box-xe h4 {
    font-family: var(--skoda-font-primary) !important;
    color: #161718 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.21 !important;
    margin-bottom: 20px !important;
    letter-spacing: normal !important;
}

.box-xe p {
    font-family: var(--skoda-font-primary) !important;
    color: #161718 !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* Biến nút bấm thành dạng Text Link có mũi tên chuẩn Skoda */
.box-xe .button {
    background-color: transparent !important;
    color: #161718 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: none !important;
    padding: 0 !important;
    min-height: auto !important;
    box-shadow: none !important;
    margin-top: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.box-xe .button span {
    position: relative;
    padding-right: 16px; /* Chỗ trống cho mũi tên */
}

/* Thêm mũi tên chevron-right */
.box-xe .button span::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 2px solid #161718;
    border-right: 2px solid #161718;
    transform: translateY(-50%) rotate(45deg);
    transition: right 0.15s ease-out, border-color 0.15s ease-out;
}

.box-xe .button:hover span::after {
    right: -4px; /* Mũi tên dịch sang phải khi hover */
}

.box-xe .button:hover {
    background-color: transparent !important;
    color: var(--skoda-primary-green) !important;
}

.box-xe .button:hover span::after {
    border-color: var(--skoda-primary-green);
}

/* Breakpoints */
@media (min-width: 576px) {
    .box-xe .box-text {
        padding-left: 13.55% !important;
        padding-right: 13.55% !important;
    }
}

@media (min-width: 992px) {
    .box-xe .box-text {
        padding-top: 56px !important;
        padding-left: 17.8% !important;
        padding-right: 17.8% !important;
    }
}

@media (min-width: 1200px) {
    .box-xe .box-text {
        padding-top: 35px !important;
        padding-left: 17.6% !important;
        padding-right: 17.6% !important;
    }
    .box-xe h4 {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }
    .box-xe p {
        font-size: 18px !important;
    }
}

/*==============================================
 * HIGHLIGHTS SLIDER (.skoda-highlights-slider)
 * Ghi đè Flatsome Row Slider thành giao diện Highlights (Image left, text right)
 *==============================================*/
/* Khắc phục lề cột của Slider */
.skoda-highlights-slider .col {
    padding-bottom: 0 !important;
}

/* Định dạng Tile Box */
.skoda-highlights-slider .box {
    background-color: #fff !important;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.05), 0 5px 20px 0 rgba(0,0,0,0.05) !important;
    height: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 10px; /* Lùi margin để shadow không bị cắt dở */
}

/* Kích thước ảnh - Flex trên Desktop */
@media (min-width: 992px) {
    .skoda-highlights-slider .box {
        flex-direction: row !important;
        align-items: stretch !important; /* Stretch to equal height */
    }
    .skoda-highlights-slider .box-image {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        height: auto !important;
    }
    .skoda-highlights-slider .box-image > div {
        height: 100% !important;
    }
    .skoda-highlights-slider .box-image img {
        height: 100% !important;
        object-fit: cover !important;
        min-height: 475px;
    }
    .skoda-highlights-slider .box-text {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* Canh lề và Padding cho Text Information */
.skoda-highlights-slider .box-text {
    padding: 30px 10.7% !important;
    text-align: left !important;
}

.skoda-highlights-slider .box-text-inner {
    text-align: left !important;
    max-width: 645px;
    margin: 0 auto !important;
}

@media (min-width: 576px) {
    .skoda-highlights-slider .box-text {
        padding: 30px !important;
    }
}

@media (min-width: 992px) {
    .skoda-highlights-slider .box-text {
        padding: 40px 40px !important;
    }
    .skoda-highlights-slider .box-text-inner {
        position: relative;
    }
}

@media (min-width: 1200px) {
    .skoda-highlights-slider .box-text {
        padding: 40px 60px !important;
    }
}

/* Typography (H4 thay cho H3 của thẻ Box gốc) */
.skoda-highlights-slider h4 {
    font-family: var(--skoda-font-primary) !important;
    color: #161718 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.21 !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
}

.skoda-highlights-slider p {
    font-family: var(--skoda-font-primary) !important;
    color: #161718 !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
}

@media (min-width: 576px) {
    .skoda-highlights-slider h4 {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }
}

@media (min-width: 1200px) {
    .skoda-highlights-slider h4 {
        font-size: 36px !important;
        line-height: 1.19 !important;
    }
    .skoda-highlights-slider p {
        font-size: 18px !important;
    }
}

/* Enlargement mode cho Slider (Swiper): Thu nhỏ các thẻ không được chọn */
.skoda-highlights-slider .swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
    height: auto !important; /* Đảm bảo Swiper slide giãn chiều cao */
}
.skoda-highlights-slider .swiper-slide:not(.swiper-slide-active) {
    transform: scaleY(0.968);
    opacity: 0.8;
}

@media (min-width: 576px) {
    .skoda-highlights-slider .swiper-slide:not(.swiper-slide-active) {
        transform: scaleY(0.958);
    }
}

@media (min-width: 992px) {
    .skoda-highlights-slider .swiper-slide:not(.swiper-slide-active) {
        transform: scaleY(0.95);
    }
}

@media (min-width: 1200px) {
    .skoda-highlights-slider .swiper-slide:not(.swiper-slide-active) {
        opacity: 1; /* Desktop không làm mờ */
    }
}