:root {
    /* Các màu global*/
    --primary-color: #8105BD;
    --light-mode-surface: #FFFFFF;
    --light-mode-bg: #FCF8FF;
    --secondary-color: #F72585;
    --linear-color: linear-gradient( to right, #8105BD 0%, #EF20DB 34%, #F72585 69%, #FF6A00 100% );
    --primary-light: #EEE3F8;
    --secondary-light: #FEE3EE;
    --secondary-dark: #B10A59;
    --bg-button-color: #F5F5FA;
    --bg-badge-color: #F5F5FA;
    --bg-badge-userinfo-color: #FFFFFF;
    --color-text-light: #000000;
    --color-text-white: #ffffff;
    /* Màu nền sidebar */
    --page-bg: #FCF8FF;
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #EEE3F8;
    /* Màu item inactive / active */
    --sidebar-item-bg: transparent;
    --sidebar-item-hover-bg: #f3e8ff;
    --sidebar-item-active-bg: #eee3f8;
    --sidebar-item-color: #333;
    --sidebar-item-hover-color: #9b4de0;
    --sidebar-item-active-color: #8105bd;
    --sidebar-item-bar-color: #eee3f8;
    /* Màu nền logo brand*/
    --bg-logo-brand: #FFFFFF;
    --border-color-menu-item: #979797;
    /* Màu vạch active */
    --header-height: 70px;
    --header-spacing: 10px;
    --ai-theme-mode: #FCF8FF;
    --ai-textarea-mode: #EEE3F8;
    --ai-dropzone-mode: #FCF8FF;
    --brandkit-text: #8105BD;
    --ws-title-color: #1a1a2e;
    --ws-subtitle-color: #6c757d;
    --ws-table-text-color: #4f4f4f;
    --ws-btn-primary-bg: #8105BD;
    --ws-btn-primary-text: #FFFFFF;
    --ws-btn-primary-hover-bg: #6d0499;
    --ws-btn-primary-hover-text: #FFFFFF;
    --ws-btn-primary-active-bg: #5a037d;
    --ws-btn-primary-active-text: #FFFFFF;
    --ws-btn-secondary-bg: #EEE3F8;
    --ws-btn-secondary-text: #8105BD;
    --ws-btn-secondary-hover-bg: #d9c7eb;
    --ws-btn-secondary-hover-text: #6d0499;
    --ws-btn-secondary-active-bg: #c4abd9;
    --ws-btn-secondary-active-text: #5a037d;
    --ws-table-bg: #FFFFFF;
    --ws-table-border: #EAE8E8;
    --ws-table-header-bg: #FCF8FF;
    --ws-table-row-hover-bg: #F5F0FA;
    --ws-card-bg: #FFFFFF;
    --ws-card-border: #EAE8E8;
    /* Status Colors - Màu trạng thái */
    --ws-status-active-bg: #d0fbf5;
    --ws-status-active-text: #198754;
    --ws-status-inactive-bg: #f6f9fc;
    --ws-status-inactive-text: #dc3545;
    /* Button Danger - Nút nguy hiểm (đỏ cam) */
    --ws-btn-danger-bg: #F97316;
    --ws-btn-danger-text: #FFFFFF;
    --ws-btn-danger-hover-bg: #ea580c;
    --ws-btn-danger-hover-text: #FFFFFF;
    --ws-btn-danger-active-bg: #c2410c;
    --ws-btn-danger-active-text: #FFFFFF;
    /* Button Success - Nút thành công (xanh ngọc) */
    --ws-btn-success-bg: #2DD4BF;
    --ws-btn-success-text: #FFFFFF;
    --ws-btn-success-hover-bg: #14b8a6;
    --ws-btn-success-hover-text: #FFFFFF;
    --ws-btn-success-active-bg: #0d9488;
    --ws-btn-success-active-text: #FFFFFF;
    --explore-hero-bg: var(--page-bg);
    --explore-hero-gradient-1: rgba(247, 37, 133, 0.18);
    --explore-hero-gradient-2: rgba(129, 5, 189, 0.15);
    --explore-hero-gradient-3: rgba(238, 227, 248, 0.5);
    /* Explore Search - Light Mode */
    --explore-search-bg: var(--light-mode-surface);
    --explore-search-border: var(--sidebar-border);
    --explore-search-placeholder: #9AA1A9;
    /* Explore Tags - Light Mode */
    --explore-tag-bg: var(--sidebar-bg);
    --explore-tag-border: var(--sidebar-border);
    --explore-tag-hover-bg: var(--primary-light);
    --explore-tag-hover-text: var(--primary-color);
    --explore-tag-active-bg: #ffffff;
    --explore-tag-active-border: var(--primary-color);
    --explore-tag-active-text: var(--primary-color);
    /* Explore Cards - Light Mode */
    --explore-card-bg: var(--light-mode-surface);
    --feature-surface: #f0e5f9;
    --explore-card-border: var(--sidebar-border);
    --explore-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --explore-card-shadow-hover: 0 8px 24px rgba(129, 5, 189, 0.12);
    --view-toggle-active-bg: #eee3f8;
    --hero-grad1: #ffe7f3;
    --hero-grad2: #fef9ff;
    --hero-grad3: #fef3e8;
    --hero-soft-purple: rgba(192, 161, 255, 0.5);
    --hero-soft-pink: rgba(255, 182, 193, 0.45);
    --hero-soft-orange: rgba(255, 198, 164, 0.4);
    --linear-color: linear-gradient(to right, #8105BD 0%, #EF20DB 34%, #F72585 69%, #FF6A00 100%);
    --linear-glass-color: linear-gradient(to right, rgba(238, 227, 248, 0.1) 0%, rgba(178, 95, 253, 0.3) 100%);
    --linear-glass-stroke-color: linear-gradient(to right, #FFFFFF 0%, #EEE3F8 100%);
}

[data-bs-theme="dark"] {
    --primary-color: #FFFFFF; /* Màu chủ đạo */
    --light-mode-surface: #333333; /* Màu bề mặt */
    --light-mode-bg: #333333; /* Màu nền chính */
    --secondary-color: #28a745; /* Có thể giữ xanh lá */
    --linear-color: #FFFFFF;
    --primary-light: #3E0460; /* Ô sáng tối hơn */
    --secondary-light: #3A3A4D;
    --bg-button-color: #979797;
    --bg-badge-color: #383838;
    --bg-badge-userinfo-color: #383838;
    --color-text-light: #FFFFFF;
    --page-bg: #0D0415;
    --sidebar-bg: #333333;
    --sidebar-border: #2E2E2E;
    --sidebar-item-bg: transparent;
    --sidebar-item-hover-bg: #2A2A3D;
    --sidebar-item-active-bg: #3E0460;
    --sidebar-item-color: #CCC;
    --sidebar-item-hover-color: #5C78FF;
    --sidebar-item-active-color: #FFFFFF;
    --sidebar-item-bar-color: #5C78FF;
    --bg-logo-brand: #FFFFFF;
    --border-color-menu-item: #979797;
    --header-height: 70px;
    --ai-theme-mode: #333333;
    --ai-textarea-mode: #383838;
    --header-spacing: 10px;
    --ws-title-color: #FFFFFF;
    --ws-subtitle-color: #AAAAAA;
    --ws-table-text-color: #CCCCCC;
    --ws-btn-primary-bg: #9B4DE0;
    --ws-btn-primary-text: #FFFFFF;
    --ws-btn-primary-hover-bg: #B267D7;
    --ws-btn-primary-hover-text: #FFFFFF;
    --ws-btn-primary-active-bg: #8105BD;
    --ws-btn-primary-active-text: #FFFFFF;
    --ws-btn-secondary-bg: #3E0460;
    --ws-btn-secondary-text: #E0C0F0;
    --ws-btn-secondary-hover-bg: #5A0780;
    --ws-btn-secondary-hover-text: #FFFFFF;
    --ws-btn-secondary-active-bg: #6d0499;
    --ws-btn-secondary-active-text: #FFFFFF;
    --ws-table-bg: #2A2A3D;
    --ws-table-border: #444444;
    --ws-table-header-bg: #333344;
    --ws-table-row-hover-bg: #3A3A4D;
    --ws-card-bg: #2A2A3D;
    --ws-card-border: #444444;
    /* Status Colors - Màu trạng thái (Dark Mode) */
    --ws-status-active-bg: #1a4d3e;
    --ws-status-active-text: #5dd9a6;
    --ws-status-inactive-bg: #4d2a2a;
    --ws-status-inactive-text: #ff7b7b;
    /* Button Danger - Nút nguy hiểm (đỏ cam) - Dark Mode */
    --ws-btn-danger-bg: #F97316;
    --ws-btn-danger-text: #FFFFFF;
    --ws-btn-danger-hover-bg: #fb923c;
    --ws-btn-danger-hover-text: #FFFFFF;
    --ws-btn-danger-active-bg: #ea580c;
    --ws-btn-danger-active-text: #FFFFFF;
    /* Button Success - Nút thành công (xanh ngọc) - Dark Mode */
    --ws-btn-success-bg: #2DD4BF;
    --ws-btn-success-text: #FFFFFF;
    --ws-btn-success-hover-bg: #5eead4;
    --ws-btn-success-hover-text: #0d9488;
    --ws-btn-success-active-bg: #14b8a6;
    --ws-btn-success-active-text: #FFFFFF;
    --explore-hero-bg: var(--page-bg);
    --explore-hero-gradient-1: rgba(129, 5, 189, 0.25);
    --explore-hero-gradient-2: rgba(92, 120, 255, 0.2);
    --explore-hero-gradient-3: transparent;
    /* Explore Search - Dark Mode */
    --explore-search-bg: var(--sidebar-bg);
    --explore-search-border: var(--sidebar-border);
    --explore-search-placeholder: #888;
    /* Explore Tags - Dark Mode */
    --explore-tag-bg: rgba(56, 56, 56, 0.8);
    --explore-tag-border: rgba(255, 255, 255, 0.1);
    --explore-tag-hover-bg: var(--sidebar-item-active-bg);
    --explore-tag-hover-text: var(--color-text-light);
    --explore-tag-active-bg: rgba(255, 255, 255, 0.95);
    --explore-tag-active-border: transparent;
    --explore-tag-active-text: #333;
    /* Explore Cards - Dark Mode */
    --feature-surface: #333333;
    --explore-card-bg: var(--page-bg);
    --explore-card-border: var(--sidebar-border);
    --explore-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --explore-card-shadow-hover: 0 8px 24px rgba(92, 120, 255, 0.2);
    --view-toggle-active-bg: #eee3f8;
}

html,
body {
    min-height: 100%;
}

body {
    background-image: url("../images/backgrounds/background-image.svg");
    background-size: 100vw auto;
    /* khóa theo chiều ngang viewport để không bị thu hẹp */
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #fff;
    font-family: 'Manrope', 'Inter', 'Segoe UI', sans-serif !important;
    padding-top: 120px; /* chừa chỗ cho header fixed */
}

/* Header fixed */
.header-fp {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

    .header-fp .navbar {
        padding: 0 32px 0 20px !important;
    }

.header-pill {
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 0 32px;
    height: 70px;
    font-family: 'Manrope', 'Inter', 'Segoe UI', sans-serif;
    position: relative;
}

/* Tiếng Việt - đảm bảo header-pill có position relative để language selector absolute hoạt động */
.lang-vi .header-pill {
    position: relative;
}

.header-pill .navbar-nav .nav-link {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    padding: 0 18px;
}

/* Tiếng Việt - điều chỉnh nav-link để chữ không xuống hàng xấu */
.lang-vi .header-pill .navbar-nav .nav-link {
    font-size: 15px;
    padding: 0 14px;
    line-height: 1.3;
    white-space: nowrap;
}

.header-pill .navbar-nav .nav-link:hover {
    color: #7c38ff;
}

.header-pill .navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.header-pill .navbar-brand img {
    max-height: 100px;
    width: auto;
}

/* Màn hình 1024px - giảm kích thước logo và điều chỉnh layout */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .header-pill {
        padding: 0 24px;
    }
    
    .header-pill .navbar-brand img {
        max-height: 70px;
        width: auto;
    }
    
    .header-pill .navbar-nav .nav-link {
        font-size: 15px;
        padding: 0 14px;
    }
    
    .header-actions {
        gap: 8px;
    }
    
    .header-actions .btn-gradient,
    .header-actions .btn-outline-pill {
        font-size: 13px;
        min-width: 70px;
        width: auto;
        padding: 0 16px;
    }
    
    /* Tiếng Việt - điều chỉnh thêm cho màn hình 1024px */
    .lang-vi .header-pill .navbar-nav .nav-link {
        font-size: 14px;
        padding: 0 12px;
    }
    
    .lang-vi .header-actions .btn-outline-pill {
        padding: 0 20px;
        font-size: 13px;
    }
}

.header-pill .navbar-toggler i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Khi cuộn: đổi nền header sang trắng và tăng độ rõ */
.header-fp.header-scrolled .header-pill {
    background: #ffffff !important;
}

@media (max-width: 768px) {
    body {
        padding-top: 110px;
    }
    .header-pill {
        padding: 0 20px;
        height: 70px;
    }
    .header-pill .navbar-brand img {
        max-height: 90px;
    }
}

/* Màn hình rất nhỏ: chiều rộng < 352px, thu nhỏ logo và căn giữa trong header-pill */
@media (max-width: 351.98px) {
    .header-pill .navbar {
        justify-content: center;
    }
    
    .header-pill .navbar-brand {
        margin: 0 auto;
    }
    
    .header-pill .navbar-brand img {
        width: 200px;
        max-height: none;
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tiếng Việt - header-actions hiển thị language selector */
.lang-vi .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Loại bỏ dấu chấm/marker từ dropdown language selector */
.header-actions .nav-item.dropdown .nav-link::after,
.header-actions .nav-item.dropdown .nav-link::before,
.header-actions .nav-item.dropdown .dropdown-toggle::after,
.header-actions .nav-item.dropdown .dropdown-toggle::before {
    display: none !important;
    content: none !important;
}

.header-actions .nav-item.dropdown .nav-link {
    padding: 0 !important;
    margin: 0 !important;
}

.header-actions .nav-item.dropdown {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Hover effect cho icon flag trong language selector */
.header-actions .nav-icon-hover {
    position: relative;
    transition: all 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.header-actions .nav-icon-hover::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 40px;
    width: 40px;
    z-index: 0;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    background-color: transparent;
    opacity: 0;
}

.header-actions .nav-icon-hover:hover::before {
    background-color: rgba(129, 5, 189, 0.1);
    opacity: 1;
}

.header-actions .nav-icon-hover img {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    display: block;
    margin: 0 auto;
}

/* Thêm hover effect cho dropdown-item trong language selector */
.header-actions .dropdown-menu .dropdown-item:hover,
.header-actions .dropdown-menu .dropdown-item:focus {
    background-color: #f8f9fa;
    color: #000000;
}

.header-actions .dropdown-menu .dropdown-item:active {
    background-color: #e9ecef;
    color: #000000;
}

.trust-section {
    padding: 0 0 60px;
}

.main-wrapper.overflow-hidden {
    overflow-y: visible !important;
}

.trust-card {
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
}

.trust-title {
    font-size: 28px;
    font-weight: 700;
    background: var(--linear-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 32px;
    display: inline-block;
}

.trusted-carousel-wrapper {
    position: relative;
    padding: 12px 48px;
    overflow: visible;
}

.trusted-carousel .trusted-logo-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    width: 184px;
    height: 144px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: center;
    margin: 10px auto;
}

.trusted-carousel .trusted-logo-card img {
    max-width: 183px;
    max-height: 77px;
}

.trusted-carousel .owl-stage-outer {
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.trusted-carousel .owl-stage {
    display: flex;
    background: transparent !important;
}

.trusted-carousel .owl-item {
    display: flex;
    height: auto;
    background: transparent !important;
}

.boost-metric-card {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #EEE3F8;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    padding: 24px 20px;
    height: 216px;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.boost-metric-card--tl {
    border-top-left-radius: 56px;
}

.boost-metric-card--tr {
    border-top-right-radius: 56px;
}

.boost-metric-card--bl {
    border-bottom-left-radius: 56px;
}

.boost-metric-card--br {
    border-bottom-right-radius: 56px;
}

.boost-metric-grid {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}

.boost-metric-value {
    font-size: 64px;
    font-weight: 800;
    /* extra bold */
    color: #8105BD;
    margin-bottom: 12px;
}

.boost-metric-label {
    font-size: 18px;
    font-weight: 600;
    /* semibold */
    color: #000000;
    line-height: 1.4;
}

.boost-copy {
    color: #111827;
}

.boost-copy-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    display: inline-block;
    flex-shrink: 0;
}

.boost-copy-container {
    position: relative;
}

.boost-copy-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    margin-left: 0;
    padding-left: 0;
}

.boost-copy-row.boost-row-1 {
    margin-bottom: 2px;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
    margin-left: 0;
    padding-left: 0;
}

.boost-copy-row.boost-row-1 .badge-chip.campaign {
    margin-top: 0;
    margin-left: -15px;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    padding-left: 36px;
    padding-right: 36px;
}

.boost-copy-row.boost-row-1 .boost-copy-title {
    vertical-align: middle;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.boost-copy-row.boost-row-1 .boost-copy-title .boost-word {
    display: inline-block;
    margin-right: 0.2em;
}

.boost-copy-row.boost-row-2 {
    margin-left: 0;
    padding-left: 0;
    position: relative;
    display: flex;
    align-items: start;
    gap: 12px;
}

.boost-copy-row.boost-row-2 .boost-copy-title {
    width: auto;
    min-width: auto;
    margin: 0;
    padding: 0;
    display: inline-block;
    flex-shrink: 0;
}

.boost-copy-row.boost-row-2 .boost-copy-title.boost-spacer {
    width: auto;
    min-width: auto;
    flex-shrink: 0;
    margin-right: 0;
    display: inline-block;
    visibility: hidden;
    color: transparent;
    opacity: 0;
}

.boost-copy-row.boost-row-2 .boost-copy-title:not(.boost-spacer) {
    margin-left: 0;
}

.boost-copy-row.boost-row-2 .badge-chip.performance {
    margin-top: -15px;
    margin-left: -10px;
    position: relative;
    z-index: 1;
    min-width: fit-content;
    background-size: 100% 100% !important;
}

.boost-copy-row .badge-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    padding: 10px 36px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    flex-shrink: 0;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
}

.boost-copy-row .badge-chip .badge-label {
    display: inline-flex;
    align-items: center;
}

.boost-copy-row .badge-chip.campaign,
.boost-copy-row .badge-chip.performance {
    font-size: 40px;
}

.boost-copy-row .badge-chip.adtify {
    height: 88px;
    font-size: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    padding: 10px 36px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
}

.boost-copy-row .badge-chip.adtify .badge-label {
    transform: rotate(0.74deg);
}

.boost-copy-subtitle {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    margin-top: 14px;
}

.boost-copy-subtitle .text-black {
    color: #011212;
    font-size: 34px;
}

.boost-copy-subtitle .text-purple {
    color: #3E0460;
    font-size: 34px;
}

.boost-copy p {
    font-size: 20px;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 0px !important;
    max-width: 642px;
}

@media (min-width: 992px) {
    .boost-copy {
        max-width: 100%;
        margin-left: 20px;
        min-width: 0;
    }
}


.boost-section-row {
    flex-wrap: nowrap !important;
}

.boost-section-row>.col-lg-5,
.boost-section-row>.col-lg-7 {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .boost-section-row {
        flex-wrap: wrap !important;
        row-gap: 32px;
    }
    
    .boost-section-row>.col-lg-5,
    .boost-section-row>.col-lg-7 {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .boost-copy {
        text-align: left;
    }
    
    .boost-copy-title {
        font-size: 36px;
    }
    
    .boost-copy-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .boost-copy-row .badge-chip {
        font-size: 24px;
        padding: 6px 18px;
    }
    
    .boost-copy-row .badge-chip.adtify {
        font-size: 32px;
        height: auto;
        padding: 10px 20px;
    }
    
    .boost-copy-subtitle,
    .boost-copy-subtitle .text-purple,
    .boost-copy-subtitle .text-black {
        font-size: 24px;
        text-align: left;
    }
}

/* Boost section - tablet (iPad mini ~768px): dùng layout giống mobile để không bị tràn / mất nội dung */
@media (min-width: 576px) and (max-width: 991.98px) {
    .boost-section-row {
        flex-wrap: wrap !important;
        row-gap: 32px;
    }
    
    .boost-section-row>.col-lg-5,
    .boost-section-row>.col-lg-7 {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    /* Căn giữa cụm Boost your / Campaign / with / Performance / ADTIFY giống Instantly detect */
    .boost-copy {
        padding: 0 24px;
        text-align: center;
    }
    
    .boost-copy-row {
        justify-content: center;
        gap: 8px;
    }
    
    .boost-copy-row .boost-copy-title {
        white-space: nowrap;
    }
    
    /* Mô tả dưới Boost vẫn có thể canh trái cho dễ đọc */
    .boost-copy p {
        text-align: left;
        max-width: none;
    }
}

/* Boost section - tablet (768px - 991px): điều chỉnh font-size ADTIFY để phù hợp với các chữ xung quanh */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Hero section - giảm khoảng cách phía trên */
    .hero-section {
        padding: 20px 0 35px !important;
    }
    
    .hero-actions{
        margin-bottom: 50px !important;
    }

    
    .hero-grid {
        gap: 0px !important;
    }

    .trust-section{
        padding: 10px 0 60px !important;
    }
    
    /* Boost section - điều chỉnh font-size ADTIFY */
    .boost-copy-row .badge-chip.adtify {
        font-size: 44px !important;
        height: 66px !important;
        padding: 8px 28px !important;
    }
    
    .boost-copy-row .badge-chip.campaign,
    .boost-copy-row .badge-chip.performance {
        font-size: 40px !important;
        padding: 8px 24px !important;
    }
    
    .boost-copy-subtitle,
    .boost-copy-subtitle .text-purple,
    .boost-copy-subtitle .text-black {
        font-size: 28px !important;
    }
    
    /* Client Globally section - fix responsive cho tablet */
    .client-globally-section {
        padding: 30px 0 !important;
    }
    
    .client-globally-header {
        margin-bottom: 32px !important;
    }
    
    .client-globally-title-row {
        gap: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .client-globally-badge {
        height: 60px !important;
        padding: 0 28px !important;
    }
    
    .client-globally-title {
        line-height: 1.2 !important;
    }
    
    .client-globally-subtitle {
        font-size: 18px !important;
    }
    
    /* Client Globally - điều chỉnh container và carousel để căn đều */
    .client-globally-section .custom-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .client-globally-header {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .client-carousel-wrapper {
        padding: 12px 48px !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    .client-testimonial-card {
        height: auto !important;
        min-height: 180px !important;
        padding: 12px !important;
        margin: 0 8px !important;
        box-sizing: border-box !important;
    }
    
    .client-carousel .owl-stage-outer {
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .client-carousel .owl-stage {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
    }
    
    .client-carousel .owl-item {
        overflow: visible !important;
    }
    
    .client-card-content {
        flex-direction: column;
        gap: 12px !important;
    }
    
    .client-image-placeholder {
        width: 100% !important;
        min-width: 0 !important;
        height: 140px !important;
        flex-shrink: 0 !important;
    }
    
    .client-quote {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }
    
    .client-name {
        font-size: 16px !important;
        margin-bottom: 2px !important;
    }
    
    .client-title {
        font-size: 13px !important;
    }
    
    .client-carousel .owl-nav {
        left: -48px !important;
        right: -48px !important;
    }
    
    .client-carousel .owl-nav button {
        width: 40px !important;
        height: 40px !important;
    }
    
    .client-carousel .owl-nav button img {
        width: 20px !important;
        height: 20px !important;
    }

    .vertical-ai-section{
        padding: 20px 0 !important;
    }

    /* Vertical AI cards - tablet: tránh tràn số metric (ví dụ 421) */
    .ai-product-metrics{
        gap: 16px !important;
        flex-wrap: wrap;
    }

    .ai-metric{
        gap: 4px !important;
    }

    .ai-metric-value{
        font-size: 14px !important;
    }

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

    .integration-section{
        padding: 40px 0 20px !important;
    }

    /* Pricing - tablet (768–991px) */
    .pricing-section {
        padding: 40px 0 20px !important;
    }

    .pricing-title{
        line-height: 1.2 !important;
    }

    .pricing-cards{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        align-items: stretch;
    }

    /* Card thứ 3 nằm giữa hàng dưới */
    .pricing-cards .pricing-card:nth-child(3){
        grid-column: 1 / span 2;
        max-width: 420px;
        justify-self: center;
    }

    .pricing-card{
        padding: 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .pricing-note{
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
        word-wrap: break-word;
    }

    .case-study-section {
        padding: 60px 0 20px !important;
    }

    .blog-section {
        padding: 60px 0 20px !important;
    }

    /* Case Study - tablet: 3 hình cân hơn (2 hình dưới bằng nhau) */
    .case-study-top-row{
        gap: 24px !important;
    }

    .case-study-card--top{
        height: 260px !important;
    }

    .case-study-bottom-row{
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .case-study-card--bottom-left,
    .case-study-card--bottom-right{
        height: 260px !important;
    }
}

@media (max-width: 575.98px) {
    .header-pill .navbar-brand img {
        max-height: 60px;
        width: auto;
    }

    .boost-copy {
        padding: 0 8px;
        /* Chỉ căn giữa phần tiêu đề, nội dung bên dưới vẫn căn trái */
        text-align: left !important;
        display: block;
    }

    .boost-copy-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        width: auto !important;
        display: inline-block !important;
        margin: 0 !important;
    }

    .boost-copy-row {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        justify-content: center !important;
    }

        .boost-copy-row .boost-copy-title {
            flex: 0 0 auto !important;
            white-space: nowrap !important;
        }

    /* Client Globally - mobile font sizes & card height */
    .client-globally-section {
        padding: 20px 0 !important;
    }

    .client-globally-badge {
        font-size: 20px !important;
        height: 40px !important;
        padding: 0 20px !important;
    }

    .client-globally-title {
        font-size: 28px !important;
    }

    .client-globally-subtitle {
        font-size: 16px !important;
    }

    /* Client Globally - để card tự co giãn theo nội dung, không cần scroll */
    .client-testimonial-card {
        height: auto !important;
        align-items: flex-start !important;
    }

    .client-image-placeholder {
        height: 110px !important;
    }

    .client-testimonial-text .client-quote {
        /* Giữ đồng bộ cỡ chữ 20px và vẫn cho hiển thị đủ nội dung trên mobile */
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 6px !important;
    }

    .boost-copy-row .boost-copy-title .boost-word {
        display: inline;
        margin-right: 4px;
    }

    .boost-copy-row .badge-chip {
        font-size: 20px !important;
        padding: 4px 10px !important;
        background-size: 120% 100% !important;
        white-space: nowrap !important;
    }

        .boost-copy-row .badge-chip.performance,
        .boost-copy-row .badge-chip.campaign {
            margin-left: 0 !important;
            margin-top: 0 !important;
            padding-left: 14px !important;
            padding-right: 14px !important;
        }

        .boost-copy-row .badge-chip.adtify {
            font-size: 22px !important;
            padding: 6px 18px !important;
            /* Fit nguyên pill, tránh bị cắt hai bên trên mobile */
            background-size: 100% 100% !important;
            white-space: nowrap !important;
        }

    .boost-copy-subtitle,
    .boost-copy-subtitle .text-purple,
    .boost-copy-subtitle .text-black {
        font-size: 20px;
        text-align: center !important;
    }

    .vertical-ai-section {
        padding: 30px 0 !important;
    }

    .vertical-ai-title {
        font-size: 28px !important;
    }

    .vertical-ai-subtitle {
        font-size: 16px !important;
    }

    .vertical-ai-header {
        margin-bottom: 20px !important;
    }

    .vertical-ai-filters {
        padding: 16px !important;
        margin-bottom: 24px !important;
    }

    .filter-tags-row {
        gap: 6px !important;
    }

    .filter-tag {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .ai-products-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ai-product-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .ai-product-icon {
        width: 56px !important;
        height: 56px !important;
    }

        .ai-product-icon img {
            width: 28px !important;
            height: 28px !important;
        }

    .ai-product-title {
        font-size: 18px !important;
    }

    .lang-vi .ai-product-title {
        font-size: 17px !important;
    }

    .ai-product-subtitle {
        font-size: 14px !important;
        flex-wrap: wrap;
        gap: 4px !important;
    }

    .ai-product-description {
        font-size: 14px !important;
    }

    .ai-product-actions {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .ai-action-btn {
        flex: 1 1 calc(50% - 8px);
        padding: 6px 10px !important;
        font-size: 13px !important;
        text-align: center;
    }

    .ai-product-metrics {
        flex-wrap: wrap;
        gap: 10px !important;
        padding-top: 10px;
    }

    .ai-metric {
        gap: 4px !important;
    }

    .ai-metric-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .ai-metric-value {
        font-size: 13px !important;
    }

    .integration-section {
        padding: 30px 0 !important;
    }

    .integration-title {
        font-size: 28px !important;
    }

    .integration-description {
        font-size: 16px !important;
    }

    .integration-header {
        margin-bottom: 20px !important;
    }

    .integration-section .custom-container {
        padding: 30px 10px 10px !important;
    }

    .pricing-section {
        padding: 30px 0 !important;
    }

    .pricing-title {
        font-size: 28px !important;
    }

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

    .pricing-toggle {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 6px 12px !important;
    }

    .pricing-toggle-btn {
        flex: 1 1 calc(33.33% - 8px) !important;
        padding: 6px 0 !important;
        font-size: 13px !important;
        height: 40px !important;
    }

    .pricing-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .pricing-card {
        padding: 32px !important;
        border-radius: 24px !important;
    }

    .pricing-card-head {
        width: calc(100% + 64px) !important;
        margin: -32px -32px 16px !important;
        border-radius: 24px !important;
        font-size: 16px !important;
        height: 50px !important;
    }

    .pricing-price span {
        font-size: 32px !important;
    }

        .pricing-price span.highlight {
            font-size: 36px !important;
        }

    .pricing-price {
        min-height: 40px !important;
        margin-top: 4px !important;
    }

    .pricing-note {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .pricing-credits {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    .pricing-features {
        font-size: 13px !important;
        gap: 6px !important;
    }

    .pricing-cta {
        height: 44px !important;
        font-size: 16px !important;
    }

    .case-study-section {
        padding: 30px 0 !important;
    }

    .case-study-title {
        font-size: 28px !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }

    .case-study-layout {
        gap: 0px !important;
        text-align: center;
    }

    .case-study-top-row,
    .case-study-bottom-row {
        display: block !important;
    }

    .case-study-card {
        background: transparent !important;
        margin-bottom: 12px !important;
    }

    .case-study-card--top,
    .case-study-card--bottom-left,
    .case-study-card--bottom-right {
        width: 100% !important;
        height: auto !important;
        border-radius: 18px !important;
    }

    .case-study-image {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .blog-section {
        padding: 30px 0 !important;
    }

    .blog-title {
        font-size: 28px !important;
    }

    .blog-header {
        margin-bottom: 20px !important;
    }

    .blog-carousel-wrapper {
        padding: 0 12px !important;
    }

    .blog-carousel .owl-stage-outer {
        padding: 0 !important;
    }

    .blog-card {
        margin: 0 6px 12px !important;
        border-radius: 16px !important;
        border: 1px solid #EEE3F8 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
    }

    .blog-carousel .owl-nav {
        position: static !important;
        margin-top: 12px !important;
        transform: none !important;
        justify-content: center !important;
        gap: 24px !important;
    }

        .blog-carousel .owl-nav button {
            width: 36px !important;
            height: 36px !important;
            background: #F5F5FA !important;
            border-radius: 50% !important;
            border: 1px solid #E5E7EB !important;
        }

    .blog-card-thumb {
        height: 160px !important;
        border-radius: 12px !important;
    }

    .blog-card-meta-row {
        font-size: 12px !important;
        gap: 8px !important;
        margin-bottom: 6px !important;
    }

    .blog-card-title {
        font-size: 18px !important;
        margin-bottom: 10px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.4 !important;
    }

    .blog-card-excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        overflow-wrap: break-word;
        margin-bottom: 12px !important;
    }

    .blog-card-cta {
        width: 100% !important;
        padding: 8px 16px !important;
        height: auto !important;
        min-height: 40px !important;
        margin-top: 8px !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}

/* Feature Sections */
.feature-content {
    padding: 20px 0;
    text-align: center;
}

.feature-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
    color: #000000;
    display: block;
    text-align: center;
    width: 100%;
}

.feature-badges {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
    align-items: center;
}

.feature-heading-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.feature-heading-row .feature-title {
    font-size: 56px;
    font-weight: 800;
    color: #000000;
    text-align: left;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Tiếng Việt - đảm bảo chữ "Bảo vệ" không xuống dòng */
.lang-vi .feature-heading-row .feature-title {
    white-space: nowrap;
}

.feature-heading-row .feature-title span {
    display: inline-block;
    white-space: nowrap;
}

/* Section 2: Left align content */
.feature-section-2 .feature-content {
    text-align: left;
}

.feature-section-2 .feature-description {
    text-align: left;
    display: block;
    font-size: 20px;
    color: #000000;
}

.feature-description {
    font-size: 20px;
    line-height: 1.6;
    color: #000000;
    margin-top: 24px;
    text-align: left;
    display: inline-block;
    width: 640px;
}

.feature-image-wrapper {
    padding: 20px;
}

.feature-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.feature-image-elevate {
    width: 615px;
    height: 399px;
    object-fit: contain;
}

.feature-image-protect {
    width: 550px;
    height: 403px;
    object-fit: contain;
}

/* Elevate / Features - mobile */
@media (max-width: 575.98px) {
    /* Ẩn hình trong section Elevate & Protect trên mobile để nội dung gọn hơn */
    .feature-image-wrapper,
    .feature-image {
        display: none !important;
    }
    
    /* Để đoạn mô tả không bị cắt ngang trên màn hình nhỏ */
    .feature-description {
        width: 100% !important;
        display: block !important;
        margin-top: 16px !important;
        text-align: left !important;
    }
}

/* Elevate / Features - tablet (iPad mini ~768px): ẩn hình, dùng layout giống mobile nhưng giữ font-size gốc */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Ẩn hình trong section Elevate & Protect để giảm khoảng trống */
    .feature-image-wrapper,
    .feature-image {
        display: none !important;
    }
    
    .feature-description {
        width: 100% !important;
        display: block !important;
        margin-top: 16px !important;
        text-align: left !important;
    }
    
    /* Căn giữa cụm Instantly detect / Risk và Protect / Ad Performance như mobile,
       nhưng không thay đổi font-size hiện tại */
    .feature-section-2 .feature-heading-row {
        gap: 4px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .feature-section-2 .feature-heading-row .feature-title,
    .feature-section-2 .feature-title {
        width: auto !important;
        display: inline-block !important;
        margin: 0 !important;
    }
    
    /* Giảm hoàn toàn khoảng cách dọc do g-5 tạo ra trên tablet */
    .row.align-items-center.g-5 {
        --bs-gutter-y: 0rem !important;
    }
}

/* Feature Badges */
.badge-chip.campaign-performance {
    background-image: url("../images/frontend-pages/feature-badge-campaign-performance.png");
    font-size: 40px;
    font-weight: 800;
    padding: 10px 36px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    min-width: fit-content;
    width: fit-content;
    margin-bottom: -10px;
    position: relative;
    z-index: 2;
}

.badge-chip.campaign-performance .badge-label {
    color: #F72585;
}

.badge-chip.customer-satisfaction {
    background-image: url("../images/frontend-pages/feature-badge-customer-satisfaction.png");
    font-size: 40px;
    font-weight: 800;
    padding: 20px 45px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    min-width: fit-content;
    width: fit-content;
    position: relative;
    z-index: 1;
    margin-top: -5px;
}

.badge-chip.customer-satisfaction .badge-label {
    color: #8105BD;
    display: inline-block !important;
    transform: rotate(0.74deg) !important;
}

/* Feature badges - mobile */
@media (max-width: 575.98px) {
    /* Giảm font tiêu đề Elevate cho đồng bộ với các section khác */
    .feature-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    .badge-chip.campaign-performance,
    .badge-chip.customer-satisfaction {
        font-size: 20px !important;
        padding: 6px 16px !important;
        background-size: 100% 100% !important;
        width: auto !important;
        min-width: 0 !important;
        margin-bottom: 0;
        margin-top: 4px;
    }
}

/* Badge Risk - dùng chung cho cả tiếng Anh và tiếng Việt */
.badge-chip.risk {
    background-image: url("../images/frontend-pages/feature-badge-risk.png");
    font-size: 40px;
    font-weight: 800;
    padding: 10px 36px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
    box-sizing: border-box;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Badge Risk - tiếng Việt cần padding lớn hơn */
.lang-vi .badge-chip.risk {
    padding: 10px 30px;
    margin-left: 12px;
}

.badge-chip.risk .badge-label {
    color: #F72585;
}

/* Badge Ad Performance - dùng chung cho cả tiếng Anh và tiếng Việt */
.badge-chip.ad-performance {
    background-image: url("../images/frontend-pages/feature-badge-customer-satisfaction.png");
    font-size: 40px;
    font-weight: 800;
    padding: 10px 36px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
    box-sizing: border-box;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Badge Ad Performance - tiếng Việt cần padding lớn hơn cho chữ dài */
.lang-vi .badge-chip.ad-performance {
    padding: 10px 30px;
}

.badge-chip.ad-performance .badge-label {
    color: #8105BD;
    display: inline-block !important;
    transform: rotate(0.74deg) !important;
}

/* Feature badges (Risk / Ad Performance) - mobile */
@media (max-width: 575.98px) {
    .badge-chip.risk,
    .badge-chip.ad-performance {
        /* Thu nhỏ như badge Campaign/Performance ở Boost và tránh tràn biên phải */
        font-size: 20px !important;
        padding: 4px 12px !important;
        background-size: 100% 100% !important;
        width: auto !important;
        min-width: fit-content !important;
        margin-top: 4px;
        margin-bottom: 0;
        white-space: nowrap !important;
    }
    
    /* Mobile - tiếng Việt cần padding lớn hơn */
    .lang-vi .badge-chip.risk {
        padding: 4px 16px !important;
    }
    
    .lang-vi .badge-chip.ad-performance {
        padding: 4px 18px !important;
    }
    
    
    /* Đưa badge Risk / Ad Performance sát cụm chữ và căn giữa cụm tiêu đề */
    .feature-section-2 .feature-heading-row {
        gap: 4px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .feature-section-2 .feature-heading-row .feature-title,
    .feature-section-2 .feature-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        width: auto !important;
        display: inline-block !important;
        margin: 0 !important;
    }
    
    /* Description Protect (đã 16px) + Elevate + Boost đồng bộ 16px */
    .feature-section-2 .feature-description,
    .feature-description,
    .boost-copy p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Giảm khoảng cách dọc giữa Elevate và Instantly detect trên mobile */
    section.pb-3.pb,
    section.pb-3.pb.feature-section-2 {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ẩn hoàn toàn khối hình và không chiếm chiều cao */
    .feature-image-wrapper,
    .feature-image,
    .feature-image-elevate,
    .feature-image-protect {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Đoạn mô tả Elevate chỉ cách section dưới một khoảng nhỏ */
    .feature-description {
        margin-top: 12px !important;
        margin-bottom: 6px !important;
    }
    
    /* Giảm gutter dọc của các row g-5 trong các feature section (nguyên nhân chính tạo khoảng trống) */
    .feature-section-2 .row.g-5,
    .pb-3.pb .row.g-5,
    .row.align-items-center.g-5 {
        --bs-gutter-y: 0rem !important;
    }

    .pb-5{
        padding-bottom: 20px !important;
    }

    .client-globally-header{
        margin-bottom: 20px !important;
    }
}

.trusted-carousel .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -48px;
    right: -48px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
}

.trusted-carousel .owl-nav.disabled {
    display: flex !important;
}

.trusted-carousel .owl-nav button {
    width: 48px;
    height: 48px;
    background: transparent !important;
    border: none !important;
    pointer-events: all;
}

.trusted-carousel .owl-nav button img {
    width: 24px;
    height: 24px;
}

/* Client Globally Section */
.client-globally-section {
    padding: 60px 0 30px;
}

.client-globally-header {
    margin-bottom: 40px;
}

.client-globally-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.client-globally-badge {
    background-color: #8105BD;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: 800;
    height: 75px;
    border-radius: 50px;
    padding: 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.client-globally-title {
    color: #000000;
    font-size: 56px;
    font-weight: 800;
    margin: 0;
}

.client-globally-subtitle {
    color: #000000;
    font-size: 20px;
    margin: 0;
}

.client-carousel-wrapper {
    position: relative;
    padding: 12px 48px;
    overflow: visible;
}

.client-testimonial-card {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #EEE3F8;
    padding: 8px;
    margin: 0 10px;
    /* Cho card tự giãn theo nội dung để không cắt chữ */
    height: auto;
    display: flex;
    align-items: stretch;
}

.client-card-content {
    display: flex;
    gap: 16px;
    width: 100%;
    height: 100%;
}

.client-image-placeholder {
    width: 224px;
    height: 100%;
    background: #EEE3F8;
    border-radius: 8px;
    flex-shrink: 0;
}

.client-testimonial-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.client-quote {
    color: #000000;
    /* Tăng kích thước chữ theo yêu cầu */
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 12px;
    /* Bỏ overflow để hiển thị đủ nội dung */
    flex: 1;
}

.client-name {
    color: #000000;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.client-title {
    color: #6B7280;
    font-size: 14px;
    margin-bottom: 0;
}

.client-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin-top: auto;
}

.rating-stars {
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    display: inline-block !important;
}

.client-carousel .owl-item .rating-stars {
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
}

.rating-value {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.client-carousel .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -48px;
    right: -48px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
}

.client-carousel .owl-nav.disabled {
    display: flex !important;
}

.client-carousel .owl-nav button {
    width: 48px;
    height: 48px;
    background: transparent !important;
    border: none !important;
    pointer-events: all;
}

.client-carousel .owl-nav button img {
    width: 24px;
    height: 24px;
}

.client-carousel .owl-stage-outer {
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.client-carousel .owl-stage {
    display: flex;
    background: transparent !important;
}

.client-carousel .owl-item {
    display: flex;
    height: auto;
    background: transparent !important;
}

@media (max-width: 767.98px) {
    .client-globally-title-row {
        flex-direction: column;
        gap: 12px;
    }

    .client-globally-badge {
        font-size: 32px;
        height: 60px;
        padding: 0 24px;
    }

    .client-globally-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .client-card-content {
        flex-direction: column;
    }

    .client-image-placeholder {
        width: 100%;
        height: 140px;
    }

    .client-carousel-wrapper {
        padding: 8px 12px;
    }

    .client-carousel .owl-nav {
        left: -20px;
        right: -20px;
    }
}

/* Client Globally - điều chỉnh mũi tên trên mobile nhỏ (ví dụ 344px) */
@media (max-width: 575.98px) {
    .client-carousel .owl-nav {
        position: static !important;
        margin-top: 8px !important;
        justify-content: center !important;
        gap: 24px !important;
        transform: none !important;
    }
    
    .client-carousel .owl-nav button {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 767.98px) {
    .trust-card {
        padding: 0;
    }
}

.header-actions .btn-gradient {
    border-radius: 8px;
    height: 40px;
    min-width: 80px;
    width: 80px;
    font-size: 14px;
    line-height: 40px;
    color: #FFFFFF;
    padding: 0;
}

.header-actions .btn-outline-pill {
    border-radius: 8px;
    height: 40px;
    min-width: 80px;
    width: 80px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tiếng Việt - tăng padding cho nút đăng nhập để chữ không sát biên và không xuống dòng */
.lang-vi .header-actions .btn-outline-pill {
    padding: 0 12px;
    min-width: auto;
    width: auto;
    white-space: nowrap;
    font-size: 14px;
}

.btn-gradient {
    background: var(--linear-color);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 32px;
    border-radius: 50px;
    padding: 0 36px;
    height: 56px;
    line-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Thu nhỏ nút gradient trong offcanvas mobile */
.offcanvas .btn-gradient {
    font-size: 14px;
    height: 40px;
    line-height: 48px;
    padding: 0 24px;
}

.btn-outline-pill {
    border: 0.5px solid #979797;
    border-radius: 8px;
    padding: 0 26px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Tiếng Việt - tăng padding cho btn-outline-pill và đảm bảo chữ không xuống dòng */
.lang-vi .btn-outline-pill {
    padding: 0 28px;
    white-space: nowrap;
}

.hero-section {
    padding: 60px 0 40px;
}

.hero-grid {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.hero-text {
    flex: 1 1 480px;
}

.hero-pretitle {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #f04586;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.hero-heading {
    font-size: 64px;
    line-height: 1.15;
    font-weight: 800;
    color: #080808;
    margin-bottom: 24px;
}

.hero-heading .badge-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    padding: 10px 20px;
    margin: 0 6px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
    box-sizing: border-box;
    position: relative;
}

.hero-heading .badge-chip .badge-label {
    display: inline-flex;
    align-items: center;
}

/* Hero mobile (<= 575px, ví dụ width 344px) */
@media (max-width: 575.98px) {
    .hero-section {
        padding: 0 0 32px;
    }
    
    .hero-grid {
        flex-direction: column;
        gap: 32px !important;
    }
    
    .hero-text {
        flex: 1 1 auto;
    }
    
    .hero-pretitle {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .hero-heading {
        font-size: 34px;
        line-height: 1.25;
        margin-bottom: 16px;
    }
    
    .hero-heading .badge-chip {
        /* Padding ngang vừa đủ cho text */
        padding: 8px 18px;
        margin: 0 4px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        white-space: nowrap;
        min-width: fit-content;
        width: fit-content;
        box-sizing: border-box;
    }
    
    .hero-description {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 24px;
    }
    
    .hero-actions {
        gap: 12px;
        margin-bottom: 0 !important;
    }
    
    .hero-actions .btn-gradient,
    .hero-actions .btn-outline-rounded {
        font-size: 18px;
        height: 48px;
        line-height: 48px;
        padding: 0 24px;
        width: 100%;
        justify-content: center;
        margin-bottom: 0 !important;
    }
    
    .hero-visual {
        flex: 0 0 auto !important;
        max-width: 280px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .trust-section {
        padding: 0;
        margin-bottom: 16px;
    }
    
    .trusted-carousel .owl-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -32px;
        right: -32px;
        justify-content: space-between;
        gap: 0;
        pointer-events: none;
    }
    
    .trusted-carousel .owl-nav button {
        width: 32px;
        height: 32px;
        pointer-events: all;
    }
    
    .trusted-carousel .owl-nav button img {
        width: 20px;
        height: 20px;
    }
    
    .boost-section-row {
        margin-top: 6px;
    }
    
    .boost-metric-card {
        padding: 14px 10px;
        height: auto;
    }
    
    .boost-metric-value {
        font-size: 28px;
        margin-bottom: 4px;
    }
    
    .boost-metric-label {
        font-size: 13px;
        line-height: 1.3;
    }
}

/* Hero cực nhỏ (~344px trở xuống): giảm thêm kích thước heading + badge để tránh "Ads" bị tách dòng */
@media (max-width: 360px) {
    .hero-heading {
        font-size: 30px;
    }
    
    .hero-heading .badge-chip {
        transform: scale(0.9);
        transform-origin: left center;
        margin: 0 2px;
    }
}

/* Badge Ads - mặc định tiếng Anh */
.badge-chip.ads {
    background-image: url("../images/frontend-pages/badge-ads-en.png");
}

/* Badge Ads - tiếng Việt */
.lang-vi .badge-chip.ads {
    background-image: url("../images/frontend-pages/badge-ads-vi.png");
}

/* Hero section - badge performance mặc định tiếng Anh */
.hero-section .badge-chip.performance {
    background-image: url("../images/frontend-pages/badge-performance.png");
}

.hero-section .badge-chip.performance .badge-label {
    transform: rotate(-2.41deg);
}

/* Boost section - dùng boost-badge-performance.svg mới */
.boost-copy .badge-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    padding: 10px 26px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
}

.boost-copy .badge-chip.campaign,
.boost-copy .badge-chip.performance {
    font-size: 40px;
}

.boost-copy .badge-chip .badge-label {
    display: inline-flex;
    align-items: center;
}

.boost-copy .badge-chip.performance {
    background-image: url("../images/frontend-pages/boost-badge-performance.png");
}

.boost-copy .badge-chip.performance .badge-label {
    transform: rotate(-2.02deg);
    color: #F72585;
}

.badge-chip.campaign {
    background-image: url("../images/frontend-pages/boost-badge-campaign.svg");
}

.badge-chip.campaign .badge-label {
    color: #FF6A00;
}

.badge-chip.adtify {
    background-image: url("../images/frontend-pages/boost-badge-adtify.svg");
}

.skew-with {
    display: inline-block;
    transform: rotate(2.67deg);
}

.hero-description {
    font-size: 28px;
    color: #000000;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.btn-outline-rounded {
    border: 2px solid #8105BD;
    border-radius: 50px;
    padding: 0 36px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 32px;
    color: #8105BD;
    background: transparent;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.hero-visual {
    flex: 0 0 525px;
    max-width: 525px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ẩn hero-visual::before khi có multi-channel-orbit */
.hero-visual:has(.multi-channel-orbit)::before {
    display: none;
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 182, 205, 0.55) 0%, rgba(255, 255, 255, 0) 65%);
    border-radius: 50%;
    transform: scale(1.1);
    z-index: 0;
}

/* Chỉ áp dụng cho img trực tiếp trong hero-visual (không phải trong orbit) */
.hero-visual > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-height: 525px;
    object-fit: contain;
}

/* Multi-channel orbit visual around center logo */
.multi-channel-orbit {
    position: relative;
    width: 500px;
    height: 500px;
    max-width: 500px;
    max-height: 500px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
    z-index: 0;
}

/* Hai đường tròn border để tạo cảm giác logo chạy trên quỹ đạo */
.multi-channel-orbit::before,
.multi-channel-orbit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1; /* luôn nằm dưới các logo */
}

/* Vòng trong: khớp với bán kính 280px của orbit-ring-inner */
.multi-channel-orbit::before {
    width: 280px;
    height: 280px;
    border: 1px solid #EEE3F8;
}

/* Vòng ngoài: khớp với bán kính ~505px của orbit-ring-outer */
.multi-channel-orbit::after {
    width: 505px;
    height: 505px;
    border: 3px solid #EEE3F8;
}

.orbit-center {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-center img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    display: block !important;
    position: static !important;
    z-index: auto !important;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform-origin: center center;
}

.orbit-ring-inner {
    width: 280px;
    height: 280px;
    animation: orbit-cw 18s linear infinite;
    transform-origin: center center;
}

.orbit-ring-outer {
    width: 505px;
    height: 505px;
    animation: orbit-ccw 18s linear infinite;
    transform-origin: center center;
}

.orbit-item {
    --angle: 0deg;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transform-origin: 50% 50%;
    transition: transform 0.2s ease;
}


.orbit-ring-inner .orbit-item:nth-child(1) {
    /* 1h30 (45deg) - top-right */
    --tx: 98.99px; --ty: -98.99px;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg);
}

.orbit-ring-inner .orbit-item:nth-child(2) {
    /* 4h30 (135deg) - bottom-right */
    --tx: 98.99px; --ty: 98.99px;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg);
}

.orbit-ring-inner .orbit-item:nth-child(3) {
    /* 7h30 (225deg) - bottom-left */
    --tx: -98.99px; --ty: 98.99px;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg);
}

.orbit-ring-inner .orbit-item:nth-child(4) {
    /* 10h30 (315deg) - top-left */
    --tx: -98.99px; --ty: -98.99px;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg);
}


.orbit-ring-outer .orbit-item:nth-child(1) {
    /* 12h (0deg) - top */
    --tx: 0px; --ty: -252px;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg);
}

.orbit-ring-outer .orbit-item:nth-child(2) {
    /* 3h (90deg) - right */
    --tx: 252px; --ty: 0px;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg);
}

.orbit-ring-outer .orbit-item:nth-child(3) {
    /* 6h (180deg) - bottom */
    --tx: 0px; --ty: 252px;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg);
}

.orbit-ring-outer .orbit-item:nth-child(4) {
    /* 9h (270deg) - left */
    --tx: -252px; --ty: 0px;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg);
}

.orbit-item img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    object-fit: contain !important;
    padding: 12px;
    display: block !important;
    position: static !important;
    z-index: auto !important;
    transition: transform 0.2s ease;
}

/* Hover: phóng nhẹ logo (chỉ ảnh, vẫn giữ quỹ đạo và hướng) */
.orbit-item img:hover {
    transform: scale(1.15);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.20);
}

@keyframes orbit-cw {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes orbit-ccw {
    from {
        transform: translate(-50%, -50%) rotate(-90deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-450deg);
    }
}

/* Giữ logo thẳng: không xoay item, chỉ xoay ngược logo (img) so với parent */
.orbit-ring-inner .orbit-item {
    animation: none;
}

.orbit-ring-outer .orbit-item {
    animation: none;
}

/* Vòng trong: parent quay +360deg, logo quay -360deg để giữ hướng cố định */
.orbit-ring-inner .orbit-item img {
    animation: counter-rotate-inner 18s linear infinite;
    transform-origin: center center;
    transition: transform 0.2s ease;
}

/* Vòng ngoài: parent quay từ -90deg đến -450deg, logo quay +360deg bù pha */
.orbit-ring-outer .orbit-item img {
    animation: counter-rotate-outer 18s linear infinite;
    transform-origin: center center;
    transition: transform 0.2s ease;
}

@keyframes counter-rotate-inner {
    from {
        rotate: 0deg;
    }
    to {
        rotate: -360deg;
    }
}

@keyframes counter-rotate-outer {
    from {
        rotate: 90deg;
    }
    to {
        rotate: 450deg;
    }
}

/* Loại trừ các img trong multi-channel-orbit khỏi CSS hero-visual img */
.multi-channel-orbit img {
    position: static !important;
    z-index: auto !important;
    object-fit: contain !important;
}

@media (max-width: 991.98px) {
    .hero-grid {
        flex-direction: column;
        gap: 0px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 50px;
    }
}

@media (max-width: 991.98px) {
    .header-pill {
        border-radius: 32px;
        align-items: flex-start;
    }
    
    .header-pill .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .header-actions {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn,
    .header-actions a {
        width: 100%;
        text-align: center;
    }
}

/* Responsive cho orbit ở màn hình trung bình (992px - 1299px) */
@media (min-width: 992px) and (max-width: 1299px) {
    .multi-channel-orbit {
        width: 420px;
        height: 420px;
        max-width: 420px;
        max-height: 420px;
    }

    /* Vòng kẻ */
    .multi-channel-orbit::before {
        width: 240px;
        height: 240px;
    }

    .multi-channel-orbit::after {
        width: 420px;
        height: 420px;
    }

    /* Ring quay và vị trí icon */
    .orbit-ring-inner {
        width: 240px;
        height: 240px;
    }

    .orbit-ring-inner .orbit-item:nth-child(1) {
        transform: translate(-50%, -50%) translate(84.85px, -84.85px) rotate(0deg);
    }
    .orbit-ring-inner .orbit-item:nth-child(2) {
        transform: translate(-50%, -50%) translate(84.85px, 84.85px) rotate(0deg);
    }
    .orbit-ring-inner .orbit-item:nth-child(3) {
        transform: translate(-50%, -50%) translate(-84.85px, 84.85px) rotate(0deg);
    }
    .orbit-ring-inner .orbit-item:nth-child(4) {
        transform: translate(-50%, -50%) translate(-84.85px, -84.85px) rotate(0deg);
    }

    .orbit-ring-outer {
        width: 420px;
        height: 420px;
    }

    .orbit-ring-outer .orbit-item:nth-child(1) {
        transform: translate(-50%, -50%) translate(0px, -210px) rotate(0deg);
    }
    .orbit-ring-outer .orbit-item:nth-child(2) {
        transform: translate(-50%, -50%) translate(210px, 0px) rotate(0deg);
    }
    .orbit-ring-outer .orbit-item:nth-child(3) {
        transform: translate(-50%, -50%) translate(0px, 210px) rotate(0deg);
    }
    .orbit-ring-outer .orbit-item:nth-child(4) {
        transform: translate(-50%, -50%) translate(-210px, 0px) rotate(0deg);
    }
}

@media (max-width: 575.98px){
     /* Thu gọn khu vực hero để không tràn lề, vẫn đủ khoảng cho orbit */
     .hero-visual {
        flex: 0 0 340px !important;
        max-width: 340px !important;
        width: 100% !important;
    }

    /* Kích thước tổng thể orbit */
    .multi-channel-orbit {
        width: 320px !important;
        height: 320px !important;
        max-width: 320px !important;
        max-height: 320px !important;
    }

    /* Vòng kẻ */
    .multi-channel-orbit::before {
        width: 190px !important;
        height: 190px !important;
        border-width: 1px !important;
    }
    .multi-channel-orbit::after {
        width: 320px !important;
        height: 320px !important;
        border-width: 3px !important;
    }

    /* Vòng quay + vị trí icon */
    .orbit-ring-inner {
        width: 170px !important;
        height: 170px !important;
    }
    /* bán kính 85px trừ nửa item (~25px) => ~60px */
    .orbit-ring-inner .orbit-item:nth-child(1) { --tx: 60px; --ty: -60px; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) !important; }
    .orbit-ring-inner .orbit-item:nth-child(2) { --tx: 60px; --ty: 60px; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) !important; }
    .orbit-ring-inner .orbit-item:nth-child(3) { --tx: -60px; --ty: 60px; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) !important; }
    .orbit-ring-inner .orbit-item:nth-child(4) { --tx: -60px; --ty: -60px; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) !important; }

    .orbit-ring-outer {
        width: 300px !important;
        height: 300px !important;
    }
    .orbit-ring-outer .orbit-item:nth-child(1) { --tx: 0px; --ty: -150px; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) !important; }
    .orbit-ring-outer .orbit-item:nth-child(2) { --tx: 150px; --ty: 0px; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) !important; }
    .orbit-ring-outer .orbit-item:nth-child(3) { --tx: 0px; --ty: 150px; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) !important; }
    .orbit-ring-outer .orbit-item:nth-child(4) { --tx: -150px; --ty: 0px; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) !important; }

    /* Kích thước item và logo */
    .orbit-center {
        width: 90px !important;
        height: 90px !important;
    }
    .orbit-center img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .orbit-item {
        width: 50px !important;
        height: 50px !important;
    }
    .orbit-item img {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        padding: 8px;
        border-radius: 12px;
    }
}

.card .card-body {
    min-height: auto;
    /* hoặc xóa hẳn */
    padding: 1.5rem;
    /* padding vừa phải */
}

.logo-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    /* giảm khoảng cách giữa các logo */
    flex-wrap: wrap;
}

.logo-desktop {
    display: block;
    max-height: 220px;
}

.logo-mobile {
    display: none;
}

.logo-yoday {
    max-height: 70px;
    /* logo Yoday nhỏ hơn */
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .logo-desktop {
        display: block;
        max-height: 160px;
        /* vừa hơn, tránh khoảng trống */
    }

    .logo-mobile {
        display: none;
    }

    .logo-yoday {
        max-height: 60px;
        /* nhỏ hơn chút so với desktop */
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: block;
        max-height: 100px;
        margin-top: 10px;
    }

    .logo-yoday {
        max-height: 50px;
        /* nhỏ hơn trên mobile */
        margin-top: 20px;
    }

    .card .card-body {
        padding: 1rem;
    }

    .card .card-body h5 {
        font-size: 1rem;
    }

    .card .card-body p {
        font-size: 0.875rem;
    }

    /* CTA hero responsive */
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px !important;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .hero-cta a.text-dark {
        justify-content: center;
    }
}

/* Vertical AI Agent Section */
.vertical-ai-section {
    padding: 30px 0;
}

.vertical-ai-header {
    text-align: center;
    margin-bottom: 48px;
}

.vertical-ai-title {
    font-size: 56px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 16px;
}

.vertical-ai-subtitle {
    font-size: 20px;
    color: #000000;
    margin: 0;
}

.vertical-ai-filters {
    background-color: #EEE3F8;
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 48px;
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}

.filter-tags-row-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.filter-tags-row {
    display: flex;
    gap: 12px;
    white-space: nowrap;
    width: fit-content;
}

.filter-tags-row-1 {
    animation: scroll-filter-tags-1 20s linear infinite;
}

.filter-tags-row-2 {
    animation: scroll-filter-tags-2 25s linear infinite;
}

.filter-tags-row-wrapper:hover .filter-tags-row {
    animation-play-state: paused;
}

@keyframes scroll-filter-tags-1 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-filter-tags-2 {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.filter-tag {
    background-color: transparent;
    border: 0.5px solid #8105BD;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-tag:hover {
    background-color: rgba(129, 5, 189, 0.1);
}

.filter-tag.active {
    background-color: #8105BD;
    border: 0.5px solid #8105BD;
    color: #FFFFFF;
}

.ai-product-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    padding: 24px;
    min-width: 320px;
    flex-shrink: 0;
}

.ai-product-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.ai-product-icon {
    width: 75px;
    height: 75px;
    background-color: #EEE3F8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-product-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ai-product-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px; /* center title + subtitle roughly vs icon */
}

.ai-product-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin: 0;
}

.ai-product-subtitle {
    font-size: 20px;
    color: #979797;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-product-subtitle .bullet {
    width: 16px;
    height: 16px;
    background-color: #979797;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ai-product-description {
    font-size: 20px;
    color: #2E2E2E;
    line-height: 1.6;
    margin: 0;
}

.ai-product-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.ai-action-btn {
    background: #F5F5FA;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    color: #2E2E2E;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-action-btn:hover {
    background: #E5E7EB;
}

.ai-product-metrics {
    display: flex;
    gap: 40px;
    padding-top: 14px;
}

.ai-metric {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-metric-icon {
    width: 24px;
    height: 24px;
}

.ai-metric-value {
    font-size: 16px;
    font-weight: 400;
    color: #2E2E2E;
}

.ai-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

@media (max-width: 991.98px) {
    .ai-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .vertical-ai-section {
        padding: 30px 0;
    }

    .vertical-ai-title {
        font-size: 40px;
    }

    .vertical-ai-subtitle {
        font-size: 18px;
    }

    .vertical-ai-filters {
        padding: 20px;
    }

    .filter-tags-row-wrapper {
        margin-top: 12px;
    }

    .filter-tags-row-wrapper:first-child {
        margin-top: 0;
    }

    .filter-tags-row {
        gap: 8px;
    }

    .filter-tag {
        font-size: 14px;
        padding: 10px 16px;
        white-space: nowrap;
    }

    .ai-products-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ai-product-card {
        width: 100%;
    }
}

/* Integration Section */
.integration-section {
    padding: 40px 0;
    position: relative;
}

.integration-section .custom-container {
    position: relative;
    margin: 0 auto;
    max-width: 1386px;
    width: calc(100% - 32px);
    padding: 64px 40px;
    background: var(--linear-glass-color);
    border-radius: 24px;
    overflow: hidden;
}

.integration-section .custom-container::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 24px;
    background: var(--linear-glass-stroke-color);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.integration-section .custom-container > * {
    position: relative;
    z-index: 1;
}

.integration-header {
    text-align: center;
    margin-bottom: 64px;
}

.integration-title {
    font-size: 56px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
}

.integration-description {
    font-size: 20px;
    color: #000000;
    line-height: 1.6;
    max-width: 838px;
    margin: 0 auto;
    text-align: left;
}

.integration-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.integration-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.integration-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.integration-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.integration-card-icon {
    width: 67px;
    height: 67px;
    background-color: #EEE3F8;
    border-radius: 50%;
    flex-shrink: 0;
}

.integration-card-content {
    flex: 1;
}

.integration-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 4px 0;
}

.integration-card-subtitle {
    font-size: 16px;
    color: #5E5E5E;
    margin: 0;
}

.integration-card-description {
    font-size: 18px;
    color: #000000;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex: 1;
}

.integration-card-btn {
    background-color: #EEE3F8;
    color: #000000;
    border: none;
    border-radius: 8px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: auto;
}

.integration-card-btn:hover {
    background-color: #dfd4f0;
}

/* Pricing Section */
.pricing-section {
    padding: 30px 0;
}

.pricing-header {
    text-align: center;
    margin-bottom: 32px;
}

.pricing-title {
    color: #000000;
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 12px;
}

.pricing-subtitle {
    font-size: 20px;
    color: #000000;
    margin: 0;
}

.pricing-toggle {
    display: flex;
    gap: 12px;
    padding: 5px 24px;
    max-height: 64px;
    background-color: #F5F5FA;
    border-radius: 8px;
    margin: 0 auto 40px;
    justify-content: center;
    width: fit-content;
    border: 1px solid #EEE3F8;
}

.pricing-toggle-btn {
    background-color: #FCF8FF;
    border: 1px solid #EEE3F8;
    height: 48px;
    padding: 0 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pricing-toggle-btn.active {
    background: #FFFFFF;
    border: none;
    color: #000000;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pricing-card {
    background: #FCF8FF;
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    position: relative;
}

.pricing-card.popular {
    background-image: url("../images/frontend-pages/bg-pricing-highlight.png");
    background-size: cover;
    background-position: calc(50% + 20px) bottom;
}

.pricing-card-head {
    width: calc(100% + 64px);
    margin: -32px -32px 24px;
    background: #F72585;
    border-radius: 24px;
    padding: 16px 24px;
    color: #FFFFFF;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
}

.pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 70px;
}

.pricing-price span {
    font-size: 48px;
    font-weight: 800;
    color: #011212;
    text-align: center;
    line-height: 1;
}

.pricing-price span.highlight {
    font-size: 64px;
    background: var(--linear-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pricing-note {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #011212;
    min-height: 42px;
    display: flex;
    align-items: center;
}

/* Tiếng Việt - pricing-note dài hơn nên cần min-height lớn hơn */
.lang-vi .pricing-note {
    min-height: 56px;
    line-height: 1.4;
}

.pricing-card.popular .pricing-note {
    text-align: center;
    justify-content: center;
}

/* Tiếng Việt - popular card note */
.lang-vi .pricing-card.popular .pricing-note {
    min-height: 56px;
}

.pricing-note-highlight {
    background: var(--linear-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pricing-credits {
    background-color: #ffffff;
    align-self: center;
    padding: 8px 20px;
    border: 2px solid #FEE3EE;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #011212;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #011212;
    font-size: 14px;
    font-weight: 600;
}

.pricing-features li::before {
    content: '•';
    margin-right: 8px;
    color: #011212;
    font-size: 18px;
    line-height: 1;
}

.pricing-cta {
    margin-top: auto;
    height: 51px;
    border-radius: 8px;
    border: 1px solid #F72585;
    background: #FEE3EE;
    color: #F72585;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pricing-cta:hover {
    background: #F72585;
    color: #FFFFFF;
}

@media (max-width: 1199.98px) {
    .integration-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 991.98px) {
    .pricing-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .integration-section {
        padding: 60px 0;
    }

    .integration-title {
        font-size: 40px;
    }

    .integration-description {
        font-size: 18px;
    }

    .integration-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .integration-card {
        width: 100%;
    }

    .pricing-title {
        font-size: 40px;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .pricing-card.popular {
        transform: none;
    }
}

/* Case Study Section */
.case-study-section {
    padding: 30px 0;
}

.case-study-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-study-title {
    font-size: 56px;
    font-weight: 700;
    color: #000000;
    margin: 0;
}

.case-study-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
}

.case-study-card {
    background: #000000;
    border-radius: 24px;
    overflow: hidden;
}

.case-study-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.case-study-card--top {
    flex: 1;
    max-width: 100%;
    height: 315px;
}

.case-study-bottom-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.case-study-card--bottom-left {
    width: 100%;
    max-width: 100%;
    height: 315px;
}

.case-study-card--bottom-right {
    width: 100%;
    max-width: 100%;
    height: 315px;
}

.case-study-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1199.98px) {
    .case-study-layout {
        flex-direction: column;
    }

    .case-study-right {
        width: 100%;
    }

    .case-study-card--top,
    .case-study-card--bottom-left,
    .case-study-card--bottom-right {
        max-width: 100%;
        flex: 1 1 0;
    }

    .case-study-bottom-row {
        flex-direction: column;
    }
}

@media (max-width: 991.98px) {
    .case-study-top-row {
        display: block;
    }
    
    .case-study-left {
        margin-bottom: 24px;
    }
    
    .case-study-title {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .case-study-card--top {
        width: 100%;
        max-width: 100%;
    }
}

/* Blog Section */
.blog-section {
    padding: 30px 0;
}

.blog-header {
    margin-bottom: 40px;
}

.blog-title {
    font-size: 56px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
}

.blog-subtitle {
    font-size: 18px;
    color: #6B7280;
    margin: 0;
}

.blog-carousel-wrapper {
    position: relative;
    padding: 0 48px;
}

.blog-carousel .owl-stage-outer {
    padding: 8px 0 24px;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
}

.blog-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    padding: 16px 10px 20px;
    margin: 0 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card-thumb {
    width: 100%;
    height: 208px;
    border-radius: 8px;
    background-color: #EEE3F8;
    margin-bottom: 12px;
    overflow: hidden;
}

.blog-card-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.blog-card-meta-row {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #2E2E2E;
}

.blog-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.blog-meta-icon {
    width: 24px;
    height: 24px;
}

.blog-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #2E2E2E;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.blog-card-excerpt {
    font-size: 14px;
    color: #2E2E2E;
    line-height: 1.5;
    margin: 0 0 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
}

.blog-card-cta {
    margin-top: auto;
    align-self: flex-end;
    padding: 6px 48px;
    border-radius: 8px;
    border: none;
    background-color: #EEE3F8;
    color: #2E2E2E;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.blog-card-cta:hover {
    background-color: #dfd4f0;
}

.blog-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: -48px;
    right: -48px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.blog-carousel .owl-nav button {
    width: 48px;
    height: 48px;
    pointer-events: all;
    background: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-carousel .owl-nav button img {
    width: 24px;
    height: 24px;
}

.blog-carousel .owl-nav.disabled {
    display: flex !important;
}

@media (max-width: 767.98px) {
    .blog-title {
        font-size: 40px;
    }
}

/* Footer Styles */
.zcy-footer {
    background: var(--linear-color);
    color: #ffffff;
    padding: 30px 0;
    margin-top: 40px;
}

.zcy-footer-content {
    padding: 0;
}

.zcy-footer-col {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Đảm bảo tất cả các cột có cùng padding và khoảng cách đều nhau */
.zcy-footer-col-1 {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 20px;
    margin-right: 120px;
}

.zcy-footer-col-2 {
    padding-left: 0;
    padding-right: 80px;
    padding-top: 0;
    padding-bottom: 20px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}

.zcy-footer-col-3 {
    padding-left: 0;
    padding-right: 80px;
    padding-top: 0;
    padding-bottom: 20px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}

.zcy-footer-col-4 {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 20px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}

/* Đảm bảo các cột có width phù hợp và không bị ảnh hưởng bởi nội dung */
.zcy-footer-col {
    box-sizing: border-box;
}

/* Các cột 2, 3, 4 chia đều phần còn lại */
.zcy-footer-col-2,
.zcy-footer-col-3,
.zcy-footer-col-4 {
    flex: 1 1 0;
    min-width: 0;
}

/* Tạo một wrapper cho title đầu tiên để căn giữa với logo */
.zcy-footer-col-2 > .zcy-footer-title:first-child,
.zcy-footer-col-3 > .zcy-footer-title:first-child,
.zcy-footer-col-4 > .zcy-footer-title:first-child {
    position: relative;
}

.zcy-footer-logo {
    margin-bottom: 12px;
    margin-top: 0;
    padding-top: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Đảm bảo logo có chiều cao nhất quán để tính toán căn giữa */
    height: 134px;
}

.zcy-footer-logo img {
    max-width: 100%;
    width: auto;
    height: 134px;
    display: block;
    object-fit: contain;
}

.zcy-footer-description {
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff;
    margin-bottom: 20px;
    opacity: 0.95;
}

.zcy-footer-address {
    margin-bottom: 30px;
}

.zcy-footer-address p {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 8px;
    opacity: 0.95;
}

.zcy-footer-address .zcy-footer-address-title {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 8px;
    opacity: 0.95;
    font-weight: 700;
}

.zcy-footer-copyright {
    font-size: 14px;
    color: #ffffff;
    opacity: 0.9;
    margin-top: auto;
}

.zcy-footer-copyright-wrapper {
    display: none;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Desktop: hiển thị copyright trong cột 1, ẩn copyright ở cuối */
.zcy-footer-copyright-desktop {
    display: block;
}

.zcy-footer-copyright-mobile {
    display: none;
    text-align: center;
    margin-top: 0;
}

/* Mobile: ẩn copyright trong cột 1, hiển thị copyright ở cuối */
@media (max-width: 991.98px) {
    .zcy-footer-copyright-desktop {
        display: none;
    }
    
    .zcy-footer-copyright-mobile {
        display: block;
    }
    
    .zcy-footer-copyright-wrapper {
        display: block;
        margin-top: 30px;
        padding-top: 20px;
    }
}

.zcy-copyright-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    opacity: 0.9;
}

.zcy-footer-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    padding-left: 0;
    margin-left: 0;
}

/* Căn giữa các title trong các cột 2, 3, 4 theo chiều dọc với logo */
/* Logo có height: 50px, title cần được căn giữa trong container có cùng chiều cao */
.zcy-footer-col-2 > .zcy-footer-title:first-child,
.zcy-footer-col-3 > .zcy-footer-title:first-child,
.zcy-footer-col-4 > .zcy-footer-title:first-child {
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.2;
    height: 134px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding-top: 0;
}

/* Bỏ height cố định trên màn hình nhỏ */
@media (max-width: 991.98px) {
    .zcy-footer-col-2 > .zcy-footer-title:first-child,
    .zcy-footer-col-3 > .zcy-footer-title:first-child,
    .zcy-footer-col-4 > .zcy-footer-title:first-child {
        height: auto;
    }
}

.zcy-footer-title-mt {
    margin-top: 30px;
}

.zcy-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Căn trái các links trong các cột 2, 3, 4 */
.zcy-footer-col-2 .zcy-footer-links,
.zcy-footer-col-3 .zcy-footer-links,
.zcy-footer-col-4 .zcy-footer-links {
    text-align: left;
}

.zcy-footer-col-2 .zcy-footer-links li,
.zcy-footer-col-3 .zcy-footer-links li,
.zcy-footer-col-4 .zcy-footer-links li {
    display: flex;
    justify-content: flex-start;
}

.zcy-footer-links li {
    margin-bottom: 12px;
}

.zcy-footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

.zcy-footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.zcy-footer-social {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.zcy-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.zcy-social-icon:hover {
    transform: scale(1.1);
}

.zcy-social-img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
}

/* Responsive Footer */
@media (max-width: 991.98px) {
    .zcy-footer-col {
        padding: 20px 15px;
    }
    
    .zcy-footer {
        padding: 40px 0 30px;
    }
    
    .zcy-footer-social {
        justify-content: flex-start;
        gap: 20px;
        flex-wrap: nowrap;
    }
}

/* iPad Pro và màn hình tablet lớn (992px - 1088px) */
@media (min-width: 992px) and (max-width: 1299px) {
    /* Hero section - iPad Pro */
    .hero-section {
        padding: 35px 0;
    }
    
    .hero-grid {
        gap: 40px;
        align-items: center;
    }
    
    .hero-text {
        flex: 1 1 450px;
    }
    
    .hero-heading {
        font-size: 48px;
        line-height: 1.2;
        margin-bottom: 20px;
    }
    
    .hero-heading .badge-chip {
        padding: 8px 20px;
        margin: 0 4px;
        font-size: 0.8em;
    }
    
    .hero-description {
        font-size: 22px;
        line-height: 1.5;
        margin-bottom: 28px;
    }
    
    .hero-actions {
        gap: 16px;
        margin-bottom: 40px;
    }
    
    .hero-actions .btn-gradient,
    .hero-actions .btn-outline-rounded {
        font-size: 24px;
        height: 52px;
        line-height: 52px;
        padding: 0 32px;
    }
    
    .hero-visual {
        flex: 0 0 450px;
        max-width: 450px;
    }
    
    .hero-visual img {
        max-width: 450px;
        max-height: 450px;
    }
    
    .trust-section {
        padding: 0 0 60px;
    }

    /* Boost section - fix cắt chữ ở màn hình 992px - 1088px */
    .boost-copy-title {
        font-size: 44px;
    }
    
    .boost-copy-row {
        gap: 12px;
    }
    
    .boost-copy-row .badge-chip.campaign,
    .boost-copy-row .badge-chip.performance {
        font-size: 32px;
        padding: 8px 28px;
    }
    
    .boost-copy-row.boost-row-1 .badge-chip.campaign {
        padding-left: 28px;
        padding-right: 28px;
        margin-left: -12px;
    }
    
    .boost-copy-row.boost-row-2 .badge-chip.performance {
        margin-left: -8px;
    }
    
    .boost-copy-row .badge-chip.adtify {
        font-size: 52px;
        height: 76px;
        padding: 8px 28px;
    }
    
    .boost-copy-subtitle,
    .boost-copy-subtitle .text-purple,
    .boost-copy-subtitle .text-black {
        font-size: 30px;
    }
    
    .boost-copy p {
        font-size: 18px;
        max-width: none !important;
        width: 100%;
    }
    
    /* Container và row - đảm bảo không vượt quá màn hình */
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .boost-section-row {
        flex-wrap: nowrap !important;
        overflow: visible;
        margin-left: 0;
        margin-right: 0;
        --bs-gutter-x: 1rem;
    }
    
    .boost-section-row>.col-lg-5 {
        flex: 0 0 auto;
        max-width: 42%;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .boost-section-row>.col-lg-7 {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 58%;
        overflow: visible;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .boost-copy {
        overflow: visible;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
    }
    
    .boost-copy-container {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }
    
    .boost-copy p {
        font-size: 18px;
        max-width: 100% !important;
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Feature Section (Elevate) - fix responsive cho màn hình 992px-1088px */
    .feature-title {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .feature-badges {
        gap: 8px;
        margin-bottom: 20px;
    }
    
    .badge-chip.campaign-performance,
    .badge-chip.customer-satisfaction {
        font-size: 28px;
        padding: 12px 24px;
        background-size: 100% 100%;
    }
    
    .feature-description {
        font-size: 18px;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 20px;
    }
    
    .feature-content {
        padding: 15px 0;
    }
    
    .row.align-items-center.g-5 {
        --bs-gutter-x: 1rem;
        margin-left: 0;
        margin-right: 0;
    }
    
    .row.align-items-center.g-5 > .col-lg-6 {
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0;
        flex: 1 1 auto;
        max-width: 50%;
    }
    
    .feature-image-wrapper {
        padding: 15px;
    }
    
    .feature-image {
        max-width: 100%;
        height: auto;
    }
    
    /* Feature Section 2 (Protect) - fix responsive cho màn hình 992px-1088px */
    .feature-section-2 .feature-heading-row {
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    .feature-section-2 .feature-heading-row .feature-title,
    .feature-section-2 .feature-title {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .badge-chip.risk,
    .badge-chip.ad-performance {
        font-size: 28px;
        padding: 12px 24px;
        background-size: 100% 100%;
        min-width: fit-content;
        width: fit-content;
        white-space: nowrap;
    }
    
    /* Tablet - tiếng Việt cần padding lớn hơn */
    .lang-vi .badge-chip.risk {
        padding: 12px 28px;
    }
    
    .lang-vi .badge-chip.ad-performance {
        padding: 12px 35px;
    }
    
    
    .feature-section-2 .feature-description {
        font-size: 18px;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 20px;
    }
    
    .feature-section-2 .feature-content {
        padding: 15px 0;
    }
    
    /* Client Globally Section - điều chỉnh font-size + layout cho màn 992px–1299px */
    .client-globally-title {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .client-globally-badge {
        font-size: 32px;
        height: 60px;
        padding: 0 28px;
    }
    
    .client-globally-subtitle {
        font-size: 18px;
    }

    /* Card testimonial: cho layout giống tablet để tránh bị dọc, hẹp ở ~1024px */
    .client-carousel-wrapper {
        padding: 20px 40px;
    }

    .client-testimonial-card {
        height: auto;
        min-height: 200px;
        padding: 16px;
        box-sizing: border-box;
    }

    .client-card-content {
        flex-direction: column;
        gap: 12px;
    }

    .client-image-placeholder {
        width: 100%;
        min-width: 0;
        height: 160px;
    }

    .client-quote {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    
    /* Vertical AI Agent Section - fix responsive cho màn hình 992px-1088px */
    .vertical-ai-title {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .vertical-ai-subtitle {
        font-size: 18px;
    }
    
    .vertical-ai-filters {
        padding: 24px;
        margin-bottom: 40px;
    }
    
    .filter-tag {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    .ai-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
        width: 100%;
    }
    
    .ai-product-card {
        padding: 18px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .ai-product-title {
        font-size: 22px;
    }
    
    .ai-product-subtitle {
        font-size: 18px;
    }
    
    .ai-product-description {
        font-size: 18px;
    }
    
    .ai-product-icon {
        width: 65px;
        height: 65px;
    }
    
    .ai-product-icon img {
        width: 35px;
        height: 35px;
    }
    
    /* Giảm khoảng cách giữa Vertical AI và Client Globally section */
    .vertical-ai-section {
        padding: 30px 0px !important;
    }
    
    .client-globally-section {
        padding: 30px 0px !important;
    }
    
    /* Integration Section - đồng bộ font-size */
    .integration-section {
        padding: 40px 0px 30px !important;
    }
    
    .integration-title {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .integration-description {
        font-size: 18px;
    }

    /* Case Study Section - đồng bộ font-size */
    .case-study-section {
        padding: 40px 0px !important;
    }
    
    .case-study-title {
        font-size: 44px;
        line-height: 1.2;
    }

    /* Pricing Section - đồng bộ font-size */
    .pricing-section {
        padding: 40px 0px !important;
    }
    
    .pricing-title {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .pricing-subtitle {
        font-size: 18px;
    }
    
    /* Pricing Cards - fix responsive để 3 cột bằng nhau */
    .pricing-cards {
        gap: 20px;
        align-items: stretch;
    }
    
    .pricing-card {
        padding: 32px;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .pricing-note {
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
        word-wrap: break-word;
        min-height: 38px;
        display: flex;
        align-items: center;
    }
    
    .pricing-card.popular .pricing-note {
        min-height: 38px;
        justify-content: center;
        text-align: center;
    }
    
    .pricing-price {
        min-height: 60px;
    }
    
    .pricing-price span {
        font-size: 40px;
    }
    
    .pricing-price span.highlight {
        font-size: 52px;
    }

    /* Blog Section - đồng bộ font-size */
    .blog-section {
        padding: 40px 0px !important;
    }
    
    .blog-title {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .blog-subtitle {
        font-size: 18px;
    }

    .zcy-footer-content {
        padding: 0 20px;
    }
    
    .zcy-footer-col-1 {
        padding-left: 20px;
    }

    .zcy-footer-title{
        font-size: 23px;
    }
    
    /* iPad Pro: dùng layout giống mobile cho phần copyright để tránh bị xuống dòng xấu */
    .zcy-footer-copyright-desktop {
        display: none;
    }
    
    .zcy-footer-copyright-mobile {
        display: block;
        text-align: center;
        margin-top: 0;
    }
    
    .zcy-footer-copyright-wrapper {
        display: block;
    }
    
    .zcy-footer-social {
        justify-content: flex-start;
        gap: 20px;
        flex-wrap: nowrap;
    }
}

/* Desktop hẹp (1025px - 1365px): thêm khoảng đệm cho cột 1 và căn lại social */
@media (min-width: 1025px) and (max-width: 1365px) {
    .zcy-footer-content {
        padding: 0 30px;
    }
    
    .zcy-footer-col-1 {
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 60px;
    }
    
    /* Giữ dòng copyright trên một hàng ở desktop hẹp */
    .zcy-footer-copyright {
        white-space: nowrap;
        font-size: 13px;
    }
    
    .zcy-footer-social {
        justify-content: flex-start;
        gap: 18px;
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .zcy-footer-col {
        padding: 15px;
    }
    
    .zcy-footer-col-1 {
        margin-right: 0;
    }
    
    .zcy-footer-logo {
        height: auto;
    }
    
    .zcy-footer-logo img {
        max-width: 200px;
        width: 200px;
        height: auto;
    }
    
    .zcy-footer-address {
        margin-bottom: 15px;
    }
    
    .zcy-footer-title {
        font-size: 15px;
    }
    
    .lang-vi .zcy-footer-title {
        font-size: 13px;
    }

    .zcy-footer-links a {
        font-size: 13px;
    }
    
    .lang-vi .zcy-footer-links a {
        font-size: 9px;
    }

    .zcy-footer-social {
        justify-content: flex-start;
        gap: 12px;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    
    .zcy-social-icon {
        flex-shrink: 0;
    }
    
    .zcy-social-img {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 575.98px) {
    .zcy-footer-logo img {
        max-width: 180px;
        width: 180px;
    }
    
    .zcy-footer-col-1 {
        margin-right: 0;
    }
    
    .zcy-footer-col-2,
    .zcy-footer-col-3,
    .zcy-footer-col-4 {
        padding-right: 0;
    }

    .zcy-footer-content {
        padding: 0 10px;
    }
    
    .zcy-footer-copyright {
        font-size: 11px;
        line-height: 1.5;
    }
    
    .zcy-footer-copyright-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .zcy-copyright-icon {
        width: 12px;
        height: 12px;
    }
}

.copyright {
    display: flex;
    align-items: center; /* căn giữa theo chiều dọc */
    justify-content: center; /* căn giữa theo chiều ngang */
    white-space: nowrap;
    padding-left: 10px;
}

.copyright-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-right: 4px; /* khoảng cách nhỏ giữa icon và chữ */
    margin-left: 4px;
}

.copyright-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    background: var(--linear-color);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline; /* đổi từ inline-block → inline để liền nhau */
}

/* Layout root to stick footer to bottom when content is short */
.layout-root {
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}

.layout-main {
    flex: 1;
}

/* Footer container align with main content */
.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #FFFFFF;
    border: 1px solid #EEE3F8;
    border-radius: 8px;
    color: #000000;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-back:hover {
        background: #EEE3F8;
        border-color: #000000;
    }

    .btn-back .icon-back {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }